Skip to content

Commit a7b8514

Browse files
shaohuzhang1shaohuzhang1
committed
fix: 修复表单构造器相关bug
1 parent ba37e62 commit a7b8514

File tree

10 files changed

+217
-84
lines changed

10 files changed

+217
-84
lines changed

‎ui/src/components/dynamics-form/constructor/data.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
const input_type_list = [
2+
{
3+
label: '文本框',
4+
value: 'TextInput'
5+
},
6+
{
7+
label: '滑块',
8+
value: 'Slider'
9+
},
10+
{
11+
label: '开关',
12+
value: 'SwitchInput'
13+
},
14+
{
15+
label: '单选框',
16+
value: 'SingleSelect'
17+
},
18+
{
19+
label: '日期',
20+
value: 'DatePicker'
21+
},
22+
{
23+
label: 'JSON文本框',
24+
value: 'JsonInput'
25+
}
26+
]
27+
export { input_type_list }

‎ui/src/components/dynamics-form/constructor/index.vue‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -41,20 +41,15 @@
4141
import { onMounted, ref, nextTick } from 'vue'
4242
import type { FormInstance } from 'element-plus'
4343
import _ from 'lodash'
44+
import { input_type_list as input_type_list_data } from '@/components/dynamics-form/constructor/data'
4445
const props = withDefaults(
4546
defineProps<{
4647
modelValue?: any
4748
input_type_list?: Array<{ label: string; value: string }>
4849
}>(),
4950
{
50-
input_type_list: () => [
51-
{ label: '文本框', value: 'TextInputConstructor' },
52-
{ label: '滑块', value: 'SliderConstructor' },
53-
{ label: '开关', value: 'SwitchInputConstructor' },
54-
{ label: '单选框', value: 'SingleSelectConstructor' },
55-
{ label: '日期', value: 'DatePickerConstructor' },
56-
{ label: 'JSON文本框', value: 'JsonInputConstructor' }
57-
]
51+
input_type_list: () =>
52+
input_type_list_data.map((item) => ({ label: item.label, value: item.value + 'Constructor' }))
5853
}
5954
)
6055
const emit = defineEmits(['update:modelValue'])

‎ui/src/components/dynamics-form/constructor/items/DatePickerConstructor.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
</el-form-item>
4242
</template>
4343
<script setup lang="ts">
44-
import { computed, onMounted } from 'vue'
44+
import { computed, onBeforeMount } from 'vue'
4545
const type_list = [
4646
{
4747
label: '年',
@@ -97,10 +97,10 @@ const getData = () => {
9797
const rander = (form_data: any) => {
9898
formValue.value.type = form_data.attrs.type
9999
formValue.value.format = form_data.attrs?.format
100-
formValue.value.default_value = form_data.default_value
100+
formValue.value.default_value = form_data.default_value || ''
101101
}
102102
defineExpose({ getData, rander })
103-
onMounted(() => {
103+
onBeforeMount(() => {
104104
formValue.value.type = 'datetime'
105105
formValue.value.format = 'YYYY-MM-DD HH:mm:ss'
106106
formValue.value.default_value = ''

‎ui/src/components/dynamics-form/constructor/items/JsonInputConstructor.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ const formValue = computed({
2626
})
2727
const jsonInputRef = ref<InstanceType<typeof JsonInput>>()
2828
const getData = () => {
29-
console.log('xx')
3029
return {
3130
input_type: 'JsonInput',
3231
attrs: {},

‎ui/src/components/dynamics-form/constructor/items/SingleSelectConstructor.vue‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,10 @@ const addOption = () => {
6262
}
6363
6464
const delOption = (index: number) => {
65+
const option = formValue.value.option_list[index]
66+
if (option.value && formValue.value.default_value == option.value) {
67+
formValue.value.default_value = ''
68+
}
6569
formValue.value.option_list.splice(index, 1)
6670
}
6771
@@ -70,13 +74,13 @@ const getData = () => {
7074
input_type: 'SingleSelect',
7175
attrs: {},
7276
default_value: formValue.value.default_value,
73-
text_field: formValue.value.text_field,
74-
value_field: formValue.value.value_field,
77+
text_field: 'value',
78+
value_field: 'value',
7579
option_list: formValue.value.option_list
7680
}
7781
}
7882
const rander = (form_data: any) => {
79-
formValue.value.option_list = form_data.option_list
83+
formValue.value.option_list = form_data.option_list || []
8084
formValue.value.default_value = form_data.default_value
8185
}
8286

‎ui/src/components/dynamics-form/constructor/items/SliderConstructor.vue‎

Lines changed: 46 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,45 @@
11
<template>
2-
<el-form-item label="取值范围" required>
2+
<el-form-item label="是否带输入框" required prop="showInput">
3+
<el-switch v-model="formValue.showInput" />
4+
</el-form-item>
5+
<el-form-item label="取值范围" required prop="min">
36
<el-col :span="11" style="padding-left: 0">
4-
<el-input-number style="width: 100%" v-model="formValue.min" controls-position="right" />
7+
<el-form-item
8+
:rules="[
9+
{
10+
required: true,
11+
message: '最小值必填',
12+
trigger: 'change'
13+
}
14+
]"
15+
prop="min"
16+
>
17+
<el-input-number style="width: 100%" v-model="formValue.min" controls-position="right"
18+
/></el-form-item>
519
</el-col>
620
<el-col :span="2" class="text-center">
721
<span class="text-gray-500">-</span>
822
</el-col>
923
<el-col :span="11">
10-
<el-input-number style="width: 100%" v-model="formValue.max" controls-position="right" />
24+
<el-form-item
25+
:rules="[
26+
{
27+
required: true,
28+
message: '最大值必填',
29+
trigger: 'change'
30+
}
31+
]"
32+
prop="max"
33+
><el-input-number
34+
prop="max"
35+
style="width: 100%"
36+
v-model="formValue.max"
37+
:min="formValue.min > formValue.max ? formValue.min : undefined"
38+
controls-position="right"
39+
/></el-form-item>
1140
</el-col>
1241
</el-form-item>
13-
<el-form-item label="步长值" required>
42+
<el-form-item label="步长值" required prop="step">
1443
<el-input-number v-model="formValue.step" :min="0" controls-position="right" />
1544
</el-form-item>
1645

@@ -22,7 +51,7 @@
2251
>
2352
<el-slider
2453
v-model="formValue.default_value"
25-
show-input
54+
:show-input="formValue.showInput"
2655
:show-input-controls="false"
2756
:max="formValue.max"
2857
:min="formValue.min"
@@ -32,7 +61,7 @@
3261
</el-form-item>
3362
</template>
3463
<script setup lang="ts">
35-
import { computed, onBeforeMount } from 'vue'
64+
import { computed, onBeforeMount, watch } from 'vue'
3665
3766
const props = defineProps<{
3867
modelValue: any
@@ -56,18 +85,26 @@ const getData = () => {
5685
step: formValue.value.step,
5786
precision: formValue.value.precision,
5887
'show-input-controls': false,
59-
'show-input': true
88+
'show-input': formValue.value.showInput
6089
},
6190
default_value: formValue.value.default_value
6291
}
6392
}
64-
93+
watch(
94+
() => formValue.value.min,
95+
() => {
96+
if (formValue.value.min > formValue.value.max) {
97+
formValue.value.max = formValue.value.min
98+
}
99+
}
100+
)
65101
const rander = (form_data: any) => {
66102
const attrs = form_data.attrs
67103
formValue.value.option_list = form_data.option_list
68104
formValue.value.min = attrs.min
69105
formValue.value.max = attrs.max
70106
formValue.value.step = attrs.step
107+
formValue.value.showInput = attrs['show-input']
71108
formValue.value.default_value = form_data.default_value
72109
}
73110
@@ -77,6 +114,7 @@ onBeforeMount(() => {
77114
formValue.value.max = 20
78115
formValue.value.step = 0.1
79116
formValue.value.default_value = 1
117+
formValue.value.showInput = true
80118
})
81119
</script>
82120
<style lang="scss"></style>

‎ui/src/components/dynamics-form/constructor/items/SwitchInputConstructor.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const getData = () => {
3333
}
3434
3535
const rander = (form_data: any) => {
36-
formValue.value.default_value = form_data.default_value
36+
formValue.value.default_value = form_data.default_value || false
3737
}
3838
defineExpose({ getData, rander })
3939
onMounted(() => {

‎ui/src/components/dynamics-form/constructor/items/TextInputConstructor.vue‎

Lines changed: 95 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,58 @@
11
<template>
2-
<el-form-item label="取值范围" required>
2+
<el-form-item label="文本长度" required>
33
<el-col :span="11" style="padding-left: 0">
4-
<el-input-number
5-
style="width: 100%"
6-
v-model="formValue.minlength"
7-
controls-position="right"
8-
/>
4+
<el-form-item
5+
:rules="[
6+
{
7+
required: true,
8+
message: '最小长度必填',
9+
trigger: 'change'
10+
}
11+
]"
12+
prop="minlength"
13+
>
14+
<el-input-number
15+
style="width: 100%"
16+
:min="1"
17+
:step="1"
18+
step-strictly
19+
v-model="formValue.minlength"
20+
controls-position="right"
21+
/>
22+
</el-form-item>
923
</el-col>
1024
<el-col :span="2" class="text-center">
1125
<span class="text-gray-500">-</span>
1226
</el-col>
1327
<el-col :span="11">
14-
<el-input-number
15-
style="width: 100%"
16-
v-model="formValue.maxlength"
17-
controls-position="right"
18-
/>
28+
<el-form-item
29+
:rules="[
30+
{
31+
required: true,
32+
message: '最大长度必填',
33+
trigger: 'change'
34+
}
35+
]"
36+
prop="maxlength"
37+
>
38+
<el-input-number
39+
style="width: 100%"
40+
:min="formValue.minlength > formValue.maxlength ? formValue.minlength : 1"
41+
step-strictly
42+
:step="1"
43+
v-model="formValue.maxlength"
44+
controls-position="right"
45+
/></el-form-item>
1946
</el-col>
2047
</el-form-item>
2148

2249
<el-form-item
2350
label="默认值"
2451
:required="formValue.required"
2552
prop="default_value"
26-
:rules="formValue.required ? [{ required: true, message: '默认值 为必填属性' }] : []"
53+
:rules="
54+
formValue.required ? [{ required: true, message: '默认值 为必填属性' }, ...rules] : rules
55+
"
2756
>
2857
<el-input
2958
v-model="formValue.default_value"
@@ -36,7 +65,7 @@
3665
</el-form-item>
3766
</template>
3867
<script setup lang="ts">
39-
import { computed, onMounted } from 'vue'
68+
import { computed, onMounted, watch } from 'vue'
4069
4170
const props = defineProps<{
4271
modelValue: any
@@ -50,7 +79,14 @@ const formValue = computed({
5079
return props.modelValue
5180
}
5281
})
53-
82+
watch(
83+
() => formValue.value.minlength,
84+
() => {
85+
if (formValue.value.minlength > formValue.value.maxlength) {
86+
formValue.value.maxlength = formValue.value.minlength
87+
}
88+
}
89+
)
5490
const getData = () => {
5591
return {
5692
input_type: 'TextInput',
@@ -59,7 +95,27 @@ const getData = () => {
5995
minlength: formValue.value.minlength,
6096
'show-word-limit': true
6197
},
62-
default_value: formValue.value.default_value
98+
default_value: formValue.value.default_value,
99+
props_info: {
100+
rules: formValue.value.required
101+
? [
102+
{ required: true, message: `${formValue.value.label} 为必填属性` },
103+
{
104+
min: formValue.value.minlength,
105+
max: formValue.value.maxlength,
106+
message: `${formValue.value.label}长度在 ${formValue.value.minlength} 到 ${formValue.value.maxlength} 个字符`,
107+
trigger: 'blur'
108+
}
109+
]
110+
: [
111+
{
112+
min: formValue.value.minlength,
113+
max: formValue.value.maxlength,
114+
message: `${formValue.value.label}长度在 ${formValue.value.minlength} 到 ${formValue.value.maxlength} 个字符`,
115+
trigger: 'blur'
116+
}
117+
]
118+
}
63119
}
64120
}
65121
const rander = (form_data: any) => {
@@ -68,6 +124,30 @@ const rander = (form_data: any) => {
68124
formValue.value.maxlength = attrs.maxlength
69125
formValue.value.default_value = form_data.default_value
70126
}
127+
const rangeRules = [
128+
{
129+
required: true,
130+
validator: (rule: any, value: any, callback: any) => {
131+
if (!formValue.value.minlength) {
132+
callback(new Error('文本长度为必填参数'))
133+
}
134+
if (!formValue.value.maxlength) {
135+
callback(new Error('文本长度为必填参数'))
136+
}
137+
return true
138+
},
139+
message: `${formValue.value.label} 为必填属性`
140+
}
141+
]
142+
const rules = computed(() => [
143+
{
144+
min: formValue.value.minlength,
145+
max: formValue.value.maxlength,
146+
message: `长度在 ${formValue.value.minlength} 到 ${formValue.value.maxlength} 个字符`,
147+
trigger: 'blur'
148+
}
149+
])
150+
71151
defineExpose({ getData, rander })
72152
onMounted(() => {
73153
formValue.value.minlength = 0

0 commit comments

Comments
 (0)