工艺temp

src/components/work-flow/config/methods.js

@@ -8,21 +8,21 @@ const methods = {
       this.jsPlumb.importDefaults(this.jsplumbSetting);
       //完成连线前的校验
       this.jsPlumb.bind("beforeDrop", evt => {
-        let res = () => { } //此处可以添加是否创建连接的校验， 返回 false 则不添加； 
-        return res
-      })
+        let res = () => {}; //此处可以添加是否创建连接的校验， 返回 false 则不添加；
+        return res;
+      });
       // 连线创建成功后，维护本地数据
       this.jsPlumb.bind("connection", evt => {
-        this.addLine(evt)
+        this.addLine(evt);
       });
       //连线双击删除事件
       this.jsPlumb.bind("dblclick", (conn, originalEvent) => {
-        this.confirmDelLine(conn)
-      })
+        this.confirmDelLine(conn);
+      });
       //断开连线后，维护本地数据
       this.jsPlumb.bind("connectionDetached", evt => {
-        this.deleLine(evt)
-      })
+        this.deleLine(evt);
+      });
       this.loadEasyFlow();
       // 会使整个jsPlumb立即重绘。
       this.jsPlumb.setSuspendDrawing(false, true);
@@ -39,7 +39,7 @@ const methods = {
       // // 设置目标点，其他源点拖出的线可以连接该节点
       this.jsPlumb.makeTarget(node.id, this.jsplumbTargetOptions);
       // this.jsPlumb.draggable(node.id);
-      this.draggableNode(node.id)
+      this.draggableNode(node.id);
     }
 
     // 初始化连线
@@ -69,45 +69,44 @@ const methods = {
   draggableNode(nodeId) {
     this.jsPlumb.draggable(nodeId, {
       grid: this.commonGrid,
-      drag: (params) => {
-        this.alignForLine(nodeId, params.pos)
-      },
-      start: () => {
-
+      drag: params => {
+        this.alignForLine(nodeId, params.pos);
       },
-      stop: (params) => {
-        this.auxiliaryLine.isShowXLine = false
-        this.auxiliaryLine.isShowYLine = false
-        this.changeNodePosition(nodeId, params.pos)
+      start: () => {},
+      stop: params => {
+        this.auxiliaryLine.isShowXLine = false;
+        this.auxiliaryLine.isShowYLine = false;
+        this.changeNodePosition(nodeId, params.pos);
       }
-    })
+    });
   },
   //移动节点时，动态显示对齐线
   alignForLine(nodeId, position) {
-    let showXLine = false, showYLine = false
+    let showXLine = false,
+      showYLine = false;
     this.data.nodeList.some(el => {
-      if (el.id !== nodeId && el.left == position[0] + 'px') {
+      if (el.id !== nodeId && el.left == position[0] + "px") {
         this.auxiliaryLinePos.x = position[0] + 60;
-        showYLine = true
+        showYLine = true;
       }
-      if (el.id !== nodeId && el.top == position[1] + 'px') {
+      if (el.id !== nodeId && el.top == position[1] + "px") {
         this.auxiliaryLinePos.y = position[1] + 20;
-        showXLine = true
+        showXLine = true;
       }
-    })
-    this.auxiliaryLine.isShowYLine = showYLine
-    this.auxiliaryLine.isShowXLine = showXLine
+    });
+    this.auxiliaryLine.isShowYLine = showYLine;
+    this.auxiliaryLine.isShowXLine = showXLine;
   },
   changeNodePosition(nodeId, pos) {
     this.data.nodeList.some(v => {
       if (nodeId == v.id) {
-        v.left = pos[0] + 'px'
-        v.top = pos[1] + 'px'
-        return true
+        v.left = pos[0] + "px";
+        v.top = pos[1] + "px";
+        return true;
       } else {
-        return false
+        return false;
       }
-    })
+    });
   },
   drag(ele, item) {
     this.currentItem = item;
@@ -121,8 +120,8 @@ const methods = {
     var temp = {
       ...this.currentItem,
       id: GenNonDuplicateID(8),
-      top: (Math.round(top / 20)) * 20 + "px",
-      left: (Math.round(left / 20)) * 20 + "px"
+      top: Math.round(top / 20) * 20 + "px",
+      left: Math.round(left / 20) * 20 + "px"
     };
     this.addNode(temp);
   },
@@ -145,25 +144,27 @@ const methods = {
     //     this.jsPlumb.deleteConnection(line)
     //   }
     // })
-    this.$confirm('确认删除该连线?', '删除连线', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning'
-    }).then(() => {
-      this.jsPlumb.deleteConnection(line)
-    }).catch(() => {
-      this.$message({
-        type: 'info',
-        message: '已取消删除'
-      });          
-    });
+    this.$confirm("确认删除该连线?", "删除连线", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning"
+    })
+      .then(() => {
+        this.jsPlumb.deleteConnection(line);
+      })
+      .catch(() => {
+        this.$message({
+          type: "info",
+          message: "已取消删除"
+        });
+      });
   },
   deleLine(line) {
     this.data.lineList.forEach((item, index) => {
       if (item.from === line.sourceId && item.to === line.targetId) {
-        this.data.lineList.splice(index, 1)
+        this.data.lineList.splice(index, 1);
       }
-    })
+    });
   },
   // dragover默认事件就是不触发drag事件，取消默认事件后，才会触发drag事件
   allowDrop(event) {
@@ -175,7 +176,8 @@ const methods = {
       const { scale } = this.jsPlumb.pan.getTransform();
       scale1 = scale;
     } else {
-      const matrix = window.getComputedStyle(this.jsPlumb.getContainer()).transform;
+      const matrix = window.getComputedStyle(this.jsPlumb.getContainer())
+        .transform;
       scale1 = matrix.split(", ")[3] * 1;
     }
     this.jsPlumb.setZoom(scale1);
@@ -187,7 +189,7 @@ const methods = {
     this.$nextTick(() => {
       this.jsPlumb.makeSource(temp.id, this.jsplumbSourceOptions);
       this.jsPlumb.makeTarget(temp.id, this.jsplumbTargetOptions);
-      this.draggableNode(temp.id)
+      this.draggableNode(temp.id);
     });
   },
 
@@ -202,12 +204,12 @@ const methods = {
       minZoom: 0.5,
       maxZoom: 2,
       //设置滚动缩放的组合键，默认不需要组合键
-      beforeWheel: (e) => {
-        console.log(e)
+      beforeWheel: e => {
+        console.log(e);
         // let shouldIgnore = !e.ctrlKey
         // return shouldIgnore
       },
-      beforeMouseDown: function (e) {
+      beforeMouseDown: function(e) {
         // allow mouse-down panning only if altKey is down. Otherwise - ignore
         var shouldIgnore = e.ctrlKey;
         return shouldIgnore;
@@ -220,18 +222,18 @@ const methods = {
       const { x, y, scale } = e.getTransform();
       this.jsPlumb.setZoom(scale);
       //根据缩放比例，缩放对齐辅助线长度和位置
-      this.auxiliaryLinePos.width = (1 / scale) * 100 + '%'
-      this.auxiliaryLinePos.height = (1 / scale) * 100 + '%'
-      this.auxiliaryLinePos.offsetX = -(x / scale)
-      this.auxiliaryLinePos.offsetY = -(y / scale)
+      this.auxiliaryLinePos.width = (1 / scale) * 100 + "%";
+      this.auxiliaryLinePos.height = (1 / scale) * 100 + "%";
+      this.auxiliaryLinePos.offsetX = -(x / scale);
+      this.auxiliaryLinePos.offsetY = -(y / scale);
     });
-    pan.on("panend", (e) => {
+    pan.on("panend", e => {
       const { x, y, scale } = e.getTransform();
-      this.auxiliaryLinePos.width = (1 / scale) * 100 + '%'
-      this.auxiliaryLinePos.height = (1 / scale) * 100 + '%'
-      this.auxiliaryLinePos.offsetX = -(x / scale)
-      this.auxiliaryLinePos.offsetY = -(y / scale)
-    })
+      this.auxiliaryLinePos.width = (1 / scale) * 100 + "%";
+      this.auxiliaryLinePos.height = (1 / scale) * 100 + "%";
+      this.auxiliaryLinePos.offsetX = -(x / scale);
+      this.auxiliaryLinePos.offsetY = -(y / scale);
+    });
 
     // 平移时设置鼠标样式
     mainContainerWrap.style.cursor = "grab";
@@ -247,85 +249,95 @@ const methods = {
   },
 
   setNode(nodeId, node) {
-    this.data.nodeList.some((v) => {
+    this.data.nodeList.some(v => {
       if (v.id === nodeId) {
-        for(var key in node){
-          v[key] = node[key]
+        for (var key in node) {
+          v[key] = node[key];
         }
         // v.nodeName = node.nodeName
-        return true
+        return true;
       } else {
-        return false
+        return false;
       }
-    })
+    });
   },
 
   //删除节点
   deleteNode(node) {
     this.data.nodeList.some((v, index) => {
       if (v.id === node.id) {
-        this.data.nodeList.splice(index, 1)
-        this.jsPlumb.remove(v.id)
-        return true
+        this.data.nodeList.splice(index, 1);
+        this.jsPlumb.remove(v.id);
+        return true;
       } else {
-        return false
+        return false;
       }
-    })
+    });
   },
 
   //更改连线状态
   changeLineState(nodeId, val) {
-    console.log(val)
-    let lines = this.jsPlumb.getAllConnections()
+    console.log(val);
+    let lines = this.jsPlumb.getAllConnections();
     lines.forEach(line => {
       if (line.targetId === nodeId || line.sourceId === nodeId) {
         if (val) {
-          line.canvas.classList.add('active')
+          line.canvas.classList.add("active");
         } else {
-          line.canvas.classList.remove('active')
+          line.canvas.classList.remove("active");
         }
       }
-    })
+    });
   },
 
   //初始化节点位置  （以便对齐,居中）
   fixNodesPosition() {
     if (this.data.nodeList && this.$refs.flowWrap) {
-      const nodeWidth = 120
-      const nodeHeight = 40
-      let wrapInfo = this.$refs.flowWrap.getBoundingClientRect()
-      let maxLeft = 0, minLeft = wrapInfo.width, maxTop = 0, minTop = wrapInfo.height;
+      const nodeWidth = 120;
+      const nodeHeight = 40;
+      let wrapInfo = this.$refs.flowWrap.getBoundingClientRect();
+      let maxLeft = 0,
+        minLeft = wrapInfo.width,
+        maxTop = 0,
+        minTop = wrapInfo.height;
       let nodePoint = {
         left: 0,
         right: 0,
         top: 0,
         bottom: 0
-      }
-      let fixTop = 0, fixLeft = 0;
+      };
+      let fixTop = 0,
+        fixLeft = 0;
       this.data.nodeList.forEach(el => {
-        let top = Number(el.top.substring(0, el.top.length - 2))
-        let left = Number(el.left.substring(0, el.left.length - 2))
-        maxLeft = left > maxLeft ? left : maxLeft
-        minLeft = left < minLeft ? left : minLeft
-        maxTop = top > maxTop ? top : maxTop
-        minTop = top < minTop ? top : minTop
-      })
-      nodePoint.left = minLeft
-      nodePoint.right = wrapInfo.width - maxLeft - nodeWidth
-      nodePoint.top = minTop
+        let top = Number(el.top.substring(0, el.top.length - 2));
+        let left = Number(el.left.substring(0, el.left.length - 2));
+        maxLeft = left > maxLeft ? left : maxLeft;
+        minLeft = left < minLeft ? left : minLeft;
+        maxTop = top > maxTop ? top : maxTop;
+        minTop = top < minTop ? top : minTop;
+      });
+      nodePoint.left = minLeft;
+      nodePoint.right = wrapInfo.width - maxLeft - nodeWidth;
+      nodePoint.top = minTop;
       nodePoint.bottom = wrapInfo.height - maxTop - nodeHeight;
 
-      fixTop = nodePoint.top !== nodePoint.bottom ? (nodePoint.bottom - nodePoint.top) / 2 : 0;
-      fixLeft = nodePoint.left !== nodePoint.right ? (nodePoint.right - nodePoint.left) / 2 : 0;
+      fixTop =
+        nodePoint.top !== nodePoint.bottom
+          ? (nodePoint.bottom - nodePoint.top) / 2
+          : 0;
+      fixLeft =
+        nodePoint.left !== nodePoint.right
+          ? (nodePoint.right - nodePoint.left) / 2
+          : 0;
 
       this.data.nodeList.map(el => {
         let top = Number(el.top.substring(0, el.top.length - 2)) + fixTop;
         let left = Number(el.left.substring(0, el.left.length - 2)) + fixLeft;
-        el.top = (Math.round(top / 20)) * 20 + 'px'
-        el.left = (Math.round(left / 20)) * 20 + 'px'
-      })
+        el.top = Math.round(top / 20) * 20 + "px";
+        el.left = Math.round(left / 20) * 20 + "px";
+      });
     }
-  },
-}
+  }
+};
 
-export default methods;
+export default methods;

src/components/work-flow/home.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flow_region">
-    <div class="flow_left">
+    <div class="flow_left" v-if="!disabled">
       <div class="help">
         <el-tooltip placement="bottom-start">
           <div slot="content">
@@ -58,7 +58,7 @@
           :style="{
             width: auxiliaryLinePos.width,
             top: auxiliaryLinePos.y + 'px',
-            left: auxiliaryLinePos.offsetX + 'px',
+            left: auxiliaryLinePos.offsetX + 'px'
           }"
         ></div>
         <div
@@ -67,7 +67,7 @@
           :style="{
             height: auxiliaryLinePos.height,
             left: auxiliaryLinePos.x + 'px',
-            top: auxiliaryLinePos.offsetY + 'px',
+            top: auxiliaryLinePos.offsetY + 'px'
           }"
         ></div>
         <flowNode
@@ -91,7 +91,7 @@ import {
   jsplumbSetting,
   jsplumbConnectOptions,
   jsplumbSourceOptions,
-  jsplumbTargetOptions,
+  jsplumbTargetOptions
 } from "./config/commonConfig";
 import methods from "./config/methods";
 // import data from "./config/data.json";
@@ -99,15 +99,19 @@ import flowNode from "./node-item";
 export default {
   name: "FlowEdit",
   components: {
-    flowNode,
+    flowNode
   },
   props: {
     nodeData: {
-     type: Object,
-     default: {
+      type: Object,
+      default: {
         nodeList: [],
         lineList: []
-     }
+      }
+    },
+    disabled: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -118,7 +122,7 @@ export default {
       nodeTypeObj: {},
       data: {
         nodeList: [],
-        lineList: [],
+        lineList: []
       },
       selectedList: [],
       jsplumbSetting: jsplumbSetting,
@@ -132,7 +136,7 @@ export default {
         offsetX: 0,
         offsetY: 0,
         x: 20,
-        y: 20,
+        y: 20
       },
       commonGrid: [5, 5], //节点移动最小距离
       selectModuleFlag: false, //多选标识
@@ -142,12 +146,15 @@ export default {
         left: 0,
         top: 0,
         height: 0,
-        width: 0,
-      },
+        width: 0
+      }
     };
   },
   watch: {
-    data(val) {
+    nodeData(val) {
+      this.initNode();
+    },
+    disabled(val) {
     }
   },
   mounted() {
@@ -161,30 +168,48 @@ export default {
   },
   methods: {
     ...methods,
+    //重置
+    resetNodeData() {
+      this.data = {
+        nodeList: [],
+        lineList: []
+      };
+    },
     initNodeTypeObj() {
-      nodeTypeList.map((v) => {
+      nodeTypeList.map(v => {
         this.nodeTypeObj[v.type] = v;
       });
     },
     initNode() {
-        this.data.lineList = this.nodeData.lineList;
-        this.data.nodeList = []
-        this.nodeData.nodeList.map((v) => {
+      this.resetNodeData();
+
+      this.data.lineList.push(...this.nodeData.lineList);
+      this.data.nodeList = [];
+      this.nodeData.nodeList.map(v => {
         v.logImg = this.nodeTypeObj[v.type].logImg;
         v.log_bg_color = this.nodeTypeObj[v.type].log_bg_color;
         this.data.nodeList.push(v);
       });
+
+      this.$nextTick(() => {
+        this.init();
+      });
     },
     nodeDisabled(node) {
-        return this.data.nodeList.findIndex(t => t.type === 'start') > -1 && node.type === 'start' ||
-        this.data.nodeList.findIndex(t => t.type === 'end') > -1 && node.type === 'end' || false;
+      return (
+        (this.data.nodeList.findIndex(t => t.type === "start") > -1 &&
+          node.type === "start") ||
+        (this.data.nodeList.findIndex(t => t.type === "end") > -1 &&
+          node.type === "end") ||
+        false
+      );
     },
     //保存流程图
     saveFlow() {
       console.log(this.data);
-      this.$emit('saveWorkFlow', this.data);
-    },
-  },
+      this.$emit("saveWorkFlow", this.data);
+    }
+  }
 };
 </script>
 
@@ -239,7 +264,7 @@ export default {
     }
 
     .node-disabled {
-        &:hover {
+      &:hover {
         cursor: default;
       }
       &:active {
@@ -310,4 +335,4 @@ export default {
     stroke-dashoffset: 0;
   }
 }
-</style>
+</style>

src/components/work-flow/node-item.vue

@@ -21,7 +21,7 @@
     <div class="node-anchor anchor-bottom" v-show="mouseEnter"></div>
     <div class="node-anchor anchor-left" v-show="mouseEnter"></div>
     <el-dialog
-      :title="dialog.disabled ? '节点详情' : '节点编辑'"
+      :title="disabled ? '节点详情' : '节点编辑'"
       :visible.sync="dialog.visible"
       :modal="true"
       :append-to-body="true"
@@ -30,11 +30,11 @@
       <nodeEdit
         ref="nodeEdit"
         :data="dialog.data"
-        :disabled="dialog.disabled"
+        :disabled="disabled"
       ></nodeEdit>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialog.visible = false">取 消</el-button>
-        <el-button v-if="!dialog.disabled" type="primary" @click="dialogSubmit"
+        <el-button v-if="!disabled" type="primary" @click="dialogSubmit"
           >确 定</el-button
         >
       </div>
@@ -48,13 +48,20 @@ import nodeEdit from "./node-edit";
 export default {
   name: "nodeItem",
   components: {
-    nodeEdit,
+    nodeEdit
   },
   props: {
-    node: Object,
+    node: {
+      type: Object,
+      default: () => {}
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
   },
   directives: {
-    ClickOutside,
+    ClickOutside
   },
   computed: {
     // 节点容器样式
@@ -62,10 +69,10 @@ export default {
       get() {
         return {
           top: this.node.top,
-          left: this.node.left,
+          left: this.node.left
         };
-      },
-    },
+      }
+    }
   },
   data() {
     return {
@@ -76,8 +83,8 @@ export default {
       dialog: {
         visible: false,
         disabled: false,
-        data: {},
-      },
+        data: {}
+      }
     };
   },
   methods: {
@@ -96,13 +103,13 @@ export default {
             icon: "",
             onClick: () => {
               this.deleteNode();
-            },
-          },
+            }
+          }
         ],
         event,
         customClass: "custom-class",
         zIndex: 9999,
-        minWidth: 180,
+        minWidth: 180
       });
     },
     setActive() {
@@ -149,8 +156,8 @@ export default {
           this.dialog.visible = false;
         })
         .catch(() => {});
-    },
-  },
+    }
+  }
 };
 </script>
 
@@ -225,4 +232,4 @@ export default {
   border: 1px dashed @labelColor;
   box-shadow: 0px 5px 9px 0px rgba(0, 0, 0, 0.5);
 }
-</style>
+</style>

src/views/modules/tech/crafts-detail.vue

@@ -3,13 +3,26 @@
     title="查看"
     width="70%"
     :close-on-click-modal="false"
-    :visible.sync="visible">
+    :visible.sync="visible"
+  >
     <div style="margin-left: 20px;margin-right: 20px">
       <!-- 工作流 -->
       <div v-show="dataForm.workFlowBusinessExt">
-        <el-steps :active="dataForm.workFlowBusinessExt?dataForm.workFlowBusinessExt.workFlowProcessStepList.length + 2:0" align-center style="margin-bottom: 20px">
+        <el-steps
+          :active="
+            dataForm.workFlowBusinessExt
+              ? dataForm.workFlowBusinessExt.workFlowProcessStepList.length + 2
+              : 0
+          "
+          align-center
+          style="margin-bottom: 20px"
+        >
           <template v-for="(item, i) in stepList">
-            <el-step :icon="item.icon" :title="item.title" :description="item.description"></el-step>
+            <el-step
+              :icon="item.icon"
+              :title="item.title"
+              :description="item.description"
+            ></el-step>
           </template>
         </el-steps>
         <el-collapse style="margin-bottom: 20px">
@@ -18,24 +31,39 @@
               <span style="color: red">审批日志（展开查看更多）：</span>
             </template>
             <template v-for="(item, i) in logList">
-              <div>{{++i}}：{{item.approverName}}  {{item.createTime}}  {{item.approvalValue}}</div>
+              <div>
+                {{ ++i }}：{{ item.approverName }} {{ item.createTime }}
+                {{ item.approvalValue }}
+              </div>
             </template>
           </el-collapse-item>
         </el-collapse>
       </div>
       <div v-show="isFlow">
-        <approve-component ref="approve" @approveFinished="approveFinished"/>
+        <approve-component ref="approve" @approveFinished="approveFinished" />
       </div>
       <e-desc title="基本信息" column="3">
-        <e-desc-item label="工艺名称">{{dataForm.techName}}</e-desc-item>
-        <e-desc-item label="工艺版本">{{dataForm.techVersion}}</e-desc-item>
-        <e-desc-item label="产品">{{dataForm.productId}}</e-desc-item>
+        <e-desc-item label="工艺名称">{{ dataForm.techName }}</e-desc-item>
+        <e-desc-item label="工艺版本">{{ dataForm.techVersion }}</e-desc-item>
+        <e-desc-item label="产品">{{ dataForm.productId }}</e-desc-item>
 
-        <e-desc-item label="备注" span="3">{{dataForm.notes}}</e-desc-item>
+        <e-desc-item label="备注" span="3">{{ dataForm.notes }}</e-desc-item>
       </e-desc>
       <e-desc title="附件">
-        <upload-component :display="true" :display-title="false" :accept="'*'" :file-obj-list="fileList"/>
+        <upload-component
+          :display="true"
+          :display-title="false"
+          :accept="'*'"
+          :file-obj-list="fileList"
+        />
       </e-desc>
+      <el-row class="my-row" style="height: 350px; background-color: #efefef;">
+        <work-flow
+          ref="workFlow"
+          :nodeData="workFlowData"
+          :disabled="true"
+        ></work-flow>
+      </el-row>
     </div>
     <span slot="footer" class="dialog-footer">
       <el-button @click="visible = false">返回</el-button>
@@ -44,86 +72,107 @@
 </template>
 
 <script>
-  import EDesc from '../common/e-desc'
-  import EDescItem from '../common/e-desc-item'
-  import { dealStepData, dealStepLogs } from '@/api/util'
-  import uploadComponent from '../common/upload-component'
-  import { getInfo } from '@/api/crafts'
-  import ApproveComponent from '../common/approve-component'
-  export default {
-    name: 'crafts-detail',
-    components: {
-      EDesc, EDescItem, uploadComponent, ApproveComponent
-    },
-    data () {
-      return {
-        visible: false,
-        isFlow: false,
-        id: 0,
-        dataForm: {},
-        stepList: [],
-        logList: [],
-        fileList: []
+import EDesc from "../common/e-desc";
+import EDescItem from "../common/e-desc-item";
+import { dealStepData, dealStepLogs } from "@/api/util";
+import uploadComponent from "../common/upload-component";
+import { getInfo } from "@/api/crafts";
+import ApproveComponent from "../common/approve-component";
+import WorkFlow from "@/components/work-flow/home";
+export default {
+  name: "crafts-detail",
+  components: {
+    EDesc,
+    EDescItem,
+    uploadComponent,
+    ApproveComponent,
+    WorkFlow
+  },
+  data() {
+    return {
+      visible: false,
+      isFlow: false,
+      id: 0,
+      dataForm: {},
+      stepList: [],
+      logList: [],
+      fileList: [],
+      workFlowData: {
+        nodeList: [],
+        lineList: []
       }
+    };
+  },
+  methods: {
+    async init(id, businessType) {
+      this.visible = true;
+      this.isFlow = !!(businessType && businessType !== "");
+      this.id = id || 0;
+      this.dataForm = {};
+      this.stepList = [];
+      this.logList = [];
+      this.fileList = [];
+      this.getDetails(businessType);
     },
-    methods: {
-      async init (id, businessType) {
-        this.visible = true
-        this.isFlow = !!(businessType && businessType !== '')
-        this.id = id || 0
-        this.dataForm = {}
-        this.stepList = []
-        this.logList = []
-        this.fileList = []
-        this.getDetails(businessType)
-      },
-      getDetails (businessType) {
-        getInfo(this.id).then(({data}) => {
-          if (data && data.code === '200') {
-            this.dataForm = data.data
-            // 流程图展示
-            if (data.data.workFlowBusinessExt) {
-              dealStepData(data.data.workFlowBusinessExt.workFlowProcessStepList, this.stepList)
-              dealStepLogs(data.data.workFlowBusinessExt.processLogList, this.logList)
-            }
-            // 附件
-            if (data.data.attachList) {
-              data.data.attachList.forEach((item) => {
-                this.fileList.push({
-                  name: item.fileName,
-                  url: item.url,
-                  id: item.url
-                })
-              })
-            }
-            // 初始化审批Form
-            this.showApproveForm(businessType, this.id)
+    getDetails(businessType) {
+      getInfo(this.id).then(({ data }) => {
+        if (data && data.code === "200") {
+          this.dataForm = data.data;
+
+          // 流程图展示
+          this.workFlowData = {
+            nodeList: data.data.nodeList,
+            lineList: data.data.lineList
+          };
+
+          if (data.data.workFlowBusinessExt) {
+            dealStepData(
+              data.data.workFlowBusinessExt.workFlowProcessStepList,
+              this.stepList
+            );
+            dealStepLogs(
+              data.data.workFlowBusinessExt.processLogList,
+              this.logList
+            );
           }
-        })
-      },
-      // 初始化审批Form
-      showApproveForm (businessType, businessId) {
-        if (this.isFlow) {
-          this.$nextTick(() => {
-            this.$refs.approve.init(businessType, businessId)
-          })
+          // 附件
+          if (data.data.attachList) {
+            data.data.attachList.forEach(item => {
+              this.fileList.push({
+                name: item.fileName,
+                url: item.url,
+                id: item.url
+              });
+            });
+          }
+          // 初始化审批Form
+          this.showApproveForm(businessType, this.id);
         }
-      },
-      // 审批完成
-      approveFinished () {
-        this.visible = false
-        this.$emit('approveFinished')
+      });
+    },
+    // 初始化审批Form
+    showApproveForm(businessType, businessId) {
+      if (this.isFlow) {
+        this.$nextTick(() => {
+          this.$refs.approve.init(businessType, businessId);
+        });
       }
+    },
+    // 审批完成
+    approveFinished() {
+      this.visible = false;
+      this.$emit("approveFinished");
     }
   }
+};
 </script>
 
 <style scoped>
-.my-line{
+.my-line {
   border-bottom: 1px solid #c0c4cc;
   margin-bottom: 10px;
 }
-.title{
-  padding: 10px 0 ;
+.title {
+  padding: 10px 0;
 }
 </style>

src/views/modules/tech/crafts-management.vue

@@ -111,7 +111,7 @@
         min-width="100"
         label="当前状态">
         <template slot-scope="scope">
-          <span>{{ scope.row.techState === -1 ? '停用' : '启用'  }}</span>
+          <span>{{ scope.row.techState == -1 ? '停用' : '启用'  }}</span>
         </template>
       </el-table-column>
       <el-table-column
@@ -121,8 +121,8 @@
         width="100"
         label="操作">
         <template slot-scope="scope">
-          <el-button v-if="isAuth('pro:technology:update') && scope.row.techState === -1" type="text" size="small" @click="addOrUpdateHandle1(scope.row.techId, 0)">启用</el-button>
-          <el-button v-if="isAuth('pro:technology:update') && scope.row.techState === 0" type="text" size="small" @click="addOrUpdateHandle1(scope.row.techId, -1)">停用</el-button>
+          <el-button v-if="isAuth('pro:technology:update') && scope.row.techState == -1" type="text" size="small" @click="addOrUpdateHandle1(scope.row.techId, 0)">启用</el-button>
+          <el-button v-if="isAuth('pro:technology:update') && scope.row.techState == 0" type="text" size="small" @click="addOrUpdateHandle1(scope.row.techId, -1)">停用</el-button>
           <el-button v-if="isAuth('pro:technology:info')" type="text" size="small" @click="detailHandle(scope.row.techId)">查看</el-button>
         </template>
       </el-table-column>

src/views/modules/tech/ctafts-add-or-detail.vue

@@ -1,291 +1,352 @@
 <template>
-<div>
-  <el-dialog
-    :title="display ? '工艺详情' : '新建工艺'"
-    width="70%"
-    :close-on-click-modal="false"
-    :visible.sync="visible">
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="auto">
-      <el-row class="my-row">
-        <el-col :span="8">
-          <el-form-item label="工艺名称" prop="techName">
-            <el-input v-model="dataForm.techName" :disabled="display" placeholder="工艺名称"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item label="工艺版本" prop="techVersion">
-            <el-input v-model="dataForm.techVersion" :disabled="display" placeholder="工艺版本"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item label="产品" prop="productId">
-            <el-select
-              v-model="dataForm.productId"
-              :disabled="display"
-              remote
-              placeholder="请选择">
-              <el-option
-                v-for="item in optionLevel"
-                :key="item.productId"
-                :label="item.productName"
-                :value="item.productId">
-              </el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-form-item label="备注说明">
-        <el-input v-model="dataForm.notes" :disabled="display" placeholder="备注说明"></el-input>
-      </el-form-item>
-      <el-form-item label="" label-width="0px">
-        <upload-component :display="display" :title="'附件'" :accept="'*'" :file-obj-list="fileList" @uploadSuccess="uploadSuccess"/>
-      </el-form-item>
-      <el-form-item label="工艺步骤" prop="nodeList">
-      </el-form-item>
-      <el-row class="my-row" style="height: 350px; background-color: #efefef;">
-        <work-flow ref="workFlow" :nodeData="workFlowData" @saveWorkFlow='saveWorkFlow'></work-flow>
-      </el-row>
-    </el-form>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="visible = false">取消</el-button>
-      <el-button v-if="!display" type="primary" @click="dataFormSubmit()">确定</el-button>
-    </span>
-  </el-dialog>
-</div>
+  <div>
+    <el-dialog
+      :title="display ? '工艺详情' : '新建工艺'"
+      width="70%"
+      :close-on-click-modal="false"
+      :visible.sync="visible"
+    >
+      <el-form
+        :model="dataForm"
+        :rules="dataRule"
+        ref="dataForm"
+        label-width="auto"
+      >
+        <el-row class="my-row">
+          <el-col :span="8">
+            <el-form-item label="工艺名称" prop="techName">
+              <el-input
+                v-model="dataForm.techName"
+                :disabled="display"
+                placeholder="工艺名称"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="工艺版本" prop="techVersion">
+              <el-input
+                v-model="dataForm.techVersion"
+                :disabled="display"
+                placeholder="工艺版本"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="产品" prop="productId">
+              <el-select
+                v-model="dataForm.productId"
+                :disabled="display"
+                remote
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in optionLevel"
+                  :key="item.productId"
+                  :label="item.productName"
+                  :value="item.productId"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="备注说明">
+          <el-input
+            v-model="dataForm.notes"
+            :disabled="display"
+            placeholder="备注说明"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="" label-width="0px">
+          <upload-component
+            :display="display"
+            :title="'附件'"
+            :accept="'*'"
+            :file-obj-list="fileList"
+            @uploadSuccess="uploadSuccess"
+          />
+        </el-form-item>
+        <el-form-item label="工艺步骤" prop="nodeList"> </el-form-item>
+        <el-row
+          class="my-row"
+          style="height: 350px; background-color: #efefef;"
+        >
+          <work-flow
+            ref="workFlow"
+            :nodeData="workFlowData"
+            @saveWorkFlow="saveWorkFlow"
+          ></work-flow>
+        </el-row>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="visible = false">取消</el-button>
+        <el-button v-if="!display" type="primary" @click="dataFormSubmit()"
+          >确定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
-  import { getInfo, getProduct, getWorkType, getStepId } from '@/api/crafts'
-  import UploadComponent from '../common/upload-component'
-  import WorkFlow from '@/components/work-flow/home'
-  import data from "@/components/work-flow/config/data.json";
-  export default {
-    name: 'add-or-update',
-    components: {UploadComponent, WorkFlow},
-    computed: {
-      orgId: {
-        get () { return this.$store.state.user.orgId }
+import { getInfo, getProduct, getWorkType, getStepId } from "@/api/crafts";
+import UploadComponent from "../common/upload-component";
+import WorkFlow from "@/components/work-flow/home";
+// import data from "@/components/work-flow/config/data.json";
+export default {
+  name: "add-or-update",
+  components: { UploadComponent, WorkFlow },
+  computed: {
+    orgId: {
+      get() {
+        return this.$store.state.user.orgId;
       }
-    },
-    data () {
-      return {
-        workTypeOptions: [],
-        datas: {},
-        visible: false,
-        display: false,
-        fileList: [],
-        dataList: [],
-        id: 0,
-        dataForm: {
-          techName: '',
-          techVersion: '',
-          productId: '',
-          notes: ''
-        },
-        previewPath: '',
-        previewName: '',
-        previewVisible: false,
-        optionsProducts: [],
-        optionLevel: [],
-        workFlowData: {
-          nodeList: [],
-          lineList: [],
-        }, //流程图数据
-        dataRule: {
-          techName: [{ required: true, message: '工艺名称不能为空', trigger: 'blur' }],
-          techVersion: [{ required: true, message: '工艺版本不能为空', trigger: 'blur' }],
-          productId: [{ required: true, message: '产品不能为空', trigger: 'change' }]
-        },
-        dataRule1: {
-          name: [{ required: true, message: '节点名称不能为空', trigger: 'blur' }],
-          type: [{ required: true, message: '节点类型不能为空', trigger: 'change' }],
-          workTypeId: [{ required: true, message: '工种不能为空', trigger: 'change' }]
-        }
+    }
+  },
+  data() {
+    return {
+      workTypeOptions: [],
+      datas: {},
+      visible: false,
+      display: false,
+      fileList: [],
+      dataList: [],
+      id: 0,
+      dataForm: {
+        techName: "",
+        techVersion: "",
+        productId: "",
+        notes: ""
+      },
+      previewPath: "",
+      previewName: "",
+      previewVisible: false,
+      optionsProducts: [],
+      optionLevel: [],
+      workFlowData: {
+        nodeList: [],
+        lineList: []
+      }, //流程图数据
+      dataRule: {
+        techName: [
+          { required: true, message: "工艺名称不能为空", trigger: "blur" }
+        ],
+        techVersion: [
+          { required: true, message: "工艺版本不能为空", trigger: "blur" }
+        ],
+        productId: [
+          { required: true, message: "产品不能为空", trigger: "change" }
+        ]
+      },
+      dataRule1: {
+        name: [
+          { required: true, message: "节点名称不能为空", trigger: "blur" }
+        ],
+        type: [
+          { required: true, message: "节点类型不能为空", trigger: "change" }
+        ],
+        workTypeId: [
+          { required: true, message: "工种不能为空", trigger: "change" }
+        ]
       }
+    };
+  },
+  created() {
+    this.initNode();
+  },
+  mounted() {
+    this.initNode();
+  },
+  methods: {
+    initNode() {
+      // this.workFlowData = data;
     },
-    created () {
-      this.initNode()
-    },
-    mounted () {
-      this.initNode()
+    resetWorkFlow() {
+      this.workFlowData = {
+        nodeList: [],
+        lineList: []
+      };
     },
-    methods: {
-      initNode() {
-        // this.workFlowData = data;
-      },
-      async init (id, display) {
-        // this.nodeList = []
-        // this.linkList = []
-        // this.dataForm = {
-        //   techName: '',
-        //   techVersion: '',
-        //   productId: '',
-        //   notes: ''
-        // }
-        this.visible = true
-        this.display = display
-        await getProduct({ current: 1, size: 20000 }).then(({data}) => {
-          if (data && data.code === '200') {
-            this.optionLevel = data.data.records
-          }
-        })
-        if (!id) return
-        await getInfo(id).then(async ({data}) => {
-          if (data && data.code === '200') {
-            this.dataForm = data.data
-            // 图纸
-            if (data.data.proTechnologyStepLists) {
-              const dataline = []
-              const datanode = []
-              await data.data.proTechnologyStepLists.forEach((v, i) => {
-                // eslint-disable-next-line no-unused-vars
-
-              })
-              this.$nextTick(() => {
-                setTimeout(() => {
-                  // this.nodeList = datanode
-                  // this.linkList = dataline
-                }, 200)
-              })
-            }
-          }
-        })
-      },
-      getWorkType () {
-        getWorkType().then(({data}) => {
-          if (data && data.code === '200') {
-            this.workTypeOptions = data.data
+    async init(id, display) {
+      // this.nodeList = []
+      // this.linkList = []
+      // this.dataForm = {
+      //   techName: '',
+      //   techVersion: '',
+      //   productId: '',
+      //   notes: ''
+      // }
+      this.visible = true;
+      this.display = display;
+      await getProduct({ current: 1, size: 20000 }).then(({ data }) => {
+        if (data && data.code === "200") {
+          this.optionLevel = data.data.records;
+        }
+      });
+      if (!id) return;
+      await getInfo(id).then(async ({ data }) => {
+        if (data && data.code === "200") {
+          this.dataForm = data.data;
+          // 图纸
+          if (data.data.proTechnologyStepLists) {
+            const dataline = [];
+            const datanode = [];
+            await data.data.proTechnologyStepLists.forEach((v, i) => {
+              // eslint-disable-next-line no-unused-vars
+            });
+            this.$nextTick(() => {
+              setTimeout(() => {
+                // this.nodeList = datanode
+                // this.linkList = dataline
+              }, 200);
+            });
           }
-        })
-      },
-      handleRemove (file, fileList) {
-        this.fileList = fileList
-      },
-      handleChange (file, fileList) {
-        this.fileList = fileList
-      },
-      handleExceed (files, fileList) {
-        this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
-      },
-      validateField (type) {
-        this.$refs.dataForm.validateField(type)
-      },
-      // 表单提交
-      dataFormSubmit () {
-        if (!this.workFlowData) {
-          this.$message.error('请先完成流程图！')
-          return
         }
+      });
+    },
+    getWorkType() {
+      getWorkType().then(({ data }) => {
+        if (data && data.code === "200") {
+          this.workTypeOptions = data.data;
+        }
+      });
+    },
+    handleRemove(file, fileList) {
+      this.fileList = fileList;
+    },
+    handleChange(file, fileList) {
+      this.fileList = fileList;
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(
+        `当前限制选择 5 个文件，本次选择了 ${
+          files.length
+        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
+      );
+    },
+    validateField(type) {
+      this.$refs.dataForm.validateField(type);
+    },
+    // 表单提交
+    dataFormSubmit() {
+      if (!this.workFlowData) {
+        this.$message.error("请先完成流程图！");
+        return;
+      }
 
-        // 去除流程图背景图片logImg和背景颜色字段log_bg_color
-        this.workFlowData.nodeList = this.workFlowData.nodeList.map(item => {
-          delete item.logImg
-          delete item.log_bg_color
-          return item
-        })
-        // if (this.datas.nodeList.length <= 2) {
-        //   this.$message.error('请先完成流程图！')
-        //   return
-        // }
+      // 去除流程图背景图片logImg和背景颜色字段log_bg_color
+      this.workFlowData.nodeList = this.workFlowData.nodeList.map(item => {
+        delete item.logImg;
+        delete item.log_bg_color;
+        return item;
+      });
+      // if (this.datas.nodeList.length <= 2) {
+      //   this.$message.error('请先完成流程图！')
+      //   return
+      // }
 
-        this.$refs['dataForm'].validate((valid) => {
-          if (valid) {
-            // 填充附件
-            let fList = this.fileList
-            if (fList.length > 0) {
-              this.dataForm.attachList = []
-              for (let i = 0; i < fList.length; i++) {
-                this.dataForm.attachList.push({
-                  fileName: fList[i].name,
-                  url: fList[i].url
-                })
-              }
+      this.$refs["dataForm"].validate(valid => {
+        if (valid) {
+          // 填充附件
+          let fList = this.fileList;
+          if (fList.length > 0) {
+            this.dataForm.attachList = [];
+            for (let i = 0; i < fList.length; i++) {
+              this.dataForm.attachList.push({
+                fileName: fList[i].name,
+                url: fList[i].url
+              });
             }
+          }
 
-            this.$http({
-              url: this.$http.adornUrl(`/biz-service/technology/submit`),
-              method: 'post',
-              data: this.$http.adornData({...this.dataForm, ...this.workFlowData})
-            }).then(({data}) => {
-              if (data && data.code === '200') {
-                this.$message({
-                  message: '操作成功',
-                  type: 'success',
-                  duration: 1500,
-                  onClose: () => {
-                    this.$emit('refreshDataList')
-                    this.visible = false
-                  }
-                })
-              } else {
-                this.$message.error(data.msg)
-              }
+          this.$http({
+            url: this.$http.adornUrl(`/biz-service/technology/submit`),
+            method: "post",
+            data: this.$http.adornData({
+              ...this.dataForm,
+              ...this.workFlowData
             })
-          }
-        })
-      },
-      uploadSuccess (fileList) {
-        this.fileList = fileList
-      },
-      //新流程图
-      saveWorkFlow(workFlowData){
-        this.workFlowData = workFlowData
-        console.log(workFlowData)
-      }
+          }).then(({ data }) => {
+            if (data && data.code === "200") {
+              this.$message({
+                message: "操作成功",
+                type: "success",
+                duration: 1500,
+                onClose: () => {
+                  this.resetWorkFlow();
+                  this.$emit("refreshDataList");
+                  this.visible = false;
+                }
+              });
+            } else {
+              this.$message.error(data.msg);
+            }
+          });
+        }
+      });
+    },
+    uploadSuccess(fileList) {
+      this.fileList = fileList;
+    },
+    //新流程图
+    saveWorkFlow(workFlowData) {
+      this.workFlowData = workFlowData;
+      console.log(workFlowData);
     }
   }
+};
 </script>
 
 <style lang="less" scoped>
 .super-flow__node {
-    .flow-node {
-      > header {
-        font-size   : 14px;
-        height      : 32px;
-        line-height : 32px;
-        padding     : 0 12px;
-        color       : #ffffff;
-      }
+  .flow-node {
+    > header {
+      font-size: 14px;
+      height: 32px;
+      line-height: 32px;
+      padding: 0 12px;
+      color: #ffffff;
+    }
 
-      > section {
-        text-align  : center;
-        line-height : 20px;
-        overflow    : hidden;
-        padding     : 6px 12px;
-        word-break  : break-all;
-      }
+    > section {
+      text-align: center;
+      line-height: 20px;
+      overflow: hidden;
+      padding: 6px 12px;
+      word-break: break-all;
+    }
 
-      &.flow-node-start {
-        > header {
-          background-color : #55abfc;
-        }
+    &.flow-node-start {
+      > header {
+        background-color: #55abfc;
       }
+    }
 
-      &.flow-node-condition {
-        > header {
-          background-color : #BC1D16;
-        }
+    &.flow-node-condition {
+      > header {
+        background-color: #bc1d16;
       }
+    }
 
-      &.flow-node-approval {
-        > header {
-          background-color : rgba(188, 181, 58, 0.76);
-        }
+    &.flow-node-approval {
+      > header {
+        background-color: rgba(188, 181, 58, 0.76);
       }
+    }
 
-      &.flow-node-cc {
-        > header {
-          background-color : #30b95c;
-        }
+    &.flow-node-cc {
+      > header {
+        background-color: #30b95c;
       }
+    }
 
-      &.flow-node-end {
-        > header {
-          height           : 50px;
-          line-height      : 50px;
-          background-color : rgb(0, 0, 0);
-        }
+    &.flow-node-end {
+      > header {
+        height: 50px;
+        line-height: 50px;
+        background-color: rgb(0, 0, 0);
       }
     }
   }
+}
 </style>