@neatui/vue 2.17.5 → 3.0.0
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/.prettierrc +12 -0
- package/README.md +82 -0
- package/package.json +7 -4
- package/src/components/basic/IFollowView.vue +47 -34
- package/src/components/basic/IPickerView.vue +16 -8
- package/src/components/basic/IRouterView.vue +133 -74
- package/src/components/basic/IScrollView.vue +40 -28
- package/src/components/basic/LayerView/Layer.vue +33 -24
- package/src/components/basic/LayerView/index.ts +3 -1
- package/src/components/form/DateView@v3.vue +2 -1
- package/src/components/form/Input@v3.vue +9 -6
- package/src/components/form/TextArea.vue +3 -3
- package/src/components/loader/FormLoader/FormLoader.vue +29 -4
- package/src/components/loader/LayerLoader/LayerLoader.vue +2 -1
- package/src/components/loader/LimitLoader/LimitLoader@v3.vue +3 -3
- package/src/components/loader/TableLoader/TableLoader.vue +3 -3
- package/src/components/loader/index.ts +1 -1
- package/src/components/tools/FormDraftsView.vue +15 -11
- package/src/components/tools/FormVerifyView.vue +4 -3
- package/src/components/tools/MoreTools.vue +4 -3
- package/src/components/tools/Pagination@a.vue +74 -38
- package/src/components/tools/Pagination@b.vue +2 -1
- package/src/store/frame.ts +18 -10
- package/src/utils/theme.ts +3 -0
- package/src/components/basic/follow.ts +0 -133
- package/src/components/loader/FormLoader/FormLoader@v2.vue +0 -422
- package/src/components/loader/FormLoader/NodeLoader.vue +0 -85
- package/src/components/loader/FormLoader@v1/FormLoader.vue +0 -506
- package/src/components/loader/FormLoader@v1/FormRender.vue +0 -302
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<template v-for="(item, index) in $nodes" :key="item.paths">
|
|
3
|
-
<div class="fekit-node-loader" :data-level="level" :data-index="index" :data-paths="item.paths" v-bind="item.attrs" v-on="item.$events" v-html="item.value"></div>
|
|
4
|
-
<NodeLoader v-if="item.child" :nodes="item.child" :level="$level" :index="index" :paths="item.paths" />
|
|
5
|
-
</template>
|
|
6
|
-
</template>
|
|
7
|
-
<script setup lang="ts">
|
|
8
|
-
import { computed } from 'vue';
|
|
9
|
-
import NodeLoader from './NodeLoader.vue';
|
|
10
|
-
|
|
11
|
-
interface NodeProps {
|
|
12
|
-
label?: string | ((data: any) => string);
|
|
13
|
-
field?: string | ((data: any) => string);
|
|
14
|
-
model?: string | ((data: any) => string);
|
|
15
|
-
attrs?: Record<string, any> | ((data: any) => Record<string, any>);
|
|
16
|
-
clear?: boolean | ((data: any) => boolean);
|
|
17
|
-
media?: string | ((data: any) => string);
|
|
18
|
-
value?: any | ((data: any) => any);
|
|
19
|
-
event?: Record<string, any> | ((data: any) => Record<string, any>);
|
|
20
|
-
child?: NodeProps[];
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
interface Props {
|
|
24
|
-
nodes: NodeProps[];
|
|
25
|
-
level?: number;
|
|
26
|
-
index?: number;
|
|
27
|
-
paths?: string;
|
|
28
|
-
}
|
|
29
|
-
const props = withDefaults(defineProps<Props>(), {
|
|
30
|
-
nodes: () => [],
|
|
31
|
-
level: 0,
|
|
32
|
-
index: 0,
|
|
33
|
-
paths: '',
|
|
34
|
-
});
|
|
35
|
-
|
|
36
|
-
const $nodes = computed(() => {
|
|
37
|
-
return props.nodes.map((item, index) => {
|
|
38
|
-
const paths = props.paths ? `${props.paths}-${index}` : `${index}`;
|
|
39
|
-
const context = { node: item, level: props.level, index, paths } as const;
|
|
40
|
-
|
|
41
|
-
let attrs: any = item.attrs;
|
|
42
|
-
if (typeof attrs === 'function') {
|
|
43
|
-
try {
|
|
44
|
-
attrs = attrs(context);
|
|
45
|
-
} catch {
|
|
46
|
-
/* noop */
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
let value: any = (item as any).value;
|
|
51
|
-
if (typeof value === 'function') {
|
|
52
|
-
try {
|
|
53
|
-
value = value(context);
|
|
54
|
-
} catch {
|
|
55
|
-
/* noop */
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
let ev: any = (item as any).event;
|
|
60
|
-
if (typeof ev === 'function') {
|
|
61
|
-
try {
|
|
62
|
-
ev = ev(context);
|
|
63
|
-
} catch {
|
|
64
|
-
ev = undefined;
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
const $events: Record<string, any> = {};
|
|
69
|
-
if (ev && typeof ev === 'object') {
|
|
70
|
-
for (const key in ev) {
|
|
71
|
-
const fn = ev[key];
|
|
72
|
-
if (typeof fn === 'function') {
|
|
73
|
-
$events[key] = (...args: any[]) => fn(context, ...args);
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
return { ...item, index, paths, attrs, value, $events } as any;
|
|
79
|
-
});
|
|
80
|
-
});
|
|
81
|
-
|
|
82
|
-
const $level = computed(() => {
|
|
83
|
-
return props.level + 1;
|
|
84
|
-
});
|
|
85
|
-
</script>
|
|
@@ -1,506 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="form-loader n-sm-sub" :data-level="level" ui-row="">
|
|
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 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">
|
|
9
|
-
<slot :name="node.field" v-model:node="node" v-model:data="data">
|
|
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">
|
|
11
|
-
<slot v-if="slots.includes(`${node.field}-label`)" :name="`${node.field}-label`"></slot>
|
|
12
|
-
<slot v-else name="every-label" v-model:node="node" v-model:data="data">
|
|
13
|
-
<template v-if="node.label[0]">
|
|
14
|
-
<h6 class="flex-block pr o-lm" style="padding-top: 2px" v-if="node.vertical" v-bind="node.label[1]">
|
|
15
|
-
<template v-if="node.label[0] === '*'"></template>
|
|
16
|
-
<template v-else>
|
|
17
|
-
<b v-if="node.rules.some((v) => v.required)" class="co-risk">﹡</b><span>{{ node.label[0] }}</span>
|
|
18
|
-
</template>
|
|
19
|
-
</h6>
|
|
20
|
-
<h6 v-else class="flex-block ar pr o-lm" style="padding-top: 2px" v-bind="node.label[1]">
|
|
21
|
-
<template v-if="node.label[0] === '*'"></template>
|
|
22
|
-
<template v-else>
|
|
23
|
-
<b v-if="node.rules.some((v) => v.required)" class="co-risk">﹡</b><span>{{ node.label[0] }}</span>
|
|
24
|
-
</template>
|
|
25
|
-
</h6>
|
|
26
|
-
</template>
|
|
27
|
-
</slot>
|
|
28
|
-
<div v-if="node.array">
|
|
29
|
-
<el-button size="s" @click="fAdd(node, data[node.field])">
|
|
30
|
-
<span>+</span>
|
|
31
|
-
</el-button>
|
|
32
|
-
</div>
|
|
33
|
-
</div>
|
|
34
|
-
<template v-if="node.array">
|
|
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>
|
|
58
|
-
|
|
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>
|
|
70
|
-
|
|
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>
|
|
81
|
-
|
|
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>
|
|
95
|
-
</div>
|
|
96
|
-
</div>
|
|
97
|
-
</div>
|
|
98
|
-
</template>
|
|
99
|
-
<div v-else v-html="err(`配置错误:Field: ${node.field} 配置了属性值 [array] 必须是一个数组`)"></div>
|
|
100
|
-
</template>
|
|
101
|
-
<template v-else-if="node.child">
|
|
102
|
-
<template v-if="isArray(node.child)">
|
|
103
|
-
<FormLoader
|
|
104
|
-
class="form-loader-group-child"
|
|
105
|
-
v-model:form="node.child"
|
|
106
|
-
v-model:data="form._data"
|
|
107
|
-
v-model:fulldata="data"
|
|
108
|
-
:rows="rows"
|
|
109
|
-
:level="level + 1"
|
|
110
|
-
:debug="debug"
|
|
111
|
-
:mode="mode"
|
|
112
|
-
:interacted="interacted"
|
|
113
|
-
:slots="slots"
|
|
114
|
-
:globalLabelWidth="lw"
|
|
115
|
-
:cache="cache"
|
|
116
|
-
>
|
|
117
|
-
<!-- 通用插槽 -->
|
|
118
|
-
<template v-slot:every-label="slotprops"><slot name="every-label" v-bind="slotprops"></slot></template>
|
|
119
|
-
<template v-slot:array-label="slotprops"><slot name="array-label" v-bind="slotprops"></slot></template>
|
|
120
|
-
<template v-slot:child-label="slotprops"><slot name="child-label" v-bind="slotprops"></slot></template>
|
|
121
|
-
|
|
122
|
-
<!-- 拉圾VUE2不能直接遍历 -->
|
|
123
|
-
<template v-if="slots[0]" v-slot:[slots[0]]="slotprops"><slot :name="slots[0]" v-bind="slotprops"></slot></template>
|
|
124
|
-
<template v-if="slots[1]" v-slot:[slots[1]]="slotprops"><slot :name="slots[1]" v-bind="slotprops"></slot></template>
|
|
125
|
-
<template v-if="slots[2]" v-slot:[slots[2]]="slotprops"><slot :name="slots[2]" v-bind="slotprops"></slot></template>
|
|
126
|
-
<template v-if="slots[3]" v-slot:[slots[3]]="slotprops"><slot :name="slots[3]" v-bind="slotprops"></slot></template>
|
|
127
|
-
<template v-if="slots[4]" v-slot:[slots[4]]="slotprops"><slot :name="slots[4]" v-bind="slotprops"></slot></template>
|
|
128
|
-
<template v-if="slots[5]" v-slot:[slots[5]]="slotprops"><slot :name="slots[5]" v-bind="slotprops"></slot></template>
|
|
129
|
-
<template v-if="slots[6]" v-slot:[slots[6]]="slotprops"><slot :name="slots[6]" v-bind="slotprops"></slot></template>
|
|
130
|
-
<template v-if="slots[7]" v-slot:[slots[7]]="slotprops"><slot :name="slots[7]" v-bind="slotprops"></slot></template>
|
|
131
|
-
<template v-if="slots[8]" v-slot:[slots[8]]="slotprops"><slot :name="slots[8]" v-bind="slotprops"></slot></template>
|
|
132
|
-
<template v-if="slots[9]" v-slot:[slots[9]]="slotprops"><slot :name="slots[9]" v-bind="slotprops"></slot></template>
|
|
133
|
-
|
|
134
|
-
<template v-if="slots[10]" v-slot:[slots[10]]="slotprops"><slot :name="slots[10]" v-bind="slotprops"></slot></template>
|
|
135
|
-
<template v-if="slots[11]" v-slot:[slots[11]]="slotprops"><slot :name="slots[11]" v-bind="slotprops"></slot></template>
|
|
136
|
-
<template v-if="slots[12]" v-slot:[slots[12]]="slotprops"><slot :name="slots[12]" v-bind="slotprops"></slot></template>
|
|
137
|
-
<template v-if="slots[13]" v-slot:[slots[13]]="slotprops"><slot :name="slots[13]" v-bind="slotprops"></slot></template>
|
|
138
|
-
<template v-if="slots[14]" v-slot:[slots[14]]="slotprops"><slot :name="slots[14]" v-bind="slotprops"></slot></template>
|
|
139
|
-
<template v-if="slots[15]" v-slot:[slots[15]]="slotprops"><slot :name="slots[15]" v-bind="slotprops"></slot></template>
|
|
140
|
-
<template v-if="slots[16]" v-slot:[slots[16]]="slotprops"><slot :name="slots[16]" v-bind="slotprops"></slot></template>
|
|
141
|
-
<template v-if="slots[17]" v-slot:[slots[17]]="slotprops"><slot :name="slots[17]" v-bind="slotprops"></slot></template>
|
|
142
|
-
<template v-if="slots[18]" v-slot:[slots[18]]="slotprops"><slot :name="slots[18]" v-bind="slotprops"></slot></template>
|
|
143
|
-
<template v-if="slots[19]" v-slot:[slots[19]]="slotprops"><slot :name="slots[19]" v-bind="slotprops"></slot></template>
|
|
144
|
-
|
|
145
|
-
<template v-if="slots[20]" v-slot:[slots[20]]="slotprops"><slot :name="slots[20]" v-bind="slotprops"></slot></template>
|
|
146
|
-
<template v-if="slots[21]" v-slot:[slots[21]]="slotprops"><slot :name="slots[21]" v-bind="slotprops"></slot></template>
|
|
147
|
-
<template v-if="slots[22]" v-slot:[slots[22]]="slotprops"><slot :name="slots[22]" v-bind="slotprops"></slot></template>
|
|
148
|
-
<template v-if="slots[23]" v-slot:[slots[23]]="slotprops"><slot :name="slots[23]" v-bind="slotprops"></slot></template>
|
|
149
|
-
<template v-if="slots[24]" v-slot:[slots[24]]="slotprops"><slot :name="slots[24]" v-bind="slotprops"></slot></template>
|
|
150
|
-
<template v-if="slots[25]" v-slot:[slots[25]]="slotprops"><slot :name="slots[25]" v-bind="slotprops"></slot></template>
|
|
151
|
-
<template v-if="slots[26]" v-slot:[slots[26]]="slotprops"><slot :name="slots[26]" v-bind="slotprops"></slot></template>
|
|
152
|
-
<template v-if="slots[27]" v-slot:[slots[27]]="slotprops"><slot :name="slots[27]" v-bind="slotprops"></slot></template>
|
|
153
|
-
<template v-if="slots[28]" v-slot:[slots[28]]="slotprops"><slot :name="slots[28]" v-bind="slotprops"></slot></template>
|
|
154
|
-
<template v-if="slots[29]" v-slot:[slots[29]]="slotprops"><slot :name="slots[29]" v-bind="slotprops"></slot></template>
|
|
155
|
-
</FormLoader>
|
|
156
|
-
</template>
|
|
157
|
-
<div v-else v-html="err(`配置错误:Field: ${node.field} 配置了属性值 [child] 必须是一个数组`)"></div>
|
|
158
|
-
</template>
|
|
159
|
-
<template v-else>
|
|
160
|
-
<FormRender v-model:node="node" v-model:data="data" :interacted="interacted" :data-field="node.field" :mode="mode">
|
|
161
|
-
<template v-slot:[`${node.field}-value`]="slotprops">
|
|
162
|
-
<slot :name="`${node.field}-value`" v-bind="slotprops"></slot>
|
|
163
|
-
</template>
|
|
164
|
-
</FormRender>
|
|
165
|
-
</template>
|
|
166
|
-
</slot>
|
|
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>
|
|
172
|
-
</div>
|
|
173
|
-
<div v-if="$slots.submit" class="w-full" ui-flex="row lm">
|
|
174
|
-
<div class="flex-fixed" :style="labelcss(node)"> </div>
|
|
175
|
-
<div class="flex-block"><slot name="submit"></slot></div>
|
|
176
|
-
</div>
|
|
177
|
-
</div>
|
|
178
|
-
</template>
|
|
179
|
-
|
|
180
|
-
<script>
|
|
181
|
-
import { deepcopy, isArray, isFunction, isObject, isString } from '@fekit/utils';
|
|
182
|
-
|
|
183
|
-
// 根据表单结构生成数据结构
|
|
184
|
-
const _rows = (arr) => {
|
|
185
|
-
const data = {};
|
|
186
|
-
for (const node of arr) {
|
|
187
|
-
if (node.field && node.field !== '*') {
|
|
188
|
-
data[node.field] = node.child ? _rows(node.child) : node.array ? [] : '';
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
return data;
|
|
192
|
-
};
|
|
193
|
-
|
|
194
|
-
export default {
|
|
195
|
-
name: 'FormLoader',
|
|
196
|
-
components: {
|
|
197
|
-
FormRender: () => import('./FormRender.vue'),
|
|
198
|
-
FormLoader: () => import('./FormLoader.vue')
|
|
199
|
-
},
|
|
200
|
-
props: {
|
|
201
|
-
mode: {
|
|
202
|
-
type: String,
|
|
203
|
-
default: 'edit'
|
|
204
|
-
},
|
|
205
|
-
debug: {
|
|
206
|
-
type: Boolean,
|
|
207
|
-
default: false
|
|
208
|
-
},
|
|
209
|
-
form: {
|
|
210
|
-
type: Array,
|
|
211
|
-
default: () => []
|
|
212
|
-
},
|
|
213
|
-
data: {
|
|
214
|
-
type: Object,
|
|
215
|
-
default: () => ({})
|
|
216
|
-
},
|
|
217
|
-
fulldata: {
|
|
218
|
-
type: Object,
|
|
219
|
-
default: () => null
|
|
220
|
-
},
|
|
221
|
-
rows: {
|
|
222
|
-
type: String,
|
|
223
|
-
default: 'mob-24 pad-12 dpc-8'
|
|
224
|
-
},
|
|
225
|
-
interacted: {
|
|
226
|
-
type: Boolean,
|
|
227
|
-
default: false
|
|
228
|
-
},
|
|
229
|
-
array: {
|
|
230
|
-
type: Boolean,
|
|
231
|
-
default: false
|
|
232
|
-
},
|
|
233
|
-
level: {
|
|
234
|
-
type: Number,
|
|
235
|
-
default: 0
|
|
236
|
-
},
|
|
237
|
-
index: {
|
|
238
|
-
type: String | Number,
|
|
239
|
-
default: ''
|
|
240
|
-
},
|
|
241
|
-
vertical: {
|
|
242
|
-
type: Boolean,
|
|
243
|
-
default: false
|
|
244
|
-
},
|
|
245
|
-
slots: {
|
|
246
|
-
type: Array,
|
|
247
|
-
default: () => []
|
|
248
|
-
},
|
|
249
|
-
globalLabelWidth: {
|
|
250
|
-
type: Number,
|
|
251
|
-
default: 0
|
|
252
|
-
}
|
|
253
|
-
},
|
|
254
|
-
data() {
|
|
255
|
-
return {
|
|
256
|
-
node: [],
|
|
257
|
-
lw: 0,
|
|
258
|
-
cache: {}
|
|
259
|
-
};
|
|
260
|
-
},
|
|
261
|
-
computed: {
|
|
262
|
-
$form() {
|
|
263
|
-
const form = this.form;
|
|
264
|
-
const data = this.fulldata || this.data;
|
|
265
|
-
return deepcopy(form)?.map((node = {}) => {
|
|
266
|
-
// 数据
|
|
267
|
-
if (node.field) {
|
|
268
|
-
form._data = data[node.field];
|
|
269
|
-
} else {
|
|
270
|
-
form._data = data;
|
|
271
|
-
}
|
|
272
|
-
// 清除字段
|
|
273
|
-
if (isFunction(node.clear)) {
|
|
274
|
-
node.clear = node.clear(data, node);
|
|
275
|
-
if (node.clear && data[node.field] !== '') {
|
|
276
|
-
this.cache[node.field] = data[node.field];
|
|
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
|
-
}
|
|
283
|
-
}
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
// 水平垂直
|
|
287
|
-
if (isFunction(node.vertical)) {
|
|
288
|
-
node.vertical = node.vertical(data, node);
|
|
289
|
-
}
|
|
290
|
-
if (!node.vertical) {
|
|
291
|
-
node.vertical = this.vertical;
|
|
292
|
-
}
|
|
293
|
-
|
|
294
|
-
// 模型处理
|
|
295
|
-
if (isFunction(node.model)) {
|
|
296
|
-
node.model = node.model(data, node);
|
|
297
|
-
}
|
|
298
|
-
if (node.model) {
|
|
299
|
-
if (isString(node.model)) {
|
|
300
|
-
node.model = [node.model, { verify: false }];
|
|
301
|
-
}
|
|
302
|
-
} else {
|
|
303
|
-
node.model = ['', { verify: false }];
|
|
304
|
-
}
|
|
305
|
-
if (!node.model[1]) {
|
|
306
|
-
node.model[1] = {};
|
|
307
|
-
}
|
|
308
|
-
if (node.model[1]) {
|
|
309
|
-
node.model[1] = {
|
|
310
|
-
verify: false,
|
|
311
|
-
clearable: true,
|
|
312
|
-
...node.model[1]
|
|
313
|
-
};
|
|
314
|
-
}
|
|
315
|
-
|
|
316
|
-
// 枚举处理
|
|
317
|
-
if (isFunction(node.enums)) {
|
|
318
|
-
node.enums = node.enums(data, node);
|
|
319
|
-
}
|
|
320
|
-
|
|
321
|
-
// 规则处理
|
|
322
|
-
if (isFunction(node.rules)) {
|
|
323
|
-
node.rules = node.rules(data, node);
|
|
324
|
-
}
|
|
325
|
-
if (!node.rules) {
|
|
326
|
-
node.rules = [];
|
|
327
|
-
}
|
|
328
|
-
|
|
329
|
-
// 媒体查询
|
|
330
|
-
if (isFunction(node.media)) {
|
|
331
|
-
node.media = node.media(data, node);
|
|
332
|
-
}
|
|
333
|
-
if (!node.media) {
|
|
334
|
-
node.media = this.rows;
|
|
335
|
-
}
|
|
336
|
-
|
|
337
|
-
// 属性处理
|
|
338
|
-
if (isFunction(node.attrs)) {
|
|
339
|
-
node.attrs = node.attrs(data, node);
|
|
340
|
-
}
|
|
341
|
-
if (!node.attrs) {
|
|
342
|
-
node.attrs = {};
|
|
343
|
-
}
|
|
344
|
-
if (node.attrs) {
|
|
345
|
-
node.attrs = {
|
|
346
|
-
'ui-flex': node.vertical ? 'col xt' : 'row xt',
|
|
347
|
-
...node.attrs
|
|
348
|
-
};
|
|
349
|
-
}
|
|
350
|
-
|
|
351
|
-
// 名称处理
|
|
352
|
-
if (isFunction(node.label)) {
|
|
353
|
-
node.label = node.label(data, node);
|
|
354
|
-
}
|
|
355
|
-
if (node.label) {
|
|
356
|
-
if (isString(node.label)) {
|
|
357
|
-
node.label = [node.label, { class: '', style: '' }];
|
|
358
|
-
}
|
|
359
|
-
} else {
|
|
360
|
-
node.label = ['*', { class: '', style: '' }];
|
|
361
|
-
}
|
|
362
|
-
if (!node.label[1]) {
|
|
363
|
-
node.label[1] = { class: '', style: '' };
|
|
364
|
-
}
|
|
365
|
-
node.label[0] = node.label[0] && node.label[0] !== '*' && !((node.array || node.child) && node.vertical) ? node.label[0] + ':' : node.label[0] || '';
|
|
366
|
-
this.clw(node.label[0]);
|
|
367
|
-
// 默认样式处理
|
|
368
|
-
if (node.label[1]) {
|
|
369
|
-
node.label[1].style = `${node.vertical && node?.rules?.some((v) => v.required) ? 'text-indent: -1em;' : ''} ${node.label[1] || ''}`;
|
|
370
|
-
}
|
|
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);
|
|
414
|
-
return node;
|
|
415
|
-
});
|
|
416
|
-
}
|
|
417
|
-
},
|
|
418
|
-
methods: {
|
|
419
|
-
// 错误提示
|
|
420
|
-
err(text) {
|
|
421
|
-
return `<p class="co-risk" ui-flex="row lm"><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 1.2em; height: 1.2em;"><path d="M906.666667 759.466667L578.133333 187.733333C565.333333 164.266667 539.733333 149.333333 512 149.333333s-53.333333 14.933333-66.133333 38.4L117.333333 759.466667c-12.8 23.466667-12.8 53.333333 0 76.8 14.933333 23.466667 38.4 38.4 66.133334 38.4h657.066666c27.733333 0 53.333333-14.933333 66.133334-38.4 14.933333-23.466667 14.933333-53.333333 0-76.8z m-426.666667-366.933334c0-19.2 14.933333-32 32-32s32 14.933333 32 32v189.866667c0 19.2-14.933333 32-32 32s-32-14.933333-32-32v-189.866667zM512 744.533333c-23.466667 0-44.8-19.2-44.8-44.8 0-23.466667 19.2-44.8 44.8-44.8s44.8 19.2 44.8 44.8c0 25.6-19.2 44.8-44.8 44.8z"></path></svg>${text}</p>`;
|
|
422
|
-
},
|
|
423
|
-
clw(label = '') {
|
|
424
|
-
let _lw = 0;
|
|
425
|
-
if (isString(label)) {
|
|
426
|
-
for (let i = 0; i < label.length; i++) {
|
|
427
|
-
const char = label[i];
|
|
428
|
-
if (/^[\u4e00-\u9fa5]+$/.test(char)) {
|
|
429
|
-
_lw += 1;
|
|
430
|
-
} else {
|
|
431
|
-
_lw += 0.5;
|
|
432
|
-
}
|
|
433
|
-
}
|
|
434
|
-
}
|
|
435
|
-
_lw += 2;
|
|
436
|
-
if (_lw > this.lw) {
|
|
437
|
-
this.lw = _lw;
|
|
438
|
-
}
|
|
439
|
-
},
|
|
440
|
-
// label样式
|
|
441
|
-
labelcss(node) {
|
|
442
|
-
if (node.vertical) {
|
|
443
|
-
// 竖向
|
|
444
|
-
return ``;
|
|
445
|
-
} else if (node.transverse) {
|
|
446
|
-
// 横向不固定宽度
|
|
447
|
-
return ``;
|
|
448
|
-
} else {
|
|
449
|
-
// 横向
|
|
450
|
-
return `width:${this.globalLabelWidth || this.lw}em; max-width:50%;`;
|
|
451
|
-
}
|
|
452
|
-
},
|
|
453
|
-
// 数据预处理
|
|
454
|
-
predata() {
|
|
455
|
-
const fields = [];
|
|
456
|
-
// 补全数据字段
|
|
457
|
-
this.$form.forEach((item) => {
|
|
458
|
-
if (!fields.includes(item.field) && item.field) {
|
|
459
|
-
fields.push(item.field);
|
|
460
|
-
} else {
|
|
461
|
-
if (item.field) {
|
|
462
|
-
console.error(`表单字段重复:${item.field}`);
|
|
463
|
-
}
|
|
464
|
-
}
|
|
465
|
-
if (!this.data.hasOwnProperty(item.field) && item.field && item.field !== '*') {
|
|
466
|
-
if (item.array) {
|
|
467
|
-
this.$set(this.data, item.field, []);
|
|
468
|
-
} else if (item.child) {
|
|
469
|
-
this.$set(this.data, item.field, {});
|
|
470
|
-
} else if ((item.model[0] === 'Checkbox' && item.enums) || item.model[1]?.multiple) {
|
|
471
|
-
this.$set(this.data, item.field, []);
|
|
472
|
-
} else {
|
|
473
|
-
this.$set(this.data, item.field, '');
|
|
474
|
-
}
|
|
475
|
-
}
|
|
476
|
-
});
|
|
477
|
-
},
|
|
478
|
-
// 添加数组项
|
|
479
|
-
fAdd(node, data) {
|
|
480
|
-
const rows = _rows(node.array);
|
|
481
|
-
data?.push(rows);
|
|
482
|
-
},
|
|
483
|
-
// 删除数组项
|
|
484
|
-
fDel(data, idx) {
|
|
485
|
-
data?.splice(idx, 1);
|
|
486
|
-
},
|
|
487
|
-
isArray
|
|
488
|
-
},
|
|
489
|
-
watch: {
|
|
490
|
-
$form: {
|
|
491
|
-
handler() {
|
|
492
|
-
this.predata();
|
|
493
|
-
},
|
|
494
|
-
deep: true,
|
|
495
|
-
immediate: true
|
|
496
|
-
}
|
|
497
|
-
}
|
|
498
|
-
};
|
|
499
|
-
</script>
|
|
500
|
-
<style>
|
|
501
|
-
.form-loader {
|
|
502
|
-
position: relative;
|
|
503
|
-
width: 100%;
|
|
504
|
-
font-size: 12px;
|
|
505
|
-
}
|
|
506
|
-
</style>
|