tianheng-ui 0.1.21 → 0.1.23
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/lib/tianheng-ui.js +13 -13
- package/package.json +1 -1
- package/packages/FormMaking/FormConfig.vue +103 -50
- package/packages/FormMaking/WidgetConfig.vue +1 -0
- package/packages/FormMaking/custom/config.js +3 -2
- package/packages/FormMaking/custom/configs/date.vue +55 -11
- package/packages/FormMaking/index.vue +21 -21
- package/packages/FormMaking/styles/index.scss +9 -9
- package/packages/TableMaking/custom/config.js +1 -1
- package/packages/TableMaking/widgetConfig.vue +1 -1
package/package.json
CHANGED
|
@@ -1,60 +1,113 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="form-config
|
|
3
|
-
<el-form
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
2
|
+
<div class="form-config">
|
|
3
|
+
<el-form
|
|
4
|
+
:model="config"
|
|
5
|
+
label-position="left"
|
|
6
|
+
label-width="80px"
|
|
7
|
+
size="small"
|
|
8
|
+
>
|
|
9
|
+
<el-collapse v-model="collapseValue">
|
|
10
|
+
<el-collapse-item title="表单配置" name="group-form">
|
|
11
|
+
<el-form-item label="表单标题" required>
|
|
12
|
+
<el-input
|
|
13
|
+
v-model="config.title"
|
|
14
|
+
placeholder="请输入"
|
|
15
|
+
clearable
|
|
16
|
+
></el-input>
|
|
17
|
+
</el-form-item>
|
|
18
|
+
<el-form-item label="表单宽度">
|
|
19
|
+
<el-input v-model="config.width"></el-input>
|
|
20
|
+
</el-form-item>
|
|
21
|
+
<el-form-item label="组件库">
|
|
22
|
+
<el-radio-group v-model="config.ui">
|
|
23
|
+
<el-radio-button label="element">Element</el-radio-button>
|
|
24
|
+
<el-radio-button label="vant" disabled>Vant</el-radio-button>
|
|
25
|
+
</el-radio-group>
|
|
26
|
+
</el-form-item>
|
|
27
|
+
<el-form-item label="组件尺寸">
|
|
28
|
+
<el-radio-group v-model="config.size">
|
|
29
|
+
<el-radio-button label="medium">medium</el-radio-button>
|
|
30
|
+
<el-radio-button label="small">small</el-radio-button>
|
|
31
|
+
<el-radio-button label="mini">mini</el-radio-button>
|
|
32
|
+
</el-radio-group>
|
|
33
|
+
</el-form-item>
|
|
34
|
+
</el-collapse-item>
|
|
10
35
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
</el-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
36
|
+
<el-collapse-item title="数据配置" name="group-resultData">
|
|
37
|
+
<el-form-item label="表单回填">
|
|
38
|
+
<el-select
|
|
39
|
+
v-model="config.mounted.api"
|
|
40
|
+
value-key="id"
|
|
41
|
+
clearable
|
|
42
|
+
placeholder="请选择数据方法"
|
|
43
|
+
no-data-text="暂无接口，请前往【接口模块】创建"
|
|
44
|
+
>
|
|
45
|
+
<el-option
|
|
46
|
+
v-for="item in config.remoteFuncs"
|
|
47
|
+
:key="item.id"
|
|
48
|
+
:label="item.label"
|
|
49
|
+
:value="item"
|
|
50
|
+
>
|
|
51
|
+
</el-option>
|
|
52
|
+
</el-select>
|
|
53
|
+
</el-form-item>
|
|
54
|
+
</el-collapse-item>
|
|
55
|
+
<el-collapse-item title="标签配置" name="group-label">
|
|
56
|
+
<el-form-item label="标签宽度">
|
|
57
|
+
<el-input-number
|
|
58
|
+
v-model="config.labelWidth"
|
|
59
|
+
:min="0"
|
|
60
|
+
:step="5"
|
|
61
|
+
></el-input-number>
|
|
62
|
+
</el-form-item>
|
|
63
|
+
<el-form-item label="对齐方式">
|
|
64
|
+
<el-radio-group v-model="config.labelPosition">
|
|
65
|
+
<el-radio-button label="left">左对齐</el-radio-button>
|
|
66
|
+
<el-radio-button label="right">右对齐</el-radio-button>
|
|
67
|
+
<el-radio-button label="top">顶部对齐</el-radio-button>
|
|
68
|
+
</el-radio-group>
|
|
69
|
+
</el-form-item>
|
|
70
|
+
</el-collapse-item>
|
|
71
|
+
<el-collapse-item title="操作配置" name="group-action">
|
|
72
|
+
<el-form-item label="属性">
|
|
73
|
+
<el-checkbox v-model="config.disabled">禁用 </el-checkbox>
|
|
74
|
+
<el-checkbox v-model="config.hideLabel">隐藏标签 </el-checkbox>
|
|
75
|
+
</el-form-item>
|
|
76
|
+
</el-collapse-item>
|
|
77
|
+
</el-collapse>
|
|
52
78
|
</el-form>
|
|
53
79
|
</div>
|
|
54
80
|
</template>
|
|
55
81
|
|
|
56
82
|
<script>
|
|
57
83
|
export default {
|
|
58
|
-
props: ["
|
|
84
|
+
props: ["config"],
|
|
85
|
+
data() {
|
|
86
|
+
return {
|
|
87
|
+
collapseValue: [
|
|
88
|
+
"group-form",
|
|
89
|
+
"group-resultData",
|
|
90
|
+
"group-label",
|
|
91
|
+
"group-action"
|
|
92
|
+
]
|
|
93
|
+
};
|
|
94
|
+
}
|
|
59
95
|
};
|
|
60
96
|
</script>
|
|
97
|
+
|
|
98
|
+
<style lang="scss">
|
|
99
|
+
.form-config {
|
|
100
|
+
.el-collapse-item__header {
|
|
101
|
+
padding: 0 10px;
|
|
102
|
+
height: 40px;
|
|
103
|
+
line-height: 40px;
|
|
104
|
+
background-color: #f5f7f9;
|
|
105
|
+
}
|
|
106
|
+
.el-collapse-item__wrap {
|
|
107
|
+
padding: 10px;
|
|
108
|
+
}
|
|
109
|
+
.el-radio-button__inner {
|
|
110
|
+
padding: 7px !important;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
</style>
|
|
@@ -236,9 +236,9 @@ export const basicComponents = [
|
|
|
236
236
|
clearable: true,
|
|
237
237
|
placeholder: "",
|
|
238
238
|
startPlaceholder: "",
|
|
239
|
-
startField:
|
|
239
|
+
startField: "",
|
|
240
240
|
endPlaceholder: "",
|
|
241
|
-
endField:
|
|
241
|
+
endField: "",
|
|
242
242
|
type: "date",
|
|
243
243
|
format: "yyyy-MM-dd",
|
|
244
244
|
timestamp: false,
|
|
@@ -781,6 +781,7 @@ export const baseConfig = {
|
|
|
781
781
|
size: "small",
|
|
782
782
|
disabled: false,
|
|
783
783
|
hideLabel: false,
|
|
784
|
+
mounted: { api: "" },
|
|
784
785
|
eventScript: [
|
|
785
786
|
{
|
|
786
787
|
id: "mounted",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
<el-form-item label="默认值">
|
|
36
36
|
<el-input
|
|
37
37
|
:value="
|
|
38
|
-
['datetimerange', 'daterange', 'monthrange'].includes(
|
|
38
|
+
['dates', 'datetimerange', 'daterange', 'monthrange'].includes(
|
|
39
39
|
widget.options.type
|
|
40
40
|
)
|
|
41
41
|
? JSON.stringify(widget.options.defaultValue || [])
|
|
@@ -51,16 +51,19 @@
|
|
|
51
51
|
</el-form-item>
|
|
52
52
|
|
|
53
53
|
<el-form-item label="显示类型">
|
|
54
|
-
<el-select v-model="widget.options.type">
|
|
55
|
-
<el-option value="year"></el-option>
|
|
56
|
-
<el-option value="month"></el-option>
|
|
57
|
-
<el-option value="date"></el-option>
|
|
58
|
-
<el-option value="dates"></el-option>
|
|
54
|
+
<el-select v-model="widget.options.type" @change="handleTypeChange">
|
|
55
|
+
<el-option value="year" label="年"></el-option>
|
|
56
|
+
<el-option value="month" label="年月"></el-option>
|
|
57
|
+
<el-option value="date" label="年月日"></el-option>
|
|
58
|
+
<el-option value="dates" label="年月日（多选）"></el-option>
|
|
59
59
|
<!-- <el-option value="week"></el-option> -->
|
|
60
|
-
<el-option value="datetime"></el-option>
|
|
61
|
-
<el-option value="monthrange"></el-option>
|
|
62
|
-
<el-option
|
|
63
|
-
|
|
60
|
+
<el-option value="datetime" label="年月日时分秒"></el-option>
|
|
61
|
+
<el-option value="monthrange" label="年月（范围）"></el-option>
|
|
62
|
+
<el-option
|
|
63
|
+
value="datetimerange"
|
|
64
|
+
label="年月日时分秒（范围）"
|
|
65
|
+
></el-option>
|
|
66
|
+
<el-option value="daterange" label="年月日（范围）"></el-option>
|
|
64
67
|
</el-select>
|
|
65
68
|
</el-form-item>
|
|
66
69
|
|
|
@@ -151,7 +154,48 @@ export default {
|
|
|
151
154
|
props: {},
|
|
152
155
|
mixins: [configComponent],
|
|
153
156
|
mounted() {},
|
|
154
|
-
methods: {
|
|
157
|
+
methods: {
|
|
158
|
+
handleTypeChange(val) {
|
|
159
|
+
switch (val) {
|
|
160
|
+
case "year":
|
|
161
|
+
this.widget.options.format = "yyyy";
|
|
162
|
+
this.widget.options.defaultValue = "";
|
|
163
|
+
break;
|
|
164
|
+
case "month":
|
|
165
|
+
this.widget.options.format = "yyyy-MM";
|
|
166
|
+
this.widget.options.defaultValue = "";
|
|
167
|
+
break;
|
|
168
|
+
case "date":
|
|
169
|
+
this.widget.options.format = "yyyy-MM-dd";
|
|
170
|
+
this.widget.options.defaultValue = "";
|
|
171
|
+
break;
|
|
172
|
+
case "dates":
|
|
173
|
+
this.widget.options.format = "yyyy-MM-dd";
|
|
174
|
+
this.widget.options.defaultValue = [];
|
|
175
|
+
break;
|
|
176
|
+
case "datetime":
|
|
177
|
+
this.widget.options.format = "yyyy-MM-dd HH:mm:ss";
|
|
178
|
+
this.widget.options.defaultValue = "";
|
|
179
|
+
break;
|
|
180
|
+
case "monthrange":
|
|
181
|
+
this.widget.options.format = "yyyy-MM";
|
|
182
|
+
this.widget.options.defaultValue = [];
|
|
183
|
+
break;
|
|
184
|
+
case "datetimerange":
|
|
185
|
+
this.widget.options.format = "yyyy-MM-dd HH:mm:ss";
|
|
186
|
+
this.widget.options.defaultValue = [];
|
|
187
|
+
break;
|
|
188
|
+
case "daterange":
|
|
189
|
+
this.widget.options.format = "yyyy-MM-dd";
|
|
190
|
+
this.widget.options.defaultValue = [];
|
|
191
|
+
break;
|
|
192
|
+
default:
|
|
193
|
+
this.widget.options.format = "yyyy-MM-dd";
|
|
194
|
+
this.widget.options.defaultValue = "";
|
|
195
|
+
break;
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
}
|
|
155
199
|
};
|
|
156
200
|
</script>
|
|
157
201
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="formMaking">
|
|
3
3
|
<el-container
|
|
4
|
-
v-if="Object.keys(
|
|
4
|
+
v-if="Object.keys(formConfig.config).length"
|
|
5
5
|
class="container-box"
|
|
6
6
|
>
|
|
7
7
|
<el-main>
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
:client.sync="client"
|
|
107
107
|
:basicComponents="basicComponents"
|
|
108
108
|
:layoutComponents="layoutComponents"
|
|
109
|
-
:formData="
|
|
109
|
+
:formData="formConfig"
|
|
110
110
|
:formValue="widgetValue"
|
|
111
111
|
:oauthConfig="oauthConfig"
|
|
112
112
|
:slotKeys="Object.keys($slots)"
|
|
@@ -119,7 +119,7 @@
|
|
|
119
119
|
<el-main>
|
|
120
120
|
<widget-form
|
|
121
121
|
ref="widgetForm"
|
|
122
|
-
:data="
|
|
122
|
+
:data="formConfig"
|
|
123
123
|
:select.sync="widgetFormSelect"
|
|
124
124
|
:client="client"
|
|
125
125
|
>
|
|
@@ -148,15 +148,15 @@
|
|
|
148
148
|
</el-header>
|
|
149
149
|
<el-main class="config-container-content">
|
|
150
150
|
<widget-config
|
|
151
|
-
v-
|
|
151
|
+
v-if="configTab == 'widget'"
|
|
152
152
|
:data="widgetFormSelect"
|
|
153
|
-
:config="
|
|
153
|
+
:config="formConfig.config"
|
|
154
154
|
@update="handleWidgetConfigUpdate"
|
|
155
155
|
>
|
|
156
156
|
</widget-config>
|
|
157
157
|
<form-config
|
|
158
|
-
v-
|
|
159
|
-
:
|
|
158
|
+
v-if="configTab == 'form'"
|
|
159
|
+
:config="formConfig.config"
|
|
160
160
|
></form-config>
|
|
161
161
|
</el-main>
|
|
162
162
|
</el-container>
|
|
@@ -261,10 +261,10 @@ export default {
|
|
|
261
261
|
this.layoutComponents = layoutComponents;
|
|
262
262
|
this.baseConfig = deepClone(baseConfig);
|
|
263
263
|
return {
|
|
264
|
-
|
|
264
|
+
formConfig: this.config,
|
|
265
265
|
widgetFormSelect: {},
|
|
266
266
|
widgetValue: {},
|
|
267
|
-
configTab: "
|
|
267
|
+
configTab: "form",
|
|
268
268
|
client: "monitor"
|
|
269
269
|
};
|
|
270
270
|
},
|
|
@@ -289,7 +289,7 @@ export default {
|
|
|
289
289
|
}
|
|
290
290
|
},
|
|
291
291
|
watch: {
|
|
292
|
-
|
|
292
|
+
formConfig: {
|
|
293
293
|
deep: true,
|
|
294
294
|
handler: function(val) {
|
|
295
295
|
this.$emit("update:config", val);
|
|
@@ -327,28 +327,28 @@ export default {
|
|
|
327
327
|
// `
|
|
328
328
|
// };
|
|
329
329
|
// });
|
|
330
|
-
// this.
|
|
330
|
+
// this.formConfig.config.eventScript = this.formConfig.config.eventScript.concat(
|
|
331
331
|
// _eventScript
|
|
332
332
|
// );
|
|
333
333
|
|
|
334
334
|
const _remoteFuncs = options.map(item => {
|
|
335
335
|
return { ...item, id: item[props.key], label: item[props.name] };
|
|
336
336
|
});
|
|
337
|
-
this.
|
|
337
|
+
this.formConfig.config.remoteFuncs = _remoteFuncs;
|
|
338
338
|
}
|
|
339
339
|
}
|
|
340
340
|
},
|
|
341
341
|
created() {
|
|
342
342
|
this.initConfig();
|
|
343
|
-
this.
|
|
343
|
+
this.formConfig.config = Object.assign(
|
|
344
344
|
this.baseConfig,
|
|
345
|
-
this.
|
|
345
|
+
this.formConfig.config
|
|
346
346
|
);
|
|
347
347
|
|
|
348
|
-
if (this.
|
|
349
|
-
this.widgetFormSelect = this.
|
|
348
|
+
if (this.formConfig.list && this.formConfig.list.length) {
|
|
349
|
+
this.widgetFormSelect = this.formConfig.list[0];
|
|
350
350
|
} else {
|
|
351
|
-
this.
|
|
351
|
+
this.formConfig.list = [];
|
|
352
352
|
}
|
|
353
353
|
},
|
|
354
354
|
mounted() {},
|
|
@@ -383,7 +383,7 @@ export default {
|
|
|
383
383
|
},
|
|
384
384
|
|
|
385
385
|
handleClear() {
|
|
386
|
-
this.
|
|
386
|
+
this.formConfig = {
|
|
387
387
|
list: [],
|
|
388
388
|
config: this.baseConfig
|
|
389
389
|
};
|
|
@@ -418,13 +418,13 @@ export default {
|
|
|
418
418
|
this.handleClear();
|
|
419
419
|
},
|
|
420
420
|
getJSON() {
|
|
421
|
-
return this.
|
|
421
|
+
return this.formConfig;
|
|
422
422
|
},
|
|
423
423
|
getHtml() {
|
|
424
|
-
return generateCode(JSON.stringify(this.
|
|
424
|
+
return generateCode(JSON.stringify(this.formConfig));
|
|
425
425
|
},
|
|
426
426
|
setJSON(json) {
|
|
427
|
-
this.
|
|
427
|
+
this.formConfig = json;
|
|
428
428
|
|
|
429
429
|
if (json.list.length > 0) {
|
|
430
430
|
this.widgetFormSelect = json.list[0];
|
|
@@ -614,17 +614,17 @@ $primary-background-color: #ecf5ff;
|
|
|
614
614
|
}
|
|
615
615
|
|
|
616
616
|
.config-container-content {
|
|
617
|
-
padding: 10px;
|
|
617
|
+
// padding: 10px;
|
|
618
618
|
|
|
619
|
-
.el-form-item__label {
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
}
|
|
619
|
+
// .el-form-item__label {
|
|
620
|
+
// padding: 0;
|
|
621
|
+
// font-weight: 500;
|
|
622
|
+
// }
|
|
623
623
|
|
|
624
|
-
.el-form-item {
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
}
|
|
624
|
+
// .el-form-item {
|
|
625
|
+
// border-bottom: solid 1px #e1e1e1;
|
|
626
|
+
// padding-bottom: 10px;
|
|
627
|
+
// }
|
|
628
628
|
|
|
629
629
|
.config-pattern-input {
|
|
630
630
|
.el-input-group__prepend,
|