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', |