1
|
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
|
12
|
import { Card } from 'ant-design-vue';
|
3
|
|
- import { ComponentPublicInstance, computed, nextTick, reactive, unref, watch } from 'vue';
|
4
|
13
|
import { getFormSchemas } from './config';
|
5
|
14
|
import { ThingsModelForm } from '.';
|
6
|
|
- import { DefineComponentsBasicExpose } from '/#/utils';
|
7
|
15
|
import { StructJSON } from '/@/api/device/model/modelOfMatterModel';
|
8
|
16
|
import { useForm } from '../../hooks/useForm';
|
9
|
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
|
38
|
const thingsModelFormListElMap = reactive<
|
29
|
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
|
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
|
49
|
layout: 'inline',
|
40
|
50
|
labelWidth: 100,
|
|
51
|
+ ...toRaw(unref(getProps)),
|
|
52
|
+ schemas: getFormSchemasByProps(),
|
|
53
|
+ showActionButtonGroup: false,
|
41
|
54
|
});
|
42
|
55
|
|
43
|
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
|
61
|
const setFormElRef = (
|
...
|
...
|
@@ -87,7 +100,7 @@ |
87
|
100
|
};
|
88
|
101
|
|
89
|
102
|
watch(
|
90
|
|
- () => props.value,
|
|
103
|
+ () => unref(getProps).value,
|
91
|
104
|
async (value) => {
|
92
|
105
|
await nextTick();
|
93
|
106
|
formActionType.resetFields();
|
...
|
...
|
@@ -97,30 +110,36 @@ |
97
|
110
|
);
|
98
|
111
|
|
99
|
112
|
watch(
|
100
|
|
- () => [props.inputData, props.identifier],
|
|
113
|
+ () => [unref(getProps).inputData, unref(getProps).identifier],
|
101
|
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
|
119
|
watch(
|
114
|
|
- () => props.disabled,
|
|
120
|
+ () => unref(getProps).disabled,
|
115
|
121
|
(value) => {
|
116
|
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
|
139
|
getFieldsValue,
|
122
|
140
|
setFieldsValue,
|
123
|
141
|
validate,
|
|
142
|
+ setProps,
|
124
|
143
|
});
|
125
|
144
|
</script>
|
126
|
145
|
|
...
|
...
|
@@ -155,6 +174,10 @@ |
155
|
174
|
width: 100%;
|
156
|
175
|
}
|
157
|
176
|
|
|
177
|
+ :deep(.ant-col.ant-form-item-control) {
|
|
178
|
+ min-height: auto;
|
|
179
|
+ }
|
|
180
|
+
|
158
|
181
|
:deep(.ant-input-number) {
|
159
|
182
|
width: 100%;
|
160
|
183
|
}
|
...
|
...
|
|