升级流程图

src/api/production.js

@@ -52,6 +52,14 @@ export function getRecordingList (params) {
   })
 }
 
+// 获取生产记录列表信息
+export function getRecordingDetail (productionId) {
+  return request({
+    url: request.adornUrl(`/biz-service/ProductionRecord/info/${productionId}`),
+    method: 'get'
+  })
+}
+
 // 生产安排
 export function plan (data) {
   return request({

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

@@ -90,7 +90,7 @@ const methods = {
         showYLine = true;
       }
       if (el.id !== nodeId && el.top == position[1] + "px") {
-        this.auxiliaryLinePos.y = position[1] + 20;
+        this.auxiliaryLinePos.y = position[1] + 20 + 12.5; //12.5是节点下方操作人显示栏的高度1/2
         showXLine = true;
       }
     });

src/components/work-flow/home.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flow_region">
-    <div class="flow_left" v-if="!disabled">
+    <div class="flow_left">
       <div class="help">
         <el-tooltip placement="bottom-start">
           <div slot="content">
@@ -41,7 +41,7 @@
         </div>
       </el-scrollbar>
       <div class="flow_operation">
-        <el-button type="primary" @click="saveFlow">保存</el-button>
+        <el-button type="primary" @click="saveFlow" :disabled="disabled">保存</el-button>
       </div>
     </div>
     <div
@@ -75,6 +75,8 @@
           :id="item.id"
           :key="item.id"
           :node="item"
+          :disabled="disabled"
+          :selectOperator="selectOperator"
           @setNode="setNode"
           @deleteNode="deleteNode"
           @changeLineState="changeLineState"
@@ -102,6 +104,7 @@ export default {
     flowNode
   },
   props: {
+    //节点数据源
     nodeData: {
       type: Object,
       default: {
@@ -109,9 +112,15 @@ export default {
         lineList: []
       }
     },
+    //是否仅查看
     disabled: {
       type: Boolean,
       default: false
+    },
+    //是否选择操作人，当选择操作人时，其他字段不可编辑
+    selectOperator: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -197,6 +206,8 @@ export default {
     },
     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 &&
@@ -206,7 +217,12 @@ export default {
     },
     //保存流程图
     saveFlow() {
-      console.log(this.data);
+       // 去除流程图背景图片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);
     }
   }

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

@@ -1,23 +1,23 @@
 <template>
   <div>
-    <el-form
-      :model="form"
-      ref="form"
-      :disabled="disabled"
-      :rules="rules"
-      label-width="80px"
-    >
+    <el-form :model="form" ref="form" :rules="rules" label-width="80px">
       <el-form-item label="节点名称" prop="nodeName">
         <el-input
           v-model="form.nodeName"
           placeholder="请输入节点名称"
+          :disabled="disabled || selectOperator"
         ></el-input>
       </el-form-item>
-      <el-form-item label="工种类型" prop="workTypeId" v-if="node.type != 'end'">
+      <el-form-item
+        label="工种类型"
+        prop="workTypeId"
+        v-if="node.type != 'end'"
+      >
         <el-select
           v-model="form.workTypeId"
           placeholder="请选择"
           style="width: 100%"
+          :disabled="disabled || selectOperator"
         >
           <el-option
             v-for="item in workTypeOptions"
@@ -28,43 +28,82 @@
         </el-select>
       </el-form-item>
       <el-form-item label="备注" prop="notes">
-        <el-input v-model="form.notes" placeholder="请输入备注"></el-input>
+        <el-input
+          v-model="form.notes"
+          :disabled="disabled || selectOperator"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="操作人" v-if="form.operatorName">
+        <el-input :disabled="disabled && selectOperator" v-model="form.operatorName"></el-input>
+      </el-form-item>
+      <el-form-item
+        label="操作人"
+        prop="operatorId"
+        v-if="!form.operatorName && selectOperator && node.type != 'end'"
+      >
+        <el-select
+          v-model="form.operatorId"
+          :disabled="disabled && selectOperator"
+          multiple
+          placeholder="请选择"
+          style="width: 100%"
+        >
+          <el-option
+            v-for="item in operatorIdOptions"
+            :key="item.userId"
+            :label="item.name"
+            :value="item.userId"
+          ></el-option>
+        </el-select>
       </el-form-item>
+      
     </el-form>
   </div>
 </template>
 
 <script>
-import { getWorkType } from '@/api/crafts'
+import { getWorkType } from "@/api/crafts";
+import { workTypeMasterList } from "@/api/worktype";
 export default {
   name: "nodeEdit",
   props: {
     data: {
       type: Object,
-      default: () => {},
+      default: () => {}
     },
     disabled: {
       type: Boolean,
-      default: false,
+      default: false
+    },
+    //是否选择操作人，当选择操作人时，其他字段不可编辑
+    selectOperator: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
     return {
       // 工种列表
       workTypeOptions: [],
+      // 操作人列表
+      operatorIdOptions: [],
       node: {},
       form: {
         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" }
         ]
-      },
+      }
     };
   },
   watch: {
@@ -72,7 +111,7 @@ export default {
       this.node = val;
       this.form = {
         ...this.form,
-        ...this.node,
+        ...this.node
       };
     },
     disabled(val) {
@@ -81,30 +120,47 @@ export default {
   },
   activated() {},
   created() {
-    this.getWorkTypeOptions()
+    this.getWorkTypeOptions();
   },
   computed: {},
   mounted() {
     this.node = this.data;
     this.form = {
       ...this.form,
-      ...this.node,
+      ...this.node
+    };
+    if (this.node.operatorId) {
+      this.form.operatorId = this.node.operatorId.split(",");
     }
 
-    //this.getWorkType()
+    this.getOperatorList();
   },
   methods: {
     getWorkTypeOptions() {
-      getWorkType().then(({data}) => {
-        if (data && data.code === '200') {
-          this.workTypeOptions = data.data
+      this.workTypeOptions = [];
+      getWorkType().then(({ data }) => {
+        if (data && data.code === "200") {
+          this.workTypeOptions = data.data;
         }
-      })
+      });
+    },
+    // 按工种ID查询操作人列表
+    getOperatorList() {
+      if (this.node.workTypeId) {
+        workTypeMasterList(this.node.workTypeId).then(({ data }) => {
+          if (data && data.code === "200") {
+            this.operatorIdOptions = [];
+            data.data.forEach(item => {
+              this.operatorIdOptions.push(item);
+            });
+          }
+        });
+      }
     },
     // 校验表单
     validateFormData() {
       return new Promise((resolve, reject) => {
-        this.$refs["form"].validate((valid) => {
+        this.$refs["form"].validate(valid => {
           if (!valid) {
             reject();
             return;
@@ -116,10 +172,12 @@ export default {
     // 获取表单数据
     formData() {
       const form = { ...this.form };
+      if (this.form.operatorId != null) {
+        form.operatorId = this.form.operatorId.toString();
+      }
       return form;
-    },
-  },
+    }
+  }
 };
 </script>
-<style scoped>
-</style>
+<style scoped></style>

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

@@ -2,7 +2,11 @@
   <div
     class="node-item"
     ref="node"
-    :class="[isActive || isSelected ? 'active' : '']"
+    :class="{
+      active: isActive || isSelected,
+      done: node.state == 0,
+      todo: node.state == 1
+    }"
     :style="flowNodeContainer"
     v-click-outside="setNotActive"
     @click="setActive"
@@ -11,10 +15,19 @@
     @dblclick.prevent="editNode"
     @contextmenu.prevent="onContextmenu"
   >
-    <div class="log-wrap">
-      <img :src="node.logImg" alt="" />
-    </div>
-    <div class="nodeName">{{ node.nodeName }}</div>
+    <el-row>
+      <el-col :span="8">
+        <div class="log-wrap">
+          <img :src="node.logImg" alt="" />
+        </div>
+      </el-col>
+      <el-col :span="16">
+        <div class="nodeName">{{ node.nodeName }}</div>
+      </el-col>
+    </el-row>
+    <el-row>
+      <div class="node-operator">{{ node.operatorName }}</div>
+    </el-row>
     <!--连线用--//触发连线的区域-->
     <div class="node-anchor anchor-top" v-show="mouseEnter"></div>
     <div class="node-anchor anchor-right" v-show="mouseEnter"></div>
@@ -31,6 +44,7 @@
         ref="nodeEdit"
         :data="dialog.data"
         :disabled="disabled"
+        :selectOperator="selectOperator"
       ></nodeEdit>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialog.visible = false">取 消</el-button>
@@ -58,6 +72,11 @@ export default {
     disabled: {
       type: Boolean,
       default: false
+    },
+    //是否选择操作人，当选择操作人时，其他字段不可编辑
+    selectOperator: {
+      type: Boolean,
+      default: false
     }
   },
   directives: {
@@ -82,11 +101,15 @@ export default {
       //对话框
       dialog: {
         visible: false,
-        disabled: false,
         data: {}
       }
     };
   },
+  watch: {
+    disabled(val) {
+      onContextmenu();
+    }
+  },
   methods: {
     showAnchor() {
       this.mouseEnter = true;
@@ -99,7 +122,7 @@ export default {
         items: [
           {
             label: "删除",
-            disabled: false,
+            disabled: this.disabled,
             icon: "",
             onClick: () => {
               this.deleteNode();
@@ -167,13 +190,14 @@ export default {
 @viewSize: 10px;
 .node-item {
   position: absolute;
-  display: flex;
-  height: 40px;
+  // display: flex;
+  // height: 40px;
   width: 120px;
   justify-content: center;
   align-items: center;
   border: 1px solid #b7b6b6;
   border-radius: 4px;
+  color: #ffffff;
   cursor: move;
   box-sizing: content-box;
   z-index: 9995;
@@ -183,6 +207,7 @@ export default {
       display: block;
     }
   }
+
   .log-wrap {
     width: 40px;
     height: 40px;
@@ -190,7 +215,18 @@ export default {
   }
   .nodeName {
     flex-grow: 1;
-    width: 0;
+    width: 80px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    height: 40px;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+  }
+  .node-operator {
+    border-top: 1px solid #b7b6b6;
+    height: 25px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -232,4 +268,10 @@ export default {
   border: 1px dashed @labelColor;
   box-shadow: 0px 5px 9px 0px rgba(0, 0, 0, 0.5);
 }
+.done {
+  background-color: #cccccc;
+}
+.todo {
+  background-color: #FF3333;
+}
 </style>

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

@@ -1,10 +1,17 @@
 <template>
   <div class="production">
-    <el-dialog title="生产监控详情"
+    <el-dialog
+      title="生产监控详情"
       width="70%"
       :close-on-click-modal="false"
-      :visible.sync="visible">
-      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="auto">
+      :visible.sync="visible"
+    >
+      <el-form
+        :model="dataForm"
+        :rules="dataRule"
+        ref="dataForm"
+        label-width="auto"
+      >
         <el-row class="my-row">
           <el-col :span="8">
             <el-form-item label="产品编号：">
@@ -12,457 +19,95 @@
             </el-form-item>
           </el-col>
         </el-row>
-        <el-row class="my-row" style="height: 350px; background-color: #efefef;">
-          <super-flow
-            v-if="visible"
-            ref="superFlow"
-            :node-list="nodeList"
-            :link-list="linkList"
-            :graph-menu="graphMenuList"
-            :node-menu="nodeMenuList"
-            :link-menu="linkMenuList"
-            :link-desc="linkDesc">
-          </super-flow>
+        <el-row
+          class="my-row"
+          style="height: 350px; background-color: #efefef;"
+        >
+          <work-flow
+            ref="workFlow"
+            :nodeData="workFlowData"
+            :selectOperator="true"
+            :disabled="true"
+            @saveWorkFlow="saveWorkFlow"
+          ></work-flow>
         </el-row>
       </el-form>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="visible = false">取消</el-button>
-        <el-button 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"
-                  disabled>
-              </el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row class="my-row" >
-          <el-col :span="24" v-if="drawerConf.prop !== 'end'">
-            <el-form-item
-              label="操作人员"
-              prop="operatorIds">
-              <el-select
-                v-model="nodeSetting.operatorIds"
-                multiple
-                style="width:100%"
-                placeholder="请选择">
-                <el-option
-                  v-for="item in operatorList"
-                  :key="item.userId"
-                  :label="item.name"
-                  :value="item.userId">
-                </el-option>
-              </el-select>
-            </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>
+        <el-button @click="visible = false">返回</el-button>
       </span>
     </el-dialog>
   </div>
 </template>
 
 <script>
-  import { getStepId } from '@/api/crafts'
-  import { getMonitoringDetail } from '@/api/production'
-  import { uuid } from '../common/vue-super-flow/utils'
-  const drawerType = {
-    node: 0,
-    link: 1
-  }
-  export default {
-    name: 'monitoring-details',
-    data () {
-      return {
-        mouldId: '',
-        visible: false,
-        dataForm: {},
-        drawerType,
-        operatorList: [],
-        operatorIds: [],
-        productList: [],
-        display: false,
-        drawerConf: {
-          title: '',
-          visible: false,
-          prop: '',
-          type: null,
-          info: null,
-          open: (type, info) => {
-            if (info.meta.workTypeId && info.meta.prop !== 'end') {
-              this.getOperatorList(info.meta.workTypeId)
-            }
-
-            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, 'prop', info.meta.prop)
-              this.$set(this.nodeSetting, 'type', info.meta.type)
-              this.$set(this.nodeSetting, 'workTypeId', info.meta.workTypeId)
-              this.$set(this.nodeSetting, 'operatorIds', info.meta.operatorIds)
-            } 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: ''
-        },
-        origin: [100, 100],
+import { getMonitoringDetail } from "@/api/production";
+import WorkFlow from "@/components/work-flow/home";
+export default {
+  name: "monitoring-details",
+  components: {
+    WorkFlow
+  },
+  data() {
+    return {
+      mouldId: "",
+      visible: false,
+      dataForm: {},
+      operatorList: [],
+      operatorIds: [],
+      productList: [],
+      display: false,
+      workFlowData: {
         nodeList: [],
-        linkList: [],
-        graphMenuList: [
-          [
-            {
-              label: '开始节点',
-              disable: true,
-              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: true,
-              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: true,
-              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: true,
-          //     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()
-              }
-            }
-          ]
-        ],
-        datas: {},
-        dataRule: {
-          mouldName: [{required: true, message: '请输入模板名称', trigger: 'blur'}]
-        },
-        dataRule1: {
-          operatorIds: [{ 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
-
-        await getMonitoringDetail(id).then(async ({data}) => {
-          if (data && data.code === '200') {
-            this.dataForm = {...this.dataForm, proTechnologyStepList: data.data}
-            console.log(this.dataForm.proTechnologyStepList)
-            // 图纸
-            if (this.dataForm.proTechnologyStepList) {
-              const dataline = []
-              const datanode = []
-              await this.dataForm.proTechnologyStepList.forEach((v, i) => {
-                // eslint-disable-next-line no-unused-vars
-                const sortNo = []
-
-                const datas = v.sort((a, b) => Number(a['sortNo']) - Number(b['sortNo']))
-                let length = datas.length
-                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') ? 140 : 180,
-                      // height: (index === 0 || item.workTypeId === '0') ? 80 : 100,
-                      width: 140,
-                      height: 80,
-                      coordinate: item.coordinate.split(','),
-                      meta: {
-                        name: item.stepName + (item.state === '0' ? '(已完成)' : '(未完成)'),
-                        desc: item.operatorName,
-                        prop: index === 0 ? 'start' : (index === length - 1) ? 'end' : 'condition',
-                        notes: item.notes || '',
-                        workTypeId: item.workTypeId || '',
-                        type: item.type || '',
-                        operatorIds: item.operatorId == null ? [] : item.operatorId.split(',')
-                      }
-                    })
-                  }
-                  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]
-                        startAt: [120, 35],
-                        endAt: [0, 35]
-                      })
-                    }
-                  }
-                })
-              })
-
-              this.$nextTick(() => {
-                setTimeout(() => {
-                  this.nodeList = datanode
-                  this.linkList = dataline
-                }, 200)
-              })
-            }
-          }
-        })
+        lineList: []
       },
-      linkDesc (link) {
-        return link.meta ? link.meta.desc : ''
+      //是否点击了流程图保存按钮
+      clickFlowSave: false,
+      datas: {},
+      dataRule: {
+        mouldName: [
+          { required: true, message: "请输入模板名称", trigger: "blur" }
+        ]
       },
-      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 => {
-                if (key === 'operatorIds') {
-                  let idList = this.nodeSetting[key]
-                  let nameList = []
-                  idList.forEach(id => {
-                    let name = this.operatorList.find(item => {
-                      return item.userId === id
-                    }).name
-                    nameList.push(name)
-                  })
+      dataRule1: {
+        operatorIds: [
+          { 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;
 
-                  this.$set(conf.info.meta, 'desc', nameList.join(','))
-                }
-                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
-          }
-        })
-      },
-      dataFormSubmit () {},
-      getLineData (dataAll, dList, lList, id, sortNo) {
-        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,
-              'workTypeId': data.meta.workTypeId || null,
-              'type': data.meta.type || null,
-              'coordinate': data.coordinate.join(','),
-              'operatorIds': data.meta.operatorIds
-            }])
-          })
+      await getMonitoringDetail(id).then(async ({ data }) => {
+        if (data && data.code === "200") {
+          this.dataForm = {
+            ...this.dataForm
+          };
+          // 流程图展示
+          this.workFlowData = {
+            nodeList: data.data.nodeList,
+            lineList: data.data.lineList
+          };
         }
-        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.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.prop === 'end' ? 0 : (v.meta.workTypeId || ''),
-                  'type': v.meta.type || '',
-                  'coordinate': v.coordinate.join(',')
-                })
-              }
-              this.getLineData(dataAll, dList, lList, v.id, (sortNo + 1))
-            }
-          }
-        })
-      }
+      });
+    },
+    //保存流程图
+    saveWorkFlow(workFlowData) {
+      this.clickFlowSave = true;
+      this.workFlowData = workFlowData;
     }
   }
+};
 </script>
 
-<style scoped lang='scss'>
+<style scoped lang="scss">
 /deep/ .my-row .super-flow__node {
   width: 180px;
   height: 80px;

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

@@ -1,459 +1,95 @@
-
 <template>
   <div class="production">
-    <el-dialog title="生产记录详情"
+    <el-dialog
+      title="生产记录详情"
       width="70%"
       :close-on-click-modal="false"
-      :visible.sync="visible">
-      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="auto">
-        <el-row class="my-row" style="height: 350px; background-color: #efefef;">
-          <super-flow
-            v-if="visible"
-            ref="superFlow"
-            :node-list="nodeList"
-            :link-list="linkList"
-            :graph-menu="graphMenuList"
-            :node-menu="nodeMenuList"
-            :link-menu="linkMenuList"
-            :link-desc="linkDesc">
-          </super-flow>
+      :visible.sync="visible"
+    >
+      <el-form
+        :model="dataForm"
+        :rules="dataRule"
+        ref="dataForm"
+        label-width="auto"
+      >
+        <el-row
+          class="my-row"
+          style="height: 350px; background-color: #efefef;"
+        >
+          <work-flow
+            ref="workFlow"
+            :nodeData="workFlowData"
+            :selectOperator="true"
+            :disabled="true"
+          ></work-flow>
         </el-row>
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="visible = false">取消</el-button>
-        <el-button 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"
-                  disabled>
-              </el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row class="my-row" >
-          <el-col :span="24" v-if="drawerConf.prop !== 'end'">
-            <el-form-item
-              label="操作人员"
-              prop="operatorIds">
-              <el-select
-                v-model="nodeSetting.operatorIds"
-                multiple
-                style="width:100%"
-                placeholder="请选择">
-                <el-option
-                  v-for="item in operatorList"
-                  :key="item.userId"
-                  :label="item.name"
-                  :value="item.userId">
-                </el-option>
-              </el-select>
-            </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 { getStepId } from '@/api/crafts'
-  import { getMonitoringDetail } from '@/api/production'
-  import { uuid } from '../common/vue-super-flow/utils'
-  const drawerType = {
-    node: 0,
-    link: 1
-  }
-  export default {
-    name: 'recording-details',
-    data () {
-      return {
-        mouldId: '',
-        visible: false,
-        dataForm: {},
-        drawerType,
-        operatorList: [],
-        operatorIds: [],
-        productList: [],
-        display: false,
-        drawerConf: {
-          title: '',
-          visible: false,
-          prop: '',
-          type: null,
-          info: null,
-          open: (type, info) => {
-            if (info.meta.workTypeId && info.meta.prop !== 'end') {
-              this.getOperatorList(info.meta.workTypeId)
-            }
+import { getRecordingDetail } from "@/api/production";
+import WorkFlow from "@/components/work-flow/home";
 
-            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, 'prop', info.meta.prop)
-              this.$set(this.nodeSetting, 'type', info.meta.type)
-              this.$set(this.nodeSetting, 'workTypeId', info.meta.workTypeId)
-              this.$set(this.nodeSetting, 'operatorIds', info.meta.operatorIds)
-            } 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: ''
-        },
-        origin: [100, 100],
+export default {
+  name: "recording-details",
+  components: {
+    WorkFlow
+  },
+  data() {
+    return {
+      mouldId: "",
+      visible: false,
+      dataForm: {},
+      operatorList: [],
+      operatorIds: [],
+      productList: [],
+      display: false,
+      workFlowData: {
         nodeList: [],
-        linkList: [],
-        graphMenuList: [
-          [
-            {
-              label: '开始节点',
-              disable: true,
-              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: true,
-              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: true,
-              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: true,
-          //     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()
-              }
-            }
-          ]
-        ],
-        datas: {},
-        dataRule: {
-          mouldName: [{required: true, message: '请输入模板名称', trigger: 'blur'}]
-        },
-        dataRule1: {
-          operatorIds: [{ required: true, message: '操作人员不能为空', trigger: 'change' }]
-        }
-      }
-    },
-    methods: {
-      // 初始化表单
-      async init (id, disable) {
-        this.visible = true
-        this.display = disable
-        this.nodeList = []
-        this.linkList = []
-        this.mouldId = id
-
-        await getMonitoringDetail(id).then(async ({data}) => {
-          if (data && data.code === '200') {
-            this.dataForm = {...this.dataForm, proTechnologyStepList: data.data}
-            console.log(this.dataForm.proTechnologyStepList)
-            // 图纸
-            if (this.dataForm.proTechnologyStepList) {
-              const dataline = []
-              const datanode = []
-              await this.dataForm.proTechnologyStepList.forEach((v, i) => {
-                // eslint-disable-next-line no-unused-vars
-                const sortNo = []
-
-                const datas = v.sort((a, b) => Number(a['sortNo']) - Number(b['sortNo']))
-                let length = datas.length
-                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') ? 140 : 180,
-                      // height: (index === 0 || item.workTypeId === '0') ? 80 : 100,
-                      width: 140,
-                      height: 80,
-                      coordinate: item.coordinate.split(','),
-                      meta: {
-                        name: item.stepName + (item.state === '0' ? '(已完成)' : '(未完成)'),
-                        desc: item.operatorName,
-                        prop: index === 0 ? 'start' : (index === length - 1) ? 'end' : 'condition',
-                        notes: item.notes || '',
-                        workTypeId: item.workTypeId || '',
-                        type: item.type || '',
-                        operatorIds: item.operatorId == null ? [] : item.operatorId.split(',')
-                      }
-                    })
-                  }
-                  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]
-                        startAt: [120, 35],
-                        endAt: [0, 35]
-                      })
-                    }
-                  }
-                })
-              })
-
-              this.$nextTick(() => {
-                setTimeout(() => {
-                  this.nodeList = datanode
-                  this.linkList = dataline
-                }, 200)
-              })
-            }
-          }
-        })
+        lineList: []
       },
-      linkDesc (link) {
-        return link.meta ? link.meta.desc : ''
+      //是否点击了流程图保存按钮
+      clickFlowSave: false,
+      datas: {},
+      dataRule: {
+        mouldName: [
+          { required: true, message: "请输入模板名称", trigger: "blur" }
+        ]
       },
-      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 => {
-                if (key === 'operatorIds') {
-                  let idList = this.nodeSetting[key]
-                  let nameList = []
-                  idList.forEach(id => {
-                    let name = this.operatorList.find(item => {
-                      return item.userId === id
-                    }).name
-                    nameList.push(name)
-                  })
+      dataRule1: {
+        operatorIds: [
+          { required: true, message: "操作人员不能为空", trigger: "change" }
+        ]
+      }
+    };
+  },
+  methods: {
+    // 初始化表单
+    async init(id, disable) {
+      this.visible = true;
+      this.display = disable;
+      this.nodeList = [];
+      this.linkList = [];
+      this.mouldId = id;
 
-                  this.$set(conf.info.meta, 'desc', nameList.join(','))
-                }
-                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
-          }
-        })
-      },
-      dataFormSubmit () {},
-      getLineData (dataAll, dList, lList, id, sortNo) {
-        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,
-              'workTypeId': data.meta.workTypeId || null,
-              'type': data.meta.type || null,
-              'coordinate': data.coordinate.join(','),
-              'operatorIds': data.meta.operatorIds
-            }])
-          })
+      await getRecordingDetail(id).then(async ({ data }) => {
+        if (data && data.code === "200") {
+          this.dataForm = { ...this.dataForm };
+          // 流程图展示
+          this.workFlowData = {
+            nodeList: data.data.nodeList,
+            lineList: data.data.lineList
+          };
         }
-        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.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.prop === 'end' ? 0 : (v.meta.workTypeId || ''),
-                  'type': v.meta.type || '',
-                  'coordinate': v.coordinate.join(',')
-                })
-              }
-              this.getLineData(dataAll, dList, lList, v.id, (sortNo + 1))
-            }
-          }
-        })
-      }
+      });
     }
   }
+};
 </script>
 
-<style scoped lang='scss'>
-</style>
+<style scoped lang="scss"></style>

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

@@ -1,21 +1,27 @@
 <template>
   <div class="production">
-    <el-dialog title="排产"
+    <el-dialog
+      title="排产"
       width="70%"
       :close-on-click-modal="false"
-      :visible.sync="visible">
-      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="auto">
-        <el-row class="my-row" style="height: 350px; background-color: #efefef;">
-          <super-flow
-            v-if="visible"
-            ref="superFlow"
-            :node-list="nodeList"
-            :link-list="linkList"
-            :graph-menu="graphMenuList"
-            :node-menu="nodeMenuList"
-            :link-menu="linkMenuList"
-            :link-desc="linkDesc">
-          </super-flow>
+      :visible.sync="visible"
+    >
+      <el-form
+        :model="dataForm"
+        :rules="dataRule"
+        ref="dataForm"
+        label-width="auto"
+      >
+        <el-row
+          class="my-row"
+          style="height: 350px; background-color: #efefef;"
+        >
+          <work-flow
+            ref="workFlow"
+            :nodeData="workFlowData"
+            :selectOperator="true"
+            @saveWorkFlow="saveWorkFlow"
+          ></work-flow>
         </el-row>
       </el-form>
       <span slot="footer" class="dialog-footer">
@@ -23,486 +29,139 @@
         <el-button 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"
-                  disabled>
-              </el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row class="my-row" >
-          <el-col :span="24" v-if="drawerConf.prop !== 'end'">
-            <el-form-item
-              label="操作人员"
-              prop="operatorIds">
-              <el-select
-                v-model="nodeSetting.operatorIds"
-                multiple
-                style="width:100%"
-                placeholder="请选择">
-                <el-option
-                  v-for="item in operatorList"
-                  :key="item.userId"
-                  :label="item.name"
-                  :value="item.userId">
-                </el-option>
-              </el-select>
-            </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 { getStepId } from '@/api/crafts'
-  import { getInfo, plan } from '@/api/production'
-  import { workTypeMasterList } from '@/api/worktype'
-  import { uuid } from '../common/vue-super-flow/utils'
-  const drawerType = {
-    node: 0,
-    link: 1
-  }
-  export default {
-    name: 'scheduling-details',
-    data () {
-      return {
-        productionId: '',
-        visible: false,
-        dataForm: {},
-        drawerType,
-        operatorList: [],
-        operatorIds: [],
-        drawerConf: {
-          title: '',
-          visible: false,
-          prop: '',
-          type: null,
-          info: null,
-          open: (type, info) => {
-            if (info.meta.workTypeId && info.meta.prop !== 'end') {
-              this.getOperatorList(info.meta.workTypeId)
-            }
-
-            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, 'prop', info.meta.prop)
-              this.$set(this.nodeSetting, 'type', info.meta.type)
-              this.$set(this.nodeSetting, 'workTypeId', info.meta.workTypeId)
-              this.$set(this.nodeSetting, 'operatorIds', info.meta.operatorIds)
-            } 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: ''
-        },
+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";
+const drawerType = {
+  node: 0,
+  link: 1
+};
+export default {
+  name: "scheduling-details",
+  components: { WorkFlow },
+  data() {
+    return {
+      productionId: "",
+      visible: false,
+      dataForm: {},
+      drawerType,
+      operatorList: [],
+      operatorIds: [],
+      datas: {},
+      workFlowData: {
         nodeList: [],
-        linkList: [],
-        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()
-              }
-            }
-          ]
-        ],
-        datas: {},
-        dataRule: {},
-        dataRule1: {
-          operatorIds: [{ required: true, message: '操作人员不能为空', trigger: 'change' }]
-        }
-      }
-    },
-    methods: {
-      // 初始化表彰
-      async init (id, disable) {
-        this.visible = true
-        this.nodeList = []
-        this.linkList = []
-        this.productionId = id
-
-        await getInfo(id).then(async ({data}) => {
-          if (data && data.code === '200') {
-            this.dataForm = {...this.dataForm, proTechnologyStepLists: data.data}
-            // 图纸
-            if (this.dataForm.proTechnologyStepLists) {
-              const dataline = []
-              const datanode = []
-              await this.dataForm.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']))
-                let length = datas.length
-                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,
-                        prop: index === 0 ? 'start' : (index === length - 1) ? 'end' : 'condition',
-                        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
-                }, 200)
-              })
-            }
-          }
-        })
-      },
-      // 按工种ID查询操作人列表
-      getOperatorList (workTypeId) {
-        workTypeMasterList(workTypeId).then(({data}) => {
-          if (data && data.code === '200') {
-            this.operatorList = []
-            data.data.forEach(item => {
-              this.operatorList.push(item)
-            })
-          }
-        })
+        lineList: []
       },
-      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 => {
-                if (key === 'operatorIds') {
-                  let idList = this.nodeSetting[key]
-                  let nameList = []
-                  idList.forEach(id => {
-                    let name = this.operatorList.find(item => {
-                      return item.userId === id
-                    }).name
-                    nameList.push(name)
-                  })
+      //是否点击了流程图保存按钮
+      clickFlowSave: false,
+      dataRule: {},
+      dataRule1: {
+        operatorIds: [
+          { required: true, message: "操作人员不能为空", trigger: "change" }
+        ]
+      }
+    };
+  },
+  methods: {
+    // 初始化表彰
+    async init(id, disable) {
+      this.visible = true;
+      this.productionId = id;
 
-                  this.$set(conf.info.meta, 'desc', nameList.join(','))
-                }
-                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
-          }
-        })
-      },
-      dataFormSubmit () {
-        if (!this.datas.nodeList) {
-          this.$message.error('请先完成流程图！')
-          return
+      await getInfo(id).then(async ({ data }) => {
+        if (data && data.code === "200") {
+          this.workFlowData = data.data;
         }
-        if (this.datas.nodeList.length <= 2) {
-          this.$message.error('请先完成流程图！')
-          return
+      });
+    },
+    // 按工种ID查询操作人列表
+    getOperatorList(workTypeId) {
+      workTypeMasterList(workTypeId).then(({ data }) => {
+        if (data && data.code === "200") {
+          this.operatorList = [];
+          data.data.forEach(item => {
+            this.operatorList.push(item);
+          });
         }
+      });
+    },
+    dataFormSubmit() {
+      if (!this.clickFlowSave) {
+        this.$message.error("请先点击流程图保存按钮！");
+        return;
+      }
 
-        this.$refs['dataForm'].validate((valid) => {
-          if (valid) {
-            // eslint-disable-next-line no-unused-vars
-            const proTechnologyStepLists = []
+      if (
+        !this.workFlowData ||
+        this.workFlowData.nodeList.length == 0 ||
+        this.workFlowData.lineList.length == 0
+      ) {
+        this.$message.error("请先完成流程图！");
+        this.clickFlowSave = false;
+        return;
+      }
 
-            let productionPlanSteps = []
-            for (let index = 0; index < this.datas.nodeList.length; index++) {
-              const v = this.datas.nodeList[index]
-              let tmp = v.meta.operatorIds || []
-              if (v.meta.prop !== 'end' && tmp.length === 0) {
-                this.$message.error(`请选择 ${v.meta.name} 的操作人员！`)
-                return
-              }
-              productionPlanSteps.push({stepId: v.id, operatorId: tmp.join(',')})
+      this.$refs["dataForm"].validate(valid => {
+        if (valid) {
+          // eslint-disable-next-line no-unused-vars
+          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;
             }
+            productionPlanNodes.push({
+              nodeId: node.id,
+              operatorId: node.operatorId
+            });
+          }
 
-            let submitData = {
-              productionId: this.productionId,
-              productionPlanSteps: productionPlanSteps
-            }
-            plan(submitData).then(({data}) => {
-              if (data && data.code === '200') {
+          let submitData = {
+            productionId: this.productionId,
+            productionPlanNodes: productionPlanNodes
+          };
+          plan(submitData)
+            .then(({ data }) => {
+              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.$message.error(data.msg)
+                this.clickFlowSave = false;
+                this.$message.error(data.msg);
               }
             })
-          }
-        })
-      },
-      getLineData (dataAll, dList, lList, id, sortNo) {
-        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,
-              'workTypeId': data.meta.workTypeId || null,
-              'type': data.meta.type || null,
-              'coordinate': data.coordinate.join(','),
-              'operatorIds': data.meta.operatorIds
-            }])
-          })
+            .catch(() => {
+              this.clickFlowSave = false;
+            });
         }
-        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.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.prop === 'end' ? 0 : (v.meta.workTypeId || ''),
-                  'type': v.meta.type || '',
-                  'coordinate': v.coordinate.join(',')
-                })
-              }
-              this.getLineData(dataAll, dList, lList, v.id, (sortNo + 1))
-            }
-          }
-        })
-      }
+      });
+    },
+    //保存流程图
+    saveWorkFlow(workFlowData) {
+      this.clickFlowSave = true;
+      this.workFlowData = workFlowData;
     }
   }
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

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

@@ -1,10 +1,17 @@
 <template>
   <div class="production">
-    <el-dialog title="排产模板详情"
+    <el-dialog
+      title="排产模板详情"
       width="70%"
       :close-on-click-modal="false"
-      :visible.sync="visible">
-      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="auto">
+      :visible.sync="visible"
+    >
+      <el-form
+        :model="dataForm"
+        :rules="dataRule"
+        ref="dataForm"
+        label-width="auto"
+      >
         <el-row class="my-row">
           <el-col :span="8">
             <el-form-item label="产品" prop="productId">
@@ -13,33 +20,39 @@
                 :disabled="display"
                 @change="productChange"
                 remote
-                placeholder="请选择">
+                placeholder="请选择"
+              >
                 <el-option
                   v-for="item in productList"
                   :key="item.productId"
                   :label="item.productName"
-                  :value="item.productId">
+                  :value="item.productId"
+                >
                 </el-option>
               </el-select>
             </el-form-item>
           </el-col>
-           <el-col :span="12">
+          <el-col :span="12">
             <el-form-item label="模板名称" prop="mouldName">
-              <el-input placeholder="请输入模板名称" v-model="dataForm.mouldName" maxlength="30" show-word-limit></el-input>
+              <el-input
+                placeholder="请输入模板名称"
+                v-model="dataForm.mouldName"
+                maxlength="30"
+                show-word-limit
+              ></el-input>
             </el-form-item>
           </el-col>
         </el-row>
-        <el-row class="my-row" style="height: 350px; background-color: #efefef;">
-          <super-flow
-            v-if="visible"
-            ref="superFlow"
-            :node-list="nodeList"
-            :link-list="linkList"
-            :graph-menu="graphMenuList"
-            :node-menu="nodeMenuList"
-            :link-menu="linkMenuList"
-            :link-desc="linkDesc">
-          </super-flow>
+        <el-row
+          class="my-row"
+          style="height: 350px; background-color: #efefef;"
+        >
+          <work-flow
+            ref="workFlow"
+            :nodeData="workFlowData"
+            :selectOperator="true"
+            @saveWorkFlow="saveWorkFlow"
+          ></work-flow>
         </el-row>
       </el-form>
       <span slot="footer" class="dialog-footer">
@@ -47,585 +60,207 @@
         <el-button 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"
-                  disabled>
-              </el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row class="my-row" >
-          <el-col :span="24" v-if="drawerConf.prop !== 'end'">
-            <el-form-item
-              label="操作人员"
-              prop="operatorIds">
-              <el-select
-                v-model="nodeSetting.operatorIds"
-                multiple
-                style="width:100%"
-                placeholder="请选择">
-                <el-option
-                  v-for="item in operatorList"
-                  :key="item.userId"
-                  :label="item.name"
-                  :value="item.userId">
-                </el-option>
-              </el-select>
-            </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 { 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'
-  const drawerType = {
-    node: 0,
-    link: 1
-  }
-  export default {
-    name: 'scheduling-details',
-    data () {
-      return {
-        mouldId: '',
-        visible: false,
-        dataForm: {
-          mouldName: ''
-        },
-        drawerType,
-        operatorList: [],
-        operatorIds: [],
-        productList: [],
-        display: false,
-        drawerConf: {
-          title: '',
-          visible: false,
-          prop: '',
-          type: null,
-          info: null,
-          open: (type, info) => {
-            if (info.meta.workTypeId && info.meta.prop !== 'end') {
-              this.getOperatorList(info.meta.workTypeId)
-            }
-
-            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, 'prop', info.meta.prop)
-              this.$set(this.nodeSetting, 'type', info.meta.type)
-              this.$set(this.nodeSetting, 'workTypeId', info.meta.workTypeId)
-              this.$set(this.nodeSetting, 'operatorIds', info.meta.operatorIds)
-            } 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: [],
-        graphMenuList: [
-          [
-            {
-              label: '开始节点',
-              disable: true,
-              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: true,
-              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: true,
-              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: true,
-              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()
-              }
-            }
-          ]
-        ],
-        datas: {},
-        dataRule: {
-          mouldName: [{required: true, message: '请输入模板名称', trigger: 'blur'}]
-        },
-        dataRule1: {
-          operatorIds: [{ required: true, message: '操作人员不能为空', trigger: 'change' }]
-        }
-      }
-    },
-    methods: {
-      // 初始化产品名称列表
-      async initProductList () {
-        getProductList().then(({data}) => {
-          if (data && data.code === '200') {
-            data.data.forEach(item => {
-              this.productList.push(item)
-            })
-          }
-        })
-      },
-      // 初始化表单
-      async init (id, disable) {
-        this.visible = true
-        this.display = disable
-        this.nodeList = []
-        this.linkList = []
-        this.mouldId = id
-        if (!disable) {
-          await this.initProductList()
-        }
-
-        await getMouldDetail(id).then(async ({data}) => {
-          if (data && data.code === '200') {
-            this.dataForm = data.data
-
-            // 图纸
-            if (this.dataForm.proTechnologyStepList) {
-              const dataline = []
-              const datanode = []
-              await this.dataForm.proTechnologyStepList.forEach((v, i) => {
-                // eslint-disable-next-line no-unused-vars
-                const sortNo = []
-                const datas = v.sort((a, b) => Number(a['sortNo']) - Number(b['sortNo']))
-                let length = datas.length
-                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,
-                        desc: item.operatorName,
-                        prop: index === 0 ? 'start' : (index === length - 1) ? 'end' : 'condition',
-                        notes: item.notes || '',
-                        workTypeId: item.workTypeId || '',
-                        type: item.type || '',
-                        operatorIds: item.operatorId.split(',')
-                      }
-                    })
-                  }
-                  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
-                }, 200)
-              })
-            }
-          }
-        })
-      },
-      // 根据产品ID查询步骤详情
-      async productChange (productId) {
-        getMouldDetailByProductId(productId).then(async ({data}) => {
-          if (data && data.code === '200') {
-            this.dataForm = {...this.dataForm, proTechnologyStepLists: data.data}
-            // 图纸
-            if (this.dataForm.proTechnologyStepLists) {
-              const dataline = []
-              const datanode = []
-              await this.dataForm.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']))
-                let length = datas.length
-                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,
-                        prop: index === 0 ? 'start' : (index === length - 1) ? 'end' : 'condition',
-                        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
-                }, 200)
-              })
-            }
-          }
-        })
+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";
+export default {
+  name: "scheduling-details",
+  components: {
+    WorkFlow
+  },
+  data() {
+    return {
+      mouldId: "",
+      visible: false,
+      dataForm: {
+        mouldName: ""
       },
-      // 按工种ID查询操作人列表
-      getOperatorList (workTypeId) {
-        workTypeMasterList(workTypeId).then(({data}) => {
-          if (data && data.code === '200') {
-            this.operatorList = []
-            data.data.forEach(item => {
-              this.operatorList.push(item)
-            })
-          }
-        })
+      operatorList: [],
+      operatorIds: [],
+      productList: [],
+      display: false,
+      datas: {},
+      workFlowData: {
+        nodeList: [],
+        lineList: []
       },
-      linkDesc (link) {
-        return link.meta ? link.meta.desc : ''
+      //是否点击了流程图保存按钮
+      clickFlowSave: false,
+      dataRule: {
+        mouldName: [
+          { required: true, message: "请输入模板名称", trigger: "blur" }
+        ]
       },
-      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 => {
-                if (key === 'operatorIds') {
-                  let idList = this.nodeSetting[key]
-                  let nameList = []
-                  idList.forEach(id => {
-                    let name = this.operatorList.find(item => {
-                      return item.userId === id
-                    }).name
-                    nameList.push(name)
-                  })
+      dataRule1: {
+        operatorIds: [
+          { required: true, message: "操作人员不能为空", trigger: "change" }
+        ]
+      }
+    };
+  },
+  methods: {
+    // 初始化产品名称列表
+    async initProductList() {
+      getProductList().then(({ data }) => {
+        if (data && data.code === "200") {
+          data.data.forEach(item => {
+            this.productList.push(item);
+          });
+        }
+      });
+    },
+    // 初始化表单
+    async init(id, disable) {
+      this.visible = true;
+      this.display = disable;
+      this.mouldId = id;
+      if (!disable) {
+        await this.initProductList();
+      }
 
-                  this.$set(conf.info.meta, 'desc', nameList.join(','))
-                }
-                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
-          }
-        })
-      },
-      dataFormSubmit () {
-        if (!this.datas.nodeList) {
-          this.$message.error('请先完成流程图！')
-          return
+      await getMouldDetail(id).then(async ({ data }) => {
+        if (data && data.code === "200") {
+          this.dataForm = data.data;
+        }
+      });
+    },
+    // 根据产品ID查询步骤详情
+    async productChange(productId) {
+      getMouldDetailByProductId(productId).then(async ({ data }) => {
+        if (data && data.code === "200") {
+          this.dataForm = {
+            ...this.dataForm
+          };
+          // 流程图展示
+          this.workFlowData = {
+            nodeList: data.data.nodeList,
+            lineList: data.data.lineList
+          };
         }
-        if (this.datas.nodeList.length <= 2) {
-          this.$message.error('请先完成流程图！')
-          return
+      });
+    },
+    // 按工种ID查询操作人列表
+    getOperatorList(workTypeId) {
+      workTypeMasterList(workTypeId).then(({ data }) => {
+        if (data && data.code === "200") {
+          this.operatorList = [];
+          data.data.forEach(item => {
+            this.operatorList.push(item);
+          });
         }
+      });
+    },
+    dataFormSubmit() {
+      if (!this.clickFlowSave) {
+        this.$message.error("请先点击流程图保存按钮！");
+        return;
+      }
 
-        this.$refs['dataForm'].validate((valid) => {
-          if (valid) {
-            // eslint-disable-next-line no-unused-vars
-            const proTechnologyStepLists = []
+      if (
+        !this.workFlowData ||
+        this.workFlowData.nodeList.length == 0 ||
+        this.workFlowData.lineList.length == 0
+      ) {
+        this.$message.error("请先完成流程图！");
+        this.clickFlowSave = false;
+        return;
+      }
 
-            let productionPlanSteps = []
-            for (let index = 0; index < this.datas.nodeList.length; index++) {
-              const v = this.datas.nodeList[index]
-              let tmp = v.meta.operatorIds || []
-              if (v.meta.prop !== 'end' && tmp.length === 0) {
-                this.$message.error(`请选择 ${v.meta.name} 的操作人员！`)
-                return
-              }
-              productionPlanSteps.push({stepId: v.id, operatorId: tmp.join(',')})
+      this.$refs["dataForm"].validate(valid => {
+        if (valid) {
+          // eslint-disable-next-line no-unused-vars
+          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;
             }
+            productionPlanNodes.push({
+              techNodeId: node.id,
+              operatorId: node.operatorId
+            });
+          }
 
-            let submitData = {
-              mouldName: this.dataForm.mouldName,
-              productId: this.dataForm.productId,
-              stepList: productionPlanSteps
-            }
+          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 (this.mouldId === 0) {
+            // 新增
+            saveProdProductionMould(submitData)
+              .then(({ data }) => {
+                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.$message.error(data.msg)
+                  this.clickFlowSave = false;
+                  this.$message.error(data.msg);
                 }
               })
-            } else {
-              // 更新
-              submitData.mouldId = this.mouldId
-              updateProdProductionMould(submitData).then(({data}) => {
-                if (data && data.code === '200') {
+              .catch(() => {
+                this.clickFlowSave = false;
+              });
+          } else {
+            // 更新
+            submitData.mouldId = this.mouldId;
+            updateProdProductionMould(submitData)
+              .then(({ data }) => {
+                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.$message.error(data.msg)
+                  this.clickFlowSave = false;
+                  this.$message.error(data.msg);
                 }
               })
-            }
+              .catch(() => {
+                this.clickFlowSave = false;
+              });
           }
-        })
-      },
-      getLineData (dataAll, dList, lList, id, sortNo) {
-        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,
-              'workTypeId': data.meta.workTypeId || null,
-              'type': data.meta.type || null,
-              'coordinate': data.coordinate.join(','),
-              'operatorIds': data.meta.operatorIds
-            }])
-          })
         }
-        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.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.prop === 'end' ? 0 : (v.meta.workTypeId || ''),
-                  'type': v.meta.type || '',
-                  'coordinate': v.coordinate.join(',')
-                })
-              }
-              this.getLineData(dataAll, dList, lList, v.id, (sortNo + 1))
-            }
-          }
-        })
-      }
+      });
+    },
+    //保存流程图
+    saveWorkFlow(workFlowData) {
+      this.clickFlowSave = true;
+      this.workFlowData = workFlowData;
     }
   }
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

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

@@ -168,14 +168,12 @@ export default {
       };
     },
     async init(id, display) {
-      // this.nodeList = []
-      // this.linkList = []
-      // this.dataForm = {
-      //   techName: '',
-      //   techVersion: '',
-      //   productId: '',
-      //   notes: ''
-      // }
+      this.dataForm = {
+        techName: '',
+        techVersion: '',
+        productId: '',
+        notes: ''
+      }
       this.visible = true;
       this.display = display;
       await getProduct({ current: 1, size: 20000 }).then(({ data }) => {
@@ -187,20 +185,6 @@ export default {
       await getInfo(id).then(async ({ data }) => {
         if (data && data.code === "200") {
           this.dataForm = data.data;
-          // 图纸
-          if (data.data.proTechnologyStepLists) {
-            const dataline = [];
-            const datanode = [];
-            await data.data.proTechnologyStepLists.forEach((v, i) => {
-              // eslint-disable-next-line no-unused-vars
-            });
-            this.$nextTick(() => {
-              setTimeout(() => {
-                // this.nodeList = datanode
-                // this.linkList = dataline
-              }, 200);
-            });
-          }
         }
       });
     },
@@ -234,17 +218,6 @@ export default {
         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) {
           // 填充附件
@@ -288,10 +261,9 @@ export default {
     uploadSuccess(fileList) {
       this.fileList = fileList;
     },
-    //新流程图
+    //保存流程图
     saveWorkFlow(workFlowData) {
       this.workFlowData = workFlowData;
-      console.log(workFlowData);
     }
   }
 };