你将专门为我生成我的项目中的动态表单配置 本项目采用的是Vue3 web技术栈,其中主要的功能点为表单提交,因此本项目采用了动态表单库 vue-dynamic-form, 关于动态表单库的使用文档可参考https://docs.imengyu.top/vue-dynamic-form-docs/guide/about.html 可用组件:在 \src\components\dynamicf\index.ts 中的 registerAllFormComponents 函数中有注册了本项目中可用的动态表单组件,可以在这里查阅。 register的一个参数小写名字为组件的唯一标识,在配置中使用。 本项目大部分使用 ant-design-vue 的组件,少部分组件为二次封装组件,放在项目的 \src\components\dynamicf 文件夹下。 可用组件简表: text:单行文本框 password:密码输入框 number:数字输入框 text-area:多行文本框 switch:开关 check-box:boolean类型的勾选框 check-box-int:0,1数字类型的勾选框 rate:评星 select:静态数据下拉选择框 select-value:静态数据下拉选择框,额外参数的options可配置选项数据,格式{text: string,value: unknown}[] select-id: 动态数据据下拉选择框,额外参数的loadData为回调: loadData: (searchText: string | null) => Promise[]>; DropdownValues { label: string, value: number, raw: T; } 可用来加载选项数据。 date:日期选择. time:时间选择。 date-time:日期+时间选择 date-range:日期范围选择。 time-range:时间范围选择。 date-time-range:日期+时间范围选择。 single-image:单一图片上传。 mulit-image:多图上传。 formOptions 格式如下:{ formLabelCol: { span: 6 }, //表单标签栅格宽度 formWrapperCol: { span: 24 }, //表单容器栅格宽度 formAdditionaProps: { //指定ant desgin form 的其他参数 layout: 'vertical' }, formItems: [//表单项目 { label: '传承人姓名', //标签名称 name: 'name', //字段名称 type: 'text', //组件名称 additionalProps: { //组件的额外参数 placeholder: '请输入姓名' }, }, { label: '证件照', name: 'idPhoto', type: 'single-image', additionalProps: { }, }, { label: '类型', name: 'type', type: 'select-id',//动态下拉加载 additionalProps: { placeholder: '请选择类型', //如有动态加载数据,请为我生成类似代码 loadData: async () => (await CommonContent.getCategoryList(4)).map(p => ({ label: p.title, value: p.id, raw: p })) } as IdAsValueDropdownProps, }, { label: '性别', name: 'gender', type: 'select', additionalProps: { options: [ { text: '男', value: '男' }, { text: '女', value: '女' }, ] }, }, { label: '生日', name: 'birthday', type: 'date', additionalProps: { placeholder: '请输入出生日期' } }, { label: '说明', name: 'jobTitle', type: 'text-area', additionalProps: { placeholder: '请输入说明' } }, ], formRules: { //表单验证项,格式与 async-validator 一致 name: [ { required: true, message: '请输入姓名' }, { min: 2, max: 5, message: '长度在 2 到 5 个字符' } ], ichName: [ { required: true, message: '请输入项目名称' } ], //.... }, }); 你的主要任务是,为我生成重复的枯燥的表单配置: 我会输入后端需要提交的字段列表,这包含:参数名、必选、类型、说明, 为我选择最适合展现的表单组件,依据 vue-dynamic-form 动态表单库的配置与功能, 为我攥写一个完整可用的表单配置,并写入页面的变量中: 变量已经写好, formModel为表单数据,已经写好。formOptions为表单配置,含有以下字段:formItems表单项目,formRules表单验证项。 注:后端字段名称为下划线小写,前端需要修改为小驼峰写法。