新增基础表单、高级表单模板

src/components/form/AdvancedForm.vue

@@ -13,10 +13,12 @@ const formData = computed(() => {
   } else {
     const res = props.formData
     props.formConfig?.formItems.forEach(item => {
+      res.label = item.label
       item.group.forEach(element => {
         res[element.name] = element.value
       })
     })
+    console.log(res)
     return res
   }
 })
@@ -30,7 +32,13 @@ const formData = computed(() => {
 </script>
 
 <template>
-  <el-card v-for="(item, index) in formConfig.formItems" :key="index" :title="item.label">
+  <el-card
+    v-for="(item, index) in formConfig.formItems"
+    :key="index"
+    :header="item.label"
+    class="mb-16px"
+    shadow="never"
+  >
     <el-row :gutter="20">
       <el-col :span="sub.span || formConfig.span || 12" v-for="(sub, key) in item.group" :key="key">
         <el-form-item :label="sub.label" :rules="sub.rules" :prop="sub.name">

src/router/asyncRouter.ts

@@ -148,6 +148,32 @@ const asyncRouter: RouteRecordRaw[] = [
       }
     ]
   },
+  {
+    path: '/form',
+    name: 'form',
+    meta: {
+      title: '表单页',
+      icon: 'CircleCheck'
+    },
+    children: [
+      {
+        path: 'basic',
+        name: 'formBasic',
+        component: () => import('@/views/form/Basic.vue'),
+        meta: {
+          title: '基础表单'
+        }
+      },
+      {
+        path: 'advanced',
+        name: 'formAdvanced',
+        component: () => import('@/views/form/Advanced.vue'),
+        meta: {
+          title: '高级表单'
+        }
+      }
+    ]
+  },
   {
     path: '/result',
     name: 'result',

src/views/form/Advanced.vue

@@ -0,0 +1,198 @@
+<script lang="ts" setup>
+import type { AdvancedForm } from '@/types/form'
+
+const formConfig = reactive<AdvancedForm>({
+  span: 8,
+  formItems: [
+    {
+      label: '仓库管理',
+      group: [
+        {
+          label: '用户名',
+          value: '',
+          name: 'name',
+          type: 'input',
+          rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
+        },
+        {
+          label: '密码',
+          value: '',
+          name: 'password',
+          type: 'input',
+          rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+        },
+        {
+          label: '字段名',
+          value: '',
+          name: 'name',
+          type: 'input'
+        }
+      ]
+    },
+    {
+      label: '任务管理',
+      group: [
+        {
+          label: '用户名',
+          value: '',
+          name: 'name',
+          type: 'input',
+          rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
+        },
+        {
+          label: '密码',
+          value: '',
+          name: 'password',
+          type: 'input',
+          rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+        },
+        {
+          label: '字段名',
+          value: '',
+          name: 'name',
+          type: 'input'
+        }
+      ]
+    },
+    {
+      label: '仓库管理',
+      group: [
+        {
+          label: '用户名',
+          value: '',
+          name: 'name',
+          type: 'input',
+          rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
+        },
+        {
+          label: '密码',
+          value: '',
+          name: 'password',
+          type: 'input',
+          rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+        },
+        {
+          label: '字段名',
+          value: '',
+          name: 'name',
+          type: 'input'
+        }
+      ]
+    },
+    {
+      label: '任务管理',
+      group: [
+        {
+          label: '用户名',
+          value: '',
+          name: 'name',
+          type: 'input',
+          rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
+        },
+        {
+          label: '密码',
+          value: '',
+          name: 'password',
+          type: 'input',
+          rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+        },
+        {
+          label: '字段名',
+          value: '',
+          name: 'name',
+          type: 'input'
+        }
+      ]
+    },
+    {
+      label: '仓库管理',
+      group: [
+        {
+          label: '用户名',
+          value: '',
+          name: 'name',
+          type: 'input',
+          rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
+        },
+        {
+          label: '密码',
+          value: '',
+          name: 'password',
+          type: 'input',
+          rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+        },
+        {
+          label: '字段名',
+          value: '',
+          name: 'name',
+          type: 'input'
+        }
+      ]
+    },
+    {
+      label: '任务管理',
+      group: [
+        {
+          label: '用户名',
+          value: '',
+          name: 'name',
+          type: 'input',
+          rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
+        },
+        {
+          label: '密码',
+          value: '',
+          name: 'password',
+          type: 'input',
+          rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+        },
+        {
+          label: '字段名',
+          value: '',
+          name: 'name',
+          type: 'input'
+        }
+      ]
+    }
+  ]
+})
+
+const formData = reactive({})
+
+const create = () => {
+  console.log('保存的方法')
+}
+const update = () => {
+  console.log('保存的方法')
+}
+
+const proFormRef = ref<any>()
+const handleSave = () => {
+  proFormRef.value.submit()
+}
+</script>
+
+<template>
+  <div class="overflow-auto pb-42px" style="height: calc(100vh - 101px - var(--main-padding) * 2)">
+    <pro-form
+      advanced
+      :formConfig="formConfig"
+      :formData="formData"
+      :create="create"
+      :update="update"
+      ref="proFormRef"
+    ></pro-form>
+    <div
+      class="fixed bottom-0 right-0 text-right bg-white px-16px py-5px form-footer"
+      style="width: calc(100vw - var(--menu-width))"
+    >
+      <el-button type="primary" @click="handleSave">保存</el-button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.form-footer {
+  box-shadow: rgb(0 0 0 / 8%) 0px -6px 16px -8px;
+}
+</style>

src/views/form/Basic.vue

@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import type { BasicForm } from '@/types/form'
+
+const formConfig = reactive<BasicForm>({
+  span: 12,
+  formItems: [
+    {
+      label: '用户名',
+      value: '',
+      name: 'name',
+      type: 'input',
+      rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
+    },
+    {
+      label: '登录名',
+      value: '',
+      name: 'loginName',
+      type: 'input',
+      rules: [{ required: true, message: '请输入登录名', trigger: 'blur' }]
+    },
+    {
+      label: '密码',
+      value: '',
+      name: 'password',
+      type: 'input',
+      rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+    },
+    {
+      label: '手机号',
+      value: '',
+      name: 'phone',
+      type: 'input',
+      props: {
+        maxlength: 11
+      }
+    }
+  ]
+})
+
+const formData = reactive({})
+
+const create = () => {
+  console.log('保存的方法')
+}
+const update = () => {
+  console.log('保存的方法')
+}
+
+const proFormRef = ref<any>()
+const handleSave = () => {
+  proFormRef.value.submit()
+}
+</script>
+
+<template>
+  <div class="h-full bg-white p-16px">
+    <pro-form
+      :formConfig="formConfig"
+      :formData="formData"
+      :create="create"
+      :update="update"
+      ref="proFormRef"
+    ></pro-form>
+    <div class="text-center">
+      <el-button type="primary" @click="handleSave">保存</el-button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>