表单域嵌套 ​

<template>
	<DynamicForm :model-value="model" class="dynamic-form-demo" :config="formConfig" />
    <JsonViewer :data="model"/>
</template>

<script lang="tsx" setup>
import { createCommentVNode, reactive, ref } from 'vue';
import { CopyText, DynamicForm, getAddressTreeListApi } from '@erp/biz';
import type { PageExpose } from '@erp/biz';

const model = reactive({
    province_city_area: [],
    address: undefined,
    showOrderType: true,
    key3: '下单时间值复制内容复制内容'
});

// let intervalId = setInterval(() => {
//     model.showOrderType = !model.showOrderType;
// }, 3000);

// const isFocus = ref(false);
const helpMessage = ref('');

const formConfig: DynamicFormI = {
	title: '商品订单',
	showSide: false,
	cols: 3,
	colGap: 12,
    layout: 'horizontal',
    labelAlign: 'left',
	buttons: [
		{
			label: '提交',
			code: 'submit',
			type: 'primary',
			validator: 'field',
		},
		{
			label: '取消',
			code: 'cancel',
			type: 'info',
		},
	],
	groups: [
		{
			label: '基础信息',
            tooltip: '基础信息基础信息基础信息基础信息基础信息',
			cols: 3,
			children: [
				{
					cols: 1,
					span: 2,
					fields: [
						{
							key: 'orderType',
							label: '订单类型',
							type: 'select',
							required: true,
                            tooltip: '基础信息',
                            show() {
                                return !!model.showOrderType;
                            },
							options: [
								{
									value: '1',
									label: '订单类型一',
								},
							],
                            // focus显示
                            class: "df-extra-message",
                            extra: helpMessage,
                            componentProps: {
                                onFocus() {
                                    helpMessage.value = '双击查看或修改详细地址';
                                },
                                onBlur() {
                                    helpMessage.value = '';
                                }
                            }
						},
						{
							key: 'key2.key',
							type: 'custom',
                            component: createCommentVNode('empty'),
                            hideLabel: true,
                            show() {
                                return !model.showOrderType;
                            },
						},
						{
							key: 'key3',
							label: '下单时间',
							type: 'custom',
                            component: CopyText,
						},
						{
							key: 'key4',
							label: '运费',
							type: 'number',
                            // 常显
                            class: "df-extra-message",
                            extra: '双击查看或修改详细地址',
						},
						{
							key: 'key5',
							label: '买家账号',
							type: 'text',
							required: true,
                            // hover 显示
                            class: "df-extra-message df-extra-message-hover",
                            extra: '双击查看或修改详细地址',
						},
						{
							key: 'key6',
							label: '买家名称',
							type: 'text',
							required: true,
						},
					],
				},
				{
					cols: 1,
					span: 1,
					fields: [
						{
							key: 'key7',
							label: '业务员',
							type: 'select',
							required: true,
							span: 2,
							options: [
								{
									label: '张三',
									value: '1',
								},
							],
						},
						{
							key: 'key8',
							label: '商机编号',
							type: 'text',
						},
						{
							key: 'key9',
							label: '经销商',
							type: 'text',
						},
						{
							key: 'key10',
							label: '派单人员',
							type: 'select',
							options: [],
						},
						{
							key: 'key114',
							label: '归属手机',
							type: 'text',
							rules: {
								type: 'string',
								validator(value, callback) {
									// 校验手机
									callback();
								},
							},
						},
					],
				},
			],
		},
		{
			label: '收货信息',
			cols: 3,
			tip: '收货信息',
			children: [
				{
					span: 2,
					cols: 2,
					fields: [
						{
							key: 'address',
							label: '收货人',
							type: 'user-tree-select',
							placeholder: '请输入收货人姓名',
							required: true,
						},
						{
							key: 'phone',
							label: '联系人电话',
							type: 'text',
							required: true,
							tooltip: '请输入联系电话',
						},
						{
							key: 'province_city_area',
							label: '地区',
							type: 'cascader',
							options: () => getAddressTreeListApi(),
							componentProps: {
								checkStrictly: true,
								pathMode: true,
								fieldNames: { label: 'name', value: 'id' },
							},
						},
						{
							key: 'key12',
							label: '详细地址',
							type: 'text',
							required: true,
							placeholder: '请输入具体街道/楼栋/房号等信息',
						},
						{
							key: 'key13',
							label: '使用代发地址',
							tooltip: '使用代发地址',
							type: 'switch',
							row: {
								wrap: false,
								align: 'center',
							},
							options: [
								{
									value: 1,
									label: '是',
								},
								{
									value: 2,
									label: '否',
								},
							],
						},
					],
				},
				{
					span: 1,
					cols: 1,
					fields: [
						{
							key: 'key13',
							label: '智能解析',
							type: 'textarea',
							class: 'smart-area',
							componentProps: {
								autoSize: {
									minRows: 5,
									maxRows: 10,
								},
							},
						},
					],
				},
			],
		},
		{
			label: '商品信息',
			buttons: [
				{
					code: 'add-shop',
					label: '添加商品',
					type: 'text',
					status: 'normal',
					size: 'small',
				},
			],
		},
		{
			label: '卖家备注',
			fields: [
				{
					key: 'key111',
					label: '旗帜颜色',
					tooltip: '旗帜颜色',
					type: 'text',
					span: 2,
				},
				{
					key: 'key112',
					label: '定制内容',
					type: 'textarea',
					placeholder: '请输入需要定制的内容，最多不超过300字',
				},
				{
					key: 'key113',
					label: '备注',
					type: 'textarea',
					placeholder: '系统会根据您选择的商品+定制内容，自动生成备注',
				},
			],
		},
		{
			label: '加工信息',
			fields: [],
		},
		{
			label: '附件信息',
			fields: [
				{
					key: 'key123',
					type: 'upload',
					span: 2,
                    hideLabel: true,
                    componentProps: {
                        onBeforeUpload(file) {
                            console.log('onBeforeUpload >>', file);
                            return true;
                        }
                    }
				},
			],
		},
	],
};

defineExpose<PageExpose>({
	getModel() {
		return model.value;
	},
});
</script>
<style lang="scss" scoped>
.dynamic-form-demo {
	padding: 0;
	border: 1px solid var(--color-border-1);
	border-radius: var(--border-radius-small);
	height: 560px;
	:deep(.fk-btn + .fk-btn) {
		margin-left: 8px;
	}
	:deep(.dynamic-form-header) {
		margin-bottom: 12px;
	}
}
</style>