@neatui/vue 2.0.3 → 2.0.5
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
|
@@ -1,19 +1,23 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="form-loader n-sm-sub" :data-level="level" ui-row="">
|
|
3
3
|
<div v-for="(node, i1) in $form" v-if="!node.clear" :key="i1" class="form-loader-item" :id="node._fid" :ui-col="node.media">
|
|
4
|
-
<div
|
|
4
|
+
<div v-if="node.other && node.other.prefix" ui-flex="row lm">
|
|
5
|
+
<div :style="labelcss(node)"></div>
|
|
6
|
+
<div v-for="(item, idx) in node.other.prefix" v-html="item.value" v-bind="item.attrs" :key="idx"></div>
|
|
7
|
+
</div>
|
|
8
|
+
<div :id="`form${index + '' ? '-' + index : ''}-field-${node.field || '*'}`" v-bind="node.attrs" :data-level="level" data-node="child">
|
|
5
9
|
<slot :name="node.field" v-model:node="node" v-model:data="data">
|
|
6
|
-
<div v-if="node.label[0] !== '*'" :class="`form-loader-label ${node.vertical ? 'flex-block' : 'flex-fixed nr-sm'} o-ls`" :style="labelcss(node)" ui-flex="row xm">
|
|
10
|
+
<div v-if="node.label[0] !== '*'" :class="`form-loader-label ${node.vertical ? 'flex-block' : 'flex-fixed nr-sm'} o-ls nt-ss`" :style="labelcss(node)" ui-flex="row xm">
|
|
7
11
|
<slot v-if="slots.includes(`${node.field}-label`)" :name="`${node.field}-label`"></slot>
|
|
8
|
-
<slot v-else name="every-label" v-
|
|
12
|
+
<slot v-else name="every-label" v-model:node="node" v-model:data="data">
|
|
9
13
|
<template v-if="node.label[0]">
|
|
10
|
-
<h6 class="flex-block pr" v-if="node.vertical" v-bind="node.label[1]">
|
|
14
|
+
<h6 class="flex-block pr o-lm" style="padding-top: 2px" v-if="node.vertical" v-bind="node.label[1]">
|
|
11
15
|
<template v-if="node.label[0] === '*'"></template>
|
|
12
16
|
<template v-else>
|
|
13
17
|
<b v-if="node.rules.some((v) => v.required)" class="co-risk">﹡</b><span>{{ node.label[0] }}</span>
|
|
14
18
|
</template>
|
|
15
19
|
</h6>
|
|
16
|
-
<h6 v-else class="flex-block ar pr" v-bind="node.label[1]">
|
|
20
|
+
<h6 v-else class="flex-block ar pr o-lm" style="padding-top: 2px" v-bind="node.label[1]">
|
|
17
21
|
<template v-if="node.label[0] === '*'"></template>
|
|
18
22
|
<template v-else>
|
|
19
23
|
<b v-if="node.rules.some((v) => v.required)" class="co-risk">﹡</b><span>{{ node.label[0] }}</span>
|
|
@@ -28,62 +32,67 @@
|
|
|
28
32
|
</div>
|
|
29
33
|
</div>
|
|
30
34
|
<template v-if="node.array">
|
|
31
|
-
<template v-if="isArray(node.array)">
|
|
32
|
-
<div class="form-loader-group-array">
|
|
33
|
-
<div
|
|
34
|
-
<div class="
|
|
35
|
-
<
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
35
|
+
<template v-if="isArray(node.array.lists)">
|
|
36
|
+
<div class="form-loader-group-array flex-block">
|
|
37
|
+
<div ui-row="">
|
|
38
|
+
<div v-for="(item, i2) in data[node.field]" :key="i2" class="form-loader-array-item" :ui-col="node.array.media" v-bind="node.array.attrs">
|
|
39
|
+
<div class="flex-block">
|
|
40
|
+
<FormLoader
|
|
41
|
+
v-model:form="node.array.lists"
|
|
42
|
+
v-model:data="item"
|
|
43
|
+
v-model:fulldata="data"
|
|
44
|
+
:rows="rows"
|
|
45
|
+
:level="level + 1"
|
|
46
|
+
:index="i2"
|
|
47
|
+
:debug="debug"
|
|
48
|
+
:mode="mode"
|
|
49
|
+
:interacted="interacted"
|
|
50
|
+
:slots="slots"
|
|
51
|
+
:globalLabelWidth="lw"
|
|
52
|
+
:cache="cache"
|
|
53
|
+
>
|
|
54
|
+
<!-- 通用插槽 -->
|
|
55
|
+
<template v-slot:every-label="slotprops"><slot name="every-label" v-bind="slotprops"></slot></template>
|
|
56
|
+
<template v-slot:array-label="slotprops"><slot name="array-label" v-bind="slotprops"></slot></template>
|
|
57
|
+
<template v-slot:child-label="slotprops"><slot name="child-label" v-bind="slotprops"></slot></template>
|
|
50
58
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
59
|
+
<!-- 拉圾VUE2不能直接遍历 -->
|
|
60
|
+
<template v-if="slots[0]" v-slot:[slots[0]]="slotprops"><slot :name="slots[0]" v-bind="slotprops"></slot></template>
|
|
61
|
+
<template v-if="slots[1]" v-slot:[slots[1]]="slotprops"><slot :name="slots[1]" v-bind="slotprops"></slot></template>
|
|
62
|
+
<template v-if="slots[2]" v-slot:[slots[2]]="slotprops"><slot :name="slots[2]" v-bind="slotprops"></slot></template>
|
|
63
|
+
<template v-if="slots[3]" v-slot:[slots[3]]="slotprops"><slot :name="slots[3]" v-bind="slotprops"></slot></template>
|
|
64
|
+
<template v-if="slots[4]" v-slot:[slots[4]]="slotprops"><slot :name="slots[4]" v-bind="slotprops"></slot></template>
|
|
65
|
+
<template v-if="slots[5]" v-slot:[slots[5]]="slotprops"><slot :name="slots[5]" v-bind="slotprops"></slot></template>
|
|
66
|
+
<template v-if="slots[6]" v-slot:[slots[6]]="slotprops"><slot :name="slots[6]" v-bind="slotprops"></slot></template>
|
|
67
|
+
<template v-if="slots[7]" v-slot:[slots[7]]="slotprops"><slot :name="slots[7]" v-bind="slotprops"></slot></template>
|
|
68
|
+
<template v-if="slots[8]" v-slot:[slots[8]]="slotprops"><slot :name="slots[8]" v-bind="slotprops"></slot></template>
|
|
69
|
+
<template v-if="slots[9]" v-slot:[slots[9]]="slotprops"><slot :name="slots[9]" v-bind="slotprops"></slot></template>
|
|
62
70
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
71
|
+
<template v-if="slots[10]" v-slot:[slots[10]]="slotprops"><slot :name="slots[10]" v-bind="slotprops"></slot></template>
|
|
72
|
+
<template v-if="slots[11]" v-slot:[slots[11]]="slotprops"><slot :name="slots[11]" v-bind="slotprops"></slot></template>
|
|
73
|
+
<template v-if="slots[12]" v-slot:[slots[12]]="slotprops"><slot :name="slots[12]" v-bind="slotprops"></slot></template>
|
|
74
|
+
<template v-if="slots[13]" v-slot:[slots[13]]="slotprops"><slot :name="slots[13]" v-bind="slotprops"></slot></template>
|
|
75
|
+
<template v-if="slots[14]" v-slot:[slots[14]]="slotprops"><slot :name="slots[14]" v-bind="slotprops"></slot></template>
|
|
76
|
+
<template v-if="slots[15]" v-slot:[slots[15]]="slotprops"><slot :name="slots[15]" v-bind="slotprops"></slot></template>
|
|
77
|
+
<template v-if="slots[16]" v-slot:[slots[16]]="slotprops"><slot :name="slots[16]" v-bind="slotprops"></slot></template>
|
|
78
|
+
<template v-if="slots[17]" v-slot:[slots[17]]="slotprops"><slot :name="slots[17]" v-bind="slotprops"></slot></template>
|
|
79
|
+
<template v-if="slots[18]" v-slot:[slots[18]]="slotprops"><slot :name="slots[18]" v-bind="slotprops"></slot></template>
|
|
80
|
+
<template v-if="slots[19]" v-slot:[slots[19]]="slotprops"><slot :name="slots[19]" v-bind="slotprops"></slot></template>
|
|
73
81
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
82
|
+
<template v-if="slots[20]" v-slot:[slots[20]]="slotprops"><slot :name="slots[20]" v-bind="slotprops"></slot></template>
|
|
83
|
+
<template v-if="slots[21]" v-slot:[slots[21]]="slotprops"><slot :name="slots[21]" v-bind="slotprops"></slot></template>
|
|
84
|
+
<template v-if="slots[22]" v-slot:[slots[22]]="slotprops"><slot :name="slots[22]" v-bind="slotprops"></slot></template>
|
|
85
|
+
<template v-if="slots[23]" v-slot:[slots[23]]="slotprops"><slot :name="slots[23]" v-bind="slotprops"></slot></template>
|
|
86
|
+
<template v-if="slots[24]" v-slot:[slots[24]]="slotprops"><slot :name="slots[24]" v-bind="slotprops"></slot></template>
|
|
87
|
+
<template v-if="slots[25]" v-slot:[slots[25]]="slotprops"><slot :name="slots[25]" v-bind="slotprops"></slot></template>
|
|
88
|
+
<template v-if="slots[26]" v-slot:[slots[26]]="slotprops"><slot :name="slots[26]" v-bind="slotprops"></slot></template>
|
|
89
|
+
<template v-if="slots[27]" v-slot:[slots[27]]="slotprops"><slot :name="slots[27]" v-bind="slotprops"></slot></template>
|
|
90
|
+
<template v-if="slots[28]" v-slot:[slots[28]]="slotprops"><slot :name="slots[28]" v-bind="slotprops"></slot></template>
|
|
91
|
+
<template v-if="slots[29]" v-slot:[slots[29]]="slotprops"><slot :name="slots[29]" v-bind="slotprops"></slot></template>
|
|
92
|
+
</FormLoader>
|
|
93
|
+
</div>
|
|
94
|
+
<div class="flex-fixed" @click="fDel(data[node.field], i2)">-</div>
|
|
85
95
|
</div>
|
|
86
|
-
<div class="flex-fixed" @click="fDel(data[node.field], i2)">-</div>
|
|
87
96
|
</div>
|
|
88
97
|
</div>
|
|
89
98
|
</template>
|
|
@@ -94,13 +103,16 @@
|
|
|
94
103
|
<FormLoader
|
|
95
104
|
class="form-loader-group-child"
|
|
96
105
|
v-model:form="node.child"
|
|
97
|
-
v-model:data="
|
|
106
|
+
v-model:data="form._data"
|
|
98
107
|
v-model:fulldata="data"
|
|
99
108
|
:rows="rows"
|
|
100
109
|
:level="level + 1"
|
|
101
110
|
:debug="debug"
|
|
111
|
+
:mode="mode"
|
|
102
112
|
:interacted="interacted"
|
|
103
113
|
:slots="slots"
|
|
114
|
+
:globalLabelWidth="lw"
|
|
115
|
+
:cache="cache"
|
|
104
116
|
>
|
|
105
117
|
<!-- 通用插槽 -->
|
|
106
118
|
<template v-slot:every-label="slotprops"><slot name="every-label" v-bind="slotprops"></slot></template>
|
|
@@ -145,7 +157,7 @@
|
|
|
145
157
|
<div v-else v-html="err(`配置错误：Field: ${node.field} 配置了属性值 [child] 必须是一个数组`)"></div>
|
|
146
158
|
</template>
|
|
147
159
|
<template v-else>
|
|
148
|
-
<FormRender v-model:node="node" v-model:data="data" :interacted="interacted" :data-field="node.field">
|
|
160
|
+
<FormRender v-model:node="node" v-model:data="data" :interacted="interacted" :data-field="node.field" :mode="mode">
|
|
149
161
|
<template v-slot:[`${node.field}-value`]="slotprops">
|
|
150
162
|
<slot :name="`${node.field}-value`" v-bind="slotprops"></slot>
|
|
151
163
|
</template>
|
|
@@ -153,8 +165,12 @@
|
|
|
153
165
|
</template>
|
|
154
166
|
</slot>
|
|
155
167
|
</div>
|
|
168
|
+
<div v-if="node.other && node.other.suffix" ui-flex="row lm">
|
|
169
|
+
<div :style="labelcss(node)"></div>
|
|
170
|
+
<div v-for="(item, idx) in node.other.suffix" v-html="item.value" v-bind="item.attrs" :key="idx"></div>
|
|
171
|
+
</div>
|
|
156
172
|
</div>
|
|
157
|
-
<div class="full-x" ui-flex="row lm">
|
|
173
|
+
<div v-if="$slots.submit" class="full-x" ui-flex="row lm">
|
|
158
174
|
<div class="flex-fixed" :style="labelcss(node)"> </div>
|
|
159
175
|
<div class="flex-block"><slot name="submit"></slot></div>
|
|
160
176
|
</div>
|
|
@@ -162,13 +178,15 @@
|
|
|
162
178
|
</template>
|
|
163
179
|
|
|
164
180
|
<script>
|
|
165
|
-
import { deepcopy, isArray, isFunction, isString } from '@fekit/utils';
|
|
181
|
+
import { deepcopy, isArray, isFunction, isObject, isString } from '@fekit/utils';
|
|
166
182
|
|
|
167
183
|
// 根据表单结构生成数据结构
|
|
168
184
|
const _rows = (arr) => {
|
|
169
185
|
const data = {};
|
|
170
186
|
for (const node of arr) {
|
|
171
|
-
|
|
187
|
+
if (node.field && node.field !== '*') {
|
|
188
|
+
data[node.field] = node.child ? _rows(node.child) : node.array ? [] : '';
|
|
189
|
+
}
|
|
172
190
|
}
|
|
173
191
|
return data;
|
|
174
192
|
};
|
|
@@ -180,6 +198,10 @@
|
|
|
180
198
|
FormLoader: () => import('./FormLoader.vue')
|
|
181
199
|
},
|
|
182
200
|
props: {
|
|
201
|
+
mode: {
|
|
202
|
+
type: String,
|
|
203
|
+
default: 'edit'
|
|
204
|
+
},
|
|
183
205
|
debug: {
|
|
184
206
|
type: Boolean,
|
|
185
207
|
default: false
|
|
@@ -213,7 +235,7 @@
|
|
|
213
235
|
default: 0
|
|
214
236
|
},
|
|
215
237
|
index: {
|
|
216
|
-
type: String,
|
|
238
|
+
type: String | Number,
|
|
217
239
|
default: ''
|
|
218
240
|
},
|
|
219
241
|
vertical: {
|
|
@@ -223,12 +245,17 @@
|
|
|
223
245
|
slots: {
|
|
224
246
|
type: Array,
|
|
225
247
|
default: () => []
|
|
248
|
+
},
|
|
249
|
+
globalLabelWidth: {
|
|
250
|
+
type: Number,
|
|
251
|
+
default: 0
|
|
226
252
|
}
|
|
227
253
|
},
|
|
228
254
|
data() {
|
|
229
255
|
return {
|
|
230
256
|
node: [],
|
|
231
|
-
lw: 0
|
|
257
|
+
lw: 0,
|
|
258
|
+
cache: {}
|
|
232
259
|
};
|
|
233
260
|
},
|
|
234
261
|
computed: {
|
|
@@ -236,11 +263,23 @@
|
|
|
236
263
|
const form = this.form;
|
|
237
264
|
const data = this.fulldata || this.data;
|
|
238
265
|
return deepcopy(form)?.map((node = {}) => {
|
|
266
|
+
// 数据
|
|
267
|
+
if (node.field) {
|
|
268
|
+
form._data = data[node.field];
|
|
269
|
+
} else {
|
|
270
|
+
form._data = data;
|
|
271
|
+
}
|
|
239
272
|
// 清除字段
|
|
240
273
|
if (isFunction(node.clear)) {
|
|
241
274
|
node.clear = node.clear(data, node);
|
|
242
275
|
if (node.clear && data[node.field] !== '') {
|
|
276
|
+
this.cache[node.field] = data[node.field];
|
|
243
277
|
this.$set(data, node.field, '');
|
|
278
|
+
} else {
|
|
279
|
+
if (this.cache[node.field]) {
|
|
280
|
+
this.$set(data, node.field, this.cache[node.field]);
|
|
281
|
+
delete this.cache[node.field];
|
|
282
|
+
}
|
|
244
283
|
}
|
|
245
284
|
}
|
|
246
285
|
|
|
@@ -330,6 +369,48 @@
|
|
|
330
369
|
node.label[1].style = `${node.vertical && node?.rules?.some((v) => v.required) ? 'text-indent: -1em;' : ''} ${node.label[1] || ''}`;
|
|
331
370
|
}
|
|
332
371
|
|
|
372
|
+
// 额外内容渲染
|
|
373
|
+
if (isFunction(node.other)) {
|
|
374
|
+
node.other = node.other(data, node);
|
|
375
|
+
}
|
|
376
|
+
if (!node.other || !isObject(node.other)) {
|
|
377
|
+
node.other = {};
|
|
378
|
+
}
|
|
379
|
+
if (node.other.prefix) {
|
|
380
|
+
if (isFunction(node.other.prefix)) {
|
|
381
|
+
node.other.prefix = node.other.prefix(data, node);
|
|
382
|
+
}
|
|
383
|
+
if (isString(node.other.prefix)) {
|
|
384
|
+
node.other.prefix = [{ value: node.other.prefix, attrs: {} }];
|
|
385
|
+
}
|
|
386
|
+
if (isObject(node.other.prefix)) {
|
|
387
|
+
if (!node.other.prefix.value) {
|
|
388
|
+
node.other.prefix.value = '';
|
|
389
|
+
}
|
|
390
|
+
if (!node.other.prefix.attrs) {
|
|
391
|
+
node.other.prefix.attrs = {};
|
|
392
|
+
}
|
|
393
|
+
node.other.prefix = [node.other.prefix];
|
|
394
|
+
}
|
|
395
|
+
}
|
|
396
|
+
if (node.other.suffix) {
|
|
397
|
+
if (isFunction(node.other.suffix)) {
|
|
398
|
+
node.other.suffix = node.other.suffix(data, node);
|
|
399
|
+
}
|
|
400
|
+
if (isString(node.other.suffix)) {
|
|
401
|
+
node.other.suffix = [{ value: node.other.suffix, attrs: {} }];
|
|
402
|
+
}
|
|
403
|
+
if (isObject(node.other.suffix)) {
|
|
404
|
+
if (!node.other.suffix.value) {
|
|
405
|
+
node.other.suffix.value = '';
|
|
406
|
+
}
|
|
407
|
+
if (!node.other.suffix.attrs) {
|
|
408
|
+
node.other.suffix.attrs = {};
|
|
409
|
+
}
|
|
410
|
+
node.other.suffix = [node.other.suffix];
|
|
411
|
+
}
|
|
412
|
+
}
|
|
413
|
+
// console.log(387, node.other);
|
|
333
414
|
return node;
|
|
334
415
|
});
|
|
335
416
|
}
|
|
@@ -351,7 +432,7 @@
|
|
|
351
432
|
}
|
|
352
433
|
}
|
|
353
434
|
}
|
|
354
|
-
_lw +=
|
|
435
|
+
_lw += 2;
|
|
355
436
|
if (_lw > this.lw) {
|
|
356
437
|
this.lw = _lw;
|
|
357
438
|
}
|
|
@@ -361,9 +442,12 @@
|
|
|
361
442
|
if (node.vertical) {
|
|
362
443
|
// 竖向
|
|
363
444
|
return ``;
|
|
445
|
+
} else if (node.transverse) {
|
|
446
|
+
// 横向不固定宽度
|
|
447
|
+
return ``;
|
|
364
448
|
} else {
|
|
365
449
|
// 横向
|
|
366
|
-
return `width:${this.lw}em; max-width:50%;`;
|
|
450
|
+
return `width:${this.globalLabelWidth || this.lw}em; max-width:50%;`;
|
|
367
451
|
}
|
|
368
452
|
},
|
|
369
453
|
// 数据预处理
|
|
@@ -371,12 +455,14 @@
|
|
|
371
455
|
const fields = [];
|
|
372
456
|
// 补全数据字段
|
|
373
457
|
this.$form.forEach((item) => {
|
|
374
|
-
if (!fields.includes(item.field)) {
|
|
458
|
+
if (!fields.includes(item.field) && item.field) {
|
|
375
459
|
fields.push(item.field);
|
|
376
460
|
} else {
|
|
377
|
-
|
|
461
|
+
if (item.field) {
|
|
462
|
+
console.error(`表单字段重复：${item.field}`);
|
|
463
|
+
}
|
|
378
464
|
}
|
|
379
|
-
if (!this.data.hasOwnProperty(item.field)) {
|
|
465
|
+
if (!this.data.hasOwnProperty(item.field) && item.field && item.field !== '*') {
|
|
380
466
|
if (item.array) {
|
|
381
467
|
this.$set(this.data, item.field, []);
|
|
382
468
|
} else if (item.child) {
|
|
@@ -415,11 +501,6 @@
|
|
|
415
501
|
.form-loader {
|
|
416
502
|
position: relative;
|
|
417
503
|
width: 100%;
|
|
418
|
-
font-size:
|
|
419
|
-
}
|
|
420
|
-
|
|
421
|
-
.form-loader-label {
|
|
422
|
-
padding-top: 4px;
|
|
423
|
-
line-height: 18px;
|
|
504
|
+
font-size: 12px;
|
|
424
505
|
}
|
|
425
506
|
</style>
|
|
@@ -1,59 +1,51 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="flex-block pr">
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
@input="setInteracted"
|
|
10
|
-
@blur="setInteracted"
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
v-else-if="node.model[0] === '
|
|
28
|
-
|
|
29
|
-
v-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
v-model="value"
|
|
37
|
-
:options="node.enums"
|
|
38
|
-
v-bind="{ ...node.model[1] }"
|
|
39
|
-
@input="setInteracted"
|
|
40
|
-
@blur="setInteracted"
|
|
41
|
-
></el-cascader>
|
|
42
|
-
<gallery-value v-else-if="node.model[0] === 'SelectImg'" :form="data" :node="node" v-bind="{ ...node.model[1] }"></gallery-value>
|
|
43
|
-
<!-- 自定义组件插槽 -->
|
|
44
|
-
<slot v-else-if="node.model[0]" :name="node.model[0]" :data="data" :node="node" v-model:bind="bind"></slot>
|
|
45
|
-
<!-- 自定义字段插槽 -->
|
|
46
|
-
<slot v-else :name="`${node.field}-value`" :data="data" :node="node" v-model:bind="bind"></slot>
|
|
47
|
-
<p v-show="error.verify === 'no'" class="form-loader-verify" :data-verify-type="error.co">{{ error.tips }}</p>
|
|
3
|
+
<template v-if="mode === 'view'">
|
|
4
|
+
<slot :name="`${node.field}-value`" :data="data" :node="node" :bind.sync="bind">
|
|
5
|
+
<div class="nt-ss"><div v-html="value" style="padding-top: 2px;"></div></div>
|
|
6
|
+
</slot>
|
|
7
|
+
</template>
|
|
8
|
+
<template v-else>
|
|
9
|
+
<el-input v-if="node.model[0] === 'Input'" v-model="value" class="full-w" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted" />
|
|
10
|
+
<el-input v-if="node.model[0] === 'TextArea'" v-model="value" class="full-w" v-bind="{ ...(node.model[1] || {}, { type: 'textarea', rows: 3 }) }" @input="setInteracted" @blur="setInteracted" />
|
|
11
|
+
<el-select v-else-if="node.model[0] === 'Select'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted">
|
|
12
|
+
<el-option v-for="item in node.enums" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
|
13
|
+
</el-select>
|
|
14
|
+
<el-radio-group v-else-if="node.model[0] === 'Radio'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted">
|
|
15
|
+
<el-radio v-for="item in node.enums" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
|
|
16
|
+
</el-radio-group>
|
|
17
|
+
<el-checkbox-group v-else-if="node.model[0] === 'Checkbox' && node.enums" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted">
|
|
18
|
+
<el-checkbox v-for="item in node.enums" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
|
|
19
|
+
</el-checkbox-group>
|
|
20
|
+
<el-checkbox v-else-if="node.model[0] === 'Checkbox'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted"> </el-checkbox>
|
|
21
|
+
<el-switch v-else-if="node.model[0] === 'Switch'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted"> </el-switch>
|
|
22
|
+
<el-time-select v-else-if="node.model[0] === 'TimeSelect'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted"> </el-time-select>
|
|
23
|
+
<el-time-picker v-else-if="node.model[0] === 'TimePicker'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted"> </el-time-picker>
|
|
24
|
+
<el-date-picker v-else-if="node.model[0] === 'DatePicker'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted"> </el-date-picker>
|
|
25
|
+
<el-date-picker v-else-if="node.model[0] === 'DateTimePicker'" v-model="value" type="datetime" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted"> </el-date-picker>
|
|
26
|
+
<el-cascader v-else-if="node.model[0] === 'Cascader'" v-model="value" :options="node.enums" v-bind="{ ...node.model[1] }" @input="setInteracted" @blur="setInteracted"></el-cascader>
|
|
27
|
+
<gallery-value v-else-if="node.model[0] === 'SelectImg'" :form="data" :node="node" v-bind="{ ...node.model[1] }"></gallery-value>
|
|
28
|
+
<!-- 自定义组件插槽 -->
|
|
29
|
+
<slot v-else-if="node.model[0]" :name="node.model[0]" :data="data" :node="node" :bind.sync="bind"></slot>
|
|
30
|
+
<!-- 自定义字段插槽 -->
|
|
31
|
+
<slot v-else :name="`${node.field}-value`" :data="data" :node="node" :bind.sync="bind">
|
|
32
|
+
<div class="nt-ss"><div v-html="value" style="padding-top: 2px;"></div></div>
|
|
33
|
+
</slot>
|
|
34
|
+
<p v-show="error.verify === 'no'" class="form-loader-verify" :data-verify-type="error.co">{{ error.tips }}</p>
|
|
35
|
+
</template>
|
|
48
36
|
</div>
|
|
49
37
|
</template>
|
|
50
38
|
<script>
|
|
51
|
-
import { isFunction } from '@fekit/utils';
|
|
39
|
+
import { isFunction, findEnumName } from '@fekit/utils';
|
|
52
40
|
import GalleryValue from '@/common/galleryValue';
|
|
53
41
|
|
|
54
42
|
export default {
|
|
55
43
|
components: { GalleryValue },
|
|
56
44
|
props: {
|
|
45
|
+
mode: {
|
|
46
|
+
type: String,
|
|
47
|
+
default: 'edit'
|
|
48
|
+
},
|
|
57
49
|
node: {
|
|
58
50
|
type: Object,
|
|
59
51
|
default: () => ({})
|
|
@@ -76,24 +68,35 @@
|
|
|
76
68
|
error: {}
|
|
77
69
|
};
|
|
78
70
|
},
|
|
79
|
-
created() {
|
|
80
|
-
// console.log(54, this.$props.node);
|
|
81
|
-
},
|
|
71
|
+
created() {},
|
|
82
72
|
computed: {
|
|
83
73
|
value: {
|
|
84
74
|
get() {
|
|
85
|
-
|
|
75
|
+
let _value = this.node?.value || null;
|
|
76
|
+
if (_value) {
|
|
77
|
+
if (isFunction(_value)) {
|
|
78
|
+
_value = _value(this.data, this.data[this.node.field], this.node);
|
|
79
|
+
}
|
|
80
|
+
} else {
|
|
81
|
+
if (this.node.field) {
|
|
82
|
+
_value = this.data[this.node.field];
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
if (_value && this.node.enums) {
|
|
86
|
+
_value = findEnumName(this.node.enums, _value);
|
|
87
|
+
}
|
|
88
|
+
return _value;
|
|
86
89
|
},
|
|
87
90
|
set(value) {
|
|
88
|
-
const _value = this
|
|
91
|
+
const _value = this.node.value;
|
|
89
92
|
if (_value) {
|
|
90
93
|
if (isFunction(_value)) {
|
|
91
|
-
this.$set(this
|
|
94
|
+
this.$set(this.data, this.node.field, _value(this.data, value, this.node));
|
|
92
95
|
} else {
|
|
93
|
-
this.$set(this
|
|
96
|
+
this.$set(this.data, this.node.field, value);
|
|
94
97
|
}
|
|
95
98
|
} else {
|
|
96
|
-
this.$set(this
|
|
99
|
+
this.$set(this.data, this.node.field, value);
|
|
97
100
|
}
|
|
98
101
|
this.validate();
|
|
99
102
|
}
|
|
@@ -169,7 +172,7 @@
|
|
|
169
172
|
bind: {
|
|
170
173
|
handler(bind) {
|
|
171
174
|
let value = bind.value;
|
|
172
|
-
const run = this
|
|
175
|
+
const run = this.node.value;
|
|
173
176
|
if (run) {
|
|
174
177
|
if (isFunction(run)) {
|
|
175
178
|
value = run(value);
|
|
@@ -177,7 +180,7 @@
|
|
|
177
180
|
value = run;
|
|
178
181
|
}
|
|
179
182
|
}
|
|
180
|
-
this.$set(this
|
|
183
|
+
this.$set(this.data, this.node.field, value);
|
|
181
184
|
this.$set(this.bind, 'value', value);
|
|
182
185
|
},
|
|
183
186
|
deep: true
|