xiangyuan-gov-app/src/components/dynamic/nest/DynamicFormRoot.vue

<!-- eslint-disable vue/no-mutating-props -->
<template>
  <!--空显示-->
  <slot name="empty" v-if="options.formItems?.length == 0 || !model">
    <div v-if="options.emptyText" class="dynamic-form-item-empty">{{ options.emptyText }}</div>
  </slot>
  <Alert
    v-else-if="(typeof model !== 'object' && !options.suppressRootError)"
    type="warning"
    message="DynamicForm: model is not a object!"
    :description="`At form ${name || 'unnamed'} Root`"
  />
  <template v-else>
    <!--表单条目渲染核心-->
    <DynamicFormItemContainer 
      v-for="(item, index) in options.formItems"
      :key="index"
      :item="item"
      :name="item.name"
      :rawModel="finalModel"
      :model="finalModel[item.name]"
      :parentModel="finalModel"
      :isFirst="index === 0"
      :isLast="index === options.formItems.length - 1"
      @update:model="(v: unknown) => finalModel[item.name] = v"
      :disabled="options.disabled"
    >
      <template #arrayButtonAdd="props">
        <slot name="formArrayButtonAdd" :onClick="props.onClick" />
      </template>
      <template #arrayButtons="props">
        <slot name="formArrayButtons"
          :onDeleteClick="props.onDeleteClick"
          :onUpClick="props.onUpClick"
          :onDownClick="props.onDownClick" 
        />
      </template>
      <template #formCeil="{ data }">
        <slot name="formCeil"
          :name="data.name"
          :item="data.item"
          :model="data.model"
          :onModelUpdate="data.onModelUpdate"
          :rawModel="data.rawModel"
          :parentModel="data.parentModel"
          :parent="data.parent"
          :rules="data.item.rules"
          :disabled="data.disabled"
          :additionalProps="data.additionalProps"
        />
      </template>
    </DynamicFormItemContainer>
    <slot name="endButton" />
  </template>
</template>

<script lang="ts" setup>
import { computed, inject, type PropType } from 'vue';
import DynamicFormItemContainer from './DynamicFormItemContainer.vue';
import type { IDynamicFormObject, IDynamicFormOptions } from '..';
import Alert from '@/components/feedback/Alert.vue';

/**
 * 动态表单组件。
 */
const props = defineProps({
  model: {
    type: Object as PropType<IDynamicFormObject>,
    default: null
  },
  options: {
    type: Object as PropType<IDynamicFormOptions>,
    default: null
  },
  name: {
    type: String,
    default: ''
  }
});
const finalModel = computed(() => {
  if (typeof props.model !== 'object')
    return {};
  return props.model;
});
</script>