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

<script setup lang="ts">
import type { BasicForm, BasicFormItem } from '@/types/form'
const containerTypes = ['form-tabs', 'form-layout', 'form-card']

interface Props {
  modelValue: string
  formItem: BasicFormItem
  formConfig: BasicForm
  formData: any
}
const props = defineProps<Props>()
const emits = defineEmits(['update:modelValue'])

const modelValue = computed({
  get: () => props.modelValue,
  set: value => emits('update:modelValue', value)
})
</script>

<template>
  <el-tabs v-model="modelValue" style="width: 100%">
    <el-tab-pane :label="tab.label" :name="tab.name" v-for="tab in formItem.children" :key="tab.name">
      <template #[slot.name] v-for="slot in tab.slots" :key="slot.alias">
        <slot :name="slot.alias"></slot>
      </template>

      <el-row :gutter="20">
        <el-col :span="item.span || formConfig.span || 12" v-for="(item, index) in tab.children" :key="index">
          <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 || {}"
          >
            <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 :label="item.label" :rules="item.rules" :prop="item.name" v-show="!item.hidden">
              <form-comp :item="item" v-model="formData[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>
            </el-form-item>
          </template>
        </el-col>
      </el-row>
    </el-tab-pane>
  </el-tabs>
</template>

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