Commit 8f44c3e6bed52bb190b0326b5a49c28606172e92
Merge branch 'perf/linkedage-enum-type' into 'main_dev'
perf: 优化场景联动枚举类型选择 See merge request yunteng/thingskit-front!1180
Showing
4 changed files
with
71 additions
and
11 deletions
1 | +import { toRaw, unref } from 'vue'; | ||
1 | import { OperationType } from './type'; | 2 | import { OperationType } from './type'; |
3 | +import { DeviceModelOfMatterAttrs } from '/@/api/device/model/deviceModel'; | ||
2 | import { FormSchema } from '/@/components/Form'; | 4 | import { FormSchema } from '/@/components/Form'; |
3 | import { | 5 | import { |
4 | BooleanOperationEnum, | 6 | BooleanOperationEnum, |
@@ -11,6 +13,7 @@ import { | @@ -11,6 +13,7 @@ import { | ||
11 | StringOperationNameEnum, | 13 | StringOperationNameEnum, |
12 | TriggerValueTypeEnum, | 14 | TriggerValueTypeEnum, |
13 | } from '/@/enums/linkedgeEnum'; | 15 | } from '/@/enums/linkedgeEnum'; |
16 | +import { DataTypeEnum } from '/@/enums/objectModelEnum'; | ||
14 | 17 | ||
15 | export enum FormFieldsEnum { | 18 | export enum FormFieldsEnum { |
16 | CONDITION_OPERATION = 'operation', | 19 | CONDITION_OPERATION = 'operation', |
@@ -26,6 +29,7 @@ export enum FormFieldsNameEnum { | @@ -26,6 +29,7 @@ export enum FormFieldsNameEnum { | ||
26 | 29 | ||
27 | interface GetFormSchemasParamsType { | 30 | interface GetFormSchemasParamsType { |
28 | triggerType: TriggerValueTypeEnum; | 31 | triggerType: TriggerValueTypeEnum; |
32 | + objectModel?: DeviceModelOfMatterAttrs; | ||
29 | } | 33 | } |
30 | 34 | ||
31 | export interface ConditionFormRecordType { | 35 | export interface ConditionFormRecordType { |
@@ -58,7 +62,10 @@ const getOperation = (type: TriggerValueTypeEnum) => { | @@ -58,7 +62,10 @@ const getOperation = (type: TriggerValueTypeEnum) => { | ||
58 | return Object.keys(value).map((value) => ({ label: label[value], value })); | 62 | return Object.keys(value).map((value) => ({ label: label[value], value })); |
59 | }; | 63 | }; |
60 | 64 | ||
61 | -const getOperationValueFormSchemas = (triggerType: TriggerValueTypeEnum): FormSchema[] => { | 65 | +const getOperationValueFormSchemas = ({ |
66 | + triggerType, | ||
67 | + objectModel, | ||
68 | +}: GetFormSchemasParamsType): FormSchema[] => { | ||
62 | const getNumberSchemas = (): FormSchema[] => { | 69 | const getNumberSchemas = (): FormSchema[] => { |
63 | return [ | 70 | return [ |
64 | { | 71 | { |
@@ -139,17 +146,43 @@ const getOperationValueFormSchemas = (triggerType: TriggerValueTypeEnum): FormSc | @@ -139,17 +146,43 @@ const getOperationValueFormSchemas = (triggerType: TriggerValueTypeEnum): FormSc | ||
139 | ]; | 146 | ]; |
140 | }; | 147 | }; |
141 | 148 | ||
149 | + const getEnumsSchemas = (): FormSchema[] => { | ||
150 | + return [ | ||
151 | + { | ||
152 | + field: FormFieldsEnum.CONDITION_VALUE, | ||
153 | + label: FormFieldsNameEnum.CONDITION_VALUE, | ||
154 | + component: 'Select', | ||
155 | + required: true, | ||
156 | + componentProps: () => { | ||
157 | + return { | ||
158 | + options: toRaw(unref(objectModel?.detail?.dataType?.specsList))?.map((item) => ({ | ||
159 | + label: item.name, | ||
160 | + value: item.value, | ||
161 | + })), | ||
162 | + placeholder: `请输入${FormFieldsNameEnum.CONDITION_VALUE}`, | ||
163 | + }; | ||
164 | + }, | ||
165 | + }, | ||
166 | + ]; | ||
167 | + }; | ||
168 | + | ||
142 | const schemasMap = { | 169 | const schemasMap = { |
143 | [TriggerValueTypeEnum.BOOLEAN]: getBoolSchemas, | 170 | [TriggerValueTypeEnum.BOOLEAN]: getBoolSchemas, |
144 | [TriggerValueTypeEnum.DATE_TIME]: getDateSchemas, | 171 | [TriggerValueTypeEnum.DATE_TIME]: getDateSchemas, |
145 | - [TriggerValueTypeEnum.NUMERIC]: getNumberSchemas, | 172 | + [TriggerValueTypeEnum.NUMERIC]: |
173 | + objectModel?.detail?.dataType?.type === DataTypeEnum.ENUM | ||
174 | + ? getEnumsSchemas | ||
175 | + : getNumberSchemas, | ||
146 | [TriggerValueTypeEnum.STRING]: getStringSchemas, | 176 | [TriggerValueTypeEnum.STRING]: getStringSchemas, |
147 | }; | 177 | }; |
148 | 178 | ||
149 | return schemasMap[triggerType]?.() || []; | 179 | return schemasMap[triggerType]?.() || []; |
150 | }; | 180 | }; |
151 | 181 | ||
152 | -export const getFormSchemas = ({ triggerType }: GetFormSchemasParamsType): FormSchema[] => { | 182 | +export const getFormSchemas = ({ |
183 | + triggerType, | ||
184 | + objectModel, | ||
185 | +}: GetFormSchemasParamsType): FormSchema[] => { | ||
153 | return [ | 186 | return [ |
154 | { | 187 | { |
155 | field: FormFieldsEnum.CONDITION_OPERATION, | 188 | field: FormFieldsEnum.CONDITION_OPERATION, |
@@ -163,6 +196,6 @@ export const getFormSchemas = ({ triggerType }: GetFormSchemasParamsType): FormS | @@ -163,6 +196,6 @@ export const getFormSchemas = ({ triggerType }: GetFormSchemasParamsType): FormS | ||
163 | }; | 196 | }; |
164 | }, | 197 | }, |
165 | }, | 198 | }, |
166 | - ...getOperationValueFormSchemas(triggerType), | 199 | + ...getOperationValueFormSchemas({ triggerType, objectModel }), |
167 | ]; | 200 | ]; |
168 | }; | 201 | }; |
1 | -<script setup lang="ts"> | 1 | +x<script setup lang="ts"> |
2 | import { ComponentPublicInstance, computed, ref, unref, watch } from 'vue'; | 2 | import { ComponentPublicInstance, computed, ref, unref, watch } from 'vue'; |
3 | import { Card, Tag, Button, Tooltip } from 'ant-design-vue'; | 3 | import { Card, Tag, Button, Tooltip } from 'ant-design-vue'; |
4 | import { Icon } from '/@/components/Icon'; | 4 | import { Icon } from '/@/components/Icon'; |
@@ -24,8 +24,8 @@ | @@ -24,8 +24,8 @@ | ||
24 | }); | 24 | }); |
25 | 25 | ||
26 | const getSchemas = computed(() => { | 26 | const getSchemas = computed(() => { |
27 | - const { triggerType } = props; | ||
28 | - return getFormSchemas({ triggerType }); | 27 | + const { triggerType, objectModel } = props; |
28 | + return getFormSchemas({ triggerType, objectModel }); | ||
29 | }); | 29 | }); |
30 | 30 | ||
31 | const conditionListElRef = ref<ConditionListItemType[]>([getNewConditionFilterItem()]); | 31 | const conditionListElRef = ref<ConditionListItemType[]>([getNewConditionFilterItem()]); |
@@ -40,8 +40,8 @@ | @@ -40,8 +40,8 @@ | ||
40 | 40 | ||
41 | const handleConditionFormValueChange = () => { | 41 | const handleConditionFormValueChange = () => { |
42 | const condition = getConditionFormValues(); | 42 | const condition = getConditionFormValues(); |
43 | - const { triggerType } = props; | ||
44 | - const message = useConditionFilterMessage({ triggerType, condition }); | 43 | + const { triggerType, objectModel } = props; |
44 | + const message = useConditionFilterMessage({ triggerType, condition, objectModel }); | ||
45 | conditionMessageList.value = message; | 45 | conditionMessageList.value = message; |
46 | }; | 46 | }; |
47 | 47 | ||
@@ -84,6 +84,13 @@ | @@ -84,6 +84,13 @@ | ||
84 | await validate?.(); | 84 | await validate?.(); |
85 | }; | 85 | }; |
86 | 86 | ||
87 | + watch( | ||
88 | + () => props.objectModel, | ||
89 | + () => { | ||
90 | + handleConditionFormValueChange(); | ||
91 | + } | ||
92 | + ); | ||
93 | + | ||
87 | defineExpose({ getFieldsValue, setFieldsValue, validate }); | 94 | defineExpose({ getFieldsValue, setFieldsValue, validate }); |
88 | </script> | 95 | </script> |
89 | 96 |
1 | import { FormFieldsEnum, getOperationMap } from './config'; | 1 | import { FormFieldsEnum, getOperationMap } from './config'; |
2 | +import { DeviceModelOfMatterAttrs } from '/@/api/device/model/deviceModel'; | ||
2 | import { | 3 | import { |
3 | BooleanOperationValueEnum, | 4 | BooleanOperationValueEnum, |
4 | BooleanOperationValueNameEnum, | 5 | BooleanOperationValueNameEnum, |
5 | TriggerValueTypeEnum, | 6 | TriggerValueTypeEnum, |
6 | } from '/@/enums/linkedgeEnum'; | 7 | } from '/@/enums/linkedgeEnum'; |
8 | +import { DataTypeEnum } from '/@/enums/objectModelEnum'; | ||
9 | +import { isNullOrUnDef } from '/@/utils/is'; | ||
7 | 10 | ||
8 | export type ConditionMessageItemType = Record< | 11 | export type ConditionMessageItemType = Record< |
9 | Exclude<FormFieldsEnum, FormFieldsEnum.CONDITION_VALUE_IGNORE_CASE>, | 12 | Exclude<FormFieldsEnum, FormFieldsEnum.CONDITION_VALUE_IGNORE_CASE>, |
@@ -13,24 +16,39 @@ export type ConditionMessageItemType = Record< | @@ -13,24 +16,39 @@ export type ConditionMessageItemType = Record< | ||
13 | interface UseConditionFilterMessageParamsType { | 16 | interface UseConditionFilterMessageParamsType { |
14 | triggerType: TriggerValueTypeEnum; | 17 | triggerType: TriggerValueTypeEnum; |
15 | condition: ConditionMessageItemType[]; | 18 | condition: ConditionMessageItemType[]; |
19 | + objectModel?: DeviceModelOfMatterAttrs; | ||
16 | } | 20 | } |
17 | 21 | ||
18 | export function useConditionFilterMessage({ | 22 | export function useConditionFilterMessage({ |
19 | triggerType, | 23 | triggerType, |
20 | condition, | 24 | condition, |
25 | + objectModel, | ||
21 | }: UseConditionFilterMessageParamsType) { | 26 | }: UseConditionFilterMessageParamsType) { |
22 | const { label } = getOperationMap(triggerType); | 27 | const { label } = getOperationMap(triggerType); |
23 | const list: ConditionMessageItemType[] = []; | 28 | const list: ConditionMessageItemType[] = []; |
29 | + | ||
30 | + const isEnumsType = objectModel?.detail.dataType?.type === DataTypeEnum.ENUM; | ||
31 | + | ||
32 | + const enumsMap: Recordable = {}; | ||
33 | + if (isEnumsType) { | ||
34 | + const maps = objectModel.detail.dataType?.specsList?.reduce( | ||
35 | + (prev, next) => ({ ...prev, [next.value!]: next.name }), | ||
36 | + {} | ||
37 | + ); | ||
38 | + maps && Object.assign(enumsMap, maps); | ||
39 | + } | ||
40 | + | ||
24 | for (const item of condition) { | 41 | for (const item of condition) { |
25 | let { defaultValue, operation } = item; | 42 | let { defaultValue, operation } = item; |
26 | - if (!defaultValue || !operation) continue; | 43 | + if (isNullOrUnDef(defaultValue) || isNullOrUnDef(operation)) continue; |
27 | operation = label[operation]; | 44 | operation = label[operation]; |
28 | if (triggerType === TriggerValueTypeEnum.BOOLEAN) | 45 | if (triggerType === TriggerValueTypeEnum.BOOLEAN) |
29 | defaultValue = | 46 | defaultValue = |
30 | defaultValue === BooleanOperationValueEnum.TRUE | 47 | defaultValue === BooleanOperationValueEnum.TRUE |
31 | ? BooleanOperationValueNameEnum.TRUE | 48 | ? BooleanOperationValueNameEnum.TRUE |
32 | : BooleanOperationValueNameEnum.FALSE; | 49 | : BooleanOperationValueNameEnum.FALSE; |
33 | - list.push({ operation, defaultValue }); | 50 | + |
51 | + list.push({ operation, defaultValue: isEnumsType ? enumsMap[defaultValue] : defaultValue }); | ||
34 | } | 52 | } |
35 | return list; | 53 | return list; |
36 | } | 54 | } |
@@ -77,6 +77,7 @@ function getTriggerValueTypeByThingsModelType(type: DataTypeEnum) { | @@ -77,6 +77,7 @@ function getTriggerValueTypeByThingsModelType(type: DataTypeEnum) { | ||
77 | [DataTypeEnum.NUMBER_INT]: TriggerValueTypeEnum.NUMERIC, | 77 | [DataTypeEnum.NUMBER_INT]: TriggerValueTypeEnum.NUMERIC, |
78 | [DataTypeEnum.STRING]: TriggerValueTypeEnum.STRING, | 78 | [DataTypeEnum.STRING]: TriggerValueTypeEnum.STRING, |
79 | [DataTypeEnum.STRUCT]: TriggerValueTypeEnum.STRING, | 79 | [DataTypeEnum.STRUCT]: TriggerValueTypeEnum.STRING, |
80 | + [DataTypeEnum.ENUM]: TriggerValueTypeEnum.NUMERIC, | ||
80 | }; | 81 | }; |
81 | 82 | ||
82 | return map[type]; | 83 | return map[type]; |
@@ -419,6 +420,7 @@ export const getFormSchemas = ( | @@ -419,6 +420,7 @@ export const getFormSchemas = ( | ||
419 | colProps: { span: 24, xxl: 24, xl: 24, lg: 24, md: 24, sm: 24, xs: 24 }, | 420 | colProps: { span: 24, xxl: 24, xl: 24, lg: 24, md: 24, sm: 24, xs: 24 }, |
420 | ifShow: ({ model }) => | 421 | ifShow: ({ model }) => |
421 | model[FormFieldEnum.CONDITION_TYPE] === DeviceTriggerTypeEum.TIME_SERIES && | 422 | model[FormFieldEnum.CONDITION_TYPE] === DeviceTriggerTypeEum.TIME_SERIES && |
423 | + // model[FormFieldEnum.CONDITION_KEY_DETAIL] && | ||
422 | model[FormFieldEnum.CONDITION_KEY] && | 424 | model[FormFieldEnum.CONDITION_KEY] && |
423 | model[FormFieldEnum.CONDITION_VALUE_TYPE], | 425 | model[FormFieldEnum.CONDITION_VALUE_TYPE], |
424 | colSlot: 'conditionFilter', | 426 | colSlot: 'conditionFilter', |