tianheng-ui 0.1.36 → 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/FormConfig.vue +3 -3
- 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/custom/config.js +14 -5
- package/packages/TableMaking/custom/items/actions/index-pc.vue +118 -0
- package/packages/TableMaking/custom/items/table/index-pc.vue +38 -13
- package/packages/TableMaking/generateTable.vue +206 -170
- package/packages/TableMaking/index.vue +5 -15
- package/packages/TableMaking/widgetConfig.vue +183 -80
- package/packages/TableMaking/widgetTable.vue +42 -4
package/package.json
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
<el-dialog
|
|
3
3
|
class="th-dialog"
|
|
4
4
|
:class="[customClass]"
|
|
5
|
+
:style="{'z-index':zIndex}"
|
|
5
6
|
:visible.sync="visible"
|
|
6
7
|
:width="width"
|
|
7
8
|
:top="top"
|
|
@@ -87,7 +88,9 @@ export default {
|
|
|
87
88
|
showFullscreen: { type: Boolean, default: true },
|
|
88
89
|
fullscreenIcon: { type: String, default: "el-icon-full-screen" },
|
|
89
90
|
|
|
90
|
-
showFooter: { type: Boolean, default: true }
|
|
91
|
+
showFooter: { type: Boolean, default: true },
|
|
92
|
+
|
|
93
|
+
zIndex: Number
|
|
91
94
|
},
|
|
92
95
|
data() {
|
|
93
96
|
return {
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
<el-form-item prop="fieldsType" required>
|
|
14
14
|
<el-tooltip
|
|
15
15
|
slot="label"
|
|
16
|
-
effect="
|
|
16
|
+
effect="light"
|
|
17
17
|
content="字段的配置方式"
|
|
18
18
|
placement="top"
|
|
19
19
|
>
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
>
|
|
32
32
|
<el-tooltip
|
|
33
33
|
slot="label"
|
|
34
|
-
effect="
|
|
34
|
+
effect="light"
|
|
35
35
|
content="使用接口的出参配置可选字段"
|
|
36
36
|
placement="top"
|
|
37
37
|
>
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
<el-form-item>
|
|
84
84
|
<el-tooltip
|
|
85
85
|
slot="label"
|
|
86
|
-
effect="
|
|
86
|
+
effect="light"
|
|
87
87
|
content="一般用于编辑和详情的数据回显"
|
|
88
88
|
placement="top"
|
|
89
89
|
>
|
|
@@ -1,124 +1,270 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
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
|
-
:value="item.type"
|
|
2
|
+
<div class="formWidgetConfig">
|
|
3
|
+
<div class="tabs th-sticky_top">
|
|
4
|
+
<div
|
|
5
|
+
v-for="(item, index) in tabsMenus"
|
|
6
|
+
:key="index"
|
|
7
|
+
class="tabs-item"
|
|
8
|
+
:class="{ 'tabs-item__active': activeTab.value === item.value }"
|
|
9
|
+
@click="handleTabsChange(item)"
|
|
10
|
+
>
|
|
11
|
+
{{ item.title }}
|
|
12
|
+
</div>
|
|
13
|
+
</div>
|
|
14
|
+
|
|
15
|
+
<div v-if="activeTab.value === 'field'">
|
|
16
|
+
<el-form
|
|
17
|
+
:model="data"
|
|
18
|
+
label-position="left"
|
|
19
|
+
label-width="80px"
|
|
20
|
+
size="small"
|
|
21
|
+
:rules="formRules"
|
|
22
|
+
ref="formRef"
|
|
23
|
+
>
|
|
24
|
+
<el-collapse v-model="collapseValue">
|
|
25
|
+
<el-collapse-item title="通用配置" name="group-general">
|
|
26
|
+
<el-form-item>
|
|
27
|
+
<el-tooltip
|
|
28
|
+
slot="label"
|
|
29
|
+
effect="light"
|
|
30
|
+
content="切换组件会导致该组件配置信息重置，请谨慎使用！"
|
|
31
|
+
placement="top"
|
|
33
32
|
>
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
content="组件关联数据表中的唯一字段"
|
|
42
|
-
placement="top"
|
|
43
|
-
>
|
|
44
|
-
<span style="color: #409EFF;">字段标识</span>
|
|
45
|
-
</el-tooltip>
|
|
46
|
-
<el-select
|
|
47
|
-
v-model="data.model"
|
|
48
|
-
style="width:100%;"
|
|
49
|
-
placeholder="请选择字段"
|
|
50
|
-
>
|
|
51
|
-
<el-option
|
|
52
|
-
v-for="item in fields"
|
|
53
|
-
:key="item.prop"
|
|
54
|
-
:label="item.label"
|
|
55
|
-
:value="item.prop"
|
|
33
|
+
<span style="color: #409EFF;">组件切换</span>
|
|
34
|
+
</el-tooltip>
|
|
35
|
+
<el-select
|
|
36
|
+
:value="data.type"
|
|
37
|
+
style="width:100%;"
|
|
38
|
+
placeholder="请选择类型"
|
|
39
|
+
@change="handleTypeChange"
|
|
56
40
|
>
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
>
|
|
67
|
-
<
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
41
|
+
<el-option
|
|
42
|
+
v-for="item in Object.values(compsData)"
|
|
43
|
+
:key="item.type"
|
|
44
|
+
:label="item.name"
|
|
45
|
+
:value="item.type"
|
|
46
|
+
>
|
|
47
|
+
</el-option>
|
|
48
|
+
</el-select>
|
|
49
|
+
</el-form-item>
|
|
50
|
+
<el-form-item v-if="config.fieldsType === 'fieldsApi'" prop="model">
|
|
51
|
+
<el-tooltip
|
|
52
|
+
slot="label"
|
|
53
|
+
effect="light"
|
|
54
|
+
content="组件关联数据表中的唯一字段"
|
|
55
|
+
placement="top"
|
|
56
|
+
>
|
|
57
|
+
<span style="color: #409EFF;">字段标识</span>
|
|
58
|
+
</el-tooltip>
|
|
59
|
+
<el-select
|
|
60
|
+
v-model="data.model"
|
|
61
|
+
style="width:100%;"
|
|
62
|
+
placeholder="请选择字段"
|
|
63
|
+
>
|
|
64
|
+
<el-option
|
|
65
|
+
v-for="item in fields"
|
|
66
|
+
:key="item.prop"
|
|
67
|
+
:label="item.label"
|
|
68
|
+
:value="item.prop"
|
|
69
|
+
>
|
|
70
|
+
</el-option>
|
|
71
|
+
</el-select>
|
|
72
|
+
</el-form-item>
|
|
73
|
+
<el-form-item prop="model">
|
|
74
|
+
<el-tooltip
|
|
75
|
+
slot="label"
|
|
76
|
+
effect="light"
|
|
77
|
+
content="表单提交时的入参名，对应数据表中的字段，非必要不修改！"
|
|
78
|
+
placement="top"
|
|
79
|
+
>
|
|
80
|
+
<span style="color: #409EFF;">组件字段</span>
|
|
81
|
+
</el-tooltip>
|
|
82
|
+
<el-input v-model="data.model"></el-input>
|
|
83
|
+
</el-form-item>
|
|
84
|
+
</el-collapse-item>
|
|
72
85
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
86
|
+
<component
|
|
87
|
+
:widget="data"
|
|
88
|
+
:config="config"
|
|
89
|
+
:fields="fields"
|
|
90
|
+
:apiConfig="apiConfig"
|
|
91
|
+
:is="compsData[data.type].content"
|
|
92
|
+
></component>
|
|
80
93
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
>
|
|
85
|
-
<div slot="title" style="width:100%">
|
|
86
|
-
<span>动作设置</span>
|
|
87
|
-
<span
|
|
88
|
-
style="float: right;margin-right: 10px;"
|
|
89
|
-
@click.stop="handleEventDialogShow"
|
|
90
|
-
>配置</span
|
|
91
|
-
>
|
|
92
|
-
</div>
|
|
93
|
-
<el-form-item
|
|
94
|
-
v-for="event in Object.keys(data.events)"
|
|
95
|
-
:key="event"
|
|
96
|
-
:label="event"
|
|
94
|
+
<el-collapse-item
|
|
95
|
+
v-if="data.events && Object.keys(data.events).length"
|
|
96
|
+
name="group-action"
|
|
97
97
|
>
|
|
98
|
-
<div
|
|
98
|
+
<div slot="title" style="width:100%">
|
|
99
|
+
<span>动作设置</span>
|
|
100
|
+
<span
|
|
101
|
+
style="float: right;margin-right: 10px;"
|
|
102
|
+
@click.stop="handleEventDialogShow"
|
|
103
|
+
>配置</span
|
|
104
|
+
>
|
|
105
|
+
</div>
|
|
106
|
+
<el-form-item
|
|
107
|
+
v-for="event in Object.keys(data.events)"
|
|
108
|
+
:key="event"
|
|
109
|
+
:label="event"
|
|
110
|
+
>
|
|
111
|
+
<div class="events-item">
|
|
112
|
+
<el-select
|
|
113
|
+
v-model="data.events[event]"
|
|
114
|
+
placeholder="请选择"
|
|
115
|
+
clearable
|
|
116
|
+
>
|
|
117
|
+
<el-option
|
|
118
|
+
v-for="item in config.eventScript"
|
|
119
|
+
:key="item.id"
|
|
120
|
+
:label="item.label"
|
|
121
|
+
:value="item.id"
|
|
122
|
+
>
|
|
123
|
+
</el-option>
|
|
124
|
+
</el-select>
|
|
125
|
+
<i
|
|
126
|
+
v-if="data.events[event]"
|
|
127
|
+
class="el-icon-edit"
|
|
128
|
+
@click="handleEventsCollapseClick(data.events[event])"
|
|
129
|
+
></i>
|
|
130
|
+
</div>
|
|
131
|
+
</el-form-item>
|
|
132
|
+
</el-collapse-item>
|
|
133
|
+
</el-collapse>
|
|
134
|
+
</el-form>
|
|
135
|
+
</div>
|
|
136
|
+
<div v-if="activeTab.value === 'form'">
|
|
137
|
+
<el-form
|
|
138
|
+
:model="config"
|
|
139
|
+
label-position="left"
|
|
140
|
+
label-width="80px"
|
|
141
|
+
size="small"
|
|
142
|
+
:rules="formRules"
|
|
143
|
+
ref="formRef"
|
|
144
|
+
>
|
|
145
|
+
<el-collapse v-model="collapseValue">
|
|
146
|
+
<el-collapse-item title="表单配置" name="group-form">
|
|
147
|
+
<el-form-item prop="fieldsType" required>
|
|
148
|
+
<el-tooltip
|
|
149
|
+
slot="label"
|
|
150
|
+
effect="light"
|
|
151
|
+
content="字段的配置方式"
|
|
152
|
+
placement="top"
|
|
153
|
+
>
|
|
154
|
+
<span style="color: #409EFF;">字段类型</span>
|
|
155
|
+
</el-tooltip>
|
|
156
|
+
<el-radio-group v-model="config.fieldsType">
|
|
157
|
+
<el-radio-button label="custom">自定义</el-radio-button>
|
|
158
|
+
<el-radio-button label="fieldsApi">接口导入</el-radio-button>
|
|
159
|
+
</el-radio-group>
|
|
160
|
+
</el-form-item>
|
|
161
|
+
<el-form-item
|
|
162
|
+
v-if="config.fieldsType === 'fieldsApi'"
|
|
163
|
+
prop="fieldsApi"
|
|
164
|
+
required
|
|
165
|
+
>
|
|
166
|
+
<el-tooltip
|
|
167
|
+
slot="label"
|
|
168
|
+
effect="light"
|
|
169
|
+
content="使用接口的出参配置可选字段"
|
|
170
|
+
placement="top"
|
|
171
|
+
>
|
|
172
|
+
<span style="color: #409EFF;">字段接口</span>
|
|
173
|
+
</el-tooltip>
|
|
99
174
|
<el-select
|
|
100
|
-
v-model="
|
|
175
|
+
v-model="config.fieldsApi"
|
|
176
|
+
style="width:100%"
|
|
177
|
+
clearable
|
|
101
178
|
placeholder="请选择"
|
|
179
|
+
no-data-text="暂无接口，请前往【数据源模块】创建"
|
|
180
|
+
@change="handleFieldsApiChange"
|
|
181
|
+
>
|
|
182
|
+
<el-option
|
|
183
|
+
v-for="item in Object.values(apiConfig)"
|
|
184
|
+
:key="item.id"
|
|
185
|
+
:label="item.label"
|
|
186
|
+
:value="item.id"
|
|
187
|
+
>
|
|
188
|
+
</el-option>
|
|
189
|
+
</el-select>
|
|
190
|
+
</el-form-item>
|
|
191
|
+
<el-form-item label="表单标题" prop="title" required>
|
|
192
|
+
<el-input
|
|
193
|
+
v-model="config.title"
|
|
194
|
+
placeholder="请输入"
|
|
102
195
|
clearable
|
|
196
|
+
></el-input>
|
|
197
|
+
</el-form-item>
|
|
198
|
+
<el-form-item label="表单宽度">
|
|
199
|
+
<el-input v-model="config.width"></el-input>
|
|
200
|
+
</el-form-item>
|
|
201
|
+
<el-form-item label="组件库">
|
|
202
|
+
<el-radio-group v-model="config.ui">
|
|
203
|
+
<el-radio-button label="element">Element</el-radio-button>
|
|
204
|
+
<el-radio-button label="vant" disabled>Vant</el-radio-button>
|
|
205
|
+
</el-radio-group>
|
|
206
|
+
</el-form-item>
|
|
207
|
+
<el-form-item label="组件尺寸">
|
|
208
|
+
<el-radio-group v-model="config.size">
|
|
209
|
+
<el-radio-button label="medium">medium</el-radio-button>
|
|
210
|
+
<el-radio-button label="small">small</el-radio-button>
|
|
211
|
+
<el-radio-button label="mini">mini</el-radio-button>
|
|
212
|
+
</el-radio-group>
|
|
213
|
+
</el-form-item>
|
|
214
|
+
</el-collapse-item>
|
|
215
|
+
<el-collapse-item title="数据配置" name="group-resultData">
|
|
216
|
+
<el-form-item>
|
|
217
|
+
<el-tooltip
|
|
218
|
+
slot="label"
|
|
219
|
+
effect="light"
|
|
220
|
+
content="一般用于编辑和详情的数据回显"
|
|
221
|
+
placement="top"
|
|
222
|
+
>
|
|
223
|
+
<span style="color: #409EFF;">数据回填</span>
|
|
224
|
+
</el-tooltip>
|
|
225
|
+
<el-select
|
|
226
|
+
v-model="config.mounted.api"
|
|
227
|
+
value-key="id"
|
|
228
|
+
clearable
|
|
229
|
+
placeholder="请选择数据方法"
|
|
230
|
+
no-data-text="暂无接口，请前往【接口模块】创建"
|
|
103
231
|
>
|
|
104
232
|
<el-option
|
|
105
|
-
v-for="item in
|
|
233
|
+
v-for="item in Object.values(apiConfig)"
|
|
106
234
|
:key="item.id"
|
|
107
235
|
:label="item.label"
|
|
108
236
|
:value="item.id"
|
|
109
237
|
>
|
|
110
238
|
</el-option>
|
|
111
239
|
</el-select>
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
240
|
+
</el-form-item>
|
|
241
|
+
</el-collapse-item>
|
|
242
|
+
<el-collapse-item title="标签配置" name="group-label">
|
|
243
|
+
<el-form-item label="标签宽度">
|
|
244
|
+
<el-input-number
|
|
245
|
+
v-model="config.labelWidth"
|
|
246
|
+
:min="0"
|
|
247
|
+
:step="5"
|
|
248
|
+
></el-input-number>
|
|
249
|
+
</el-form-item>
|
|
250
|
+
<el-form-item label="对齐方式">
|
|
251
|
+
<el-radio-group v-model="config.labelPosition">
|
|
252
|
+
<el-radio-button label="left">左对齐</el-radio-button>
|
|
253
|
+
<el-radio-button label="right">右对齐</el-radio-button>
|
|
254
|
+
<el-radio-button label="top">顶部对齐</el-radio-button>
|
|
255
|
+
</el-radio-group>
|
|
256
|
+
</el-form-item>
|
|
257
|
+
</el-collapse-item>
|
|
258
|
+
<el-collapse-item title="属性配置" name="group-attributes">
|
|
259
|
+
<el-form-item label-width="0">
|
|
260
|
+
<el-checkbox v-model="config.disabled">禁用 </el-checkbox>
|
|
261
|
+
<el-checkbox v-model="config.hideLabel">隐藏标签 </el-checkbox>
|
|
262
|
+
</el-form-item>
|
|
263
|
+
</el-collapse-item>
|
|
264
|
+
</el-collapse>
|
|
265
|
+
</el-form>
|
|
266
|
+
</div>
|
|
267
|
+
<div v-if="activeTab.value === 'css'"></div>
|
|
122
268
|
|
|
123
269
|
<th-dialog
|
|
124
270
|
title="动作设置"
|
|
@@ -248,6 +394,12 @@ export default {
|
|
|
248
394
|
data() {
|
|
249
395
|
return {
|
|
250
396
|
compsData: deepClone(compsData),
|
|
397
|
+
tabsMenus: [
|
|
398
|
+
{ title: "组件配置", value: "field" },
|
|
399
|
+
{ title: "表单属性", value: "form" },
|
|
400
|
+
{ title: "样式设置", value: "css" }
|
|
401
|
+
],
|
|
402
|
+
activeTab: {},
|
|
251
403
|
validator: {
|
|
252
404
|
type: null,
|
|
253
405
|
required: null,
|
|
@@ -292,124 +444,43 @@ export default {
|
|
|
292
444
|
score: 1
|
|
293
445
|
}
|
|
294
446
|
],
|
|
295
|
-
collapseValue: [
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
// this.validateDataType(val);
|
|
315
|
-
// },
|
|
316
|
-
// "data.options.pattern": function(val) {
|
|
317
|
-
// this.valiatePattern(val);
|
|
318
|
-
// },
|
|
319
|
-
// "data.name": function(val) {
|
|
320
|
-
// if (this.data.options) {
|
|
321
|
-
// this.validateRequired(this.data.options.required);
|
|
322
|
-
// this.validateDataType(this.data.options.dataType);
|
|
323
|
-
// this.valiatePattern(this.data.options.pattern);
|
|
324
|
-
// }
|
|
325
|
-
// }
|
|
326
|
-
// },
|
|
327
|
-
computed: {
|
|
328
|
-
show() {
|
|
329
|
-
if (this.data && Object.keys(this.data).length > 0) {
|
|
330
|
-
return true;
|
|
447
|
+
collapseValue: [
|
|
448
|
+
"group-general",
|
|
449
|
+
"group-element",
|
|
450
|
+
"group-action",
|
|
451
|
+
"group-form",
|
|
452
|
+
"group-resultData",
|
|
453
|
+
"group-label",
|
|
454
|
+
"group-attributes"
|
|
455
|
+
],
|
|
456
|
+
formRules: {
|
|
457
|
+
model: [
|
|
458
|
+
{ required: true, message: "请填选组件字段", trigger: "change" }
|
|
459
|
+
],
|
|
460
|
+
fieldsApi: [
|
|
461
|
+
{ required: true, message: "请选择字段接口", trigger: "change" }
|
|
462
|
+
],
|
|
463
|
+
title: [
|
|
464
|
+
{ required: true, message: "请填写表单标题", trigger: "change" }
|
|
465
|
+
]
|
|
331
466
|
}
|
|
332
|
-
|
|
333
|
-
}
|
|
467
|
+
};
|
|
334
468
|
},
|
|
335
469
|
created() {
|
|
470
|
+
this.activeTab = this.tabsMenus[1];
|
|
336
471
|
const keys = Object.keys(this.compsData);
|
|
337
472
|
for (const key of keys) {
|
|
338
473
|
this.compsData[key].content = require(`./custom/configs/${key}`).default;
|
|
339
474
|
}
|
|
340
475
|
},
|
|
341
476
|
methods: {
|
|
342
|
-
|
|
343
|
-
this.data.
|
|
344
|
-
|
|
345
|
-
if (this.validator[key]) {
|
|
346
|
-
this.data.rules.push(this.validator[key]);
|
|
347
|
-
}
|
|
348
|
-
});
|
|
349
|
-
},
|
|
350
|
-
|
|
351
|
-
validateRequired(val) {
|
|
352
|
-
if (val) {
|
|
353
|
-
this.validator.required = {
|
|
354
|
-
required: true,
|
|
355
|
-
message: `${this.data.name}必须填写`
|
|
356
|
-
};
|
|
357
|
-
} else {
|
|
358
|
-
this.validator.required = null;
|
|
359
|
-
}
|
|
360
|
-
|
|
361
|
-
this.$nextTick(() => {
|
|
362
|
-
this.generateRule();
|
|
363
|
-
});
|
|
364
|
-
},
|
|
365
|
-
|
|
366
|
-
validateDataType(val) {
|
|
367
|
-
if (!this.show) {
|
|
368
|
-
return false;
|
|
369
|
-
}
|
|
370
|
-
|
|
371
|
-
if (val) {
|
|
372
|
-
this.validator.type = {
|
|
373
|
-
type: val,
|
|
374
|
-
message: this.data.name + "格式不正确"
|
|
375
|
-
};
|
|
376
|
-
} else {
|
|
377
|
-
this.validator.type = null;
|
|
378
|
-
}
|
|
477
|
+
handleTabsChange(item) {
|
|
478
|
+
if (!this.data.model)
|
|
479
|
+
return this.$message.warning("请从左侧拖拽来添加组件");
|
|
379
480
|
|
|
380
|
-
this.
|
|
481
|
+
this.activeTab = item;
|
|
381
482
|
},
|
|
382
|
-
valiatePattern(val) {
|
|
383
|
-
if (!this.show) {
|
|
384
|
-
return false;
|
|
385
|
-
}
|
|
386
|
-
|
|
387
|
-
if (val) {
|
|
388
|
-
this.validator.pattern = {
|
|
389
|
-
pattern: val,
|
|
390
|
-
message: this.data.name + "格式不匹配"
|
|
391
|
-
};
|
|
392
|
-
} else {
|
|
393
|
-
this.validator.pattern = null;
|
|
394
|
-
}
|
|
395
483
|
|
|
396
|
-
this.generateRule();
|
|
397
|
-
},
|
|
398
|
-
handleInputNumberChange() {
|
|
399
|
-
if (this.data.options.minRows > this.data.options.maxRows) {
|
|
400
|
-
this.data.options.maxRows = this.data.options.minRows;
|
|
401
|
-
}
|
|
402
|
-
},
|
|
403
|
-
handleImguploadType(val) {
|
|
404
|
-
if (val == "picture-card") {
|
|
405
|
-
this.data.options.drag = false;
|
|
406
|
-
}
|
|
407
|
-
},
|
|
408
|
-
handleImguploadDrag(val) {
|
|
409
|
-
if (val) {
|
|
410
|
-
this.data.options.listType = "default";
|
|
411
|
-
}
|
|
412
|
-
},
|
|
413
484
|
handleEventDialogShow() {
|
|
414
485
|
this.eventsDialog = {
|
|
415
486
|
visible: true,
|
|
@@ -445,16 +516,14 @@ export default {
|
|
|
445
516
|
this.eventsDialog.eventScript.splice(index, 1);
|
|
446
517
|
},
|
|
447
518
|
handleEventsCollapseClick(eventKey) {
|
|
448
|
-
|
|
449
|
-
|
|
519
|
+
const eventScript = deepClone(this.config.eventScript);
|
|
520
|
+
for (let i = 0; i < eventScript.length; i++) {
|
|
521
|
+
const event = eventScript[i];
|
|
450
522
|
if (event.key === eventKey) {
|
|
451
|
-
const eventScript = JSON.parse(
|
|
452
|
-
JSON.stringify(this.config.eventScript)
|
|
453
|
-
);
|
|
454
523
|
this.eventsDialog = {
|
|
455
524
|
visible: true,
|
|
456
525
|
eventScript: eventScript,
|
|
457
|
-
active:
|
|
526
|
+
active: event
|
|
458
527
|
};
|
|
459
528
|
break;
|
|
460
529
|
}
|
|
@@ -463,13 +532,27 @@ export default {
|
|
|
463
532
|
handleTypeChange(val) {
|
|
464
533
|
const config = deepClone(this.compsData[val].config);
|
|
465
534
|
this.$emit("update", config);
|
|
535
|
+
},
|
|
536
|
+
handleFieldsApiChange() {
|
|
537
|
+
this.$emit("fieldsChange");
|
|
538
|
+
},
|
|
539
|
+
formValidate() {
|
|
540
|
+
return new Promise((resolve, reject) => {
|
|
541
|
+
if (this.$refs.formRef) {
|
|
542
|
+
this.$refs.formRef.validate(valid => {
|
|
543
|
+
resolve(valid);
|
|
544
|
+
});
|
|
545
|
+
} else {
|
|
546
|
+
reject();
|
|
547
|
+
}
|
|
548
|
+
});
|
|
466
549
|
}
|
|
467
550
|
}
|
|
468
551
|
};
|
|
469
552
|
</script>
|
|
470
553
|
|
|
471
554
|
<style lang="scss">
|
|
472
|
-
.
|
|
555
|
+
.formWidgetConfig {
|
|
473
556
|
.el-collapse-item__header {
|
|
474
557
|
padding: 0 10px;
|
|
475
558
|
height: 40px;
|
|
@@ -489,7 +572,23 @@ export default {
|
|
|
489
572
|
</style>
|
|
490
573
|
|
|
491
574
|
<style lang="scss" scoped>
|
|
492
|
-
.
|
|
575
|
+
.formWidgetConfig {
|
|
576
|
+
.tabs {
|
|
577
|
+
display: flex;
|
|
578
|
+
align-items: center;
|
|
579
|
+
height: 45px;
|
|
580
|
+
|
|
581
|
+
.tabs-item {
|
|
582
|
+
flex: 1;
|
|
583
|
+
text-align: center;
|
|
584
|
+
line-height: 44px;
|
|
585
|
+
cursor: pointer;
|
|
586
|
+
}
|
|
587
|
+
.tabs-item__active {
|
|
588
|
+
border-bottom: 2px solid #409eff;
|
|
589
|
+
}
|
|
590
|
+
}
|
|
591
|
+
|
|
493
592
|
.events-item {
|
|
494
593
|
display: flex;
|
|
495
594
|
align-items: center;
|