tianheng-ui 0.0.43 → 0.0.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/lib/03250ed25fc1b305e9980cf7cf0dfb09.js +1 -0
  2. package/lib/c755e7fc08446566ee8dd3a8aa8fe43f.js +1715 -0
  3. package/lib/index.js +1 -1
  4. package/lib/tianheng-ui.js +26 -16
  5. package/lib/tianheng-ui.js.map +1 -1
  6. package/package.json +65 -58
  7. package/packages/formMaking/Container.vue +22 -9
  8. package/packages/formMaking/FormConfig.vue +12 -3
  9. package/packages/formMaking/GenerateFormItem.vue +516 -266
  10. package/packages/formMaking/WidgetConfig.vue +1361 -760
  11. package/packages/formMaking/WidgetForm.vue +167 -116
  12. package/packages/formMaking/WidgetFormItem.vue +466 -284
  13. package/packages/formMaking/componentsConfig.js +402 -332
package/packages/formMaking/WidgetConfig.vue CHANGED
@@ -1,760 +1,1361 @@
1
- <template>
2
- <div v-if="show">
3
- <el-form label-position="top">
4
- <el-form-item label="字段标识" v-if="data.type != 'grid'">
5
- <el-input v-model="data.model"></el-input>
6
- </el-form-item>
7
- <el-form-item label="标题" v-if="data.type != 'grid'">
8
- <el-input v-model="data.name"></el-input>
9
- </el-form-item>
10
- <el-form-item
11
- label="宽度"
12
- v-if="Object.keys(data.options).indexOf('width') >= 0"
13
- >
14
- <el-input v-model="data.options.width"></el-input>
15
- </el-form-item>
16
-
17
- <el-form-item
18
- label="高度"
19
- v-if="Object.keys(data.options).indexOf('height') >= 0"
20
- >
21
- <el-input v-model="data.options.height"></el-input>
22
- </el-form-item>
23
-
24
- <el-form-item
25
- label="大小"
26
- v-if="Object.keys(data.options).indexOf('size') >= 0"
27
- >
28
- 宽度
29
- <el-input
30
- style="width: 90px;"
31
- type="number"
32
- v-model.number="data.options.size.width"
33
- ></el-input>
34
- 高度
35
- <el-input
36
- style="width: 90px;"
37
- type="number"
38
- v-model.number="data.options.size.height"
39
- ></el-input>
40
- </el-form-item>
41
-
42
- <el-form-item
43
- label="占位内容"
44
- v-if="
45
- Object.keys(data.options).indexOf('placeholder') >= 0 &&
46
- (data.type != 'time' || data.type != 'date')
47
- "
48
- >
49
- <el-input v-model="data.options.placeholder"></el-input>
50
- </el-form-item>
51
- <el-form-item
52
- label="布局方式"
53
- v-if="Object.keys(data.options).indexOf('inline') >= 0"
54
- >
55
- <el-radio-group v-model="data.options.inline">
56
- <el-radio-button :label="false">块级</el-radio-button>
57
- <el-radio-button :label="true">inline</el-radio-button>
58
- </el-radio-group>
59
- </el-form-item>
60
- <el-form-item
61
- label="显示输入框"
62
- v-if="Object.keys(data.options).indexOf('showInput') >= 0"
63
- >
64
- <el-switch v-model="data.options.showInput"></el-switch>
65
- </el-form-item>
66
- <el-form-item
67
- label="最小值"
68
- v-if="Object.keys(data.options).indexOf('min') >= 0"
69
- >
70
- <el-input-number
71
- v-model="data.options.min"
72
- :min="0"
73
- :max="100"
74
- :step="1"
75
- ></el-input-number>
76
- </el-form-item>
77
- <el-form-item
78
- label="最大值"
79
- v-if="Object.keys(data.options).indexOf('max') >= 0"
80
- >
81
- <el-input-number
82
- v-model="data.options.max"
83
- :min="0"
84
- :max="100"
85
- :step="1"
86
- ></el-input-number>
87
- </el-form-item>
88
- <el-form-item
89
- label="步长"
90
- v-if="Object.keys(data.options).indexOf('step') >= 0"
91
- >
92
- <el-input-number
93
- v-model="data.options.step"
94
- :min="0"
95
- :max="100"
96
- :step="1"
97
- ></el-input-number>
98
- </el-form-item>
99
- <el-form-item
100
- label="是否多选"
101
- v-if="data.type == 'select' || data.type == 'imgupload'"
102
- >
103
- <el-switch
104
- v-model="data.options.multiple"
105
- @change="handleSelectMuliple"
106
- ></el-switch>
107
- </el-form-item>
108
- <el-form-item label="是否可搜索" v-if="data.type == 'select'">
109
- <el-switch v-model="data.options.filterable"></el-switch>
110
- </el-form-item>
111
- <el-form-item
112
- label="允许半选"
113
- v-if="Object.keys(data.options).indexOf('allowHalf') >= 0"
114
- >
115
- <el-switch v-model="data.options.allowHalf"> </el-switch>
116
- </el-form-item>
117
- <el-form-item
118
- label="支持透明度选择"
119
- v-if="Object.keys(data.options).indexOf('showAlpha') >= 0"
120
- >
121
- <el-switch v-model="data.options.showAlpha"> </el-switch>
122
- </el-form-item>
123
- <el-form-item
124
- label="是否显示标签"
125
- v-if="Object.keys(data.options).indexOf('showLabel') >= 0"
126
- >
127
- <el-switch v-model="data.options.showLabel"> </el-switch>
128
- </el-form-item>
129
- <el-form-item
130
- label="选项"
131
- v-if="Object.keys(data.options).indexOf('options') >= 0"
132
- >
133
- <el-radio-group
134
- v-model="data.options.remote"
135
- size="mini"
136
- style="margin-bottom:10px;"
137
- >
138
- <el-radio-button :label="false">静态数据</el-radio-button>
139
- <el-radio-button :label="true">远端数据</el-radio-button>
140
- </el-radio-group>
141
- <template v-if="data.options.remote">
142
- <div>
143
- <el-input size="mini" style="" v-model="data.options.remoteFunc">
144
- <template slot="prepend">远端方法</template>
145
- </el-input>
146
- <el-input size="mini" style="" v-model="data.options.props.value">
147
- <template slot="prepend">值</template>
148
- </el-input>
149
- <el-input size="mini" style="" v-model="data.options.props.label">
150
- <template slot="prepend">标签</template>
151
- </el-input>
152
- </div>
153
- </template>
154
- <template v-else>
155
- <template
156
- v-if="
157
- data.type == 'radio' ||
158
- (data.type == 'select' && !data.options.multiple)
159
- "
160
- >
161
- <el-radio-group v-model="data.options.defaultValue">
162
- <draggable
163
- tag="ul"
164
- :list="data.options.options"
165
- v-bind="{
166
- group: { name: 'options' },
167
- ghostClass: 'ghost',
168
- handle: '.drag-item'
169
- }"
170
- handle=".drag-item"
171
- >
172
- <li v-for="(item, index) in data.options.options" :key="index">
173
- <el-radio :label="item.value" style="margin-right: 5px;">
174
- <el-input
175
- :style="{
176
- width: data.options.showLabel ? '90px' : '180px'
177
- }"
178
- size="mini"
179
- v-model="item.value"
180
- ></el-input>
181
- <el-input
182
- style="width:90px;"
183
- size="mini"
184
- v-if="data.options.showLabel"
185
- v-model="item.label"
186
- ></el-input>
187
- <!-- <input v-model="item.value"/> -->
188
- </el-radio>
189
- <i
190
- class="drag-item"
191
- style="font-size: 16px;margin: 0 5px;cursor: move;"
192
- ><i class="iconfont icon-icon_bars"></i
193
- ></i>
194
- <el-button
195
- @click="handleOptionsRemove(index)"
196
- circle
197
- plain
198
- type="danger"
199
- size="mini"
200
- icon="el-icon-minus"
201
- style="padding: 4px;margin-left: 5px;"
202
- ></el-button>
203
- </li>
204
- </draggable>
205
- </el-radio-group>
206
- </template>
207
-
208
- <template
209
- v-if="
210
- data.type == 'checkbox' ||
211
- (data.type == 'select' && data.options.multiple)
212
- "
213
- >
214
- <el-checkbox-group v-model="data.options.defaultValue">
215
- <draggable
216
- tag="ul"
217
- :list="data.options.options"
218
- v-bind="{
219
- group: { name: 'options' },
220
- ghostClass: 'ghost',
221
- handle: '.drag-item'
222
- }"
223
- handle=".drag-item"
224
- >
225
- <li v-for="(item, index) in data.options.options" :key="index">
226
- <el-checkbox :label="item.value" style="margin-right: 5px;">
227
- <el-input
228
- :style="{
229
- width: data.options.showLabel ? '90px' : '180px'
230
- }"
231
- size="mini"
232
- v-model="item.value"
233
- ></el-input>
234
- <el-input
235
- style="width:90px;"
236
- size="mini"
237
- v-if="data.options.showLabel"
238
- v-model="item.label"
239
- ></el-input>
240
- </el-checkbox>
241
- <i
242
- class="drag-item"
243
- style="font-size: 16px;margin: 0 5px;cursor: move;"
244
- ><i class="iconfont icon-icon_bars"></i
245
- ></i>
246
- <el-button
247
- @click="handleOptionsRemove(index)"
248
- circle
249
- plain
250
- type="danger"
251
- size="mini"
252
- icon="el-icon-minus"
253
- style="padding: 4px;margin-left: 5px;"
254
- ></el-button>
255
- </li>
256
- </draggable>
257
- </el-checkbox-group>
258
- </template>
259
- <div style="margin-left: 22px;">
260
- <el-button type="text" @click="handleAddOption">添加选项</el-button>
261
- </div>
262
- </template>
263
- </el-form-item>
264
-
265
- <el-form-item label="远端数据" v-if="data.type == 'cascader'">
266
- <div>
267
- <el-input size="mini" style="" v-model="data.options.remoteFunc">
268
- <template slot="prepend">远端方法</template>
269
- </el-input>
270
- <el-input size="mini" style="" v-model="data.options.props.value">
271
- <template slot="prepend">值</template>
272
- </el-input>
273
- <el-input size="mini" style="" v-model="data.options.props.label">
274
- <template slot="prepend">标签</template>
275
- </el-input>
276
- <el-input size="mini" style="" v-model="data.options.props.children">
277
- <template slot="prepend">子选项</template>
278
- </el-input>
279
- </div>
280
- </el-form-item>
281
-
282
- <el-form-item
283
- label="默认值"
284
- v-if="
285
- Object.keys(data.options).indexOf('defaultValue') >= 0 &&
286
- (data.type == 'textarea' ||
287
- data.type == 'input' ||
288
- data.type == 'rate' ||
289
- data.type == 'color' ||
290
- data.type == 'switch' ||
291
- data.type == 'text')
292
- "
293
- >
294
- <el-input
295
- v-if="data.type == 'textarea'"
296
- type="textarea"
297
- :rows="5"
298
- v-model="data.options.defaultValue"
299
- ></el-input>
300
- <el-input
301
- v-if="data.type == 'input'"
302
- v-model="data.options.defaultValue"
303
- ></el-input>
304
- <el-rate
305
- v-if="data.type == 'rate'"
306
- style="display:inline-block;vertical-align: middle;"
307
- :max="data.options.max"
308
- :allow-half="data.options.allowHalf"
309
- v-model="data.options.defaultValue"
310
- ></el-rate>
311
- <el-button
312
- type="text"
313
- v-if="data.type == 'rate'"
314
- style="display:inline-block;vertical-align: middle;margin-left: 10px;"
315
- @click="data.options.defaultValue = 0"
316
- >清空</el-button
317
- >
318
- <el-color-picker
319
- v-if="data.type == 'color'"
320
- v-model="data.options.defaultValue"
321
- :show-alpha="data.options.showAlpha"
322
- ></el-color-picker>
323
- <el-switch
324
- v-if="data.type == 'switch'"
325
- v-model="data.options.defaultValue"
326
- ></el-switch>
327
- <el-input
328
- v-if="data.type == 'text'"
329
- v-model="data.options.defaultValue"
330
- ></el-input>
331
- </el-form-item>
332
-
333
- <el-form-item
334
- label="最大字数"
335
- v-if="data.type == 'textarea' || data.type == 'input'"
336
- >
337
- <el-input-number
338
- v-model="data.options.maxlength"
339
- :min="-1"
340
- ></el-input-number>
341
- </el-form-item>
342
- <el-form-item
343
- label="显示字数统计"
344
- v-if="data.type == 'textarea' || data.type == 'input'"
345
- >
346
- <el-switch v-model="data.options.showWordLimit"></el-switch>
347
- </el-form-item>
348
-
349
- <template v-if="data.type == 'time' || data.type == 'date'">
350
- <el-form-item label="显示类型" v-if="data.type == 'date'">
351
- <el-select v-model="data.options.type">
352
- <el-option value="year"></el-option>
353
- <el-option value="month"></el-option>
354
- <el-option value="date"></el-option>
355
- <el-option value="dates"></el-option>
356
- <!-- <el-option value="week"></el-option> -->
357
- <el-option value="datetime"></el-option>
358
- <el-option value="datetimerange"></el-option>
359
- <el-option value="daterange"></el-option>
360
- </el-select>
361
- </el-form-item>
362
- <el-form-item label="是否为范围选择" v-if="data.type == 'time'">
363
- <el-switch v-model="data.options.isRange"> </el-switch>
364
- </el-form-item>
365
- <el-form-item label="是否获取时间戳" v-if="data.type == 'date'">
366
- <el-switch v-model="data.options.timestamp"> </el-switch>
367
- </el-form-item>
368
- <el-form-item
369
- label="占位内容"
370
- v-if="
371
- (!data.options.isRange && data.type == 'time') ||
372
- (data.type != 'time' &&
373
- data.options.type != 'datetimerange' &&
374
- data.options.type != 'daterange')
375
- "
376
- >
377
- <el-input v-model="data.options.placeholder"></el-input>
378
- </el-form-item>
379
- <el-form-item
380
- label="开始时间占位内容"
381
- v-if="
382
- data.options.isRange ||
383
- data.options.type == 'datetimerange' ||
384
- data.options.type == 'daterange'
385
- "
386
- >
387
- <el-input v-model="data.options.startPlaceholder"></el-input>
388
- </el-form-item>
389
- <el-form-item
390
- label="结束时间占位内容"
391
- v-if="
392
- data.options.isRange ||
393
- data.options.type == 'datetimerange' ||
394
- data.options.type == 'daterange'
395
- "
396
- >
397
- <el-input v-model="data.options.endPlaceholder"></el-input>
398
- </el-form-item>
399
- <el-form-item label="格式">
400
- <el-input v-model="data.options.format"></el-input>
401
- </el-form-item>
402
- <el-form-item
403
- label="默认值"
404
- v-if="
405
- data.type == 'time' &&
406
- Object.keys(data.options).indexOf('isRange') >= 0
407
- "
408
- >
409
- <el-time-picker
410
- key="1"
411
- style="width: 100%;"
412
- v-if="!data.options.isRange"
413
- v-model="data.options.defaultValue"
414
- :arrowControl="data.options.arrowControl"
415
- :value-format="data.options.format"
416
- >
417
- </el-time-picker>
418
- <el-time-picker
419
- key="2"
420
- v-if="data.options.isRange"
421
- style="width: 100%;"
422
- v-model="data.options.defaultValue"
423
- is-range
424
- :arrowControl="data.options.arrowControl"
425
- :value-format="data.options.format"
426
- >
427
- </el-time-picker>
428
- </el-form-item>
429
- </template>
430
-
431
- <template v-if="data.type == 'imgupload'">
432
- <el-form-item label="最大上传数">
433
- <el-input
434
- type="number"
435
- v-model.number="data.options.length"
436
- ></el-input>
437
- </el-form-item>
438
- <el-form-item label="使用七牛上传">
439
- <el-switch v-model="data.options.isQiniu"></el-switch>
440
- </el-form-item>
441
- <template v-if="data.options.isQiniu">
442
- <el-form-item label="Domain" :required="true">
443
- <el-input v-model="data.options.domain"></el-input>
444
- </el-form-item>
445
- <el-form-item label="获取七牛Token方法" :required="true">
446
- <el-input v-model="data.options.tokenFunc"></el-input>
447
- </el-form-item>
448
- </template>
449
- <template v-else>
450
- <el-form-item label="图片上传地址" :required="true">
451
- <el-input v-model="data.options.action"></el-input>
452
- </el-form-item>
453
- </template>
454
- </template>
455
-
456
- <template v-if="data.type == 'blank'">
457
- <el-form-item label="绑定数据类型">
458
- <el-select v-model="data.options.defaultType">
459
- <el-option value="String" label="字符串"></el-option>
460
- <el-option value="Object" label="对象"></el-option>
461
- <el-option value="Array" label="数组"></el-option>
462
- </el-select>
463
- </el-form-item>
464
- </template>
465
-
466
- <template v-if="data.type == 'grid'">
467
- <el-form-item label="栅格间隔">
468
- <el-input
469
- type="number"
470
- v-model.number="data.options.gutter"
471
- ></el-input>
472
- </el-form-item>
473
- <el-form-item label="列配置项">
474
- <draggable
475
- tag="ul"
476
- :list="data.columns"
477
- v-bind="{
478
- group: { name: 'options' },
479
- ghostClass: 'ghost',
480
- handle: '.drag-item'
481
- }"
482
- handle=".drag-item"
483
- >
484
- <li v-for="(item, index) in data.columns" :key="index">
485
- <i
486
- class="drag-item"
487
- style="font-size: 16px;margin: 0 5px;cursor: move;"
488
- ><i class="iconfont icon-icon_bars"></i
489
- ></i>
490
- <el-input
491
- placeholder="栅格值"
492
- size="mini"
493
- style="width: 100px;"
494
- type="number"
495
- v-model.number="item.span"
496
- ></el-input>
497
-
498
- <el-button
499
- @click="handleOptionsRemove(index)"
500
- circle
501
- plain
502
- type="danger"
503
- size="mini"
504
- icon="el-icon-minus"
505
- style="padding: 4px;margin-left: 5px;"
506
- ></el-button>
507
- </li>
508
- </draggable>
509
- <div style="margin-left: 22px;">
510
- <el-button type="text" @click="handleAddColumn">添加列</el-button>
511
- </div>
512
- </el-form-item>
513
- <el-form-item label="水平排列方式">
514
- <el-select v-model="data.options.justify">
515
- <el-option value="start" label="左对齐"></el-option>
516
- <el-option value="end" label="右对齐"></el-option>
517
- <el-option value="center" label="居中"></el-option>
518
- <el-option value="space-around" label="两侧间隔相等"></el-option>
519
- <el-option value="space-between" label="两端对齐"></el-option>
520
- </el-select>
521
- </el-form-item>
522
- <el-form-item label="垂直排列方式">
523
- <el-select v-model="data.options.align">
524
- <el-option value="top" label="顶部对齐"></el-option>
525
- <el-option value="middle" label="居中"></el-option>
526
- <el-option value="bottom" label="底部对齐"></el-option>
527
- </el-select>
528
- </el-form-item>
529
- </template>
530
-
531
- <template v-if="data.type != 'grid'">
532
- <el-form-item label="操作属性">
533
- <el-checkbox
534
- v-model="data.options.readonly"
535
- v-if="Object.keys(data.options).indexOf('readonly') >= 0"
536
- >完全只读</el-checkbox
537
- >
538
- <el-checkbox
539
- v-model="data.options.disabled"
540
- v-if="Object.keys(data.options).indexOf('disabled') >= 0"
541
- >禁用
542
- </el-checkbox>
543
- <el-checkbox
544
- v-model="data.options.editable"
545
- v-if="Object.keys(data.options).indexOf('editable') >= 0"
546
- >文本框可输入</el-checkbox
547
- >
548
- <el-checkbox
549
- v-model="data.options.clearable"
550
- v-if="Object.keys(data.options).indexOf('clearable') >= 0"
551
- >显示清除按钮</el-checkbox
552
- >
553
- <el-checkbox
554
- v-model="data.options.arrowControl"
555
- v-if="Object.keys(data.options).indexOf('arrowControl') >= 0"
556
- >使用箭头进行时间选择</el-checkbox
557
- >
558
- <el-checkbox
559
- v-model="data.options.isDelete"
560
- v-if="Object.keys(data.options).indexOf('isDelete') >= 0"
561
- >删除</el-checkbox
562
- >
563
- <el-checkbox
564
- v-model="data.options.isEdit"
565
- v-if="Object.keys(data.options).indexOf('isEdit') >= 0"
566
- >编辑</el-checkbox
567
- >
568
- </el-form-item>
569
- <el-form-item label="校验">
570
- <div v-if="Object.keys(data.options).indexOf('required') >= 0">
571
- <el-checkbox v-model="data.options.required">必填</el-checkbox>
572
- </div>
573
- <el-select
574
- v-if="Object.keys(data.options).indexOf('dataType') >= 0"
575
- v-model="data.options.dataType"
576
- size="mini"
577
- >
578
- <el-option value="string" label="字符串"></el-option>
579
- <el-option value="number" label="数字"></el-option>
580
- <el-option value="boolean" label="布尔值"></el-option>
581
- <el-option value="integer" label="整数"></el-option>
582
- <el-option value="float" label="浮点数"></el-option>
583
- <el-option value="url" label="URL地址"></el-option>
584
- <el-option value="email" label="邮箱地址"></el-option>
585
- <el-option value="hex" label="十六进制"></el-option>
586
- </el-select>
587
-
588
- <div v-if="Object.keys(data.options).indexOf('pattern') >= 0">
589
- <el-input
590
- size="mini"
591
- class="config-pattern-input"
592
- v-model.lazy="data.options.pattern"
593
- style=" width: 240px;"
594
- placeholder="填写正则表达式"
595
- >
596
- <template slot="prepend">/</template>
597
- <template slot="append">/</template>
598
- </el-input>
599
- </div>
600
- </el-form-item>
601
- </template>
602
- </el-form>
603
- </div>
604
- </template>
605
-
606
- <script>
607
- import Draggable from "vuedraggable";
608
-
609
- export default {
610
- components: {
611
- Draggable
612
- },
613
- props: ["data"],
614
- data() {
615
- return {
616
- validator: {
617
- type: null,
618
- required: null,
619
- pattern: null,
620
- range: null,
621
- length: null
622
- }
623
- };
624
- },
625
- computed: {
626
- show() {
627
- if (this.data && Object.keys(this.data).length > 0) {
628
- return true;
629
- }
630
- return false;
631
- }
632
- },
633
- methods: {
634
- handleOptionsRemove(index) {
635
- if (this.data.type === "grid") {
636
- this.data.columns.splice(index, 1);
637
- } else {
638
- this.data.options.options.splice(index, 1);
639
- }
640
- },
641
- handleAddOption() {
642
- if (this.data.options.showLabel) {
643
- this.data.options.options.push({
644
- value: "新选项",
645
- label: "新选项"
646
- });
647
- } else {
648
- this.data.options.options.push({
649
- value: "新选项"
650
- });
651
- }
652
- },
653
- handleAddColumn() {
654
- this.data.columns.push({
655
- span: "",
656
- list: []
657
- });
658
- },
659
- generateRule() {
660
- this.data.rules = [];
661
- Object.keys(this.validator).forEach(key => {
662
- if (this.validator[key]) {
663
- this.data.rules.push(this.validator[key]);
664
- }
665
- });
666
- },
667
- handleSelectMuliple(value) {
668
- if (value) {
669
- if (this.data.options.defaultValue) {
670
- this.data.options.defaultValue = [this.data.options.defaultValue];
671
- } else {
672
- this.data.options.defaultValue = [];
673
- }
674
- } else {
675
- if (this.data.options.defaultValue.length > 0) {
676
- this.data.options.defaultValue = this.data.options.defaultValue[0];
677
- } else {
678
- this.data.options.defaultValue = "";
679
- }
680
- }
681
- },
682
-
683
- validateRequired(val) {
684
- if (val) {
685
- this.validator.required = {
686
- required: true,
687
- message: `${this.data.name}必须填写`
688
- };
689
- } else {
690
- this.validator.required = null;
691
- }
692
-
693
- this.$nextTick(() => {
694
- this.generateRule();
695
- });
696
- },
697
-
698
- validateDataType(val) {
699
- if (!this.show) {
700
- return false;
701
- }
702
-
703
- if (val) {
704
- this.validator.type = {
705
- type: val,
706
- message: this.data.name + "格式不正确"
707
- };
708
- } else {
709
- this.validator.type = null;
710
- }
711
-
712
- this.generateRule();
713
- },
714
- valiatePattern(val) {
715
- if (!this.show) {
716
- return false;
717
- }
718
-
719
- if (val) {
720
- this.validator.pattern = {
721
- pattern: val,
722
- message: this.data.name + "格式不匹配"
723
- };
724
- } else {
725
- this.validator.pattern = null;
726
- }
727
-
728
- this.generateRule();
729
- }
730
- },
731
- watch: {
732
- "data.options.isRange": function(val) {
733
- if (typeof val !== "undefined") {
734
- if (val) {
735
- this.data.options.defaultValue = null;
736
- } else {
737
- if (Object.keys(this.data.options).indexOf("defaultValue") >= 0)
738
- this.data.options.defaultValue = "";
739
- }
740
- }
741
- },
742
- "data.options.required": function(val) {
743
- this.validateRequired(val);
744
- },
745
- "data.options.dataType": function(val) {
746
- this.validateDataType(val);
747
- },
748
- "data.options.pattern": function(val) {
749
- this.valiatePattern(val);
750
- },
751
- "data.name": function(val) {
752
- if (this.data.options) {
753
- this.validateRequired(this.data.options.required);
754
- this.validateDataType(this.data.options.dataType);
755
- this.valiatePattern(this.data.options.pattern);
756
- }
757
- }
758
- }
759
- };
760
- </script>
1
+ <template>
2
+ <div v-if="show">
3
+ <el-form label-position="top">
4
+ <el-form-item label="字段标识" v-if="data.type != 'grid'">
5
+ <el-input v-model="data.model"></el-input>
6
+ </el-form-item>
7
+
8
+ <el-form-item label="标题" v-if="data.type != 'grid'">
9
+ <el-input v-model="data.name"></el-input>
10
+ </el-form-item>
11
+
12
+ <el-form-item
13
+ label="宽度"
14
+ v-if="Object.keys(data.options).indexOf('width') >= 0"
15
+ >
16
+ <el-input v-model="data.options.width"></el-input>
17
+ </el-form-item>
18
+
19
+ <el-form-item
20
+ label="高度"
21
+ v-if="Object.keys(data.options).indexOf('height') >= 0"
22
+ >
23
+ <el-input v-model="data.options.height"></el-input>
24
+ </el-form-item>
25
+
26
+ <el-form-item
27
+ label="格式化"
28
+ v-if="
29
+ data.type === 'slider' &&
30
+ Object.keys(data.options).indexOf('formatTooltip') >= 0
31
+ "
32
+ >
33
+ <el-input-number
34
+ v-model="data.options.formatTooltip"
35
+ :min="0.1"
36
+ ></el-input-number>
37
+ </el-form-item>
38
+
39
+ <el-form-item
40
+ label="大小"
41
+ v-if="Object.keys(data.options).indexOf('size') >= 0"
42
+ >
43
+ 宽度
44
+ <el-input
45
+ style="width: 90px;"
46
+ type="number"
47
+ v-model.number="data.options.size.width"
48
+ ></el-input>
49
+ 高度
50
+ <el-input
51
+ style="width: 90px;"
52
+ type="number"
53
+ v-model.number="data.options.size.height"
54
+ ></el-input>
55
+ </el-form-item>
56
+
57
+ <el-form-item label="文件列表样式" v-if="data.type == 'imgupload'">
58
+ <el-select
59
+ v-model="data.options.listType"
60
+ @change="handleImguploadType"
61
+ >
62
+ <el-option value="default" label="文件列表"></el-option>
63
+ <el-option value="picture-card" label="照片墙"></el-option>
64
+ <el-option value="picture" label="图片列表缩略图"></el-option>
65
+ </el-select>
66
+ </el-form-item>
67
+
68
+ <el-form-item
69
+ label="占位内容"
70
+ v-if="
71
+ Object.keys(data.options).indexOf('placeholder') >= 0 &&
72
+ (data.type != 'time' || data.type != 'date')
73
+ "
74
+ >
75
+ <el-input v-model="data.options.placeholder"></el-input>
76
+ </el-form-item>
77
+
78
+ <el-form-item
79
+ label="布局方式"
80
+ v-if="Object.keys(data.options).indexOf('inline') >= 0"
81
+ >
82
+ <el-radio-group v-model="data.options.inline">
83
+ <el-radio-button :label="false">块级</el-radio-button>
84
+ <el-radio-button :label="true">inline</el-radio-button>
85
+ </el-radio-group>
86
+ </el-form-item>
87
+
88
+ <template v-if="['number', 'checkbox', 'slider'].includes(data.type)">
89
+ <el-form-item label="">
90
+ <div v-if="Object.keys(data.options).indexOf('min') >= 0">
91
+ <div class="el-form-item__label">
92
+ 最小{{ ["checkbox"].includes(data.type) ? "勾选" : "值" }}：
93
+ </div>
94
+ <br />
95
+ <el-input-number v-model="data.options.min" :min="0">
96
+ </el-input-number>
97
+ </div>
98
+ <div v-if="Object.keys(data.options).indexOf('max') >= 0">
99
+ <div class="el-form-item__label">
100
+ 最大{{ ["checkbox"].includes(data.type) ? "勾选" : "值" }}：
101
+ </div>
102
+ <br />
103
+ <el-input-number
104
+ v-model="data.options.max"
105
+ :min="data.options.min || 1"
106
+ >
107
+ </el-input-number>
108
+ </div>
109
+ </el-form-item>
110
+ </template>
111
+
112
+ <el-form-item
113
+ label="步长"
114
+ v-if="Object.keys(data.options).indexOf('step') >= 0"
115
+ >
116
+ <el-input-number
117
+ v-model="data.options.step"
118
+ :min="0"
119
+ :max="100"
120
+ :step="1"
121
+ ></el-input-number>
122
+ </el-form-item>
123
+
124
+ <el-form-item
125
+ label="显示输入框"
126
+ v-if="Object.keys(data.options).indexOf('showInput') >= 0"
127
+ >
128
+ <el-switch v-model="data.options.showInput"></el-switch>
129
+ </el-form-item>
130
+
131
+ <el-form-item
132
+ label="显示间断点"
133
+ v-if="Object.keys(data.options).indexOf('showStops') >= 0"
134
+ >
135
+ <el-switch v-model="data.options.showStops"></el-switch>
136
+ </el-form-item>
137
+
138
+ <el-form-item
139
+ label="开启范围选择"
140
+ v-if="
141
+ data.type === 'slider' &&
142
+ Object.keys(data.options).indexOf('range') >= 0
143
+ "
144
+ >
145
+ <el-switch v-model="data.options.range"></el-switch>
146
+ </el-form-item>
147
+
148
+ <el-form-item
149
+ label="精度"
150
+ v-if="Object.keys(data.options).indexOf('precision') >= 0"
151
+ >
152
+ <el-input-number
153
+ v-model="data.options.precision"
154
+ :min="0"
155
+ :max="100"
156
+ :step="1"
157
+ ></el-input-number>
158
+ </el-form-item>
159
+
160
+ <el-form-item
161
+ label="按钮位置"
162
+ v-if="Object.keys(data.options).indexOf('controlsPosition') >= 0"
163
+ >
164
+ <el-radio-group v-model="data.options.controlsPosition">
165
+ <el-radio-button :label="false">两边</el-radio-button>
166
+ <el-radio-button :label="true">right</el-radio-button>
167
+ </el-radio-group>
168
+ </el-form-item>
169
+
170
+ <el-form-item
171
+ label="是否多选"
172
+ v-if="data.type == 'select' || data.type == 'imgupload'"
173
+ >
174
+ <el-switch
175
+ v-model="data.options.multiple"
176
+ @change="handleSelectMuliple"
177
+ ></el-switch>
178
+ </el-form-item>
179
+ <el-form-item label="是否可以拖拽" v-if="data.type == 'imgupload'">
180
+ <el-switch
181
+ v-model="data.options.drag"
182
+ @change="handleImguploadDrag"
183
+ ></el-switch>
184
+ </el-form-item>
185
+
186
+ <el-form-item
187
+ label="是否可搜索"
188
+ v-if="data.type === 'select' || data.type === 'cascader'"
189
+ >
190
+ <el-switch v-model="data.options.filterable"></el-switch>
191
+ </el-form-item>
192
+
193
+ <el-form-item
194
+ label="是否可创建条目"
195
+ v-if="data.type == 'select' && data.options.multiple"
196
+ >
197
+ <el-switch v-model="data.options.allowCreate"></el-switch>
198
+ </el-form-item>
199
+
200
+ <el-form-item
201
+ label="允许半选"
202
+ v-if="Object.keys(data.options).indexOf('allowHalf') >= 0"
203
+ >
204
+ <el-switch v-model="data.options.allowHalf"> </el-switch>
205
+ </el-form-item>
206
+
207
+ <el-form-item
208
+ label="加入辅助文字"
209
+ v-if="Object.keys(data.options).indexOf('showText') >= 0"
210
+ >
211
+ <el-switch v-model="data.options.showText"> </el-switch>
212
+ </el-form-item>
213
+
214
+ <el-form-item
215
+ label="支持透明度选择"
216
+ v-if="Object.keys(data.options).indexOf('showAlpha') >= 0"
217
+ >
218
+ <el-switch v-model="data.options.showAlpha"> </el-switch>
219
+ </el-form-item>
220
+
221
+ <el-form-item
222
+ label="是否显示标签"
223
+ v-if="Object.keys(data.options).indexOf('showLabel') >= 0"
224
+ >
225
+ <el-switch v-model="data.options.showLabel"> </el-switch>
226
+ </el-form-item>
227
+
228
+ <el-form-item
229
+ label="选项"
230
+ v-if="Object.keys(data.options).indexOf('options') >= 0"
231
+ >
232
+ <el-radio-group
233
+ v-model="data.options.remote"
234
+ size="mini"
235
+ style="margin-bottom:10px;"
236
+ >
237
+ <el-radio-button :label="false">静态数据</el-radio-button>
238
+ <el-radio-button :label="true">远端数据</el-radio-button>
239
+ </el-radio-group>
240
+ <template v-if="data.options.remote">
241
+ <div>
242
+ <!-- <el-input size="mini" style="" v-model="data.options.remoteFunc">
243
+ <template slot="prepend">远端方法</template>
244
+ </el-input> -->
245
+ <!-- <div style="width:70px;">接口名</div> -->
246
+ <el-select
247
+ class="remoteApis"
248
+ size="mini"
249
+ v-model="data.options.remoteFunc"
250
+ placeholder="请选择远端方法"
251
+ >
252
+ <template slot="prefix">
253
+ <div style="width:70px;">接口名</div>
254
+ </template>
255
+ <el-option-group
256
+ v-for="group in remoteApis"
257
+ :key="group.label"
258
+ :label="group.label"
259
+ >
260
+ <el-option
261
+ v-for="item in group.options"
262
+ :key="item.value"
263
+ :label="item.label"
264
+ :value="item.value"
265
+ >
266
+ </el-option>
267
+ </el-option-group>
268
+ </el-select>
269
+
270
+ <el-input size="mini" style="" v-model="data.options.props.value">
271
+ <template slot="prepend">
272
+ <div style="width:30px;">值</div>
273
+ </template>
274
+ </el-input>
275
+ <el-input size="mini" style="" v-model="data.options.props.label">
276
+ <template slot="prepend">
277
+ <div style="width:30px;">标签</div>
278
+ </template>
279
+ </el-input>
280
+ </div>
281
+ </template>
282
+ <template v-else>
283
+ <template
284
+ v-if="
285
+ data.type == 'radio' ||
286
+ (data.type == 'select' && !data.options.multiple)
287
+ "
288
+ >
289
+ <el-radio-group v-model="data.options.defaultValue">
290
+ <draggable
291
+ tag="ul"
292
+ :list="data.options.options"
293
+ v-bind="{
294
+ group: { name: 'options' },
295
+ ghostClass: 'ghost',
296
+ handle: '.drag-item'
297
+ }"
298
+ handle=".drag-item"
299
+ >
300
+ <li v-for="(item, index) in data.options.options" :key="index">
301
+ <el-radio :label="item.value" style="margin-right: 5px;">
302
+ <el-input
303
+ :style="{
304
+ width: data.options.showLabel ? '90px' : '180px'
305
+ }"
306
+ size="mini"
307
+ v-model="item.value"
308
+ ></el-input>
309
+ <el-input
310
+ style="width:90px;"
311
+ size="mini"
312
+ v-if="data.options.showLabel"
313
+ v-model="item.label"
314
+ ></el-input>
315
+ <!-- <input v-model="item.value"/> -->
316
+ </el-radio>
317
+ <i
318
+ class="drag-item"
319
+ style="font-size: 16px;margin: 0 5px;cursor: move;"
320
+ ><i class="iconfont icon-icon_bars"></i
321
+ ></i>
322
+ <el-button
323
+ @click="handleOptionsRemove(index)"
324
+ circle
325
+ plain
326
+ type="danger"
327
+ size="mini"
328
+ icon="el-icon-minus"
329
+ style="padding: 4px;margin-left: 5px;"
330
+ ></el-button>
331
+ </li>
332
+ </draggable>
333
+ </el-radio-group>
334
+ </template>
335
+
336
+ <template
337
+ v-if="
338
+ data.type == 'checkbox' ||
339
+ (data.type == 'select' && data.options.multiple)
340
+ "
341
+ >
342
+ <el-checkbox-group v-model="data.options.defaultValue">
343
+ <draggable
344
+ tag="ul"
345
+ :list="data.options.options"
346
+ v-bind="{
347
+ group: { name: 'options' },
348
+ ghostClass: 'ghost',
349
+ handle: '.drag-item'
350
+ }"
351
+ handle=".drag-item"
352
+ >
353
+ <li v-for="(item, index) in data.options.options" :key="index">
354
+ <el-checkbox :label="item.value" style="margin-right: 5px;">
355
+ <el-input
356
+ :style="{
357
+ width: data.options.showLabel ? '90px' : '180px'
358
+ }"
359
+ size="mini"
360
+ v-model="item.value"
361
+ ></el-input>
362
+ <el-input
363
+ style="width:90px;"
364
+ size="mini"
365
+ v-if="data.options.showLabel"
366
+ v-model="item.label"
367
+ ></el-input>
368
+ </el-checkbox>
369
+ <i
370
+ class="drag-item"
371
+ style="font-size: 16px;margin: 0 5px;cursor: move;"
372
+ ><i class="iconfont icon-icon_bars"></i
373
+ ></i>
374
+ <el-button
375
+ @click="handleOptionsRemove(index)"
376
+ circle
377
+ plain
378
+ type="danger"
379
+ size="mini"
380
+ icon="el-icon-minus"
381
+ style="padding: 4px;margin-left: 5px;"
382
+ ></el-button>
383
+ </li>
384
+ </draggable>
385
+ </el-checkbox-group>
386
+ </template>
387
+ <div style="margin-left: 22px;">
388
+ <el-button type="text" @click="handleAddOption">添加选项</el-button>
389
+ </div>
390
+ </template>
391
+ </el-form-item>
392
+
393
+ <el-form-item
394
+ label="辅助文字"
395
+ v-if="
396
+ Object.keys(data.options).indexOf('showText') >= 0 &&
397
+ data.options.showText
398
+ "
399
+ >
400
+ <template v-if="data.type == 'rate' && data.options.showText">
401
+ <el-radio-group v-model="data.options.defaultValue">
402
+ <draggable
403
+ tag="ul"
404
+ :list="data.options.auxiliaryValue"
405
+ v-bind="{
406
+ group: { name: 'options' },
407
+ ghostClass: 'ghost',
408
+ handle: '.drag-item'
409
+ }"
410
+ handle=".drag-item"
411
+ >
412
+ <li
413
+ v-for="(item, index) in data.options.auxiliaryValue"
414
+ :key="index"
415
+ >
416
+ <span style="margin-right: 5px;">
417
+ <el-input
418
+ :style="{
419
+ width: data.options.showLabel ? '90px' : '180px'
420
+ }"
421
+ size="mini"
422
+ v-model="data.options.auxiliaryValue[index]"
423
+ ></el-input>
424
+ </span>
425
+ <i
426
+ class="drag-item"
427
+ style="font-size: 16px;margin: 0 5px;cursor: move;"
428
+ ><i class="iconfont icon-icon_bars"></i
429
+ ></i>
430
+ <el-button
431
+ @click="handleOptionsRemove(index)"
432
+ circle
433
+ plain
434
+ type="danger"
435
+ size="mini"
436
+ icon="el-icon-minus"
437
+ style="padding: 4px;margin-left: 5px;"
438
+ ></el-button>
439
+ </li>
440
+ </draggable>
441
+ </el-radio-group>
442
+ </template>
443
+ <div style="margin-left: 22px;">
444
+ <el-button type="text" @click="handleAddOption">添加选项</el-button>
445
+ </div>
446
+ </el-form-item>
447
+
448
+ <el-form-item
449
+ label="默认值"
450
+ v-if="
451
+ Object.keys(data.options).indexOf('defaultValue') >= 0 &&
452
+ (data.type == 'textarea' ||
453
+ data.type == 'input' ||
454
+ data.type == 'rate' ||
455
+ data.type == 'color' ||
456
+ data.type == 'switch' ||
457
+ data.type == 'text')
458
+ "
459
+ >
460
+ <el-input
461
+ v-if="data.type == 'textarea'"
462
+ type="textarea"
463
+ :rows="5"
464
+ v-model="data.options.defaultValue"
465
+ ></el-input>
466
+ <el-input
467
+ v-if="data.type == 'input'"
468
+ v-model="data.options.defaultValue"
469
+ ></el-input>
470
+ <el-rate
471
+ v-if="data.type == 'rate'"
472
+ style="display:inline-block;vertical-align: middle;"
473
+ :max="data.options.max"
474
+ :allow-half="data.options.allowHalf"
475
+ v-model="data.options.defaultValue"
476
+ ></el-rate>
477
+ <el-button
478
+ type="text"
479
+ v-if="data.type == 'rate'"
480
+ style="display:inline-block;vertical-align: middle;margin-left: 10px;"
481
+ @click="data.options.defaultValue = 0"
482
+ >清空</el-button
483
+ >
484
+ <el-color-picker
485
+ v-if="data.type == 'color'"
486
+ v-model="data.options.defaultValue"
487
+ :show-alpha="data.options.showAlpha"
488
+ ></el-color-picker>
489
+ <el-switch
490
+ v-if="data.type == 'switch'"
491
+ v-model="data.options.defaultValue"
492
+ ></el-switch>
493
+ <el-input
494
+ v-if="data.type == 'text'"
495
+ v-model="data.options.defaultValue"
496
+ ></el-input>
497
+ </el-form-item>
498
+
499
+ <el-form-item
500
+ label="最大字数"
501
+ v-if="data.type == 'textarea' || data.type == 'input'"
502
+ >
503
+ <el-input-number
504
+ v-model="data.options.maxlength"
505
+ :min="-1"
506
+ ></el-input-number>
507
+ </el-form-item>
508
+
509
+ <template v-if="data.type == 'textarea'">
510
+ <el-form-item label="设置行高" :inline="true">
511
+ <template>
512
+ <span class="el-form-item__label">最小值：</span>
513
+ <el-input-number
514
+ v-if="Object.keys(data.options).indexOf('minRows') >= 0"
515
+ v-model="data.options.minRows"
516
+ :min="1"
517
+ @change="handleInputNumberChange"
518
+ >
519
+ </el-input-number>
520
+ </template>
521
+ <br />
522
+ <template>
523
+ <span class="el-form-item__label">最大值：</span>
524
+ <el-input-number
525
+ v-if="Object.keys(data.options).indexOf('maxRows') >= 0"
526
+ v-model="data.options.maxRows"
527
+ :min="data.options.minRows || 1"
528
+ >
529
+ </el-input-number>
530
+ </template>
531
+ </el-form-item>
532
+ </template>
533
+
534
+ <el-form-item
535
+ label="显示字数统计"
536
+ v-if="data.type == 'textarea' || data.type == 'input'"
537
+ >
538
+ <el-switch v-model="data.options.showWordLimit"></el-switch>
539
+ </el-form-item>
540
+
541
+ <template v-if="data.type == 'time' || data.type == 'date'">
542
+ <el-form-item label="显示类型" v-if="data.type == 'date'">
543
+ <el-select v-model="data.options.type">
544
+ <el-option value="year"></el-option>
545
+ <el-option value="month"></el-option>
546
+ <el-option value="date"></el-option>
547
+ <el-option value="dates"></el-option>
548
+ <!-- <el-option value="week"></el-option> -->
549
+ <el-option value="datetime"></el-option>
550
+ <el-option value="monthrange"></el-option>
551
+ <el-option value="datetimerange"></el-option>
552
+ <el-option value="daterange"></el-option>
553
+ </el-select>
554
+ </el-form-item>
555
+
556
+ <el-form-item
557
+ label="选择方式"
558
+ v-if="Object.keys(data.options).indexOf('timeType') >= 0"
559
+ >
560
+ <el-radio-group v-model="data.options.timeType">
561
+ <el-radio-button :label="true">任意时间点</el-radio-button>
562
+ <el-radio-button :label="false">固定时间点</el-radio-button>
563
+ </el-radio-group>
564
+ </el-form-item>
565
+
566
+ <el-form-item
567
+ label="是否为范围选择"
568
+ v-if="data.type == 'time' && !data.options.timeType"
569
+ >
570
+ <el-switch v-model="data.options.selectRange"> </el-switch>
571
+ </el-form-item>
572
+
573
+ <el-form-item
574
+ label="是否为范围选择"
575
+ v-if="data.type == 'time' && data.options.timeType"
576
+ >
577
+ <el-switch v-model="data.options.isRange"> </el-switch>
578
+ </el-form-item>
579
+
580
+ <el-form-item
581
+ label="是否获取时间戳"
582
+ v-if="data.type == 'date' && data.options.timeType"
583
+ >
584
+ <el-switch v-model="data.options.timestamp"> </el-switch>
585
+ </el-form-item>
586
+
587
+ <el-form-item
588
+ label="占位内容"
589
+ v-if="
590
+ (!data.options.isRange &&
591
+ data.type == 'time' &&
592
+ data.options.timeType) ||
593
+ (data.type != 'time' &&
594
+ data.options.type != 'datetimerange' &&
595
+ data.options.type != 'daterange' &&
596
+ data.options.timeType)
597
+ "
598
+ >
599
+ <el-input v-model="data.options.placeholder"></el-input>
600
+ </el-form-item>
601
+
602
+ <el-form-item
603
+ label="格式"
604
+ v-if="
605
+ (data.type == 'time' && data.options.timeType) ||
606
+ ['datetimerange', 'daterange', 'date'].includes(data.options.type)
607
+ "
608
+ >
609
+ <el-input v-model="data.options.format"></el-input>
610
+ </el-form-item>
611
+
612
+ <el-form-item
613
+ label="默认值"
614
+ v-if="
615
+ data.type == 'time' &&
616
+ Object.keys(data.options).indexOf('isRange') >= 0 &&
617
+ data.options.timeType
618
+ "
619
+ >
620
+ <el-time-picker
621
+ key="1"
622
+ style="width: 100%;"
623
+ v-if="!data.options.isRange"
624
+ v-model="data.options.defaultValue"
625
+ :arrowControl="data.options.arrowControl"
626
+ :value-format="data.options.format"
627
+ >
628
+ </el-time-picker>
629
+ <el-time-picker
630
+ key="2"
631
+ v-if="data.options.isRange"
632
+ style="width: 100%;"
633
+ v-model="data.options.defaultValue"
634
+ is-range
635
+ :arrowControl="data.options.arrowControl"
636
+ :value-format="data.options.format"
637
+ >
638
+ </el-time-picker>
639
+ </el-form-item>
640
+
641
+ <template>
642
+ <el-form-item
643
+ :label="data.options.selectRange ? '开始时间范围值' : '时间范围值'"
644
+ v-if="
645
+ data.type == 'time' &&
646
+ Object.keys(data.options).indexOf('stretTimePickerOptions') >=
647
+ 0 &&
648
+ !data.options.timeType
649
+ "
650
+ >
651
+ <el-time-picker
652
+ key="1"
653
+ v-if="data.options.stretTimePickerOptions.start"
654
+ style="width: 100%;"
655
+ v-model="data.options.stretTimePickerOptions.start"
656
+ value-format="HH:mm"
657
+ format="HH:mm"
658
+ >
659
+ </el-time-picker>
660
+ <el-time-picker
661
+ key="2"
662
+ v-if="data.options.stretTimePickerOptions.end"
663
+ style="width: 100%;"
664
+ v-model="data.options.stretTimePickerOptions.end"
665
+ value-format="HH:mm"
666
+ format="HH:mm"
667
+ >
668
+ </el-time-picker>
669
+ </el-form-item>
670
+
671
+ <el-form-item
672
+ :label="data.options.selectRange ? '开始时间步长' : '时间步长'"
673
+ v-if="
674
+ data.type == 'time' &&
675
+ Object.keys(data.options).indexOf('stretTimePickerOptions') >=
676
+ 0 &&
677
+ !data.options.timeType
678
+ "
679
+ >
680
+ <el-time-picker
681
+ key="1"
682
+ v-if="data.options.stretTimePickerOptions.step"
683
+ style="width: 100%;"
684
+ v-model="data.options.stretTimePickerOptions.step"
685
+ value-format="HH:mm"
686
+ format="HH:mm"
687
+ >
688
+ </el-time-picker>
689
+ </el-form-item>
690
+ </template>
691
+
692
+ <el-form-item
693
+ label="开始时间占位内容"
694
+ v-if="
695
+ data.options.isRange ||
696
+ data.options.type == 'datetimerange' ||
697
+ data.options.type == 'daterange' ||
698
+ (!data.options.timeType && data.options.selectRange)
699
+ "
700
+ >
701
+ <el-input v-model="data.options.startPlaceholder"></el-input>
702
+ </el-form-item>
703
+
704
+ <template v-if="data.options.selectRange">
705
+ <el-form-item
706
+ label="结束时间范围值"
707
+ v-if="
708
+ data.type == 'time' &&
709
+ Object.keys(data.options).indexOf('endTimePickerOptions') >=
710
+ 0 &&
711
+ !data.options.timeType
712
+ "
713
+ >
714
+ <el-time-picker
715
+ key="1"
716
+ v-if="data.options.endTimePickerOptions.start"
717
+ style="width: 100%;"
718
+ v-model="data.options.endTimePickerOptions.start"
719
+ value-format="HH:mm"
720
+ format="HH:mm"
721
+ >
722
+ </el-time-picker>
723
+ <el-time-picker
724
+ key="2"
725
+ v-if="data.options.endTimePickerOptions.end"
726
+ style="width: 100%;"
727
+ v-model="data.options.endTimePickerOptions.end"
728
+ value-format="HH:mm"
729
+ format="HH:mm"
730
+ >
731
+ </el-time-picker>
732
+ </el-form-item>
733
+
734
+ <el-form-item
735
+ label="结束时间步长"
736
+ v-if="
737
+ data.type == 'time' &&
738
+ Object.keys(data.options).indexOf('endTimePickerOptions') >=
739
+ 0 &&
740
+ !data.options.timeType
741
+ "
742
+ >
743
+ <el-time-picker
744
+ key="1"
745
+ v-if="data.options.endTimePickerOptions.step"
746
+ style="width: 100%;"
747
+ v-model="data.options.endTimePickerOptions.step"
748
+ value-format="HH:mm"
749
+ format="HH:mm"
750
+ >
751
+ </el-time-picker>
752
+ </el-form-item>
753
+ </template>
754
+
755
+ <el-form-item
756
+ label="结束时间占位内容"
757
+ v-if="
758
+ data.options.isRange ||
759
+ data.options.type == 'datetimerange' ||
760
+ data.options.type == 'daterange' ||
761
+ (!data.options.timeType && data.options.selectRange)
762
+ "
763
+ >
764
+ <el-input v-model="data.options.endPlaceholder"></el-input>
765
+ </el-form-item>
766
+ </template>
767
+
768
+ <template v-if="data.type == 'imgupload'">
769
+ <el-form-item label="最大上传数">
770
+ <el-input
771
+ type="number"
772
+ v-model.number="data.options.length"
773
+ ></el-input>
774
+ </el-form-item>
775
+
776
+ <el-form-item label="文字提示">
777
+ <el-input
778
+ v-model.number="data.options.elUploadTip"
779
+ placeholder="请输入文字提示或HTML"
780
+ ></el-input>
781
+ </el-form-item>
782
+
783
+ <!-- <el-form-item label="使用七牛上传">
784
+ <el-switch v-model="data.options.isQiniu"></el-switch>
785
+ </el-form-item> -->
786
+
787
+ <template v-if="data.options.isQiniu">
788
+ <el-form-item label="Domain" :required="true">
789
+ <el-input v-model="data.options.domain"></el-input>
790
+ </el-form-item>
791
+ <el-form-item label="获取七牛Token方法" :required="true">
792
+ <el-input v-model="data.options.tokenFunc"></el-input>
793
+ </el-form-item>
794
+ </template>
795
+
796
+ <template v-else>
797
+ <el-form-item label="图片上传" :required="true">
798
+ <el-select
799
+ class="remoteApis"
800
+ v-model="data.options.remoteFunc"
801
+ placeholder="请选择远端方法"
802
+ >
803
+ <template slot="prefix">
804
+ <div style="width:70px;">接口名</div>
805
+ </template>
806
+ <el-option-group
807
+ v-for="group in remoteApis"
808
+ :key="group.label"
809
+ :label="group.label"
810
+ >
811
+ <el-option
812
+ v-for="item in group.options"
813
+ :key="item.value"
814
+ :label="item.label"
815
+ :value="item.value"
816
+ >
817
+ </el-option>
818
+ </el-option-group>
819
+ </el-select>
820
+ </el-form-item>
821
+ <!-- <el-form-item label="选取文件后立即上传">
822
+ <el-switch v-model="data.options.autoUpload"></el-switch>
823
+ </el-form-item> -->
824
+ </template>
825
+ </template>
826
+
827
+ <template v-if="data.type == 'blank'">
828
+ <el-form-item label="绑定数据类型">
829
+ <el-select v-model="data.options.defaultType">
830
+ <el-option value="String" label="字符串"></el-option>
831
+ <el-option value="Object" label="对象"></el-option>
832
+ <el-option value="Array" label="数组"></el-option>
833
+ </el-select>
834
+ </el-form-item>
835
+ </template>
836
+
837
+ <template v-if="data.type == 'grid'">
838
+ <el-form-item label="栅格间隔">
839
+ <el-input
840
+ type="number"
841
+ v-model.number="data.options.gutter"
842
+ ></el-input>
843
+ </el-form-item>
844
+
845
+ <el-form-item label="列配置项">
846
+ <draggable
847
+ tag="ul"
848
+ :list="data.columns"
849
+ v-bind="{
850
+ group: { name: 'options' },
851
+ ghostClass: 'ghost',
852
+ handle: '.drag-item'
853
+ }"
854
+ handle=".drag-item"
855
+ >
856
+ <li v-for="(item, index) in data.columns" :key="index">
857
+ <i
858
+ class="drag-item"
859
+ style="font-size: 16px;margin: 0 5px;cursor: move;"
860
+ ><i class="iconfont icon-icon_bars"></i
861
+ ></i>
862
+ <el-input
863
+ placeholder="栅格值"
864
+ size="mini"
865
+ style="width: 100px;"
866
+ type="number"
867
+ v-model.number="item.span"
868
+ ></el-input>
869
+
870
+ <el-button
871
+ @click="handleOptionsRemove(index)"
872
+ circle
873
+ plain
874
+ type="danger"
875
+ size="mini"
876
+ icon="el-icon-minus"
877
+ style="padding: 4px;margin-left: 5px;"
878
+ ></el-button>
879
+ </li>
880
+ </draggable>
881
+ <div style="margin-left: 22px;">
882
+ <el-button type="text" @click="handleAddColumn">添加列</el-button>
883
+ </div>
884
+ </el-form-item>
885
+
886
+ <el-form-item label="水平排列方式">
887
+ <el-select v-model="data.options.justify">
888
+ <el-option value="start" label="左对齐"></el-option>
889
+ <el-option value="end" label="右对齐"></el-option>
890
+ <el-option value="center" label="居中"></el-option>
891
+ <el-option value="space-around" label="两侧间隔相等"></el-option>
892
+ <el-option value="space-between" label="两端对齐"></el-option>
893
+ </el-select>
894
+ </el-form-item>
895
+
896
+ <el-form-item label="垂直排列方式">
897
+ <el-select v-model="data.options.align">
898
+ <el-option value="top" label="顶部对齐"></el-option>
899
+ <el-option value="middle" label="居中"></el-option>
900
+ <el-option value="bottom" label="底部对齐"></el-option>
901
+ </el-select>
902
+ </el-form-item>
903
+ </template>
904
+
905
+ <template v-if="data.type != 'grid'">
906
+ <el-form-item label="带入icon" v-if="data.type == 'input'">
907
+ <el-input
908
+ v-if="Object.keys(data.options).indexOf('prefixIcon') >= 0"
909
+ placeholder="请输入icon类名"
910
+ v-model="data.options.prefixIcon"
911
+ >
912
+ <template slot="prepend">
913
+ <div style="width:50px;">prefixIcon</div>
914
+ </template>
915
+ </el-input>
916
+ <el-input
917
+ v-if="Object.keys(data.options).indexOf('suffixIcon') >= 0"
918
+ placeholder="请输入icon类名"
919
+ v-model="data.options.suffixIcon"
920
+ >
921
+ <template slot="prepend">
922
+ <div style="width:50px;">suffixIcon</div>
923
+ </template>
924
+ </el-input>
925
+ </el-form-item>
926
+
927
+ <el-form-item
928
+ label="组件插槽"
929
+ v-if="data.type === 'input' || data.type === 'cascader'"
930
+ >
931
+ <el-input
932
+ v-if="Object.keys(data.options).indexOf('prepend') >= 0"
933
+ placeholder="请输入内容或HTML"
934
+ v-model="data.options.prepend"
935
+ >
936
+ <template slot="prepend">
937
+ <div style="width:50px;">prepend</div>
938
+ </template>
939
+ </el-input>
940
+ <el-input
941
+ v-if="Object.keys(data.options).indexOf('append') >= 0"
942
+ placeholder="请输入内容或HTML"
943
+ v-model="data.options.append"
944
+ >
945
+ <template slot="prepend">
946
+ <div style="width:50px;">append</div>
947
+ </template>
948
+ </el-input>
949
+ </el-form-item>
950
+
951
+ <el-form-item label="远端数据" v-if="data.type == 'cascader'">
952
+ <div>
953
+ <!-- <el-input size="mini" style="" v-model="data.options.remoteFunc">
954
+ <template slot="prepend">远端方法</template>
955
+ </el-input> -->
956
+ <el-select
957
+ class="remoteApis"
958
+ size="mini"
959
+ v-model="data.options.remoteFunc"
960
+ placeholder="请选择远端方法"
961
+ >
962
+ <template slot="prefix">
963
+ <div style="width:70px;">接口名</div>
964
+ </template>
965
+ <el-option-group
966
+ v-for="group in remoteApis"
967
+ :key="group.label"
968
+ :label="group.label"
969
+ >
970
+ <el-option
971
+ v-for="item in group.options"
972
+ :key="item.value"
973
+ :label="item.label"
974
+ :value="item.value"
975
+ >
976
+ </el-option>
977
+ </el-option-group>
978
+ </el-select>
979
+ <el-input size="mini" style="" v-model="data.options.props.value">
980
+ <template slot="prepend">值</template>
981
+ </el-input>
982
+ <el-input size="mini" style="" v-model="data.options.props.label">
983
+ <template slot="prepend">标签</template>
984
+ </el-input>
985
+ <el-input
986
+ size="mini"
987
+ style=""
988
+ v-model="data.options.props.children"
989
+ >
990
+ <template slot="prepend">子选项</template>
991
+ </el-input>
992
+ </div>
993
+ </el-form-item>
994
+
995
+ <el-form-item
996
+ label="文字描述"
997
+ v-if="data.type === 'switch'"
998
+ :inline="true"
999
+ >
1000
+ <div
1001
+ v-if="Object.keys(data.options).indexOf('switchInactiveText') >= 0"
1002
+ >
1003
+ <span class="el-form-item__label">inactiveText：</span>
1004
+ <el-input
1005
+ v-model="data.options.switchInactiveText"
1006
+ placeholder="请输入内容"
1007
+ >
1008
+ </el-input>
1009
+ </div>
1010
+ <div
1011
+ v-if="Object.keys(data.options).indexOf('switchActiveText') >= 0"
1012
+ >
1013
+ <span class="el-form-item__label">activeText：</span>
1014
+ <el-input
1015
+ v-model="data.options.switchActiveText"
1016
+ placeholder="请输入内容"
1017
+ >
1018
+ </el-input>
1019
+ </div>
1020
+ <div
1021
+ v-if="Object.keys(data.options).indexOf('switchInactiveColor') >= 0"
1022
+ >
1023
+ <span class="el-form-item__label">inactiveColor：</span>
1024
+ <el-input
1025
+ v-model="data.options.switchInactiveColor"
1026
+ placeholder="请输入色值，例如#ff4949"
1027
+ >
1028
+ </el-input>
1029
+ </div>
1030
+ <div
1031
+ v-if="Object.keys(data.options).indexOf('switchActiveColor') >= 0"
1032
+ >
1033
+ <span class="el-form-item__label">activeColor：</span>
1034
+ <el-input
1035
+ v-model="data.options.switchActiveColor"
1036
+ placeholder="请输入色值，例如#ff4949"
1037
+ >
1038
+ </el-input>
1039
+ </div>
1040
+ </el-form-item>
1041
+
1042
+ <el-form-item label="操作属性">
1043
+ <el-checkbox
1044
+ v-model="data.options.readonly"
1045
+ v-if="Object.keys(data.options).indexOf('readonly') >= 0"
1046
+ >完全只读</el-checkbox
1047
+ >
1048
+ <el-checkbox
1049
+ v-model="data.options.disabled"
1050
+ v-if="Object.keys(data.options).indexOf('disabled') >= 0"
1051
+ >禁用
1052
+ </el-checkbox>
1053
+ <el-checkbox
1054
+ v-model="data.options.editable"
1055
+ v-if="Object.keys(data.options).indexOf('editable') >= 0"
1056
+ >文本框可输入</el-checkbox
1057
+ >
1058
+ <el-checkbox
1059
+ v-model="data.options.showPassword"
1060
+ v-if="Object.keys(data.options).indexOf('showPassword') >= 0"
1061
+ >显示切换密码图标</el-checkbox
1062
+ >
1063
+ <el-checkbox
1064
+ v-model="data.options.arrowControl"
1065
+ v-if="Object.keys(data.options).indexOf('arrowControl') >= 0"
1066
+ >使用箭头进行时间选择</el-checkbox
1067
+ >
1068
+ <el-checkbox
1069
+ v-model="data.options.isDelete"
1070
+ v-if="Object.keys(data.options).indexOf('isDelete') >= 0"
1071
+ >删除</el-checkbox
1072
+ >
1073
+ <el-checkbox
1074
+ v-model="data.options.isEdit"
1075
+ v-if="Object.keys(data.options).indexOf('isEdit') >= 0"
1076
+ >编辑</el-checkbox
1077
+ >
1078
+ <el-checkbox
1079
+ v-model="data.options.border"
1080
+ v-if="Object.keys(data.options).indexOf('border') >= 0"
1081
+ >显示边框</el-checkbox
1082
+ >
1083
+ <el-checkbox
1084
+ v-model="data.options.buttonType"
1085
+ v-if="Object.keys(data.options).indexOf('buttonType') >= 0"
1086
+ >按钮样式</el-checkbox
1087
+ >
1088
+ <el-checkbox
1089
+ v-model="data.options.showTooltip"
1090
+ v-if="
1091
+ data.type === 'slider' &&
1092
+ Object.keys(data.options).indexOf('showTooltip') >= 0
1093
+ "
1094
+ >显示showTooltip</el-checkbox
1095
+ >
1096
+ <el-checkbox
1097
+ v-model="data.options.vertical"
1098
+ v-if="
1099
+ data.type === 'slider' &&
1100
+ Object.keys(data.options).indexOf('vertical') >= 0
1101
+ "
1102
+ >竖向模式</el-checkbox
1103
+ >
1104
+ <el-checkbox
1105
+ v-model="data.options.showAllLevels"
1106
+ v-if="
1107
+ data.type === 'cascader' &&
1108
+ Object.keys(data.options).indexOf('showAllLevels') >= 0
1109
+ "
1110
+ >仅显示最后一级</el-checkbox
1111
+ >
1112
+ <el-checkbox
1113
+ v-model="data.options.props.multiple"
1114
+ v-if="data.type === 'cascader'"
1115
+ >是否多选</el-checkbox
1116
+ >
1117
+ <el-checkbox
1118
+ v-model="data.options.props.checkStrictly"
1119
+ v-if="['cascader'].includes(data.type)"
1120
+ >选择任意一级选项</el-checkbox
1121
+ >
1122
+ <el-checkbox
1123
+ v-model="data.options.collapseTags"
1124
+ v-if="['select', 'cascader'].includes(data.type)"
1125
+ >是否折叠展示Tag</el-checkbox
1126
+ >
1127
+ <el-checkbox
1128
+ v-model="data.options.clearable"
1129
+ v-if="Object.keys(data.options).indexOf('clearable') >= 0"
1130
+ >显示清除按钮</el-checkbox
1131
+ >
1132
+ </el-form-item>
1133
+
1134
+ <el-form-item label="校验">
1135
+ <div v-if="Object.keys(data.options).indexOf('required') >= 0">
1136
+ <el-checkbox v-model="data.options.required">必填</el-checkbox>
1137
+ </div>
1138
+ <el-select
1139
+ v-if="Object.keys(data.options).indexOf('dataType') >= 0"
1140
+ v-model="data.options.dataType"
1141
+ size="mini"
1142
+ >
1143
+ <el-option value="string" label="字符串"></el-option>
1144
+ <el-option value="number" label="数字"></el-option>
1145
+ <el-option value="boolean" label="布尔值"></el-option>
1146
+ <el-option value="integer" label="整数"></el-option>
1147
+ <el-option value="float" label="浮点数"></el-option>
1148
+ <el-option value="url" label="URL地址"></el-option>
1149
+ <el-option value="email" label="邮箱地址"></el-option>
1150
+ <el-option value="hex" label="十六进制"></el-option>
1151
+ </el-select>
1152
+
1153
+ <div v-if="Object.keys(data.options).indexOf('pattern') >= 0">
1154
+ <el-input
1155
+ size="mini"
1156
+ class="config-pattern-input"
1157
+ v-model.lazy="data.options.pattern"
1158
+ style=" width: 240px;"
1159
+ placeholder="填写正则表达式"
1160
+ >
1161
+ <template slot="prepend">/</template>
1162
+ <template slot="append">/</template>
1163
+ </el-input>
1164
+ </div>
1165
+ </el-form-item>
1166
+ </template>
1167
+ </el-form>
1168
+ </div>
1169
+ </template>
1170
+
1171
+ <script>
1172
+ import Draggable from "vuedraggable";
1173
+
1174
+ export default {
1175
+ components: {
1176
+ Draggable
1177
+ },
1178
+ props: ["data", "remoteApis"],
1179
+ data() {
1180
+ return {
1181
+ validator: {
1182
+ type: null,
1183
+ required: null,
1184
+ pattern: null,
1185
+ range: null,
1186
+ length: null
1187
+ }
1188
+ };
1189
+ },
1190
+ computed: {
1191
+ show() {
1192
+ if (this.data && Object.keys(this.data).length > 0) {
1193
+ return true;
1194
+ }
1195
+ return false;
1196
+ }
1197
+ },
1198
+ methods: {
1199
+ handleOptionsRemove(index) {
1200
+ if (this.data.type === "grid") {
1201
+ this.data.columns.splice(index, 1);
1202
+ } else if (this.data.type === "rate") {
1203
+ this.data.options.auxiliaryValue.splice(index, 1);
1204
+ } else {
1205
+ this.data.options.options.splice(index, 1);
1206
+ }
1207
+ },
1208
+ handleAddOption() {
1209
+ if (this.data.type === "rate") {
1210
+ this.data.options.auxiliaryValue.push("新选项");
1211
+ return;
1212
+ }
1213
+ if (this.data.options.showLabel) {
1214
+ this.data.options.options.push({
1215
+ value: "新选项",
1216
+ label: "新选项"
1217
+ });
1218
+ } else {
1219
+ this.data.options.options.push({
1220
+ value: "新选项"
1221
+ });
1222
+ }
1223
+ },
1224
+ handleAddColumn() {
1225
+ this.data.columns.push({
1226
+ span: "",
1227
+ list: []
1228
+ });
1229
+ },
1230
+ generateRule() {
1231
+ this.data.rules = [];
1232
+ Object.keys(this.validator).forEach(key => {
1233
+ if (this.validator[key]) {
1234
+ this.data.rules.push(this.validator[key]);
1235
+ }
1236
+ });
1237
+ },
1238
+ handleSelectMuliple(value) {
1239
+ if (value) {
1240
+ if (this.data.options.defaultValue) {
1241
+ this.data.options.defaultValue = [this.data.options.defaultValue];
1242
+ } else {
1243
+ this.data.options.defaultValue = [];
1244
+ }
1245
+ } else {
1246
+ if (this.data.options.defaultValue.length > 0) {
1247
+ this.data.options.defaultValue = this.data.options.defaultValue[0];
1248
+ } else {
1249
+ this.data.options.defaultValue = "";
1250
+ }
1251
+ }
1252
+ },
1253
+
1254
+ validateRequired(val) {
1255
+ if (val) {
1256
+ this.validator.required = {
1257
+ required: true,
1258
+ message: `${this.data.name}必须填写`
1259
+ };
1260
+ } else {
1261
+ this.validator.required = null;
1262
+ }
1263
+
1264
+ this.$nextTick(() => {
1265
+ this.generateRule();
1266
+ });
1267
+ },
1268
+
1269
+ validateDataType(val) {
1270
+ if (!this.show) {
1271
+ return false;
1272
+ }
1273
+
1274
+ if (val) {
1275
+ this.validator.type = {
1276
+ type: val,
1277
+ message: this.data.name + "格式不正确"
1278
+ };
1279
+ } else {
1280
+ this.validator.type = null;
1281
+ }
1282
+
1283
+ this.generateRule();
1284
+ },
1285
+ valiatePattern(val) {
1286
+ if (!this.show) {
1287
+ return false;
1288
+ }
1289
+
1290
+ if (val) {
1291
+ this.validator.pattern = {
1292
+ pattern: val,
1293
+ message: this.data.name + "格式不匹配"
1294
+ };
1295
+ } else {
1296
+ this.validator.pattern = null;
1297
+ }
1298
+
1299
+ this.generateRule();
1300
+ },
1301
+ handleInputNumberChange() {
1302
+ if (this.data.options.minRows > this.data.options.maxRows) {
1303
+ this.data.options.maxRows = this.data.options.minRows;
1304
+ }
1305
+ },
1306
+ handleImguploadType(val) {
1307
+ if (val == "picture-card") {
1308
+ this.data.options.drag = false;
1309
+ }
1310
+ },
1311
+ handleImguploadDrag(val) {
1312
+ if (val) {
1313
+ this.data.options.listType = "default";
1314
+ }
1315
+ }
1316
+ },
1317
+ watch: {
1318
+ "data.options.isRange": function(val) {
1319
+ if (typeof val !== "undefined") {
1320
+ if (val) {
1321
+ this.data.options.defaultValue = null;
1322
+ } else {
1323
+ if (Object.keys(this.data.options).indexOf("defaultValue") >= 0)
1324
+ this.data.options.defaultValue = "";
1325
+ }
1326
+ }
1327
+ },
1328
+ "data.options.required": function(val) {
1329
+ this.validateRequired(val);
1330
+ },
1331
+ "data.options.dataType": function(val) {
1332
+ this.validateDataType(val);
1333
+ },
1334
+ "data.options.pattern": function(val) {
1335
+ this.valiatePattern(val);
1336
+ },
1337
+ "data.name": function(val) {
1338
+ if (this.data.options) {
1339
+ this.validateRequired(this.data.options.required);
1340
+ this.validateDataType(this.data.options.dataType);
1341
+ this.valiatePattern(this.data.options.pattern);
1342
+ }
1343
+ }
1344
+ }
1345
+ };
1346
+ </script>
1347
+
1348
+ <style lang="less" scoped>
1349
+ .remoteApis {
1350
+ width: 100%;
1351
+ margin-bottom: 6px;
1352
+ /deep/ .el-input--prefix .el-input__inner {
1353
+ padding-left: 85px;
1354
+ }
1355
+ /deep/ .el-input__prefix {
1356
+ left: 0;
1357
+ width: 75px;
1358
+ color: #999;
1359
+ }
1360
+ }
1361
+ </style>