新增子表单组件

src/components/form/ElFormTable.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { BasicForm, BasicFormItem } from '@/types/form'
+import { containerTypes } from '@/utils/constants'
+
+interface Props {
+  formItem: BasicFormItem
+  formConfig: BasicForm
+  formData: any
+}
+const props = defineProps<Props>()
+
+const keys: any = {}
+props.formItem.children &&
+  props.formItem.children.forEach((item: BasicFormItem) => {
+    keys[item.name] = ''
+  })
+
+if (!Array.isArray(props.formItem.value)) {
+  props.formItem.value = []
+}
+
+const handleAdd = () => {
+  props.formItem.value.push({
+    ...keys
+  })
+}
+const handleDelete = (index: number) => {
+  props.formItem.value.splice(index, 1)
+}
+</script>
+
+<template>
+  <el-form-item>
+    <div class="w-full">
+      <el-button type="primary" @click="handleAdd" icon="plus" plain size="default" class="mb-2">添加</el-button>
+      <vxe-table :data="formItem.value" border>
+        <vxe-column type="seq" width="50"></vxe-column>
+        <vxe-column v-for="item in formItem.children" :title="item.label" :field="item.name">
+          <template #default="{ row }">
+            <form-comp :item="item" v-model="row[item.name]">
+              <template #[slot.alias]="slotProps" v-for="slot in item.slots" :key="slot.alias">
+                <slot :name="slot.alias" v-bind="slotProps"></slot>
+              </template>
+            </form-comp>
+          </template>
+        </vxe-column>
+        <vxe-column fixed="right" title="操作" width="70">
+          <template #default="{ row, index }">
+            <el-button type="danger" size="small" @click="handleDelete(index)"> 删除 </el-button>
+          </template>
+        </vxe-column>
+      </vxe-table>
+    </div>
+  </el-form-item>
+</template>
+
+<style lang="scss" scoped></style>

src/components/form/ElSubForm.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { BasicForm, BasicFormItem } from '@/types/form'
+import { containerTypes } from '@/utils/constants'
+
+interface Props {
+  formItem: BasicFormItem
+  formConfig: BasicForm
+  formData: any
+}
+const props = defineProps<Props>()
+
+const keys: any = {}
+props.formItem.children &&
+  props.formItem.children.forEach((item: BasicFormItem) => {
+    keys[item.name] = ''
+  })
+
+if (!Array.isArray(props.formItem.value)) {
+  props.formItem.value = []
+}
+
+const handleAdd = () => {
+  props.formItem.value.push({
+    ...keys
+  })
+}
+const handleDelete = (index: number) => {
+  props.formItem.value.splice(index, 1)
+}
+</script>
+
+<template>
+  <div class="w-full">
+    <el-button type="primary" @click="handleAdd" icon="plus" plain class="mb-2" size="default">添加</el-button>
+    <div class="flex item" v-for="(item, index) in formItem.value">
+      <div class="w-60px">
+        <el-button class="index" type="primary" size="small" plain round>#{{ index + 1 }}</el-button>
+        <el-button
+          class="del"
+          type="danger"
+          size="small"
+          plain
+          circle
+          icon="delete"
+          @click="handleDelete(index)"
+        ></el-button>
+      </div>
+
+      <div class="flex-grow">
+        <el-form-item
+          v-for="child in formItem.children"
+          :label="child.label"
+          :rules="child.rules"
+          :prop="child.name"
+          v-show="!child.hidden"
+        >
+          <form-comp :item="child" v-model="item[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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.item {
+  .del {
+    display: none;
+  }
+  &:hover {
+    .index {
+      display: none;
+    }
+    .del {
+      display: block;
+    }
+  }
+}
+</style>

src/utils/constants.ts

@@ -82,7 +82,15 @@ export const themeNavList = [
 
 export const ACCESS_TOKEN = 'access_token'
 
-export const containerTypes = ['form-tabs', 'form-layout', 'form-card', 'form-group', 'form-steps']
+export const containerTypes = [
+  'form-tabs',
+  'form-layout',
+  'form-card',
+  'form-group',
+  'form-steps',
+  'form-table',
+  'sub-form'
+]
 export const notFormItem = [
   'form-tabs',
   'tab-pane',