<script lang="ts" setup>
|
import { computed } from 'vue';
|
|
import { buildUUID } from '@jnpf/utils';
|
|
import Item from './Item.vue';
|
|
const props = defineProps({
|
formConf: { type: Object, required: true },
|
relationData: { type: Object, default: () => {} },
|
formData: { type: Object },
|
loading: { type: Boolean, default: false },
|
});
|
const emit = defineEmits(['toDetail']);
|
|
const getFormName = computed(() => `form-${buildUUID()}`);
|
const getLabelCol = computed(() => ({ style: { width: `${props.formConf.labelWidth}px` } }));
|
const getBindValue = computed(() => ({ ...props }));
|
|
function toDetail(data) {
|
emit('toDetail', data);
|
}
|
</script>
|
|
<template>
|
<a-row :class="formConf.formStyle ? `${formConf.formStyle} word-form-detail` : ''">
|
<a-form
|
class="w-full"
|
:name="getFormName"
|
:colon="formConf.colon"
|
:size="formConf.size"
|
:disabled="formConf.disabled"
|
:label-col="getLabelCol"
|
:layout="formConf.labelPosition === 'top' ? 'vertical' : 'horizontal'"
|
:label-align="formConf.labelPosition === 'right' ? 'right' : 'left'">
|
<a-row :gutter="formConf.formStyle ? 0 : formConf.gutter">
|
<Item v-for="(item, index) in formConf.fields" :key="index" :item="item" v-bind="getBindValue" @to-detail="toDetail" />
|
</a-row>
|
</a-form>
|
</a-row>
|
</template>
|
