11482-【CR】【投资系统】增加审批流程-新换流程表单设计

ruoyi-ui/src/main.js

@@ -64,6 +64,13 @@ Vue.component('font-awesome-icon', FontAwesomeIcon)
 // import VConsole from "vconsole";
 // const vConsole = new VConsole();
 // import * as dd from 'dingtalk-jsapi'
+
+
+// vform 表单设计器
+import vform from '@/components/vform/VFormDesigner.umd.min.js'
+import '@/components/vform/VFormDesigner.css'
+// 注册vform组件
+Vue.use(vform);
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey
@@ -119,4 +126,4 @@ router.beforeEach((to, from, next) => {
   // console.log("=====",to, from)
   // 全局前置守卫逻辑
   next()
-});
+});

ruoyi-ui/src/router/index.js

@@ -237,6 +237,19 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/flowable',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: 'task/flowForm/index',
+        component: () => import('@/views/flowable/task/flowForm/index'),
+        name: 'FlowForm',
+        meta: { title: '流程表单', icon: '' }
+      }
+    ]
+  },
   {
     path: '/tool',
     component: Layout,

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

@@ -178,10 +178,15 @@
     </el-dialog>
 
     <!--表单配置详情-->
-    <el-dialog :title="formTitle" :visible.sync="formConfOpen" width="50%" append-to-body>
+<!--    <el-dialog :title="formTitle" :visible.sync="formConfOpen" width="50%" append-to-body>
       <div class="test-form">
         <parser :key="new Date().getTime()"  :form-conf="formConf" />
       </div>
+    </el-dialog>-->
+    <el-dialog :title="formTitle" :visible.sync="formConfOpen" width="50%" append-to-body>
+      <div class="test-form">
+        <v-form-render :form-data="formData" ref="vFormRef"/>
+      </div>
     </el-dialog>
 
     <!--挂载表单-->
@@ -214,10 +219,15 @@
             @pagination="ListFormDeploy"
           />
         </el-col>
-        <el-col :span="14" :xs="24">
+<!--        <el-col :span="14" :xs="24">
           <div v-if="currentRow">
             <parser :key="new Date().getTime()" :form-conf="currentRow" />
           </div>
+        </el-col>-->
+        <el-col :span="14" :xs="24">
+          <div class="test-form">
+            <v-form-render :form-data="formData" ref="vFormCurrentRowRef"/>
+          </div>
         </el-col>
       </el-row>
     </el-dialog>
@@ -428,12 +438,26 @@ export default {
       })
     },
     /** 表单查看 */
-    handleForm(formId){
+    /*handleForm(formId){
       getForm(formId).then(res =>{
         this.formTitle = "表单详情";
         this.formConfOpen = true;
         this.formConf = JSON.parse(res.data.formContent)
       })
+    },*/
+    handleForm(formId){
+      getForm(formId).then(res =>{
+        this.formTitle = "表单详情";
+        this.formConfOpen = true;
+        this.$nextTick(() => {
+          // 回显数据
+          this.$refs.vFormRef.setFormJson(JSON.parse(res.data.formContent))
+          this.$nextTick(() => {
+            // 表单禁用
+            this.$refs.vFormRef.disableForm();
+          })
+        })
+      })
     },
     /** 启动流程 */
     handleDefinitionStart(row){
@@ -477,10 +501,22 @@ export default {
         this.getList();
       })
     },
-    handleCurrentChange(data) {
+   /* handleCurrentChange(data) {
       if (data) {
         this.currentRow = JSON.parse(data.formContent);
       }
+    },*/
+    handleCurrentChange(data) {
+      if (data) {
+        this.$nextTick(() => {
+          // 回显数据
+          this.$refs.vFormCurrentRowRef.setFormJson(JSON.parse(data.formContent))
+          this.$nextTick(() => {
+            // 表单禁用
+            this.$refs.vFormCurrentRowRef.disableForm();
+          })
+        })
+      }
     },
     /** 挂起/激活流程 */
     handleUpdateSuspensionState(row){

ruoyi-ui/src/views/flowable/task/flowForm/index.vue

@@ -0,0 +1,123 @@
+<template>
+  <div>
+  <v-form-designer ref="vfDesigner" :designer-config="designerConfig">
+    <!-- 保存按钮 -->
+    <template #customSaveButton>
+      <el-button type="text" @click="saveFormJson"><i class="el-icon-s-promotion" />保存</el-button>
+    </template>
+  </v-form-designer>
+
+  <!--系统表单信息-->
+  <el-dialog :title="formTitle" :visible.sync="formOpen" width="500px" append-to-body>
+    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form-item label="表单名称" prop="formName">
+        <el-input v-model="form.formName" placeholder="请输入表单名称" />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" placeholder="请输入备注" />
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="cancel">取 消</el-button>
+    </div>
+  </el-dialog>
+  </div>
+</template>
+
+<script>
+import {addForm, getForm, updateForm} from "@/api/flowable/form";
+import { StrUtil } from '@/utils/StrUtil'
+
+export default {
+  name: "flowForm",
+  data() {
+    return {
+      formTitle: "",
+      formOpen: false,
+      // 表单校验
+      rules: {
+        formName: [
+          { required: true, message: "表单名称不能为空", trigger: "blur" }
+        ]
+      },
+      // 表单参数
+      form: {
+        formId: null,
+        formName: null,
+        formContent: null,
+        remark: null
+      },
+      designerConfig: {
+        generateSFCButton: false,
+        exportCodeButton: false,  //是否显示导出代码按钮
+        toolbarMaxWidth: 320,
+        toolbarMinWidth: 300,  //设计器工具按钮栏最小宽度（单位像素）
+        formHeader: false,
+      },
+    }
+  },
+  mounted() {
+    const formId = this.$route.query && this.$route.query.formId;
+    if (StrUtil.isNotBlank(formId)) {
+      getForm(formId).then(res => {
+        this.$nextTick(() => {
+          // 加载表单json数据
+          this.$refs.vfDesigner.setFormJson(JSON.parse(res.data.formContent))
+        })
+        this.form = res.data;
+      })
+    }else {
+      this.$nextTick(() => {
+        // 加载表单json数据
+        this.$refs.vfDesigner.setFormJson({"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","onFormCreated":"","onFormMounted":"","onFormDataChange":"","onFormValidate":""}})
+      })
+    }
+  },
+  methods:{
+    // 保存表单数据
+    saveFormJson() {
+      let formJson = this.$refs.vfDesigner.getFormJson()
+      this.form.formContent = JSON.stringify(formJson);
+      this.formOpen = true;
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.formId != null) {
+            updateForm(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.formOpen = false;
+            });
+          } else {
+            addForm(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.formOpen = false;
+            });
+          }
+          // 关闭当前标签页并返回上个页面
+          const obj = { path: "/flowable/form", query: { t: Date.now()} };
+          this.$tab.closeOpenPage(obj);
+        }
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.formOpen = false;
+      this.reset();
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+body {
+  margin: 0;  /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
+}
+.el-container.main-container{
+  background: #fff;
+  margin-left: 0 !important;
+}
+
+</style>

ruoyi-ui/src/views/flowable/task/form/index.vue

@@ -121,10 +121,14 @@
     </el-dialog>
 
     <!--表单配置详情-->
-    <el-dialog :title="formTitle" :visible.sync="formConfOpen" width="60%" append-to-body>
+<!--    <el-dialog :title="formTitle" :visible.sync="formConfOpen" width="60%" append-to-body>
       <div class="test-form">
         <parser :key="new Date().getTime()"  :form-conf="formConf" />
       </div>
+    </el-dialog>-->
+    <!--表单详情-->
+    <el-dialog :title="formTitle" :visible.sync="formRenderOpen" width="60%" append-to-body>
+      <v-form-render :form-data="formData" ref="vFormRef"/>
     </el-dialog>
   </div>
 </template>
@@ -159,7 +163,8 @@ export default {
       title: "",
       formConf: {}, // 默认表单数据
       formConfOpen: false,
-      formTitle: "",
+      formTitle: "",// 对话框标题，用于绑定到 el-dialog 的 :title
+      formRenderOpen: false,// 控制对话框的显示与隐藏，绑定到 el-dialog 的 :visible.sync
       // 是否显示弹出层
       open: false,
       // 查询参数
@@ -173,7 +178,8 @@ export default {
       form: {},
       // 表单校验
       rules: {
-      }
+      },
+      formData: {}// 表单数据，用于传递给 v-form-render 的 :form-data，存储表单的配置信息等
     };
   },
   created() {
@@ -225,17 +231,32 @@ export default {
       this.multiple = !selection.length
     },
     /** 表单配置信息 */
-    handleDetail(row){
+   /* handleDetail(row){
       this.formConfOpen = true;
       this.formTitle = "流程表单配置详细";
       this.formConf = JSON.parse(row.formContent)
+    },*/
+    /** 表单配置信息 */
+    handleDetail(row) {
+      this.formRenderOpen = true;
+      this.formTitle = "表单详情";
+
+      this.$nextTick(() => {
+        // 回显数据
+        this.$refs.vFormRef.setFormJson(JSON.parse(row.formContent))
+        this.$nextTick(() => {
+          // 表单禁用
+          this.$refs.vFormRef.disableForm();
+        })
+      })
     },
     /** 新增按钮操作 */
     handleAdd() {
       // this.reset();
       // this.open = true;
       // this.title = "添加流程表单";
-      this.$router.push({ path: '/tool/build/index', query: {formId: null }})
+      /*this.$router.push({ path: '/tool/build/index', query: {formId: null }})*/
+      this.$router.push({ path: '/flowable/task/flowForm/index'})
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
@@ -246,7 +267,8 @@ export default {
       //   this.open = true;
       //   this.title = "修改流程表单";
       // });
-      this.$router.push({ path: '/tool/build/index', query: {formId: row.formId }})
+      //this.$router.push({ path: '/tool/build/index', query: {formId: row.formId }})
+      this.$router.push({ path: '/flowable/task/flowForm/index', query: {formId: row.formId }})
     },
     /** 提交按钮 */
     submitForm() {

ruoyi-ui/src/views/flowable/task/myProcess/detail/index.vue

@@ -9,9 +9,10 @@
         <!--表单信息-->
         <el-tab-pane label="表单信息" name="1">
           <el-col :span="16" :offset="4">
-            <div class="test-form">
+<!--            <div class="test-form">
                 <parser :key="new Date().getTime()" :form-conf="variablesData" />
-            </div>
+            </div>-->
+            <v-form-render ref="vFormRef"/>
          </el-col>
         </el-tab-pane>
         <!--流程流转记录-->
@@ -63,6 +64,7 @@
         <!--流程图-->
         <el-tab-pane label="流程图" name="3">
           <flow :flowData="flowData"/>
+<!--          <bpmn-viewer :flowData="flowData" :procInsId="taskForm.procInsId"/>-->
         </el-tab-pane>
     </el-tabs>
     </el-card>
@@ -177,7 +179,19 @@ export default {
       if (taskId) {
         // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
         getProcessVariables(taskId).then(res => {
-          this.variablesData = res.data.variables;
+          /*this.variablesData = res.data.variables;*/
+          this.$nextTick(() => {
+            // 回显表单
+            this.$refs.vFormRef.setFormJson(res.data.formJson);
+            this.$nextTick(() => {
+              // 加载表单填写的数据
+              this.$refs.vFormRef.setFormData(res.data);
+              this.$nextTick(() => {
+                // 表单禁用
+                this.$refs.vFormRef.disableForm();
+              })
+            })
+          })
         });
       }
     },