fix:数据共享用户组获取全部用户组

package.json

@@ -22,6 +22,8 @@
   },
   "dependencies": {
     "@jiaminghi/data-view": "^2.7.3",
+    "@logicflow/core": "^1.1.29",
+    "@logicflow/extension": "^1.1.29",
     "@types/echarts": "^4.4.3",
     "babel-eslint": "^7.2.3",
     "babel-polyfill": "^6.26.0",

src/apis/service/interest/dataShare/index.js

@@ -16,7 +16,7 @@ export default {
   // 获取全部账户列表
   accountall: (data, params) => http(api + 'userall', data, 'post', params),
   // 获取全部用户组
-  groupall: (data, params) => http(api + 'getDataGroupList', data, 'post', params),
+  groupall: (data, params) => http(api + 'getDataGroupListAll', data, 'post', params),
   // 功能权限列表
   actionList: (data, params) => http(api + 'menuactionlist', data, 'post', params)
 

src/apis/service/serviceParam/setActionProcess/index.js

@@ -15,6 +15,8 @@ export default {
   // 修改状态
   status: (data, params) => http(api + 'action_process_update', data, 'post', params),
   // 获取全部账户列表getuserall
-  processList: (data, params) => http(api + 'process_get_list', data, 'post', params)
+  processList: (data, params) => http(api + 'process_get_list', data, 'post', params),
 
+  //流程节点记录
+  record: (data, params) => http(api + 'process', data, 'post', params)
 }

src/components/flow-chart/index.vue

@@ -8,7 +8,7 @@
 <script>
 import LegendLf from "./legend.vue";
 import LogicFlow from "@logicflow/core";
-import { generateProcessChart } from "./utils/genProceeChart";
+import { createProcessData } from "./utils/createProcessData";
 import processRequest from "@/apis/service/serviceParam/setActionProcess";
 import { StartTask, ProcessTask, NormalTask, Dashe } from "./tasks";
 import { Tooltip } from "./utils/tooltip";
@@ -78,7 +78,7 @@ export default {
     },
     createChartData() {
       if (!this.process || !this.record || !this.lf) return;
-      this.lf.render(generateProcessChart(this.process, this.record));
+      this.lf.render(createProcessData(this.process, this.record));
     }
   },
   watch: {
@@ -103,7 +103,6 @@ export default {
     },
     orderCode: {
       handler() {
-        console.log(this.orderCode)
         this.orderCode && this.getRecord();
       },
       immediate:true,

src/components/flow-chart/style.css

@@ -1,29 +1,24 @@
-.process-wrapper {
-  height: 30px;
-  width: 100px;
-  background: repeating-linear-gradient(135deg, transparent, transparent 3px, rgb(175, 202, 255) 3px, rgb(175, 202, 255) 8px);
-  animation: shine 1s infinite linear;
+.process-wrapper{
+  height:30px;
+  width:100px;
+  background: repeating-linear-gradient(135deg, transparent, transparent 3px, rgb(175, 202, 255) 3px,rgb(175, 202, 255) 8px);
+  /* animation: shine 1s infinite linear; */
   overflow: hidden;
+  position: relative;
 }
 
 .content {
-  height: 28px;
-  background-color: rgb(209, 233, 255);
-  margin: 1px;
+    height:28px;
+    background-color: rgb(209, 233, 255);
+    margin:1px;
 }
 
 
 @keyframes shine {
-  0% {
-    background-position: -1px -1px;
-  }
-
-  100% {
-    background-position: -12px -12px;
-  }
+    0% { background-position: -1px -1px;}
+    100% { background-position: -12px -12px;}
 }
 
-
 .lf__tooltip {
   background: #000;
   color: #fff;

src/components/flow-chart/utils/createProcessData.js

@@ -0,0 +1,127 @@
+import { GAP_X, GAP_Y, START_Y, MIDDMLE_X } from "../config"
+
+//创建节点
+function createNode(raw, level = 0, index = 0, max = 0, _middle = -1) {
+  let x = 0;
+  const _index = index + 1;
+  const y = START_Y + Number(level) * GAP_Y
+  const middle = _middle >= 0 ? _middle + 1 : Math.ceil(max / 2);
+
+  if (_index === middle || max === 0) x = MIDDMLE_X;
+  if (_index > middle) x = MIDDMLE_X + (middle * GAP_X)
+  if (_index < middle) x = MIDDMLE_X - (middle * GAP_X)
+
+  return ({
+    id: raw.order_process,
+    text: raw.status_name,
+    type: 'NormalTask',
+    x,
+    y,
+  })
+}
+
+//创建开始节点
+function createStartNode(source) {
+  const raw = source.find(({ action_type }) => action_type == '1');
+  const start = createNode(raw);
+
+  return {
+    start,
+    startRaw: raw
+  }
+}
+
+//创建连线
+function createEdge(sourceNodeId, targetNodeId) {
+  return {
+    sourceNodeId,
+    targetNodeId,
+    isHitable: false,
+    type: "dashe-edge"
+  }
+}
+
+//根据开始节点递归寻找生成其他节点和连线
+function createNodes(source, startNode) {
+  const nodesRaw = [];
+  const edgesRaw = [];
+
+  function convert(raw, parent = "0", level = 0) {
+    level++;
+    const { next_actions } = raw;
+    const next = source.filter(({ status_name }) => next_actions.includes(status_name));
+
+    for (let i = 0; i < next.length; i++) {
+      const index = i;
+      const current = next[i]
+      const maxLength = next.length;
+      const _middle = next.findIndex(({ is_master  }) => is_master === '1');
+      const edge = createEdge(parent, current.order_process);
+      const node = createNode(current, level, index, maxLength, _middle);
+
+      const prevSameNodeIndex = nodesRaw.findIndex(({ text }) => text === node.text);
+      if (prevSameNodeIndex >= 0) nodesRaw.splice(prevSameNodeIndex, 1);
+      nodesRaw.push(node);
+      edgesRaw.push(edge);
+      if (current.next_actions.length > 0) convert(current, current.order_process, level);
+    }
+  }
+
+  convert(startNode, startNode.order_process);
+
+  return ({
+    nodesRaw,
+    edgesRaw
+  })
+}
+
+//根据审批记录改变连线和节点类型
+function createNodesWithRecord(nodesRaw, edgesRaw, record) {
+  for (let i = 0; i < record.length; i++) {
+    const current = record[i];
+    const next = record[i + 1];
+    const isLast = i === record.length - 1;
+    const sourceNodeIndex = nodesRaw.findIndex(({ id }) => id === current.order_process);
+    if (sourceNodeIndex >= 0) {
+      nodesRaw[sourceNodeIndex].type = isLast ? 'ProcessTask' : 'StartTask';
+      nodesRaw[sourceNodeIndex].properties = {
+        name: current.action_name,
+        time: current.addtime
+      }
+    }
+
+
+    const sourceEdgeIndex = edgesRaw.findIndex(({ sourceNodeId, targetNodeId }) => {
+      console.log(sourceNodeId, targetNodeId)
+      return String(sourceNodeId) === String(current?.order_process) && String(targetNodeId) === String(next?.order_process);
+    })
+
+    if (sourceEdgeIndex >= 0) edgesRaw[sourceEdgeIndex].type = 'polyline';
+  }
+
+  return {
+    edges: edgesRaw,
+    nodes: nodesRaw
+  };
+}
+
+export function createProcessData(source, record) {
+  const processChart = {
+    nodes: [],
+    edges: []
+  }
+
+  const { start, startRaw } = createStartNode(source);
+  const { nodesRaw: _nodesRaw, edgesRaw } = createNodes(source, startRaw);
+
+  const nodesRaw = [start, ..._nodesRaw];
+
+  const { nodes, edges } = createNodesWithRecord(nodesRaw, edgesRaw, record)
+
+  processChart.nodes.push(...nodes);
+  processChart.edges.push(...edges);
+
+  console.log(processChart)
+
+  return processChart
+}

src/components/flow-chart/utils/genProceeChart.js

@@ -1,99 +0,0 @@
-import { GAP_X, GAP_Y, MIDDMLE_X, START_Y } from "../config"
-
-const map = new Map()
-map.set('1', 'StartTask')
-map.set('2', 'ProcessTask')
-map.set('3', 'InterruptTask')
-map.set('4', 'EndTask')
-
-function createNode(nodeRaw, level = 0, index = 0, max = 0) {
-  let x = 0;
-  const y = START_Y + level * GAP_Y
-  const _index = index + 1;
-  const middle = Math.ceil(max / 2);
-
-  if (_index === middle || max === 0) x = MIDDMLE_X;
-  if (_index > middle) x = MIDDMLE_X + (middle * GAP_X)
-  if (_index < middle) x = MIDDMLE_X - (middle * GAP_X)
-
-  return ({
-    id: nodeRaw.order_process,
-    text: nodeRaw.status_name,
-    type: 'NormalTask',
-    x,
-    y,
-  })
-}
-
-function createStartNode(source) {
-  const nodeRaw = source.find(({ action_type }) => action_type === '1');
-  const startNode = createNode(nodeRaw);
-
-  return {
-    startNode,
-    startNodeRaw: nodeRaw
-  }
-}
-
-function createEdge(sourceNodeId, targetNodeId) {
-  return ({
-    sourceNodeId,
-    targetNodeId,
-    type: "dashe-edge"
-  })
-}
-
-export function generateProcessChart(source, record) {
-  const processChart = {
-    nodes: [],
-    edges: []
-  }
-
-  //找到开始节点
-  const { startNode, startNodeRaw } = createStartNode(source);
-  processChart.nodes.push(startNode);
-
-  //根据开始节点找到其他的节点并转换
-  function transform(nodeRaw, level = 0, parent = 0) {
-    level++
-    const { next_actions } = nodeRaw;
-    //从原数据中找到下一个节点的数据
-    const nextActionNodeRaw = source.filter(({ status_name }) => next_actions.includes(status_name))
-    nextActionNodeRaw.map((raw, index) => {
-      const node = createNode(raw, level, index, nextActionNodeRaw.length)
-      const edge = createEdge(parent, raw.order_process);
-      if(processChart.nodes.filter(({text})=> text === node.text).length === 0) processChart.nodes.push(node)
-      processChart.edges.push(edge)
-      //存在下个节点 递归生成
-      if (raw.next_actions.length > 0) transform(raw, level, raw.order_process)
-    });
-  }
-
-  transform(startNodeRaw, 0, startNodeRaw.order_process)
-
-
-  console.log(record)
-
-  //根据审批记录连线
-  record.forEach((item, index) => {
-    const descIndex = processChart.nodes.findIndex(({ id }) => id === item.order_process);
-    if (descIndex >= 0) {
-      processChart.nodes[descIndex].type = index === record.length - 1 ? 'ProcessTask' : 'StartTask' 
-      processChart.nodes[descIndex].properties = {
-        name: item.action_name,
-        time: item.addtime
-      }
-    }
-
-    const sourceEdgeIdx = processChart.edges.findIndex(({ sourceNodeId, targetNodeId }) => {
-      return String(sourceNodeId) === String(record[index]?.order_process) && String(targetNodeId) === String(record[index + 1]?.order_process);
-    });
-    
-
-    if (sourceEdgeIdx >= 0) {
-      processChart.edges[sourceEdgeIdx].type = 'polyline'
-    }
-  })
-
-  return processChart
-}

src/main.js

@@ -12,6 +12,8 @@ import 'viewerjs/dist/viewer.css'
 import "element-ui/lib/theme-chalk/display.css";
 import "./styles/element-variables.scss";
 
+import FlowChart from "@/components/flow-chart";
+
 import './styles/index.scss' // global css
 import globalComponents from './components/globalComponents'
 import App from './App'
@@ -30,6 +32,8 @@ import echarts from 'echarts'
 import * as filters from './filters' // global filters
 Vue.component('icon', Icon);
 Vue.use(dataV);
+Vue.component('flow-chart',FlowChart);
+
 
 Vue.prototype.$echarts = echarts
 

src/views/interest/dataShare/addEdit.vue

@@ -351,7 +351,7 @@ export default {
     async groupAllActive() {
       const res = await asyncRequest.groupall(this.dataForm)
       if (res && res.code === 0 && res.data) {
-        this.groupallList = res.data.list
+        this.groupallList = res.data
       } else if (res && res.code >= 100 && res.code <= 104) {
         await this.logout()
       } else {

src/views/sellOut/bargainList/detail.vue

@@ -182,6 +182,10 @@
             :orderCode="queryId"
           />
         </el-tab-pane>
+
+        <!-- <el-tab-pane label="流程图" name="5">
+          <flow-chart process_id="13" :orderCode="queryId" />
+        </el-tab-pane> -->
       </el-tabs>
     </div>
     <div v-else>

src/views/sellOut/project/detail.vue

@@ -88,6 +88,10 @@
             :orderCode="queryId"
           />
         </el-tab-pane>
+
+        <!-- <el-tab-pane label="流程图" name="5">
+          <flow-chart process_id="14" type="PRO" :orderCode="queryId" v-if="queryType !== 'add'" />
+        </el-tab-pane> -->
       </el-tabs>
     </div>
     <div v-else>

src/views/sellOut/stockApply/detail.vue

@@ -77,6 +77,10 @@
             :orderCode="queryId"
           />
         </el-tab-pane>
+        
+        <!-- <el-tab-pane label="流程图" name="5" v-if="queryType === 'view'">
+          <flow-chart process_id="3" type="SHD" :orderCode="queryId" />
+        </el-tab-pane> -->
       </el-tabs>
     </div>
     <div v-else>