fs-admin/src/components/form/AdvancedForm.vue

<script setup lang="ts">
import type { AdvancedForm } from '@/types/form'

interface Props {
  formConfig: AdvancedForm
  formData: any
}
const props = defineProps<Props>()

const formData = computed(() => {
  if (props.formData.id) {
    return props.formData
  } else {
    const res = props.formData
    props.formConfig?.formItems.forEach(item => {
      item.group.forEach(element => {
        // 避免修改当前表单项value重置其他表单项的value
        res[element.name] = res[element.name] && element.value !== undefined ? res[element.name] : element.value
      })
    })
    console.log(res)
    return res
  }
})
</script>

<template>
  <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">
          <form-comp :item="sub" v-model="formData[sub.name]">
            <template #[slot.alias]="slotProps" v-for="slot in sub.slots" :key="slot.alias">
              <slot :name="slot.alias" v-bind="slotProps"></slot>
            </template>
          </form-comp>
        </el-form-item>
      </el-col>
    </el-row>
  </el-card>
</template>

<style lang="scss" scoped></style>