tianheng-ui 0.0.42 → 0.0.45

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 (17) 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 +25 -20
  5. package/lib/tianheng-ui.js.map +1 -1
  6. package/package.json +65 -58
  7. package/packages/formMaking/Container.vue +57 -48
  8. package/packages/formMaking/CusDialog.vue +2 -2
  9. package/packages/formMaking/FormConfig.vue +18 -9
  10. package/packages/formMaking/GenerateForm.vue +1 -1
  11. package/packages/formMaking/GenerateFormItem.vue +516 -266
  12. package/packages/formMaking/Upload/index.vue +298 -177
  13. package/packages/formMaking/WidgetConfig.vue +1361 -498
  14. package/packages/formMaking/WidgetForm.vue +167 -116
  15. package/packages/formMaking/WidgetFormItem.vue +466 -284
  16. package/packages/formMaking/componentsConfig.js +402 -313
  17. package/packages/formMaking/index.js +25 -27
package/packages/formMaking/WidgetConfig.vue CHANGED
@@ -1,498 +1,1361 @@
1
- <template>
2
- <div v-if="show">
3
- <el-form label-position="top">
4
- <el-form-item :label="$t('fm.config.widget.model')" v-if="data.type!='grid'">
5
- <el-input v-model="data.model"></el-input>
6
- </el-form-item>
7
- <el-form-item :label="$t('fm.config.widget.name')" v-if="data.type!='grid'">
8
- <el-input v-model="data.name"></el-input>
9
- </el-form-item>
10
- <el-form-item :label="$t('fm.config.widget.width')" v-if="Object.keys(data.options).indexOf('width')>=0">
11
- <el-input v-model="data.options.width"></el-input>
12
- </el-form-item>
13
-
14
- <el-form-item :label="$t('fm.config.widget.height')" v-if="Object.keys(data.options).indexOf('height')>=0">
15
- <el-input v-model="data.options.height"></el-input>
16
- </el-form-item>
17
-
18
- <el-form-item :label="$t('fm.config.widget.size')" v-if="Object.keys(data.options).indexOf('size')>=0">
19
- {{$t('fm.config.widget.width')}} <el-input style="width: 90px;" type="number" v-model.number="data.options.size.width"></el-input>
20
- {{$t('fm.config.widget.height')}} <el-input style="width: 90px;" type="number" v-model.number="data.options.size.height"></el-input>
21
- </el-form-item>
22
-
23
- <el-form-item :label="$t('fm.config.widget.placeholder')" v-if="Object.keys(data.options).indexOf('placeholder')>=0 && (data.type!='time' || data.type!='date')">
24
- <el-input v-model="data.options.placeholder"></el-input>
25
- </el-form-item>
26
- <el-form-item :label="$t('fm.config.widget.layout')" v-if="Object.keys(data.options).indexOf('inline')>=0">
27
- <el-radio-group v-model="data.options.inline">
28
- <el-radio-button :label="false">{{$t('fm.config.widget.block')}}</el-radio-button>
29
- <el-radio-button :label="true">{{$t('fm.config.widget.inline')}}</el-radio-button>
30
- </el-radio-group>
31
- </el-form-item>
32
- <el-form-item :label="$t('fm.config.widget.showInput')" v-if="Object.keys(data.options).indexOf('showInput')>=0">
33
- <el-switch v-model="data.options.showInput" ></el-switch>
34
- </el-form-item>
35
- <el-form-item :label="$t('fm.config.widget.min')" v-if="Object.keys(data.options).indexOf('min')>=0">
36
- <el-input-number v-model="data.options.min" :min="0" :max="100" :step="1"></el-input-number>
37
- </el-form-item>
38
- <el-form-item :label="$t('fm.config.widget.max')" v-if="Object.keys(data.options).indexOf('max')>=0">
39
- <el-input-number v-model="data.options.max" :min="0" :max="100" :step="1"></el-input-number>
40
- </el-form-item>
41
- <el-form-item :label="$t('fm.config.widget.step')" v-if="Object.keys(data.options).indexOf('step')>=0">
42
- <el-input-number v-model="data.options.step" :min="0" :max="100" :step="1"></el-input-number>
43
- </el-form-item>
44
- <el-form-item :label="$t('fm.config.widget.multiple')" v-if="data.type=='select' || data.type=='imgupload'">
45
- <el-switch v-model="data.options.multiple" @change="handleSelectMuliple"></el-switch>
46
- </el-form-item>
47
- <el-form-item :label="$t('fm.config.widget.filterable')" v-if="data.type=='select'">
48
- <el-switch v-model="data.options.filterable"></el-switch>
49
- </el-form-item>
50
- <el-form-item :label="$t('fm.config.widget.allowHalf')" v-if="Object.keys(data.options).indexOf('allowHalf')>=0">
51
- <el-switch
52
- v-model="data.options.allowHalf"
53
- >
54
- </el-switch>
55
- </el-form-item>
56
- <el-form-item :label="$t('fm.config.widget.showAlpha')" v-if="Object.keys(data.options).indexOf('showAlpha')>=0">
57
- <el-switch
58
- v-model="data.options.showAlpha"
59
- >
60
- </el-switch>
61
- </el-form-item>
62
- <el-form-item :label="$t('fm.config.widget.showLabel')" v-if="Object.keys(data.options).indexOf('showLabel')>=0">
63
- <el-switch
64
- v-model="data.options.showLabel"
65
- >
66
- </el-switch>
67
- </el-form-item>
68
- <el-form-item :label="$t('fm.config.widget.option')" v-if="Object.keys(data.options).indexOf('options')>=0">
69
- <el-radio-group v-model="data.options.remote" size="mini" style="margin-bottom:10px;">
70
- <el-radio-button :label="false">{{$t('fm.config.widget.staticData')}}</el-radio-button>
71
- <el-radio-button :label="true">{{$t('fm.config.widget.remoteData')}}</el-radio-button>
72
- </el-radio-group>
73
- <template v-if="data.options.remote">
74
- <div>
75
- <el-input size="mini" style="" v-model="data.options.remoteFunc">
76
- <template slot="prepend">{{$t('fm.config.widget.remoteFunc')}}</template>
77
- </el-input>
78
- <el-input size="mini" style="" v-model="data.options.props.value">
79
- <template slot="prepend">{{$t('fm.config.widget.value')}}</template>
80
- </el-input>
81
- <el-input size="mini" style="" v-model="data.options.props.label">
82
- <template slot="prepend">{{$t('fm.config.widget.label')}}</template>
83
- </el-input>
84
- </div>
85
- </template>
86
- <template v-else>
87
- <template v-if="data.type=='radio' || (data.type=='select'&&!data.options.multiple)">
88
- <el-radio-group v-model="data.options.defaultValue">
89
- <draggable tag="ul" :list="data.options.options"
90
- v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
91
- handle=".drag-item"
92
- >
93
- <li v-for="(item, index) in data.options.options" :key="index" >
94
- <el-radio
95
- :label="item.value"
96
- style="margin-right: 5px;"
97
- >
98
- <el-input :style="{'width': data.options.showLabel? '90px': '180px' }" size="mini" v-model="item.value"></el-input>
99
- <el-input style="width:90px;" size="mini" v-if="data.options.showLabel" v-model="item.label"></el-input>
100
- <!-- <input v-model="item.value"/> -->
101
- </el-radio>
102
- <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars"></i></i>
103
- <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"></el-button>
104
-
105
- </li>
106
- </draggable>
107
-
108
- </el-radio-group>
109
- </template>
110
-
111
- <template v-if="data.type=='checkbox' || (data.type=='select' && data.options.multiple)">
112
- <el-checkbox-group v-model="data.options.defaultValue">
113
-
114
- <draggable tag="ul" :list="data.options.options"
115
- v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
116
- handle=".drag-item"
117
- >
118
- <li v-for="(item, index) in data.options.options" :key="index" >
119
- <el-checkbox
120
- :label="item.value"
121
- style="margin-right: 5px;"
122
- >
123
- <el-input :style="{'width': data.options.showLabel? '90px': '180px' }" size="mini" v-model="item.value"></el-input>
124
- <el-input style="width:90px;" size="mini" v-if="data.options.showLabel" v-model="item.label"></el-input>
125
- </el-checkbox>
126
- <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars"></i></i>
127
- <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"></el-button>
128
-
129
- </li>
130
- </draggable>
131
- </el-checkbox-group>
132
- </template>
133
- <div style="margin-left: 22px;">
134
- <el-button type="text" @click="handleAddOption">{{$t('fm.actions.addOption')}}</el-button>
135
- </div>
136
- </template>
137
-
138
- </el-form-item>
139
-
140
- <el-form-item :label="$t('fm.config.widget.remoteData')" v-if="data.type=='cascader'">
141
- <div>
142
- <el-input size="mini" style="" v-model="data.options.remoteFunc">
143
- <template slot="prepend">{{$t('fm.config.widget.remoteFunc')}}</template>
144
- </el-input>
145
- <el-input size="mini" style="" v-model="data.options.props.value">
146
- <template slot="prepend">{{$t('fm.config.widget.value')}}</template>
147
- </el-input>
148
- <el-input size="mini" style="" v-model="data.options.props.label">
149
- <template slot="prepend">{{$t('fm.config.widget.label')}}</template>
150
- </el-input>
151
- <el-input size="mini" style="" v-model="data.options.props.children">
152
- <template slot="prepend">{{$t('fm.config.widget.childrenOption')}}</template>
153
- </el-input>
154
- </div>
155
- </el-form-item>
156
-
157
- <el-form-item :label="$t('fm.config.widget.defaultValue')" v-if="Object.keys(data.options).indexOf('defaultValue')>=0 && (data.type == 'textarea' || data.type == 'input' || data.type=='rate' || data.type=='color' || data.type=='switch' || data.type=='text')">
158
- <el-input v-if="data.type=='textarea'" type="textarea" :rows="5" v-model="data.options.defaultValue"></el-input>
159
- <el-input v-if="data.type=='input'" v-model="data.options.defaultValue"></el-input>
160
- <el-rate v-if="data.type == 'rate'" style="display:inline-block;vertical-align: middle;" :max="data.options.max" :allow-half="data.options.allowHalf" v-model="data.options.defaultValue"></el-rate>
161
- <el-button type="text" v-if="data.type == 'rate'" style="display:inline-block;vertical-align: middle;margin-left: 10px;" @click="data.options.defaultValue=0">{{$t('fm.actions.clear')}}</el-button>
162
- <el-color-picker
163
- v-if="data.type == 'color'"
164
- v-model="data.options.defaultValue"
165
- :show-alpha="data.options.showAlpha"
166
- ></el-color-picker>
167
- <el-switch v-if="data.type=='switch'" v-model="data.options.defaultValue"></el-switch>
168
- <el-input v-if="data.type=='text'" v-model="data.options.defaultValue"></el-input>
169
- </el-form-item>
170
-
171
- <el-form-item :label="$t('fm.config.widget.maxlength')" v-if="(data.type == 'textarea' || data.type == 'input')">
172
- <el-input-number v-model="data.options.maxlength" :min="-1" ></el-input-number>
173
- </el-form-item>
174
- <el-form-item :label="$t('fm.config.widget.showWordLimit')" v-if="(data.type == 'textarea' || data.type == 'input')">
175
- <el-switch v-model="data.options.showWordLimit" ></el-switch>
176
- </el-form-item>
177
-
178
- <template v-if="data.type == 'time' || data.type == 'date'">
179
- <el-form-item :label="$t('fm.config.widget.showType')" v-if="data.type == 'date'">
180
- <el-select v-model="data.options.type">
181
- <el-option value="year"></el-option>
182
- <el-option value="month"></el-option>
183
- <el-option value="date"></el-option>
184
- <el-option value="dates"></el-option>
185
- <!-- <el-option value="week"></el-option> -->
186
- <el-option value="datetime"></el-option>
187
- <el-option value="datetimerange"></el-option>
188
- <el-option value="daterange"></el-option>
189
- </el-select>
190
- </el-form-item>
191
- <el-form-item :label="$t('fm.config.widget.isRange')" v-if="data.type == 'time'">
192
- <el-switch
193
- v-model="data.options.isRange"
194
- >
195
- </el-switch>
196
- </el-form-item>
197
- <el-form-item :label="$t('fm.config.widget.isTimestamp')" v-if="data.type == 'date'">
198
- <el-switch
199
- v-model="data.options.timestamp"
200
- >
201
- </el-switch>
202
- </el-form-item>
203
- <el-form-item :label="$t('fm.config.widget.placeholder')" v-if="(!data.options.isRange && data.type == 'time') || (data.type != 'time' && data.options.type != 'datetimerange' && data.options.type != 'daterange')">
204
- <el-input v-model="data.options.placeholder"></el-input>
205
- </el-form-item>
206
- <el-form-item :label="$t('fm.config.widget.startPlaceholder')" v-if="(data.options.isRange) || data.options.type=='datetimerange' || data.options.type=='daterange'">
207
- <el-input v-model="data.options.startPlaceholder"></el-input>
208
- </el-form-item>
209
- <el-form-item :label="$t('fm.config.widget.endPlaceholder')" v-if="data.options.isRange || data.options.type=='datetimerange' || data.options.type=='daterange'">
210
- <el-input v-model="data.options.endPlaceholder"></el-input>
211
- </el-form-item>
212
- <el-form-item :label="$t('fm.config.widget.format')">
213
- <el-input v-model="data.options.format"></el-input>
214
- </el-form-item>
215
- <el-form-item :label="$t('fm.config.widget.defaultValue')" v-if="data.type=='time' && Object.keys(data.options).indexOf('isRange')>=0">
216
- <el-time-picker
217
- key="1"
218
- style="width: 100%;"
219
- v-if="!data.options.isRange"
220
- v-model="data.options.defaultValue"
221
- :arrowControl="data.options.arrowControl"
222
- :value-format="data.options.format"
223
- >
224
- </el-time-picker>
225
- <el-time-picker
226
- key="2"
227
- v-if="data.options.isRange"
228
- style="width: 100%;"
229
- v-model="data.options.defaultValue"
230
- is-range
231
- :arrowControl="data.options.arrowControl"
232
- :value-format="data.options.format"
233
- >
234
- </el-time-picker>
235
- </el-form-item>
236
- </template>
237
-
238
- <template v-if="data.type=='imgupload'">
239
-
240
- <el-form-item :label="$t('fm.config.widget.limit')">
241
- <el-input type="number" v-model.number="data.options.length"></el-input>
242
- </el-form-item>
243
- <el-form-item :label="$t('fm.config.widget.isQiniu')">
244
- <el-switch v-model="data.options.isQiniu"></el-switch>
245
- </el-form-item>
246
- <template v-if="data.options.isQiniu">
247
- <el-form-item label="Domain" :required="true">
248
- <el-input v-model="data.options.domain"></el-input>
249
- </el-form-item>
250
- <el-form-item :label="$t('fm.config.widget.tokenFunc')" :required="true">
251
- <el-input v-model="data.options.tokenFunc"></el-input>
252
- </el-form-item>
253
- </template>
254
- <template v-else>
255
- <el-form-item :label="$t('fm.config.widget.imageAction')" :required="true">
256
- <el-input v-model="data.options.action"></el-input>
257
- </el-form-item>
258
- </template>
259
- </template>
260
-
261
- <template v-if="data.type=='blank'">
262
- <el-form-item :label="$t('fm.config.widget.defaultType')">
263
- <el-select v-model="data.options.defaultType">
264
- <el-option value="String" :label="$t('fm.config.widget.string')"></el-option>
265
- <el-option value="Object" :label="$t('fm.config.widget.object')"></el-option>
266
- <el-option value="Array" :label="$t('fm.config.widget.array')"></el-option>
267
- </el-select>
268
- </el-form-item>
269
- </template>
270
-
271
- <template v-if="data.type == 'grid'">
272
- <el-form-item :label="$t('fm.config.widget.gutter')">
273
- <el-input type="number" v-model.number="data.options.gutter"></el-input>
274
- </el-form-item>
275
- <el-form-item :label="$t('fm.config.widget.columnOption')">
276
- <draggable tag="ul" :list="data.columns"
277
- v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
278
- handle=".drag-item"
279
- >
280
- <li v-for="(item, index) in data.columns" :key="index" >
281
- <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars"></i></i>
282
- <el-input :placeholder="$t('fm.config.widget.span')" size="mini" style="width: 100px;" type="number" v-model.number="item.span"></el-input>
283
-
284
- <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"></el-button>
285
-
286
- </li>
287
- </draggable>
288
- <div style="margin-left: 22px;">
289
- <el-button type="text" @click="handleAddColumn">{{$t('fm.actions.addColumn')}}</el-button>
290
- </div>
291
- </el-form-item>
292
- <el-form-item :label="$t('fm.config.widget.justify')">
293
- <el-select v-model="data.options.justify">
294
- <el-option value="start" :label="$t('fm.config.widget.justifyStart')"></el-option>
295
- <el-option value="end" :label="$t('fm.config.widget.justifyEnd')"></el-option>
296
- <el-option value="center" :label="$t('fm.config.widget.justifyCenter')"></el-option>
297
- <el-option value="space-around" :label="$t('fm.config.widget.justifySpaceAround')"></el-option>
298
- <el-option value="space-between" :label="$t('fm.config.widget.justifySpaceBetween')"></el-option>
299
- </el-select>
300
- </el-form-item>
301
- <el-form-item :label="$t('fm.config.widget.align')">
302
- <el-select v-model="data.options.align">
303
- <el-option value="top" :label="$t('fm.config.widget.alignTop')"></el-option>
304
- <el-option value="middle" :label="$t('fm.config.widget.alignMiddle')"></el-option>
305
- <el-option value="bottom" :label="$t('fm.config.widget.alignBottom')"></el-option>
306
- </el-select>
307
- </el-form-item>
308
- </template>
309
-
310
-
311
- <template v-if="data.type != 'grid'">
312
- <el-form-item :label="$t('fm.config.widget.attribute')">
313
- <el-checkbox v-model="data.options.readonly" v-if="Object.keys(data.options).indexOf('readonly')>=0">{{$t('fm.config.widget.readonly')}}</el-checkbox>
314
- <el-checkbox v-model="data.options.disabled" v-if="Object.keys(data.options).indexOf('disabled')>=0">{{$t('fm.config.widget.disabled')}} </el-checkbox>
315
- <el-checkbox v-model="data.options.editable" v-if="Object.keys(data.options).indexOf('editable')>=0">{{$t('fm.config.widget.editable')}}</el-checkbox>
316
- <el-checkbox v-model="data.options.clearable" v-if="Object.keys(data.options).indexOf('clearable')>=0">{{$t('fm.config.widget.clearable')}} </el-checkbox>
317
- <el-checkbox v-model="data.options.arrowControl" v-if="Object.keys(data.options).indexOf('arrowControl')>=0">{{$t('fm.config.widget.arrowControl')}}</el-checkbox>
318
- <el-checkbox v-model="data.options.isDelete" v-if="Object.keys(data.options).indexOf('isDelete')>=0">{{$t('fm.config.widget.isDelete')}}</el-checkbox>
319
- <el-checkbox v-model="data.options.isEdit" v-if="Object.keys(data.options).indexOf('isEdit')>=0">{{$t('fm.config.widget.isEdit')}}</el-checkbox>
320
-
321
- </el-form-item>
322
- <el-form-item :label="$t('fm.config.widget.validate')">
323
- <div v-if="Object.keys(data.options).indexOf('required')>=0">
324
- <el-checkbox v-model="data.options.required">{{$t('fm.config.widget.required')}}</el-checkbox>
325
- </div>
326
- <el-select v-if="Object.keys(data.options).indexOf('dataType')>=0" v-model="data.options.dataType" size="mini" >
327
- <el-option value="string" :label="$t('fm.config.widget.string')"></el-option>
328
- <el-option value="number" :label="$t('fm.config.widget.number')"></el-option>
329
- <el-option value="boolean" :label="$t('fm.config.widget.boolean')"></el-option>
330
- <el-option value="integer" :label="$t('fm.config.widget.integer')"></el-option>
331
- <el-option value="float" :label="$t('fm.config.widget.float')"></el-option>
332
- <el-option value="url" :label="$t('fm.config.widget.url')"></el-option>
333
- <el-option value="email" :label="$t('fm.config.widget.email')"></el-option>
334
- <el-option value="hex" :label="$t('fm.config.widget.hex')"></el-option>
335
- </el-select>
336
-
337
- <div v-if="Object.keys(data.options).indexOf('pattern')>=0">
338
- <el-input size="mini" class="config-pattern-input" v-model.lazy="data.options.pattern" style=" width: 240px;" :placeholder="$t('fm.config.widget.patternPlaceholder')">
339
- <template slot="prepend" >/</template>
340
- <template slot="append" >/</template>
341
- </el-input>
342
- </div>
343
- </el-form-item>
344
- </template>
345
- </el-form>
346
- </div>
347
- </template>
348
-
349
- <script>
350
- import Draggable from 'vuedraggable'
351
-
352
- export default {
353
- components: {
354
- Draggable
355
- },
356
- props: ['data'],
357
- data () {
358
- return {
359
- validator: {
360
- type: null,
361
- required: null,
362
- pattern: null,
363
- range: null,
364
- length: null
365
- }
366
- }
367
- },
368
- computed: {
369
- show () {
370
- if (this.data && Object.keys(this.data).length > 0) {
371
- return true
372
- }
373
- return false
374
- }
375
- },
376
- methods: {
377
- handleOptionsRemove (index) {
378
- if (this.data.type === 'grid') {
379
- this.data.columns.splice(index, 1)
380
- } else {
381
- this.data.options.options.splice(index, 1)
382
- }
383
-
384
- },
385
- handleAddOption () {
386
- if (this.data.options.showLabel) {
387
- this.data.options.options.push({
388
- value: this.$t('fm.config.widget.newOption'),
389
- label: this.$t('fm.config.widget.newOption')
390
- })
391
- } else {
392
- this.data.options.options.push({
393
- value: this.$t('fm.config.widget.newOption')
394
- })
395
- }
396
-
397
- },
398
- handleAddColumn () {
399
- this.data.columns.push({
400
- span: '',
401
- list: []
402
- })
403
- },
404
- generateRule () {
405
- this.data.rules = []
406
- Object.keys(this.validator).forEach(key => {
407
- if (this.validator[key]) {
408
- this.data.rules.push(this.validator[key])
409
- }
410
- })
411
- },
412
- handleSelectMuliple (value) {
413
- if (value) {
414
- if (this.data.options.defaultValue) {
415
- this.data.options.defaultValue = [this.data.options.defaultValue]
416
- } else {
417
- this.data.options.defaultValue = []
418
- }
419
-
420
- } else {
421
- if (this.data.options.defaultValue.length>0){
422
- this.data.options.defaultValue = this.data.options.defaultValue[0]
423
- } else {
424
- this.data.options.defaultValue = ''
425
- }
426
-
427
- }
428
- },
429
-
430
- validateRequired (val) {
431
- if (val) {
432
- this.validator.required = {required: true, message: `${this.data.name}${this.$t('fm.config.widget.validatorRequired')}`}
433
- } else {
434
- this.validator.required = null
435
- }
436
-
437
- this.$nextTick(() => {
438
- this.generateRule()
439
- })
440
- },
441
-
442
- validateDataType (val) {
443
- if (!this.show) {
444
- return false
445
- }
446
-
447
- if (val) {
448
- this.validator.type = {type: val, message: this.data.name + this.$t('fm.config.widget.validatorType')}
449
- } else {
450
- this.validator.type = null
451
- }
452
-
453
- this.generateRule()
454
- },
455
- valiatePattern (val) {
456
- if (!this.show) {
457
- return false
458
- }
459
-
460
- if (val) {
461
- this.validator.pattern = {pattern: val, message: this.data.name + this.$t('fm.config.widget.validatorPattern')}
462
- } else {
463
- this.validator.pattern = null
464
- }
465
-
466
- this.generateRule()
467
- }
468
- },
469
- watch: {
470
- 'data.options.isRange': function(val) {
471
- if (typeof val !== 'undefined') {
472
- if (val) {
473
- this.data.options.defaultValue = null
474
- } else {
475
- if (Object.keys(this.data.options).indexOf('defaultValue')>=0)
476
- this.data.options.defaultValue = ''
477
- }
478
- }
479
- },
480
- 'data.options.required': function(val) {
481
- this.validateRequired(val)
482
- },
483
- 'data.options.dataType': function (val) {
484
- this.validateDataType(val)
485
- },
486
- 'data.options.pattern': function (val) {
487
- this.valiatePattern(val)
488
- },
489
- 'data.name': function (val) {
490
- if (this.data.options) {
491
- this.validateRequired(this.data.options.required)
492
- this.validateDataType(this.data.options.dataType)
493
- this.valiatePattern(this.data.options.pattern)
494
- }
495
- }
496
- }
497
- }
498
- </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>