fix: 流程设计页面优化

ruoyi-ui/src/views/flowable/definition/index.vue

@@ -172,13 +172,16 @@
     </el-dialog>
 
     <!-- 流程图 -->
-    <el-dialog :title="flowImageTitle" :visible.sync="flowImageOpen" width="70%" append-to-body>
+    <el-dialog :title="readImage.title" :visible.sync="readImage.open" width="70%" append-to-body>
+      <!-- <el-image :src="readImage.src"></el-image> -->
       <flow :flowData="flowData"/>
     </el-dialog>
 
     <!--表单配置详情-->
     <el-dialog :title="formTitle" :visible.sync="formConfOpen" width="50%" append-to-body>
-        <v-form-render :form-data="formRenderData" ref="vFormRef"/>
+      <div class="test-form">
+        <parser :key="new Date().getTime()"  :form-conf="formConf" />
+      </div>
     </el-dialog>
 
     <!--挂载表单-->
@@ -212,7 +215,9 @@
           />
         </el-col>
         <el-col :span="14" :xs="24">
-            <v-form-render :form-data="formRenderData" ref="vFormRef"/>
+          <div v-if="currentRow">
+            <parser :key="new Date().getTime()" :form-conf="currentRow" />
+          </div>
         </el-col>
       </el-row>
     </el-dialog>
@@ -282,9 +287,11 @@ export default {
       formDeployTitle: "",
       formList: [],
       formTotal:0,
-      flowImageTitle: '',
-      flowImageOpen: false,
-      formRenderData:{},
+      formConf: {}, // 默认表单数据
+      readImage:{
+        open: false,
+        src: "",
+      },
       // bpmn.xml 导入
       upload: {
         // 是否显示弹出层（xml导入）
@@ -324,6 +331,7 @@ export default {
         deployId: null
       },
       deployId: '',
+      currentRow: null,
       // xml
       flowData: {},
       // 表单参数
@@ -412,8 +420,9 @@ export default {
     },
     /** 流程图查看 */
     handleReadImage(deployId){
-      this.flowImageTitle = "流程图";
-      this.flowImageOpen = true;
+      this.readImage.title = "流程图";
+      this.readImage.open = true;
+      // this.readImage.src = process.env.VUE_APP_BASE_API + "/flowable/definition/readImage/" + deploymentId;
       flowXmlAndNode({deployId:deployId}).then(res => {
         this.flowData = res.data;
       })
@@ -423,14 +432,7 @@ export default {
       getForm(formId).then(res =>{
         this.formTitle = "表单详情";
         this.formConfOpen = true;
-        // 回显表单
-        this.$nextTick(() => {
-          this.$refs.vFormRef.setFormJson(res.data.formContent);
-          this.$nextTick(() => {
-            // 表单禁用
-            this.$refs.vFormRef.disableForm();
-          })
-        })
+        this.formConf = JSON.parse(res.data.formContent)
       })
     },
     /** 启动流程 */
@@ -477,15 +479,7 @@ export default {
     },
     handleCurrentChange(data) {
       if (data) {
-        // 回显表单
-        this.$nextTick(() => {
-          this.$refs.vFormRef.setFormJson(JSON.parse(data.formContent));
-            // 加载表单填写的数据
-            this.$nextTick(() => {
-              // 表单禁用
-              this.$refs.vFormRef.disableForm();
-          })
-        })
+        this.currentRow = JSON.parse(data.formContent);
       }
     },
     /** 挂起/激活流程 */