tianheng-ui 0.1.37 → 0.1.38
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/theme-chalk/styles/feature.scss +9 -0
- package/lib/tianheng-ui.js +13 -13
- package/package.json +1 -1
- package/packages/Dialog/index.vue +4 -1
- package/packages/FormMaking/WidgetConfig.vue +317 -218
- package/packages/FormMaking/WidgetForm.vue +8 -0
- package/packages/FormMaking/WidgetTools.vue +3 -2
- package/packages/FormMaking/index.vue +246 -203
- package/packages/FormMaking/styles/index.scss +1 -1
- package/packages/TableMaking/WidgetTools.vue +3 -2
- package/packages/TableMaking/generateTable.vue +1 -0
- package/packages/TableMaking/index.vue +2 -12
- package/packages/TableMaking/widgetConfig.vue +85 -64
|
@@ -1,181 +1,150 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="formMaking">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
class="
|
|
2
|
+
<div class="th-formMaking th-flex_box">
|
|
3
|
+
<!-- 左侧字段区 -->
|
|
4
|
+
<div
|
|
5
|
+
class="formMaking-fields th-flex_aside th-is_border_right"
|
|
6
|
+
style="width:250px"
|
|
6
7
|
>
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
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
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
>
|
|
62
|
-
<a>
|
|
63
|
-
<i class="icon iconfont" :class="item.icon"></i>
|
|
64
|
-
<span>{{ item.name }}</span>
|
|
65
|
-
</a>
|
|
66
|
-
</li>
|
|
67
|
-
</draggable>
|
|
68
|
-
</div>
|
|
69
|
-
|
|
70
|
-
<div v-if="layoutFields.length">
|
|
71
|
-
<div class="widget-cate">布局字段</div>
|
|
72
|
-
<draggable
|
|
73
|
-
tag="ul"
|
|
74
|
-
:list="getLayoutComponents"
|
|
75
|
-
v-bind="{
|
|
76
|
-
group: { name: 'people', pull: 'clone', put: false },
|
|
77
|
-
sort: false,
|
|
78
|
-
ghostClass: 'ghost'
|
|
79
|
-
}"
|
|
80
|
-
>
|
|
81
|
-
<li
|
|
82
|
-
v-for="(item, index) in getLayoutComponents"
|
|
83
|
-
class="form-edit-widget-label"
|
|
84
|
-
:class="{
|
|
85
|
-
'no-put': ['alliance'].includes(item.type),
|
|
86
|
-
[item.type]: true
|
|
87
|
-
}"
|
|
88
|
-
:key="index"
|
|
89
|
-
>
|
|
90
|
-
<a>
|
|
91
|
-
<i class="icon iconfont" :class="item.icon"></i>
|
|
92
|
-
<span>{{ item.name }}</span>
|
|
93
|
-
</a>
|
|
94
|
-
</li>
|
|
95
|
-
</draggable>
|
|
96
|
-
</div>
|
|
97
|
-
</div>
|
|
98
|
-
</el-aside>
|
|
99
|
-
|
|
100
|
-
<!-- 中间视图区 -->
|
|
101
|
-
<el-container class="center-container" direction="vertical">
|
|
102
|
-
<!-- 操作区 -->
|
|
103
|
-
<widget-tools
|
|
104
|
-
:baseConfig="baseConfig"
|
|
105
|
-
:permissions="permissions"
|
|
106
|
-
:client.sync="client"
|
|
107
|
-
:basicComponents="basicComponents"
|
|
108
|
-
:layoutComponents="layoutComponents"
|
|
109
|
-
:formData="formConfig"
|
|
110
|
-
:formValue="widgetValue"
|
|
111
|
-
:oauthConfig="oauthConfig"
|
|
112
|
-
:apiOptions="apiOptions"
|
|
113
|
-
@click="handleWidgetToolsChange"
|
|
8
|
+
<div class="fields-header th-sticky_top">组件列表</div>
|
|
9
|
+
<el-collapse v-model="collapseValue">
|
|
10
|
+
<el-collapse-item
|
|
11
|
+
v-if="basicFields.length"
|
|
12
|
+
title="基础组件"
|
|
13
|
+
name="group-basic"
|
|
14
|
+
>
|
|
15
|
+
<draggable
|
|
16
|
+
tag="ul"
|
|
17
|
+
:list="getBasicComponents"
|
|
18
|
+
v-bind="{
|
|
19
|
+
group: { name: 'people', pull: 'clone', put: false },
|
|
20
|
+
sort: false,
|
|
21
|
+
ghostClass: 'ghost'
|
|
22
|
+
}"
|
|
23
|
+
>
|
|
24
|
+
<li
|
|
25
|
+
v-for="(item, index) in getBasicComponents"
|
|
26
|
+
class="fields-label"
|
|
27
|
+
:class="{
|
|
28
|
+
'no-put': item.type == 'divider',
|
|
29
|
+
[item.type]: true
|
|
30
|
+
}"
|
|
31
|
+
:key="index"
|
|
32
|
+
>
|
|
33
|
+
<a>
|
|
34
|
+
<i class="icon iconfont" :class="item.icon"></i>
|
|
35
|
+
<span>{{ item.name }}</span>
|
|
36
|
+
</a>
|
|
37
|
+
</li>
|
|
38
|
+
</draggable>
|
|
39
|
+
</el-collapse-item>
|
|
40
|
+
<el-collapse-item
|
|
41
|
+
v-if="advanceFields.length"
|
|
42
|
+
title="高级组件"
|
|
43
|
+
name="group-advance"
|
|
44
|
+
>
|
|
45
|
+
<draggable
|
|
46
|
+
tag="ul"
|
|
47
|
+
:list="getAdvanceComponents"
|
|
48
|
+
v-bind="{
|
|
49
|
+
group: { name: 'people', pull: 'clone', put: false },
|
|
50
|
+
sort: false,
|
|
51
|
+
ghostClass: 'ghost'
|
|
52
|
+
}"
|
|
53
|
+
>
|
|
54
|
+
<li
|
|
55
|
+
v-for="(item, index) in getAdvanceComponents"
|
|
56
|
+
class="fields-label"
|
|
57
|
+
:class="{
|
|
58
|
+
'no-put': ['table', 'tableH5', 'tabs'].includes(item.type),
|
|
59
|
+
[item.type]: true
|
|
60
|
+
}"
|
|
61
|
+
:key="index"
|
|
114
62
|
>
|
|
115
|
-
<
|
|
116
|
-
|
|
63
|
+
<a>
|
|
64
|
+
<i class="icon iconfont" :class="item.icon"></i>
|
|
65
|
+
<span>{{ item.name }}</span>
|
|
66
|
+
</a>
|
|
67
|
+
</li>
|
|
68
|
+
</draggable>
|
|
69
|
+
</el-collapse-item>
|
|
70
|
+
<el-collapse-item
|
|
71
|
+
v-if="layoutFields.length"
|
|
72
|
+
title="布局组件"
|
|
73
|
+
name="group-layout"
|
|
74
|
+
>
|
|
75
|
+
<draggable
|
|
76
|
+
tag="ul"
|
|
77
|
+
:list="getLayoutComponents"
|
|
78
|
+
v-bind="{
|
|
79
|
+
group: { name: 'people', pull: 'clone', put: false },
|
|
80
|
+
sort: false,
|
|
81
|
+
ghostClass: 'ghost'
|
|
82
|
+
}"
|
|
83
|
+
>
|
|
84
|
+
<li
|
|
85
|
+
v-for="(item, index) in getLayoutComponents"
|
|
86
|
+
class="fields-label"
|
|
87
|
+
:class="{
|
|
88
|
+
'no-put': ['alliance'].includes(item.type),
|
|
89
|
+
[item.type]: true
|
|
90
|
+
}"
|
|
91
|
+
:key="index"
|
|
92
|
+
>
|
|
93
|
+
<a>
|
|
94
|
+
<i class="icon iconfont" :class="item.icon"></i>
|
|
95
|
+
<span>{{ item.name }}</span>
|
|
96
|
+
</a>
|
|
97
|
+
</li>
|
|
98
|
+
</draggable>
|
|
99
|
+
</el-collapse-item>
|
|
100
|
+
</el-collapse>
|
|
101
|
+
</div>
|
|
102
|
+
|
|
103
|
+
<!-- 中间视图区 -->
|
|
104
|
+
<div class="formMaking-drawing th-fiex_content">
|
|
105
|
+
<!-- 操作区 -->
|
|
106
|
+
<widget-tools
|
|
107
|
+
:baseConfig="baseConfig"
|
|
108
|
+
:permissions="permissions"
|
|
109
|
+
:basicComponents="basicComponents"
|
|
110
|
+
:layoutComponents="layoutComponents"
|
|
111
|
+
:formData="formConfig"
|
|
112
|
+
:formValue="widgetValue"
|
|
113
|
+
:oauthConfig="oauthConfig"
|
|
114
|
+
:apiOptions="apiOptions"
|
|
115
|
+
@click="handleWidgetToolsChange"
|
|
116
|
+
>
|
|
117
|
+
<slot name="action"></slot>
|
|
118
|
+
</widget-tools>
|
|
117
119
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
</widget-form>
|
|
127
|
-
</el-main>
|
|
128
|
-
</el-container>
|
|
120
|
+
<!-- 工作区 -->
|
|
121
|
+
<widget-form
|
|
122
|
+
:data="formConfig"
|
|
123
|
+
:select.sync="widgetFormSelect"
|
|
124
|
+
ref="widgetForm"
|
|
125
|
+
>
|
|
126
|
+
</widget-form>
|
|
127
|
+
</div>
|
|
129
128
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
:class="{ active: configTab == 'form' }"
|
|
144
|
-
@click="handleConfigSelect('form')"
|
|
145
|
-
>
|
|
146
|
-
表单属性
|
|
147
|
-
</div>
|
|
148
|
-
</el-header>
|
|
149
|
-
<el-main class="config-container-content">
|
|
150
|
-
<widget-config
|
|
151
|
-
v-if="configTab == 'widget'"
|
|
152
|
-
:data="widgetFormSelect"
|
|
153
|
-
:config="formConfig.config"
|
|
154
|
-
:fields="fields"
|
|
155
|
-
:apiConfig="apiConfig"
|
|
156
|
-
@update="handleWidgetConfigUpdate"
|
|
157
|
-
>
|
|
158
|
-
</widget-config>
|
|
159
|
-
<form-config
|
|
160
|
-
v-if="configTab == 'form'"
|
|
161
|
-
:config="formConfig.config"
|
|
162
|
-
:apiConfig="apiConfig"
|
|
163
|
-
@fieldsChange="handleFieldsChange"
|
|
164
|
-
ref="formConfigRef"
|
|
165
|
-
></form-config>
|
|
166
|
-
</el-main>
|
|
167
|
-
</el-container>
|
|
168
|
-
</el-aside>
|
|
169
|
-
</el-container>
|
|
170
|
-
</el-main>
|
|
171
|
-
</el-container>
|
|
129
|
+
<!-- 右侧配置区 -->
|
|
130
|
+
<div class="th-flex_aside th-is_border_left" style="width:300px">
|
|
131
|
+
<widget-config
|
|
132
|
+
:data="widgetFormSelect"
|
|
133
|
+
:config="formConfig.config"
|
|
134
|
+
:fields="fields"
|
|
135
|
+
:apiConfig="apiConfig"
|
|
136
|
+
ref="configRef"
|
|
137
|
+
@fieldsChange="handleFieldsChange"
|
|
138
|
+
@update="handleWidgetConfigUpdate"
|
|
139
|
+
>
|
|
140
|
+
</widget-config>
|
|
141
|
+
</div>
|
|
172
142
|
</div>
|
|
173
143
|
</template>
|
|
174
144
|
|
|
175
145
|
<script>
|
|
176
146
|
import Draggable from "vuedraggable";
|
|
177
147
|
import WidgetConfig from "./WidgetConfig";
|
|
178
|
-
import FormConfig from "./FormConfig";
|
|
179
148
|
import WidgetTools from "./WidgetTools";
|
|
180
149
|
import WidgetForm from "./WidgetForm";
|
|
181
150
|
import GenerateForm from "./GenerateForm";
|
|
@@ -193,7 +162,6 @@ export default {
|
|
|
193
162
|
components: {
|
|
194
163
|
Draggable,
|
|
195
164
|
WidgetConfig,
|
|
196
|
-
FormConfig,
|
|
197
165
|
WidgetTools,
|
|
198
166
|
WidgetForm,
|
|
199
167
|
GenerateForm
|
|
@@ -261,9 +229,9 @@ export default {
|
|
|
261
229
|
widgetFormSelect: {},
|
|
262
230
|
widgetValue: {},
|
|
263
231
|
configTab: "form",
|
|
264
|
-
client: "monitor",
|
|
265
232
|
fields: [],
|
|
266
|
-
apiConfig: {}
|
|
233
|
+
apiConfig: {},
|
|
234
|
+
collapseValue: ["group-basic", "group-advance", "group-layout"]
|
|
267
235
|
};
|
|
268
236
|
},
|
|
269
237
|
computed: {
|
|
@@ -358,12 +326,6 @@ export default {
|
|
|
358
326
|
},
|
|
359
327
|
handleWidgetToolsChange(val, data) {
|
|
360
328
|
switch (val) {
|
|
361
|
-
case "mobile":
|
|
362
|
-
this.client = val;
|
|
363
|
-
break;
|
|
364
|
-
case "monitor":
|
|
365
|
-
this.client = val;
|
|
366
|
-
break;
|
|
367
329
|
case "import-excel":
|
|
368
330
|
case "import-json":
|
|
369
331
|
case "import-template":
|
|
@@ -372,7 +334,6 @@ export default {
|
|
|
372
334
|
case "clear":
|
|
373
335
|
this.handleClear();
|
|
374
336
|
break;
|
|
375
|
-
|
|
376
337
|
default:
|
|
377
338
|
break;
|
|
378
339
|
}
|
|
@@ -398,9 +359,10 @@ export default {
|
|
|
398
359
|
this.handleClear();
|
|
399
360
|
},
|
|
400
361
|
getConfig() {
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
362
|
+
return new Promise((resolve, reject) =>
|
|
363
|
+
this.$refs.configRef
|
|
364
|
+
.formValidate()
|
|
365
|
+
.then(res => {
|
|
404
366
|
if (res) {
|
|
405
367
|
const data = deepClone(this.formConfig);
|
|
406
368
|
data.config.network = this.apiConfig;
|
|
@@ -409,29 +371,27 @@ export default {
|
|
|
409
371
|
reject();
|
|
410
372
|
}
|
|
411
373
|
})
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
});
|
|
434
|
-
}
|
|
374
|
+
.catch(err => {
|
|
375
|
+
if (!this.formConfig.config.fieldsType) {
|
|
376
|
+
this.$message.warning("请选择字段类型");
|
|
377
|
+
return reject();
|
|
378
|
+
}
|
|
379
|
+
if (
|
|
380
|
+
this.formConfig.config.fieldsType === "fieldsApi" &&
|
|
381
|
+
!this.formConfig.config.fieldsApi
|
|
382
|
+
) {
|
|
383
|
+
this.$message.warning("请选择字段接口");
|
|
384
|
+
return reject();
|
|
385
|
+
}
|
|
386
|
+
if (!this.formConfig.config.title) {
|
|
387
|
+
this.$message.warning("请填写表单标题");
|
|
388
|
+
return reject();
|
|
389
|
+
}
|
|
390
|
+
const data = deepClone(this.formConfig);
|
|
391
|
+
data.config.network = this.apiConfig;
|
|
392
|
+
resolve(data);
|
|
393
|
+
})
|
|
394
|
+
);
|
|
435
395
|
},
|
|
436
396
|
getHtml() {
|
|
437
397
|
return generateCode(JSON.stringify(this.formConfig));
|
|
@@ -448,3 +408,86 @@ export default {
|
|
|
448
408
|
}
|
|
449
409
|
};
|
|
450
410
|
</script>
|
|
411
|
+
|
|
412
|
+
<style lang="scss" scoped>
|
|
413
|
+
$primary-color: #409eff;
|
|
414
|
+
$primary-background-color: #ecf5ff;
|
|
415
|
+
.th-formMaking {
|
|
416
|
+
height: 100%;
|
|
417
|
+
background-color: white;
|
|
418
|
+
border: 1px solid #dcdfe6;
|
|
419
|
+
|
|
420
|
+
.formMaking-fields {
|
|
421
|
+
.fields-header {
|
|
422
|
+
display: flex;
|
|
423
|
+
align-items: center;
|
|
424
|
+
height: 45px;
|
|
425
|
+
padding: 0 15px;
|
|
426
|
+
}
|
|
427
|
+
ul {
|
|
428
|
+
position: relative;
|
|
429
|
+
overflow: hidden;
|
|
430
|
+
padding: 5px;
|
|
431
|
+
margin: 0;
|
|
432
|
+
}
|
|
433
|
+
.fields-label {
|
|
434
|
+
margin: 0 3px;
|
|
435
|
+
width: calc(50% - 6px);
|
|
436
|
+
line-height: 26px;
|
|
437
|
+
font-size: 12px;
|
|
438
|
+
color: #333;
|
|
439
|
+
display: inline-block;
|
|
440
|
+
overflow: hidden;
|
|
441
|
+
text-overflow: ellipsis;
|
|
442
|
+
white-space: nowrap;
|
|
443
|
+
border: 1px solid #f4f6fc;
|
|
444
|
+
box-sizing: border-box;
|
|
445
|
+
transition: 0.25s;
|
|
446
|
+
|
|
447
|
+
&:hover {
|
|
448
|
+
color: $primary-color !important;
|
|
449
|
+
border: 1px dashed $primary-color;
|
|
450
|
+
|
|
451
|
+
a {
|
|
452
|
+
color: $primary-color !important;
|
|
453
|
+
}
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
& > a {
|
|
457
|
+
color: #333;
|
|
458
|
+
display: block;
|
|
459
|
+
cursor: move;
|
|
460
|
+
background: #f4f6fc;
|
|
461
|
+
border: 1px solid #f4f6fc;
|
|
462
|
+
transition: 0.25s;
|
|
463
|
+
|
|
464
|
+
.icon {
|
|
465
|
+
margin-right: 6px;
|
|
466
|
+
margin-left: 8px;
|
|
467
|
+
font-size: 14px;
|
|
468
|
+
display: inline-block;
|
|
469
|
+
vertical-align: middle;
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
span {
|
|
473
|
+
display: inline-block;
|
|
474
|
+
vertical-align: middle;
|
|
475
|
+
}
|
|
476
|
+
}
|
|
477
|
+
}
|
|
478
|
+
}
|
|
479
|
+
.formMaking-drawing {
|
|
480
|
+
}
|
|
481
|
+
}
|
|
482
|
+
</style>
|
|
483
|
+
|
|
484
|
+
<style lang="scss">
|
|
485
|
+
.formMaking-fields {
|
|
486
|
+
.el-collapse-item__header {
|
|
487
|
+
padding: 0 10px;
|
|
488
|
+
height: 40px;
|
|
489
|
+
line-height: 40px;
|
|
490
|
+
background-color: #f5f7f9;
|
|
491
|
+
}
|
|
492
|
+
}
|
|
493
|
+
</style>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="widgetTools">
|
|
2
|
+
<div class="widgetTools th-sticky_top">
|
|
3
3
|
<div class="left">
|
|
4
4
|
<slot> </slot>
|
|
5
5
|
</div>
|
|
@@ -123,6 +123,7 @@
|
|
|
123
123
|
<th-dialog
|
|
124
124
|
v-model="dialog.show"
|
|
125
125
|
:title="dialogTitles[dialog.action]"
|
|
126
|
+
:modal="dialog.action !== 'previewPc'"
|
|
126
127
|
:modal-append-to-body="false"
|
|
127
128
|
:showFooter="['importJson', 'importTemplate'].includes(dialog.action)"
|
|
128
129
|
@on-fullscreen="handleDialogFullscreen"
|
|
@@ -244,7 +245,7 @@ export default {
|
|
|
244
245
|
width: 100%;
|
|
245
246
|
height: 45px;
|
|
246
247
|
padding: 0 15px;
|
|
247
|
-
|
|
248
|
+
z-index: 999;
|
|
248
249
|
|
|
249
250
|
.left {
|
|
250
251
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="th-
|
|
2
|
+
<div class="th-tableMaking th-flex_box">
|
|
3
3
|
<div class="th-fiex_content">
|
|
4
4
|
<widget-tools
|
|
5
5
|
:config="tableConfig"
|
|
@@ -164,21 +164,11 @@ export default {
|
|
|
164
164
|
</script>
|
|
165
165
|
|
|
166
166
|
<style lang="scss" scoped>
|
|
167
|
-
.th-
|
|
167
|
+
.th-tableMaking {
|
|
168
168
|
height: 100%;
|
|
169
169
|
background-color: white;
|
|
170
170
|
border: 1px solid #dcdfe6;
|
|
171
171
|
|
|
172
|
-
.client {
|
|
173
|
-
flex: 1;
|
|
174
|
-
.el-button {
|
|
175
|
-
color: #333;
|
|
176
|
-
}
|
|
177
|
-
.active {
|
|
178
|
-
color: #409eff;
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
|
|
182
172
|
.el-container {
|
|
183
173
|
height: 100%;
|
|
184
174
|
}
|