tianheng-ui 0.1.14 → 0.1.16
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.
|
@@ -13,33 +13,33 @@
|
|
|
13
13
|
</div>
|
|
14
14
|
<div v-if="activeTab.value === 0" class="fields">
|
|
15
15
|
<el-checkbox
|
|
16
|
-
v-model="
|
|
17
|
-
:indeterminate="
|
|
18
|
-
@change="val => handleCheckAllChange(val, '
|
|
16
|
+
v-model="searchField.isCheckAll"
|
|
17
|
+
:indeterminate="searchField.isIndeterminate"
|
|
18
|
+
@change="val => handleCheckAllChange(val, 'searchField')"
|
|
19
19
|
>全选</el-checkbox
|
|
20
20
|
>
|
|
21
21
|
<el-checkbox
|
|
22
22
|
v-for="item in fields"
|
|
23
23
|
:label="item.prop"
|
|
24
|
-
:key="`
|
|
24
|
+
:key="`searchField-${item.prop}-${item.isSearch}`"
|
|
25
25
|
:checked="item.isSearch"
|
|
26
|
-
@change="val => handleCheckboxChange(val, '
|
|
26
|
+
@change="val => handleCheckboxChange(val, 'searchField', item)"
|
|
27
27
|
>{{ item.label }}</el-checkbox
|
|
28
28
|
>
|
|
29
29
|
</div>
|
|
30
30
|
<div v-if="activeTab.value === 1" class="fields">
|
|
31
31
|
<el-checkbox
|
|
32
|
-
v-model="
|
|
33
|
-
:indeterminate="
|
|
34
|
-
@change="val => handleCheckAllChange(val, '
|
|
32
|
+
v-model="tableField.isCheckAll"
|
|
33
|
+
:indeterminate="tableField.isIndeterminate"
|
|
34
|
+
@change="val => handleCheckAllChange(val, 'tableField')"
|
|
35
35
|
>全选</el-checkbox
|
|
36
36
|
>
|
|
37
37
|
<el-checkbox
|
|
38
38
|
v-for="item in fields"
|
|
39
39
|
:label="item.prop"
|
|
40
|
-
:key="`
|
|
40
|
+
:key="`tableField-${item.prop}-${item.isTable}`"
|
|
41
41
|
:checked="item.isTable"
|
|
42
|
-
@change="val => handleCheckboxChange(val, '
|
|
42
|
+
@change="val => handleCheckboxChange(val, 'tableField', item)"
|
|
43
43
|
>{{ item.label }}</el-checkbox
|
|
44
44
|
>
|
|
45
45
|
</div>
|
|
@@ -49,12 +49,37 @@
|
|
|
49
49
|
label-position="left"
|
|
50
50
|
label-width="80px"
|
|
51
51
|
size="mini"
|
|
52
|
+
:rules="formRules"
|
|
53
|
+
ref="formRef"
|
|
52
54
|
>
|
|
53
55
|
<el-collapse v-model="tableCollapse">
|
|
54
|
-
<el-collapse-item title="表格配置" name="
|
|
55
|
-
<el-form-item label="
|
|
56
|
+
<el-collapse-item title="表格配置" name="group-table">
|
|
57
|
+
<el-form-item label="列表接口" required prop="table.mounted.api">
|
|
58
|
+
<el-select
|
|
59
|
+
v-model="config.table.mounted.api"
|
|
60
|
+
style="width:100%"
|
|
61
|
+
value-key="id"
|
|
62
|
+
clearable
|
|
63
|
+
placeholder="请选择"
|
|
64
|
+
no-data-text="暂无接口，请前往【接口模块】创建"
|
|
65
|
+
>
|
|
66
|
+
<el-option
|
|
67
|
+
v-for="item in apiOptions"
|
|
68
|
+
:key="item.id"
|
|
69
|
+
:label="item.label"
|
|
70
|
+
:value="item.id"
|
|
71
|
+
>
|
|
72
|
+
</el-option>
|
|
73
|
+
</el-select>
|
|
74
|
+
</el-form-item>
|
|
75
|
+
<el-form-item label="开启查询">
|
|
56
76
|
<el-switch v-model="config.search.show"> </el-switch>
|
|
57
77
|
</el-form-item>
|
|
78
|
+
<el-form-item label="列表序号">
|
|
79
|
+
<el-switch v-model="config.table.sequence"> </el-switch>
|
|
80
|
+
</el-form-item>
|
|
81
|
+
</el-collapse-item>
|
|
82
|
+
<el-collapse-item title="排序配置" name="group-sort">
|
|
58
83
|
<el-form-item label="排序类型">
|
|
59
84
|
<el-radio-group v-model="config.table.sort.type">
|
|
60
85
|
<el-radio-button label="1">降序</el-radio-button>
|
|
@@ -76,10 +101,9 @@
|
|
|
76
101
|
</el-option>
|
|
77
102
|
</el-select>
|
|
78
103
|
</el-form-item>
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
<el-form-item label="分页设置">
|
|
104
|
+
</el-collapse-item>
|
|
105
|
+
<el-collapse-item title="分页配置" name="group-pageInfo">
|
|
106
|
+
<el-form-item label="开启分页">
|
|
83
107
|
<el-switch v-model="config.table.pageInfo.show"> </el-switch>
|
|
84
108
|
</el-form-item>
|
|
85
109
|
<el-form-item v-if="config.table.pageInfo.show" label="分页条数">
|
|
@@ -91,7 +115,7 @@
|
|
|
91
115
|
</el-radio-group>
|
|
92
116
|
</el-form-item>
|
|
93
117
|
</el-collapse-item>
|
|
94
|
-
<el-collapse-item title="
|
|
118
|
+
<el-collapse-item title="提示语配置" name="group-hint">
|
|
95
119
|
<el-form-item label="空数据">
|
|
96
120
|
<el-input
|
|
97
121
|
v-model="config.table.empty.text"
|
|
@@ -105,7 +129,9 @@
|
|
|
105
129
|
></el-input>
|
|
106
130
|
</el-form-item>
|
|
107
131
|
</el-collapse-item>
|
|
108
|
-
<el-collapse-item name="
|
|
132
|
+
<!-- <el-collapse-item title="数据接口配置" name="group-network">
|
|
133
|
+
</el-collapse-item> -->
|
|
134
|
+
<el-collapse-item name="group-button">
|
|
109
135
|
<template slot="title">
|
|
110
136
|
<div class="collapse-title">
|
|
111
137
|
<div>按钮配置</div>
|
|
@@ -131,6 +157,139 @@
|
|
|
131
157
|
<i class="el-icon-set-up" @click="handleActionConfig(item)"></i>
|
|
132
158
|
</div>
|
|
133
159
|
</el-collapse-item>
|
|
160
|
+
<el-collapse-item
|
|
161
|
+
title="cell 样式配置（移动端）"
|
|
162
|
+
name="group-style_cell"
|
|
163
|
+
>
|
|
164
|
+
<el-form-item label="外边距">
|
|
165
|
+
<el-input
|
|
166
|
+
v-model="config.table.style.cell.margin"
|
|
167
|
+
placeholder="请输入"
|
|
168
|
+
clearable
|
|
169
|
+
></el-input>
|
|
170
|
+
</el-form-item>
|
|
171
|
+
<el-form-item label="内边距">
|
|
172
|
+
<el-input
|
|
173
|
+
v-model="config.table.style.cell.padding"
|
|
174
|
+
placeholder="请输入"
|
|
175
|
+
clearable
|
|
176
|
+
></el-input>
|
|
177
|
+
</el-form-item>
|
|
178
|
+
<el-form-item label="分割线">
|
|
179
|
+
<el-input
|
|
180
|
+
v-model="config.table.style.cell['border-bottom']"
|
|
181
|
+
placeholder="请输入"
|
|
182
|
+
clearable
|
|
183
|
+
></el-input>
|
|
184
|
+
</el-form-item>
|
|
185
|
+
<el-form-item label="自定义">
|
|
186
|
+
<el-input
|
|
187
|
+
v-model="config.table.style.cell.customStyle"
|
|
188
|
+
type="textarea"
|
|
189
|
+
:rows="2"
|
|
190
|
+
placeholder="请输入"
|
|
191
|
+
>
|
|
192
|
+
</el-input>
|
|
193
|
+
</el-form-item>
|
|
194
|
+
</el-collapse-item>
|
|
195
|
+
<el-collapse-item
|
|
196
|
+
title="title 样式配置（移动端）"
|
|
197
|
+
name="group-style_title"
|
|
198
|
+
>
|
|
199
|
+
<el-form-item label="外边距">
|
|
200
|
+
<el-input
|
|
201
|
+
v-model="config.table.style.title.margin"
|
|
202
|
+
placeholder="请输入"
|
|
203
|
+
clearable
|
|
204
|
+
></el-input>
|
|
205
|
+
</el-form-item>
|
|
206
|
+
<el-form-item label="内边距">
|
|
207
|
+
<el-input
|
|
208
|
+
v-model="config.table.style.title.padding"
|
|
209
|
+
placeholder="请输入"
|
|
210
|
+
clearable
|
|
211
|
+
></el-input>
|
|
212
|
+
</el-form-item>
|
|
213
|
+
<el-form-item label="宽度">
|
|
214
|
+
<el-input
|
|
215
|
+
v-model="config.table.style.title.width"
|
|
216
|
+
placeholder="请输入"
|
|
217
|
+
clearable
|
|
218
|
+
></el-input>
|
|
219
|
+
</el-form-item>
|
|
220
|
+
<el-form-item label="对齐方式">
|
|
221
|
+
<el-input
|
|
222
|
+
v-model="config.table.style.title['text-align']"
|
|
223
|
+
placeholder="请输入"
|
|
224
|
+
clearable
|
|
225
|
+
></el-input>
|
|
226
|
+
</el-form-item>
|
|
227
|
+
<el-form-item label="颜色">
|
|
228
|
+
<el-input
|
|
229
|
+
v-model="config.table.style.title.color"
|
|
230
|
+
placeholder="请输入"
|
|
231
|
+
clearable
|
|
232
|
+
></el-input>
|
|
233
|
+
</el-form-item>
|
|
234
|
+
<el-form-item label="自定义">
|
|
235
|
+
<el-input
|
|
236
|
+
v-model="config.table.style.title.customStyle"
|
|
237
|
+
type="textarea"
|
|
238
|
+
:rows="2"
|
|
239
|
+
placeholder="请输入"
|
|
240
|
+
>
|
|
241
|
+
</el-input>
|
|
242
|
+
</el-form-item>
|
|
243
|
+
</el-collapse-item>
|
|
244
|
+
<el-collapse-item
|
|
245
|
+
title="value 样式配置（移动端）"
|
|
246
|
+
name="group-style_value"
|
|
247
|
+
>
|
|
248
|
+
<el-form-item label="外边距">
|
|
249
|
+
<el-input
|
|
250
|
+
v-model="config.table.style.value.margin"
|
|
251
|
+
placeholder="请输入"
|
|
252
|
+
clearable
|
|
253
|
+
></el-input>
|
|
254
|
+
</el-form-item>
|
|
255
|
+
<el-form-item label="内边距">
|
|
256
|
+
<el-input
|
|
257
|
+
v-model="config.table.style.value.padding"
|
|
258
|
+
placeholder="请输入"
|
|
259
|
+
clearable
|
|
260
|
+
></el-input>
|
|
261
|
+
</el-form-item>
|
|
262
|
+
<el-form-item label="宽度">
|
|
263
|
+
<el-input
|
|
264
|
+
v-model="config.table.style.value.width"
|
|
265
|
+
placeholder="请输入"
|
|
266
|
+
clearable
|
|
267
|
+
></el-input>
|
|
268
|
+
</el-form-item>
|
|
269
|
+
<el-form-item label="对齐方式">
|
|
270
|
+
<el-input
|
|
271
|
+
v-model="config.table.style.value['text-align']"
|
|
272
|
+
placeholder="请输入"
|
|
273
|
+
clearable
|
|
274
|
+
></el-input>
|
|
275
|
+
</el-form-item>
|
|
276
|
+
<el-form-item label="颜色">
|
|
277
|
+
<el-input
|
|
278
|
+
v-model="config.table.style.value.color"
|
|
279
|
+
placeholder="请输入"
|
|
280
|
+
clearable
|
|
281
|
+
></el-input>
|
|
282
|
+
</el-form-item>
|
|
283
|
+
<el-form-item label="自定义">
|
|
284
|
+
<el-input
|
|
285
|
+
v-model="config.table.style.value.customStyle"
|
|
286
|
+
type="textarea"
|
|
287
|
+
:rows="2"
|
|
288
|
+
placeholder="请输入"
|
|
289
|
+
>
|
|
290
|
+
</el-input>
|
|
291
|
+
</el-form-item>
|
|
292
|
+
</el-collapse-item>
|
|
134
293
|
</el-collapse>
|
|
135
294
|
</el-form>
|
|
136
295
|
</div>
|
|
@@ -142,7 +301,7 @@
|
|
|
142
301
|
:showFooter="false"
|
|
143
302
|
>
|
|
144
303
|
<div class="toolsSeting th-flex_box">
|
|
145
|
-
<el-card class="th-
|
|
304
|
+
<el-card class="th-flex_aside" style="width:200px;margin-right:10px;">
|
|
146
305
|
<el-tree
|
|
147
306
|
:data="Object.values(config.tools || [])"
|
|
148
307
|
:props="{ label: 'name' }"
|
|
@@ -150,7 +309,7 @@
|
|
|
150
309
|
@node-click="handleActionConfig"
|
|
151
310
|
></el-tree>
|
|
152
311
|
</el-card>
|
|
153
|
-
<el-card v-if="dialog.data" class="th-
|
|
312
|
+
<el-card v-if="dialog.data" class="th-fiex_content">
|
|
154
313
|
<el-form
|
|
155
314
|
ref="form"
|
|
156
315
|
:model="dialog.data"
|
|
@@ -159,10 +318,11 @@
|
|
|
159
318
|
>
|
|
160
319
|
<el-form-item label="按钮模型">
|
|
161
320
|
<el-button
|
|
162
|
-
:type="dialog.data.type"
|
|
163
|
-
:icon="dialog.data.icon"
|
|
164
|
-
:plain="dialog.data.plain"
|
|
165
|
-
:round="dialog.data.round"
|
|
321
|
+
:type="dialog.data.style.type"
|
|
322
|
+
:icon="dialog.data.style.icon"
|
|
323
|
+
:plain="dialog.data.style.plain"
|
|
324
|
+
:round="dialog.data.style.round"
|
|
325
|
+
:size="dialog.data.style.size"
|
|
166
326
|
>{{ dialog.data.text }}</el-button
|
|
167
327
|
>
|
|
168
328
|
</el-form-item>
|
|
@@ -170,7 +330,7 @@
|
|
|
170
330
|
<el-input v-model="dialog.data.text"></el-input>
|
|
171
331
|
</el-form-item>
|
|
172
332
|
<el-form-item label="按钮类型">
|
|
173
|
-
<el-radio-group v-model="dialog.data.type">
|
|
333
|
+
<el-radio-group v-model="dialog.data.style.type">
|
|
174
334
|
<el-radio label="">默认</el-radio>
|
|
175
335
|
<el-radio label="primary">主要按钮</el-radio>
|
|
176
336
|
<el-radio label="success">成功按钮</el-radio>
|
|
@@ -179,20 +339,30 @@
|
|
|
179
339
|
<el-radio label="danger">危险按钮</el-radio>
|
|
180
340
|
</el-radio-group>
|
|
181
341
|
</el-form-item>
|
|
182
|
-
<el-form-item label="
|
|
183
|
-
<el-
|
|
342
|
+
<el-form-item label="按钮大小">
|
|
343
|
+
<el-radio-group v-model="dialog.data.style.size" size="mini">
|
|
344
|
+
<el-radio-button label="medium"></el-radio-button>
|
|
345
|
+
<el-radio-button label="small"></el-radio-button>
|
|
346
|
+
<el-radio-button label="mini"></el-radio-button>
|
|
347
|
+
</el-radio-group>
|
|
348
|
+
</el-form-item>
|
|
349
|
+
|
|
350
|
+
<el-form-item label="是否空心">
|
|
351
|
+
<el-switch v-model="dialog.data.style.plain"> </el-switch>
|
|
352
|
+
</el-form-item>
|
|
353
|
+
<el-form-item label="是否圆角">
|
|
354
|
+
<el-switch v-model="dialog.data.style.round"> </el-switch>
|
|
184
355
|
</el-form-item>
|
|
185
|
-
<el-form-item label="
|
|
186
|
-
<el-switch v-model="dialog.data.round"> </el-switch>
|
|
356
|
+
<el-form-item label="是否圆型">
|
|
357
|
+
<el-switch v-model="dialog.data.style.round"> </el-switch>
|
|
187
358
|
</el-form-item>
|
|
188
359
|
<el-form-item label="按钮图标">
|
|
189
|
-
<th-icons v-model="dialog.data.icon"></th-icons>
|
|
360
|
+
<th-icons v-model="dialog.data.style.icon"></th-icons>
|
|
190
361
|
</el-form-item>
|
|
191
362
|
<el-form-item label="关联表单">
|
|
192
363
|
<el-select
|
|
193
364
|
v-model="dialog.data.form"
|
|
194
365
|
style="width:100%"
|
|
195
|
-
value-key="id"
|
|
196
366
|
clearable
|
|
197
367
|
placeholder="请关联表单"
|
|
198
368
|
no-data-text="暂无表单，请前往【表单模块】创建"
|
|
@@ -201,7 +371,7 @@
|
|
|
201
371
|
v-for="item in formOptions"
|
|
202
372
|
:key="item.id"
|
|
203
373
|
:label="item.label"
|
|
204
|
-
:value="item"
|
|
374
|
+
:value="item.id"
|
|
205
375
|
>
|
|
206
376
|
</el-option>
|
|
207
377
|
</el-select>
|
|
@@ -238,7 +408,7 @@ export default {
|
|
|
238
408
|
config: {
|
|
239
409
|
type: Object,
|
|
240
410
|
default: () => {
|
|
241
|
-
return {
|
|
411
|
+
return {};
|
|
242
412
|
}
|
|
243
413
|
},
|
|
244
414
|
fields: {
|
|
@@ -258,15 +428,30 @@ export default {
|
|
|
258
428
|
{ title: "列表属性", value: 2 }
|
|
259
429
|
],
|
|
260
430
|
activeTab: { title: "查询字段", value: 0 },
|
|
261
|
-
|
|
431
|
+
searchField: {
|
|
262
432
|
isCheckAll: false,
|
|
263
433
|
isIndeterminate: false
|
|
264
434
|
},
|
|
265
|
-
|
|
435
|
+
tableField: {
|
|
266
436
|
isCheckAll: false,
|
|
267
437
|
isIndeterminate: false
|
|
268
438
|
},
|
|
269
|
-
tableCollapse: [
|
|
439
|
+
tableCollapse: [
|
|
440
|
+
"group-table",
|
|
441
|
+
"group-pageInfo",
|
|
442
|
+
"group-sort",
|
|
443
|
+
"group-hint",
|
|
444
|
+
"group-style_cell",
|
|
445
|
+
"group-style_title",
|
|
446
|
+
"group-style_value",
|
|
447
|
+
"group-network",
|
|
448
|
+
"group-button"
|
|
449
|
+
],
|
|
450
|
+
formRules: {
|
|
451
|
+
"table.mounted.api": [
|
|
452
|
+
{ required: true, message: "请选择列表接口", trigger: "change" }
|
|
453
|
+
]
|
|
454
|
+
},
|
|
270
455
|
dialog: { show: false, data: null }
|
|
271
456
|
};
|
|
272
457
|
},
|
|
@@ -299,13 +484,13 @@ export default {
|
|
|
299
484
|
item.isSearch = this.searchActiveFields.includes(item.prop);
|
|
300
485
|
item.isTable = this.tableActiveFields.includes(item.prop);
|
|
301
486
|
});
|
|
302
|
-
this.
|
|
487
|
+
this.searchField = {
|
|
303
488
|
isCheckAll: this.searchActiveFields.length === this.fields.length,
|
|
304
489
|
isIndeterminate:
|
|
305
490
|
this.searchActiveFields.length !== 0 &&
|
|
306
491
|
this.searchActiveFields.length !== this.fields.length
|
|
307
492
|
};
|
|
308
|
-
this.
|
|
493
|
+
this.tableField = {
|
|
309
494
|
isCheckAll: this.tableActiveFields.length === this.fields.length,
|
|
310
495
|
isIndeterminate:
|
|
311
496
|
this.tableActiveFields.length !== 0 &&
|
|
@@ -316,28 +501,27 @@ export default {
|
|
|
316
501
|
this.activeTab = val;
|
|
317
502
|
},
|
|
318
503
|
handleCheckAllChange(bool, action) {
|
|
319
|
-
if (action === "
|
|
504
|
+
if (action === "searchField") {
|
|
320
505
|
this.fields.forEach(item => {
|
|
321
506
|
item.isSearch = bool;
|
|
322
507
|
});
|
|
323
508
|
const data = deepClone(this.fields);
|
|
324
509
|
this.config.search.options = bool ? data : [];
|
|
325
|
-
this.
|
|
326
|
-
this.search.isIndeterminate = false;
|
|
510
|
+
this.searchField = { isCheckAll: bool, isIndeterminate: false };
|
|
327
511
|
return;
|
|
328
512
|
}
|
|
329
|
-
if (action === "
|
|
513
|
+
if (action === "tableField") {
|
|
330
514
|
this.fields.forEach(item => {
|
|
331
515
|
item.isTable = bool;
|
|
332
516
|
});
|
|
333
517
|
const data = deepClone(this.fields);
|
|
334
518
|
this.config.table.options = bool ? data : [];
|
|
335
|
-
this.
|
|
336
|
-
|
|
519
|
+
this.tableField = { isCheckAll: bool, isIndeterminate: false };
|
|
520
|
+
return;
|
|
337
521
|
}
|
|
338
522
|
},
|
|
339
523
|
handleCheckboxChange(bool, action, data) {
|
|
340
|
-
if (action === "
|
|
524
|
+
if (action === "searchField") {
|
|
341
525
|
data.isSearch = bool;
|
|
342
526
|
bool
|
|
343
527
|
? this.config.search.options.push(deepClone(data))
|
|
@@ -346,7 +530,7 @@ export default {
|
|
|
346
530
|
return item.prop !== data.prop;
|
|
347
531
|
}
|
|
348
532
|
));
|
|
349
|
-
this.
|
|
533
|
+
this.searchField = {
|
|
350
534
|
isCheckAll: this.config.search.options.length === this.fields.length,
|
|
351
535
|
isIndeterminate:
|
|
352
536
|
this.config.search.options.length !== 0 &&
|
|
@@ -354,7 +538,7 @@ export default {
|
|
|
354
538
|
};
|
|
355
539
|
return;
|
|
356
540
|
}
|
|
357
|
-
if (action === "
|
|
541
|
+
if (action === "tableField") {
|
|
358
542
|
data.isTable = bool;
|
|
359
543
|
bool
|
|
360
544
|
? this.config.table.options.push(deepClone(data))
|
|
@@ -363,7 +547,7 @@ export default {
|
|
|
363
547
|
return item.prop !== data.prop;
|
|
364
548
|
}
|
|
365
549
|
));
|
|
366
|
-
this.
|
|
550
|
+
this.tableField = {
|
|
367
551
|
isCheckAll: this.config.table.options.length === this.fields.length,
|
|
368
552
|
isIndeterminate:
|
|
369
553
|
this.config.table.options.length !== 0 &&
|
|
@@ -374,6 +558,17 @@ export default {
|
|
|
374
558
|
},
|
|
375
559
|
handleActionConfig(data) {
|
|
376
560
|
this.dialog = { show: true, data };
|
|
561
|
+
},
|
|
562
|
+
handleFormValidate() {
|
|
563
|
+
return new Promise((resolve, reject) => {
|
|
564
|
+
if (this.$refs.formRef) {
|
|
565
|
+
this.$refs.formRef.validate(valid => {
|
|
566
|
+
resolve(valid);
|
|
567
|
+
});
|
|
568
|
+
} else {
|
|
569
|
+
reject();
|
|
570
|
+
}
|
|
571
|
+
});
|
|
377
572
|
}
|
|
378
573
|
}
|
|
379
574
|
};
|