Skip to content

Commit 2bbb334

Browse files
shaohuzhang1shaohuzhang1
committed
feat: 表单节点添加多选框,选项卡等组件
1 parent 54e0000 commit 2bbb334

File tree

8 files changed

+528
-54
lines changed

8 files changed

+528
-54
lines changed

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,25 @@ const input_type_list = [
1515
label: '单选框',
1616
value: 'SingleSelect'
1717
},
18+
{
19+
label: '多选框',
20+
value: 'MultiSelect'
21+
},
1822
{
1923
label: '日期',
2024
value: 'DatePicker'
2125
},
2226
{
2327
label: 'JSON文本框',
2428
value: 'JsonInput'
29+
},
30+
{
31+
label: '选项卡',
32+
value: 'RadioCard'
33+
},
34+
{
35+
label: '单行选项卡',
36+
value: 'RadioRow'
2537
}
2638
]
2739
export { input_type_list }

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

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<template>
2+
<el-form-item>
3+
<template #label>
4+
<div class="flex-between">
5+
选项值
6+
<el-button link type="primary" @click.stop="addOption()">
7+
<el-icon class="mr-4">
8+
<Plus />
9+
</el-icon>
10+
添加
11+
</el-button>
12+
</div>
13+
</template>
14+
<el-row style="width: 100%" :gutter="10">
15+
<el-col :span="10"
16+
><div class="grid-content ep-bg-purple" />
17+
标签</el-col
18+
>
19+
<el-col :span="12"
20+
><div class="grid-content ep-bg-purple" />
21+
选项值</el-col
22+
>
23+
</el-row>
24+
<el-row
25+
style="width: 100%"
26+
v-for="(option, $index) in formValue.option_list"
27+
:key="$index"
28+
:gutter="10"
29+
>
30+
<el-col :span="10"
31+
><div class="grid-content ep-bg-purple" />
32+
<el-input v-model="formValue.option_list[$index].label" placeholder="请输入选项标签"
33+
/></el-col>
34+
<el-col :span="12"
35+
><div class="grid-content ep-bg-purple" />
36+
<el-input v-model="formValue.option_list[$index].value" placeholder="请输入选项值"
37+
/></el-col>
38+
<el-col :span="1"
39+
><div class="grid-content ep-bg-purple" />
40+
<el-button link class="ml-8" @click.stop="delOption($index)">
41+
<el-icon>
42+
<Delete />
43+
</el-icon> </el-button
44+
></el-col>
45+
</el-row>
46+
</el-form-item>
47+
<el-form-item
48+
label="默认值"
49+
:required="formValue.required"
50+
prop="default_value"
51+
:rules="formValue.required ? [{ required: true, message: '默认值 为必填属性' }] : []"
52+
>
53+
<el-select
54+
class="m-2"
55+
multiple
56+
collapse-tags
57+
filterable
58+
clearable
59+
v-model="formValue.default_value"
60+
:teleported="false"
61+
popper-class="default-select"
62+
>
63+
<el-option
64+
v-for="(option, index) in formValue.option_list"
65+
:key="index"
66+
:label="option.value"
67+
:value="option.value"
68+
/>
69+
</el-select>
70+
</el-form-item>
71+
</template>
72+
<script setup lang="ts">
73+
import { computed, onMounted } from 'vue'
74+
75+
const props = defineProps<{
76+
modelValue: any
77+
}>()
78+
const emit = defineEmits(['update:modelValue'])
79+
const formValue = computed({
80+
set: (item) => {
81+
emit('update:modelValue', item)
82+
},
83+
get: () => {
84+
return props.modelValue
85+
}
86+
})
87+
88+
const addOption = () => {
89+
formValue.value.option_list.push({ value: '', label: '' })
90+
}
91+
92+
const delOption = (index: number) => {
93+
const option = formValue.value.option_list[index]
94+
if (option.value && formValue.value.default_value == option.value) {
95+
formValue.value.default_value = ''
96+
}
97+
formValue.value.option_list.splice(index, 1)
98+
}
99+
100+
const getData = () => {
101+
return {
102+
input_type: 'MultiSelect',
103+
attrs: {},
104+
default_value: formValue.value.default_value,
105+
textField: 'label',
106+
valueField: 'value',
107+
option_list: formValue.value.option_list
108+
}
109+
}
110+
const rander = (form_data: any) => {
111+
formValue.value.option_list = form_data.option_list || []
112+
formValue.value.default_value = form_data.default_value
113+
}
114+
115+
defineExpose({ getData, rander })
116+
onMounted(() => {
117+
formValue.value.option_list = []
118+
formValue.value.default_value = ''
119+
})
120+
</script>
121+
<style lang="scss" scoped>
122+
:deep(.el-form-item__label) {
123+
display: block;
124+
}
125+
126+
:deep(.el-select-dropdown) {
127+
max-width: 400px;
128+
}
129+
</style>

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

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<template>
2+
<el-form-item>
3+
<template #label>
4+
<div class="flex-between">
5+
选项值
6+
<el-button link type="primary" @click.stop="addOption()">
7+
<el-icon class="mr-4">
8+
<Plus />
9+
</el-icon>
10+
添加
11+
</el-button>
12+
</div>
13+
</template>
14+
15+
<el-row style="width: 100%" :gutter="10">
16+
<el-col :span="10"
17+
><div class="grid-content ep-bg-purple" />
18+
标签</el-col
19+
>
20+
<el-col :span="12"
21+
><div class="grid-content ep-bg-purple" />
22+
选项值</el-col
23+
>
24+
</el-row>
25+
<el-row
26+
style="width: 100%"
27+
v-for="(option, $index) in formValue.option_list"
28+
:key="$index"
29+
:gutter="10"
30+
>
31+
<el-col :span="10"
32+
><div class="grid-content ep-bg-purple" />
33+
<el-input v-model="formValue.option_list[$index].label" placeholder="请输入选项标签"
34+
/></el-col>
35+
<el-col :span="12"
36+
><div class="grid-content ep-bg-purple" />
37+
<el-input v-model="formValue.option_list[$index].value" placeholder="请输入选项值"
38+
/></el-col>
39+
<el-col :span="1"
40+
><div class="grid-content ep-bg-purple" />
41+
<el-button link class="ml-8" @click.stop="delOption($index)">
42+
<el-icon>
43+
<Delete />
44+
</el-icon> </el-button
45+
></el-col>
46+
</el-row>
47+
</el-form-item>
48+
<el-form-item
49+
label="默认值"
50+
:required="formValue.required"
51+
prop="default_value"
52+
:rules="formValue.required ? [{ required: true, message: '默认值 为必填属性' }] : []"
53+
>
54+
<RadioCard
55+
:form-field="formField"
56+
v-model="formValue.default_value"
57+
:other-params="{}"
58+
field="default_value"
59+
>
60+
</RadioCard>
61+
</el-form-item>
62+
</template>
63+
<script setup lang="ts">
64+
import { computed, onMounted } from 'vue'
65+
import RadioCard from '@/components/dynamics-form/items/radio/RadioCard.vue'
66+
const props = defineProps<{
67+
modelValue: any
68+
}>()
69+
const emit = defineEmits(['update:modelValue'])
70+
const formValue = computed({
71+
set: (item) => {
72+
emit('update:modelValue', item)
73+
},
74+
get: () => {
75+
return props.modelValue
76+
}
77+
})
78+
79+
const addOption = () => {
80+
formValue.value.option_list.push({ value: '', label: '' })
81+
}
82+
83+
const delOption = (index: number) => {
84+
const option = formValue.value.option_list[index]
85+
if (option.value && formValue.value.default_value == option.value) {
86+
formValue.value.default_value = ''
87+
}
88+
formValue.value.option_list.splice(index, 1)
89+
}
90+
const formField = computed(() => {
91+
return getData()
92+
})
93+
const getData = () => {
94+
return {
95+
input_type: 'RadioCard',
96+
attrs: {},
97+
default_value: formValue.value.default_value,
98+
text_field: 'label',
99+
value_field: 'value',
100+
option_list: formValue.value.option_list
101+
}
102+
}
103+
const rander = (form_data: any) => {
104+
formValue.value.option_list = form_data.option_list || []
105+
formValue.value.default_value = form_data.default_value
106+
}
107+
108+
defineExpose({ getData, rander })
109+
onMounted(() => {
110+
formValue.value.option_list = []
111+
formValue.value.default_value = ''
112+
})
113+
</script>
114+
<style lang="scss" scoped>
115+
:deep(.el-form-item__label) {
116+
display: block;
117+
}
118+
119+
:deep(.el-select-dropdown) {
120+
max-width: 400px;
121+
}
122+
</style>

0 commit comments

Comments
 (0)