BJ_ZTEITS-Developers / parking-cloud-yudao

Commit d1c95c4d8aeeb94d13bc65290ef7816d1e3e6fce

Authored by YunaiV
1 parent f45224f2

1. 清理旧版本的 form generator 

2. 接入表单详情
Inline Side-by-side
Showing 4 changed files with 65 additions and 193 deletions
yudao-admin-ui/src/utils/formGenerator.js 0 → 100644
  View file @d1c95c4
  1 +/**
  2 + * 将服务端返回的 fields 字符串数组，解析成 JSON 数组
  3 + *
  4 + * @param fields JSON 字符串数组
  5 + * @returns {*[]} JSON 数组
  6 + */
  7 +export function decodeFields(fields) {
  8 + const drawingList = []
  9 + fields.forEach(item => {
  10 + drawingList.push(JSON.parse(item))
  11 + })
  12 + return drawingList
  13 +}
... ...
yudao-admin-ui/src/views/bpm/form/formEditor.vue
  View file @d1c95c4
... ... @@ -169,6 +169,7 @@ import {
169 169 import loadBeautifier from '@/utils/loadBeautifier'
170 170 import {SysCommonStatusEnum} from "@/utils/constants";
171 171 import {createForm, getForm, updateForm} from "@/api/bpm/form";
  172 +import {decodeFields} from "@/utils/formGenerator";
172 173  
173 174 let beautifier
174 175 const emptyActiveData = { style: {}, autosize: {} }
... ... @@ -316,7 +317,7 @@ export default {
316 317 remark: data.remark
317 318 }
318 319 this.formConf = JSON.parse(data.conf)
319   - this.drawingList = this.decodeFields(data.fields)
  320 + this.drawingList = decodeFields(data.fields)
320 321 // 设置激活的表单项
321 322 this.activeData = this.drawingList[0]
322 323 this.activeId = this.activeData.__config__.formId
... ... @@ -428,7 +429,6 @@ export default {
428 429 }
429 430 const form = {
430 431 conf: JSON.stringify(this.formConf), // 表单配置
431   - // fields: JSON.stringify(this.drawingList), // 表单项的数组
432 432 fields: this.encodeFields(), // 表单项的数组
433 433 ...this.form // 表单名等
434 434 }
... ... @@ -459,13 +459,6 @@ export default {
459 459 })
460 460 return fields
461 461 },
462   - decodeFields(fields) {
463   - const drawingList = []
464   - fields.forEach(item => {
465   - drawingList.push(JSON.parse(item))
466   - })
467   - return drawingList
468   - },
469 462 generate(data) {
470 463 const func = this[`exec${titleCase(this.operationType)}`]
471 464 this.generateConf = data
... ...
yudao-admin-ui/src/views/bpm/form/index.vue
  View file @d1c95c4
... ... @@ -63,6 +63,7 @@
63 63 <script>
64 64 import {deleteForm, getForm, getFormPage} from "@/api/bpm/form";
65 65 import Parser from '@/components/parser/Parser'
  66 +import {decodeFields} from "@/utils/formGenerator";
66 67  
67 68 export default {
68 69 name: "Form",
... ... @@ -87,7 +88,9 @@ export default {
87 88 },
88 89 // 表单详情
89 90 detailOpen: false,
90   - detailForm: {}
  91 + detailForm: {
  92 + fields: []
  93 + }
91 94 };
92 95 },
93 96 created() {
... ... @@ -118,192 +121,16 @@ export default {
118 121 },
119 122 /** 详情按钮操作 */
120 123 handleDetail(row) {
121   - this.detailOpen = true
122 124 getForm(row.id).then(response => {
  125 + // 设置值
123 126 const data = response.data
124 127 this.detailForm = {
125 128 ...JSON.parse(data.conf),
126   - fields: this.decodeFields(data.fields)
  129 + fields: decodeFields(data.fields)
127 130 }
128   - // console.log({
129   - // ...JSON.parse(data.conf),
130   - // fields: this.decodeFields(data.fields)
131   - // })
132   - // this.detailForm = {
133   - // fields: [
134   - // {
135   - // __config__: {
136   - // label: '单行文本',
137   - // labelWidth: null,
138   - // showLabel: true,
139   - // changeTag: true,
140   - // tag: 'el-input',
141   - // tagIcon: 'input',
142   - // required: true,
143   - // layout: 'colFormItem',
144   - // span: 24,
145   - // document: 'https://element.eleme.cn/#/zh-CN/component/input',
146   - // regList: [
147   - // {
148   - // pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
149   - // message: '手机号格式错误'
150   - // }
151   - // ]
152   - // },
153   - // __slot__: {
154   - // prepend: '',
155   - // append: ''
156   - // },
157   - // __vModel__: 'mobile',
158   - // placeholder: '请输入手机号',
159   - // style: {
160   - // width: '100%'
161   - // },
162   - // clearable: true,
163   - // 'prefix-icon': 'el-icon-mobile',
164   - // 'suffix-icon': '',
165   - // maxlength: 11,
166   - // 'show-word-limit': true,
167   - // readonly: false,
168   - // disabled: false
169   - // },
170   - // {
171   - // __config__: {
172   - // label: '日期范围',
173   - // tag: 'el-date-picker',
174   - // tagIcon: 'date-range',
175   - // defaultValue: null,
176   - // span: 24,
177   - // showLabel: true,
178   - // labelWidth: null,
179   - // required: true,
180   - // layout: 'colFormItem',
181   - // regList: [],
182   - // changeTag: true,
183   - // document:
184   - // 'https://element.eleme.cn/#/zh-CN/component/date-picker',
185   - // formId: 101,
186   - // renderKey: 1585980082729
187   - // },
188   - // style: {
189   - // width: '100%'
190   - // },
191   - // type: 'daterange',
192   - // 'range-separator': '至',
193   - // 'start-placeholder': '开始日期',
194   - // 'end-placeholder': '结束日期',
195   - // disabled: false,
196   - // clearable: true,
197   - // format: 'yyyy-MM-dd',
198   - // 'value-format': 'yyyy-MM-dd',
199   - // readonly: false,
200   - // __vModel__: 'field101'
201   - // },
202   - // {
203   - // __config__: {
204   - // layout: 'rowFormItem',
205   - // tagIcon: 'row',
206   - // label: '行容器',
207   - // layoutTree: true,
208   - // children: [
209   - // {
210   - // __config__: {
211   - // label: '评分',
212   - // tag: 'el-rate',
213   - // tagIcon: 'rate',
214   - // defaultValue: 0,
215   - // span: 24,
216   - // showLabel: true,
217   - // labelWidth: null,
218   - // layout: 'colFormItem',
219   - // required: true,
220   - // regList: [],
221   - // changeTag: true,
222   - // document: 'https://element.eleme.cn/#/zh-CN/component/rate',
223   - // formId: 102,
224   - // renderKey: 1586839671259
225   - // },
226   - // style: {},
227   - // max: 5,
228   - // 'allow-half': false,
229   - // 'show-text': false,
230   - // 'show-score': false,
231   - // disabled: false,
232   - // __vModel__: 'field102'
233   - // }
234   - // ],
235   - // document: 'https://element.eleme.cn/#/zh-CN/component/layout',
236   - // formId: 101,
237   - // span: 24,
238   - // renderKey: 1586839668999,
239   - // componentName: 'row101',
240   - // gutter: 15
241   - // },
242   - // type: 'default',
243   - // justify: 'start',
244   - // align: 'top'
245   - // },
246   - // {
247   - // __config__: {
248   - // label: '按钮',
249   - // showLabel: true,
250   - // changeTag: true,
251   - // labelWidth: null,
252   - // tag: 'el-button',
253   - // tagIcon: 'button',
254   - // span: 24,
255   - // layout: 'colFormItem',
256   - // document: 'https://element.eleme.cn/#/zh-CN/component/button',
257   - // renderKey: 1594288459289
258   - // },
259   - // __slot__: {
260   - // default: '测试按钮1'
261   - // },
262   - // type: 'primary',
263   - // icon: 'el-icon-search',
264   - // round: false,
265   - // size: 'medium',
266   - // plain: false,
267   - // circle: false,
268   - // disabled: false,
269   - // on: {
270   - // click: 'clickTestButton1'
271   - // }
272   - // }
273   - // ],
274   - // __methods__: {
275   - // clickTestButton1() {
276   - // console.log(
277   - // `%c【测试按钮1】点击事件里可以访问当前表单：
278   - // 1) formModel='formData', 所以this.formData可以拿到当前表单的model
279   - // 2) formRef='elForm', 所以this.$refs.elForm可以拿到当前表单的ref(vue组件)
280   - // `,
281   - // 'color:#409EFF;font-size: 15px'
282   - // )
283   - // console.log('表单的Model：', this.formData)
284   - // console.log('表单的ref：', this.$refs.elForm)
285   - // }
286   - // },
287   - // formRef: 'elForm',
288   - // formModel: 'formData',
289   - // size: 'small',
290   - // labelPosition: 'right',
291   - // labelWidth: 100,
292   - // formRules: 'rules',
293   - // gutter: 15,
294   - // disabled: false,
295   - // span: 24,
296   - // formBtns: true,
297   - // unFocusedComponentBorder: false
298   - // }
299   - });
300   - },
301   - decodeFields(fields) {
302   - const drawingList = []
303   - fields.forEach(item => {
304   - drawingList.push(JSON.parse(item))
  131 + // 弹窗打开
  132 + this.detailOpen = true
305 133 })
306   - return drawingList
307 134 },
308 135 /** 新增按钮操作 */
309 136 handleAdd() {
... ...
yudao-admin-ui/src/views/bpm/model/index.vue
  View file @d1c95c4
... ... @@ -40,7 +40,14 @@
40 40 <span>{{ getDictDataLabel(DICT_TYPE.BPM_MODEL_CATEGORY, scope.row.category) }}</span>
41 41 </template>
42 42 </el-table-column>
43   - <el-table-column label="表单信息" align="center" prop="formId" /> <!-- TODO 芋艿：需要支持表单的点击 -->
  43 + <el-table-column label="表单信息" align="center" prop="formId">
  44 + <template slot-scope="scope">
  45 + <el-button v-if="scope.row.formId" type="text" @click="handleFormDetail(scope.row)">
  46 + <span>{{ scope.row.formName }}</span>
  47 + </el-button>
  48 + <label v-else>暂无表单</label>
  49 + </template>
  50 + </el-table-column>
44 51 <el-table-column label="流程版本" align="center" prop="processDefinition.version" />
45 52 <el-table-column label="创建时间" align="center" prop="createTime" width="180">
46 53 <template slot-scope="scope">
... ... @@ -65,6 +72,13 @@
65 72 <vue-bpmn v-if="showBpmnOpen" product="activiti" @processSave="processSave"
66 73 :bpmnXml="bpmnXML" :bpmnData="bpmnData" @beforeClose="cancel" />
67 74 </el-dialog>
  75 +
  76 + <!-- 流程表单配置详情 -->
  77 + <el-dialog title="表单详情" :visible.sync="detailOpen" width="50%" append-to-body>
  78 + <div class="test-form">
  79 + <parser :key="new Date().getTime()" :form-conf="detailForm" />
  80 + </div>
  81 + </el-dialog>
68 82 </div>
69 83 </template>
70 84  
... ... @@ -72,9 +86,16 @@
72 86 import {deleteModel, deployModel, createModel, updateModel, getModelPage, getModel} from "@/api/bpm/model";
73 87 import VueBpmn from "@/components/bpmn/VueBpmn";
74 88 import {DICT_TYPE, getDictDatas} from "@/utils/dict";
  89 +import {getForm} from "@/api/bpm/form";
  90 +import {decodeFields} from "@/utils/formGenerator";
  91 +import Parser from '@/components/parser/Parser'
75 92  
76 93 export default {
77 94 name: "model",
  95 + components: {
  96 + Parser,
  97 + VueBpmn
  98 + },
78 99 data() {
79 100 return {
80 101 // 遮罩层
... ... @@ -96,11 +117,16 @@ export default {
96 117 bpmnXML: null,
97 118 bpmnData: {},
98 119  
  120 + // 流程表单详情
  121 + detailOpen: false,
  122 + detailForm: {
  123 + fields: []
  124 + },
  125 +
99 126 // 数据字典
100 127 categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
101 128 };
102 129 },
103   - components: {VueBpmn},
104 130 created() {
105 131 this.getList();
106 132 },
... ... @@ -205,7 +231,20 @@ export default {
205 231 that.msgSuccess("部署成功");
206 232 })
207 233 })
208   - }
  234 + },
  235 + /** 流程表单的详情按钮操作 */
  236 + handleFormDetail(row) {
  237 + getForm(row.formId).then(response => {
  238 + // 设置值
  239 + const data = response.data
  240 + this.detailForm = {
  241 + ...JSON.parse(data.conf),
  242 + fields: decodeFields(data.fields)
  243 + }
  244 + // 弹窗打开
  245 + this.detailOpen = true
  246 + })
  247 + },
209 248 }
210 249 };
211 250 </script>
... ...