leisure-core 0.5.24 → 0.5.25
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/le-list-form/src/main.vue +63 -27
- package/package.json +1 -1
|
@@ -1,19 +1,42 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<el-form
|
|
2
|
+
<el-form
|
|
3
|
+
:model="formPop"
|
|
4
|
+
:rules="rules"
|
|
5
|
+
ref="ruleForm"
|
|
6
|
+
:label-width="labelWidth"
|
|
7
|
+
class="le-form-container"
|
|
8
|
+
>
|
|
3
9
|
<div class="form-grid" :style="gridStyle">
|
|
4
|
-
<el-form-item
|
|
5
|
-
|
|
10
|
+
<el-form-item
|
|
11
|
+
v-for="(item, index) in formColumns"
|
|
12
|
+
:key="index"
|
|
13
|
+
:label="item.label"
|
|
14
|
+
:prop="item.prop"
|
|
15
|
+
class="leisure-form-item-class"
|
|
16
|
+
>
|
|
6
17
|
<div class="comContainerClass">
|
|
7
|
-
<component
|
|
8
|
-
|
|
18
|
+
<component
|
|
19
|
+
:is="componentType(item.type)"
|
|
20
|
+
v-model="formPop[item.prop]"
|
|
21
|
+
v-bind="mergeProps(getComponentProps(item), item.attr || {})"
|
|
22
|
+
v-on="item.event"
|
|
23
|
+
class="compontClass"
|
|
24
|
+
>
|
|
9
25
|
<template v-if="item.type === 'radio'">
|
|
10
|
-
<el-radio
|
|
11
|
-
option.
|
|
12
|
-
|
|
26
|
+
<el-radio
|
|
27
|
+
v-for="(option, index) in item.options"
|
|
28
|
+
:label="option.id"
|
|
29
|
+
:key="index + '_radio'"
|
|
30
|
+
>{{ option.lable }}</el-radio
|
|
31
|
+
>
|
|
13
32
|
</template>
|
|
14
33
|
<template v-else-if="item.type === 'select'">
|
|
15
|
-
<le-select-option
|
|
16
|
-
:
|
|
34
|
+
<le-select-option
|
|
35
|
+
:options="fieldOptions[item.prop]"
|
|
36
|
+
:label="item.kv.label"
|
|
37
|
+
:value="item.kv.key"
|
|
38
|
+
:keyNum="item.keyNum"
|
|
39
|
+
/>
|
|
17
40
|
</template>
|
|
18
41
|
</component>
|
|
19
42
|
<slot :name="item.prop"></slot>
|
|
@@ -23,7 +46,12 @@
|
|
|
23
46
|
<slot></slot>
|
|
24
47
|
<el-form-item v-rfooter class="form-footer">
|
|
25
48
|
<slot name="footerBtn"></slot>
|
|
26
|
-
<le-button
|
|
49
|
+
<le-button
|
|
50
|
+
type="primary"
|
|
51
|
+
@click="saveData"
|
|
52
|
+
v-if="handleStatus == 1 || handleStatus == 2"
|
|
53
|
+
>保存</le-button
|
|
54
|
+
>
|
|
27
55
|
<le-button type="info" @click="close()">关闭</le-button>
|
|
28
56
|
</el-form-item>
|
|
29
57
|
</el-form>
|
|
@@ -39,11 +67,11 @@ export default {
|
|
|
39
67
|
},
|
|
40
68
|
formData: {
|
|
41
69
|
type: Object,
|
|
42
|
-
default: () => {
|
|
70
|
+
default: () => {},
|
|
43
71
|
},
|
|
44
72
|
rules: {
|
|
45
73
|
type: Object,
|
|
46
|
-
default: () => {
|
|
74
|
+
default: () => {},
|
|
47
75
|
},
|
|
48
76
|
labelWidth: {
|
|
49
77
|
type: String,
|
|
@@ -52,7 +80,7 @@ export default {
|
|
|
52
80
|
|
|
53
81
|
fieldOptions: {
|
|
54
82
|
type: Object,
|
|
55
|
-
default: () => {
|
|
83
|
+
default: () => {},
|
|
56
84
|
},
|
|
57
85
|
handleStatus: {
|
|
58
86
|
type: Number,
|
|
@@ -61,18 +89,18 @@ export default {
|
|
|
61
89
|
columnsPerRow: {
|
|
62
90
|
type: Number,
|
|
63
91
|
default: 1,
|
|
64
|
-
validator: (value) => value > 0 && value <= 4 // 限制最大4列，避免太拥挤
|
|
92
|
+
validator: (value) => value > 0 && value <= 4, // 限制最大4列，避免太拥挤
|
|
65
93
|
},
|
|
66
94
|
// 新增属性：列间距
|
|
67
95
|
columnGap: {
|
|
68
96
|
type: String,
|
|
69
|
-
default: "20px"
|
|
97
|
+
default: "20px",
|
|
70
98
|
},
|
|
71
99
|
// 新增属性：行间距
|
|
72
100
|
rowGap: {
|
|
73
101
|
type: String,
|
|
74
|
-
default: "16px"
|
|
75
|
-
}
|
|
102
|
+
default: "16px",
|
|
103
|
+
},
|
|
76
104
|
},
|
|
77
105
|
watch: {
|
|
78
106
|
formData: {
|
|
@@ -119,6 +147,13 @@ export default {
|
|
|
119
147
|
},
|
|
120
148
|
select: { component: "le-select", props: {} },
|
|
121
149
|
image: { component: "le-image-container", props: {} },
|
|
150
|
+
area: {
|
|
151
|
+
component: "le-area",
|
|
152
|
+
props: {
|
|
153
|
+
initArea: "initArea",
|
|
154
|
+
level: "level",
|
|
155
|
+
},
|
|
156
|
+
},
|
|
122
157
|
},
|
|
123
158
|
formPop: {},
|
|
124
159
|
options: {}, //{field1:[{value:1,label:'选项1'},{value:2,label:'选项2'}]}
|
|
@@ -127,13 +162,13 @@ export default {
|
|
|
127
162
|
computed: {
|
|
128
163
|
gridStyle() {
|
|
129
164
|
return {
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
165
|
+
"grid-template-columns": `repeat(${this.columnsPerRow}, 1fr)`,
|
|
166
|
+
"column-gap": this.columnGap,
|
|
167
|
+
"row-gap": this.rowGap,
|
|
133
168
|
};
|
|
134
|
-
}
|
|
169
|
+
},
|
|
135
170
|
},
|
|
136
|
-
mounted() {
|
|
171
|
+
mounted() {},
|
|
137
172
|
methods: {
|
|
138
173
|
componentType(type) {
|
|
139
174
|
let result = this.componentMap[type]?.component || "le-input";
|
|
@@ -145,7 +180,7 @@ export default {
|
|
|
145
180
|
if (type === "image") {
|
|
146
181
|
let images = [];
|
|
147
182
|
images.push(this.formPop[item.prop]);
|
|
148
|
-
props = { ...props,
|
|
183
|
+
props = { ...props, images: images };
|
|
149
184
|
return props;
|
|
150
185
|
}
|
|
151
186
|
return this.componentMap[item.type]?.props || {};
|
|
@@ -160,7 +195,7 @@ export default {
|
|
|
160
195
|
saveData() {
|
|
161
196
|
this.$refs["ruleForm"].validate((valid) => {
|
|
162
197
|
if (valid) {
|
|
163
|
-
this.$emit("saveData", this.formPop, () => {
|
|
198
|
+
this.$emit("saveData", this.formPop, () => {});
|
|
164
199
|
} else {
|
|
165
200
|
return false;
|
|
166
201
|
}
|
|
@@ -187,7 +222,8 @@ le-form-container {
|
|
|
187
222
|
margin-bottom: 0; // 使用grid的gap控制间距，不需要margin-bottom
|
|
188
223
|
}
|
|
189
224
|
|
|
190
|
-
.leisure-form-item-class {
|
|
225
|
+
.leisure-form-item-class {
|
|
226
|
+
}
|
|
191
227
|
|
|
192
228
|
.comContainerClass {
|
|
193
229
|
display: flex;
|
|
@@ -195,7 +231,7 @@ le-form-container {
|
|
|
195
231
|
line-height: inherit;
|
|
196
232
|
|
|
197
233
|
.compontClass {
|
|
198
|
-
flex: 1
|
|
234
|
+
flex: 1;
|
|
199
235
|
}
|
|
200
236
|
}
|
|
201
237
|
|