refactor

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

@@ -2,14 +2,14 @@ export const jsplumbSetting = {
   grid: [10, 10],
   // 动态锚点、位置自适应
   Anchors: [
-    "TopCenter",
-    "RightMiddle",
-    "BottomCenter",
-    "LeftMiddle"
+    'TopCenter',
+    'RightMiddle',
+    'BottomCenter',
+    'LeftMiddle'
   ],
-  Container: "flow",
+  Container: 'flow',
   // 连线的样式 StateMachine、Flowchart,有四种默认类型：Bezier（贝塞尔曲线），Straight（直线），Flowchart（流程图），State machine（状态机）
-  Connector: ["Flowchart", { cornerRadius: 5, alwaysRespectStubs: true, stub: 5 }],
+  Connector: ['Flowchart', { cornerRadius: 5, alwaysRespectStubs: true, stub: 5 }],
   // 鼠标不能拖动删除线
   ConnectionsDetachable: false,
   // 删除线的时候节点不删除
@@ -17,7 +17,7 @@ export const jsplumbSetting = {
   // 连线的端点
   // Endpoint: ["Dot", {radius: 5}],
   Endpoint: [
-    "Rectangle",
+    'Rectangle',
     {
       height: 10,
       width: 10
@@ -25,20 +25,20 @@ export const jsplumbSetting = {
   ],
   // 线端点的样式
   EndpointStyle: {
-    fill: "rgba(255,255,255,0)",
+    fill: 'rgba(255,255,255,0)',
     outlineWidth: 1
   },
-  LogEnabled: false, //是否打开jsPlumb的内部日志记录
+  LogEnabled: false, // 是否打开jsPlumb的内部日志记录
   // 绘制线
   PaintStyle: {
-    stroke: "#409eff",
+    stroke: '#409eff',
     strokeWidth: 2
   },
-  HoverPaintStyle: { stroke: "#ff00cc", strokeWidth: 2 },
+  HoverPaintStyle: { stroke: '#ff00cc', strokeWidth: 2 },
   // 绘制箭头
   Overlays: [
     [
-      "Arrow",
+      'Arrow',
       {
         width: 8,
         length: 8,
@@ -46,7 +46,7 @@ export const jsplumbSetting = {
       }
     ]
   ],
-  RenderMode: "svg"
+  RenderMode: 'svg'
 }
 
 // jsplumb连接参数
@@ -55,35 +55,35 @@ export const jsplumbConnectOptions = {
   isTarget: true,
   // 动态锚点、提供了4个方向 Continuous、AutoDefault
   anchor: [
-    "TopCenter",
-    "RightMiddle",
-    "BottomCenter",
-    "LeftMiddle"
+    'TopCenter',
+    'RightMiddle',
+    'BottomCenter',
+    'LeftMiddle'
   ]
 }
 
 export const jsplumbSourceOptions = {
-  filter: ".node-anchor", //触发连线的区域
-  /*"span"表示标签，".className"表示类，"#id"表示元素id*/
+  filter: '.node-anchor', // 触发连线的区域
+  /* "span"表示标签，".className"表示类，"#id"表示元素id */
   filterExclude: false,
   anchor: [
-    "TopCenter",
-    "RightMiddle",
-    "BottomCenter",
-    "LeftMiddle"
+    'TopCenter',
+    'RightMiddle',
+    'BottomCenter',
+    'LeftMiddle'
   ],
   allowLoopback: false
 }
 
 export const jsplumbTargetOptions = {
-  filter: ".node-anchor",
-  /*"span"表示标签，".className"表示类，"#id"表示元素id*/
+  filter: '.node-anchor',
+  /* "span"表示标签，".className"表示类，"#id"表示元素id */
   filterExclude: false,
   anchor: [
-    "TopCenter",
-    "RightMiddle",
-    "BottomCenter",
-    "LeftMiddle"
+    'TopCenter',
+    'RightMiddle',
+    'BottomCenter',
+    'LeftMiddle'
   ],
   allowLoopback: false
-}
+}

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

@@ -32,4 +32,4 @@ const nodeTypeList = [{
 
 console.log(nodeTypeList)
 
-export { nodeTypeList };
+export { nodeTypeList }

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

@@ -1,142 +1,143 @@
-import panzoom from "panzoom";
-import { GenNonDuplicateID } from "../until";
+import panzoom from 'panzoom'
+import { GenNonDuplicateID } from '../until'
 
 const methods = {
-  init() {
+  init () {
     this.jsPlumb.ready(() => {
       // 导入默认配置
-      this.jsPlumb.importDefaults(this.jsplumbSetting);
-      //完成连线前的校验
-      this.jsPlumb.bind("beforeDrop", evt => {
-        let res = () => {}; //此处可以添加是否创建连接的校验， 返回 false 则不添加；
-        return res;
-      });
+      this.jsPlumb.importDefaults(this.jsplumbSetting)
+      // 完成连线前的校验
+      this.jsPlumb.bind('beforeDrop', evt => {
+        let res = () => {} // 此处可以添加是否创建连接的校验， 返回 false 则不添加；
+        return res
+      })
       // 连线创建成功后，维护本地数据
-      this.jsPlumb.bind("connection", evt => {
-        this.addLine(evt);
-      });
-      //连线双击删除事件
-      this.jsPlumb.bind("dblclick", (conn, originalEvent) => {
-        this.confirmDelLine(conn);
-      });
-      //断开连线后，维护本地数据
-      this.jsPlumb.bind("connectionDetached", evt => {
-        this.deleLine(evt);
-      });
-      this.loadEasyFlow();
+      this.jsPlumb.bind('connection', evt => {
+        this.addLine(evt)
+      })
+      // 连线双击删除事件
+      this.jsPlumb.bind('dblclick', (conn, originalEvent) => {
+        this.confirmDelLine(conn)
+      })
+      // 断开连线后，维护本地数据
+      this.jsPlumb.bind('connectionDetached', evt => {
+        this.deleLine(evt)
+      })
+      this.loadEasyFlow()
       // 会使整个jsPlumb立即重绘。
-      this.jsPlumb.setSuspendDrawing(false, true);
-    });
-    this.initPanZoom();
+      this.jsPlumb.setSuspendDrawing(false, true)
+    })
+    this.initPanZoom()
   },
   // 加载流程图
-  loadEasyFlow() {
+  loadEasyFlow () {
     // 初始化节点
     for (let i = 0; i < this.data.nodeList.length; i++) {
-      let node = this.data.nodeList[i];
+      let node = this.data.nodeList[i]
       // 设置源点，可以拖出线连接其他节点
-      this.jsPlumb.makeSource(node.id, this.jsplumbSourceOptions);
+      this.jsPlumb.makeSource(node.id, this.jsplumbSourceOptions)
       // // 设置目标点，其他源点拖出的线可以连接该节点
-      this.jsPlumb.makeTarget(node.id, this.jsplumbTargetOptions);
+      this.jsPlumb.makeTarget(node.id, this.jsplumbTargetOptions)
       // this.jsPlumb.draggable(node.id);
-      this.draggableNode(node.id);
+      this.draggableNode(node.id)
     }
 
     // 初始化连线
-    this.jsPlumb.unbind("connection"); //取消连接事件
+    this.jsPlumb.unbind('connection') // 取消连接事件
     for (let i = 0; i < this.data.lineList.length; i++) {
-      let line = this.data.lineList[i];
+      let line = this.data.lineList[i]
       this.jsPlumb.connect(
         {
           source: line.from,
           target: line.to
         },
         this.jsplumbConnectOptions
-      );
+      )
     }
-    this.jsPlumb.bind("connection", evt => {
-      let from = evt.source.id;
-      let to = evt.target.id;
+    this.jsPlumb.bind('connection', evt => {
+      let from = evt.source.id
+      let to = evt.target.id
       this.data.lineList.push({
         from: from,
         to: to,
-        label: "连线名称",
+        label: '连线名称',
         id: GenNonDuplicateID(8),
-        remark: ""
-      });
-    });
+        remark: ''
+      })
+    })
   },
-  draggableNode(nodeId) {
+  draggableNode (nodeId) {
     this.jsPlumb.draggable(nodeId, {
       grid: this.commonGrid,
       drag: params => {
-        this.alignForLine(nodeId, params.pos);
+        this.alignForLine(nodeId, params.pos)
       },
       start: () => {},
       stop: params => {
-        this.auxiliaryLine.isShowXLine = false;
-        this.auxiliaryLine.isShowYLine = false;
-        this.changeNodePosition(nodeId, params.pos);
+        this.auxiliaryLine.isShowXLine = false
+        this.auxiliaryLine.isShowYLine = false
+        this.changeNodePosition(nodeId, params.pos)
       }
-    });
+    })
   },
-  //移动节点时，动态显示对齐线
-  alignForLine(nodeId, position) {
+  // 移动节点时，动态显示对齐线
+  alignForLine (nodeId, position) {
+    // eslint-disable-next-line one-var
     let showXLine = false,
-      showYLine = false;
+      showYLine = false
     this.data.nodeList.some(el => {
-      if (el.id !== nodeId && el.left == position[0] + "px") {
-        this.auxiliaryLinePos.x = position[0] + 60;
-        showYLine = true;
+      if (el.id !== nodeId && el.left === position[0] + 'px') {
+        this.auxiliaryLinePos.x = position[0] + 60
+        showYLine = true
       }
-      if (el.id !== nodeId && el.top == position[1] + "px") {
-        this.auxiliaryLinePos.y = position[1] + 20 + 12.5; //12.5是节点下方操作人显示栏的高度1/2
-        showXLine = true;
+      if (el.id !== nodeId && el.top === position[1] + 'px') {
+        this.auxiliaryLinePos.y = position[1] + 20 + 12.5 // 12.5是节点下方操作人显示栏的高度1/2
+        showXLine = true
       }
-    });
-    this.auxiliaryLine.isShowYLine = showYLine;
-    this.auxiliaryLine.isShowXLine = showXLine;
+    })
+    this.auxiliaryLine.isShowYLine = showYLine
+    this.auxiliaryLine.isShowXLine = showXLine
   },
-  changeNodePosition(nodeId, pos) {
+  changeNodePosition (nodeId, pos) {
     this.data.nodeList.some(v => {
-      if (nodeId == v.id) {
-        v.left = pos[0] + "px";
-        v.top = pos[1] + "px";
-        return true;
+      if (nodeId === v.id) {
+        v.left = pos[0] + 'px'
+        v.top = pos[1] + 'px'
+        return true
       } else {
-        return false;
+        return false
       }
-    });
+    })
   },
-  drag(ele, item) {
-    this.currentItem = item;
+  drag (ele, item) {
+    this.currentItem = item
   },
-  drop(event) {
-    const containerRect = this.jsPlumb.getContainer().getBoundingClientRect();
-    const scale = this.getScale();
-    let left = (event.pageX - containerRect.left - 60) / scale;
-    let top = (event.pageY - containerRect.top - 20) / scale;
+  drop (event) {
+    const containerRect = this.jsPlumb.getContainer().getBoundingClientRect()
+    const scale = this.getScale()
+    let left = (event.pageX - containerRect.left - 60) / scale
+    let top = (event.pageY - containerRect.top - 20) / scale
 
     var temp = {
       ...this.currentItem,
       id: GenNonDuplicateID(8),
-      top: Math.round(top / 20) * 20 + "px",
-      left: Math.round(left / 20) * 20 + "px"
-    };
-    this.addNode(temp);
+      top: Math.round(top / 20) * 20 + 'px',
+      left: Math.round(left / 20) * 20 + 'px'
+    }
+    this.addNode(temp)
   },
-  addLine(line) {
-    let from = line.source.id;
-    let to = line.target.id;
+  addLine (line) {
+    let from = line.source.id
+    let to = line.target.id
     this.data.lineList.push({
       from: from,
       to: to,
-      label: "连线名称",
+      label: '连线名称',
       id: GenNonDuplicateID(8),
-      remark: ""
-    });
+      remark: ''
+    })
   },
-  confirmDelLine(line) {
+  confirmDelLine (line) {
     // this.$Modal.confirm({
     //   title: '删除连线',
     //   content: "<p>确认删除该连线？</p>",
@@ -144,58 +145,58 @@ const methods = {
     //     this.jsPlumb.deleteConnection(line)
     //   }
     // })
-    this.$confirm("确认删除该连线?", "删除连线", {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning"
+    this.$confirm('确认删除该连线?', '删除连线', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
     })
       .then(() => {
-        this.jsPlumb.deleteConnection(line);
+        this.jsPlumb.deleteConnection(line)
       })
       .catch(() => {
         this.$message({
-          type: "info",
-          message: "已取消删除"
-        });
-      });
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
   },
-  deleLine(line) {
+  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) {
-    event.preventDefault();
+  allowDrop (event) {
+    event.preventDefault()
   },
-  getScale() {
-    let scale1;
+  getScale () {
+    let scale1
     if (this.jsPlumb.pan) {
-      const { scale } = this.jsPlumb.pan.getTransform();
-      scale1 = scale;
+      const { scale } = this.jsPlumb.pan.getTransform()
+      scale1 = scale
     } else {
       const matrix = window.getComputedStyle(this.jsPlumb.getContainer())
-        .transform;
-      scale1 = matrix.split(", ")[3] * 1;
+        .transform
+      scale1 = matrix.split(', ')[3] * 1
     }
-    this.jsPlumb.setZoom(scale1);
-    return scale1;
+    this.jsPlumb.setZoom(scale1)
+    return scale1
   },
   // 添加新的节点
-  addNode(temp) {
-    this.data.nodeList.push(temp);
+  addNode (temp) {
+    this.data.nodeList.push(temp)
     this.$nextTick(() => {
-      this.jsPlumb.makeSource(temp.id, this.jsplumbSourceOptions);
-      this.jsPlumb.makeTarget(temp.id, this.jsplumbTargetOptions);
-      this.draggableNode(temp.id);
-    });
+      this.jsPlumb.makeSource(temp.id, this.jsplumbSourceOptions)
+      this.jsPlumb.makeTarget(temp.id, this.jsplumbTargetOptions)
+      this.draggableNode(temp.id)
+    })
   },
 
-  initPanZoom() {
-    const mainContainer = this.jsPlumb.getContainer();
-    const mainContainerWrap = mainContainer.parentNode;
+  initPanZoom () {
+    const mainContainer = this.jsPlumb.getContainer()
+    const mainContainerWrap = mainContainer.parentNode
     const pan = panzoom(mainContainer, {
       smoothScroll: false,
       bounds: true,
@@ -203,141 +204,143 @@ const methods = {
       zoomDoubleClickSpeed: 1,
       minZoom: 0.5,
       maxZoom: 2,
-      //设置滚动缩放的组合键，默认不需要组合键
+      // 设置滚动缩放的组合键，默认不需要组合键
       beforeWheel: e => {
-        console.log(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;
+        var shouldIgnore = e.ctrlKey
+        return shouldIgnore
       }
-    });
-    this.jsPlumb.mainContainerWrap = mainContainerWrap;
-    this.jsPlumb.pan = pan;
+    })
+    this.jsPlumb.mainContainerWrap = mainContainerWrap
+    this.jsPlumb.pan = pan
     // 缩放时设置jsPlumb的缩放比率
-    pan.on("zoom", e => {
-      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);
-    });
-    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);
-    });
+    pan.on('zoom', e => {
+      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)
+    })
+    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)
+    })
 
     // 平移时设置鼠标样式
-    mainContainerWrap.style.cursor = "grab";
-    mainContainerWrap.addEventListener("mousedown", function wrapMousedown() {
-      this.style.cursor = "grabbing";
-      mainContainerWrap.addEventListener("mouseout", function wrapMouseout() {
-        this.style.cursor = "grab";
-      });
-    });
-    mainContainerWrap.addEventListener("mouseup", function wrapMouseup() {
-      this.style.cursor = "grab";
-    });
+    mainContainerWrap.style.cursor = 'grab'
+    mainContainerWrap.addEventListener('mousedown', function wrapMousedown () {
+      this.style.cursor = 'grabbing'
+      mainContainerWrap.addEventListener('mouseout', function wrapMouseout () {
+        this.style.cursor = 'grab'
+      })
+    })
+    mainContainerWrap.addEventListener('mouseup', function wrapMouseup () {
+      this.style.cursor = 'grab'
+    })
   },
 
-  setNode(nodeId, node) {
+  setNode (nodeId, node) {
     this.data.nodeList.some(v => {
       if (v.id === nodeId) {
         for (var key in node) {
-          v[key] = node[key];
+          v[key] = node[key]
         }
         // v.nodeName = node.nodeName
-        return true;
+        return true
       } else {
-        return false;
+        return false
       }
-    });
+    })
   },
 
-  //删除节点
-  deleteNode(node) {
+  // 删除节点
+  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();
+  // 更改连线状态
+  changeLineState (nodeId, val) {
+    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() {
+  // 初始化节点位置  （以便对齐,居中）
+  fixNodesPosition () {
     if (this.data.nodeList && this.$refs.flowWrap) {
-      const nodeWidth = 120;
-      const nodeHeight = 40;
-      let wrapInfo = this.$refs.flowWrap.getBoundingClientRect();
+      const nodeWidth = 120
+      const nodeHeight = 40
+      let wrapInfo = this.$refs.flowWrap.getBoundingClientRect()
+      // eslint-disable-next-line one-var
       let maxLeft = 0,
         minLeft = wrapInfo.width,
         maxTop = 0,
-        minTop = wrapInfo.height;
+        minTop = wrapInfo.height
       let nodePoint = {
         left: 0,
         right: 0,
         top: 0,
         bottom: 0
-      };
+      }
+      // eslint-disable-next-line one-var
       let fixTop = 0,
-        fixLeft = 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;
-      nodePoint.bottom = wrapInfo.height - maxTop - nodeHeight;
+        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;
+          : 0
       fixLeft =
         nodePoint.left !== nodePoint.right
           ? (nodePoint.right - nodePoint.left) / 2
-          : 0;
+          : 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";
-      });
+        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'
+      })
     }
   }
-};
+}
 
-export default methods;
+export default methods

src/components/work-flow/home.vue

@@ -87,24 +87,24 @@
 </template>
 
 <script>
-import { jsPlumb } from "jsplumb";
-import { nodeTypeList } from "./config/init";
+import { jsPlumb } from 'jsplumb'
+import { nodeTypeList } from './config/init'
 import {
   jsplumbSetting,
   jsplumbConnectOptions,
   jsplumbSourceOptions,
   jsplumbTargetOptions
-} from "./config/commonConfig";
-import methods from "./config/methods";
+} from './config/commonConfig'
+import methods from './config/methods'
 // import data from "./config/data.json";
-import flowNode from "./node-item";
+import flowNode from './node-item'
 export default {
-  name: "FlowEdit",
+  name: 'FlowEdit',
   components: {
     flowNode
   },
   props: {
-    //节点数据源
+    // 节点数据源
     nodeData: {
       type: Object,
       default: {
@@ -112,18 +112,18 @@ export default {
         lineList: []
       }
     },
-    //是否仅查看
+    // 是否仅查看
     disabled: {
       type: Boolean,
       default: false
     },
-    //是否选择操作人，当选择操作人时，其他字段不可编辑
+    // 是否选择操作人，当选择操作人时，其他字段不可编辑
     selectOperator: {
       type: Boolean,
       default: false
     }
   },
-  data() {
+  data () {
     return {
       jsPlumb: null,
       currentItem: null,
@@ -138,95 +138,95 @@ export default {
       jsplumbConnectOptions: jsplumbConnectOptions,
       jsplumbSourceOptions: jsplumbSourceOptions,
       jsplumbTargetOptions: jsplumbTargetOptions,
-      auxiliaryLine: { isShowXLine: false, isShowYLine: false }, //对齐辅助线是否显示
+      auxiliaryLine: { isShowXLine: false, isShowYLine: false }, // 对齐辅助线是否显示
       auxiliaryLinePos: {
-        width: "100%",
-        height: "100%",
+        width: '100%',
+        height: '100%',
         offsetX: 0,
         offsetY: 0,
         x: 20,
         y: 20
       },
-      commonGrid: [5, 5], //节点移动最小距离
-      selectModuleFlag: false, //多选标识
+      commonGrid: [5, 5], // 节点移动最小距离
+      selectModuleFlag: false, // 多选标识
       rectAngle: {
-        px: "", //多选框绘制时的起始点横坐标
-        py: "", //多选框绘制时的起始点纵坐标
+        px: '', // 多选框绘制时的起始点横坐标
+        py: '', // 多选框绘制时的起始点纵坐标
         left: 0,
         top: 0,
         height: 0,
         width: 0
       }
-    };
+    }
   },
   watch: {
-    nodeData(val) {
-      this.initNode();
+    nodeData (val) {
+      this.initNode()
     },
-    disabled(val) {
+    disabled (val) {
     }
   },
-  mounted() {
-    this.jsPlumb = jsPlumb.getInstance();
-    this.initNodeTypeObj();
-    this.initNode();
-    this.fixNodesPosition();
+  mounted () {
+    this.jsPlumb = jsPlumb.getInstance()
+    this.initNodeTypeObj()
+    this.initNode()
+    this.fixNodesPosition()
     this.$nextTick(() => {
-      this.init();
-    });
+      this.init()
+    })
   },
   methods: {
     ...methods,
-    //重置
-    resetNodeData() {
+    // 重置
+    resetNodeData () {
       this.data = {
         nodeList: [],
         lineList: []
-      };
+      }
     },
-    initNodeTypeObj() {
+    initNodeTypeObj () {
       nodeTypeList.map(v => {
-        this.nodeTypeObj[v.type] = v;
-      });
+        this.nodeTypeObj[v.type] = v
+      })
     },
-    initNode() {
-      this.resetNodeData();
+    initNode () {
+      this.resetNodeData()
 
-      this.data.lineList.push(...this.nodeData.lineList);
-      this.data.nodeList = [];
+      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);
-      });
+        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();
-      });
+        this.init()
+      })
     },
-    nodeDisabled(node) {
+    nodeDisabled (node) {
       return (
         this.disabled ||
         this.selectOperator ||
-        (this.data.nodeList.findIndex(t => t.type === "start") > -1 &&
-          node.type === "start") ||
-        (this.data.nodeList.findIndex(t => t.type === "end") > -1 &&
-          node.type === "end") ||
+        (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() {
+    // 保存流程图
+    saveFlow () {
        // 去除流程图背景图片logImg和背景颜色字段log_bg_color
       this.data.nodeList = this.data.nodeList.map(item => {
-        delete item.logImg;
-        delete item.log_bg_color;
-        return item;
-      });
-      this.$emit("saveWorkFlow", this.data);
+        delete item.logImg
+        delete item.log_bg_color
+        return item
+      })
+      this.$emit('saveWorkFlow', this.data)
     }
   }
-};
+}
 </script>
 
 <style lang="less" scoped>

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

@@ -11,7 +11,7 @@
       <el-form-item
         label="工种类型"
         prop="workTypeId"
-        v-if="node.type != 'end'"
+        v-if="node.type !== 'end'"
       >
         <el-select
           v-model="form.workTypeId"
@@ -39,7 +39,7 @@
       <el-form-item
         label="操作人"
         prop="operatorId"
-        v-if="!form.operatorName && selectOperator && node.type != 'end'"
+        v-if="!form.operatorName && selectOperator && node.type !== 'end'"
       >
         <el-select
           v-model="form.operatorId"
@@ -56,16 +56,16 @@
           ></el-option>
         </el-select>
       </el-form-item>
-      
+
     </el-form>
   </div>
 </template>
 
 <script>
-import { getWorkType } from "@/api/crafts";
-import { workTypeMasterList } from "@/api/worktype";
+import { getWorkType } from '@/api/crafts'
+import { workTypeMasterList } from '@/api/worktype'
 export default {
-  name: "nodeEdit",
+  name: 'nodeEdit',
   props: {
     data: {
       type: Object,
@@ -75,13 +75,13 @@ export default {
       type: Boolean,
       default: false
     },
-    //是否选择操作人，当选择操作人时，其他字段不可编辑
+    // 是否选择操作人，当选择操作人时，其他字段不可编辑
     selectOperator: {
       type: Boolean,
       default: false
     }
   },
-  data() {
+  data () {
     return {
       // 工种列表
       workTypeOptions: [],
@@ -89,95 +89,96 @@ export default {
       operatorIdOptions: [],
       node: {},
       form: {
-        nodeName: "",
-        workTypeId: "",
+        nodeName: '',
+        workTypeId: '',
         operatorId: []
       },
       rules: {
         nodeName: [
-          { required: true, message: "请输入节点名称", trigger: "blur" }
+          { required: true, message: '请输入节点名称', trigger: 'blur' }
         ],
         workTypeId: [
-          { required: true, message: "请选择工种", trigger: "blur" }
+          { required: true, message: '请选择工种', trigger: 'blur' }
         ],
         operatorId: [
-          { required: true, message: "请选择操作人", trigger: "blur" }
+          { required: true, message: '请选择操作人', trigger: 'blur' }
         ]
       }
-    };
+    }
   },
   watch: {
-    data(val) {
-      this.node = val;
+    data (val) {
+      this.node = val
       this.form = {
         ...this.form,
         ...this.node
-      };
+      }
     },
-    disabled(val) {
-      this.disabled = val;
+    disabled (val) {
+      this.disabled = val
     }
   },
-  activated() {},
-  created() {
-    this.getWorkTypeOptions();
+  activated () {},
+  created () {
+    this.getWorkTypeOptions()
   },
   computed: {},
-  mounted() {
-    this.node = this.data;
+  mounted () {
+    this.node = this.data
     this.form = {
       ...this.form,
       ...this.node
-    };
+    }
     if (this.node.operatorId) {
-      this.form.operatorId = this.node.operatorId.split(",");
+      this.form.operatorId = this.node.operatorId.split(',')
     }
 
-    this.getOperatorList();
+    this.getOperatorList()
   },
   methods: {
-    getWorkTypeOptions() {
-      this.workTypeOptions = [];
+    getWorkTypeOptions () {
+      this.workTypeOptions = []
       getWorkType().then(({ data }) => {
-        if (data && data.code === "200") {
-          this.workTypeOptions = data.data;
+        if (data && data.code === '200') {
+          this.workTypeOptions = data.data
         }
-      });
+      })
     },
     // 按工种ID查询操作人列表
-    getOperatorList() {
+    getOperatorList () {
       if (this.node.workTypeId) {
         workTypeMasterList(this.node.workTypeId).then(({ data }) => {
-          if (data && data.code === "200") {
-            this.operatorIdOptions = [];
+          if (data && data.code === '200') {
+            this.operatorIdOptions = []
             data.data.forEach(item => {
-              this.operatorIdOptions.push(item);
-            });
+              this.operatorIdOptions.push(item)
+            })
           }
-        });
+        })
       }
     },
     // 校验表单
-    validateFormData() {
+    validateFormData () {
       return new Promise((resolve, reject) => {
-        this.$refs["form"].validate(valid => {
+        this.$refs['form'].validate(valid => {
           if (!valid) {
-            reject();
-            return;
+            // eslint-disable-next-line prefer-promise-reject-errors
+            reject()
+            return
           }
-          resolve();
-        });
-      });
+          resolve()
+        })
+      })
     },
     // 获取表单数据
-    formData() {
-      const form = { ...this.form };
+    formData () {
+      const form = { ...this.form }
       if (this.form.operatorId != null) {
-        form.operatorId = this.form.operatorId.toString();
+        form.operatorId = this.form.operatorId.toString()
       }
-      return form;
+      return form
     }
   }
-};
+}
 </script>
 <style scoped></style>

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

@@ -4,8 +4,8 @@
     ref="node"
     :class="{
       active: isActive || isSelected,
-      done: node.state == 0,
-      todo: node.state == 1
+      done: node.state === 0,
+      todo: node.state === 1
     }"
     :style="flowNodeContainer"
     v-click-outside="setNotActive"
@@ -57,10 +57,10 @@
 </template>
 
 <script>
-import ClickOutside from "vue-click-outside";
-import nodeEdit from "./node-edit";
+import ClickOutside from 'vue-click-outside'
+import nodeEdit from './node-edit'
 export default {
-  name: "nodeItem",
+  name: 'nodeItem',
   components: {
     nodeEdit
   },
@@ -73,7 +73,7 @@ export default {
       type: Boolean,
       default: false
     },
-    //是否选择操作人，当选择操作人时，其他字段不可编辑
+    // 是否选择操作人，当选择操作人时，其他字段不可编辑
     selectOperator: {
       type: Boolean,
       default: false
@@ -85,103 +85,104 @@ export default {
   computed: {
     // 节点容器样式
     flowNodeContainer: {
-      get() {
+      get () {
         return {
           top: this.node.top,
           left: this.node.left
-        };
+        }
       }
     }
   },
-  data() {
+  data () {
     return {
       mouseEnter: false,
       isActive: false,
       isSelected: false,
-      //对话框
+      // 对话框
       dialog: {
         visible: false,
         data: {}
       }
-    };
+    }
   },
   watch: {
-    disabled(val) {
-      onContextmenu();
+    disabled (val) {
+      // eslint-disable-next-line no-undef
+      onContextmenu()
     }
   },
   methods: {
-    showAnchor() {
-      this.mouseEnter = true;
+    showAnchor () {
+      this.mouseEnter = true
     },
-    hideAnchor() {
-      this.mouseEnter = false;
+    hideAnchor () {
+      this.mouseEnter = false
     },
-    onContextmenu() {
+    onContextmenu () {
       this.$contextmenu({
         items: [
           {
-            label: "删除",
+            label: '删除',
             disabled: this.disabled,
-            icon: "",
+            icon: '',
             onClick: () => {
-              this.deleteNode();
+              this.deleteNode()
             }
           }
         ],
         event,
-        customClass: "custom-class",
+        customClass: 'custom-class',
         zIndex: 9999,
         minWidth: 180
-      });
+      })
     },
-    setActive() {
+    setActive () {
       if (window.event.ctrlKey) {
-        this.isSelected = !this.isSelected;
-        return false;
+        this.isSelected = !this.isSelected
+        return false
       }
-      this.isActive = true;
-      this.isSelected = false;
+      this.isActive = true
+      this.isSelected = false
       setTimeout(() => {
-        this.$emit("changeLineState", this.node.id, true);
-      }, 0);
+        this.$emit('changeLineState', this.node.id, true)
+      }, 0)
     },
-    setNotActive() {
+    setNotActive () {
       if (!window.event.ctrlKey) {
-        this.isSelected = false;
+        this.isSelected = false
       }
       if (!this.isActive) {
-        return;
+        return
       }
-      this.$emit("changeLineState", this.node.id, false);
-      this.isActive = false;
+      this.$emit('changeLineState', this.node.id, false)
+      this.isActive = false
     },
-    editNode() {
+    editNode () {
       // 编辑节点
-      this.newNodeName = this.node.nodeName;
-      console.log("节点数据：");
-      console.log(this.node);
-      this.dialog.data = this.node;
-      this.dialog.visible = true;
+      this.newNodeName = this.node.nodeName
+      console.log('节点数据：')
+      console.log(this.node)
+      this.dialog.data = this.node
+      this.dialog.visible = true
     },
-    deleteNode() {
-      this.$emit("deleteNode", this.node);
+    deleteNode () {
+      this.$emit('deleteNode', this.node)
     },
     // 节点编辑提交
-    dialogSubmit() {
+    dialogSubmit () {
       this.$refs.nodeEdit
         .validateFormData()
         .then(() => {
-          let formData = this.$refs.nodeEdit.formData();
-          console.log("表单数据: ");
-          console.log(formData);
-          this.$emit("setNode", this.node.id, formData);
-          this.dialog.visible = false;
+          let formData = this.$refs.nodeEdit.formData()
+          console.log('表单数据: ')
+          console.log(formData)
+          this.$emit('setNode', this.node.id, formData)
+          this.dialog.visible = false
         })
-        .catch(() => {});
+        .catch(() => {})
     }
   }
-};
+}
 </script>
 
 <style lang="less" scoped>

src/components/work-flow/until.js

@@ -1,7 +1,5 @@
-import { getStepId } from '@/api/crafts'
-
-//生成指定长度的唯一ID
-export function GenNonDuplicateID(randomLength) {
+// 生成指定长度的唯一ID
+export function GenNonDuplicateID (randomLength) {
     // await getStepId().then(({data}) => {
     //     if(data && data.code === '200'){
     //         return data.data.stepId + ''
@@ -12,10 +10,10 @@ export function GenNonDuplicateID(randomLength) {
     //         })
     //     }
     // })
-    randomLength = 5
-    return Number(
+  randomLength = 5
+  return Number(
         Math.random()
         .toString()
         .substr(3, randomLength) + Date.now()
-    ).toString(10);
-}
+    ).toString(10)
+}

src/main.js

@@ -15,15 +15,15 @@ import cloneDeep from 'lodash/cloneDeep'
 import SuperFlow from './views/modules/common/vue-super-flow/index'
 import html2pdf from '@/api/pdf'
 import Print from 'vue-print-nb'
-import ElementUI from 'element-ui';
+import ElementUI from 'element-ui'
 import Contextmenu from 'vue-contextmenujs'
 
 Vue.use(VueCookie)
 Vue.use(SuperFlow)
 Vue.use(html2pdf)
 Vue.use(Print)
-Vue.use(ElementUI);
-Vue.use(Contextmenu);
+Vue.use(ElementUI)
+Vue.use(Contextmenu)
 Vue.config.productionTip = false
 
 // 非生产环境, 适配mockjs模拟数据                 // api: https://github.com/nuysoft/Mock

src/views/modules/production/monitoring-details.vue

@@ -40,16 +40,16 @@
 </template>
 
 <script>
-import { getMonitoringDetail } from "@/api/production";
-import WorkFlow from "@/components/work-flow/home";
+import { getMonitoringDetail } from '@/api/production'
+import WorkFlow from '@/components/work-flow/home'
 export default {
-  name: "monitoring-details",
+  name: 'monitoring-details',
   components: {
     WorkFlow
   },
-  data() {
+  data () {
     return {
-      mouldId: "",
+      mouldId: '',
       visible: false,
       dataForm: {},
       operatorList: [],
@@ -60,51 +60,51 @@ export default {
         nodeList: [],
         lineList: []
       },
-      //是否点击了流程图保存按钮
+      // 是否点击了流程图保存按钮
       clickFlowSave: false,
       datas: {},
       dataRule: {
         mouldName: [
-          { required: true, message: "请输入模板名称", trigger: "blur" }
+          { required: true, message: '请输入模板名称', trigger: 'blur' }
         ]
       },
       dataRule1: {
         operatorIds: [
-          { required: true, message: "操作人员不能为空", trigger: "change" }
+          { required: true, message: '操作人员不能为空', trigger: 'change' }
         ]
       }
-    };
+    }
   },
   methods: {
     // 初始化表单
-    async init(id, prodCode, disable) {
-      this.visible = true;
-      this.display = disable;
-      this.nodeList = [];
-      this.linkList = [];
-      this.mouldId = id;
-      this.dataForm.prodCode = prodCode;
+    async init (id, prodCode, disable) {
+      this.visible = true
+      this.display = disable
+      this.nodeList = []
+      this.linkList = []
+      this.mouldId = id
+      this.dataForm.prodCode = prodCode
 
       await getMonitoringDetail(id).then(async ({ data }) => {
-        if (data && data.code === "200") {
+        if (data && data.code === '200') {
           this.dataForm = {
             ...this.dataForm
-          };
+          }
           // 流程图展示
           this.workFlowData = {
             nodeList: data.data.nodeList,
             lineList: data.data.lineList
-          };
+          }
         }
-      });
+      })
     },
-    //保存流程图
-    saveWorkFlow(workFlowData) {
-      this.clickFlowSave = true;
-      this.workFlowData = workFlowData;
+    // 保存流程图
+    saveWorkFlow (workFlowData) {
+      this.clickFlowSave = true
+      this.workFlowData = workFlowData
     }
   }
-};
+}
 </script>
 
 <style scoped lang="scss">

src/views/modules/production/recording-details.vue

@@ -32,17 +32,17 @@
 </template>
 
 <script>
-import { getRecordingDetail } from "@/api/production";
-import WorkFlow from "@/components/work-flow/home";
+import { getRecordingDetail } from '@/api/production'
+import WorkFlow from '@/components/work-flow/home'
 
 export default {
-  name: "recording-details",
+  name: 'recording-details',
   components: {
     WorkFlow
   },
-  data() {
+  data () {
     return {
-      mouldId: "",
+      mouldId: '',
       visible: false,
       dataForm: {},
       operatorList: [],
@@ -53,43 +53,43 @@ export default {
         nodeList: [],
         lineList: []
       },
-      //是否点击了流程图保存按钮
+      // 是否点击了流程图保存按钮
       clickFlowSave: false,
       datas: {},
       dataRule: {
         mouldName: [
-          { required: true, message: "请输入模板名称", trigger: "blur" }
+          { required: true, message: '请输入模板名称', trigger: 'blur' }
         ]
       },
       dataRule1: {
         operatorIds: [
-          { required: true, message: "操作人员不能为空", trigger: "change" }
+          { required: true, message: '操作人员不能为空', trigger: 'change' }
         ]
       }
-    };
+    }
   },
   methods: {
     // 初始化表单
-    async init(id, disable) {
-      this.visible = true;
-      this.display = disable;
-      this.nodeList = [];
-      this.linkList = [];
-      this.mouldId = id;
+    async init (id, disable) {
+      this.visible = true
+      this.display = disable
+      this.nodeList = []
+      this.linkList = []
+      this.mouldId = id
 
       await getRecordingDetail(id).then(async ({ data }) => {
-        if (data && data.code === "200") {
-          this.dataForm = { ...this.dataForm };
+        if (data && data.code === '200') {
+          this.dataForm = { ...this.dataForm }
           // 流程图展示
           this.workFlowData = {
             nodeList: data.data.nodeList,
             lineList: data.data.lineList
-          };
+          }
         }
-      });
+      })
     }
   }
-};
+}
 </script>
 
 <style scoped lang="scss"></style>

src/views/modules/production/scheduling-details.vue

@@ -33,21 +33,19 @@
 </template>
 
 <script>
-import { getStepId } from "@/api/crafts";
-import { getInfo, plan } from "@/api/production";
-import { workTypeMasterList } from "@/api/worktype";
-import { uuid } from "../common/vue-super-flow/utils";
-import WorkFlow from "@/components/work-flow/home";
+import { getInfo, plan } from '@/api/production'
+import { workTypeMasterList } from '@/api/worktype'
+import WorkFlow from '@/components/work-flow/home'
 const drawerType = {
   node: 0,
   link: 1
-};
+}
 export default {
-  name: "scheduling-details",
+  name: 'scheduling-details',
   components: { WorkFlow },
-  data() {
+  data () {
     return {
-      productionId: "",
+      productionId: '',
       visible: false,
       dataForm: {},
       drawerType,
@@ -58,110 +56,110 @@ export default {
         nodeList: [],
         lineList: []
       },
-      //是否点击了流程图保存按钮
+      // 是否点击了流程图保存按钮
       clickFlowSave: false,
       dataRule: {},
       dataRule1: {
         operatorIds: [
-          { required: true, message: "操作人员不能为空", trigger: "change" }
+          { required: true, message: '操作人员不能为空', trigger: 'change' }
         ]
       }
-    };
+    }
   },
   methods: {
     // 初始化表彰
-    async init(id, disable) {
-      this.visible = true;
-      this.productionId = id;
+    async init (id, disable) {
+      this.visible = true
+      this.productionId = id
 
       await getInfo(id).then(async ({ data }) => {
-        if (data && data.code === "200") {
-          this.workFlowData = data.data;
+        if (data && data.code === '200') {
+          this.workFlowData = data.data
         }
-      });
+      })
     },
     // 按工种ID查询操作人列表
-    getOperatorList(workTypeId) {
+    getOperatorList (workTypeId) {
       workTypeMasterList(workTypeId).then(({ data }) => {
-        if (data && data.code === "200") {
-          this.operatorList = [];
+        if (data && data.code === '200') {
+          this.operatorList = []
           data.data.forEach(item => {
-            this.operatorList.push(item);
-          });
+            this.operatorList.push(item)
+          })
         }
-      });
+      })
     },
-    dataFormSubmit() {
+    dataFormSubmit () {
       if (!this.clickFlowSave) {
-        this.$message.error("请先点击流程图保存按钮！");
-        return;
+        this.$message.error('请先点击流程图保存按钮！')
+        return
       }
 
       if (
         !this.workFlowData ||
-        this.workFlowData.nodeList.length == 0 ||
-        this.workFlowData.lineList.length == 0
+        this.workFlowData.nodeList.length === 0 ||
+        this.workFlowData.lineList.length === 0
       ) {
-        this.$message.error("请先完成流程图！");
-        this.clickFlowSave = false;
-        return;
+        this.$message.error('请先完成流程图！')
+        this.clickFlowSave = false
+        return
       }
 
-      this.$refs["dataForm"].validate(valid => {
+      this.$refs['dataForm'].validate(valid => {
         if (valid) {
           // eslint-disable-next-line no-unused-vars
-          let productionPlanNodes = [];
+          let productionPlanNodes = []
           for (
             let index = 0;
             index < this.workFlowData.nodeList.length;
             index++
           ) {
-            const node = this.workFlowData.nodeList[index];
-            if (node.type !== "end" && node.operatorId == "") {
-              this.$message.error(`请选择 ${node.nodeName} 的操作人员！`);
-              this.clickFlowSave = false;
-              return;
+            const node = this.workFlowData.nodeList[index]
+            if (node.type !== 'end' && node.operatorId === '') {
+              this.$message.error(`请选择 ${node.nodeName} 的操作人员！`)
+              this.clickFlowSave = false
+              return
             }
             productionPlanNodes.push({
               nodeId: node.id,
               operatorId: node.operatorId
-            });
+            })
           }
 
           let submitData = {
             productionId: this.productionId,
             productionPlanNodes: productionPlanNodes
-          };
+          }
           plan(submitData)
             .then(({ data }) => {
-              if (data && data.code === "200") {
+              if (data && data.code === '200') {
                 this.$message({
-                  message: "操作成功",
-                  type: "success",
+                  message: '操作成功',
+                  type: 'success',
                   duration: 1500,
                   onClose: () => {
-                    this.$emit("refreshDataList");
-                    this.visible = false;
+                    this.$emit('refreshDataList')
+                    this.visible = false
                   }
-                });
+                })
               } else {
-                this.clickFlowSave = false;
-                this.$message.error(data.msg);
+                this.clickFlowSave = false
+                this.$message.error(data.msg)
               }
             })
             .catch(() => {
-              this.clickFlowSave = false;
-            });
+              this.clickFlowSave = false
+            })
         }
-      });
+      })
     },
-    //保存流程图
-    saveWorkFlow(workFlowData) {
-      this.clickFlowSave = true;
-      this.workFlowData = workFlowData;
+    // 保存流程图
+    saveWorkFlow (workFlowData) {
+      this.clickFlowSave = true
+      this.workFlowData = workFlowData
     }
   }
-};
+}
 </script>
 
 <style scoped></style>

src/views/modules/production/scheduling-mould-details.vue

@@ -64,28 +64,26 @@
 </template>
 
 <script>
-import { getStepId } from "@/api/crafts";
 import {
   getMouldDetail,
   getProductList,
   getMouldDetailByProductId,
   saveProdProductionMould,
   updateProdProductionMould
-} from "@/api/production";
-import { workTypeMasterList } from "@/api/worktype";
-import { uuid } from "../common/vue-super-flow/utils";
-import WorkFlow from "@/components/work-flow/home";
+} from '@/api/production'
+import { workTypeMasterList } from '@/api/worktype'
+import WorkFlow from '@/components/work-flow/home'
 export default {
-  name: "scheduling-details",
+  name: 'scheduling-details',
   components: {
     WorkFlow
   },
-  data() {
+  data () {
     return {
-      mouldId: "",
+      mouldId: '',
       visible: false,
       dataForm: {
-        mouldName: ""
+        mouldName: ''
       },
       operatorList: [],
       operatorIds: [],
@@ -96,171 +94,171 @@ export default {
         nodeList: [],
         lineList: []
       },
-      //是否点击了流程图保存按钮
+      // 是否点击了流程图保存按钮
       clickFlowSave: false,
       dataRule: {
         mouldName: [
-          { required: true, message: "请输入模板名称", trigger: "blur" }
+          { required: true, message: '请输入模板名称', trigger: 'blur' }
         ]
       },
       dataRule1: {
         operatorIds: [
-          { required: true, message: "操作人员不能为空", trigger: "change" }
+          { required: true, message: '操作人员不能为空', trigger: 'change' }
         ]
       }
-    };
+    }
   },
   methods: {
     // 初始化产品名称列表
-    async initProductList() {
+    async initProductList () {
       getProductList().then(({ data }) => {
-        if (data && data.code === "200") {
+        if (data && data.code === '200') {
           data.data.forEach(item => {
-            this.productList.push(item);
-          });
+            this.productList.push(item)
+          })
         }
-      });
+      })
     },
     // 初始化表单
-    async init(id, disable) {
-      this.visible = true;
-      this.display = disable;
-      this.mouldId = id;
+    async init (id, disable) {
+      this.visible = true
+      this.display = disable
+      this.mouldId = id
       if (!disable) {
-        await this.initProductList();
+        await this.initProductList()
       }
 
       await getMouldDetail(id).then(async ({ data }) => {
-        if (data && data.code === "200") {
-          this.dataForm = data.data;
+        if (data && data.code === '200') {
+          this.dataForm = data.data
         }
-      });
+      })
     },
     // 根据产品ID查询步骤详情
-    async productChange(productId) {
+    async productChange (productId) {
       getMouldDetailByProductId(productId).then(async ({ data }) => {
-        if (data && data.code === "200") {
+        if (data && data.code === '200') {
           this.dataForm = {
             ...this.dataForm
-          };
+          }
           // 流程图展示
           this.workFlowData = {
             nodeList: data.data.nodeList,
             lineList: data.data.lineList
-          };
+          }
         }
-      });
+      })
     },
     // 按工种ID查询操作人列表
-    getOperatorList(workTypeId) {
+    getOperatorList (workTypeId) {
       workTypeMasterList(workTypeId).then(({ data }) => {
-        if (data && data.code === "200") {
-          this.operatorList = [];
+        if (data && data.code === '200') {
+          this.operatorList = []
           data.data.forEach(item => {
-            this.operatorList.push(item);
-          });
+            this.operatorList.push(item)
+          })
         }
-      });
+      })
     },
-    dataFormSubmit() {
+    dataFormSubmit () {
       if (!this.clickFlowSave) {
-        this.$message.error("请先点击流程图保存按钮！");
-        return;
+        this.$message.error('请先点击流程图保存按钮！')
+        return
       }
 
       if (
         !this.workFlowData ||
-        this.workFlowData.nodeList.length == 0 ||
-        this.workFlowData.lineList.length == 0
+        this.workFlowData.nodeList.length === 0 ||
+        this.workFlowData.lineList.length === 0
       ) {
-        this.$message.error("请先完成流程图！");
-        this.clickFlowSave = false;
-        return;
+        this.$message.error('请先完成流程图！')
+        this.clickFlowSave = false
+        return
       }
 
-      this.$refs["dataForm"].validate(valid => {
+      this.$refs['dataForm'].validate(valid => {
         if (valid) {
           // eslint-disable-next-line no-unused-vars
-          let productionPlanNodes = [];
+          let productionPlanNodes = []
           for (
             let index = 0;
             index < this.workFlowData.nodeList.length;
             index++
           ) {
-            const node = this.workFlowData.nodeList[index];
-            if (node.type !== "end" && node.operatorId == "") {
-              this.$message.error(`请选择 ${node.nodeName} 的操作人员！`);
-              this.clickFlowSave = false;
-              return;
+            const node = this.workFlowData.nodeList[index]
+            if (node.type !== 'end' && node.operatorId === '') {
+              this.$message.error(`请选择 ${node.nodeName} 的操作人员！`)
+              this.clickFlowSave = false
+              return
             }
             productionPlanNodes.push({
               techNodeId: node.id,
               operatorId: node.operatorId
-            });
+            })
           }
 
           let submitData = {
             mouldName: this.dataForm.mouldName,
             productId: this.dataForm.productId,
             nodeList: productionPlanNodes
-          };
+          }
 
           if (this.mouldId === 0) {
             // 新增
             saveProdProductionMould(submitData)
               .then(({ data }) => {
-                if (data && data.code === "200") {
+                if (data && data.code === '200') {
                   this.$message({
-                    message: "操作成功",
-                    type: "success",
+                    message: '操作成功',
+                    type: 'success',
                     duration: 1500,
                     onClose: () => {
-                      this.$emit("refreshDataList");
-                      this.visible = false;
+                      this.$emit('refreshDataList')
+                      this.visible = false
                     }
-                  });
+                  })
                 } else {
-                  this.clickFlowSave = false;
-                  this.$message.error(data.msg);
+                  this.clickFlowSave = false
+                  this.$message.error(data.msg)
                 }
               })
               .catch(() => {
-                this.clickFlowSave = false;
-              });
+                this.clickFlowSave = false
+              })
           } else {
             // 更新
-            submitData.mouldId = this.mouldId;
+            submitData.mouldId = this.mouldId
             updateProdProductionMould(submitData)
               .then(({ data }) => {
-                if (data && data.code === "200") {
+                if (data && data.code === '200') {
                   this.$message({
-                    message: "操作成功",
-                    type: "success",
+                    message: '操作成功',
+                    type: 'success',
                     duration: 1500,
                     onClose: () => {
-                      this.$emit("refreshDataList");
-                      this.visible = false;
+                      this.$emit('refreshDataList')
+                      this.visible = false
                     }
-                  });
+                  })
                 } else {
-                  this.clickFlowSave = false;
-                  this.$message.error(data.msg);
+                  this.clickFlowSave = false
+                  this.$message.error(data.msg)
                 }
               })
               .catch(() => {
-                this.clickFlowSave = false;
-              });
+                this.clickFlowSave = false
+              })
           }
         }
-      });
+      })
     },
-    //保存流程图
-    saveWorkFlow(workFlowData) {
-      this.clickFlowSave = true;
-      this.workFlowData = workFlowData;
+    // 保存流程图
+    saveWorkFlow (workFlowData) {
+      this.clickFlowSave = true
+      this.workFlowData = workFlowData
     }
   }
-};
+}
 </script>
 
 <style scoped></style>

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

@@ -72,15 +72,15 @@
 </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";
-import WorkFlow from "@/components/work-flow/home";
+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",
+  name: 'crafts-detail',
   components: {
     EDesc,
     EDescItem,
@@ -88,7 +88,7 @@ export default {
     ApproveComponent,
     WorkFlow
   },
-  data() {
+  data () {
     return {
       visible: false,
       isFlow: false,
@@ -101,39 +101,39 @@ export default {
         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);
+    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) {
+    getDetails (businessType) {
       getInfo(this.id).then(({ data }) => {
-        if (data && data.code === "200") {
-          this.dataForm = data.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
-            );
+            )
           }
           // 附件
           if (data.data.attachList) {
@@ -142,29 +142,29 @@ export default {
                 name: item.fileName,
                 url: item.url,
                 id: item.url
-              });
-            });
+              })
+            })
           }
           // 初始化审批Form
-          this.showApproveForm(businessType, this.id);
+          this.showApproveForm(businessType, this.id)
         }
-      });
+      })
     },
     // 初始化审批Form
-    showApproveForm(businessType, businessId) {
+    showApproveForm (businessType, businessId) {
       if (this.isFlow) {
         this.$nextTick(() => {
-          this.$refs.approve.init(businessType, businessId);
-        });
+          this.$refs.approve.init(businessType, businessId)
+        })
       }
     },
     // 审批完成
-    approveFinished() {
-      this.visible = false;
-      this.$emit("approveFinished");
+    approveFinished () {
+      this.visible = false
+      this.$emit('approveFinished')
     }
   }
-};
+}
 </script>
 
 <style scoped>

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

@@ -89,21 +89,21 @@
 </template>
 
 <script>
-import { getInfo, getProduct, getWorkType, getStepId } from "@/api/crafts";
-import UploadComponent from "../common/upload-component";
-import WorkFlow from "@/components/work-flow/home";
+import { getInfo, getProduct, getWorkType } 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",
+  name: 'add-or-update',
   components: { UploadComponent, WorkFlow },
   computed: {
     orgId: {
-      get() {
-        return this.$store.state.user.orgId;
+      get () {
+        return this.$store.state.user.orgId
       }
     }
   },
-  data() {
+  data () {
     return {
       workTypeOptions: [],
       datas: {},
@@ -113,160 +113,160 @@ export default {
       dataList: [],
       id: 0,
       dataForm: {
-        techName: "",
-        techVersion: "",
-        productId: "",
-        notes: ""
+        techName: '',
+        techVersion: '',
+        productId: '',
+        notes: ''
       },
-      previewPath: "",
-      previewName: "",
+      previewPath: '',
+      previewName: '',
       previewVisible: false,
       optionsProducts: [],
       optionLevel: [],
       workFlowData: {
         nodeList: [],
         lineList: []
-      }, //流程图数据
+      }, // 流程图数据
       dataRule: {
         techName: [
-          { required: true, message: "工艺名称不能为空", trigger: "blur" }
+          { required: true, message: '工艺名称不能为空', trigger: 'blur' }
         ],
         techVersion: [
-          { required: true, message: "工艺版本不能为空", trigger: "blur" }
+          { required: true, message: '工艺版本不能为空', trigger: 'blur' }
         ],
         productId: [
-          { required: true, message: "产品不能为空", trigger: "change" }
+          { required: true, message: '产品不能为空', trigger: 'change' }
         ]
       },
       dataRule1: {
         name: [
-          { required: true, message: "节点名称不能为空", trigger: "blur" }
+          { required: true, message: '节点名称不能为空', trigger: 'blur' }
         ],
         type: [
-          { required: true, message: "节点类型不能为空", trigger: "change" }
+          { required: true, message: '节点类型不能为空', trigger: 'change' }
         ],
         workTypeId: [
-          { required: true, message: "工种不能为空", trigger: "change" }
+          { required: true, message: '工种不能为空', trigger: 'change' }
         ]
       }
-    };
+    }
   },
-  created() {
-    this.initNode();
+  created () {
+    this.initNode()
   },
-  mounted() {
-    this.initNode();
+  mounted () {
+    this.initNode()
   },
   methods: {
-    initNode() {
+    initNode () {
       // this.workFlowData = data;
     },
-    resetWorkFlow() {
+    resetWorkFlow () {
       this.workFlowData = {
         nodeList: [],
         lineList: []
-      };
+      }
     },
-    async init(id, display) {
+    async init (id, display) {
       this.dataForm = {
         techName: '',
         techVersion: '',
         productId: '',
         notes: ''
       }
-      this.visible = true;
-      this.display = display;
+      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 (data && data.code === '200') {
+          this.optionLevel = data.data.records
         }
-      });
-      if (!id) return;
+      })
+      if (!id) return
       await getInfo(id).then(async ({ data }) => {
-        if (data && data.code === "200") {
-          this.dataForm = data.data;
+        if (data && data.code === '200') {
+          this.dataForm = data.data
         }
-      });
+      })
     },
-    getWorkType() {
+    getWorkType () {
       getWorkType().then(({ data }) => {
-        if (data && data.code === "200") {
-          this.workTypeOptions = data.data;
+        if (data && data.code === '200') {
+          this.workTypeOptions = data.data
         }
-      });
+      })
     },
-    handleRemove(file, fileList) {
-      this.fileList = fileList;
+    handleRemove (file, fileList) {
+      this.fileList = fileList
     },
-    handleChange(file, fileList) {
-      this.fileList = fileList;
+    handleChange (file, fileList) {
+      this.fileList = fileList
     },
-    handleExceed(files, fileList) {
+    handleExceed (files, fileList) {
       this.$message.warning(
         `当前限制选择 5 个文件，本次选择了 ${
           files.length
         } 个文件，共选择了 ${files.length + fileList.length} 个文件`
-      );
+      )
     },
-    validateField(type) {
-      this.$refs.dataForm.validateField(type);
+    validateField (type) {
+      this.$refs.dataForm.validateField(type)
     },
     // 表单提交
-    dataFormSubmit() {
+    dataFormSubmit () {
       if (!this.workFlowData) {
-        this.$message.error("请先完成流程图！");
-        return;
+        this.$message.error('请先完成流程图！')
+        return
       }
 
-      this.$refs["dataForm"].validate(valid => {
+      this.$refs['dataForm'].validate(valid => {
         if (valid) {
           // 填充附件
-          let fList = this.fileList;
+          let fList = this.fileList
           if (fList.length > 0) {
-            this.dataForm.attachList = [];
+            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",
+            method: 'post',
             data: this.$http.adornData({
               ...this.dataForm,
               ...this.workFlowData
             })
           }).then(({ data }) => {
-            if (data && data.code === "200") {
+            if (data && data.code === '200') {
               this.$message({
-                message: "操作成功",
-                type: "success",
+                message: '操作成功',
+                type: 'success',
                 duration: 1500,
                 onClose: () => {
-                  this.resetWorkFlow();
-                  this.$emit("refreshDataList");
-                  this.visible = false;
+                  this.resetWorkFlow()
+                  this.$emit('refreshDataList')
+                  this.visible = false
                 }
-              });
+              })
             } else {
-              this.$message.error(data.msg);
+              this.$message.error(data.msg)
             }
-          });
+          })
         }
-      });
+      })
     },
-    uploadSuccess(fileList) {
-      this.fileList = fileList;
+    uploadSuccess (fileList) {
+      this.fileList = fileList
     },
-    //保存流程图
-    saveWorkFlow(workFlowData) {
-      this.workFlowData = workFlowData;
+    // 保存流程图
+    saveWorkFlow (workFlowData) {
+      this.workFlowData = workFlowData
     }
   }
-};
+}
 </script>
 
 <style lang="less" scoped>

yarn.lock

@@ -185,6 +185,13 @@ alphanum-sort@^1.0.1, alphanum-sort@^1.0.2:
   resolved "https://registry.npm.taobao.org/alphanum-sort/download/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
   integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
 
+amator@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/amator/download/amator-1.1.0.tgz#08c6b60bc93aec2b61bbfc0c4d677d30323cc0f1"
+  integrity sha1-CMa2C8k67Cthu/wMTWd9MDI8wPE=
+  dependencies:
+    bezier-easing "^2.0.3"
+
 amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/amdefine/download/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
@@ -516,6 +523,11 @@ async-foreach@^0.1.3:
   resolved "https://registry.npm.taobao.org/async-foreach/download/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
   integrity sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=
 
+async-validator@^3.3.0:
+  version "3.5.2"
+  resolved "https://registry.npmmirror.com/async-validator/download/async-validator-3.5.2.tgz#68e866a96824e8b2694ff7a831c1a25c44d5e500"
+  integrity sha1-aOhmqWgk6LJpT/eoMcGiXETV5QA=
+
 async-validator@~1.8.1:
   version "1.8.5"
   resolved "https://registry.npmmirror.com/async-validator/download/async-validator-1.8.5.tgz?cache=0&sync_timestamp=1634529532378&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fasync-validator%2Fdownload%2Fasync-validator-1.8.5.tgz#dc3e08ec1fd0dddb67e60842f02c0cd1cec6d7f0"
@@ -1475,6 +1487,11 @@ base@^0.11.1:
     mixin-deep "^1.2.0"
     pascalcase "^0.1.1"
 
+batch-processor@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.nlark.com/batch-processor/download/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
+  integrity sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=
+
 batch@0.6.1:
   version "0.6.1"
   resolved "https://registry.npm.taobao.org/batch/download/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
@@ -1492,6 +1509,11 @@ beeper@^1.0.0:
   resolved "https://registry.nlark.com/beeper/download/beeper-1.1.1.tgz#e6d5ea8c5dad001304a70b22638447f69cb2f809"
   integrity sha1-5tXqjF2tABMEpwsiY4RH9pyy+Ak=
 
+bezier-easing@^2.0.3:
+  version "2.1.0"
+  resolved "https://registry.nlark.com/bezier-easing/download/bezier-easing-2.1.0.tgz#c04dfe8b926d6ecaca1813d69ff179b7c2025d86"
+  integrity sha1-wE3+i5JtbsrKGBPWn/F5t8ICXYY=
+
 big.js@^3.1.3:
   version "3.2.0"
   resolved "https://registry.nlark.com/big.js/download/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
@@ -2911,7 +2933,7 @@ debug@4:
   dependencies:
     ms "2.1.2"
 
-debug@^3.1.0, debug@^3.1.1, debug@^3.2.6, debug@^3.2.7:
+debug@^3.1.0, debug@^3.1.1, debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.npm.taobao.org/debug/download/debug-3.2.7.tgz?cache=0&sync_timestamp=1607566571506&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
   integrity sha1-clgLfpFF+zm2Z2+cXl+xALk0F5o=
@@ -2972,6 +2994,11 @@ deepmerge@^1.2.0:
   resolved "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
   integrity sha1-EEmdhohEza1P7ghC34x/bwyVp1M=
 
+deepmerge@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.nlark.com/deepmerge/download/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha1-XT/yKgHAD2RUBaL7wX0HeKGAEXA=
+
 default-require-extensions@^1.0.0:
   version "1.0.0"
   resolved "https://registry.nlark.com/default-require-extensions/download/default-require-extensions-1.0.0.tgz#f37ea15d3e13ffd9b437d33e1a75b5fb97874cb8"
@@ -3307,10 +3334,17 @@ electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30, electron-to-chromium@
   resolved "https://registry.nlark.com/electron-to-chromium/download/electron-to-chromium-1.3.749.tgz#0ecebc529ceb49dd2a7c838ae425236644c3439a"
   integrity sha1-Ds68UpzrSd0qfIOK5CUjZkTDQ5o=
 
-element-ui@^2.15.6:
+element-resize-detector@^1.2.0:
+  version "1.2.4"
+  resolved "https://registry.npmmirror.com/element-resize-detector/download/element-resize-detector-1.2.4.tgz#3e6c5982dd77508b5fa7e6d5c02170e26325c9b1"
+  integrity sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==
+  dependencies:
+    batch-processor "1.0.0"
+
+element-ui@^2.13.1:
   version "2.15.6"
   resolved "https://registry.npmmirror.com/element-ui/download/element-ui-2.15.6.tgz#c9609add35af5a686a4b7685dc1d757c75e01df3"
-  integrity sha1-yWCa3TWvWmhqS3aF3B11fHXgHfM=
+  integrity sha512-rcYXEKd/j2G0AgficAOk1Zd1AsnHRkhmrK4yLHmNOiimU2JfsywgfKUjMoFuT6pQx0luhovj8lFjpE4Fnt58Iw==
   dependencies:
     async-validator "~1.8.1"
     babel-helper-vue-jsx-merge-props "^2.0.0"
@@ -5278,7 +5312,7 @@ humanize-ms@^1.2.1:
   dependencies:
     ms "^2.0.0"
 
-iconv-lite@0.4.24, iconv-lite@^0.4.4:
+iconv-lite@0.4.24:
   version "0.4.24"
   resolved "https://registry.nlark.com/iconv-lite/download/iconv-lite-0.4.24.tgz?cache=0&sync_timestamp=1621826271136&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ficonv-lite%2Fdownload%2Ficonv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha1-ICK0sl+93CHS9SSXSkdKr+czkIs=
@@ -6265,6 +6299,11 @@ jest@21.2.0:
   dependencies:
     jest-cli "^21.2.0"
 
+jquery@^3.5.1:
+  version "3.6.0"
+  resolved "https://registry.nlark.com/jquery/download/jquery-3.6.0.tgz#c72a09f15c1bdce142f49dbf1170bdf8adac2470"
+  integrity sha1-xyoJ8Vwb3OFC9J2/EXC9+K2sJHA=
+
 js-base64@^2.1.8, js-base64@^2.1.9:
   version "2.6.4"
   resolved "https://registry.nlark.com/js-base64/download/js-base64-2.6.4.tgz?cache=0&sync_timestamp=1621703335082&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fjs-base64%2Fdownload%2Fjs-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
@@ -6281,6 +6320,11 @@ js-beautify@^1.6.12, js-beautify@^1.6.14:
     mkdirp "^1.0.4"
     nopt "^5.0.0"
 
+js-calendar@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.nlark.com/js-calendar/download/js-calendar-1.2.3.tgz#a583b0644b4e695ba394f344d103dbcc7a7a7d3e"
+  integrity sha1-pYOwZEtOaVujlPNE0QPbzHp6fT4=
+
 "js-tokens@^3.0.0 || ^4.0.0":
   version "4.0.0"
   resolved "https://registry.nlark.com/js-tokens/download/js-tokens-4.0.0.tgz?cache=0&sync_timestamp=1619345098261&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fjs-tokens%2Fdownload%2Fjs-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -6450,6 +6494,11 @@ jspdf@^2.4.0:
     dompurify "^2.2.0"
     html2canvas "^1.0.0-rc.5"
 
+jsplumb@^2.15.5:
+  version "2.15.6"
+  resolved "https://registry.npmmirror.com/jsplumb/download/jsplumb-2.15.6.tgz#16d97a195a52cc8e4227d9e29971ff82b83e8faf"
+  integrity sha1-Ftl6GVpSzI5CJ9nimXH/grg+j68=
+
 jsprim@^1.2.2:
   version "1.4.1"
   resolved "https://registry.npm.taobao.org/jsprim/download/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
@@ -6542,13 +6591,12 @@ less-loader@^5.0.0:
     loader-utils "^1.1.0"
     pify "^4.0.1"
 
-less@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.npm.taobao.org/less/download/less-4.1.1.tgz?cache=0&sync_timestamp=1612066490256&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fless%2Fdownload%2Fless-4.1.1.tgz#15bf253a9939791dc690888c3ff424f3e6c7edba"
-  integrity sha1-Fb8lOpk5eR3GkIiMP/Qk8+bH7bo=
+less@^3.0.4:
+  version "3.13.1"
+  resolved "https://registry.npmmirror.com/less/download/less-3.13.1.tgz#0ebc91d2a0e9c0c6735b83d496b0ab0583077909"
+  integrity sha1-DryR0qDpwMZzW4PUlrCrBYMHeQk=
   dependencies:
     copy-anything "^2.0.1"
-    parse-node-version "^1.0.1"
     tslib "^1.10.0"
   optionalDependencies:
     errno "^0.1.1"
@@ -6556,7 +6604,7 @@ less@^4.1.1:
     image-size "~0.5.0"
     make-dir "^2.1.0"
     mime "^1.4.1"
-    needle "^2.5.2"
+    native-request "^1.0.5"
     source-map "~0.6.0"
 
 leven@^2.1.0:
@@ -7030,6 +7078,11 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.nlark.com/lodash.throttle/download/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+
 lodash.union@~4.6.0:
   version "4.6.0"
   resolved "https://registry.npm.taobao.org/lodash.union/download/lodash.union-4.6.0.tgz#48bb5088409f16f1821666641c44dd1aaae3cd88"
@@ -7603,6 +7656,11 @@ nanomatch@^1.2.1, nanomatch@^1.2.9:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
+native-request@^1.0.5:
+  version "1.1.0"
+  resolved "https://registry.nlark.com/native-request/download/native-request-1.1.0.tgz#acdb30fe2eefa3e1bc8c54b3a6852e9c5c0d3cb0"
+  integrity sha1-rNsw/i7vo+G8jFSzpoUunFwNPLA=
+
 natives@^1.1.3:
   version "1.1.6"
   resolved "https://registry.npm.taobao.org/natives/download/natives-1.1.6.tgz#a603b4a498ab77173612b9ea1acdec4d980f00bb"
@@ -7613,15 +7671,6 @@ natural-compare@^1.4.0:
   resolved "https://registry.nlark.com/natural-compare/download/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
-needle@^2.5.2:
-  version "2.8.0"
-  resolved "https://registry.nlark.com/needle/download/needle-2.8.0.tgz#1c8ef9c1a2c29dcc1e83d73809d7bc681c80a048"
-  integrity sha1-HI75waLCncweg9c4Cde8aByAoEg=
-  dependencies:
-    debug "^3.2.6"
-    iconv-lite "^0.4.4"
-    sax "^1.2.4"
-
 negotiator@0.6.2:
   version "0.6.2"
   resolved "https://registry.npm.taobao.org/negotiator/download/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
@@ -7642,6 +7691,11 @@ next-tick@~1.0.0:
   resolved "https://registry.npm.taobao.org/next-tick/download/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
   integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
 
+ngraph.events@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.nlark.com/ngraph.events/download/ngraph.events-1.2.1.tgz#6e40425ef9dec1e074bbef6da56c8d79b9188fd8"
+  integrity sha1-bkBCXvneweB0u+9tpWyNebkYj9g=
+
 nightwatch@0.9.12:
   version "0.9.12"
   resolved "https://registry.nlark.com/nightwatch/download/nightwatch-0.9.12.tgz#5b4a66b26a770db871ef091f484c9eba10e0d260"
@@ -8524,6 +8578,15 @@ pako@~1.0.5:
   resolved "https://registry.npm.taobao.org/pako/download/pako-1.0.11.tgz?cache=0&sync_timestamp=1610208860443&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpako%2Fdownload%2Fpako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
   integrity sha1-bJWZ00DVTf05RjgCUqNXBaa5kr8=
 
+panzoom@^9.4.1:
+  version "9.4.2"
+  resolved "https://registry.nlark.com/panzoom/download/panzoom-9.4.2.tgz#5b3ebdb72efbedfbd51e09bca6134248ad8ccad7"
+  integrity sha1-Wz69ty777fvVHgm8phNCSK2Mytc=
+  dependencies:
+    amator "^1.1.0"
+    ngraph.events "^1.2.1"
+    wheel "^1.0.0"
+
 parallel-transform@^1.1.0:
   version "1.2.0"
   resolved "https://registry.npm.taobao.org/parallel-transform/download/parallel-transform-1.2.0.tgz#9049ca37d6cb2182c3b1d2c720be94d14a5814fc"
@@ -8577,7 +8640,7 @@ parse-json@^2.2.0:
   dependencies:
     error-ex "^1.2.0"
 
-parse-node-version@^1.0.0, parse-node-version@^1.0.1:
+parse-node-version@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/parse-node-version/download/parse-node-version-1.0.1.tgz#e2b5dbede00e7fa9bc363607f53327e8b073189b"
   integrity sha1-4rXb7eAOf6m8NjYH9TMn6LBzGJs=
@@ -8755,6 +8818,11 @@ pluralize@^1.2.1:
   resolved "https://registry.npm.taobao.org/pluralize/download/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"
   integrity sha1-0aIUg/0iu0HlihL6NCGCMUCJfEU=
 
+popper.js@^1.14.6:
+  version "1.16.1"
+  resolved "https://registry.nlark.com/popper.js/download/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
+  integrity sha1-KiI8s9x7YhPXQOQDcr5A3kPmWxs=
+
 portfinder@1.0.13:
   version "1.0.13"
   resolved "https://registry.nlark.com/portfinder/download/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
@@ -10086,7 +10154,7 @@ sass-loader@^6.0.6:
     neo-async "^2.5.0"
     pify "^3.0.0"
 
-sax@^1.2.1, sax@^1.2.4, sax@~1.2.1:
+sax@^1.2.1, sax@~1.2.1:
   version "1.2.4"
   resolved "https://registry.npm.taobao.org/sax/download/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha1-KBYjTiN4vdxOU1T6tcqold9xANk=
@@ -11057,6 +11125,11 @@ tiny-relative-date@^1.3.0:
   resolved "https://registry.npm.taobao.org/tiny-relative-date/download/tiny-relative-date-1.3.0.tgz#fa08aad501ed730f31cc043181d995c39a935e07"
   integrity sha1-+giq1QHtcw8xzAQxgdmVw5qTXgc=
 
+tinycolor2@^1.4.1:
+  version "1.4.2"
+  resolved "https://registry.nlark.com/tinycolor2/download/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
+  integrity sha1-P2pNEHGtB2dtf6Ry4frECnGdiAM=
+
 tmpl@1.0.x:
   version "1.0.4"
   resolved "https://registry.nlark.com/tmpl/download/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
@@ -11534,6 +11607,11 @@ uuid@^3.3.2, uuid@^3.3.3:
   resolved "https://registry.nlark.com/uuid/download/uuid-3.4.0.tgz?cache=0&sync_timestamp=1622213185460&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fuuid%2Fdownload%2Fuuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha1-sj5DWK+oogL+ehAK8fX4g/AgB+4=
 
+v-click-outside-x@^3.7.1:
+  version "3.7.1"
+  resolved "https://registry.nlark.com/v-click-outside-x/download/v-click-outside-x-3.7.1.tgz#aa03eaa0e41e44cb5207dcf86c2d9f0dd64084c1"
+  integrity sha1-qgPqoOQeRMtSB9z4bC2fDdZAhME=
+
 v8flags@^2.0.2:
   version "2.1.1"
   resolved "https://registry.npm.taobao.org/v8flags/download/v8flags-2.1.1.tgz#aab1a1fa30d45f88dd321148875ac02c0b55e5b4"
@@ -11575,6 +11653,20 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+view-design@^4.5.0-beta.3:
+  version "4.7.0"
+  resolved "https://registry.npmmirror.com/view-design/download/view-design-4.7.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fview-design%2Fdownload%2Fview-design-4.7.0.tgz#98c4ec18ed70d1b58157007f8107a77158334846"
+  integrity sha512-WRvVRfsZciN0aJYlz+6b1zxs5G8tLFb4OUKOu+PiN0QyIGmdgWVziEyEmioYtJahQpueWiQpRYGzyxrpz3UkWQ==
+  dependencies:
+    async-validator "^3.3.0"
+    deepmerge "^2.2.1"
+    element-resize-detector "^1.2.0"
+    js-calendar "^1.2.3"
+    lodash.throttle "^4.1.1"
+    popper.js "^1.14.6"
+    tinycolor2 "^1.4.1"
+    v-click-outside-x "^3.7.1"
+
 vinyl-fs@^0.3.0:
   version "0.3.14"
   resolved "https://registry.npm.taobao.org/vinyl-fs/download/vinyl-fs-0.3.14.tgz#9a6851ce1cac1c1cea5fe86c0931d620c2cfa9e6"
@@ -11623,6 +11715,16 @@ vm-browserify@^1.0.1:
   resolved "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha1-eGQcSIuObKkadfUR56OzKobl3aA=
 
+vue-click-outside@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.nlark.com/vue-click-outside/download/vue-click-outside-1.1.0.tgz#48b7680b518923e701643cccb3e165854aad99eb"
+  integrity sha1-SLdoC1GJI+cBZDzMs+FlhUqtmes=
+
+vue-contextmenujs@^1.3.13:
+  version "1.3.13"
+  resolved "https://registry.nlark.com/vue-contextmenujs/download/vue-contextmenujs-1.3.13.tgz#3bdae023c7bd42095e78da4258000250d50ab8ef"
+  integrity sha1-O9rgI8e9QgleeNpCWAACUNUKuO8=
+
 vue-cookie@1.1.4:
   version "1.1.4"
   resolved "https://registry.npm.taobao.org/vue-cookie/download/vue-cookie-1.1.4.tgz#b8b46d112bda9f93a2f47017c2ed5282d2064fda"
@@ -11926,6 +12028,11 @@ whatwg-url@^4.3.0:
     tr46 "~0.0.3"
     webidl-conversions "^3.0.0"
 
+wheel@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.nlark.com/wheel/download/wheel-1.0.0.tgz#6cf46e06a854181adb8649228077f8b0d5c574ce"
+  integrity sha1-bPRuBqhUGBrbhkkigHf4sNXFdM4=
+
 whet.extend@~0.9.9:
   version "0.9.9"
   resolved "https://registry.npm.taobao.org/whet.extend/download/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"