ERP 组件库

<template>
	<DynamicForm :model-value="model" class="dynamic-form-demo" :config="formConfig" @click="handleClick"/>
</template>

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

const model = reactive({});

const formConfig: DynamicFormI = {
	title: '商品订单',
	showSide: false,
	cols: 3,
	colGap: 12,
  buttons: [
		{
			label: '提交',
			code: 'submit',
			type: 'primary',
			validator: true,
		},
		{
			label: '取消',
			code: 'cancel',
			type: 'info',
		},
	],
	ons: {
		change(params) {
			console.log(params);
		}
	},
  fields: [
		{
			key: 'address',
			label: '地市',
			type: 'cascader',
			componentProps: {
				pathMode: true,
			},
			options: [
				{
					value: 'beijing',
					label: 'Beijing',
					children: [
						{
							value: 'chaoyang',
							label: 'ChaoYang',
							children: [
								{
									value: 'datunli',
									label: 'Datunli',
								},
							],
						},
						{
							value: 'haidian',
							label: 'Haidian',
						},
						{
							value: 'dongcheng',
							label: 'Dongcheng',
						},
						{
							value: 'xicheng',
							label: 'Xicheng',
							children: [
								{
									value: 'jinrongjie',
									label: 'Jinrongjie',
								},
								{
									value: 'tianqiao',
									label: 'Tianqiao',
								},
							],
						},
					],
				},
				{
					value: 'shanghai',
					label: 'Shanghai',
					children: [
						{
							value: 'huangpu',
							label: 'Huangpu',
						},
					],
				},
			],
		},
		{
			key: 'orderType',
			label: '订单类型',
			type: 'select',
			required: true,
			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,
		},
		{
			key: 'key7',
			label: '业务员',
			type: 'select',
			required: true,
			options: [],
		},
		{
			key: 'key8',
			label: '商机编号',
			type: 'text',
		},
		{
			key: 'key9',
			label: '经销商',
			type: 'text',
		},
		{
			key: 'key10',
			label: '派单人员',
			type: 'select',
			options: [],
		},
		{
			key: 'key11',
			label: '归属手机',
			type: 'text',
			rules: {
				type: 'string',
				validator(value, callback) {
					// 校验手机
					callback();
				},
			},
		},
	],
};

const handleClick = (button, errors) => {
    console.log('click', button, errors);
}

defineExpose<PageExpose>({
	getModel() {
		return model.value;
	},
});
</script>