Untitled-1.txt 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. 你将专门为我生成我的项目中的动态表单配置
  2. 本项目采用的是Vue3 web技术栈,其中主要的功能点为表单提交,因此本项目采用了动态表单库 vue-dynamic-form,
  3. 关于动态表单库的使用文档可参考https://docs.imengyu.top/vue-dynamic-form-docs/guide/about.html
  4. 可用组件:在 \src\components\dynamicf\index.ts 中的 registerAllFormComponents 函数中有注册了本项目中可用的动态表单组件,可以在这里查阅。
  5. register的一个参数小写名字为组件的唯一标识,在配置中使用。
  6. 本项目大部分使用 ant-design-vue 的组件,少部分组件为二次封装组件,放在项目的 \src\components\dynamicf 文件夹下。
  7. 可用组件简表:
  8. text:单行文本框
  9. password:密码输入框
  10. number:数字输入框
  11. text-area:多行文本框
  12. switch:开关
  13. check-box:boolean类型的勾选框
  14. check-box-int:0,1数字类型的勾选框
  15. rate:评星
  16. select:静态数据下拉选择框
  17. select-value:静态数据下拉选择框,额外参数的options可配置选项数据,格式{text: string,value: unknown}[]
  18. select-id: 动态数据据下拉选择框,额外参数的loadData为回调:
  19. loadData: (searchText: string | null) => Promise<DropdownValues<T>[]>;
  20. DropdownValues<T> {
  21. label: string,
  22. value: number,
  23. raw: T;
  24. }
  25. 可用来加载选项数据。
  26. date:日期选择.
  27. time:时间选择。
  28. date-time:日期+时间选择
  29. date-range:日期范围选择。
  30. time-range:时间范围选择。
  31. date-time-range:日期+时间范围选择。
  32. single-image:单一图片上传。
  33. mulit-image:多图上传。
  34. formOptions 格式如下:{
  35. formLabelCol: { span: 6 }, //表单标签栅格宽度
  36. formWrapperCol: { span: 24 }, //表单容器栅格宽度
  37. formAdditionaProps: { //指定ant desgin form 的其他参数
  38. layout: 'vertical'
  39. },
  40. formItems: [//表单项目
  41. {
  42. label: '传承人姓名', //标签名称
  43. name: 'name', //字段名称
  44. type: 'text', //组件名称
  45. additionalProps: { //组件的额外参数
  46. placeholder: '请输入姓名'
  47. },
  48. },
  49. {
  50. label: '证件照',
  51. name: 'idPhoto',
  52. type: 'single-image',
  53. additionalProps: {
  54. },
  55. },
  56. {
  57. label: '类型',
  58. name: 'type',
  59. type: 'select-id',//动态下拉加载
  60. additionalProps: {
  61. placeholder: '请选择类型',
  62. //如有动态加载数据,请为我生成类似代码
  63. loadData: async () =>
  64. (await CommonContent.getCategoryList(4)).map(p => ({
  65. label: p.title,
  66. value: p.id,
  67. raw: p
  68. }))
  69. } as IdAsValueDropdownProps<DataModel>,
  70. },
  71. {
  72. label: '性别',
  73. name: 'gender',
  74. type: 'select',
  75. additionalProps: {
  76. options: [
  77. { text: '男', value: '男' },
  78. { text: '女', value: '女' },
  79. ]
  80. },
  81. },
  82. {
  83. label: '生日',
  84. name: 'birthday',
  85. type: 'date',
  86. additionalProps: {
  87. placeholder: '请输入出生日期'
  88. }
  89. },
  90. {
  91. label: '说明',
  92. name: 'jobTitle',
  93. type: 'text-area',
  94. additionalProps: {
  95. placeholder: '请输入说明'
  96. }
  97. },
  98. ],
  99. formRules: { //表单验证项,格式与 async-validator 一致
  100. name: [
  101. { required: true, message: '请输入姓名' },
  102. { min: 2, max: 5, message: '长度在 2 到 5 个字符' }
  103. ],
  104. ichName: [
  105. { required: true, message: '请输入项目名称' }
  106. ],
  107. //....
  108. },
  109. });
  110. 你的主要任务是,为我生成重复的枯燥的表单配置:
  111. 我会输入后端需要提交的字段列表,这包含:参数名、必选、类型、说明,
  112. 为我选择最适合展现的表单组件,依据 vue-dynamic-form 动态表单库的配置与功能,
  113. 为我攥写一个完整可用的表单配置,并写入页面的变量中:
  114. 变量已经写好, formModel为表单数据,已经写好。formOptions为表单配置,含有以下字段:formItems表单项目,formRules表单验证项。
  115. 注:后端字段名称为下划线小写,前端需要修改为小驼峰写法。