tianheng-ui 0.1.14 → 0.1.15
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.
package/package.json
CHANGED
|
@@ -6,6 +6,9 @@ export const search = {
|
|
|
6
6
|
|
|
7
7
|
// 列表配置
|
|
8
8
|
export const table = {
|
|
9
|
+
mounted: {
|
|
10
|
+
api: ""
|
|
11
|
+
},
|
|
9
12
|
options: [],
|
|
10
13
|
pageInfo: {
|
|
11
14
|
show: true,
|
|
@@ -95,12 +98,7 @@ export const tools = {
|
|
|
95
98
|
};
|
|
96
99
|
|
|
97
100
|
// 接口配置
|
|
98
|
-
export const network = {
|
|
99
|
-
mounted: {
|
|
100
|
-
method: "get",
|
|
101
|
-
api: "/list"
|
|
102
|
-
}
|
|
103
|
-
};
|
|
101
|
+
export const network = {};
|
|
104
102
|
|
|
105
103
|
export const tableConfig = {
|
|
106
104
|
search,
|
|
@@ -43,8 +43,36 @@ export default {
|
|
|
43
43
|
}
|
|
44
44
|
},
|
|
45
45
|
fields: Array,
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* 表单配置列表。
|
|
49
|
+
* 只关联表单id，渲染器通过接口查询表单配置信息
|
|
50
|
+
* [
|
|
51
|
+
* {
|
|
52
|
+
* id:'', 表单id
|
|
53
|
+
* label:'', 表单名称
|
|
54
|
+
* }
|
|
55
|
+
* ]
|
|
56
|
+
*/
|
|
46
57
|
formOptions: Array,
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* 接口配置列表，会包装到 config.network 对象中。
|
|
61
|
+
* 只关联接口id，渲染器会通过关联接口id在 config.network 中过滤查询对应的接口
|
|
62
|
+
* [
|
|
63
|
+
* {
|
|
64
|
+
* id:'', 接口id
|
|
65
|
+
* label:'', 接口名称
|
|
66
|
+
* url:'', 接口地址
|
|
67
|
+
* method:'', 请求方式
|
|
68
|
+
* params:{}, 请求参数
|
|
69
|
+
* header:{}, 请求头
|
|
70
|
+
* }
|
|
71
|
+
* ]
|
|
72
|
+
*
|
|
73
|
+
*/
|
|
47
74
|
apiOptions: Array,
|
|
75
|
+
|
|
48
76
|
permissions: {
|
|
49
77
|
type: Array,
|
|
50
78
|
default: () => [
|
|
@@ -73,10 +101,21 @@ export default {
|
|
|
73
101
|
},
|
|
74
102
|
data(val) {
|
|
75
103
|
this.config = val;
|
|
104
|
+
this.handleNetwork();
|
|
105
|
+
},
|
|
106
|
+
apiOptions(val) {
|
|
107
|
+
this.handleNetwork();
|
|
76
108
|
}
|
|
77
109
|
},
|
|
78
110
|
mounted() {},
|
|
79
111
|
methods: {
|
|
112
|
+
handleNetwork() {
|
|
113
|
+
const network = {};
|
|
114
|
+
this.apiOptions.map(item => {
|
|
115
|
+
network[item.id] = item;
|
|
116
|
+
});
|
|
117
|
+
this.config.network = network;
|
|
118
|
+
},
|
|
80
119
|
handleToolsClick(action, data) {
|
|
81
120
|
switch (action) {
|
|
82
121
|
case "import-json":
|
|
@@ -88,7 +127,27 @@ export default {
|
|
|
88
127
|
}
|
|
89
128
|
},
|
|
90
129
|
getJson() {
|
|
91
|
-
return
|
|
130
|
+
return new Promise((resolve, reject) =>
|
|
131
|
+
this.$refs.configRef
|
|
132
|
+
.handleFormValidate()
|
|
133
|
+
.then(res => {
|
|
134
|
+
if (res) {
|
|
135
|
+
const data = deepClone(this.config);
|
|
136
|
+
resolve(data);
|
|
137
|
+
} else {
|
|
138
|
+
reject();
|
|
139
|
+
}
|
|
140
|
+
})
|
|
141
|
+
.catch(err => {
|
|
142
|
+
if (!this.config.table.mounted.api) {
|
|
143
|
+
this.$message.warning("请选择列表接口");
|
|
144
|
+
reject();
|
|
145
|
+
} else {
|
|
146
|
+
const data = deepClone(this.config);
|
|
147
|
+
resolve(data);
|
|
148
|
+
}
|
|
149
|
+
})
|
|
150
|
+
);
|
|
92
151
|
}
|
|
93
152
|
}
|
|
94
153
|
};
|
|
@@ -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>
|
|
@@ -192,7 +218,6 @@
|
|
|
192
218
|
<el-select
|
|
193
219
|
v-model="dialog.data.form"
|
|
194
220
|
style="width:100%"
|
|
195
|
-
value-key="id"
|
|
196
221
|
clearable
|
|
197
222
|
placeholder="请关联表单"
|
|
198
223
|
no-data-text="暂无表单，请前往【表单模块】创建"
|
|
@@ -201,7 +226,7 @@
|
|
|
201
226
|
v-for="item in formOptions"
|
|
202
227
|
:key="item.id"
|
|
203
228
|
:label="item.label"
|
|
204
|
-
:value="item"
|
|
229
|
+
:value="item.id"
|
|
205
230
|
>
|
|
206
231
|
</el-option>
|
|
207
232
|
</el-select>
|
|
@@ -238,7 +263,7 @@ export default {
|
|
|
238
263
|
config: {
|
|
239
264
|
type: Object,
|
|
240
265
|
default: () => {
|
|
241
|
-
return {
|
|
266
|
+
return {};
|
|
242
267
|
}
|
|
243
268
|
},
|
|
244
269
|
fields: {
|
|
@@ -258,15 +283,27 @@ export default {
|
|
|
258
283
|
{ title: "列表属性", value: 2 }
|
|
259
284
|
],
|
|
260
285
|
activeTab: { title: "查询字段", value: 0 },
|
|
261
|
-
|
|
286
|
+
searchField: {
|
|
262
287
|
isCheckAll: false,
|
|
263
288
|
isIndeterminate: false
|
|
264
289
|
},
|
|
265
|
-
|
|
290
|
+
tableField: {
|
|
266
291
|
isCheckAll: false,
|
|
267
292
|
isIndeterminate: false
|
|
268
293
|
},
|
|
269
|
-
tableCollapse: [
|
|
294
|
+
tableCollapse: [
|
|
295
|
+
"group-table",
|
|
296
|
+
"group-pageInfo",
|
|
297
|
+
"group-sort",
|
|
298
|
+
"group-hint",
|
|
299
|
+
"group-network",
|
|
300
|
+
"group-button"
|
|
301
|
+
],
|
|
302
|
+
formRules: {
|
|
303
|
+
"table.mounted.api": [
|
|
304
|
+
{ required: true, message: "请选择列表接口", trigger: "change" }
|
|
305
|
+
]
|
|
306
|
+
},
|
|
270
307
|
dialog: { show: false, data: null }
|
|
271
308
|
};
|
|
272
309
|
},
|
|
@@ -299,13 +336,13 @@ export default {
|
|
|
299
336
|
item.isSearch = this.searchActiveFields.includes(item.prop);
|
|
300
337
|
item.isTable = this.tableActiveFields.includes(item.prop);
|
|
301
338
|
});
|
|
302
|
-
this.
|
|
339
|
+
this.searchField = {
|
|
303
340
|
isCheckAll: this.searchActiveFields.length === this.fields.length,
|
|
304
341
|
isIndeterminate:
|
|
305
342
|
this.searchActiveFields.length !== 0 &&
|
|
306
343
|
this.searchActiveFields.length !== this.fields.length
|
|
307
344
|
};
|
|
308
|
-
this.
|
|
345
|
+
this.tableField = {
|
|
309
346
|
isCheckAll: this.tableActiveFields.length === this.fields.length,
|
|
310
347
|
isIndeterminate:
|
|
311
348
|
this.tableActiveFields.length !== 0 &&
|
|
@@ -316,28 +353,27 @@ export default {
|
|
|
316
353
|
this.activeTab = val;
|
|
317
354
|
},
|
|
318
355
|
handleCheckAllChange(bool, action) {
|
|
319
|
-
if (action === "
|
|
356
|
+
if (action === "searchField") {
|
|
320
357
|
this.fields.forEach(item => {
|
|
321
358
|
item.isSearch = bool;
|
|
322
359
|
});
|
|
323
360
|
const data = deepClone(this.fields);
|
|
324
361
|
this.config.search.options = bool ? data : [];
|
|
325
|
-
this.
|
|
326
|
-
this.search.isIndeterminate = false;
|
|
362
|
+
this.searchField = { isCheckAll: bool, isIndeterminate: false };
|
|
327
363
|
return;
|
|
328
364
|
}
|
|
329
|
-
if (action === "
|
|
365
|
+
if (action === "tableField") {
|
|
330
366
|
this.fields.forEach(item => {
|
|
331
367
|
item.isTable = bool;
|
|
332
368
|
});
|
|
333
369
|
const data = deepClone(this.fields);
|
|
334
370
|
this.config.table.options = bool ? data : [];
|
|
335
|
-
this.
|
|
336
|
-
|
|
371
|
+
this.tableField = { isCheckAll: bool, isIndeterminate: false };
|
|
372
|
+
return;
|
|
337
373
|
}
|
|
338
374
|
},
|
|
339
375
|
handleCheckboxChange(bool, action, data) {
|
|
340
|
-
if (action === "
|
|
376
|
+
if (action === "searchField") {
|
|
341
377
|
data.isSearch = bool;
|
|
342
378
|
bool
|
|
343
379
|
? this.config.search.options.push(deepClone(data))
|
|
@@ -346,7 +382,7 @@ export default {
|
|
|
346
382
|
return item.prop !== data.prop;
|
|
347
383
|
}
|
|
348
384
|
));
|
|
349
|
-
this.
|
|
385
|
+
this.searchField = {
|
|
350
386
|
isCheckAll: this.config.search.options.length === this.fields.length,
|
|
351
387
|
isIndeterminate:
|
|
352
388
|
this.config.search.options.length !== 0 &&
|
|
@@ -354,7 +390,7 @@ export default {
|
|
|
354
390
|
};
|
|
355
391
|
return;
|
|
356
392
|
}
|
|
357
|
-
if (action === "
|
|
393
|
+
if (action === "tableField") {
|
|
358
394
|
data.isTable = bool;
|
|
359
395
|
bool
|
|
360
396
|
? this.config.table.options.push(deepClone(data))
|
|
@@ -363,7 +399,7 @@ export default {
|
|
|
363
399
|
return item.prop !== data.prop;
|
|
364
400
|
}
|
|
365
401
|
));
|
|
366
|
-
this.
|
|
402
|
+
this.tableField = {
|
|
367
403
|
isCheckAll: this.config.table.options.length === this.fields.length,
|
|
368
404
|
isIndeterminate:
|
|
369
405
|
this.config.table.options.length !== 0 &&
|
|
@@ -374,6 +410,17 @@ export default {
|
|
|
374
410
|
},
|
|
375
411
|
handleActionConfig(data) {
|
|
376
412
|
this.dialog = { show: true, data };
|
|
413
|
+
},
|
|
414
|
+
handleFormValidate() {
|
|
415
|
+
return new Promise((resolve, reject) => {
|
|
416
|
+
if (this.$refs.formRef) {
|
|
417
|
+
this.$refs.formRef.validate(valid => {
|
|
418
|
+
resolve(valid);
|
|
419
|
+
});
|
|
420
|
+
} else {
|
|
421
|
+
reject();
|
|
422
|
+
}
|
|
423
|
+
});
|
|
377
424
|
}
|
|
378
425
|
}
|
|
379
426
|
};
|