流程图改版

src/api/crafts.js

@@ -40,6 +40,7 @@ export function getWorkType () {
 export function getStepId () {
   return request({
     url: request.adornUrl(`/biz-service/technology/stepId/generate`),
-    method: 'get'
+    method: 'get',
+    async: false
   })
 }

src/components/work-flow/config/data.json

@@ -6,14 +6,10 @@
       "nodeName": "开始",
       "id": "34v56ha2l9c000",
       "top": "160px",
-      "left": "100px",
-      "meta": {
-      	"workType": 1,
-      	"notes": "我是备注"
-      }
+      "left": "100px"
     },
     {
-      "type": "dataSet",
+      "type": "produce",
       "typeName": "生产",
       "nodeName": "生产",
       "id": "5sdjugrcqhc000",
@@ -21,7 +17,7 @@
       "left": "315px"
     },
     {
-      "type": "encode",
+      "type": "check",
       "typeName": "检验",
       "nodeName": "检验",
       "id": "3atqi5p6oa4000",
@@ -29,15 +25,15 @@
       "left": "600px"
     },
     {
-      "type": "personService",
-      "typeName": "总检",
-      "nodeName": "总检",
+      "type": "check",
+      "typeName": "检验",
+      "nodeName": "检验",
       "id": "49vcu89p5q0000",
       "top": "245px",
       "left": "600px"
     },
     {
-      "type": "personService",
+      "type": "t-check",
       "typeName": "总检",
       "nodeName": "总检",
       "id": "1jhiilb0t2tc00",
@@ -59,42 +55,42 @@
       "to": "5sdjugrcqhc000",
       "label": "连线名称",
       "id": "5n6pp5xqd6s000",
-      "Remark": ""
+      "remark": ""
     },
     {
       "from": "5sdjugrcqhc000",
       "to": "3atqi5p6oa4000",
       "label": "连线名称",
       "id": "2a0ya9j1kev400",
-      "Remark": ""
+      "remark": ""
     },
     {
       "from": "5sdjugrcqhc000",
       "to": "49vcu89p5q0000",
       "label": "连线名称",
       "id": "zoisvo5gpvk00",
-      "Remark": ""
+      "remark": ""
     },
     {
       "from": "3atqi5p6oa4000",
       "to": "1jhiilb0t2tc00",
       "label": "连线名称",
       "id": "4xkb3dju1g0000",
-      "Remark": ""
+      "remark": ""
     },
     {
       "from": "49vcu89p5q0000",
       "to": "1jhiilb0t2tc00",
       "label": "连线名称",
       "id": "ldc917l47w000",
-      "Remark": ""
+      "remark": ""
     },
     {
       "from": "1jhiilb0t2tc00",
       "to": "1ogr3wzy6zhc00",
       "label": "连线名称",
       "id": "478galw3u34000",
-      "Remark": ""
+      "remark": ""
     }
   ]
 }

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

@@ -11,19 +11,19 @@ const nodeTypeList = [{
   logImg: require('@/assets/svg/2结束.svg'),
   log_bg_color: 'rgba(255, 0, 0, 0.2)'
 }, {
-  type: 'dataSet',
+  type: 'produce',
   typeName: '生产',
   nodeName: '生产',
   logImg: require('@/assets/svg/5文件数据.svg'),
   log_bg_color: 'rgba(0, 128, 0, 0.2)'
 }, {
-  type: 'encode',
+  type: 'check',
   typeName: '检验',
   nodeName: '检验',
   logImg: require('@/assets/svg/6数据校验.svg'),
   log_bg_color: 'rgba(163, 117, 233, 0.2)'
 }, {
-  type: 'personService',
+  type: 't-check',
   typeName: '总检',
   nodeName: '总检',
   logImg: require('@/assets/svg/8个人服务.svg'),

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

@@ -62,7 +62,7 @@ const methods = {
         to: to,
         label: "连线名称",
         id: GenNonDuplicateID(8),
-        Remark: ""
+        remark: ""
       });
     });
   },
@@ -134,17 +134,29 @@ const methods = {
       to: to,
       label: "连线名称",
       id: GenNonDuplicateID(8),
-      Remark: ""
+      remark: ""
     });
   },
   confirmDelLine(line) {
-    this.$Modal.confirm({
-      title: '删除连线',
-      content: "<p>确认删除该连线？</p>",
-      onOk: () => {
-        this.jsPlumb.deleteConnection(line)
-      }
-    })
+    // this.$Modal.confirm({
+    //   title: '删除连线',
+    //   content: "<p>确认删除该连线？</p>",
+    //   onOk: () => {
+    //     this.jsPlumb.deleteConnection(line)
+    //   }
+    // })
+    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) => {
@@ -234,10 +246,13 @@ const methods = {
     });
   },
 
-  setNodeName(nodeId, name) {
+  setNode(nodeId, node) {
     this.data.nodeList.some((v) => {
       if (v.id === nodeId) {
-        v.nodeName = name
+        for(var key in node){
+          v[key] = node[key]
+        }
+        // v.nodeName = node.nodeName
         return true
       } else {
         return false

src/components/work-flow/home.vue

@@ -29,8 +29,8 @@
           <div
             v-for="item in nodeTypeList"
             :key="item.type"
-            class="node"
-            draggable="true"
+            :class="nodeDisabled(item) ? 'node node-disabled' : 'node'"
+            :draggable="!nodeDisabled(item)"
             @dragstart="drag($event, item)"
           >
             <div class="log">
@@ -75,7 +75,7 @@
           :id="item.id"
           :key="item.id"
           :node="item"
-          @setNodeName="setNodeName"
+          @setNode="setNode"
           @deleteNode="deleteNode"
           @changeLineState="changeLineState"
         ></flowNode>
@@ -94,13 +94,22 @@ import {
   jsplumbTargetOptions,
 } from "./config/commonConfig";
 import methods from "./config/methods";
-import data from "./config/data.json";
+// import data from "./config/data.json";
 import flowNode from "./node-item";
 export default {
   name: "FlowEdit",
   components: {
     flowNode,
   },
+  props: {
+    nodeData: {
+     type: Object,
+     default: {
+        nodeList: [],
+        lineList: []
+     }
+    }
+  },
   data() {
     return {
       jsPlumb: null,
@@ -137,6 +146,10 @@ export default {
       },
     };
   },
+  watch: {
+    data(val) {
+    }
+  },
   mounted() {
     this.jsPlumb = jsPlumb.getInstance();
     this.initNodeTypeObj();
@@ -154,13 +167,18 @@ export default {
       });
     },
     initNode() {
-      this.data.lineList = data.lineList;
-      data.nodeList.map((v) => {
+        this.data.lineList = 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);
       });
     },
+    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;
+    },
     //保存流程图
     saveFlow() {
       console.log(this.data);
@@ -178,6 +196,7 @@ export default {
   margin: 20px auto;
   border: 1px solid #ccc;
   position: relative;
+  text-align: center;
 
   .flow_left {
     border-right: 1px solid #ccc;
@@ -218,6 +237,15 @@ export default {
         flex-grow: 1;
       }
     }
+
+    .node-disabled {
+        &:hover {
+        cursor: default;
+      }
+      &:active {
+        cursor: default;
+      }
+    }
   }
 
   .flow_operation {

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

@@ -13,17 +13,17 @@
           placeholder="请输入节点名称"
         ></el-input>
       </el-form-item>
-      <el-form-item label="工种类型" prop="workType">
+      <el-form-item label="工种类型" prop="workTypeId" v-if="node.type != 'end'">
         <el-select
-          v-model="form.workType"
+          v-model="form.workTypeId"
           placeholder="请选择"
           style="width: 100%"
         >
           <el-option
-            v-for="item in selectList"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
+            v-for="item in workTypeOptions"
+            :key="item.typeId"
+            :label="item.name"
+            :value="item.typeId"
           ></el-option>
         </el-select>
       </el-form-item>
@@ -35,6 +35,7 @@
 </template>
 
 <script>
+import { getWorkType } from '@/api/crafts'
 export default {
   name: "nodeEdit",
   props: {
@@ -45,33 +46,24 @@ export default {
     disabled: {
       type: Boolean,
       default: false,
-    },
+    }
   },
   data() {
     return {
+      // 工种列表
+      workTypeOptions: [],
       node: {},
       form: {
         nodeName: "",
-        workType: "",
+        workTypeId: "",
       },
-      selectList: [
-        {
-          value: 1,
-          label: "黄金糕",
-        },
-        {
-          value: 2,
-          label: "双皮奶",
-        },
-        {
-          value: 3,
-          label: "蚵仔煎",
-        },
-      ],
       rules: {
         nodeName: [
           { required: true, message: "请输入节点名称", trigger: "blur" },
         ],
+        workTypeId: [
+          { required: true, message: "请选择工种", trigger: 'blur'}
+        ]
       },
     };
   },
@@ -80,26 +72,35 @@ export default {
       this.node = val;
       this.form = {
         ...this.form,
-        nodeName: this.node.nodeName,
-        ...this.node.meta,
+        ...this.node,
       };
     },
     disabled(val) {
       this.disabled = val;
-    },
+    }
   },
   activated() {},
-  created() {},
+  created() {
+    this.getWorkTypeOptions()
+  },
   computed: {},
   mounted() {
     this.node = this.data;
     this.form = {
       ...this.form,
-      nodeName: this.node.nodeName,
-      ...this.node.meta,
-    };
+      ...this.node,
+    }
+
+    //this.getWorkType()
   },
   methods: {
+    getWorkTypeOptions() {
+      getWorkType().then(({data}) => {
+        if (data && data.code === '200') {
+          this.workTypeOptions = data.data
+        }
+      })
+    },
     // 校验表单
     validateFormData() {
       return new Promise((resolve, reject) => {

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

@@ -133,25 +133,6 @@ export default {
       console.log(this.node);
       this.dialog.data = this.node;
       this.dialog.visible = true;
-      // this.$Modal.confirm({
-      //   render: (h) => {
-      //     return h("Input", {
-      //       props: {
-      //         value: this.newNodeName,
-      //         autofocus: true,
-      //       },
-      //       on: {
-      //         input: (val) => {
-      //           this.newNodeName = val;
-      //         },
-      //       },
-      //     });
-      //   },
-      //   onOk: () => {
-      //     console.log(this.newNodeName);
-      //     this.$emit("setNodeName", this.node.id, this.newNodeName);
-      //   },
-      // });
     },
     deleteNode() {
       this.$emit("deleteNode", this.node);
@@ -164,8 +145,7 @@ export default {
           let formData = this.$refs.nodeEdit.formData();
           console.log("表单数据: ");
           console.log(formData);
-          // alert(formData.nodeName);
-          this.$emit("setNodeName", this.node.id, formData.nodeName);
+          this.$emit("setNode", this.node.id, formData);
           this.dialog.visible = false;
         })
         .catch(() => {});

src/components/work-flow/until.js

@@ -1,8 +1,21 @@
+import { getStepId } from '@/api/crafts'
+
 //生成指定长度的唯一ID
 export function GenNonDuplicateID(randomLength) {
+    // await getStepId().then(({data}) => {
+    //     if(data && data.code === '200'){
+    //         return data.data.stepId + ''
+    //     } else {
+    //         this.$message({
+    //             type: 'error',
+    //             message: '获取唯一ID失败'
+    //         })
+    //     }
+    // })
+    randomLength = 5
     return Number(
         Math.random()
         .toString()
         .substr(3, randomLength) + Date.now()
-    ).toString(36);
+    ).toString(10);
 }

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

@@ -40,43 +40,10 @@
       <el-form-item label="" label-width="0px">
         <upload-component :display="display" :title="'附件'" :accept="'*'" :file-obj-list="fileList" @uploadSuccess="uploadSuccess"/>
       </el-form-item>
-
-      <!-- <div class="super-flow-demo1">
-        <div class="node-container">
-          <span
-              class="node-item"
-              v-for="item in nodeItemList"
-              @mousedown="evt => nodeItemMouseDown(evt, item.value)">
-            {{ item.label }}
-          </span>
-        </div>
-        <div
-            class="flow-container"
-            ref="flowContainer">
-          <super-flow
-              ref="superFlow"
-              :graph-menu="graphMenuList"
-              :node-menu="nodeMenuList"
-              :link-menu="linkMenuList"
-              :link-base-style="linkBaseStyle"
-              :link-style="linkStyle"
-              :link-desc="linkDesc">
-            <template v-slot:node="{meta}">
-              <div
-                  @mouseup="nodeMouseUp"
-                  @click="nodeClick"
-                  class="flow-node ellipsis">
-                {{ meta.name }}
-              </div>
-            </template>
-          </super-flow>
-        </div>
-      </div> -->
-
       <el-form-item label="工艺步骤" prop="nodeList">
       </el-form-item>
       <el-row class="my-row" style="height: 350px; background-color: #efefef;">
-        <work-flow ref="workFlow" @saveWorkFlow='saveWorkFlow'></work-flow>
+        <work-flow ref="workFlow" :nodeData="workFlowData" @saveWorkFlow='saveWorkFlow'></work-flow>
       </el-row>
     </el-form>
     <span slot="footer" class="dialog-footer">
@@ -84,102 +51,14 @@
       <el-button v-if="!display" type="primary" @click="dataFormSubmit()">确定</el-button>
     </span>
   </el-dialog>
-
-  <el-dialog
-        :title="drawerConf.title"
-        :visible.sync="drawerConf.visible"
-        :close-on-click-modal="false"
-        width="500px">
-      <el-form
-          @keyup.native.enter="settingSubmit"
-          @submit.native.prevent
-          v-show="drawerConf.type === drawerType.node"
-          ref="nodeSetting"
-          :rules="dataRule1"
-          :model="nodeSetting">
-        <el-row class="my-row">
-          <el-col :span="24">
-            <el-form-item
-                label="节点名称"
-                prop="name">
-              <el-input
-                  v-model="nodeSetting.name"
-                  placeholder="请输入节点名称"
-                  maxlength="30">
-              </el-input>
-            </el-form-item>
-          </el-col>
-          <el-col v-if="drawerConf.prop !== 'start' && drawerConf.prop !== 'end'" :span="12">
-            <el-form-item
-                label="节点类型"
-                prop="type">
-                <el-select
-                  v-model="nodeSetting.type"
-                  placeholder="请选择">
-                <el-option
-                  v-for="item in optionsType"
-                  :key="item.value"
-                  :label="item.name"
-                  :value="item.value">
-                </el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col v-if="drawerConf.prop !== 'end'" :span="12">
-            <el-form-item
-              label="工种"
-              prop="workTypeId">
-              <el-select
-                v-model="nodeSetting.workTypeId"
-                placeholder="请选择">
-                <el-option
-                  v-for="item in optionsType1"
-                  :key="item.typeId"
-                  :label="item.name"
-                  :value="item.typeId">
-                </el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item
-                label="节点备注"
-                prop="desc">
-              <el-input
-                  v-model="nodeSetting.desc"
-                  placeholder="请输入节点备注"
-                  maxlength="30">
-              </el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <span
-          slot="footer"
-          class="dialog-footer">
-        <el-button
-            @click="drawerConf.cancel">
-          取 消
-        </el-button>
-        <el-button
-            type="primary"
-            @click="settingSubmit">
-          确 定
-        </el-button>
-      </span>
-    </el-dialog>
 </div>
 </template>
 
 <script>
   import { getInfo, getProduct, getWorkType, getStepId } from '@/api/crafts'
-  import { uuid } from '../common/vue-super-flow/utils'
   import UploadComponent from '../common/upload-component'
   import WorkFlow from '@/components/work-flow/home'
-  const drawerType = {
-    node: 0,
-    link: 1
-  }
+  import data from "@/components/work-flow/config/data.json";
   export default {
     name: 'add-or-update',
     components: {UploadComponent, WorkFlow},
@@ -190,176 +69,8 @@
     },
     data () {
       return {
-        drawerType,
-        optionsType: [{value: '1', name: '生产'}, {value: '2', name: '检验'}],
-        optionsType1: [],
-        drawerConf: {
-          title: '',
-          visible: false,
-          prop: '',
-          type: null,
-          info: null,
-          open: (type, info) => {
-            const conf = this.drawerConf
-            conf.visible = true
-            conf.type = type
-            conf.info = info
-            if (conf.type === drawerType.node) {
-              conf.title = '节点'
-              conf.prop = info.meta.prop
-              if (this.$refs.nodeSetting) this.$refs.nodeSetting.resetFields()
-              this.$set(this.nodeSetting, 'name', info.meta.name)
-              this.$set(this.nodeSetting, 'desc', info.meta.desc)
-              this.$set(this.nodeSetting, 'type', info.meta.type)
-              this.$set(this.nodeSetting, 'workTypeId', info.meta.workTypeId)
-            } else {
-              conf.title = '连线'
-              if (this.$refs.linkSetting) this.$refs.linkSetting.resetFields()
-              // this.$set(this.linkSetting, 'desc', info.meta ? info.meta.desc : '')
-            }
-          },
-          cancel: () => {
-            this.drawerConf.visible = false
-            if (this.drawerConf.type === drawerType.node) {
-              this.$refs.nodeSetting.clearValidate()
-            } else {
-              this.$refs.linkSetting.clearValidate()
-            }
-          }
-        },
-        linkSetting: {
-          desc: ''
-        },
-        nodeSetting: {
-          name: '',
-          desc: '',
-          type: 1,
-          workTypeId: ''
-        },
-        nodeList: [],
-        linkList: [],
+        workTypeOptions: [],
         datas: {},
-        graphMenuList: [
-          [
-            {
-              label: '开始节点',
-              disable (graph) {
-                return !!graph.nodeList.find(node => node.meta.prop === 'start')
-              },
-              selected: async (graph, coordinate) => {
-                const start = graph.nodeList.find(node => node.meta.prop === 'start')
-                let id = ''
-                await getStepId().then(({ data }) => {
-                  id = data.data.stepId
-                })
-                if (!start) {
-                  graph.addNode({
-                    width: 90,
-                    height: 50,
-                    coordinate: coordinate,
-                    id: id,
-                    meta: {
-                      prop: 'start',
-                      name: '开始节点'
-                    }
-                  })
-                }
-              }
-            },
-            {
-              label: '节点',
-              disable: false,
-              selected: async (graph, coordinate) => {
-                let id = ''
-                await getStepId().then(({ data }) => {
-                  id = data.data.stepId
-                })
-                graph.addNode({
-                  width: 120,
-                  height: 70,
-                  coordinate: coordinate,
-                  id: id,
-                  meta: {
-                    prop: 'condition',
-                    name: '节点名称'
-                  }
-                })
-              }
-            },
-            {
-              label: '结束节点',
-              disable (graph) {
-                return !!graph.nodeList.find(point => point.meta.prop === 'end')
-              },
-              selected: async (graph, coordinate) => {
-                let id = ''
-                await getStepId().then(({ data }) => {
-                  id = data.data.stepId
-                })
-                graph.addNode({
-                  width: 90,
-                  height: 50,
-                  coordinate: coordinate,
-                  id: id,
-                  meta: {
-                    prop: 'end',
-                    name: '结束节点'
-                  }
-                })
-              }
-            }
-          ],
-          [
-            {
-              label: '完成',
-              selected: (graph, coordinate) => {
-                graph.selectAll()
-                this.datas = graph
-                console.log(graph)
-              }
-            }
-          ]
-        ],
-        nodeMenuList: [
-          [
-            {
-              label: '删除',
-              disable: false,
-              hidden (node) {
-                return node.meta.prop === 'start'
-              },
-              selected (node, coordinate) {
-                node.remove()
-              }
-            }
-          ],
-          [
-            {
-              label: '编辑',
-              selected: (node, coordinate) => {
-                this.drawerConf.open(drawerType.node, node)
-              }
-            }
-          ]
-        ],
-        linkMenuList: [
-          [
-            {
-              label: '删除',
-              selected: (link, coordinate) => {
-                link.remove()
-              }
-            }
-          ]
-          // [
-          //   {
-          //     label: '编辑',
-          //     selected: (link, coordinate) => {
-          //       this.drawerConf.open(drawerType.link, link)
-          //     }
-          //   }
-          // ]
-        ],
         visible: false,
         display: false,
         fileList: [],
@@ -376,62 +87,10 @@
         previewVisible: false,
         optionsProducts: [],
         optionLevel: [],
-        nodeItemList: [
-          {
-            label: '开始节点',
-            value: () => ({
-              width: 120,
-              height: 40,
-              meta: {
-                prop: 'start',
-                name: '开始节点'
-              }
-            })
-          },
-          {
-            label: '节点',
-            value: () => ({
-              width: 120,
-              height: 40,
-              meta: {
-                prop: 'condition',
-                name: '节点'
-              }
-            })
-          },
-          {
-            label: '结束节点',
-            value: () => ({
-              width: 120,
-              height: 40,
-              meta: {
-                prop: 'end',
-                name: '结束节点'
-              }
-            })
-          }
-        ],
-        dragConf: {
-          isDown: false,
-          isMove: false,
-          offsetTop: 0,
-          offsetLeft: 0,
-          clientX: 0,
-          clientY: 0,
-          ele: null,
-          info: null
-        },
-        linkBaseStyle: {
-          color: '#666666',           // line 颜色
-          hover: '#FF0000',           // line hover 的颜色
-          textColor: '#666666',       // line 描述文字颜色
-          textHover: '#FF0000',       // line 描述文字 hover 颜色
-          font: '14px Arial',         // line 描述文字 字体设置 参考 canvas font
-          dotted: false,              // 是否是虚线
-          lineDash: [4, 4],           // 虚线时生效
-          background: 'rgba(255,255,255,0.6)'    // 描述文字背景色
-        },
-        workFlow: {},
+        workFlowData: {
+          nodeList: [],
+          lineList: [],
+        }, //流程图数据
         dataRule: {
           techName: [{ required: true, message: '工艺名称不能为空', trigger: 'blur' }],
           techVersion: [{ required: true, message: '工艺版本不能为空', trigger: 'blur' }],
@@ -445,22 +104,24 @@
       }
     },
     created () {
-      this.getWorkType()
+      this.initNode()
     },
     mounted () {
-      this.getWorkType()
+      this.initNode()
     },
     methods: {
+      initNode() {
+        // this.workFlowData = data;
+      },
       async init (id, display) {
-        this.getWorkType()
-        this.nodeList = []
-        this.linkList = []
-        this.dataForm = {
-          techName: '',
-          techVersion: '',
-          productId: '',
-          notes: ''
-        }
+        // this.nodeList = []
+        // this.linkList = []
+        // this.dataForm = {
+        //   techName: '',
+        //   techVersion: '',
+        //   productId: '',
+        //   notes: ''
+        // }
         this.visible = true
         this.display = display
         await getProduct({ current: 1, size: 20000 }).then(({data}) => {
@@ -478,43 +139,12 @@
               const datanode = []
               await data.data.proTechnologyStepLists.forEach((v, i) => {
                 // eslint-disable-next-line no-unused-vars
-                const sortNo = []
-                const datas = v.sort((a, b) => Number(a['sortNo']) - Number(b['sortNo']))
-                datas.forEach((item, index) => {
-                  const find = datanode.find(map => map.id === item.stepId)
-                  if (!find) {
-                    datanode.push({
-                      id: item.stepId,
-                      width: (index === 0 || item.workTypeId === '0') ? 90 : 120,
-                      height: (index === 0 || item.workTypeId === '0') ? 50 : 70,
-                      coordinate: item.coordinate.split(','),
-                      meta: {
-                        name: item.stepName,
-                        notes: item.notes || '',
-                        workTypeId: item.workTypeId || '',
-                        type: item.type || ''
-                      }
-                    })
-                  }
-                  const id = item.stepId
-                  if ((index + 1) < datas.length) {
-                    if (datas[index + 1]) {
-                      dataline.push({
-                        id: uuid('link'),
-                        startId: id,
-                        endId: datas[index + 1].stepId,
-                        meta: '',
-                        startAt: [(index === 0 || item.workTypeId === '0') ? 90 : 120, (index === 0 || item.workTypeId === '0') ? 25 : 35],
-                        endAt: [0, (index === 0 || item.workTypeId === '0') ? 25 : 35]
-                      })
-                    }
-                  }
-                })
+
               })
               this.$nextTick(() => {
                 setTimeout(() => {
-                  this.nodeList = datanode
-                  this.linkList = dataline
+                  // this.nodeList = datanode
+                  // this.linkList = dataline
                 }, 200)
               })
             }
@@ -524,7 +154,7 @@
       getWorkType () {
         getWorkType().then(({data}) => {
           if (data && data.code === '200') {
-            this.optionsType1 = data.data
+            this.workTypeOptions = data.data
           }
         })
       },
@@ -540,108 +170,26 @@
       validateField (type) {
         this.$refs.dataForm.validateField(type)
       },
-      getLineData (dataAll, dList, lList, id, sortNo) {
-        debugger
-        const _l = []
-        lList.forEach(l => {
-          if (l.start.id === id) {
-            _l.push(l.end.id)
-          }
-        })
-        if (!sortNo) {
-          const data = dList.filter(v => v.meta.prop === 'start')[0]
-          _l.forEach(item => {
-            dataAll.push([{
-              'notes': data.meta.desc || '',
-              'sortNo': 0,
-              'stepId': data.id,
-              'stepName': data.meta.name,
-              // eslint-disable-next-line no-undef
-              'workTypeId': data.meta.workTypeId || null,
-              'type': data.meta.prop === 'end' ? '4' : (data.meta.type || null),
-              'coordinate': data.coordinate.join(',')
-            }])
-          })
-        }
-        dList.forEach(v => {
-          const _i = _l.indexOf(v.id)
-          if (_i > -1) {
-            if (!v.meta.workTypeId && v.meta.prop !== 'end') {
-              this.$message.error('完善节点工种')
-              return
-            }
-            if (!sortNo) {
-              dataAll[_i].push({
-                'notes': v.meta.desc || '',
-                'sortNo': (sortNo + 1),
-                'stepId': v.id,
-                'stepName': v.meta.name,
-                'workTypeId': v.meta.workTypeId || null,
-                'type': v.meta.prop === 'end' ? '4' : (v.meta.type || null),
-                'coordinate': v.coordinate.join(',')
-              })
-              this.getLineData(dataAll[_i], dList, lList, v.id, (sortNo + 1))
-            } else {
-              let _has = false
-              dataAll.forEach(items => {
-                if (items.stepId === v.id) {
-                  _has = true
-                }
-              })
-              if (!_has) {
-                dataAll.push({
-                  'notes': v.meta.desc || '',
-                  'sortNo': (sortNo + 1),
-                  'stepId': v.id,
-                  'stepName': v.meta.name,
-                  'workTypeId': v.meta.workTypeId || '',
-                  'type': v.meta.prop === 'end' ? 4 : (v.meta.type || ''),
-                  'coordinate': v.coordinate.join(',')
-                })
-              }
-              this.getLineData(dataAll, dList, lList, v.id, (sortNo + 1))
-            }
-          }
-        })
-      },
       // 表单提交
       dataFormSubmit () {
-        if (!this.datas.nodeList) {
-          this.$message.error('请先完成流程图！')
-          return
-        }
-        if (this.datas.nodeList.length <= 2) {
+        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
+        // }
+
         this.$refs['dataForm'].validate((valid) => {
           if (valid) {
-            const proTechnologyStepLists = []
-            let has = false
-            let has1 = false
-            this.datas.nodeList.forEach(v => {
-              if (v.meta.prop === 'start') {
-                has = true
-                this.getLineData(proTechnologyStepLists, this.datas.nodeList, this.datas.linkList, v.id, 0)
-              }
-              if (v.meta.prop === 'end') {
-                has1 = true
-              }
-            })
-            if (!has) {
-              this.$message.error('成流程图没有开始结点！')
-              return
-            }
-            if (!has1) {
-              this.$message.error('成流程图没有结束结点！')
-              return
-            }
-            if (proTechnologyStepLists.length === 0) {
-              this.$message.error('请先完成流程图！')
-              return
-            }
-
             // 填充附件
             let fList = this.fileList
             if (fList.length > 0) {
@@ -657,7 +205,7 @@
             this.$http({
               url: this.$http.adornUrl(`/biz-service/technology/submit`),
               method: 'post',
-              data: this.$http.adornData({...this.dataForm, proTechnologyStepLists: proTechnologyStepLists})
+              data: this.$http.adornData({...this.dataForm, ...this.workFlowData})
             }).then(({data}) => {
               if (data && data.code === '200') {
                 this.$message({
@@ -676,166 +224,13 @@
           }
         })
       },
-      enterIntercept (formNode, toNode, graph) {
-        const formType = formNode.meta.prop
-        switch (toNode.meta.prop) {
-          case 'start':
-            return false
-          case 'approval':
-            return [
-              'start',
-              'approval',
-              'condition',
-              'cc'
-            ].includes(formType)
-          case 'condition':
-            return [
-              'start',
-              'approval',
-              'condition',
-              'cc'
-            ].includes(formType)
-          case 'end':
-            return [
-              'approval',
-              'cc'
-            ].includes(formType)
-          default:
-            return true
-        }
-      },
-      outputIntercept (node, graph) {
-        return !(node.meta.prop === 'end')
-      },
-      linkDesc (link) {
-        return link.meta ? link.meta.desc : ''
-      },
-      settingSubmit () {
-        this.$refs['nodeSetting'].validate((valid) => {
-          if (valid) {
-            const conf = this.drawerConf
-            // 节点
-            if (this.drawerConf.type === drawerType.node) {
-              if (!conf.info.meta) conf.info.meta = {}
-              Object.keys(this.nodeSetting).forEach(key => {
-                this.$set(conf.info.meta, key, this.nodeSetting[key])
-              })
-              this.$refs.nodeSetting.resetFields()
-            } else {
-              // 连线
-              if (!conf.info.meta) conf.info.meta = {}
-              Object.keys(this.linkSetting).forEach(key => {
-                this.$set(conf.info.meta, key, this.linkSetting[key])
-              })
-              this.$refs.linkSetting.resetFields()
-            }
-            conf.visible = false
-          }
-        })
-      },
       uploadSuccess (fileList) {
         this.fileList = fileList
       },
-      docMousemove ({ clientX, clientY }) {
-        const conf = this.dragConf
-
-        if (conf.isMove) {
-          conf.ele.style.top = clientY - conf.offsetTop + 'px'
-          conf.ele.style.left = clientX - conf.offsetLeft + 'px'
-        } else if (conf.isDown) {
-          // 鼠标移动量大于 5 时 移动状态生效
-          conf.isMove =
-              Math.abs(clientX - conf.clientX) > 5 || Math.abs(clientY - conf.clientY) > 5
-        }
-      },
-      docMouseup ({ clientX, clientY }) {
-        const conf = this.dragConf
-        conf.isDown = false
-
-        if (conf.isMove) {
-          const {
-            top,
-            right,
-            bottom,
-            left
-          } = this.$refs.flowContainer.getBoundingClientRect()
-
-          // 判断鼠标是否进入 flow container
-          if (clientX > left && clientX < right && clientY > top && clientY < bottom) {
-            // 获取拖动元素左上角相对 super flow 区域原点坐标
-            const coordinate = this.$refs.superFlow.getMouseCoordinate(
-                clientX - conf.offsetLeft,
-                clientY - conf.offsetTop
-            )
-
-            // 添加节点
-            this.$refs.superFlow.addNode({
-              coordinate,
-              ...conf.info
-            })
-          }
-
-          conf.isMove = false
-        }
-
-        if (conf.ele) {
-          conf.ele.remove()
-          conf.ele = null
-        }
-      },
-      nodeItemMouseDown (evt, infoFun) {
-        const {
-          clientX,
-          clientY,
-          currentTarget
-        } = evt
-
-        const {
-          top,
-          left
-        } = evt.currentTarget.getBoundingClientRect()
-
-        const conf = this.dragConf
-        const ele = currentTarget.cloneNode(true)
-
-        Object.assign(this.dragConf, {
-          offsetLeft: clientX - left,
-          offsetTop: clientY - top,
-          clientX: clientX,
-          clientY: clientY,
-          info: infoFun(),
-          ele,
-          isDown: true
-        })
-
-        ele.style.position = 'fixed'
-        ele.style.margin = '0'
-        ele.style.top = clientY - conf.offsetTop + 'px'
-        ele.style.left = clientX - conf.offsetLeft + 'px'
-
-        this.$el.appendChild(this.dragConf.ele)
-      },
-      linkStyle (link) {
-        if (link.meta && link.meta.desc === '1') {
-          return {
-            color: 'red',
-            hover: '#FF00FF',
-            dotted: true
-          }
-        } else {
-          return {}
-        }
-      },
-      nodeMouseUp (evt) {
-        evt.preventDefault()
-      },
-      nodeClick () {
-        console.log(arguments)
-      },
       //新流程图
-      saveWorkFlow(workFlow){
-        this.workFlow = workFlow
-        console.log(workFlow)
+      saveWorkFlow(workFlowData){
+        this.workFlowData = workFlowData
+        console.log(workFlowData)
       }
     }
   }