修改model onShow报错

src/components/business/process/edge-modal/edge-modal.vue

@@ -104,14 +104,13 @@ export default {
   created() {
   },
   methods: {
-    ...mapMutations(['setProcessEdgeModalDisplay']),
+    ...mapMutations(['setProcessEdgeModalDisplay','setCurrentEdgeId']),
     /**
      * @desc   : 确定
      * @author : 张潇木
      * @date   : 2023/1/5 10:38
      */
     modalOk(){
-      this.setProcessEdgeModalDisplay(false)
       this.edgeData.pdtList=this.$refs.pdtTable.getTableDataFilter().map((it) => {
         return {
           flowId:parseInt(this.$route.params.id),
@@ -134,6 +133,8 @@ export default {
       }else{
         cell.setAttrs({ line: { stroke: '#A2B1C3', }, },);
       }
+      this.setProcessEdgeModalDisplay(false)
+      this.setCurrentEdgeId(undefined)
     },
     /**
      * @desc   : 取消
@@ -142,6 +143,7 @@ export default {
      */
     modalCancel(){
       this.setProcessEdgeModalDisplay(false)
+      this.setCurrentEdgeId(undefined)
     },
   }
 

src/components/business/process/node-modal/node-modal.vue

@@ -262,13 +262,21 @@ export default {
   watch: {
     //当前节点发生变化
     id(n, o) {
-      this.graph = Process.graph
-      let cell = this.graph.getCellById(this.process.currentNodeId)
-      this.nodeData = cell.data
+      if(n){
+        if(this.graph==null){
+          this.graph = Process.graph
+        }
+        let cell = this.graph.getCellById(this.process.currentNodeId)
+        this.nodeData = cell.data
+      }
+
     },
-    //监听model显示，达到类似onShow的效果
+    //监听model显示，达到类似onShow的效果，节点每次显示，都要根据当前节点id重新渲染节点数据
     onShow(n, o) {
       if (n) {
+        if(this.graph==null){
+          this.graph = Process.graph
+        }
         //过滤调节点组并将json解构成新结构数组
         this.allNodes = this.graph.getNodes().filter(it => it.shape == 'custom-image').map((it) => {
           return { id: it.id, name: it.data.nodeName }
@@ -407,7 +415,7 @@ export default {
 
   },
   methods: {
-    ...mapMutations(['setProcessNodeModalDisplay', 'setProcessEdgeModalDisplay']),
+    ...mapMutations(['setProcessNodeModalDisplay', 'setCurrentNodeId']),
     chooseData(row, rowIndex){
       console.log('row',row,rowIndex)
       this.$set(this.nodeData.jobDefectList[rowIndex],'jobId',row.jobId)
@@ -420,7 +428,6 @@ export default {
      */
     modalOk() {
       //关闭modal
-      this.setProcessNodeModalDisplay(false)
       this.handleParams()
       //根据节点id获取节点数据
       let cell = this.graph.getCellById(this.process.currentNodeId)
@@ -431,6 +438,8 @@ export default {
         label: { text: this.nodeData.nodeName },
         text: { text: this.nodeData.nodeName },
       })
+      this.setProcessNodeModalDisplay(false)
+      this.setCurrentNodeId(undefined)
     },
 
     /**
@@ -440,6 +449,7 @@ export default {
      */
     modalCancel() {
       this.setProcessNodeModalDisplay(false)
+      this.setCurrentNodeId(undefined)
     },
     /**
      * @desc   : 设置提交数据格式

src/view/process/process-flow/index.vue

@@ -180,14 +180,14 @@ export default {
     },
     /**
      * @desc   : 给参数赋值
-     * @author : 洪旭东
-     * @date   : 2023-01-30 08:51
+     * @author : 张潇木
+     * @date   : 2023/2/3 14:41
      */
     setParams() {
       this.params = { ...this.formData }
     },
     /**
-     * @desc   : desc
+     * @desc   : 保存
      * @author : 张潇木
      * @date   : 2023/2/3 14:41
      */

src/view/process/process-flow/process-setting.vue

@@ -2,6 +2,8 @@
   <div class="main-div" style="width:100%;height:100%;">
     {{this.exportData}}
 <!--    {{this.importValue}}-->
+<!--    {{this.process.currentEdgeId}}-->
+<!--    {{this.process.currentNodeId}}-->
 <!--  测试导入初始数据  -->
     <Layout>
       <!--   左侧工具栏   -->
@@ -67,6 +69,11 @@ export default {
   mounted() {
     //创建流程图对象
     this.graph=Process.init(this.$refs.container)
+
+    this.setCurrentNodeId(undefined)
+    this.setCurrentEdgeId(undefined)
+    this.setProcessNodeModalDisplay(false)
+    this.setProcessEdgeModalDisplay(false)
     // this.graph.zoomToFit({ maxScale: 1 });// 将画布中元素缩小或者放大一定级别，让画布正好容纳所有元素，可以通过 maxScale 配置最大缩放级别
     // this.graph.centerContent(); // 将画布中元素居中展示
   },
@@ -74,6 +81,7 @@ export default {
     ...mapState(['process']),
   },
   methods: {
+    ...mapMutations(['setProcessNodeModalDisplay', 'setProcessEdgeModalDisplay', 'setCurrentNodeId', 'setCurrentEdgeId']),
     /**
      * @desc   : 获取基础数据
      * @author : 张潇木