表单域嵌套 ​

<template>
	<DynamicForm :model-value="model" class="dynamic-form-demo" :config="formConfig" />
    <JsonViewer :data="model"/>
    <!-- <Cascader
        v-model="model.province_city_area"
        :options="addressOptions"
        :check-strictly="true"
		:path-mode="true"
		:field-names="{ label: 'name', value: 'id' }"
    />
    -->
</template>

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

const model = reactive({
    province_city_area: [11, 1101, 22],
});

const addressOptions = ref([])

const formConfig: DynamicFormI = {
	title: '商品订单',
	showSide: true,
	cols: 3,
	colGap: 12,
	buttons: [
		{
			label: '提交',
			code: 'submit',
			type: 'primary',
			validator: 'field',
		},
		{
			label: '取消',
			code: 'cancel',
			type: 'info',
		},
	],
	groups: [
		{
			label: '基础信息',
			cols: 3,
			children: [
				{
					cols: 1,
					span: 2,
					fields: [
						{
							key: 'orderType',
							label: '订单类型',
							type: 'select',
							required: true,
                            show: false,
							options: [
								{
									value: '1',
									label: '订单类型一',
								},
							],
						},
						{
							key: 'key2.key',
							label: '店铺',
							required: true,
							type: 'select-shop',
						},
						{
							key: 'key3',
							label: '下单时间',
							type: 'date',
						},
						{
							key: 'key4',
							label: '运费',
							type: 'number',
						},
						{
							key: 'key5',
							label: '买家账号',
							type: 'text',
							required: true,
						},
						{
							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: 'text',
							placeholder: '请输入收货人姓名',
							required: true,
						},
						{
							key: 'phone',
							label: '联系人电话',
							type: 'text',
							required: true,
							tooltip: '请输入联系电话',
						},
						{
							key: 'province_city_area',
							label: '地区',
							type: 'cascader',
                            options: () => getAddressTreeListApi(),
                            componentProps: {
                                pathMode: true,
                                fieldNames: { label: 'name', value: 'id' }
                            }
							// options: () => getAddressTreeListApi().then(options => {
                            //     addressOptions.value = options;
                            //     return options;
                            // }),
							// componentProps: {
							// 	checkStrictly: true,
							// 	pathMode: true,
							// 	fieldNames: { label: 'name', value: 'code' },
                            //     virtualListProps: {
                            //         height: 200
                            //     }
							// },
						},
						{
							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,
				},
			],
		},
	],
};

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>