77 lines
1.5 KiB
Vue
77 lines
1.5 KiB
Vue
|
<template>
|
||
|
|
<a-form ref="formRef" :model="formData" :rules="formRules" layout="horizontal">
|
||
|
|
<a-row :gutter="16">
|
||
|
|
<a-col v-for="field in fields" :key="field.name" :span="12" v-show="!field.advanced || advanced">
|
||
|
|
<a-form-item :label="field.label" :name="field.name">
|
||
|
|
<component
|
||
|
|
:is="getComponent(field.type)"
|
||
|
|
v-model:value="formData[field.name]"
|
||
|
|
v-bind="field.options"
|
||
|
|
:placeholder="field.placeholder"
|
||
|
|
:allow-clear="field.allowClear"
|
||
|
|
/>
|
||
|
|
</a-form-item>
|
||
|
|
</a-col>
|
||
|
|
</a-row>
|
||
|
|
</a-form>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
// 接收父组件传递的表单字段配置
|
||
|
|
const props = defineProps({
|
||
|
|
fields: {
|
||
|
|
type: Array,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
formData: {
|
||
|
|
type: Object,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
formRules: {
|
||
|
|
type: Object,
|
||
|
|
default: () => ({})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const emit = defineEmits(['submit', 'reset'])
|
||
|
|
|
||
|
|
// 表单引用
|
||
|
|
const formRef = ref(null)
|
||
|
|
|
||
|
|
// 高级选项开关
|
||
|
|
const advanced = ref(false)
|
||
|
|
|
||
|
|
// 切换高级选项
|
||
|
|
const toggleAdvanced = () => {
|
||
|
|
advanced.value = !advanced.value
|
||
|
|
}
|
||
|
|
|
||
|
|
// 提交表单
|
||
|
|
const onSubmit = () => {
|
||
|
|
formRef.value.validate((valid) => {
|
||
|
|
if (valid) {
|
||
|
|
emit('submit', formData)
|
||
|
|
} else {
|
||
|
|
console.log('表单验证失败')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
// 重置表单
|
||
|
|
const onReset = () => {
|
||
|
|
formRef.value.resetFields()
|
||
|
|
emit('reset')
|
||
|
|
}
|
||
|
|
|
||
|
|
// 获取组件类型
|
||
|
|
const getComponent = (type) => {
|
||
|
|
const componentMap = {
|
||
|
|
input: 'a-input',
|
||
|
|
select: 'a-select',
|
||
|
|
radio: 'a-radio-group',
|
||
|
|
switch: 'a-switch'
|
||
|
|
}
|
||
|
|
return componentMap[type] || 'a-input'
|
||
|
|
}
|
||
|
|
</script>
|