重构高级表单模板

src/components/form/ElFormCard.vue

@@ -7,13 +7,15 @@ interface Props {
   formConfig: BasicForm
   formData: any
 }
-defineProps<Props>()
+const props = defineProps<Props>()
+
+const cardSlot = props.formItem.slots?.find(slot => slot.name === 'header')
 </script>
 
 <template>
-  <el-card>
-    <template #[slot.name]="slotProps" v-for="slot in formItem.slots" :key="slot.alias">
-      <slot :name="slot.alias" v-bind="slotProps"></slot>
+  <el-card :header="formItem.label">
+    <template #header="slotProps" v-if="cardSlot">
+      <slot :name="cardSlot.alias" v-bind="slotProps"></slot>
     </template>
     <el-row :gutter="20">
       <el-col :span="item.span || formConfig.span || 12" v-for="(item, index) in formItem.children" :key="index">

src/components/form/ElFormLayout.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { BasicForm, BasicFormItem } from '@/types/form'
+import { containerTypes } from '@/utils/constants'
 
 interface Props {
   formItem: BasicFormItem
@@ -12,19 +13,35 @@ defineProps<Props>()
 <template>
   <el-row :gutter="20">
     <el-col v-bind="item.props" v-for="(item, index) in formItem.children" :key="index">
-      <el-form-item
-        v-for="child in item.children"
-        :label="child.label"
-        :rules="child.rules"
-        :prop="child.name"
-        v-show="!child.hidden"
+      <component
+        :is="'el-' + item.type"
+        v-if="containerTypes.includes(item.type)"
+        v-model="item.value"
+        v-bind="item.props"
+        :children="item.children"
+        :formData="formData"
+        :formConfig="formConfig"
+        v-on="item.events || {}"
       >
-        <form-comp :item="child" v-model="formData[child.name]">
-          <template #[slot.alias]="slotProps" v-for="slot in child.slots" :key="slot.alias">
-            <slot :name="slot.alias" v-bind="slotProps"></slot>
-          </template>
-        </form-comp>
-      </el-form-item>
+        <template #[slot.alias]="slotProps" v-for="slot in item.slots" :key="slot.alias">
+          <slot :name="slot.alias" v-bind="slotProps"></slot>
+        </template>
+      </component>
+      <template v-else>
+        <el-form-item
+          v-for="child in item.children"
+          :label="child.label"
+          :rules="child.rules"
+          :prop="child.name"
+          v-show="!child.hidden"
+        >
+          <form-comp :item="child" v-model="formData[child.name]">
+            <template #[slot.alias]="slotProps" v-for="slot in child.slots" :key="slot.alias">
+              <slot :name="slot.alias" v-bind="slotProps"></slot>
+            </template>
+          </form-comp>
+        </el-form-item>
+      </template>
     </el-col>
   </el-row>
 </template>

src/components/form/ElFormTabs.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { BasicForm, BasicFormItem } from '@/types/form'
-const containerTypes = ['form-tabs', 'form-layout', 'form-card']
+import { containerTypes } from '@/utils/constants'
 
 interface Props {
   modelValue: string

src/views/form/Advanced.vue

@@ -1,13 +1,20 @@
 <script lang="ts" setup>
-import type { AdvancedForm } from '@/types/form'
+import type { BasicForm } from '@/types/form'
 
-const formConfig = reactive<AdvancedForm>({
+const formConfig = reactive<BasicForm>({
   span: 8,
-  advanced: true,
   formItems: [
     {
       label: '仓库管理',
-      group: [
+      value: '',
+      name: '',
+      type: 'form-card',
+      span: 24,
+      props: {
+        shadow: 'never',
+        class: 'mb-2'
+      },
+      children: [
         {
           label: '用户名',
           value: '',
@@ -40,8 +47,16 @@ const formConfig = reactive<AdvancedForm>({
       ]
     },
     {
-      label: '任务管理',
-      group: [
+      label: '仓库管理',
+      value: '',
+      name: '',
+      type: 'form-card',
+      span: 24,
+      props: {
+        shadow: 'never',
+        class: 'mb-2'
+      },
+      children: [
         {
           label: '用户名',
           value: '',
@@ -64,7 +79,15 @@ const formConfig = reactive<AdvancedForm>({
     },
     {
       label: '仓库管理',
-      group: [
+      value: '',
+      name: '',
+      type: 'form-card',
+      span: 24,
+      props: {
+        shadow: 'never',
+        class: 'mb-2'
+      },
+      children: [
         {
           label: '用户名',
           value: '',
@@ -87,11 +110,19 @@ const formConfig = reactive<AdvancedForm>({
     },
     {
       label: '任务管理',
-      group: [
+      value: '',
+      name: '',
+      type: 'form-card',
+      span: 24,
+      props: {
+        shadow: 'never',
+        class: 'mb-2'
+      },
+      children: [
         {
           label: '用户名',
           value: '',
-          name: 'nam3',
+          name: 'name3',
           type: 'input'
         },
         {
@@ -110,7 +141,15 @@ const formConfig = reactive<AdvancedForm>({
     },
     {
       label: '仓库管理',
-      group: [
+      value: '',
+      name: '',
+      type: 'form-card',
+      span: 24,
+      props: {
+        shadow: 'never',
+        class: 'mb-2'
+      },
+      children: [
         {
           label: '用户名',
           value: '',
@@ -133,7 +172,14 @@ const formConfig = reactive<AdvancedForm>({
     },
     {
       label: '任务管理',
-      group: [
+      value: '',
+      name: '',
+      type: 'form-card',
+      span: 24,
+      props: {
+        shadow: 'never'
+      },
+      children: [
         {
           label: '用户名',
           value: '',
@@ -186,7 +232,7 @@ const handleSave = () => {
 </script>
 
 <template>
-  <div class="overflow-auto pb-42px" style="height: calc(100vh - 101px - var(--main-padding) * 2)">
+  <div class="pb-60px">
     <pro-form :formConfig="formConfig" :formData="formData" :create="create" :update="update" ref="proFormRef">
       <template #prepend>test</template>
       <template #customDefault>

src/views/form/Tab.vue

@@ -16,45 +16,6 @@ const handleSave = () => {
 }
 const formConfig = reactive<BasicForm>({
   formItems: [
-    {
-      label: '用户名',
-      value: '',
-      name: 'name',
-      type: 'input',
-      rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
-    },
-    {
-      label: '卡片',
-      value: '',
-      name: 'form-card_SJdlee00',
-      type: 'form-card',
-      children: [
-        {
-          type: 'input',
-          label: '登录名',
-          name: 'loginName',
-          value: 'a',
-          rules: [{ required: true, message: '请输入登录名', trigger: 'blur' }],
-          slots: [
-            {
-              name: 'prepend',
-              alias: 'cprepend'
-            }
-          ]
-        }
-      ],
-      rules: [],
-      props: {
-        header: '卡片标题'
-      },
-      span: 24,
-      slots: [
-        {
-          name: 'header',
-          alias: 'cardHeader'
-        }
-      ]
-    },
     {
       type: 'form-tabs',
       label: '',
@@ -97,12 +58,6 @@ const formConfig = reactive<BasicForm>({
                 'inactive-value': '0'
               }
             }
-          ],
-          slots: [
-            {
-              name: 'label',
-              alias: 'clabel'
-            }
           ]
         },
         {
@@ -187,151 +142,9 @@ const formConfig = reactive<BasicForm>({
                 ]
               }
             }
-          ],
-          slots: [
-            {
-              name: 'label',
-              alias: 'dlabel'
-            }
           ]
         }
       ]
-    },
-    {
-      type: 'form-layout',
-      label: '',
-      name: '',
-      value: 'label1',
-      span: 24,
-      children: [
-        {
-          type: 'col',
-          label: 'tab1',
-          name: 'label1',
-          value: '',
-          children: [
-            {
-              type: 'input',
-              label: '登录名',
-              name: 'loginName',
-              value: 'a',
-              rules: [{ required: true, message: '请输入登录名', trigger: 'blur' }],
-              slots: [
-                {
-                  name: 'prepend',
-                  alias: 'lprepend'
-                }
-              ]
-            },
-            {
-              type: 'input',
-              label: '密码',
-              name: 'password',
-              value: ''
-            },
-            {
-              label: '启用',
-              value: '1',
-              name: 'loginFlag',
-              type: 'switch',
-              props: {
-                'active-value': '1',
-                'inactive-value': '0'
-              }
-            }
-          ],
-          props: {
-            span: 8
-          }
-        },
-        {
-          type: 'col',
-          label: 'tab2',
-          name: 'label2',
-          value: '',
-          children: [
-            {
-              type: 'input',
-              label: '手机号',
-              name: 'phone',
-              value: ''
-            },
-            {
-              label: '字段名',
-              value: '',
-              name: 'field3',
-              type: 'cascader',
-              props: {
-                options: [
-                  {
-                    value: 'guide',
-                    label: 'Guide',
-                    children: [
-                      {
-                        value: 'disciplines',
-                        label: 'Disciplines',
-                        children: [
-                          {
-                            value: 'consistency',
-                            label: 'Consistency'
-                          },
-                          {
-                            value: 'feedback',
-                            label: 'Feedback'
-                          },
-                          {
-                            value: 'efficiency',
-                            label: 'Efficiency'
-                          },
-                          {
-                            value: 'controllability',
-                            label: 'Controllability'
-                          }
-                        ]
-                      },
-                      {
-                        value: 'navigation',
-                        label: 'Navigation',
-                        children: [
-                          {
-                            value: 'side nav',
-                            label: 'Side Navigation'
-                          },
-                          {
-                            value: 'top nav',
-                            label: 'Top Navigation'
-                          }
-                        ]
-                      }
-                    ]
-                  },
-                  {
-                    value: 'resource',
-                    label: 'Resource',
-                    children: [
-                      {
-                        value: 'axure',
-                        label: 'Axure Components'
-                      },
-                      {
-                        value: 'sketch',
-                        label: 'Sketch Templates'
-                      },
-                      {
-                        value: 'docs',
-                        label: 'Design Documentation'
-                      }
-                    ]
-                  }
-                ]
-              }
-            }
-          ],
-          props: {
-            span: 8
-          }
-        }
-      ]
     }
   ]
 })
@@ -343,19 +156,6 @@ const formConfig = reactive<BasicForm>({
       <template #prepend>test</template>
       <template #cprepend>testc</template>
       <template #lprepend>testl</template>
-      <template #cardHeader>test</template>
-      <template #clabel>
-        <span class="custom-tabs-label">
-          <el-icon><calendar /></el-icon>
-          <span>Route</span>
-        </span>
-      </template>
-      <template #dlabel>
-        <span class="custom-tabs-label">
-          <el-icon><calendar /></el-icon>
-          <span>Route2</span>
-        </span>
-      </template>
     </pro-form>
     <div class="text-center">
       <el-button type="primary" @click="handleSave">保存</el-button>