SaaS-lib/lib/component/form/form/child-form.vue

<!-- @format -->

<template>
  <a-row class="ns-form-body" :justify="formLayout.justify">
    <a-col :span="24" class="ns-child-form-title" v-html="title" v-if="title" />

    <template v-for="(schema, index) in getSchema" :key="schema.field">
      <ns-form-item
        :span="getComponentSpan(schema)"
        :schema="schema"
        :index="index"
        :formModel="formModel">
        <template #[item]="data" v-for="item in Object.keys($slots)">
          <slot :name="item" v-bind="data || {}"></slot>
        </template>
      </ns-form-item>
    </template>
    <!-- 占位解决三列中部为空的问题  -->
    <a-col :span="formLayout.span" class="ns-form-item ns-form-item-placeholder" />
  </a-row>
  <!-- <a-divider class="ns-child-form-divider" /> -->
</template>

<script lang="ts">
  import type { PropType } from 'vue';
  import { computed, defineComponent, inject, ref, watch } from 'vue';
  import { useFormModel } from '/nerv-lib/component/form/form/use-form-model';

  export default defineComponent({
    name: 'NsChildForm',
    props: {
      title: {
        type: String,
        default: '',
      },
      schemas: {
        type: Array as PropType<FormSchema[]>,
        default: () => [],
      },
      formModel: {
        type: Object as PropType<Recordable>,
        default: () => ({}),
      },
    },
    setup(props, { attrs, slots }) {
      const formElRef = ref();
      // const addChildForm = inject('addChildForm');
      const formLayout = inject('formLayout');

      // formElRef.value ? addChildForm(formElRef) : '';
      // addChildForm(formElRef);

      const getBindValue = computed(() => ({
        ...attrs,
        ...props,
      }));

      const getComponentSpan = (schema: FormSchema) => {
        if (schema.class?.includes('ns-form-item-full')) {
          return 24;
        }
        return formLayout?.span;
      };

      const getSchema = computed((): FormSchema[] => {
        const { schemas } = props;
        const formSchemas = schemas.filter((schema) => schema.component);
        return formSchemas as FormSchema[];
      });
      const isInitDefaultValueRef = ref(false);
      const {
        handleFormModel,
        initFormModel,
        resetFormModel,
        setFormModel,
        unsetFormModel,
        getFormModel,
      } = useFormModel({
        schemas: props.schemas,
        formModel: props.formModel,
        formElRef,
      });
      watch(
        () => getSchema.value,
        () => {
          if (isInitDefaultValueRef.value) {
            return;
          }
          initFormModel();
          isInitDefaultValueRef.value = true;
        },
        {
          immediate: true,
          deep: true,
        },
      );

      return {
        formElRef,
        getBindValue,
        formLayout,
        getSchema,
        getComponentSpan,
      };
    },
  });
</script>
<style lang="less" scoped>
  .ns-child-form-title {
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    padding: 16px 0;
  }
  .ns-child-form-divider {
    margin: 8px 0 0 0;
  }
  .ns-form-item-placeholder {
    min-height: 0;
    height: 0;
  }
</style>