工艺管理新增编辑时实时显示流程图表格数据；修复页面滚动后拖动流程图节点位置异常问题。

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

@@ -116,8 +116,8 @@ const methods = {
     const containerRect = this.jsPlumb.getContainer().getBoundingClientRect()
     const scale = this.getScale()
     let left = (event.pageX - containerRect.left - 60) / scale
-    let top = (event.pageY - containerRect.top - 20) / scale
-
+    let top = (event.clientY - containerRect.top - 20) / scale
+    
     var temp = {
       ...this.currentItem,
       id: GenNonDuplicateID(8),
@@ -221,6 +221,7 @@ const methods = {
     // 缩放时设置jsPlumb的缩放比率
     pan.on('zoom', e => {
       const { x, y, scale } = e.getTransform()
+      
       this.jsPlumb.setZoom(scale)
       // 根据缩放比例，缩放对齐辅助线长度和位置
       this.auxiliaryLinePos.width = (1 / scale) * 100 + '%'
@@ -256,6 +257,8 @@ const methods = {
           v[key] = node[key]
         }
         // v.nodeName = node.nodeName
+        // 调用父组件 dataChange 方法
+        this.$emit('dataChange')
         return true
       } else {
         return false

src/components/work-flow/home.vue

@@ -189,6 +189,7 @@ export default {
     this.$nextTick(() => {
       this.init()
     })
+    window.addEventListener("scroll", this.init)
   },
   methods: {
     ...methods,
@@ -251,6 +252,10 @@ export default {
         return item
       })
       return data
+    },
+    dataChange(){
+      //通知上层数据变更
+      this.$emit('dataChange')
     }
   }
 }

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

@@ -51,7 +51,7 @@
     </div>
     <div v-else>
       <nodeAdd
-        ref="nodeAdd"
+        ref="nodeEdit"
         :data="dialog.data"
         :disabled="disabled"
         :isEdit="isEdit"

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

@@ -71,8 +71,21 @@
             :nodeData="workFlowData"
             @saveWorkFlow="saveWorkFlow"
             :isEdit="isEdit"
+            @dataChange="workFlowDataChange"
           ></work-flow>
         </el-row>
+        <div style="margin-top:10px; border:1px solid #ccc; padding:5px">
+          <div>
+            <el-button @click="refreshTable">表格刷新</el-button>
+          </div>
+          <el-table :data="workFlowTableData">
+            <el-table-column prop="nodeName" label="节点名称"></el-table-column>
+            <el-table-column prop="workTypeName" label="工种类型"></el-table-column>
+            <el-table-column prop="require" label="工序要求"></el-table-column>
+            <el-table-column prop="explain" label="工序说明"></el-table-column>
+            <el-table-column prop="notes" label="备注"></el-table-column>
+          </el-table>
+        </div>
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="onChose">取消</el-button>
@@ -85,7 +98,7 @@
 </template>
 
 <script>
-import { getInfo, getProduct } from '@/api/crafts'
+import { getInfo, getProduct, getWorkType } from '@/api/crafts'
 import UploadComponent from '../common/upload-component'
 import WorkFlow from '@/components/work-flow/home'
 // import data from "@/components/work-flow/config/data.json";
@@ -124,6 +137,10 @@ export default {
         nodeList: [],
         lineList: []
       }, // 流程图数据
+      //工艺流程表格数据
+      workFlowTableData: [],
+      // 工种列表
+      workTypeOptions: [],
       dataRule: {
         techName: [
           { required: true, message: '工艺名称不能为空', trigger: 'blur' }
@@ -150,6 +167,7 @@ export default {
   },
   created () {
     this.initNode()
+    
   },
   mounted () {
     this.initNode()
@@ -205,6 +223,8 @@ export default {
           }
         }
       })
+
+      this.refreshTable()
     },
     handleRemove (file, fileList) {
       this.fileList = fileList
@@ -283,12 +303,42 @@ export default {
     },
     // 保存流程图
     saveWorkFlow (workFlowData) {
+      console.log("save work flow.")
       this.workFlowData = workFlowData
     },
     handleClose () {
       // this.visible = false
       this.$emit('close')
-    }
+    },
+    //流程图数据变更通知
+    workFlowDataChange(){
+      this.refreshTable()
+    },
+    //刷新表格
+    async refreshTable(){
+      this.workFlowTableData = []
+
+      await this.getWorkTypeOptions()
+
+      let flowData = this.$refs.workFlow.getFlowData()
+      
+      flowData.nodeList.forEach(item => {
+        let workType = this.workTypeOptions.find(t => t.typeId == item.workTypeId)
+        if(workType){
+          item.workTypeName = workType.name
+        }
+        this.workFlowTableData.push(item)
+      })
+    },
+    async getWorkTypeOptions () {
+      this.workTypeOptions = []
+      await getWorkType().then(({ data }) => {
+        if (data && data.code === '200') {
+          this.workTypeOptions = data.data
+          console.log(data.data)
+        }
+      })
+    },
   }
 }
 </script>