kz-ui-base 1.0.136 → 1.0.138
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/components/customForm/formColumns.vue +171 -307
- package/package.json +1 -1
|
@@ -1,118 +1,130 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="
|
|
3
|
-
<!-- 非Tab区域 -->
|
|
2
|
+
<div class="">
|
|
4
3
|
<template v-for="item in areaSetting">
|
|
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
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
</el-col>
|
|
49
|
-
</el-row>
|
|
50
|
-
</el-collapse-item>
|
|
51
|
-
</el-collapse>
|
|
52
|
-
</el-col>
|
|
53
|
-
</template>
|
|
54
|
-
|
|
55
|
-
<!-- 普通字段区域 -->
|
|
56
|
-
<template v-for="(column, index) in getAreaColumns(item.name)">
|
|
57
|
-
<el-col
|
|
58
|
-
v-if="shouldRenderColumn(column, item)"
|
|
59
|
-
:key="`${item.name}-${index}`"
|
|
60
|
-
:span="column.width || 12"
|
|
61
|
-
:class="column.alteration ? 'alterationRed' : ''"
|
|
62
|
-
class="form-item-col"
|
|
63
|
-
:style="getColumnStyle(column)"
|
|
4
|
+
<div
|
|
5
|
+
v-if="item.visible && item.type != 'tab' && item.text"
|
|
6
|
+
:key="item.type"
|
|
7
|
+
class="borderClass"
|
|
8
|
+
>
|
|
9
|
+
<i :class="item.icon"></i>{{ item.text }}
|
|
10
|
+
</div>
|
|
11
|
+
<el-col
|
|
12
|
+
v-for="(column, index) in columns"
|
|
13
|
+
:key="index"
|
|
14
|
+
:span="column.width || 12"
|
|
15
|
+
:disabled="column.disabled"
|
|
16
|
+
:class="column.alteration?'alterationRed':''"
|
|
17
|
+
:style="{
|
|
18
|
+
height:
|
|
19
|
+
column.displayType == 'Upload'
|
|
20
|
+
? ''
|
|
21
|
+
: column.displayType == 'Editor'
|
|
22
|
+
? '280px'
|
|
23
|
+
: '',
|
|
24
|
+
clear: column.wrap ? 'both' : '',
|
|
25
|
+
}"
|
|
26
|
+
>
|
|
27
|
+
<el-collapse class="el-col el-col-24" v-if="item.name=='basic'&&column.setting&&column.setting.fold&&column.setting.folds" v-model="activeName" accordion>
|
|
28
|
+
<el-collapse-item :title="column.text" name="1">
|
|
29
|
+
<div class="el-col el-col-12" v-for="(column, index) in columns" v-if="column.setting&&column.setting.fold">
|
|
30
|
+
<component
|
|
31
|
+
ref="editDialog"
|
|
32
|
+
:key="index"
|
|
33
|
+
:disabled="column.disabled"
|
|
34
|
+
:is="
|
|
35
|
+
column.displayType != null
|
|
36
|
+
? 'KZ_' + column.displayType
|
|
37
|
+
: 'KZ_TextBox'
|
|
38
|
+
"
|
|
39
|
+
:columns="columns"
|
|
40
|
+
:column="column"
|
|
41
|
+
:entity.sync="entity"
|
|
42
|
+
:setting.sync="column.setting"
|
|
43
|
+
:value="entity[column.property]"
|
|
44
|
+
@assignment="assignment"
|
|
45
|
+
@change="onChangeEvent"
|
|
46
|
+
@onSearch="onSearch"
|
|
64
47
|
>
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
48
|
+
</component>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
</el-collapse-item>
|
|
52
|
+
</el-collapse>
|
|
53
|
+
<template v-else-if="column.setting&&column.setting.fold"></template>
|
|
54
|
+
<template
|
|
55
|
+
v-else-if="
|
|
56
|
+
(column.visible == undefined || column.visible != false) &&
|
|
57
|
+
(item.name == column.area || !column.area) &&
|
|
58
|
+
item.type != 'tab'
|
|
59
|
+
">
|
|
60
|
+
<component
|
|
61
|
+
ref="editDialog"
|
|
62
|
+
:key="index"
|
|
63
|
+
:disabled="column.disabled"
|
|
64
|
+
:is="
|
|
65
|
+
column.displayType != null
|
|
66
|
+
? 'KZ_' + column.displayType
|
|
67
|
+
: 'KZ_TextBox'
|
|
68
|
+
"
|
|
69
|
+
:columns="columns"
|
|
70
|
+
:column="column"
|
|
71
|
+
:entity.sync="entity"
|
|
72
|
+
:setting.sync="column.setting"
|
|
73
|
+
:value="entity[column.property]"
|
|
74
|
+
@assignment="assignment"
|
|
75
|
+
@change="onChangeEvent"
|
|
76
|
+
@clickDialog="clickDialog"
|
|
77
|
+
@onSearch="onSearch"
|
|
78
|
+
>
|
|
79
|
+
</component>
|
|
82
80
|
</template>
|
|
83
|
-
</template>
|
|
84
81
|
|
|
85
|
-
|
|
86
|
-
|
|
82
|
+
</el-col>
|
|
83
|
+
</template>
|
|
84
|
+
<el-tabs style="width: 100%; display: inline-block" v-model="activeName">
|
|
87
85
|
<el-tab-pane
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
86
|
+
v-for="(it, ix) in tabList"
|
|
87
|
+
:key="ix"
|
|
88
|
+
:label="it.text"
|
|
89
|
+
:name="it.text"
|
|
92
90
|
>
|
|
93
|
-
<el-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
91
|
+
<el-col
|
|
92
|
+
v-for="(column, index) in columns"
|
|
93
|
+
:key="index"
|
|
94
|
+
v-if="
|
|
95
|
+
(column.visible == undefined || column.visible != false) &&
|
|
96
|
+
it.name == column.area
|
|
97
|
+
"
|
|
98
|
+
:span="column.width || 12"
|
|
99
|
+
:disabled="column.disabled"
|
|
100
|
+
:style="{
|
|
101
|
+
height:
|
|
102
|
+
column.displayType == 'Upload'
|
|
103
|
+
? ''
|
|
104
|
+
: column.displayType == 'Editor'
|
|
105
|
+
? '280px'
|
|
106
|
+
: '',
|
|
107
|
+
clear: column.wrap ? 'both' : '',
|
|
108
|
+
}"
|
|
109
|
+
>
|
|
110
|
+
<component
|
|
111
|
+
ref="editDialog"
|
|
112
|
+
:disabled="column.disabled"
|
|
113
|
+
:is="
|
|
114
|
+
column.displayType != null
|
|
115
|
+
? 'KZ_' + column.displayType
|
|
116
|
+
: 'KZ_TextBox'
|
|
117
|
+
"
|
|
118
|
+
:columns="columns"
|
|
119
|
+
:column="column"
|
|
120
|
+
:entity.sync="entity"
|
|
121
|
+
:setting.sync="column.setting"
|
|
122
|
+
:value="entity[column.property]"
|
|
123
|
+
@change="onChangeEvent"
|
|
124
|
+
@onSearch="onSearch"
|
|
101
125
|
>
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
:disabled="column.disabled"
|
|
105
|
-
:is="getComponentType(column)"
|
|
106
|
-
:columns="columns"
|
|
107
|
-
:column="column"
|
|
108
|
-
:entity.sync="entity"
|
|
109
|
-
:setting.sync="column.setting"
|
|
110
|
-
:value="entity[column.property]"
|
|
111
|
-
@change="onChangeEvent"
|
|
112
|
-
@onSearch="onSearch"
|
|
113
|
-
/>
|
|
114
|
-
</el-col>
|
|
115
|
-
</el-row>
|
|
126
|
+
</component>
|
|
127
|
+
</el-col>
|
|
116
128
|
</el-tab-pane>
|
|
117
129
|
</el-tabs>
|
|
118
130
|
</div>
|
|
@@ -125,11 +137,13 @@ import KZ_TextBox from "./textBox.vue";
|
|
|
125
137
|
import KZ_Cascader from "./cascader.vue";
|
|
126
138
|
import KZ_CheckBox from "./checkBox.vue";
|
|
127
139
|
import KZ_TreeDownList from "./treeDownList";
|
|
140
|
+
// import KZ_ColorPicker from "@components/customForm/colorPicker";
|
|
128
141
|
import KZ_DatePicker from "./datePicker.vue";
|
|
129
142
|
import KZ_Switch from "./switch.vue";
|
|
130
143
|
import KZ_Upload from "./upload.vue";
|
|
131
144
|
import KZ_UploadButton from "./uploadButton";
|
|
132
145
|
import KZ_TextArea from "./textarea.vue";
|
|
146
|
+
// import KZ_Editor from "@components/customForm/editor";
|
|
133
147
|
import KZ_Lookup from "./lookup.vue";
|
|
134
148
|
import KZ_Text from "./text.vue";
|
|
135
149
|
import KZ_Radio from "./radio.vue";
|
|
@@ -141,11 +155,13 @@ import KZ_CustomButton from "./customButton.vue";
|
|
|
141
155
|
KZ_TextBox,
|
|
142
156
|
KZ_Cascader,
|
|
143
157
|
KZ_CheckBox,
|
|
158
|
+
// KZ_ColorPicker,
|
|
144
159
|
KZ_DatePicker,
|
|
145
160
|
KZ_Switch,
|
|
146
161
|
KZ_Upload,
|
|
147
162
|
KZ_UploadButton,
|
|
148
163
|
KZ_TextArea,
|
|
164
|
+
// KZ_Editor,
|
|
149
165
|
KZ_Lookup,
|
|
150
166
|
KZ_Text,
|
|
151
167
|
KZ_Radio,
|
|
@@ -154,227 +170,75 @@ import KZ_CustomButton from "./customButton.vue";
|
|
|
154
170
|
},
|
|
155
171
|
})
|
|
156
172
|
export default class FormColumns extends Vue {
|
|
157
|
-
@Prop()
|
|
158
|
-
|
|
159
|
-
@Prop()
|
|
173
|
+
@Prop()
|
|
174
|
+
entity;
|
|
175
|
+
@Prop()
|
|
176
|
+
rules;
|
|
177
|
+
@Prop()
|
|
178
|
+
columns;
|
|
160
179
|
@Prop({
|
|
161
180
|
type: Array,
|
|
162
|
-
default: ()
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
181
|
+
default: function () {
|
|
182
|
+
return [
|
|
183
|
+
{
|
|
184
|
+
name: "basic",
|
|
185
|
+
visible: true,
|
|
186
|
+
icon: "ion-plus-round",
|
|
187
|
+
text: "",
|
|
188
|
+
type: "area",
|
|
189
|
+
},
|
|
190
|
+
];
|
|
191
|
+
},
|
|
169
192
|
})
|
|
170
|
-
areaSetting
|
|
171
|
-
|
|
172
|
-
private
|
|
173
|
-
private
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
// 计算属性：获取折叠的列
|
|
177
|
-
get foldColumns() {
|
|
178
|
-
return (this.columns || []).filter(col =>
|
|
179
|
-
col.setting && col.setting.fold && !col.setting.folds
|
|
180
|
-
);
|
|
193
|
+
areaSetting;
|
|
194
|
+
private tabList = [];
|
|
195
|
+
private activeName = "";
|
|
196
|
+
private onChangeEvent(args) {
|
|
197
|
+
this.$emit("change", args);
|
|
181
198
|
}
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
get hasFoldColumns() {
|
|
185
|
-
return this.foldColumns.length > 0;
|
|
199
|
+
assignment(value, type) {
|
|
200
|
+
this.$emit("change", value, type);
|
|
186
201
|
}
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
getAreaColumns(areaName: string) {
|
|
190
|
-
return (this.columns || []).filter(col =>
|
|
191
|
-
col.area === areaName || (!col.area && areaName === 'basic')
|
|
192
|
-
);
|
|
202
|
+
clickDialog(value){
|
|
203
|
+
this.$emit("clickDialog",value);
|
|
193
204
|
}
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
getTabColumns(tabName: string) {
|
|
197
|
-
return (this.columns || []).filter(col =>
|
|
198
|
-
(col.visible === undefined || col.visible !== false) &&
|
|
199
|
-
col.area === tabName
|
|
200
|
-
);
|
|
205
|
+
onSearch(value) {
|
|
206
|
+
this.$emit("onSearch", value);
|
|
201
207
|
}
|
|
202
|
-
|
|
203
|
-
// 判断是否应该渲染列
|
|
204
|
-
shouldRenderColumn(column: any, item: any): boolean {
|
|
205
|
-
if (column.setting && column.setting.fold) return false;
|
|
206
|
-
if (column.visible === false) return false;
|
|
207
|
-
if (!item.name || column.area === item.name) return true;
|
|
208
|
-
if (!column.area && item.name === 'basic') return true;
|
|
209
|
-
return false;
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
// 获取组件类型
|
|
213
|
-
getComponentType(column: any): string {
|
|
214
|
-
return column.displayType ? `KZ_${column.displayType}` : 'KZ_TextBox';
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
// 获取列样式
|
|
218
|
-
getColumnStyle(column: any): any {
|
|
219
|
-
const style: any = {};
|
|
220
|
-
|
|
221
|
-
if (column.wrap) {
|
|
222
|
-
style.clear = 'both';
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
// 高度设置
|
|
226
|
-
if (column.displayType === 'Upload') {
|
|
227
|
-
style.minHeight = '40px';
|
|
228
|
-
} else if (column.displayType === 'Editor') {
|
|
229
|
-
style.height = '280px';
|
|
230
|
-
style.minHeight = '280px';
|
|
231
|
-
}
|
|
232
|
-
|
|
233
|
-
// 响应式调整
|
|
234
|
-
style.marginBottom = '20px';
|
|
235
|
-
|
|
236
|
-
return style;
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
@Emit('change')
|
|
240
|
-
private onChangeEvent(args: any) {
|
|
241
|
-
return args;
|
|
242
|
-
}
|
|
243
|
-
|
|
244
|
-
@Emit('change')
|
|
245
|
-
private assignment(value: any, type?: string) {
|
|
246
|
-
return { value, type };
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
@Emit('clickDialog')
|
|
250
|
-
private clickDialog(value: any) {
|
|
251
|
-
return value;
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
@Emit('onSearch')
|
|
255
|
-
private onSearch(value: any) {
|
|
256
|
-
return value;
|
|
257
|
-
}
|
|
258
|
-
|
|
259
208
|
created() {
|
|
260
|
-
this.
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
if (this.tabList.length > 0) {
|
|
269
|
-
this.activeTabName = this.tabList[0].name;
|
|
270
|
-
}
|
|
209
|
+
this.areaSetting &&
|
|
210
|
+
this.areaSetting.forEach((item) => {
|
|
211
|
+
if (item.type == "tab") {
|
|
212
|
+
this.tabList.push(item);
|
|
213
|
+
// console.log(this.tabList);
|
|
214
|
+
this.activeName = this.tabList[0].text;
|
|
215
|
+
}
|
|
216
|
+
});
|
|
271
217
|
}
|
|
272
218
|
}
|
|
273
219
|
</script>
|
|
274
|
-
|
|
220
|
+
<style>
|
|
221
|
+
.rowclass {
|
|
222
|
+
/* display: flex; */
|
|
223
|
+
/* flex-wrap: wrap; */
|
|
224
|
+
}
|
|
225
|
+
</style>
|
|
275
226
|
<style scoped>
|
|
276
|
-
.
|
|
227
|
+
.borderClass {
|
|
228
|
+
display: inline-block;
|
|
277
229
|
width: 100%;
|
|
278
|
-
box-sizing: border-box;
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
.area-title {
|
|
282
230
|
font-weight: 600;
|
|
283
231
|
line-height: 40px;
|
|
284
232
|
border-bottom: solid 2px rgb(223, 228, 237);
|
|
285
|
-
margin-bottom:
|
|
286
|
-
margin-top: 10px;
|
|
287
|
-
font-size: 16px;
|
|
288
|
-
}
|
|
289
|
-
|
|
290
|
-
.area-content,
|
|
291
|
-
.tab-content {
|
|
292
|
-
margin-bottom: 20px;
|
|
293
|
-
}
|
|
294
|
-
|
|
295
|
-
.form-item-col {
|
|
296
|
-
margin-bottom: 20px;
|
|
297
|
-
box-sizing: border-box;
|
|
298
|
-
}
|
|
299
|
-
|
|
300
|
-
.tab-container {
|
|
301
|
-
width: 100%;
|
|
302
|
-
margin-top: 10px;
|
|
303
|
-
}
|
|
304
|
-
|
|
305
|
-
/* 响应式调整 */
|
|
306
|
-
@media screen and (max-width: 1200px) {
|
|
307
|
-
.form-item-col {
|
|
308
|
-
margin-bottom: 15px;
|
|
309
|
-
}
|
|
310
|
-
}
|
|
311
|
-
|
|
312
|
-
@media screen and (max-width: 992px) {
|
|
313
|
-
.form-item-col {
|
|
314
|
-
width: 100% !important;
|
|
315
|
-
max-width: 100% !important;
|
|
316
|
-
flex: 0 0 100% !important;
|
|
317
|
-
margin-bottom: 15px;
|
|
318
|
-
}
|
|
319
|
-
|
|
320
|
-
.area-title {
|
|
321
|
-
font-size: 15px;
|
|
322
|
-
line-height: 36px;
|
|
323
|
-
margin-bottom: 15px;
|
|
324
|
-
}
|
|
325
|
-
}
|
|
326
|
-
|
|
327
|
-
@media screen and (max-width: 768px) {
|
|
328
|
-
.form-item-col {
|
|
329
|
-
margin-bottom: 12px;
|
|
330
|
-
}
|
|
331
|
-
|
|
332
|
-
.area-content,
|
|
333
|
-
.tab-content {
|
|
334
|
-
margin-bottom: 15px;
|
|
335
|
-
}
|
|
233
|
+
margin-bottom: 15px;
|
|
336
234
|
}
|
|
337
|
-
|
|
338
|
-
::v-deep.alterationRed .el-input__inner {
|
|
235
|
+
::v-deep.alterationRed .el-input__inner{
|
|
339
236
|
border-color: red !important;
|
|
340
237
|
}
|
|
341
|
-
|
|
342
|
-
::v-deep.alterationRed .el-textarea__inner {
|
|
238
|
+
::v-deep.alterationRed .el-textarea__inner{
|
|
343
239
|
border-color: red !important;
|
|
344
240
|
}
|
|
345
|
-
|
|
346
|
-
::v-deep.alterationRed .el-upload {
|
|
241
|
+
::v-deep.alterationRed .el-upload{
|
|
347
242
|
border-color: red !important;
|
|
348
243
|
}
|
|
349
|
-
|
|
350
|
-
/* 确保所有组件容器正确显示 */
|
|
351
|
-
::v-deep .el-form-item {
|
|
352
|
-
width: 100%;
|
|
353
|
-
margin-bottom: 0;
|
|
354
|
-
}
|
|
355
|
-
|
|
356
|
-
::v-deep .el-collapse-item__content {
|
|
357
|
-
padding-bottom: 0;
|
|
358
|
-
}
|
|
359
|
-
|
|
360
|
-
::v-deep .el-tabs__content {
|
|
361
|
-
overflow: visible;
|
|
362
|
-
}
|
|
363
|
-
|
|
364
|
-
::v-deep .el-row {
|
|
365
|
-
flex-wrap: wrap;
|
|
366
|
-
}
|
|
367
|
-
/* 全局样式，确保布局正确 */
|
|
368
|
-
.el-col {
|
|
369
|
-
box-sizing: border-box;
|
|
370
|
-
}
|
|
371
|
-
|
|
372
|
-
.el-row {
|
|
373
|
-
display: flex;
|
|
374
|
-
flex-wrap: wrap;
|
|
375
|
-
}
|
|
376
|
-
</style>
|
|
377
|
-
|
|
378
|
-
<style>
|
|
379
|
-
|
|
380
244
|
</style>
|