Ben Lin
2024-06-18 ebbd788fbb2c0b45d4473798efc57eec8ba74a25
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!--
 * @Description:
   `<FormItem`
    :tableAction="tableAction"
    :formActionType="formActionType"
    :schema="schema2"
    :formProps="getProps"
    :allDefaultValues="defaultValueRef"
    :formModel="formModel"
    :setFormModel="setFormModel"
  >
-->
 
<template>
  <FormItem :schema="schemaNew" :formProps="getProps">
    <template #[item]="data" v-for="item in Object.keys($slots)">
      <slot :name="item" v-bind="data || {}"></slot>
    </template>
  </FormItem>
</template>
<script lang="ts">
  import { computed, defineComponent, unref } from 'vue';
  import { IFormConfig, IVFormComponent } from '../../typings/v-form-component';
  import { FormProps, FormSchema } from '@/components/Form';
 
  import FormItem from '@/components/Form/src/components/FormItem.vue';
 
  export default defineComponent({
    name: 'VFormItem',
    components: {
      FormItem,
    },
    props: {
      formData: {
        type: Object,
        default: () => ({}),
      },
      schema: {
        type: Object as PropType<IVFormComponent>,
        required: true,
      },
      formConfig: {
        type: Object as PropType<IFormConfig>,
        required: true,
      },
    },
    setup(props) {
      const schema = computed(() => {
        const schema: FormSchema = {
          ...unref(props.schema),
        } as FormSchema;
 
        return schema;
      });
 
      // Get the basic configuration of the form
      const getProps = computed((): FormProps => {
        return { ...unref(props.formConfig) } as FormProps;
      });
      return {
        schemaNew: schema,
        getProps,
      };
    },
  });
</script>
 
<style lang="less" scoped></style>