Commit 9245f97ab6c80e128074c41c8de335c1144ea938

Authored by xp.Huang
2 parents bbe54b31 3cd22ec9

Merge branch 'perf/things-model-form' into 'main_dev'

perf: 优化物模型表单暴露方法

See merge request yunteng/thingskit-front!1176
@@ -128,6 +128,7 @@ export const getFormSchemas = ({ @@ -128,6 +128,7 @@ export const getFormSchemas = ({
128 label: functionName!, 128 label: functionName!,
129 component: 'Input', 129 component: 'Input',
130 changeEvent: 'update:value', 130 changeEvent: 'update:value',
  131 + rules: [{ required: required, validator: () => Promise.resolve() }],
131 componentProps: () => { 132 componentProps: () => {
132 return { 133 return {
133 inputData: dataType?.specs || [], 134 inputData: dataType?.specs || [],
1 <script setup lang="ts"> 1 <script setup lang="ts">
  2 + import {
  3 + ComponentPublicInstance,
  4 + computed,
  5 + nextTick,
  6 + reactive,
  7 + ref,
  8 + toRaw,
  9 + unref,
  10 + watch,
  11 + } from 'vue';
2 import { Card } from 'ant-design-vue'; 12 import { Card } from 'ant-design-vue';
3 - import { ComponentPublicInstance, computed, nextTick, reactive, unref, watch } from 'vue';  
4 import { getFormSchemas } from './config'; 13 import { getFormSchemas } from './config';
5 import { ThingsModelForm } from '.'; 14 import { ThingsModelForm } from '.';
6 - import { DefineComponentsBasicExpose } from '/#/utils';  
7 import { StructJSON } from '/@/api/device/model/modelOfMatterModel'; 15 import { StructJSON } from '/@/api/device/model/modelOfMatterModel';
8 import { useForm } from '../../hooks/useForm'; 16 import { useForm } from '../../hooks/useForm';
9 import { DataTypeEnum } from '/@/enums/objectModelEnum'; 17 import { DataTypeEnum } from '/@/enums/objectModelEnum';
10 - import { BasicForm } from '/@/components/Form';  
11 -  
12 - const props = withDefaults(  
13 - defineProps<{  
14 - value?: Recordable;  
15 - inputData?: StructJSON[];  
16 - required?: boolean;  
17 - title?: string;  
18 - transportType?: string;  
19 - disabled?: boolean;  
20 - identifier?: string;  
21 - }>(),  
22 - {  
23 - inputData: () => [],  
24 - required: true,  
25 - }  
26 - ); 18 + import { BasicForm, FormProps } from '/@/components/Form';
  19 + import { deepMerge } from '/@/utils';
  20 +
  21 + interface ThingsModelFormPropsType {
  22 + value?: Recordable;
  23 + inputData?: StructJSON[];
  24 + required?: boolean;
  25 + title?: string;
  26 + transportType?: string;
  27 + disabled?: boolean;
  28 + identifier?: string;
  29 + formProps?: FormProps;
  30 + }
  31 +
  32 + const props = withDefaults(defineProps<ThingsModelFormPropsType>(), {
  33 + inputData: () => [],
  34 + required: true,
  35 + formProps: () => ({}),
  36 + });
27 37
28 const thingsModelFormListElMap = reactive< 38 const thingsModelFormListElMap = reactive<
29 Record<string, { el: InstanceType<typeof ThingsModelForm>; structJSON: StructJSON }> 39 Record<string, { el: InstanceType<typeof ThingsModelForm>; structJSON: StructJSON }>
30 >({}); 40 >({});
31 41
  42 + const propsRef = ref<Partial<ThingsModelFormPropsType>>({});
  43 +
  44 + const getProps = computed<ThingsModelFormPropsType>(
  45 + () => ({ ...props, ...unref(propsRef) } as ThingsModelFormPropsType)
  46 + );
  47 +
32 const [register, formActionType] = useForm({ 48 const [register, formActionType] = useForm({
33 - schemas: getFormSchemas({  
34 - structJSON: props.inputData || [],  
35 - required: props.required,  
36 - transportType: props.transportType,  
37 - }),  
38 - showActionButtonGroup: false,  
39 layout: 'inline', 49 layout: 'inline',
40 labelWidth: 100, 50 labelWidth: 100,
  51 + ...toRaw(unref(getProps)),
  52 + schemas: getFormSchemasByProps(),
  53 + showActionButtonGroup: false,
41 }); 54 });
42 55
43 const getStructFormItem = computed(() => { 56 const getStructFormItem = computed(() => {
44 - const { inputData } = props;  
45 - return inputData.filter((item) => item.dataType?.type === DataTypeEnum.STRUCT); 57 + const { inputData } = unref(getProps);
  58 + return (inputData || []).filter((item) => item.dataType?.type === DataTypeEnum.STRUCT);
46 }); 59 });
47 60
48 const setFormElRef = ( 61 const setFormElRef = (
@@ -87,7 +100,7 @@ @@ -87,7 +100,7 @@
87 }; 100 };
88 101
89 watch( 102 watch(
90 - () => props.value, 103 + () => unref(getProps).value,
91 async (value) => { 104 async (value) => {
92 await nextTick(); 105 await nextTick();
93 formActionType.resetFields(); 106 formActionType.resetFields();
@@ -97,30 +110,36 @@ @@ -97,30 +110,36 @@
97 ); 110 );
98 111
99 watch( 112 watch(
100 - () => [props.inputData, props.identifier], 113 + () => [unref(getProps).inputData, unref(getProps).identifier],
101 (value) => { 114 (value) => {
102 - if (value && value.length) {  
103 - const schemas = getFormSchemas({  
104 - structJSON: props.inputData || [],  
105 - required: props.required,  
106 - transportType: props.transportType,  
107 - });  
108 - formActionType.setProps({ schemas });  
109 - } 115 + if (value && value.length) formActionType.setProps({ schemas: getFormSchemasByProps() });
110 } 116 }
111 ); 117 );
112 118
113 watch( 119 watch(
114 - () => props.disabled, 120 + () => unref(getProps).disabled,
115 (value) => { 121 (value) => {
116 formActionType.setProps({ disabled: value }); 122 formActionType.setProps({ disabled: value });
117 } 123 }
118 ); 124 );
119 125
120 - defineExpose<DefineComponentsBasicExpose>({ 126 + function getFormSchemasByProps() {
  127 + return getFormSchemas({
  128 + structJSON: unref(getProps).inputData || [],
  129 + required: unref(getProps).required,
  130 + transportType: unref(getProps).transportType,
  131 + });
  132 + }
  133 +
  134 + function setProps(props: Partial<ThingsModelFormPropsType>) {
  135 + propsRef.value = deepMerge(unref(propsRef) || {}, props);
  136 + }
  137 +
  138 + defineExpose({
121 getFieldsValue, 139 getFieldsValue,
122 setFieldsValue, 140 setFieldsValue,
123 validate, 141 validate,
  142 + setProps,
124 }); 143 });
125 </script> 144 </script>
126 145
@@ -155,6 +174,10 @@ @@ -155,6 +174,10 @@
155 width: 100%; 174 width: 100%;
156 } 175 }
157 176
  177 + :deep(.ant-col.ant-form-item-control) {
  178 + min-height: auto;
  179 + }
  180 +
158 :deep(.ant-input-number) { 181 :deep(.ant-input-number) {
159 width: 100%; 182 width: 100%;
160 } 183 }