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
69
70
71
72
73
74
75
76
77
78
79
| <template>
| <template v-if="['Grid'].includes(schema.component)">
| <Row class="grid-row">
| <Col
| class="grid-col"
| v-for="(colItem, index) in schema.columns"
| :key="index"
| :span="colItem.span"
| >
| <FormRender
| v-for="(item, k) in colItem.children"
| :key="k"
| :schema="item"
| :formData="formData"
| :formConfig="formConfig"
| :setFormModel="setFormModel"
| />
| </Col>
| </Row>
| </template>
| <VFormItem
| v-else
| :formConfig="formConfig"
| :schema="schema"
| :formData="formData"
| :setFormModel="setFormModel"
| @change="$emit('change', { schema: schema, value: $event })"
| @submit="$emit('submit', schema)"
| @reset="$emit('reset')"
| >
| <template
| v-if="schema.componentProps && schema.componentProps.slotName"
| #[schema.componentProps!.slotName]
| >
| <slot :name="schema.componentProps!.slotName"></slot>
| </template>
| </VFormItem>
| </template>
| <script lang="ts">
| import { defineComponent, PropType } from 'vue';
| import { IVFormComponent, IFormConfig } from '../../../typings/v-form-component';
| import VFormItem from '../../VFormItem/index.vue';
| import { Row, Col } from 'ant-design-vue';
|
| export default defineComponent({
| name: 'FormRender',
| components: {
| VFormItem,
| Row,
| Col,
| },
| props: {
| formData: {
| type: Object,
| default: () => ({}),
| },
| schema: {
| type: Object as PropType<IVFormComponent>,
| default: () => ({}),
| },
| formConfig: {
| type: Object as PropType<IFormConfig>,
| default: () => [] as IFormConfig[],
| },
| setFormModel: {
| type: Function as PropType<(key: string, value: any) => void>,
| default: null,
| },
| },
| emits: ['change', 'submit', 'reset'],
| setup(_props) {},
| });
| </script>
|
| <style>
| .v-form-render-item {
| overflow: hidden;
| }
| </style>
|
|
