工艺查看

src/components/work-flow-v2/home.vue → src/components/work-flow-bak/home.vue

@@ -1,42 +1,48 @@
 <template>
   <div class="flow_region">
     <div class="flow_left">
-      <el-scrollbar style="height: 100%">
-        <div class="nodes-wrap">
-          <div class="left-tab-container">
-            <div class="primary-tabs">
-              <div
-                v-for="(tab, index) in nodeTypeList"
-                @click="activePrimary = index; activeSecondary = 0"
-                :class="{ 'active': activePrimary === index }"
-                :key="tab.name"
-              >
-                {{tab.name}}
-              </div>
-            </div>
+      <div class="help">
+        <el-tooltip placement="bottom-start">
+          <div slot="content">
+            <ul>
+              <li>
+                <span>新增节点：</span
+                ><span>从左侧拖动相应节点放到右侧画布中</span>
+              </li>
+              <li><span>编辑节点：</span><span>双击节点弹出编辑界面</span></li>
+              <li>
+                <span>删除节点：</span><span>鼠标右键节点弹出删除菜单</span>
+              </li>
+              <li>
+                <span>删除连线：</span
+                ><span
+                  >鼠标移动到连线处，当连线变成红色时鼠标左键双击弹出删除界面</span
+                >
+              </li>
+            </ul>
           </div>
-        </div>
-      </el-scrollbar>
-    </div>
-    <div class="flow_left">
+          <el-button style="font-size: 10px; padding: 5px">操作指南</el-button>
+        </el-tooltip>
+      </div>
       <el-scrollbar style="height: 100%">
         <div class="nodes-wrap">
-          <div class="left-tab-container">
-            <div class="secondary-tabs" v-if="nodeTypeList!= null && nodeTypeList.length > 0">
-              <div
-                v-for="(subTab, subIndex) in nodeTypeList[activePrimary].children"
-                @click="activeSecondary = subIndex"
-                :class="{ 'active': activeSecondary === subIndex }"
-                :key="subTab.typeId"
-                :draggable="true"
-                @dragstart="drag($event, {nodeName: subTab.name, workTypeId: subTab.typeId, type: subTab.type})"
-              >
-                {{subTab.name}}
-              </div>
+          <div
+            v-for="item in nodeTypeList"
+            :key="item.type"
+            :class="nodeDisabled(item) ? 'node node-disabled' : 'node'"
+            :draggable="!nodeDisabled(item)"
+            @dragstart="drag($event, item)"
+          >
+            <div class="log">
+              <img :src="item.logImg" alt="" />
             </div>
+            <div class="name">{{ item.typeName }}</div>
           </div>
         </div>
       </el-scrollbar>
+      <!-- <div class="flow_operation">
+        <el-button type="primary" @click="saveFlow" :disabled="disabled">保存</el-button>
+      </div> -->
     </div>
     <div
       id="flowWrap"
@@ -84,7 +90,7 @@
 <script>
 import cloneDeep from 'lodash/cloneDeep'
 import { jsPlumb } from 'jsplumb'
-// import { nodeTypeList } from './config/init'
+import { nodeTypeList } from './config/init'
 import {
   jsplumbSetting,
   jsplumbConnectOptions,
@@ -92,6 +98,7 @@ import {
   jsplumbTargetOptions
 } from './config/commonConfig'
 import methods from './config/methods'
+// import data from "./config/data.json";
 import flowNode from './node-item'
 export default {
   name: 'FlowEdit',
@@ -120,18 +127,13 @@ export default {
     isEdit: {
       type: Boolean,
       default: false
-    },
-    // 节点类型
-    nodeTypeList: {
-      type: Array,
-      default: () => []
     }
   },
   data () {
     return {
       jsPlumb: null,
       currentItem: null,
-      // nodeTypeList: nodeTypeList,
+      nodeTypeList: nodeTypeList,
       nodeTypeObj: {},
       data: {
         nodeList: [],
@@ -160,14 +162,11 @@ export default {
         top: 0,
         height: 0,
         width: 0
-      },
-      activePrimary: 0,       // 当前激活的一级标签索引
-      activeSecondary: 0      // 当前激活的二级标签索引
+      }
     }
   },
   watch: {
     nodeData (val) {
-      console.log('nodeData watch', val)
       this.initNode()
       this.fixNodesPosition()
       this.$nextTick(() => {
@@ -179,10 +178,7 @@ export default {
     },
     disabled (val) {
     },
-    isEdit (val) {},
-    nodeTypeList (val) {
-      console.log('watch', val)
-    }
+    isEdit (val) {}
   },
   mounted () {
     // console.log('mounted')
@@ -205,7 +201,7 @@ export default {
       }
     },
     initNodeTypeObj () {
-      this.nodeTypeList.map(v => {
+      nodeTypeList.map(v => {
         this.nodeTypeObj[v.type] = v
       })
     },
@@ -217,8 +213,8 @@ export default {
       this.data.lineList.push(...tempData.lineList)
       this.data.nodeList = []
       tempData.nodeList.map(v => {
-        // v.logImg = this.nodeTypeObj[v.type].logImg
-        // v.log_bg_color = this.nodeTypeObj[v.type].log_bg_color
+        v.logImg = this.nodeTypeObj[v.type].logImg
+        v.log_bg_color = this.nodeTypeObj[v.type].log_bg_color
         this.data.nodeList.push(v)
       })
 
@@ -289,7 +285,7 @@ export default {
   }
 
   .nodes-wrap {
-    width: 100px;
+    width: 150px;
     height: 90%;
     // border-right: 1px solid #ccc;
     .node {
@@ -387,49 +383,4 @@ export default {
     stroke-dashoffset: 0;
   }
 }
-
-/* 全局或组件内样式 */
-.el-scrollbar__wrap {
-  overflow-x: hidden !important; /* 隐藏横向滚动条 */
-}
-
-.left-tab-container{
-  display: flex;
-}
-
-/* 左侧列：固定宽度，垂直排列 */
-.primary-tabs {
-  width: 100%;
-  display: flex;
-  flex-direction: column; /* 垂直布局 */
-  border-right: 1px solid #ddd;
-}
-.primary-tabs > div {
-  padding: 12px;
-  // cursor: pointer;
-  margin: 2px 2px;
-  border-radius: 3px;
-}
-.primary-tabs > div.active {
-  color: #ffffff;
-  background: #f78989 !important;
-}
-
-/* 二级标签：水平排列 */
-.secondary-tabs {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-}
-.secondary-tabs > div {
-  padding: 12px;
-  cursor: pointer;
-  margin: 2px 2px;
-  background: #85ce61;
-  border-radius: 3px;
-}
-.secondary-tabs > div.active {
-  color: #ffffff;
-  background: #66b1ff !important;
-}
 </style>

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

@@ -0,0 +1,664 @@
+<template>
+  <div>
+    <el-form
+      :model="form"
+      ref="form"
+      :rules="rules"
+      label-width="100px"
+      v-if="node.type !== 't-check'"
+    >
+      <el-form-item label="节点名称" prop="nodeName">
+        <el-input
+          v-model="form.nodeName"
+          placeholder="请输入节点名称"
+          :disabled="disabled || selectOperator || isEdit"
+        ></el-input>
+      </el-form-item>
+      <el-form-item
+        label="工种类型"
+        prop="workTypeId"
+        v-if="node.type !== 'end'"
+      >
+        <el-select
+          v-model="form.workTypeId"
+          placeholder="请选择"
+          style="width: 100%"
+          :disabled="disabled || selectOperator || isEdit"
+          @change="onChage"
+        >
+          <el-option
+            v-for="item in workTypeOptions"
+            :key="item.typeId"
+            :label="item.name"
+            :value="item.typeId"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="工时单价">
+        <el-input
+          v-model="form.quotedPrice"
+          placeholder="工时单价"
+          :disabled="disabled || !isEdit"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="备注" prop="notes">
+        <el-input
+          v-model="form.notes"
+          :disabled="disabled || selectOperator || !isEdit"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="工序要求" prop="require" v-if="node.type !== 'end'">
+        <el-input
+          v-model="form.require"
+          :disabled="disabled || selectOperator || !isEdit"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="工序说明" prop="explain" v-if="node.type !== 'end'">
+        <el-input
+          v-model="form.explain"
+          :disabled="disabled || selectOperator || !isEdit"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="工序特性" prop="process" v-if="node.type !== 'end'">
+        <el-input
+          v-model="form.process"
+          :disabled="disabled || selectOperator || !isEdit"
+        ></el-input>
+      </el-form-item>
+      <el-form-item
+        label="所需工时"
+        prop="preTaskTime"
+        v-if="node.type !== 'end'"
+      >
+        <el-input
+          v-model="form.preTaskTime"
+          :disabled="disabled || selectOperator || !isEdit"
+          oninput="value=value.replace(/[^0-9.]/g,'')"
+        >
+          <i slot="suffix" style="font-style: normal; margin-right: 10px">h</i>
+        </el-input>
+      </el-form-item>
+      <el-form-item
+        label="计划完成时间"
+        prop="planCompletionTime"
+        v-if="node.type !== 'end'"
+      >
+        <el-date-picker
+            v-model="form.planCompletionTime"
+            value-format="yyyy-MM-dd"
+            type="date"
+            :disabled="disabled || !isEdit"
+            style="width:100%"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="操作人" v-if="form.operatorName && !selectOperator">
+        <el-input
+          :disabled="disabled && selectOperator || !isEdit"
+          v-model="form.operatorName"
+        ></el-input>
+      </el-form-item>
+      <el-form-item
+        label="操作人"
+        prop="operatorId"
+        v-if="selectOperator && node.type !== 'end'"
+      >
+        <el-select
+          v-model="form.operatorId"
+          :disabled="disabled && selectOperator || !isEdit"
+          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-item v-if="node.type !== 'end' && !disabled && !selectOperator && isEdit">
+        <upload-component
+          :title="'附件'"
+          :accept="'*'"
+          :file-obj-list="fileList"
+          @uploadSuccess="uploadSuccess"
+        />
+      </el-form-item>
+      <el-form-item v-else>
+        <upload-component
+          :display="true"
+          :title="'附件'"
+          :accept="'*'"
+          :file-obj-list="fileList"
+          @uploadSuccess="uploadSuccess"
+        />
+      </el-form-item>
+    </el-form>
+
+    <!-- 节点是总检时显示下面内容 -->
+    <el-form
+      :model="form"
+      ref="form"
+      :rules="rules"
+      label-width="100px"
+      v-if="node.type == 't-check'"
+    >
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="节点名称" prop="nodeName">
+            <el-input
+              v-model="form.nodeName"
+              placeholder="请输入节点名称"
+              :disabled="disabled || selectOperator || isEdit"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item
+            label="工种类型"
+            prop="workTypeId"
+            v-if="node.type !== 'end'"
+          >
+            <el-select
+              v-model="form.workTypeId"
+              placeholder="请选择"
+              style="width: 100%"
+              :disabled="disabled || selectOperator || isEdit"
+              @change="onChage"
+            >
+              <el-option
+                v-for="item in workTypeOptions"
+                :key="item.typeId"
+                :label="item.name"
+                :value="item.typeId"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="工时单价">
+            <el-input
+              v-model="form.quotedPrice"
+              placeholder="工时单价"
+              disabled
+            ></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item
+            label="工序要求"
+            prop="require"
+            v-if="node.type !== 'end'"
+          >
+            <el-input
+              v-model="form.require"
+              :disabled="disabled || selectOperator || !isEdit"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item
+            label="工序说明"
+            prop="explain"
+            v-if="node.type !== 'end'"
+          >
+            <el-input
+              v-model="form.explain"
+              :disabled="disabled || selectOperator || isEdit"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item
+            label="所需工时"
+            prop="preTaskTime"
+            v-if="node.type !== 'end'"
+          >
+            <el-input
+              v-model="form.preTaskTime"
+              :disabled="disabled || selectOperator || !isEdit"
+              oninput="value=value.replace(/[^0-9.]/g,'')"
+            >
+              <i slot="suffix" style="font-style: normal; margin-right: 10px"
+                >h</i
+              >
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item
+            label="计划完成时间"
+            prop="planCompletionTime"
+            v-if="node.type !== 'end'"
+          >
+            <el-date-picker
+                v-model="form.planCompletionTime"
+                value-format="yyyy-MM-dd"
+                type="date"
+                :disabled="disabled || !isEdit"
+                style="width:100%"
+            >
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item
+            label="操作人"
+            v-if="disabled"
+          >
+            <el-input
+              :disabled="disabled || !isEdit"
+              v-model="form.operatorName"
+            ></el-input>
+          </el-form-item>
+          <el-form-item
+            label="操作人"
+            prop="operatorId"
+            v-if="!disabled && selectOperator && node.type !== 'end'"
+          >
+            <el-select
+              v-model="form.operatorId"
+              :disabled="disabled && selectOperator || !isEdit"
+              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-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="备注" prop="notes">
+            <el-input
+              type="textarea"
+              v-model="form.notes"
+              :disabled="disabled || selectOperator || !isEdit"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <div>检验项目</div>
+        </el-col>
+      </el-row>
+      <!-- <el-row>
+        <el-col :span="24">
+          <el-form-item label="检验方法">
+            <div>
+              1.游标卡尺，2.千分尺，3.高度尺，4.百分表，5.R规，6.环规、塞规，7.游标角度尺，8.三坐标，9.模具，10.样板，11.夹具，12.目测，13.组合测量，14.精密测量，15.敲击，16.测厚仪，17.其他
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row> -->
+      <el-row>
+        <el-table :data="form.prodProductionRequireList" style="width: 100%">
+          <el-table-column prop="pageNo" label="页次/图区">
+            <template slot-scope="scope">
+              <el-form-item
+                :prop="'prodProductionRequireList.' + scope.$index + '.pageNo'"
+                :rules="rules.pageNo"
+                label-width="0px"
+              >
+                <el-input
+                  v-model="scope.row.pageNo"
+                  :disabled="disabled || selectOperator || isEdit"
+                ></el-input>
+              </el-form-item>
+            </template>
+          </el-table-column>
+          <el-table-column prop="inspectionParam" label="检查参数">
+            <template slot-scope="scope">
+              <el-form-item
+                :prop="
+                  'prodProductionRequireList.' +
+                  scope.$index +
+                  '.inspectionParam'
+                "
+                :rules="rules.inspectionParam"
+                label-width="0px"
+              >
+                <el-input
+                  v-model="scope.row.inspectionParam"
+                  :disabled="disabled || selectOperator || isEdit"
+                ></el-input>
+              </el-form-item>
+            </template>
+          </el-table-column>
+          <el-table-column prop="inspectionMethod" label="检验方法">
+            <template slot-scope="scope">
+              <el-form-item
+                :prop="
+                  'prodProductionRequireList.' +
+                  scope.$index +
+                  '.inspectionMethod'
+                "
+                :rules="rules.inspectionMethod"
+                label-width="0px"
+              >
+                <el-select
+                  v-model="scope.row.inspectionMethod"
+                  placeholder="请选择"
+                  style="width: 100%"
+                  :disabled="disabled || selectOperator || isEdit"
+                >
+                  <el-option
+                    v-for="item in inspectionMethodOptions"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value"
+                  ></el-option>
+                </el-select>
+              </el-form-item>
+            </template>
+          </el-table-column>
+          <el-table-column prop="allowValues" label="允许值">
+            <template slot-scope="scope">
+              <el-form-item
+                :prop="
+                  'prodProductionRequireList.' + scope.$index + '.allowValues'
+                "
+                :rules="rules.allowValues"
+                label-width="0px"
+              >
+                <el-input
+                  v-model="scope.row.allowValues"
+                  :disabled="disabled || selectOperator || isEdit"
+                ></el-input>
+              </el-form-item>
+            </template>
+          </el-table-column>
+          <el-table-column prop="measureRecord1" label="实测记录1">
+            <template slot-scope="scope">
+              <div style="margin-bottom:22px;">{{scope.row.measureRecord1}}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="measureRecord2" label="实测纪录2">
+            <template slot-scope="scope">
+              <div style="margin-bottom:22px;">{{scope.row.measureRecord2}}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="140px" v-if="!disabled && !isEdit">
+            <template slot-scope="scope">
+              <el-button
+                type="primary"
+                icon="el-icon-circle-plus"
+                circle
+                @click="addRow"
+              ></el-button>
+              <el-button
+                type="danger"
+                icon="el-icon-delete"
+                circle
+                @click="removeRow(scope.$index)"
+                v-if="scope.$index > 0"
+              ></el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-row>
+      <el-form-item v-if="!disabled && !selectOperator && isEdit" label-width="0px">
+        <upload-component
+          :title="'附件'"
+          :accept="'*'"
+          :file-obj-list="fileList"
+          @uploadSuccess="uploadSuccess"
+      />
+      </el-form-item>
+      <el-form-item v-else label-width="0px">
+        <upload-component
+          :display="true"
+          :title="'附件'"
+          :accept="'*'"
+          :file-obj-list="fileList"
+          @uploadSuccess="uploadSuccess"
+        />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { getWorkType } from '@/api/crafts'
+import { workTypeMasterList } from '@/api/worktype'
+import UploadComponent from '@/views/modules/common/upload-component'
+export default {
+  name: 'nodeEdit',
+  components: { UploadComponent },
+  props: {
+    data: {
+      type: Object,
+      default: () => {}
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 是否选择操作人，当选择操作人时，其他字段不可编辑
+    selectOperator: {
+      type: Boolean,
+      default: false
+    },
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      // 工种列表
+      workTypeOptions: [],
+      // 操作人列表
+      operatorIdOptions: [],
+      node: {},
+      form: {
+        nodeName: '',
+        workTypeId: '',
+        operatorId: [],
+        prodProductionRequireList: [{}],
+        planCompletionTime: ''
+      },
+      fileList: [],
+      inspectionMethodOptions: [
+        { value: '1', name: '游标卡尺' },
+        { value: '2', name: '千分尺' },
+        { value: '3', name: '高度尺' },
+        { value: '4', name: '百分表' },
+        { value: '5', name: 'R规' },
+        { value: '6', name: '环规、塞规' },
+        { value: '7', name: '游标角度尺' },
+        { value: '8', name: '三坐标' },
+        { value: '9', name: '模具' },
+        { value: '10', name: '样板' },
+        { value: '11', name: '夹具' },
+        { value: '12', name: '目测' },
+        { value: '13', name: '组合测量' },
+        { value: '14', name: '精密测量' },
+        { value: '15', name: '敲击' },
+        { value: '16', name: '测厚仪' },
+        { value: '17', name: '其他' }
+      ],
+      rules: {
+        nodeName: [
+          { required: true, message: '请输入节点名称', trigger: 'blur' }
+        ],
+        workTypeId: [
+          { required: true, message: '请选择工种', trigger: 'blur' }
+        ],
+        operatorId: [
+          { required: true, message: '请选择操作人', trigger: 'blur' }
+        ],
+        preTaskTime: [
+          { required: true, message: '请输入所需工时', trigger: 'blur' }
+        ],
+        pageNo: [{ required: true, message: '请输入', trigger: 'blur' }],
+        inspectionParam: [
+          { required: true, message: '请输入', trigger: 'blur' }
+        ],
+        inspectionMethod: [
+          { required: true, message: '请选择', trigger: 'blur' }
+        ],
+        allowValues: [{ required: true, message: '请输入', trigger: 'blur' }]
+      }
+    }
+  },
+  watch: {
+    data (val) {
+      this.node = val
+      this.form = {
+        ...this.form,
+        ...this.node
+      }
+      if (this.node.operatorId) {
+        this.form.operatorId = this.node.operatorId.split(',')
+      }
+
+      // 附件
+      if (this.node.attachList) {
+        this.$nextTick(() => {
+          this.fileList = []
+          this.node.attachList.forEach((item) => {
+            this.fileList.push({
+              name: item.fileName,
+              url: item.url,
+              id: item.url
+            })
+          })
+        })
+      }
+    },
+    disabled (val) {
+      this.disabled = val
+    },
+    isEdit (val) {
+      this.isEdit = val
+    }
+  },
+  activated () {},
+  created () {
+    this.getWorkTypeOptions()
+  },
+  computed: {},
+  mounted () {
+    this.node = this.data
+    this.form = {
+      ...this.form,
+      ...this.node
+    }
+    if (this.node.operatorId) {
+      this.form.operatorId = this.node.operatorId.split(',')
+    }
+
+    // 附件
+    if (this.node.attachList) {
+      this.fileList = []
+      this.node.attachList.forEach((item) => {
+        this.fileList.push({
+          name: item.fileName,
+          url: item.url,
+          id: item.url
+        })
+      })
+    }
+    this.getOperatorList()
+  },
+  methods: {
+    getWorkTypeOptions () {
+      this.workTypeOptions = []
+      getWorkType().then(({ data }) => {
+        if (data && data.code === '200') {
+          this.workTypeOptions = data.data
+        }
+      })
+    },
+    onChage (val) {
+      this.workTypeOptions.forEach((v) => {
+        if (v.typeId === val) {
+          this.form.quotedPrice = Number(v.quotedPrice || 0).toFixed(2)
+        }
+      })
+    },
+    // 按工种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)
+            })
+
+            this.onChage(this.node.workTypeId)
+          }
+        })
+      }
+    },
+    uploadSuccess (fileList) {
+      console.log('uploadSuccess')
+      this.fileList = fileList
+    },
+    // 校验表单
+    validateFormData () {
+      return new Promise((resolve, reject) => {
+        this.$refs['form'].validate((valid) => {
+          if (!valid) {
+            // eslint-disable-next-line prefer-promise-reject-errors
+            reject()
+            return
+          }
+          resolve()
+        })
+      })
+    },
+    // 获取表单数据
+    formData () {
+      const form = { ...this.form, operatorName: '' }
+      form.attachList = []
+      if (this.form.operatorId != null) {
+        form.operatorId = this.form.operatorId.toString()
+        this.form.operatorId.forEach((id) => {
+          let op = this.operatorIdOptions.find((t) => t.userId === id)
+          if (op.name != null) {
+            form.operatorName += op.name + ' '
+          }
+        })
+      }
+
+      // 填充附件
+      let fList = this.fileList
+      if (fList.length > 0) {
+        form.attachList = []
+        for (let i = 0; i < fList.length; i++) {
+          form.attachList.push({
+            fileName: fList[i].name,
+            url: fList[i].url
+          })
+        }
+      }
+
+      return form
+    },
+
+    addRow () {
+      this.form.prodProductionRequireList.push({})
+    },
+    removeRow (index) {
+      this.form.prodProductionRequireList.splice(index, 1)
+    }
+  }
+}
+</script>
+<style scoped></style>

src/components/work-flow-v2/node-item.vue → src/components/work-flow-bak/node-item.vue

@@ -16,18 +16,18 @@
     @contextmenu.prevent="onContextmenu"
   >
     <el-row>
-      <!-- <el-col :span="8">
+      <el-col :span="8">
         <div class="log-wrap">
           <img :src="node.logImg" alt="" />
         </div>
-      </el-col> -->
-      <el-col :span="24">
+      </el-col>
+      <el-col :span="16">
         <div class="nodeName">{{ node.nodeName }}</div>
       </el-col>
     </el-row>
-    <!-- <el-row>
+    <el-row>
       <div class="node-operator">{{ node.operatorName }}</div>
-    </el-row> -->
+    </el-row>
     <!--连线用--//触发连线的区域-->
     <div class="node-anchor anchor-top" v-show="mouseEnter"></div>
     <div class="node-anchor anchor-right" v-show="mouseEnter"></div>
@@ -40,7 +40,7 @@
       :append-to-body="true"
       width="60%"
     >
-    <div style="height:400px;overflow:auto">
+    <div v-if="isEdit">
       <nodeEdit
         ref="nodeEdit"
         :data="dialog.data"
@@ -49,12 +49,21 @@
         :selectOperator="selectOperator"
       ></nodeEdit>
     </div>
-    <div slot="footer">
-      <el-button @click="dialog.visible = false">取 消</el-button>
-      <el-button v-if="!disabled" type="primary" @click="dialogSubmit"
-        >确 定</el-button
-      >
+    <div v-else>
+      <nodeAdd
+        ref="nodeEdit"
+        :data="dialog.data"
+        :disabled="disabled"
+        :isEdit="isEdit"
+        :selectOperator="selectOperator"
+      ></nodeAdd>
     </div>
+      <div slot="footer">
+        <el-button @click="dialog.visible = false">取 消</el-button>
+        <el-button v-if="!disabled" type="primary" @click="dialogSubmit"
+          >确 定</el-button
+        >
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -62,12 +71,12 @@
 <script>
 import ClickOutside from 'vue-click-outside'
 import nodeEdit from './node-edit'
-// import nodeAdd from './node-add'
+import nodeAdd from './node-add'
 export default {
   name: 'node-item',
   components: {
-    nodeEdit
-    // nodeAdd
+    nodeEdit,
+    nodeAdd
   },
   props: {
     node: {
@@ -183,7 +192,7 @@ export default {
           this.$emit('setNode', this.node.id, formData)
           this.dialog.visible = false
         })
-        .catch((e) => { console.log(e) })
+        .catch(() => {})
     }
   }
 }
@@ -220,10 +229,10 @@ export default {
   }
   .nodeName {
     flex-grow: 1;
-    // width: 80px;
+    width: 80px;
     overflow: hidden;
     text-overflow: ellipsis;
-    // white-space: nowrap;
+    white-space: nowrap;
     height: 40px;
     align-items: center;
     justify-content: center;
@@ -282,4 +291,3 @@ export default {
   color: #ffffff;
 }
 </style>
-

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

@@ -1,252 +0,0 @@
-<template>
-  <div style="margin:10px 10px">
-    <el-form>
-      <el-form-item label="节点类型" label-width="100px">
-        <el-select v-model="node.type" placeholder="请选择">
-          <el-option
-            v-for="item in nodeTypeList"
-            :key="item.type"
-            :label="item.typeName"
-            :value="item.type">
-          </el-option>
-        </el-select>
-      </el-form-item>
-    </el-form>
-    <node-edit-normal ref="form" v-if="node.type == 'start' || node.type == 'produce'" :data="node"/>
-    <node-edit-check ref="form" v-if="node.type == 'check'" :data="node"/>
-    <node-edit-final-check ref="form" v-if="node.type == 't-check'" :data="node"/>
-    <node-edit-end ref="form" v-if="node.type == 'end'" :data="node"/>
-  </div>
-</template>
-
-<script>
-import { getWorkType } from '@/api/crafts'
-import { workTypeMasterList } from '@/api/worktype'
-import UploadComponent from '@/views/modules/common/upload-component'
-import NodeEditNormal from '@/components/work-flow-v2/node-edit-normal.vue'
-import NodeEditCheck from '@/components/work-flow-v2/node-edit-check.vue'
-import NodeEditFinalCheck from '@/components/work-flow-v2/node-edit-final-check.vue'
-import NodeEditEnd from '@/components/work-flow-v2/node-edit-end.vue'
-import { nodeTypeList } from '@/components/work-flow-v2/config/init'
-export default {
-  name: 'nodeEdit',
-  components: { UploadComponent, NodeEditNormal, NodeEditCheck, NodeEditFinalCheck, NodeEditEnd },
-  props: {
-    data: {
-      type: Object,
-      default: () => {}
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    // 是否选择操作人，当选择操作人时，其他字段不可编辑
-    selectOperator: {
-      type: Boolean,
-      default: false
-    },
-    isEdit: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data () {
-    return {
-      // 工种列表
-      workTypeOptions: [],
-      // 操作人列表
-      operatorIdOptions: [],
-      node: {},
-      form: {
-        nodeName: '',
-        workTypeId: '',
-        operatorId: [],
-        prodProductionRequireList: [{}],
-        planCompletionTime: ''
-      },
-      fileList: [],
-      nodeTypeList: nodeTypeList,
-      inspectionMethodOptions: [
-        { value: '1', name: '游标卡尺' },
-        { value: '2', name: '千分尺' },
-        { value: '3', name: '高度尺' },
-        { value: '4', name: '百分表' },
-        { value: '5', name: 'R规' },
-        { value: '6', name: '环规、塞规' },
-        { value: '7', name: '游标角度尺' },
-        { value: '8', name: '三坐标' },
-        { value: '9', name: '模具' },
-        { value: '10', name: '样板' },
-        { value: '11', name: '夹具' },
-        { value: '12', name: '目测' },
-        { value: '13', name: '组合测量' },
-        { value: '14', name: '精密测量' },
-        { value: '15', name: '敲击' },
-        { value: '16', name: '测厚仪' },
-        { value: '17', name: '其他' }
-      ],
-      rules: {
-        nodeName: [
-          { required: true, message: '请输入节点名称', trigger: 'blur' }
-        ],
-        workTypeId: [
-          { required: true, message: '请选择工种', trigger: 'blur' }
-        ],
-        operatorId: [
-          { required: true, message: '请选择操作人', trigger: 'blur' }
-        ],
-        preTaskTime: [
-          { required: true, message: '请输入所需工时', trigger: 'blur' }
-        ],
-        pageNo: [{ required: true, message: '请输入', trigger: 'blur' }],
-        inspectionParam: [
-          { required: true, message: '请输入', trigger: 'blur' }
-        ],
-        inspectionMethod: [
-          { required: true, message: '请选择', trigger: 'blur' }
-        ],
-        allowValues: [{ required: true, message: '请输入', trigger: 'blur' }]
-      }
-    }
-  },
-  watch: {
-    data (val) {
-      this.node = val
-      this.form = {
-        ...this.form,
-        ...this.node
-      }
-      if (this.node.operatorId) {
-        this.form.operatorId = this.node.operatorId.split(',')
-      }
-
-      // 附件
-      if (this.node.attachList) {
-        this.$nextTick(() => {
-          this.fileList = []
-          this.node.attachList.forEach((item) => {
-            this.fileList.push({
-              name: item.fileName,
-              url: item.url,
-              id: item.url
-            })
-          })
-        })
-      }
-    },
-    disabled (val) {
-      this.disabled = val
-    },
-    isEdit (val) {
-      this.isEdit = val
-    }
-  },
-  activated () {},
-  created () {
-    this.getWorkTypeOptions()
-  },
-  computed: {},
-  mounted () {
-    this.node = this.data
-    this.form = {
-      ...this.form,
-      ...this.node
-    }
-    if (this.node.operatorId) {
-      this.form.operatorId = this.node.operatorId.split(',')
-    }
-
-    // 附件
-    if (this.node.attachList) {
-      this.fileList = []
-      this.node.attachList.forEach((item) => {
-        this.fileList.push({
-          name: item.fileName,
-          url: item.url,
-          id: item.url
-        })
-      })
-    }
-    this.getOperatorList()
-  },
-  methods: {
-    getWorkTypeOptions () {
-      this.workTypeOptions = []
-      getWorkType().then(({ data }) => {
-        if (data && data.code === '200') {
-          this.workTypeOptions = data.data
-        }
-      })
-    },
-    onChage (val) {
-      this.workTypeOptions.forEach((v) => {
-        if (v.typeId === val) {
-          this.form.quotedPrice = Number(v.quotedPrice || 0).toFixed(2)
-        }
-      })
-    },
-    // 按工种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)
-            })
-
-            this.onChage(this.node.workTypeId)
-          }
-        })
-      }
-    },
-    uploadSuccess (fileList) {
-      console.log('uploadSuccess')
-      this.fileList = fileList
-    },
-    // 校验表单
-    validateFormData () {
-      return this.$refs['form'].validateFormData()
-    },
-    // 获取表单数据
-    formData () {
-      let formData = this.$refs['form'].formData()
-      console.log('formData', formData)
-      return formData
-      // const form = { ...this.form, operatorName: '' }
-      // form.attachList = []
-      // if (this.form.operatorId != null) {
-      //   form.operatorId = this.form.operatorId.toString()
-      //   this.form.operatorId.forEach((id) => {
-      //     let op = this.operatorIdOptions.find((t) => t.userId === id)
-      //     if (op.name != null) {
-      //       form.operatorName += op.name + ' '
-      //     }
-      //   })
-      // }
-
-      // // 填充附件
-      // let fList = this.fileList
-      // if (fList.length > 0) {
-      //   form.attachList = []
-      //   for (let i = 0; i < fList.length; i++) {
-      //     form.attachList.push({
-      //       fileName: fList[i].name,
-      //       url: fList[i].url
-      //     })
-      //   }
-      // }
-
-      // return form
-    },
-
-    addRow () {
-      this.form.prodProductionRequireList.push({})
-    },
-    removeRow (index) {
-      this.form.prodProductionRequireList.splice(index, 1)
-    }
-  }
-}
-</script>
-<style scoped></style>

src/components/work-flow/home.vue

@@ -1,48 +1,44 @@
 <template>
   <div class="flow_region">
-    <div class="flow_left">
-      <div class="help">
-        <el-tooltip placement="bottom-start">
-          <div slot="content">
-            <ul>
-              <li>
-                <span>新增节点：</span
-                ><span>从左侧拖动相应节点放到右侧画布中</span>
-              </li>
-              <li><span>编辑节点：</span><span>双击节点弹出编辑界面</span></li>
-              <li>
-                <span>删除节点：</span><span>鼠标右键节点弹出删除菜单</span>
-              </li>
-              <li>
-                <span>删除连线：</span
-                ><span
-                  >鼠标移动到连线处，当连线变成红色时鼠标左键双击弹出删除界面</span
+    <div class="flow_left" v-if="!disabled">
+      <div class="flow_left_item">
+        <el-scrollbar style="height: 100%">
+          <div class="nodes-wrap">
+            <div class="left-tab-container">
+              <div class="primary-tabs">
+                <div
+                  v-for="(tab, index) in nodeTypeList"
+                  @click="activePrimary = index; activeSecondary = 0"
+                  :class="{ 'active': activePrimary === index }"
+                  :key="tab.name"
                 >
-              </li>
-            </ul>
+                  {{tab.name}}
+                </div>
+              </div>
+            </div>
           </div>
-          <el-button style="font-size: 10px; padding: 5px">操作指南</el-button>
-        </el-tooltip>
+        </el-scrollbar>
       </div>
-      <el-scrollbar style="height: 100%">
-        <div class="nodes-wrap">
-          <div
-            v-for="item in nodeTypeList"
-            :key="item.type"
-            :class="nodeDisabled(item) ? 'node node-disabled' : 'node'"
-            :draggable="!nodeDisabled(item)"
-            @dragstart="drag($event, item)"
-          >
-            <div class="log">
-              <img :src="item.logImg" alt="" />
+      <div class="flow_left_item">
+        <el-scrollbar style="height: 100%">
+          <div class="nodes-wrap">
+            <div class="left-tab-container">
+              <div class="secondary-tabs" v-if="nodeTypeList!= null && nodeTypeList.length > 0">
+                <div
+                  v-for="(subTab, subIndex) in nodeTypeList[activePrimary].children"
+                  @click="activeSecondary = subIndex"
+                  :class="{ 'active': activeSecondary === subIndex }"
+                  :key="subTab.typeId"
+                  :draggable="true"
+                  @dragstart="drag($event, {nodeName: subTab.name, workTypeId: subTab.typeId, type: subTab.type})"
+                >
+                  {{subTab.name}}
+                </div>
+              </div>
             </div>
-            <div class="name">{{ item.typeName }}</div>
           </div>
-        </div>
-      </el-scrollbar>
-      <!-- <div class="flow_operation">
-        <el-button type="primary" @click="saveFlow" :disabled="disabled">保存</el-button>
-      </div> -->
+        </el-scrollbar>
+      </div>
     </div>
     <div
       id="flowWrap"
@@ -90,7 +86,7 @@
 <script>
 import cloneDeep from 'lodash/cloneDeep'
 import { jsPlumb } from 'jsplumb'
-import { nodeTypeList } from './config/init'
+// import { nodeTypeList } from './config/init'
 import {
   jsplumbSetting,
   jsplumbConnectOptions,
@@ -98,7 +94,6 @@ import {
   jsplumbTargetOptions
 } from './config/commonConfig'
 import methods from './config/methods'
-// import data from "./config/data.json";
 import flowNode from './node-item'
 export default {
   name: 'FlowEdit',
@@ -127,13 +122,18 @@ export default {
     isEdit: {
       type: Boolean,
       default: false
+    },
+    // 节点类型
+    nodeTypeList: {
+      type: Array,
+      default: () => []
     }
   },
   data () {
     return {
       jsPlumb: null,
       currentItem: null,
-      nodeTypeList: nodeTypeList,
+      // nodeTypeList: nodeTypeList,
       nodeTypeObj: {},
       data: {
         nodeList: [],
@@ -162,11 +162,14 @@ export default {
         top: 0,
         height: 0,
         width: 0
-      }
+      },
+      activePrimary: 0,       // 当前激活的一级标签索引
+      activeSecondary: 0      // 当前激活的二级标签索引
     }
   },
   watch: {
     nodeData (val) {
+      console.log('nodeData watch', val)
       this.initNode()
       this.fixNodesPosition()
       this.$nextTick(() => {
@@ -178,7 +181,10 @@ export default {
     },
     disabled (val) {
     },
-    isEdit (val) {}
+    isEdit (val) {},
+    nodeTypeList (val) {
+      console.log('watch', val)
+    }
   },
   mounted () {
     // console.log('mounted')
@@ -201,7 +207,7 @@ export default {
       }
     },
     initNodeTypeObj () {
-      nodeTypeList.map(v => {
+      this.nodeTypeList.map(v => {
         this.nodeTypeObj[v.type] = v
       })
     },
@@ -213,8 +219,8 @@ export default {
       this.data.lineList.push(...tempData.lineList)
       this.data.nodeList = []
       tempData.nodeList.map(v => {
-        v.logImg = this.nodeTypeObj[v.type].logImg
-        v.log_bg_color = this.nodeTypeObj[v.type].log_bg_color
+        // v.logImg = this.nodeTypeObj[v.type].logImg
+        // v.log_bg_color = this.nodeTypeObj[v.type].log_bg_color
         this.data.nodeList.push(v)
       })
 
@@ -272,6 +278,10 @@ export default {
   text-align: center;
 
   .flow_left {
+    display: flex;
+  }
+
+  .flow_left_item {
     border-right: 1px solid #ccc;
     display: flex;
     flex-direction: column;
@@ -285,7 +295,7 @@ export default {
   }
 
   .nodes-wrap {
-    width: 150px;
+    width: 100px;
     height: 90%;
     // border-right: 1px solid #ccc;
     .node {
@@ -383,4 +393,49 @@ export default {
     stroke-dashoffset: 0;
   }
 }
+
+/* 全局或组件内样式 */
+.el-scrollbar__wrap {
+  overflow-x: hidden !important; /* 隐藏横向滚动条 */
+}
+
+.left-tab-container{
+  display: flex;
+}
+
+/* 左侧列：固定宽度，垂直排列 */
+.primary-tabs {
+  width: 100%;
+  display: flex;
+  flex-direction: column; /* 垂直布局 */
+  border-right: 1px solid #ddd;
+}
+.primary-tabs > div {
+  padding: 12px;
+  // cursor: pointer;
+  margin: 2px 2px;
+  border-radius: 3px;
+}
+.primary-tabs > div.active {
+  color: #ffffff;
+  background: #f78989 !important;
+}
+
+/* 二级标签：水平排列 */
+.secondary-tabs {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+.secondary-tabs > div {
+  padding: 12px;
+  cursor: pointer;
+  margin: 2px 2px;
+  background: #85ce61;
+  border-radius: 3px;
+}
+.secondary-tabs > div.active {
+  color: #ffffff;
+  background: #66b1ff !important;
+}
 </style>

src/components/work-flow-v2/node-edit-check.vue → src/components/work-flow/node-edit-check.vue

@@ -91,7 +91,7 @@
 import { getWorkType } from '@/api/crafts'
 import { workTypeMasterList } from '@/api/worktype'
 import UploadComponent from '@/views/modules/common/upload-component-v2'
-import NodeEditNormal from '@/components/work-flow-v2/node-edit-normal.vue'
+import NodeEditNormal from '@/components/work-flow/node-edit-normal.vue'
 export default {
   name: 'nodeEdit',
   components: { UploadComponent, NodeEditNormal },

src/components/work-flow-v2/node-edit-final-check.vue → src/components/work-flow/node-edit-final-check.vue

@@ -229,7 +229,7 @@
 import { getWorkType } from '@/api/crafts'
 import { workTypeMasterList } from '@/api/worktype'
 import UploadComponent from '@/views/modules/common/upload-component-v2'
-import NodeEditNormal from '@/components/work-flow-v2/node-edit-normal.vue'
+import NodeEditNormal from '@/components/work-flow/node-edit-normal.vue'
 export default {
   name: 'nodeEdit',
   components: { UploadComponent, NodeEditNormal },

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

@@ -1,433 +1,21 @@
 <template>
-  <div>
-    <el-form
-      :model="form"
-      ref="form"
-      :rules="rules"
-      label-width="100px"
-      v-if="node.type !== 't-check'"
-    >
-      <el-form-item label="节点名称" prop="nodeName">
-        <el-input
-          v-model="form.nodeName"
-          placeholder="请输入节点名称"
-          :disabled="disabled || selectOperator || isEdit"
-        ></el-input>
-      </el-form-item>
-      <el-form-item
-        label="工种类型"
-        prop="workTypeId"
-        v-if="node.type !== 'end'"
-      >
-        <el-select
-          v-model="form.workTypeId"
-          placeholder="请选择"
-          style="width: 100%"
-          :disabled="disabled || selectOperator || isEdit"
-          @change="onChage"
-        >
-          <el-option
-            v-for="item in workTypeOptions"
-            :key="item.typeId"
-            :label="item.name"
-            :value="item.typeId"
-          ></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="工时单价">
-        <el-input
-          v-model="form.quotedPrice"
-          placeholder="工时单价"
-          :disabled="disabled || !isEdit"
-        ></el-input>
-      </el-form-item>
-      <el-form-item label="备注" prop="notes">
-        <el-input
-          v-model="form.notes"
-          :disabled="disabled || selectOperator || !isEdit"
-        ></el-input>
-      </el-form-item>
-      <el-form-item label="工序要求" prop="require" v-if="node.type !== 'end'">
-        <el-input
-          v-model="form.require"
-          :disabled="disabled || selectOperator || !isEdit"
-        ></el-input>
-      </el-form-item>
-      <el-form-item label="工序说明" prop="explain" v-if="node.type !== 'end'">
-        <el-input
-          v-model="form.explain"
-          :disabled="disabled || selectOperator || !isEdit"
-        ></el-input>
-      </el-form-item>
-      <el-form-item label="工序特性" prop="process" v-if="node.type !== 'end'">
-        <el-input
-          v-model="form.process"
-          :disabled="disabled || selectOperator || !isEdit"
-        ></el-input>
-      </el-form-item>
-      <el-form-item
-        label="所需工时"
-        prop="preTaskTime"
-        v-if="node.type !== 'end'"
-      >
-        <el-input
-          v-model="form.preTaskTime"
-          :disabled="disabled || selectOperator || !isEdit"
-          oninput="value=value.replace(/[^0-9.]/g,'')"
-        >
-          <i slot="suffix" style="font-style: normal; margin-right: 10px">h</i>
-        </el-input>
-      </el-form-item>
-      <el-form-item
-        label="计划完成时间"
-        prop="planCompletionTime"
-        v-if="node.type !== 'end'"
-      >
-        <el-date-picker
-            v-model="form.planCompletionTime"
-            value-format="yyyy-MM-dd"
-            type="date"
-            :disabled="disabled || !isEdit"
-            style="width:100%"
-        >
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="操作人" v-if="form.operatorName && !selectOperator">
-        <el-input
-          :disabled="disabled && selectOperator || !isEdit"
-          v-model="form.operatorName"
-        ></el-input>
-      </el-form-item>
-      <el-form-item
-        label="操作人"
-        prop="operatorId"
-        v-if="selectOperator && node.type !== 'end'"
-      >
-        <el-select
-          v-model="form.operatorId"
-          :disabled="disabled && selectOperator || !isEdit"
-          multiple
-          placeholder="请选择"
-          style="width: 100%"
-        >
+  <div style="margin:10px 10px">
+    <el-form>
+      <el-form-item label="节点类型" label-width="100px">
+        <el-select v-model="node.type" placeholder="请选择">
           <el-option
-            v-for="item in operatorIdOptions"
-            :key="item.userId"
-            :label="item.name"
-            :value="item.userId"
-          ></el-option>
+            v-for="item in nodeTypeList"
+            :key="item.type"
+            :label="item.typeName"
+            :value="item.type">
+          </el-option>
         </el-select>
       </el-form-item>
-      <el-form-item v-if="node.type !== 'end' && !disabled && !selectOperator && isEdit">
-        <upload-component
-          :title="'附件'"
-          :accept="'*'"
-          :file-obj-list="fileList"
-          @uploadSuccess="uploadSuccess"
-        />
-      </el-form-item>
-      <el-form-item v-else>
-        <upload-component
-          :display="true"
-          :title="'附件'"
-          :accept="'*'"
-          :file-obj-list="fileList"
-          @uploadSuccess="uploadSuccess"
-        />
-      </el-form-item>
-    </el-form>
-
-    <!-- 节点是总检时显示下面内容 -->
-    <el-form
-      :model="form"
-      ref="form"
-      :rules="rules"
-      label-width="100px"
-      v-if="node.type == 't-check'"
-    >
-      <el-row>
-        <el-col :span="8">
-          <el-form-item label="节点名称" prop="nodeName">
-            <el-input
-              v-model="form.nodeName"
-              placeholder="请输入节点名称"
-              :disabled="disabled || selectOperator || isEdit"
-            ></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item
-            label="工种类型"
-            prop="workTypeId"
-            v-if="node.type !== 'end'"
-          >
-            <el-select
-              v-model="form.workTypeId"
-              placeholder="请选择"
-              style="width: 100%"
-              :disabled="disabled || selectOperator || isEdit"
-              @change="onChage"
-            >
-              <el-option
-                v-for="item in workTypeOptions"
-                :key="item.typeId"
-                :label="item.name"
-                :value="item.typeId"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item label="工时单价">
-            <el-input
-              v-model="form.quotedPrice"
-              placeholder="工时单价"
-              disabled
-            ></el-input>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="8">
-          <el-form-item
-            label="工序要求"
-            prop="require"
-            v-if="node.type !== 'end'"
-          >
-            <el-input
-              v-model="form.require"
-              :disabled="disabled || selectOperator || !isEdit"
-            ></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item
-            label="工序说明"
-            prop="explain"
-            v-if="node.type !== 'end'"
-          >
-            <el-input
-              v-model="form.explain"
-              :disabled="disabled || selectOperator || isEdit"
-            ></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item
-            label="所需工时"
-            prop="preTaskTime"
-            v-if="node.type !== 'end'"
-          >
-            <el-input
-              v-model="form.preTaskTime"
-              :disabled="disabled || selectOperator || !isEdit"
-              oninput="value=value.replace(/[^0-9.]/g,'')"
-            >
-              <i slot="suffix" style="font-style: normal; margin-right: 10px"
-                >h</i
-              >
-            </el-input>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="8">
-          <el-form-item
-            label="计划完成时间"
-            prop="planCompletionTime"
-            v-if="node.type !== 'end'"
-          >
-            <el-date-picker
-                v-model="form.planCompletionTime"
-                value-format="yyyy-MM-dd"
-                type="date"
-                :disabled="disabled || !isEdit"
-                style="width:100%"
-            >
-            </el-date-picker>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item
-            label="操作人"
-            v-if="disabled"
-          >
-            <el-input
-              :disabled="disabled || !isEdit"
-              v-model="form.operatorName"
-            ></el-input>
-          </el-form-item>
-          <el-form-item
-            label="操作人"
-            prop="operatorId"
-            v-if="!disabled && selectOperator && node.type !== 'end'"
-          >
-            <el-select
-              v-model="form.operatorId"
-              :disabled="disabled && selectOperator || !isEdit"
-              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-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <el-form-item label="备注" prop="notes">
-            <el-input
-              type="textarea"
-              v-model="form.notes"
-              :disabled="disabled || selectOperator || !isEdit"
-            ></el-input>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <div>检验项目</div>
-        </el-col>
-      </el-row>
-      <!-- <el-row>
-        <el-col :span="24">
-          <el-form-item label="检验方法">
-            <div>
-              1.游标卡尺，2.千分尺，3.高度尺，4.百分表，5.R规，6.环规、塞规，7.游标角度尺，8.三坐标，9.模具，10.样板，11.夹具，12.目测，13.组合测量，14.精密测量，15.敲击，16.测厚仪，17.其他
-            </div>
-          </el-form-item>
-        </el-col>
-      </el-row> -->
-      <el-row>
-        <el-table :data="form.prodProductionRequireList" style="width: 100%">
-          <el-table-column prop="pageNo" label="页次/图区">
-            <template slot-scope="scope">
-              <el-form-item
-                :prop="'prodProductionRequireList.' + scope.$index + '.pageNo'"
-                :rules="rules.pageNo"
-                label-width="0px"
-              >
-                <el-input
-                  v-model="scope.row.pageNo"
-                  :disabled="disabled || selectOperator || isEdit"
-                ></el-input>
-              </el-form-item>
-            </template>
-          </el-table-column>
-          <el-table-column prop="inspectionParam" label="检查参数">
-            <template slot-scope="scope">
-              <el-form-item
-                :prop="
-                  'prodProductionRequireList.' +
-                  scope.$index +
-                  '.inspectionParam'
-                "
-                :rules="rules.inspectionParam"
-                label-width="0px"
-              >
-                <el-input
-                  v-model="scope.row.inspectionParam"
-                  :disabled="disabled || selectOperator || isEdit"
-                ></el-input>
-              </el-form-item>
-            </template>
-          </el-table-column>
-          <el-table-column prop="inspectionMethod" label="检验方法">
-            <template slot-scope="scope">
-              <el-form-item
-                :prop="
-                  'prodProductionRequireList.' +
-                  scope.$index +
-                  '.inspectionMethod'
-                "
-                :rules="rules.inspectionMethod"
-                label-width="0px"
-              >
-                <el-select
-                  v-model="scope.row.inspectionMethod"
-                  placeholder="请选择"
-                  style="width: 100%"
-                  :disabled="disabled || selectOperator || isEdit"
-                >
-                  <el-option
-                    v-for="item in inspectionMethodOptions"
-                    :key="item.value"
-                    :label="item.name"
-                    :value="item.value"
-                  ></el-option>
-                </el-select>
-              </el-form-item>
-            </template>
-          </el-table-column>
-          <el-table-column prop="allowValues" label="允许值">
-            <template slot-scope="scope">
-              <el-form-item
-                :prop="
-                  'prodProductionRequireList.' + scope.$index + '.allowValues'
-                "
-                :rules="rules.allowValues"
-                label-width="0px"
-              >
-                <el-input
-                  v-model="scope.row.allowValues"
-                  :disabled="disabled || selectOperator || isEdit"
-                ></el-input>
-              </el-form-item>
-            </template>
-          </el-table-column>
-          <el-table-column prop="measureRecord1" label="实测记录1">
-            <template slot-scope="scope">
-              <div style="margin-bottom:22px;">{{scope.row.measureRecord1}}</div>
-            </template>
-          </el-table-column>
-          <el-table-column prop="measureRecord2" label="实测纪录2">
-            <template slot-scope="scope">
-              <div style="margin-bottom:22px;">{{scope.row.measureRecord2}}</div>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" width="140px" v-if="!disabled && !isEdit">
-            <template slot-scope="scope">
-              <el-button
-                type="primary"
-                icon="el-icon-circle-plus"
-                circle
-                @click="addRow"
-              ></el-button>
-              <el-button
-                type="danger"
-                icon="el-icon-delete"
-                circle
-                @click="removeRow(scope.$index)"
-                v-if="scope.$index > 0"
-              ></el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-row>
-      <el-form-item v-if="!disabled && !selectOperator && isEdit" label-width="0px">
-        <upload-component
-          :title="'附件'"
-          :accept="'*'"
-          :file-obj-list="fileList"
-          @uploadSuccess="uploadSuccess"
-      />
-      </el-form-item>
-      <el-form-item v-else label-width="0px">
-        <upload-component
-          :display="true"
-          :title="'附件'"
-          :accept="'*'"
-          :file-obj-list="fileList"
-          @uploadSuccess="uploadSuccess"
-        />
-      </el-form-item>
     </el-form>
+    <node-edit-normal ref="form" v-if="node.type == 'start' || node.type == 'produce'" :data="node"/>
+    <node-edit-check ref="form" v-if="node.type == 'check'" :data="node"/>
+    <node-edit-final-check ref="form" v-if="node.type == 't-check'" :data="node"/>
+    <node-edit-end ref="form" v-if="node.type == 'end'" :data="node"/>
   </div>
 </template>
 
@@ -435,9 +23,14 @@
 import { getWorkType } from '@/api/crafts'
 import { workTypeMasterList } from '@/api/worktype'
 import UploadComponent from '@/views/modules/common/upload-component'
+import NodeEditNormal from '@/components/work-flow/node-edit-normal.vue'
+import NodeEditCheck from '@/components/work-flow/node-edit-check.vue'
+import NodeEditFinalCheck from '@/components/work-flow/node-edit-final-check.vue'
+import NodeEditEnd from '@/components/work-flow/node-edit-end.vue'
+import { nodeTypeList } from '@/components/work-flow/config/init'
 export default {
   name: 'nodeEdit',
-  components: { UploadComponent },
+  components: { UploadComponent, NodeEditNormal, NodeEditCheck, NodeEditFinalCheck, NodeEditEnd },
   props: {
     data: {
       type: Object,
@@ -472,6 +65,7 @@ export default {
         planCompletionTime: ''
       },
       fileList: [],
+      nodeTypeList: nodeTypeList,
       inspectionMethodOptions: [
         { value: '1', name: '游标卡尺' },
         { value: '2', name: '千分尺' },
@@ -612,44 +206,38 @@ export default {
     },
     // 校验表单
     validateFormData () {
-      return new Promise((resolve, reject) => {
-        this.$refs['form'].validate((valid) => {
-          if (!valid) {
-            // eslint-disable-next-line prefer-promise-reject-errors
-            reject()
-            return
-          }
-          resolve()
-        })
-      })
+      return this.$refs['form'].validateFormData()
     },
     // 获取表单数据
     formData () {
-      const form = { ...this.form, operatorName: '' }
-      form.attachList = []
-      if (this.form.operatorId != null) {
-        form.operatorId = this.form.operatorId.toString()
-        this.form.operatorId.forEach((id) => {
-          let op = this.operatorIdOptions.find((t) => t.userId === id)
-          if (op.name != null) {
-            form.operatorName += op.name + ' '
-          }
-        })
-      }
+      let formData = this.$refs['form'].formData()
+      console.log('formData', formData)
+      return formData
+      // const form = { ...this.form, operatorName: '' }
+      // form.attachList = []
+      // if (this.form.operatorId != null) {
+      //   form.operatorId = this.form.operatorId.toString()
+      //   this.form.operatorId.forEach((id) => {
+      //     let op = this.operatorIdOptions.find((t) => t.userId === id)
+      //     if (op.name != null) {
+      //       form.operatorName += op.name + ' '
+      //     }
+      //   })
+      // }
 
-      // 填充附件
-      let fList = this.fileList
-      if (fList.length > 0) {
-        form.attachList = []
-        for (let i = 0; i < fList.length; i++) {
-          form.attachList.push({
-            fileName: fList[i].name,
-            url: fList[i].url
-          })
-        }
-      }
+      // // 填充附件
+      // let fList = this.fileList
+      // if (fList.length > 0) {
+      //   form.attachList = []
+      //   for (let i = 0; i < fList.length; i++) {
+      //     form.attachList.push({
+      //       fileName: fList[i].name,
+      //       url: fList[i].url
+      //     })
+      //   }
+      // }
 
-      return form
+      // return form
     },
 
     addRow () {

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

@@ -16,18 +16,18 @@
     @contextmenu.prevent="onContextmenu"
   >
     <el-row>
-      <el-col :span="8">
+      <!-- <el-col :span="8">
         <div class="log-wrap">
           <img :src="node.logImg" alt="" />
         </div>
-      </el-col>
-      <el-col :span="16">
+      </el-col> -->
+      <el-col :span="24">
         <div class="nodeName">{{ node.nodeName }}</div>
       </el-col>
     </el-row>
-    <el-row>
+    <!-- <el-row>
       <div class="node-operator">{{ node.operatorName }}</div>
-    </el-row>
+    </el-row> -->
     <!--连线用--//触发连线的区域-->
     <div class="node-anchor anchor-top" v-show="mouseEnter"></div>
     <div class="node-anchor anchor-right" v-show="mouseEnter"></div>
@@ -40,7 +40,7 @@
       :append-to-body="true"
       width="60%"
     >
-    <div v-if="isEdit">
+    <div style="height:400px;overflow:auto">
       <nodeEdit
         ref="nodeEdit"
         :data="dialog.data"
@@ -49,21 +49,12 @@
         :selectOperator="selectOperator"
       ></nodeEdit>
     </div>
-    <div v-else>
-      <nodeAdd
-        ref="nodeEdit"
-        :data="dialog.data"
-        :disabled="disabled"
-        :isEdit="isEdit"
-        :selectOperator="selectOperator"
-      ></nodeAdd>
+    <div slot="footer">
+      <el-button @click="dialog.visible = false">取 消</el-button>
+      <el-button v-if="!disabled" type="primary" @click="dialogSubmit"
+        >确 定</el-button
+      >
     </div>
-      <div slot="footer">
-        <el-button @click="dialog.visible = false">取 消</el-button>
-        <el-button v-if="!disabled" type="primary" @click="dialogSubmit"
-          >确 定</el-button
-        >
-      </div>
     </el-dialog>
   </div>
 </template>
@@ -71,12 +62,12 @@
 <script>
 import ClickOutside from 'vue-click-outside'
 import nodeEdit from './node-edit'
-import nodeAdd from './node-add'
+// import nodeAdd from './node-add'
 export default {
   name: 'node-item',
   components: {
-    nodeEdit,
-    nodeAdd
+    nodeEdit
+    // nodeAdd
   },
   props: {
     node: {
@@ -192,7 +183,7 @@ export default {
           this.$emit('setNode', this.node.id, formData)
           this.dialog.visible = false
         })
-        .catch(() => {})
+        .catch((e) => { console.log(e) })
     }
   }
 }
@@ -229,10 +220,10 @@ export default {
   }
   .nodeName {
     flex-grow: 1;
-    width: 80px;
+    // width: 80px;
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap;
+    // white-space: nowrap;
     height: 40px;
     align-items: center;
     justify-content: center;
@@ -291,3 +282,4 @@ export default {
   color: #ffffff;
 }
 </style>
+

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

@@ -94,7 +94,7 @@
 <script>
 import { getInfo, getWorkType } from '@/api/crafts'
 import UploadComponent from '../common/upload-component'
-import WorkFlow from '@/components/work-flow-v2/home'
+import WorkFlow from '@/components/work-flow/home'
 // import data from "@/components/work-flow/config/data.json";
 import { GenNonDuplicateID } from '@/components/work-flow/until'
 import CraftProductComponent from '@/views/modules/common/craft-product-component'

src/views/modules/tech/project-tech.vue

@@ -116,7 +116,7 @@
   import Assign from '@/views/modules/tech/project-tech-assign'
   import NoticeChange from '@/views/modules/tech/project-tech-notice-change-setting'
   import SubmitPlan from '@/views/modules/tech/project-tech-submit'
-  import CraftsAddOrDetail from '../tech/ctafts-add-or-detail-v2.vue'
+  import CraftsAddOrDetail from '../tech/ctafts-add-or-detail-v2'
   export default {
     name: 'plan',
     components: {