Merge branch 'feat/object-model-enums-type' into 'main_dev'

feat: 物模型新增枚举类型

See merge request yunteng/thingskit-front!1133

@@ -7,6 +7,9 @@ export interface Specs {
   unit: string;
   unitName: string;
 
+  dataType?: string;
+  name?: string;
+  value?: string;
   step: string;
   length: string;
   boolOpen: string;
@@ -20,6 +23,7 @@ export interface Specs {
 export interface DataType {
   type: DataTypeEnum;
   specs?: Partial<Specs> | StructJSON[];
+  specsList?: Specs[];
 }
 
 export interface StructJSON {

@@ -42,6 +42,7 @@ import InputGroup from './components/InputGroup.vue';
 import RegisterAddressInput from '/@/views/task/center/components/PollCommandInput/RegisterAddressInput.vue';
 import ExtendDesc from '/@/components/Form/src/externalCompns/components/ExtendDesc/index.vue';
 import DeviceProfileForm from '/@/components/Form/src/externalCompns/components/DeviceProfileForm/index.vue';
+import EnumList from './externalCompns/components/StructForm/EnumList.vue';
 
 const componentMap = new Map<ComponentType, Component>();
 
@@ -90,6 +91,7 @@ componentMap.set('ApiSelectScrollLoad', ApiSelectScrollLoad);
 componentMap.set('InputGroup', InputGroup);
 componentMap.set('RegisterAddressInput', RegisterAddressInput);
 componentMap.set('ExtendDesc', ExtendDesc);
+componentMap.set('EnumList', EnumList);
 componentMap.set('DeviceProfileForm', DeviceProfileForm);
 
 export function add(compName: ComponentType, component: Component) {

+import { FormSchema } from '/@/components/Table';
+
+export enum FormFieldsEnum {
+  VALUE = 'value',
+  NAME = 'name',
+  DATA_TYPE = 'dataType',
+}
+
+export const getFormSchemas = (): FormSchema[] => {
+  return [
+    {
+      field: FormFieldsEnum.VALUE,
+      label: '',
+      component: 'InputNumber',
+      rules: [
+        { required: true, message: `支持整型，取值范围：-2147483648 ~ 2147483647`, type: 'number' },
+      ],
+      componentProps: () => {
+        return {
+          placeholder: '编号如"0"',
+          min: -2147483648,
+          max: 2147483647,
+        };
+      },
+      colProps: {
+        span: 11,
+      },
+    },
+    {
+      field: 'division',
+      label: '',
+      component: 'Input',
+      slot: 'division',
+      colProps: {
+        span: 1,
+      },
+    },
+    {
+      field: FormFieldsEnum.NAME,
+      label: '',
+      component: 'Input',
+      rules: [{ required: true, message: `参数描述不能为空`, type: 'string' }],
+      componentProps: () => {
+        return {
+          placeholder: '对该枚举项的描述',
+          maxLength: 20,
+        };
+      },
+      colProps: {
+        span: 11,
+      },
+    },
+  ];
+};

+<script setup lang="ts">
+  import { Button, Tooltip } from 'ant-design-vue';
+  import { nextTick, ref, unref, watch } from 'vue';
+  import { useForm, BasicForm } from '/@/components/Form';
+  import { Specs } from '/@/api/device/model/modelOfMatterModel';
+  import { Icon } from '/@/components/Icon';
+  import { getFormSchemas } from './EnumList.config';
+  import { FormActionType } from '../../../types/form';
+  import { buildUUID } from '/@/utils/uuid';
+  import { DataTypeEnum } from '/@/enums/objectModelEnum';
+
+  const props = defineProps<{ disabled?: boolean; value?: Specs[] }>();
+
+  interface EnumElItemType {
+    uuid: string;
+    formActionType?: FormActionType;
+    dataSource?: Recordable;
+  }
+
+  const [registerForm] = useForm({
+    schemas: getFormSchemas(),
+    showActionButtonGroup: false,
+    layout: 'inline',
+  });
+
+  const enumsListElRef = ref<EnumElItemType[]>([{ uuid: buildUUID() }]);
+
+  const setFormActionType = (item: EnumElItemType, el: any) => {
+    item.formActionType = el as unknown as FormActionType;
+  };
+
+  const validate = async () => {
+    for (const enumElItem of unref(enumsListElRef)) {
+      await enumElItem.formActionType?.validate?.();
+    }
+  };
+
+  const getFieldsValue = () => {
+    return unref(enumsListElRef).map(
+      (item) =>
+        ({
+          ...(item.formActionType?.getFieldsValue?.() || {}),
+          dataType: DataTypeEnum.ENUM,
+        } as Specs)
+    );
+  };
+
+  const setFieldsValue = (spaceList: Specs[]) => {
+    enumsListElRef.value = spaceList.map((item) => ({ uuid: buildUUID(), dataSource: item }));
+
+    nextTick(() => {
+      unref(enumsListElRef).forEach((item) =>
+        item.formActionType?.setFieldsValue?.(item.dataSource)
+      );
+    });
+  };
+
+  const handleDeleteEnums = (item: EnumElItemType) => {
+    const index = unref(enumsListElRef).findIndex((temp) => item.uuid === temp.uuid);
+
+    ~index && enumsListElRef.value.splice(index, 1);
+  };
+
+  const handleAddEnums = () => {
+    unref(enumsListElRef).push({ uuid: buildUUID() });
+  };
+
+  watch(
+    () => props.value,
+    (target) => {
+      setFieldsValue(target || [{} as Specs]);
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  defineExpose({
+    validate,
+    getFieldsValue,
+    setFieldsValue,
+  });
+</script>
+
+<template>
+  <section class="w-full">
+    <header class="flex h-8 items-center">
+      <div class="w-1/2">
+        <span>参考值</span>
+        <Tooltip title="支持整型，取值范围：-2147483648 ~ 2147483647">
+          <Icon icon="ant-design:question-circle-outlined" class="cursor-pointer ml-1" />
+        </Tooltip>
+      </div>
+      <div class="w-1/2">
+        <span>参考描述</span>
+        <Tooltip
+          title="支持中文、英文大小写、日文、数字、下划线和短划线，必须以中文、英文或数字开头，不超过20个字符"
+        >
+          <Icon icon="ant-design:question-circle-outlined" class="cursor-pointer ml-1" />
+        </Tooltip>
+      </div>
+    </header>
+    <main class="w-full">
+      <section class="w-full flex" v-for="item in enumsListElRef" :key="item.uuid">
+        <BasicForm
+          :ref="(el) => setFormActionType(item, el)"
+          @register="registerForm"
+          class="enums-form"
+          :disabled="disabled"
+        >
+          <template #division>
+            <div>~</div>
+          </template>
+        </BasicForm>
+        <Button
+          type="link"
+          class="relative -left-6"
+          :disabled="disabled"
+          @click="handleDeleteEnums(item)"
+        >
+          删除
+        </Button>
+      </section>
+    </main>
+    <Button type="link" @click="handleAddEnums" :disabled="disabled">+添加枚举项</Button>
+  </section>
+</template>
+
+<style scoped lang="less">
+  .enums-form {
+    @apply w-full;
+
+    > :deep(.ant-row) {
+      @apply w-full;
+
+      .ant-input-number {
+        width: 100%;
+      }
+    }
+  }
+</style>

@@ -14,6 +14,8 @@
   import { DataType, StructJSON } from '/@/api/device/model/modelOfMatterModel';
   import { isArray } from '/@/utils/is';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import EnumList from './EnumList.vue';
+  import { DataTypeEnum } from '/@/enums/objectModelEnum';
 
   const modalReceiveRecord = ref<OpenModalParams>({
     mode: OpenModalMode.CREATE,
@@ -26,6 +28,8 @@
     hiddenAccessMode: boolean;
   }>();
 
+  const enumListRef = ref<InstanceType<typeof EnumList>>();
+
   const emit = defineEmits(['register', 'submit']);
 
   const { createMessage } = useMessage();
@@ -53,13 +57,14 @@
     modalReceiveRecord.value = record;
     const data = record.record || {};
     const { dataType = {} } = data! as StructJSON;
-    const { specs = {}, type } = dataType as DataType;
+    const { specs = {}, type, specsList } = dataType as DataType;
 
     if (record.record) {
       const value = {
         type,
         ...data,
         ...(isArray(specs) ? { specs } : { ...specs }),
+        enumList: type === DataTypeEnum.ENUM ? specsList : [],
       };
 
       setFieldsValue(value);
@@ -74,7 +79,8 @@
   const handleSubmit = async () => {
     try {
       const _value = await validate();
-      let structJSON = transfromToStructJSON(_value);
+      await unref(enumListRef)?.validate?.();
+      let structJSON = transfromToStructJSON(_value, unref(enumListRef)?.getFieldsValue?.() || []);
       const value = {
         ...structJSON,
         ...(unref(modalReceiveRecord)?.record?.id
@@ -104,7 +110,11 @@
     destroy-on-close
     :show-ok-btn="!$props.disabled"
   >
-    <BasicForm @register="register" :schemas="getFormSchemas" />
+    <BasicForm @register="register" :schemas="getFormSchemas">
+      <template #EnumList="{ field, model }">
+        <EnumList ref="enumListRef" :value="model[field]" :disabled="disabled" />
+      </template>
+    </BasicForm>
   </BasicModal>
 </template>
 

@@ -37,7 +37,7 @@ const validateExcludeComma = (field: string, errorName: string): Rule[] => {
       validator: () => {
         const reg = /[,，]+/;
         if (reg.test(field)) {
-          return Promise.reject(errorName);
+          return Promise.reject(`${errorName}不能包含逗号`);
         }
         return Promise.resolve();
       },
@@ -64,7 +64,10 @@ export const formSchemas = ({
         placeholder: '请输入功能名称',
       },
       dynamicRules: ({ values }) => {
-        return validateExcludeComma(values[FormField.FUNCTION_NAME], '功能名称不能包含逗号');
+        return [
+          { required: true, message: '请输入功能名称' },
+          ...validateExcludeComma(values[FormField.FUNCTION_NAME], '功能名称'),
+        ];
       },
     },
     {
@@ -80,7 +83,10 @@ export const formSchemas = ({
         placeholder: '请输入标识符',
       },
       dynamicRules: ({ values }) => {
-        return validateExcludeComma(values[FormField.IDENTIFIER], '标识符不能包含逗号');
+        return [
+          { required: true, message: '请输入标识符' },
+          ...validateExcludeComma(values[FormField.IDENTIFIER], '标识符'),
+        ];
       },
     },
     {
@@ -127,6 +133,16 @@ export const formSchemas = ({
       },
     },
     {
+      field: FormField.ENUM_LIST,
+      component: 'Input',
+      label: '枚举',
+      ifShow: ({ values }) => values[FormField.TYPE] === DataTypeEnum.ENUM,
+      slot: 'EnumList',
+      colProps: {
+        span: 24,
+      },
+    },
+    {
       field: FormField.VALUE_RANGE,
       label: '取值范围',
       component: 'CustomMinMaxInput',

 import { cloneDeep } from 'lodash-es';
 import { StructFormValue } from './type';
-import { DataType, ModelOfMatterParams, StructJSON } from '/@/api/device/model/modelOfMatterModel';
+import {
+  DataType,
+  ModelOfMatterParams,
+  Specs,
+  StructJSON,
+} from '/@/api/device/model/modelOfMatterModel';
 import { isArray } from '/@/utils/is';
 import { DataTypeEnum } from '/@/enums/objectModelEnum';
 
-export function transfromToStructJSON(value: StructFormValue): StructJSON {
+export function transfromToStructJSON(value: StructFormValue, enumList: Specs[] = []): StructJSON {
   const {
     type,
     valueRange,
@@ -55,6 +60,13 @@ export function transfromToStructJSON(value: StructFormValue): StructJSON {
       };
       break;
 
+    case DataTypeEnum.ENUM:
+      dataType = {
+        type,
+        specsList: enumList,
+      };
+      break;
+
     case DataTypeEnum.STRUCT:
       dataType = {
         type,
@@ -62,12 +74,13 @@ export function transfromToStructJSON(value: StructFormValue): StructJSON {
       };
       break;
   }
-  return { ...basic, dataType };
+  return { ...basic, dataType } as StructJSON;
 }
 
 export const excludeIdInStructJSON = (struct: DataType) => {
   const _value = cloneDeep(struct);
   const { specs } = _value;
+  if (!specs) return _value;
   const list = [specs];
 
   while (list.length) {
@@ -77,10 +90,10 @@ export const excludeIdInStructJSON = (struct: DataType) => {
           if (temp.dataType?.specs) {
             list.push(temp.dataType.specs);
           }
-          Reflect.deleteProperty(temp, 'id');
+          Reflect.has(temp, 'id') && Reflect.deleteProperty(temp, 'id');
         });
       } else {
-        Reflect.deleteProperty(item as Recordable, 'id');
+        Reflect.has(item as Recordable, 'id') && Reflect.deleteProperty(item as Recordable, 'id');
       }
       list.shift();
     }

@@ -101,6 +101,26 @@ export const getFormSchemas = ({
     };
   };
 
+  const createEnumsSelect = ({ identifier, functionName, dataType }: StructJSON): FormSchema => {
+    const { specsList } = dataType || {};
+    return {
+      field: identifier,
+      label: functionName!,
+      component: 'Select',
+      rules: [
+        {
+          required,
+          message: `${functionName}是必填项`,
+          type: 'number',
+        },
+      ],
+      componentProps: {
+        options: specsList?.map((item) => ({ label: item.name, value: item.value })),
+        placeholder: `请选择${functionName}`,
+      },
+    };
+  };
+
   const createStructJson = ({ identifier, functionName, dataType }: StructJSON): FormSchema => {
     return {
       field: identifier,
@@ -140,6 +160,7 @@ export const getFormSchemas = ({
     }
 
     if (type === DataTypeEnum.BOOL) schemas.push(createSelect(item));
+    else if (type === DataTypeEnum.ENUM) schemas.push(createEnumsSelect(item));
     else if (type === DataTypeEnum.NUMBER_INT) schemas.push(createInputNumber(item));
     else if (type === DataTypeEnum.NUMBER_DOUBLE) schemas.push(createInputNumber(item));
     else if (type === DataTypeEnum.STRING) schemas.push(createInput(item));

@@ -144,4 +144,5 @@ export type ComponentType =
   | 'TimeRangePicker'
   | 'TriggerDurationInput'
   | 'AlarmProfileSelect'
-  | 'LockControlGroup';
+  | 'LockControlGroup'
+  | 'EnumList';

@@ -4,4 +4,5 @@ export enum DataTypeEnum {
   STRING = 'TEXT',
   STRUCT = 'STRUCT',
   BOOL = 'BOOL',
+  ENUM = 'ENUM',
 }

@@ -27,16 +27,26 @@ export interface SocketInfoDataSourceItemType extends BaseAdditionalInfo {
   expand?: boolean;
   showHistoryDataButton?: boolean;
   rawValue?: any;
+  enum?: Record<string, string>;
 }
 
 export function buildTableDataSourceByObjectModel(
   models: DeviceModelOfMatterAttrs[]
 ): SocketInfoDataSourceItemType[] {
   function getAdditionalInfoByDataType(dataType?: DataType) {
-    const { specs } = dataType || {};
+    const { specs, specsList, type } = dataType || {};
     if (isArray(specs)) return {};
     const { unit, boolClose, boolOpen, unitName } = (specs as Partial<Specs>) || {};
-    return { unit, boolClose, boolOpen, unitName };
+    const result = { unit, boolClose, boolOpen, unitName };
+    if (type == DataTypeEnum.ENUM && specsList && specsList.length) {
+      Reflect.set(
+        result,
+        'enum',
+        specsList.reduce((prev, next) => ({ ...prev, [next.value!]: next.name }), {})
+      );
+    }
+
+    return result;
   }
 
   return models.map((item) => {
@@ -72,7 +82,6 @@ export function buildTableDataSourceByObjectModel(
     } else {
       Object.assign(res, getAdditionalInfoByDataType(dataType));
     }
-
     return res;
   });
 }

@@ -284,13 +284,15 @@
   });
 
   const formatValue = (item: SocketInfoDataSourceItemType) => {
-    return item.type === DataTypeEnum.BOOL
-      ? !isNullOrUnDef(item.value)
-        ? !!Number(item.value)
-          ? item.boolOpen
-          : item.boolClose
-        : '--'
-      : (item.value as string) || '--';
+    if (isNullOrUnDef(item)) return '--';
+    switch (item.type) {
+      case DataTypeEnum.BOOL:
+        return !!Number(item.value) ? item.boolOpen : item.boolClose;
+      case DataTypeEnum.ENUM:
+        return item.enum?.[item.value as string];
+      default:
+        return item.value || '--';
+    }
   };
 
   const [register, { openModal: openSendCommandModal }] = useModal();

@@ -81,7 +81,7 @@ export const useGenDynamicForm = () => {
           type: 'string',
           trigger: 'change',
           validator: (_rule, value) => {
-            if (value.length > length) {
+            if (value?.length > length) {
               return Promise.reject(`${functionName}数据长度应该小于${length}`);
             }
             return Promise.resolve(value);
@@ -117,6 +117,24 @@ export const useGenDynamicForm = () => {
     };
   };
 
+  const createEnumSelect = ({
+    identifier,
+    functionName,
+    dataType,
+  }: BasicCreateFormParams): FormSchema => {
+    const { specsList } = dataType;
+    return {
+      field: identifier,
+      label: functionName,
+      component: 'Select',
+      componentProps: {
+        options: specsList?.map((item) => ({ label: item.name, value: item.value })),
+        placeholder: `请选择${functionName}`,
+        getPopupContainer: () => document.body,
+      },
+    };
+  };
+
   const createInputJson = ({ identifier, functionName }: BasicCreateFormParams): FormSchema => {
     return {
       field: identifier,
@@ -144,6 +162,7 @@ export const useGenDynamicForm = () => {
     [DataTypeEnum.NUMBER_INT]: createInputNumber,
     [DataTypeEnum.STRING]: createInput,
     [DataTypeEnum.STRUCT]: createInputJson,
+    [DataTypeEnum.ENUM]: createEnumSelect,
   };
 
   const fieldTypeMap = new Map<string, DataTypeEnum>();

-<template>
-  <BasicForm @register="register" />
-</template>
 <script lang="ts" setup>
   import { BasicForm, useForm } from '/@/components/Form';
   import { DataType, ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
@@ -15,34 +12,38 @@
   import { formSchemas } from '/@/components/Form/src/externalCompns/components/StructForm/config';
   import { TransportTypeEnum } from '../../../../components/TransportDescript/const';
   import { DataTypeEnum } from '/@/enums/objectModelEnum';
+  import { ref, unref } from 'vue';
+  import EnumList from '/@/components/Form/src/externalCompns/components/StructForm/EnumList.vue';
 
   const props = defineProps<{ openModalMode: OpenModelMode; transportType?: string | undefined }>();
 
-  const [register, { validate, resetFields, setFieldsValue, setProps }] = useForm({
+  const enumListRef = ref<InstanceType<typeof EnumList>>();
+
+  const [register, { validate, getFieldsValue, resetFields, setFieldsValue }] = useForm({
     labelWidth: 100,
     schemas: formSchemas({
       hasStructForm: false,
       hiddenAccessMode: false,
       isTcp: props.transportType === TransportTypeEnum.TCP,
     }),
-    actionColOptions: {
-      span: 14,
-    },
-    showResetButton: false,
-    submitOnReset: false,
     showActionButtonGroup: false,
   });
 
+  const disabled = ref(false);
   const setDisable = (flag: boolean) => {
-    setProps({ disabled: flag });
+    disabled.value = flag;
   };
 
   async function getFormData(): Promise<Partial<ModelOfMatterParams>> {
-    const _values = (await validate()) as StructFormValue;
-    if (!_values) return {};
+    await validate();
+    await unref(enumListRef)?.validate?.();
+
+    const _values = getFieldsValue() as StructFormValue;
     const { functionName, remark, identifier, accessMode } = _values;
-    const structJSON = transfromToStructJSON(_values);
+    const structJSON = transfromToStructJSON(_values, unref(enumListRef)?.getFieldsValue?.());
+
     const dataType = excludeIdInStructJSON(structJSON.dataType!);
+
     const value = {
       functionName,
       functionType: FunctionType.PROPERTIES,
@@ -54,6 +55,7 @@
         dataType: dataType,
       },
     } as ModelOfMatterParams;
+
     return value;
   }
 
@@ -63,18 +65,21 @@
 
   const setFormData = (record: ModelOfMatterParams) => {
     const { functionJson } = record;
-    const { dataType = {} } = functionJson!;
+    const { dataType } = functionJson!;
 
-    const { specs } = dataType! as DataType;
+    const { specs } = (dataType! || {}) as DataType;
 
     const value = {
       ...record,
       ...functionJson,
       ...dataType,
       ...(isArray(specs) ? specs : { ...specs }),
-      hasStructForm: (record?.functionJson?.dataType as DataType)?.type === DataTypeEnum.STRUCT,
+      hasStructForm: (dataType as DataType)?.type === DataTypeEnum.STRUCT,
+      enumList:
+        (dataType as DataType)?.type === DataTypeEnum.ENUM
+          ? unref((dataType as DataType).specsList)
+          : [],
     };
-
     setFieldsValue(value);
   };
 
@@ -85,4 +90,13 @@
     setDisable,
   });
 </script>
+
+<template>
+  <BasicForm @register="register" :disabled="disabled">
+    <template #EnumList="{ field, model }">
+      <EnumList ref="enumListRef" :value="model[field]" :disabled="disabled" />
+    </template>
+  </BasicForm>
+</template>
+
 <style lang="less" scoped></style>

@@ -28,6 +28,7 @@ export enum FormField {
   REGISTER_ADDRESS = 'registerAddress',
   EXTENSION_DESC = 'extensionDesc',
   STRUCT = 'struct',
+  ENUM_LIST = 'enumList',
 
   HAS_STRUCT_FROM = 'hasStructForm',
 }