From d1c95c4d8aeeb94d13bc65290ef7816d1e3e6fce Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 2 Jan 2022 12:56:34 +0800
Subject: [PATCH] =?UTF-8?q?1.=20=E6=B8=85=E7=90=86=E6=97=A7=E7=89=88?=
 =?UTF-8?q?=E6=9C=AC=E7=9A=84=20form=20generator=202.=20=E6=8E=A5=E5=85=A5?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 yudao-admin-ui/src/utils/formGenerator.js     |  13 ++
 .../src/views/bpm/form/formEditor.vue         |  11 +-
 yudao-admin-ui/src/views/bpm/form/index.vue   | 189 +-----------------
 yudao-admin-ui/src/views/bpm/model/index.vue  |  45 ++++-
 4 files changed, 65 insertions(+), 193 deletions(-)
 create mode 100644 yudao-admin-ui/src/utils/formGenerator.js

diff --git a/yudao-admin-ui/src/utils/formGenerator.js b/yudao-admin-ui/src/utils/formGenerator.js
new file mode 100644
index 000000000..248e0b23e
--- /dev/null
+++ b/yudao-admin-ui/src/utils/formGenerator.js
@@ -0,0 +1,13 @@
+/**
+ * 将服务端返回的 fields 字符串数组，解析成 JSON 数组
+ *
+ * @param fields JSON 字符串数组
+ * @returns {*[]} JSON 数组
+ */
+export function decodeFields(fields) {
+  const drawingList = []
+  fields.forEach(item => {
+    drawingList.push(JSON.parse(item))
+  })
+  return drawingList
+}
diff --git a/yudao-admin-ui/src/views/bpm/form/formEditor.vue b/yudao-admin-ui/src/views/bpm/form/formEditor.vue
index d59d0069d..b04ef694e 100644
--- a/yudao-admin-ui/src/views/bpm/form/formEditor.vue
+++ b/yudao-admin-ui/src/views/bpm/form/formEditor.vue
@@ -169,6 +169,7 @@ import {
 import loadBeautifier from '@/utils/loadBeautifier'
 import {SysCommonStatusEnum} from "@/utils/constants";
 import {createForm, getForm, updateForm} from "@/api/bpm/form";
+import {decodeFields} from "@/utils/formGenerator";
 
 let beautifier
 const emptyActiveData = { style: {}, autosize: {} }
@@ -316,7 +317,7 @@ export default {
           remark: data.remark
         }
         this.formConf = JSON.parse(data.conf)
-        this.drawingList = this.decodeFields(data.fields)
+        this.drawingList = decodeFields(data.fields)
         // 设置激活的表单项
         this.activeData = this.drawingList[0]
         this.activeId = this.activeData.__config__.formId
@@ -428,7 +429,6 @@ export default {
         }
         const form = {
           conf: JSON.stringify(this.formConf), // 表单配置
-          // fields: JSON.stringify(this.drawingList), // 表单项的数组
           fields: this.encodeFields(), // 表单项的数组
           ...this.form // 表单名等
         }
@@ -459,13 +459,6 @@ export default {
       })
       return fields
     },
-    decodeFields(fields) {
-      const drawingList = []
-      fields.forEach(item => {
-        drawingList.push(JSON.parse(item))
-      })
-      return drawingList
-    },
     generate(data) {
       const func = this[`exec${titleCase(this.operationType)}`]
       this.generateConf = data
diff --git a/yudao-admin-ui/src/views/bpm/form/index.vue b/yudao-admin-ui/src/views/bpm/form/index.vue
index ba4a8ecce..15943b7ce 100644
--- a/yudao-admin-ui/src/views/bpm/form/index.vue
+++ b/yudao-admin-ui/src/views/bpm/form/index.vue
@@ -63,6 +63,7 @@
 <script>
 import {deleteForm, getForm, getFormPage} from "@/api/bpm/form";
 import Parser from '@/components/parser/Parser'
+import {decodeFields} from "@/utils/formGenerator";
 
 export default {
   name: "Form",
@@ -87,7 +88,9 @@ export default {
       },
       // 表单详情
       detailOpen: false,
-      detailForm: {}
+      detailForm: {
+        fields: []
+      }
     };
   },
   created() {
@@ -118,192 +121,16 @@ export default {
     },
     /** 详情按钮操作 */
     handleDetail(row) {
-      this.detailOpen = true
       getForm(row.id).then(response => {
+        // 设置值
         const data = response.data
         this.detailForm = {
           ...JSON.parse(data.conf),
-          fields: this.decodeFields(data.fields)
+          fields: decodeFields(data.fields)
         }
-        // console.log({
-        //   ...JSON.parse(data.conf),
-        //   fields: this.decodeFields(data.fields)
-        // })
-      //   this.detailForm = {
-      //     fields: [
-      //       {
-      //         __config__: {
-      //           label: '单行文本',
-      //           labelWidth: null,
-      //           showLabel: true,
-      //           changeTag: true,
-      //           tag: 'el-input',
-      //           tagIcon: 'input',
-      //           required: true,
-      //           layout: 'colFormItem',
-      //           span: 24,
-      //           document: 'https://element.eleme.cn/#/zh-CN/component/input',
-      //           regList: [
-      //             {
-      //               pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
-      //               message: '手机号格式错误'
-      //             }
-      //           ]
-      //         },
-      //         __slot__: {
-      //           prepend: '',
-      //           append: ''
-      //         },
-      //         __vModel__: 'mobile',
-      //         placeholder: '请输入手机号',
-      //         style: {
-      //           width: '100%'
-      //         },
-      //         clearable: true,
-      //         'prefix-icon': 'el-icon-mobile',
-      //         'suffix-icon': '',
-      //         maxlength: 11,
-      //         'show-word-limit': true,
-      //         readonly: false,
-      //         disabled: false
-      //       },
-      //       {
-      //         __config__: {
-      //           label: '日期范围',
-      //           tag: 'el-date-picker',
-      //           tagIcon: 'date-range',
-      //           defaultValue: null,
-      //           span: 24,
-      //           showLabel: true,
-      //           labelWidth: null,
-      //           required: true,
-      //           layout: 'colFormItem',
-      //           regList: [],
-      //           changeTag: true,
-      //           document:
-      //             'https://element.eleme.cn/#/zh-CN/component/date-picker',
-      //           formId: 101,
-      //           renderKey: 1585980082729
-      //         },
-      //         style: {
-      //           width: '100%'
-      //         },
-      //         type: 'daterange',
-      //         'range-separator': '至',
-      //         'start-placeholder': '开始日期',
-      //         'end-placeholder': '结束日期',
-      //         disabled: false,
-      //         clearable: true,
-      //         format: 'yyyy-MM-dd',
-      //         'value-format': 'yyyy-MM-dd',
-      //         readonly: false,
-      //         __vModel__: 'field101'
-      //       },
-      //       {
-      //         __config__: {
-      //           layout: 'rowFormItem',
-      //           tagIcon: 'row',
-      //           label: '行容器',
-      //           layoutTree: true,
-      //           children: [
-      //             {
-      //               __config__: {
-      //                 label: '评分',
-      //                 tag: 'el-rate',
-      //                 tagIcon: 'rate',
-      //                 defaultValue: 0,
-      //                 span: 24,
-      //                 showLabel: true,
-      //                 labelWidth: null,
-      //                 layout: 'colFormItem',
-      //                 required: true,
-      //                 regList: [],
-      //                 changeTag: true,
-      //                 document: 'https://element.eleme.cn/#/zh-CN/component/rate',
-      //                 formId: 102,
-      //                 renderKey: 1586839671259
-      //               },
-      //               style: {},
-      //               max: 5,
-      //               'allow-half': false,
-      //               'show-text': false,
-      //               'show-score': false,
-      //               disabled: false,
-      //               __vModel__: 'field102'
-      //             }
-      //           ],
-      //           document: 'https://element.eleme.cn/#/zh-CN/component/layout',
-      //           formId: 101,
-      //           span: 24,
-      //           renderKey: 1586839668999,
-      //           componentName: 'row101',
-      //           gutter: 15
-      //         },
-      //         type: 'default',
-      //         justify: 'start',
-      //         align: 'top'
-      //       },
-      //       {
-      //         __config__: {
-      //           label: '按钮',
-      //           showLabel: true,
-      //           changeTag: true,
-      //           labelWidth: null,
-      //           tag: 'el-button',
-      //           tagIcon: 'button',
-      //           span: 24,
-      //           layout: 'colFormItem',
-      //           document: 'https://element.eleme.cn/#/zh-CN/component/button',
-      //           renderKey: 1594288459289
-      //         },
-      //         __slot__: {
-      //           default: '测试按钮1'
-      //         },
-      //         type: 'primary',
-      //         icon: 'el-icon-search',
-      //         round: false,
-      //         size: 'medium',
-      //         plain: false,
-      //         circle: false,
-      //         disabled: false,
-      //         on: {
-      //           click: 'clickTestButton1'
-      //         }
-      //       }
-      //     ],
-      //     __methods__: {
-      //       clickTestButton1() {
-      //         console.log(
-      //           `%c【测试按钮1】点击事件里可以访问当前表单：
-      //           1) formModel='formData', 所以this.formData可以拿到当前表单的model
-      //           2) formRef='elForm', 所以this.$refs.elForm可以拿到当前表单的ref(vue组件)
-      //         `,
-      //           'color:#409EFF;font-size: 15px'
-      //         )
-      //         console.log('表单的Model：', this.formData)
-      //         console.log('表单的ref：', this.$refs.elForm)
-      //       }
-      //     },
-      //     formRef: 'elForm',
-      //     formModel: 'formData',
-      //     size: 'small',
-      //     labelPosition: 'right',
-      //     labelWidth: 100,
-      //     formRules: 'rules',
-      //     gutter: 15,
-      //     disabled: false,
-      //     span: 24,
-      //     formBtns: true,
-      //     unFocusedComponentBorder: false
-      //   }
-      });
-    },
-    decodeFields(fields) {
-      const drawingList = []
-      fields.forEach(item => {
-        drawingList.push(JSON.parse(item))
+        // 弹窗打开
+        this.detailOpen = true
       })
-      return drawingList
     },
     /** 新增按钮操作 */
     handleAdd() {
diff --git a/yudao-admin-ui/src/views/bpm/model/index.vue b/yudao-admin-ui/src/views/bpm/model/index.vue
index 55de377de..fe9ed046f 100644
--- a/yudao-admin-ui/src/views/bpm/model/index.vue
+++ b/yudao-admin-ui/src/views/bpm/model/index.vue
@@ -40,7 +40,14 @@
           <span>{{ getDictDataLabel(DICT_TYPE.BPM_MODEL_CATEGORY, scope.row.category) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="表单信息" align="center" prop="formId" /> <!-- TODO 芋艿：需要支持表单的点击 -->
+      <el-table-column label="表单信息" align="center" prop="formId">
+        <template slot-scope="scope">
+          <el-button v-if="scope.row.formId" type="text" @click="handleFormDetail(scope.row)">
+            <span>{{ scope.row.formName }}</span>
+          </el-button>
+          <label v-else>暂无表单</label>
+        </template>
+      </el-table-column>
       <el-table-column label="流程版本" align="center" prop="processDefinition.version" />
       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
         <template slot-scope="scope">
@@ -65,6 +72,13 @@
       <vue-bpmn v-if="showBpmnOpen" product="activiti" @processSave="processSave"
                 :bpmnXml="bpmnXML" :bpmnData="bpmnData" @beforeClose="cancel" />
     </el-dialog>
+
+    <!-- 流程表单配置详情 -->
+    <el-dialog title="表单详情" :visible.sync="detailOpen" width="50%" append-to-body>
+      <div class="test-form">
+        <parser :key="new Date().getTime()" :form-conf="detailForm" />
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -72,9 +86,16 @@
 import {deleteModel, deployModel, createModel, updateModel, getModelPage, getModel} from "@/api/bpm/model";
 import VueBpmn from "@/components/bpmn/VueBpmn";
 import {DICT_TYPE, getDictDatas} from "@/utils/dict";
+import {getForm} from "@/api/bpm/form";
+import {decodeFields} from "@/utils/formGenerator";
+import Parser from '@/components/parser/Parser'
 
 export default {
   name: "model",
+  components: {
+    Parser,
+    VueBpmn
+  },
   data() {
     return {
       // 遮罩层
@@ -96,11 +117,16 @@ export default {
       bpmnXML: null,
       bpmnData: {},
 
+      // 流程表单详情
+      detailOpen: false,
+      detailForm: {
+        fields: []
+      },
+
       // 数据字典
       categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
     };
   },
-  components: {VueBpmn},
   created() {
     this.getList();
   },
@@ -205,7 +231,20 @@ export default {
           that.msgSuccess("部署成功");
         })
       })
-    }
+    },
+    /** 流程表单的详情按钮操作 */
+    handleFormDetail(row) {
+      getForm(row.formId).then(response => {
+        // 设置值
+        const data = response.data
+        this.detailForm = {
+          ...JSON.parse(data.conf),
+          fields: decodeFields(data.fields)
+        }
+        // 弹窗打开
+        this.detailOpen = true
+      })
+    },
   }
 };
 </script>