feat: add useVbenForm common config class
							parent
							
								
									bb72b91a1d
								
							
						
					
					
						commit
						3e6d9cb1cd
					
				|  | @ -63,7 +63,6 @@ export function useFormSchema(): VbenFormSchema[] { | ||||||
|       component: 'InputNumber', |       component: 'InputNumber', | ||||||
|       componentProps: { |       componentProps: { | ||||||
|         min: 0, |         min: 0, | ||||||
|         class: 'w-full', |  | ||||||
|         controlsPosition: 'right', |         controlsPosition: 'right', | ||||||
|         placeholder: '请输入分类排序', |         placeholder: '请输入分类排序', | ||||||
|       }, |       }, | ||||||
|  |  | ||||||
|  | @ -22,6 +22,13 @@ const getTitle = computed(() => { | ||||||
| }); | }); | ||||||
| 
 | 
 | ||||||
| const [Form, formApi] = useVbenForm({ | const [Form, formApi] = useVbenForm({ | ||||||
|  |   commonConfig: { | ||||||
|  |     componentProps: { | ||||||
|  |       class: 'w-full', | ||||||
|  |     }, | ||||||
|  |     formItemClass: 'col-span-2', | ||||||
|  |     labelWidth: 80, | ||||||
|  |   }, | ||||||
|   layout: 'horizontal', |   layout: 'horizontal', | ||||||
|   schema: useFormSchema(), |   schema: useFormSchema(), | ||||||
|   showDefaultActions: false, |   showDefaultActions: false, | ||||||
|  |  | ||||||
|  | @ -26,6 +26,13 @@ const getTitle = computed(() => { | ||||||
| }); | }); | ||||||
| 
 | 
 | ||||||
| const [Form, formApi] = useVbenForm({ | const [Form, formApi] = useVbenForm({ | ||||||
|  |   commonConfig: { | ||||||
|  |     componentProps: { | ||||||
|  |       class: 'w-full', | ||||||
|  |     }, | ||||||
|  |     formItemClass: 'col-span-2', | ||||||
|  |     labelWidth: 80, | ||||||
|  |   }, | ||||||
|   layout: 'horizontal', |   layout: 'horizontal', | ||||||
|   schema: useFormSchema(), |   schema: useFormSchema(), | ||||||
|   showDefaultActions: false, |   showDefaultActions: false, | ||||||
|  |  | ||||||
|  | @ -26,6 +26,13 @@ const getTitle = computed(() => { | ||||||
| }); | }); | ||||||
| 
 | 
 | ||||||
| const [Form, formApi] = useVbenForm({ | const [Form, formApi] = useVbenForm({ | ||||||
|  |   commonConfig: { | ||||||
|  |     componentProps: { | ||||||
|  |       class: 'w-full', | ||||||
|  |     }, | ||||||
|  |     formItemClass: 'col-span-2', | ||||||
|  |     labelWidth: 80, | ||||||
|  |   }, | ||||||
|   layout: 'horizontal', |   layout: 'horizontal', | ||||||
|   schema: useFormSchema(), |   schema: useFormSchema(), | ||||||
|   showDefaultActions: false, |   showDefaultActions: false, | ||||||
|  |  | ||||||
|  | @ -36,7 +36,6 @@ export function useFormSchema(): VbenFormSchema[] { | ||||||
|           }); |           }); | ||||||
|           return handleTree(data); |           return handleTree(data); | ||||||
|         }, |         }, | ||||||
|         class: 'w-full', |  | ||||||
|         labelField: 'name', |         labelField: 'name', | ||||||
|         valueField: 'id', |         valueField: 'id', | ||||||
|         childrenField: 'children', |         childrenField: 'children', | ||||||
|  |  | ||||||
|  | @ -31,6 +31,13 @@ const getTitle = computed(() => { | ||||||
| }); | }); | ||||||
| 
 | 
 | ||||||
| const [Form, formApi] = useVbenForm({ | const [Form, formApi] = useVbenForm({ | ||||||
|  |   commonConfig: { | ||||||
|  |     componentProps: { | ||||||
|  |       class: 'w-full', | ||||||
|  |     }, | ||||||
|  |     formItemClass: 'col-span-2', | ||||||
|  |     labelWidth: 80, | ||||||
|  |   }, | ||||||
|   layout: 'horizontal', |   layout: 'horizontal', | ||||||
|   schema: useFormSchema(), |   schema: useFormSchema(), | ||||||
|   showDefaultActions: false, |   showDefaultActions: false, | ||||||
|  |  | ||||||
|  | @ -26,6 +26,13 @@ const getTitle = computed(() => { | ||||||
| }); | }); | ||||||
| 
 | 
 | ||||||
| const [Form, formApi] = useVbenForm({ | const [Form, formApi] = useVbenForm({ | ||||||
|  |   commonConfig: { | ||||||
|  |     componentProps: { | ||||||
|  |       class: 'w-full', | ||||||
|  |     }, | ||||||
|  |     formItemClass: 'col-span-2', | ||||||
|  |     labelWidth: 80, | ||||||
|  |   }, | ||||||
|   layout: 'horizontal', |   layout: 'horizontal', | ||||||
|   schema: useDemo03CourseFormSchema(), |   schema: useDemo03CourseFormSchema(), | ||||||
|   showDefaultActions: false, |   showDefaultActions: false, | ||||||
|  |  | ||||||
|  | @ -26,6 +26,13 @@ const getTitle = computed(() => { | ||||||
| }); | }); | ||||||
| 
 | 
 | ||||||
| const [Form, formApi] = useVbenForm({ | const [Form, formApi] = useVbenForm({ | ||||||
|  |   commonConfig: { | ||||||
|  |     componentProps: { | ||||||
|  |       class: 'w-full', | ||||||
|  |     }, | ||||||
|  |     formItemClass: 'col-span-2', | ||||||
|  |     labelWidth: 80, | ||||||
|  |   }, | ||||||
|   layout: 'horizontal', |   layout: 'horizontal', | ||||||
|   schema: useDemo03GradeFormSchema(), |   schema: useDemo03GradeFormSchema(), | ||||||
|   showDefaultActions: false, |   showDefaultActions: false, | ||||||
|  |  | ||||||
|  | @ -26,6 +26,13 @@ const getTitle = computed(() => { | ||||||
| }); | }); | ||||||
| 
 | 
 | ||||||
| const [Form, formApi] = useVbenForm({ | const [Form, formApi] = useVbenForm({ | ||||||
|  |   commonConfig: { | ||||||
|  |     componentProps: { | ||||||
|  |       class: 'w-full', | ||||||
|  |     }, | ||||||
|  |     formItemClass: 'col-span-2', | ||||||
|  |     labelWidth: 80, | ||||||
|  |   }, | ||||||
|   layout: 'horizontal', |   layout: 'horizontal', | ||||||
|   schema: useFormSchema(), |   schema: useFormSchema(), | ||||||
|   showDefaultActions: false, |   showDefaultActions: false, | ||||||
|  |  | ||||||
|  | @ -33,6 +33,13 @@ const demo03CourseFormRef = ref<InstanceType<typeof Demo03CourseForm>>(); | ||||||
| const demo03GradeFormRef = ref<InstanceType<typeof Demo03GradeForm>>(); | const demo03GradeFormRef = ref<InstanceType<typeof Demo03GradeForm>>(); | ||||||
| 
 | 
 | ||||||
| const [Form, formApi] = useVbenForm({ | const [Form, formApi] = useVbenForm({ | ||||||
|  |   commonConfig: { | ||||||
|  |     componentProps: { | ||||||
|  |       class: 'w-full', | ||||||
|  |     }, | ||||||
|  |     formItemClass: 'col-span-2', | ||||||
|  |     labelWidth: 80, | ||||||
|  |   }, | ||||||
|   layout: 'horizontal', |   layout: 'horizontal', | ||||||
|   schema: useFormSchema(), |   schema: useFormSchema(), | ||||||
|   showDefaultActions: false, |   showDefaultActions: false, | ||||||
|  |  | ||||||
|  | @ -33,6 +33,13 @@ const demo03CourseFormRef = ref<InstanceType<typeof Demo03CourseForm>>(); | ||||||
| const demo03GradeFormRef = ref<InstanceType<typeof Demo03GradeForm>>(); | const demo03GradeFormRef = ref<InstanceType<typeof Demo03GradeForm>>(); | ||||||
| 
 | 
 | ||||||
| const [Form, formApi] = useVbenForm({ | const [Form, formApi] = useVbenForm({ | ||||||
|  |   commonConfig: { | ||||||
|  |     componentProps: { | ||||||
|  |       class: 'w-full', | ||||||
|  |     }, | ||||||
|  |     formItemClass: 'col-span-2', | ||||||
|  |     labelWidth: 80, | ||||||
|  |   }, | ||||||
|   layout: 'horizontal', |   layout: 'horizontal', | ||||||
|   schema: useFormSchema(), |   schema: useFormSchema(), | ||||||
|   showDefaultActions: false, |   showDefaultActions: false, | ||||||
|  |  | ||||||
|  | @ -14,12 +14,17 @@ import { useFormSchema } from '../data'; | ||||||
| const emit = defineEmits(['success']); | const emit = defineEmits(['success']); | ||||||
| 
 | 
 | ||||||
| const [Form, formApi] = useVbenForm({ | const [Form, formApi] = useVbenForm({ | ||||||
|  |   commonConfig: { | ||||||
|  |     componentProps: { | ||||||
|  |       class: 'w-full', | ||||||
|  |     }, | ||||||
|  |     formItemClass: 'col-span-2', | ||||||
|  |     labelWidth: 80, | ||||||
|  |     hideLabel: true, | ||||||
|  |   }, | ||||||
|   layout: 'horizontal', |   layout: 'horizontal', | ||||||
|   schema: useFormSchema().map((item) => ({ ...item, label: '' })), // 去除label |   schema: useFormSchema().map((item) => ({ ...item, label: '' })), // 去除label | ||||||
|   showDefaultActions: false, |   showDefaultActions: false, | ||||||
|   commonConfig: { |  | ||||||
|     hideLabel: true, |  | ||||||
|   }, |  | ||||||
| }); | }); | ||||||
| 
 | 
 | ||||||
| const [Modal, modalApi] = useVbenModal({ | const [Modal, modalApi] = useVbenModal({ | ||||||
|  |  | ||||||
|  | @ -36,7 +36,6 @@ export function useFormSchema(): VbenFormSchema[] { | ||||||
|       componentProps: { |       componentProps: { | ||||||
|         options: getDictOptions(DICT_TYPE.INFRA_FILE_STORAGE, 'number'), |         options: getDictOptions(DICT_TYPE.INFRA_FILE_STORAGE, 'number'), | ||||||
|         placeholder: '请选择存储器', |         placeholder: '请选择存储器', | ||||||
|         class: 'w-full', |  | ||||||
|       }, |       }, | ||||||
|       rules: 'required', |       rules: 'required', | ||||||
|       dependencies: { |       dependencies: { | ||||||
|  | @ -87,7 +86,6 @@ export function useFormSchema(): VbenFormSchema[] { | ||||||
|       component: 'InputNumber', |       component: 'InputNumber', | ||||||
|       componentProps: { |       componentProps: { | ||||||
|         min: 0, |         min: 0, | ||||||
|         class: 'w-full', |  | ||||||
|         controlsPosition: 'right', |         controlsPosition: 'right', | ||||||
|         placeholder: '请输入主机端口', |         placeholder: '请输入主机端口', | ||||||
|       }, |       }, | ||||||
|  |  | ||||||
|  | @ -27,7 +27,11 @@ const getTitle = computed(() => { | ||||||
| 
 | 
 | ||||||
| const [Form, formApi] = useVbenForm({ | const [Form, formApi] = useVbenForm({ | ||||||
|   commonConfig: { |   commonConfig: { | ||||||
|     labelWidth: 120, |     componentProps: { | ||||||
|  |       class: 'w-full', | ||||||
|  |     }, | ||||||
|  |     formItemClass: 'col-span-2', | ||||||
|  |     labelWidth: 80, | ||||||
|   }, |   }, | ||||||
|   layout: 'horizontal', |   layout: 'horizontal', | ||||||
|   schema: useFormSchema(), |   schema: useFormSchema(), | ||||||
|  |  | ||||||
|  | @ -65,7 +65,6 @@ export function useFormSchema(): VbenFormSchema[] { | ||||||
|       componentProps: { |       componentProps: { | ||||||
|         placeholder: '请输入重试次数。设置为 0 时,不进行重试', |         placeholder: '请输入重试次数。设置为 0 时,不进行重试', | ||||||
|         min: 0, |         min: 0, | ||||||
|         class: 'w-full', |  | ||||||
|       }, |       }, | ||||||
|       rules: 'required', |       rules: 'required', | ||||||
|     }, |     }, | ||||||
|  | @ -76,7 +75,6 @@ export function useFormSchema(): VbenFormSchema[] { | ||||||
|       componentProps: { |       componentProps: { | ||||||
|         placeholder: '请输入重试间隔,单位:毫秒。设置为 0 时,无需间隔', |         placeholder: '请输入重试间隔,单位:毫秒。设置为 0 时,无需间隔', | ||||||
|         min: 0, |         min: 0, | ||||||
|         class: 'w-full', |  | ||||||
|       }, |       }, | ||||||
|       rules: 'required', |       rules: 'required', | ||||||
|     }, |     }, | ||||||
|  | @ -87,7 +85,6 @@ export function useFormSchema(): VbenFormSchema[] { | ||||||
|       componentProps: { |       componentProps: { | ||||||
|         placeholder: '请输入监控超时时间,单位:毫秒', |         placeholder: '请输入监控超时时间,单位:毫秒', | ||||||
|         min: 0, |         min: 0, | ||||||
|         class: 'w-full', |  | ||||||
|       }, |       }, | ||||||
|     }, |     }, | ||||||
|   ]; |   ]; | ||||||
|  |  | ||||||
|  | @ -22,12 +22,16 @@ const getTitle = computed(() => { | ||||||
| }); | }); | ||||||
| 
 | 
 | ||||||
| const [Form, formApi] = useVbenForm({ | const [Form, formApi] = useVbenForm({ | ||||||
|  |   commonConfig: { | ||||||
|  |     componentProps: { | ||||||
|  |       class: 'w-full', | ||||||
|  |     }, | ||||||
|  |     formItemClass: 'col-span-2', | ||||||
|  |     labelWidth: 80, | ||||||
|  |   }, | ||||||
|   layout: 'horizontal', |   layout: 'horizontal', | ||||||
|   schema: useFormSchema(), |   schema: useFormSchema(), | ||||||
|   showDefaultActions: false, |   showDefaultActions: false, | ||||||
|   commonConfig: { |  | ||||||
|     labelWidth: 140, |  | ||||||
|   }, |  | ||||||
| }); | }); | ||||||
| 
 | 
 | ||||||
| const [Modal, modalApi] = useVbenModal({ | const [Modal, modalApi] = useVbenModal({ | ||||||
|  |  | ||||||
|  | @ -204,7 +204,6 @@ export function useDataFormSchema(): VbenFormSchema[] { | ||||||
|         return { |         return { | ||||||
|           api: getSimpleDictTypeList, |           api: getSimpleDictTypeList, | ||||||
|           placeholder: '请输入字典类型', |           placeholder: '请输入字典类型', | ||||||
|           class: 'w-full', |  | ||||||
|           labelField: 'name', |           labelField: 'name', | ||||||
|           valueField: 'type', |           valueField: 'type', | ||||||
|           disabled: !!values.id, |           disabled: !!values.id, | ||||||
|  |  | ||||||
|  | @ -166,7 +166,6 @@ export function useFormSchema(): VbenFormSchema[] { | ||||||
|       component: 'AutoComplete', |       component: 'AutoComplete', | ||||||
|       componentProps: { |       componentProps: { | ||||||
|         allowClear: true, |         allowClear: true, | ||||||
|         class: 'w-full', |  | ||||||
|         filterOption(input: string, option: { value: string }) { |         filterOption(input: string, option: { value: string }) { | ||||||
|           return option.value.toLowerCase().includes(input.toLowerCase()); |           return option.value.toLowerCase().includes(input.toLowerCase()); | ||||||
|         }, |         }, | ||||||
|  |  | ||||||
|  | @ -200,7 +200,6 @@ export function useSendNotifyFormSchema(): VbenFormSchema[] { | ||||||
|       component: 'ApiSelect', |       component: 'ApiSelect', | ||||||
|       componentProps: { |       componentProps: { | ||||||
|         api: getSimpleUserList, |         api: getSimpleUserList, | ||||||
|         class: 'w-full', |  | ||||||
|         labelField: 'nickname', |         labelField: 'nickname', | ||||||
|         valueField: 'id', |         valueField: 'id', | ||||||
|         placeholder: '请选择接收人', |         placeholder: '请选择接收人', | ||||||
|  |  | ||||||
|  | @ -26,6 +26,8 @@ const [Form, formApi] = useVbenForm({ | ||||||
|     componentProps: { |     componentProps: { | ||||||
|       class: 'w-full', |       class: 'w-full', | ||||||
|     }, |     }, | ||||||
|  |     formItemClass: 'col-span-2', | ||||||
|  |     labelWidth: 80, | ||||||
|   }, |   }, | ||||||
|   layout: 'horizontal', |   layout: 'horizontal', | ||||||
|   schema: useFormSchema(), |   schema: useFormSchema(), | ||||||
|  |  | ||||||
		Loading…
	
		Reference in New Issue
	
	 xingyu4j
						xingyu4j