onbus_crm.git - Gitblit

feat(BasicForm): Improve ts types for BasicForm (#3426)

2023-12-21 6bb79180fc798b1a0b1a6c22f7c13ddb3a45a3b5

提交 \| 用户 \| age
2f6253	1	<template>
31ff05	2	<PageWrapper title="UseForm操作示例">
dce3ab	3	<a-button class="mb-4" type="primary" @click="showDrawer"> 更改设置 </a-button>
8284d1	4
357510	5	<Drawer v-model:open="open" title="更改设置" placement="right">
dce3ab	6	<BasicForm ref="settingFormRef" @register="registerSetting" @submit="handleSubmitSetting">
L	7	<template #other>
	8	<Space>
	9	<a-button
	10	@click="() => withClose({ resetButtonOptions: { disabled: true, text: '重置New' } })"
	11	>
	12	修改重置按钮
	13	</a-button>
	14	<a-button
	15	@click="() => withClose({ submitButtonOptions: { disabled: true, loading: true } })"
	16	>
	17	修改查询按钮
	18	</a-button>
	19	<a-button @click="handleLoad" class="mr-2"> 联动回显 </a-button>
	20	</Space>
	21	</template>
	22	</BasicForm>
8284d1	23	<template #extra>
L	24	<Space>
	25	<a-button @click="resetSettings">重置设置</a-button>
	26	<a-button type="primary" @click="onSettings">应用</a-button>
	27	</Space>
	28	</template>
	29	</Drawer>
	30
2f6253	31	<CollapseContainer title="useForm示例">
陈	32	<BasicForm @register="register" @submit="handleSubmit" />
	33	</CollapseContainer>
31ff05	34	</PageWrapper>
2f6253	35	</template>
8284d1	36
357510	37	<script lang="ts" setup>
X	38	import { ref } from 'vue';
8284d1	39	import { Drawer, Space } from 'ant-design-vue';
6bb791	40	import { BasicForm, type FormSchema, useForm, type FormProps } from '@/components/Form';
357510	41	import { CollapseContainer } from '@/components/Container';
X	42	import { PageWrapper } from '@/components/Page';
	43	import { areaRecord } from '@/api/demo/cascader';
8284d1	44
L	45	const sizeList = [
	46	{ value: 'large', label: 'large' },
	47	{ value: 'middle', label: 'middle' },
	48	{ value: 'small', label: 'small' },
	49	{ value: 'default', label: 'defualt' },
	50	];
31ff05	51
f2ec2c	52	const layoutList = [
L	53	{ value: 'vertical', label: 'vertical' },
	54	{ value: 'inline', label: 'inline' },
	55	{ value: 'horizontal', label: 'horizontal' },
	56	];
	57
	58	const labelAlignList = [
	59	{ value: 'left', label: 'left' },
	60	{ value: 'right', label: 'right' },
	61	];
	62
2f6253	63	const schemas: FormSchema[] = [
陈	64	{
	65	field: 'field1',
	66	component: 'Input',
	67	label: '字段1',
8284d1	68	colProps: { span: 8 },
2f6253	69	componentProps: {
陈	70	placeholder: '自定义placeholder',
	71	onChange: (e: any) => {
	72	console.log(e);
	73	},
	74	},
	75	},
	76	{
	77	field: 'field2',
	78	component: 'Input',
	79	label: '字段2',
8284d1	80	colProps: { span: 8 },
2f6253	81	},
陈	82	{
	83	field: 'field3',
	84	component: 'DatePicker',
	85	label: '字段3',
8284d1	86	colProps: { span: 8 },
ae58ad	87	componentProps: {
LK	88	getPopupContainer: () => {
6bb791	89	return document.querySelector('.ant-form')!;
ae58ad	90	},
LK	91	},
2f6253	92	},
陈	93	{
a2a75a	94	field: 'fieldTime',
V	95	component: 'RangePicker',
	96	label: '时间字段',
8284d1	97	colProps: { span: 8 },
ae58ad	98	componentProps: {
LK	99	getPopupContainer: () => {
6bb791	100	return document.querySelector('.ant-form')!;
ae58ad	101	},
LK	102	},
a2a75a	103	},
V	104	{
2f6253	105	field: 'field4',
陈	106	component: 'Select',
	107	label: '字段4',
8284d1	108	colProps: { span: 8 },
2f6253	109	componentProps: {
陈	110	options: [
8284d1	111	{ label: '选项1', value: '1', key: '1' },
L	112	{ label: '选项2', value: '2', key: '2' },
2f6253	113	],
陈	114	},
	115	},
	116	{
	117	field: 'field5',
	118	component: 'CheckboxGroup',
	119	label: '字段5',
	120	colProps: {
	121	span: 8,
	122	},
	123	componentProps: {
	124	options: [
8284d1	125	{ label: '选项1', value: '1' },
L	126	{ label: '选项2', value: '2' },
2f6253	127	],
陈	128	},
	129	},
	130	{
	131	field: 'field7',
	132	component: 'RadioGroup',
	133	label: '字段7',
8284d1	134	colProps: { span: 8 },
2f6253	135	componentProps: {
陈	136	options: [
8284d1	137	{ label: '选项1', value: '1' },
L	138	{ label: '选项2', value: '2' },
2f6253	139	],
陈	140	},
	141	},
97fe8e	142	{
J	143	field: 'field8',
	144	component: 'ApiCascader',
	145	label: '联动',
8284d1	146	colProps: { span: 8 },
97fe8e	147	componentProps: {
J	148	api: areaRecord,
	149	apiParamKey: 'parentCode',
	150	labelField: 'name',
	151	valueField: 'code',
	152	initFetchParams: {
	153	parentCode: '',
	154	},
	155	isLeaf: (record) => {
	156	return !(record.levelType < 3);
	157	},
	158	},
	159	},
	160	{
	161	field: 'field9',
	162	component: 'ApiCascader',
	163	label: '联动回显',
8284d1	164	colProps: { span: 8 },
97fe8e	165	componentProps: {
J	166	api: areaRecord,
	167	apiParamKey: 'parentCode',
	168	labelField: 'name',
	169	valueField: 'code',
	170	initFetchParams: {
	171	parentCode: '',
	172	},
	173	isLeaf: (record) => {
	174	return !(record.levelType < 3);
	175	},
	176	},
	177	},
2f6253	178	];
8284d1	179	const formSchemas: FormSchema[] = [
L	180	{
f2ec2c	181	field: 'd1',
8284d1	182	component: 'Divider',
L	183	label: '基础属性',
	184	colProps: { span: 24 },
	185	componentProps: {
	186	orientation: 'center',
	187	},
	188	},
	189	{
f2ec2c	190	field: 'name',
L	191	defaultValue: 'useForm',
	192	component: 'Input',
	193	label: 'name',
	194	colProps: { span: 24 },
	195	},
	196	{
	197	field: 'layout',
	198	defaultValue: 'horizontal',
	199	component: 'RadioButtonGroup',
	200	label: 'layout',
	201	colProps: { span: 24 },
	202	componentProps: {
	203	options: layoutList,
	204	},
	205	},
	206	{
	207	field: 'labelAlign',
	208	defaultValue: 'right',
	209	component: 'RadioButtonGroup',
	210	label: 'labelAlign',
	211	colProps: { span: 24 },
	212	componentProps: {
	213	options: labelAlignList,
	214	},
	215	},
	216	{
8284d1	217	field: 'labelWidth',
L	218	defaultValue: 120,
	219	component: 'InputNumber',
	220	label: 'labelWidth',
	221	colProps: { span: 24 },
	222	},
	223	{
	224	field: 'size',
	225	defaultValue: 'default',
	226	component: 'Select',
	227	label: 'size',
	228	colProps: { span: 24 },
	229	componentProps: {
	230	options: sizeList,
	231	},
f2ec2c	232	},
L	233	{
	234	field: 'colon',
	235	defaultValue: false,
	236	component: 'Switch',
	237	label: 'colon',
	238	colProps: { span: 24 },
8284d1	239	},
L	240	{
	241	field: 'disabled',
	242	defaultValue: false,
	243	component: 'Switch',
	244	label: 'disabled',
	245	colProps: { span: 24 },
	246	},
	247	{
	248	field: 'compact',
	249	defaultValue: false,
	250	component: 'Switch',
	251	label: 'compact',
	252	colProps: { span: 24 },
	253	},
	254	{
f2ec2c	255	field: 'autoSetPlaceHolder',
L	256	defaultValue: true,
	257	component: 'Switch',
	258	label: 'autoSetPlaceHolder',
	259	colProps: { span: 24 },
	260	},
	261	{
	262	field: 'autoSubmitOnEnter',
	263	defaultValue: false,
	264	component: 'Switch',
	265	label: 'autoSubmitOnEnter',
	266	colProps: { span: 24 },
	267	},
	268	{
	269	field: 'showAdvancedButton',
	270	defaultValue: false,
	271	component: 'Switch',
	272	label: 'showAdvancedButton',
	273	colProps: { span: 24 },
	274	},
	275
	276	{
	277	field: 'd2',
8284d1	278	component: 'Divider',
f2ec2c	279	label: '网格布局(rowProps)',
8284d1	280	colProps: { span: 24 },
L	281	componentProps: {
	282	orientation: 'center',
	283	},
	284	},
	285	{
f2ec2c	286	field: 'rowProps.gutter.0',
L	287	component: 'InputNumber',
	288	defaultValue: 0,
	289	label: 'Horizontal Gutter',
8284d1	290	colProps: { span: 24 },
L	291	componentProps: {
f2ec2c	292	addonAfter: 'px',
8284d1	293	},
L	294	},
	295	{
f2ec2c	296	field: 'rowProps.gutter.1',
L	297	component: 'InputNumber',
	298	defaultValue: 0,
	299	label: 'Vertical Gutter',
	300	colProps: { span: 24 },
	301	componentProps: {
	302	addonAfter: 'px',
	303	},
	304	},
	305	{
	306	field: 'rowProps.align',
	307	defaultValue: 'top',
	308	component: 'Select',
	309	label: 'align',
	310	colProps: { span: 24 },
	311	componentProps: {
	312	options: [
	313	{ value: 'stretch', label: 'stretch' },
	314	{ value: 'bottom', label: 'bottom' },
	315	{ value: 'top', label: 'top' },
	316	{ value: 'middle', label: 'middle' },
	317	],
	318	},
	319	},
	320	{
	321	field: 'rowProps.justify',
	322	defaultValue: 'start',
	323	component: 'Select',
	324	label: 'justify',
	325	colProps: { span: 24 },
	326	componentProps: {
	327	options: [
	328	{ value: 'space-around', label: 'space-around' },
	329	{ value: 'space-between', label: 'space-between' },
	330	{ value: 'center', label: 'center' },
	331	{ value: 'end', label: 'end' },
	332	{ value: 'start', label: 'start' },
	333	],
	334	},
	335	},
	336	{
	337	field: 'wrap',
	338	defaultValue: true,
	339	component: 'Switch',
	340	label: 'wrap',
	341	colProps: { span: 24 },
	342	},
	343
	344	{
	345	field: 'd3',
8284d1	346	component: 'Divider',
L	347	label: '操作按钮',
	348	colProps: { span: 24 },
	349	componentProps: {
	350	orientation: 'center',
	351	},
	352	},
	353	{
	354	field: 'showActionButtonGroup',
	355	defaultValue: true,
	356	component: 'Switch',
f2ec2c	357	label: 'showActionButtonGroup',
8284d1	358	colProps: { span: 24 },
L	359	componentProps: ({ formActionType }) => {
	360	return {
6bb791	361	onChange: (val) => {
8284d1	362	formActionType.updateSchema([
L	363	{ field: 'showResetButton', componentProps: { disabled: !val } },
	364	{
	365	field: 'showSubmitButton',
f2ec2c	366	componentProps: { disabled: !val },
L	367	},
	368	{
	369	field: 'actionColOptions.span',
8284d1	370	componentProps: { disabled: !val },
L	371	},
	372	]);
	373	},
	374	};
	375	},
	376	},
	377	{
	378	field: 'showResetButton',
	379	defaultValue: true,
	380	component: 'Switch',
f2ec2c	381	label: 'showResetButton',
8284d1	382	colProps: { span: 24 },
L	383	},
	384	{
	385	field: 'showSubmitButton',
	386	defaultValue: true,
	387	component: 'Switch',
f2ec2c	388	label: 'showSubmitButton',
L	389	colProps: { span: 24 },
	390	},
	391
	392	{
	393	field: 'd4',
	394	component: 'Divider',
	395	label: '操作按钮网格布局(actionColOptions)',
8284d1	396	colProps: { span: 24 },
L	397	componentProps: {
f2ec2c	398	orientation: 'center',
8284d1	399	},
L	400	},
dce3ab	401	{
f2ec2c	402	field: 'actionColOptions.span',
L	403	component: 'Slider',
	404	defaultValue: 24,
	405	label: 'span',
	406	colProps: { span: 24 },
	407	componentProps: { min: 0, max: 24 },
	408	},
	409	{
	410	field: 'd5',
dce3ab	411	component: 'Divider',
L	412	label: '其他事件',
	413	colProps: { span: 24 },
	414	componentProps: {
	415	orientation: 'center',
	416	},
	417	},
	418	{
	419	field: 'other',
	420	component: 'Input',
	421	label: '',
	422	colProps: { span: 24 },
	423	colSlot: 'other',
	424	},
8284d1	425	];
L	426
357510	427	const open = ref<boolean>(false);
X	428	const settingFormRef = ref();
	429	const [registerSetting] = useForm({
	430	size: 'small',
	431	schemas: formSchemas,
	432	compact: true,
	433	actionColOptions: { span: 24 },
	434	showActionButtonGroup: false,
2f6253	435	});
357510	436	const resetSettings = async () => {
X	437	setProps({ resetButtonOptions: { disabled: false, text: '重置' } });
	438	setProps({ submitButtonOptions: { disabled: false, loading: false } });
	439	await setFieldsValue({ field9: [] });
	440	await settingFormRef.value?.resetFields();
	441	};
	442	const handleSubmitSetting = async (values) => {
	443	console.log(values);
	444	await setProps(values);
	445	open.value = false;
	446	};
	447	const [register, { setProps, setFieldsValue, updateSchema }] = useForm({
	448	labelWidth: 120,
	449	schemas,
	450	actionColOptions: { span: 24 },
	451	fieldMapToTime: [['fieldTime', ['startTime', 'endTime'], 'YYYY-MM']],
	452	});
	453	async function handleLoad() {
	454	const promiseFn = function () {
	455	return new Promise((resolve) => {
	456	setTimeout(() => {
	457	resolve({
	458	field9: ['430000', '430100', '430102'],
	459	province: '湖南省',
	460	city: '长沙市',
	461	district: '岳麓区',
	462	});
	463	}, 1000);
	464	});
	465	};
	466	const item = await promiseFn();
	467	const { field9, province, city, district } = item as any;
	468	await updateSchema({
	469	field: 'field9',
	470	componentProps: {
	471	displayRenderArray: [province, city, district],
	472	},
	473	});
	474	await setFieldsValue({ field9 });
	475	open.value = false;
	476	}
	477	const showDrawer = () => {
	478	open.value = true;
	479	};
	480	const onSettings = () => {
	481	settingFormRef.value?.submit();
	482	};
	483	const withClose = (formProps: Partial<FormProps>) => {
	484	setProps(formProps);
	485	open.value = false;
	486	};
	487
	488	function handleSubmit(values) {
	489	console.log(values);
	490	}
2f6253	491	</script>