houzhongjian
2024-07-11 759b1c71011abd6b58c37d2566f3f3c208c2f1b2
提交 | 用户 | 时间
759b1c 1 // 表单属性【右面板】
H 2 export const formConf = {
3   formRef: 'elForm',
4   formModel: 'formData',
5   size: 'medium',
6   labelPosition: 'right',
7   labelWidth: 100,
8   formRules: 'rules',
9   gutter: 15,
10   disabled: false,
11   span: 24,
12   formBtns: true
13 }
14
15 // 输入型组件 【左面板】
16 export const inputComponents = [
17   {
18     // 组件的自定义配置
19     __config__: {
20       label: '单行文本',
21       labelWidth: null,
22       showLabel: true,
23       changeTag: true,
24       tag: 'el-input',
25       tagIcon: 'input',
26       defaultValue: undefined,
27       required: true,
28       layout: 'colFormItem',
29       span: 24,
30       document: 'https://element.eleme.cn/#/zh-CN/component/input',
31       // 正则校验规则
32       regList: []
33     },
34     // 组件的插槽属性
35     __slot__: {
36       prepend: '',
37       append: ''
38     },
39     // 其余的为可直接写在组件标签上的属性
40     placeholder: '请输入',
41     style: { width: '100%' },
42     clearable: true,
43     'prefix-icon': '',
44     'suffix-icon': '',
45     maxlength: null,
46     'show-word-limit': false,
47     readonly: false,
48     disabled: false
49   },
50   {
51     __config__: {
52       label: '多行文本',
53       labelWidth: null,
54       showLabel: true,
55       tag: 'el-input',
56       tagIcon: 'textarea',
57       defaultValue: undefined,
58       required: true,
59       layout: 'colFormItem',
60       span: 24,
61       regList: [],
62       changeTag: true,
63       document: 'https://element.eleme.cn/#/zh-CN/component/input'
64     },
65     type: 'textarea',
66     placeholder: '请输入',
67     autosize: {
68       minRows: 4,
69       maxRows: 4
70     },
71     style: { width: '100%' },
72     maxlength: null,
73     'show-word-limit': false,
74     readonly: false,
75     disabled: false
76   },
77   {
78     __config__: {
79       label: '密码',
80       showLabel: true,
81       labelWidth: null,
82       changeTag: true,
83       tag: 'el-input',
84       tagIcon: 'password',
85       defaultValue: undefined,
86       layout: 'colFormItem',
87       span: 24,
88       required: true,
89       regList: [],
90       document: 'https://element.eleme.cn/#/zh-CN/component/input'
91     },
92     __slot__: {
93       prepend: '',
94       append: ''
95     },
96     placeholder: '请输入',
97     'show-password': true,
98     style: { width: '100%' },
99     clearable: true,
100     'prefix-icon': '',
101     'suffix-icon': '',
102     maxlength: null,
103     'show-word-limit': false,
104     readonly: false,
105     disabled: false
106   },
107   {
108     __config__: {
109       label: '计数器',
110       showLabel: true,
111       changeTag: true,
112       labelWidth: null,
113       tag: 'el-input-number',
114       tagIcon: 'number',
115       defaultValue: undefined,
116       span: 24,
117       layout: 'colFormItem',
118       required: true,
119       regList: [],
120       document: 'https://element.eleme.cn/#/zh-CN/component/input-number'
121     },
122     placeholder: '',
123     min: undefined,
124     max: undefined,
125     step: 1,
126     'step-strictly': false,
127     precision: undefined,
128     'controls-position': '',
129     disabled: false
130   },
131   {
132     __config__: {
133       label: '编辑器',
134       showLabel: true,
135       changeTag: true,
136       labelWidth: null,
137       tag: 'tinymce',
138       tagIcon: 'rich-text',
139       defaultValue: null,
140       span: 24,
141       layout: 'colFormItem',
142       required: true,
143       regList: [],
144       document: 'http://tinymce.ax-z.cn'
145     },
146     placeholder: '请输入',
147     height: 300, // 编辑器高度
148     branding: false // 隐藏右下角品牌烙印
149   }
150 ]
151
152 // 选择型组件 【左面板】
153 export const selectComponents = [
154   {
155     __config__: {
156       label: '下拉选择',
157       showLabel: true,
158       labelWidth: null,
159       tag: 'el-select',
160       tagIcon: 'select',
161       layout: 'colFormItem',
162       span: 24,
163       required: true,
164       regList: [],
165       changeTag: true,
166       document: 'https://element.eleme.cn/#/zh-CN/component/select'
167     },
168     __slot__: {
169       options: [{
170         label: '选项一',
171         value: 1
172       }, {
173         label: '选项二',
174         value: 2
175       }]
176     },
177     placeholder: '请选择',
178     style: { width: '100%' },
179     clearable: true,
180     disabled: false,
181     filterable: false,
182     multiple: false
183   },
184   {
185     __config__: {
186       label: '级联选择',
187       url: 'https://www.fastmock.site/mock/f8d7a54fb1e60561e2f720d5a810009d/fg/cascaderList',
188       method: 'get',
189       dataPath: 'list',
190       dataConsumer: 'options',
191       showLabel: true,
192       labelWidth: null,
193       tag: 'el-cascader',
194       tagIcon: 'cascader',
195       layout: 'colFormItem',
196       defaultValue: [],
197       dataType: 'dynamic',
198       span: 24,
199       required: true,
200       regList: [],
201       changeTag: true,
202       document: 'https://element.eleme.cn/#/zh-CN/component/cascader'
203     },
204     options: [{
205       id: 1,
206       value: 1,
207       label: '选项1',
208       children: [{
209         id: 2,
210         value: 2,
211         label: '选项1-1'
212       }]
213     }],
214     placeholder: '请选择',
215     style: { width: '100%' },
216     props: {
217       props: {
218         multiple: false,
219         label: 'label',
220         value: 'value',
221         children: 'children'
222       }
223     },
224     'show-all-levels': true,
225     disabled: false,
226     clearable: true,
227     filterable: false,
228     separator: '/'
229   },
230   {
231     __config__: {
232       label: '单选框组',
233       labelWidth: null,
234       showLabel: true,
235       tag: 'el-radio-group',
236       tagIcon: 'radio',
237       changeTag: true,
238       defaultValue: undefined,
239       layout: 'colFormItem',
240       span: 24,
241       optionType: 'default',
242       regList: [],
243       required: true,
244       border: false,
245       document: 'https://element.eleme.cn/#/zh-CN/component/radio'
246     },
247     __slot__: {
248       options: [{
249         label: '选项一',
250         value: 1
251       }, {
252         label: '选项二',
253         value: 2
254       }]
255     },
256     style: {},
257     size: 'medium',
258     disabled: false
259   },
260   {
261     __config__: {
262       label: '多选框组',
263       tag: 'el-checkbox-group',
264       tagIcon: 'checkbox',
265       defaultValue: [],
266       span: 24,
267       showLabel: true,
268       labelWidth: null,
269       layout: 'colFormItem',
270       optionType: 'default',
271       required: true,
272       regList: [],
273       changeTag: true,
274       border: false,
275       document: 'https://element.eleme.cn/#/zh-CN/component/checkbox'
276     },
277     __slot__: {
278       options: [{
279         label: '选项一',
280         value: 1
281       }, {
282         label: '选项二',
283         value: 2
284       }]
285     },
286     style: {},
287     size: 'medium',
288     min: null,
289     max: null,
290     disabled: false
291   },
292   {
293     __config__: {
294       label: '开关',
295       tag: 'el-switch',
296       tagIcon: 'switch',
297       defaultValue: false,
298       span: 24,
299       showLabel: true,
300       labelWidth: null,
301       layout: 'colFormItem',
302       required: true,
303       regList: [],
304       changeTag: true,
305       document: 'https://element.eleme.cn/#/zh-CN/component/switch'
306     },
307     style: {},
308     disabled: false,
309     'active-text': '',
310     'inactive-text': '',
311     'active-color': null,
312     'inactive-color': null,
313     'active-value': true,
314     'inactive-value': false
315   },
316   {
317     __config__: {
318       label: '滑块',
319       tag: 'el-slider',
320       tagIcon: 'slider',
321       defaultValue: null,
322       span: 24,
323       showLabel: true,
324       layout: 'colFormItem',
325       labelWidth: null,
326       required: true,
327       regList: [],
328       changeTag: true,
329       document: 'https://element.eleme.cn/#/zh-CN/component/slider'
330     },
331     disabled: false,
332     min: 0,
333     max: 100,
334     step: 1,
335     'show-stops': false,
336     range: false
337   },
338   {
339     __config__: {
340       label: '时间选择',
341       tag: 'el-time-picker',
342       tagIcon: 'time',
343       defaultValue: null,
344       span: 24,
345       showLabel: true,
346       layout: 'colFormItem',
347       labelWidth: null,
348       required: true,
349       regList: [],
350       changeTag: true,
351       document: 'https://element.eleme.cn/#/zh-CN/component/time-picker'
352     },
353     placeholder: '请选择',
354     style: { width: '100%' },
355     disabled: false,
356     clearable: true,
357     'picker-options': {
358       selectableRange: '00:00:00-23:59:59'
359     },
360     format: 'HH:mm:ss',
361     'value-format': 'HH:mm:ss'
362   },
363   {
364     __config__: {
365       label: '时间范围',
366       tag: 'el-time-picker',
367       tagIcon: 'time-range',
368       span: 24,
369       showLabel: true,
370       labelWidth: null,
371       layout: 'colFormItem',
372       defaultValue: null,
373       required: true,
374       regList: [],
375       changeTag: true,
376       document: 'https://element.eleme.cn/#/zh-CN/component/time-picker'
377     },
378     style: { width: '100%' },
379     disabled: false,
380     clearable: true,
381     'is-range': true,
382     'range-separator': '至',
383     'start-placeholder': '开始时间',
384     'end-placeholder': '结束时间',
385     format: 'HH:mm:ss',
386     'value-format': 'HH:mm:ss'
387   },
388   {
389     __config__: {
390       label: '日期选择',
391       tag: 'el-date-picker',
392       tagIcon: 'date',
393       defaultValue: null,
394       showLabel: true,
395       labelWidth: null,
396       span: 24,
397       layout: 'colFormItem',
398       required: true,
399       regList: [],
400       changeTag: true,
401       document: 'https://element.eleme.cn/#/zh-CN/component/date-picker'
402     },
403     placeholder: '请选择',
404     type: 'date',
405     style: { width: '100%' },
406     disabled: false,
407     clearable: true,
408     format: 'yyyy-MM-dd',
409     'value-format': 'yyyy-MM-dd',
410     readonly: false
411   },
412   {
413     __config__: {
414       label: '日期范围',
415       tag: 'el-date-picker',
416       tagIcon: 'date-range',
417       defaultValue: null,
418       span: 24,
419       showLabel: true,
420       labelWidth: null,
421       required: true,
422       layout: 'colFormItem',
423       regList: [],
424       changeTag: true,
425       document: 'https://element.eleme.cn/#/zh-CN/component/date-picker'
426     },
427     style: { width: '100%' },
428     type: 'daterange',
429     'range-separator': '至',
430     'start-placeholder': '开始日期',
431     'end-placeholder': '结束日期',
432     disabled: false,
433     clearable: true,
434     format: 'yyyy-MM-dd',
435     'value-format': 'yyyy-MM-dd',
436     readonly: false
437   },
438   {
439     __config__: {
440       label: '评分',
441       tag: 'el-rate',
442       tagIcon: 'rate',
443       defaultValue: 0,
444       span: 24,
445       showLabel: true,
446       labelWidth: null,
447       layout: 'colFormItem',
448       required: true,
449       regList: [],
450       changeTag: true,
451       document: 'https://element.eleme.cn/#/zh-CN/component/rate'
452     },
453     style: {},
454     max: 5,
455     'allow-half': false,
456     'show-text': false,
457     'show-score': false,
458     disabled: false
459   },
460   {
461     __config__: {
462       label: '颜色选择',
463       tag: 'el-color-picker',
464       tagIcon: 'color',
465       span: 24,
466       defaultValue: null,
467       showLabel: true,
468       labelWidth: null,
469       layout: 'colFormItem',
470       required: true,
471       regList: [],
472       changeTag: true,
473       document: 'https://element.eleme.cn/#/zh-CN/component/color-picker'
474     },
475     'show-alpha': false,
476     'color-format': '',
477     disabled: false,
478     size: 'medium'
479   },
480   {
481     __config__: {
482       label: '上传',
483       tag: 'el-upload',
484       tagIcon: 'upload',
485       layout: 'colFormItem',
486       defaultValue: null,
487       showLabel: true,
488       labelWidth: null,
489       required: true,
490       span: 24,
491       showTip: false,
492       buttonText: '点击上传',
493       regList: [],
494       changeTag: true,
495       fileSize: 2,
496       sizeUnit: 'MB',
497       document: 'https://element.eleme.cn/#/zh-CN/component/upload'
498     },
499     __slot__: {
500       'list-type': true
501     },
502     // action: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址
503     action: '/infra/file/upload', // 请求地址
504     disabled: false,
505     accept: '',
506     name: 'file',
507     'auto-upload': true,
508     'list-type': 'text',
509     multiple: false
510   }
511 ]
512
513 // 布局型组件 【左面板】
514 export const layoutComponents = [
515   {
516     __config__: {
517       layout: 'rowFormItem',
518       tagIcon: 'row',
519       label: '行容器',
520       layoutTree: true,
521       document: 'https://element.eleme.cn/#/zh-CN/component/layout#row-attributes'
522     },
523     type: 'default',
524     justify: 'start',
525     align: 'top'
526   },
527   {
528     __config__: {
529       label: '按钮',
530       showLabel: true,
531       changeTag: true,
532       labelWidth: null,
533       tag: 'el-button',
534       tagIcon: 'button',
535       span: 24,
536       layout: 'colFormItem',
537       document: 'https://element.eleme.cn/#/zh-CN/component/button'
538     },
539     __slot__: {
540       default: '主要按钮'
541     },
542     type: 'primary',
543     icon: 'el-icon-search',
544     round: false,
545     size: 'medium',
546     plain: false,
547     circle: false,
548     disabled: false
549   },
550   {
551     __config__: {
552       layout: 'colFormItem',
553       tagIcon: 'table',
554       tag: 'el-table',
555       document: 'https://element.eleme.cn/#/zh-CN/component/table',
556       span: 24,
557       formId: 101,
558       renderKey: 1595761764203,
559       componentName: 'row101',
560       showLabel: true,
561       changeTag: true,
562       labelWidth: null,
563       label: '表格[开发中]',
564       dataType: 'dynamic',
565       method: 'get',
566       dataPath: 'list',
567       dataConsumer: 'data',
568       url: 'https://www.fastmock.site/mock/f8d7a54fb1e60561e2f720d5a810009d/fg/tableData',
569       children: [{
570         __config__: {
571           layout: 'raw',
572           tag: 'el-table-column',
573           renderKey: 15957617660153
574         },
575         prop: 'date',
576         label: '日期'
577       }, {
578         __config__: {
579           layout: 'raw',
580           tag: 'el-table-column',
581           renderKey: 15957617660152
582         },
583         prop: 'address',
584         label: '地址'
585       }, {
586         __config__: {
587           layout: 'raw',
588           tag: 'el-table-column',
589           renderKey: 15957617660151
590         },
591         prop: 'name',
592         label: '名称'
593       }, {
594         __config__: {
595           layout: 'raw',
596           tag: 'el-table-column',
597           renderKey: 1595774496335,
598           children: [
599             {
600               __config__: {
601                 label: '按钮',
602                 tag: 'el-button',
603                 tagIcon: 'button',
604                 layout: 'raw',
605                 renderKey: 1595779809901
606               },
607               __slot__: {
608                 default: '主要按钮'
609               },
610               type: 'primary',
611               icon: 'el-icon-search',
612               round: false,
613               size: 'medium'
614             }
615           ]
616         },
617         label: '操作'
618       }]
619     },
620     data: [],
621     directives: [{
622       name: 'loading',
623       value: true
624     }],
625     border: true,
626     type: 'default',
627     justify: 'start',
628     align: 'top'
629   }
630 ]