流程管理模型设计

src/views/system/processManage/index.vue

@@ -12,7 +12,7 @@
         <!-- 最右侧装饰img -->
         <span class="tab-right-img" />
       </ul>
-      <component :is="comName" />
+      <component :is="comName" :current-model-id="currentModelId" @handleTab="getModeId" />
     </div>
   </div>
 </template>
@@ -33,7 +33,8 @@ export default {
   },
   data() {
     return {
-      activeIndex: 0
+      activeIndex: 0,
+      currentModelId: ''
     }
   },
   computed: {
@@ -51,8 +52,13 @@ export default {
     }
   },
   methods: {
+    getModeId(index, id) {
+      this.changeActiveTab(index)
+      this.currentModelId = id
+    },
     changeActiveTab(data) {
       this.activeIndex = data
+      this.currentModelId = ''
     }
   }
 }

src/views/system/processManage/modelDesign/index.vue

@@ -1,44 +1,56 @@
 <template>
-  <div>
+  <div v-loading="loading">
     <!-- http://192.168.99.84:8080/flowable-ui/modeler/#/processes -->
     <!-- :src="baseApi+'/flowable-ui/modeler'" -->
     <!-- src="http://192.168.99.67:11110/flowable-ui/modeler/" -->
     <iframe
-      ref="iframe"
-      class="iframe_box"
-      src="http://192.168.99.67:11110/flowable-ui/modeler/"
+      ref="myIframe"
+      class="iframe"
       frameborder="0"
       scrolling="no"
+      :src="url"
+      sandbox="allow-scripts allow-same-origin allow-downloads"
     />
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 export default {
+  props: {
+    currentModelId: {
+      type: String,
+      default: ''
+    }
+  },
   data() {
     return {
+      loading: true,
       url: ''
     }
   },
-  computed: {
-    ...mapGetters([
-      'baseApi'
-    ])
-  },
   created() {
   },
   mounted() {
-    const iframeElement = this.$refs.iframe
-    console.log('iframeElement', iframeElement)
-    const iframeWindow = iframeElement.contentWindow
-    console.log('iframeWindow', iframeWindow)
-    const iframeDocument = iframeWindow.document
-    console.log('iframeDocument', iframeDocument)
-    // 通过iframe文档对象获取元素
-    const iframeInnerElement = iframeDocument.querySelector('.login-button')
-    // 在这里可以对获取到的元素进行进一步的操作
-    console.log('iframeInnerElement', iframeInnerElement)
+    if (this.currentModelId) {
+      this.url = 'http://192.168.99.67:11110/flowable-ui/modeler/#/processes/' + this.currentModelId
+    } else {
+      this.url = 'http://192.168.99.67:11110/flowable-ui/modeler'
+    }
+    const iframe = this.$refs.myIframe
+    iframe.addEventListener('load', () => {
+      if (iframe.contentWindow) {
+        // iframe内容已加载完成
+        console.log('iframe内容已加载完成')
+        this.loading = false
+      } else {
+        // iframe内容加载出现错误
+        console.log('iframe内容加载出现错误')
+        this.loading = false
+      }
+    })
+    // const iframeWindow = iframeElement.contentWindow
+    // const iframeDocument = iframeWindow.document
+    // const iframeInnerElement = iframeDocument.querySelector('.login-button')
   },
   methods: {
   }
@@ -46,4 +58,8 @@ export default {
 </script>
 
 <style lang='scss' scoped>
+.iframe {
+  width: 100%;
+  height: calc(100vh - 215px);
+}
 </style>

src/views/system/processManage/processDeployment/index.vue

@@ -30,6 +30,7 @@
       <ul class="process-list">
         <li v-for="(item,index) in flowableList" :key="index" :class="isActive === index ? 'active-li': ''" @click="selectProcess(item,index)">
           <p>{{ item.deployName }}</p>
+          <i @click="settingModle(item.modelId)">设置</i>
           <span :class="item.suspensionState === 1 ? 'process-on': 'process-off'" />
         </li>
       </ul>
@@ -173,6 +174,10 @@ export default {
       }).catch(() => {
       })
     },
+    settingModle(modelId) {
+      console.log('modelId', modelId)
+      this.$emit('handleTab', 3, modelId)
+    },
     downloadModel(data) {
       this.$confirm('此操作将导出所选数据' + '<span>你是否还要继续？</span>', '提示', {
         confirmButtonText: '继续',