Merge branch 'perf/device-create-add-code-type-field' into 'main_dev'

fix: 修复设备创建新增codeType字段

See merge request yunteng/thingskit-front!757

@@ -10,6 +10,9 @@ import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
 import { toRaw, unref } from 'vue';
 import ObjectModelValidateForm from '/@/components/Form/src/externalCompns/components/ObjectModelValidateForm/ObjectModelValidateForm.vue';
 import { CommandDeliveryWayEnum, ServiceCallTypeEnum } from '/@/enums/toolEnum';
+import { TaskTypeEnum } from '/@/views/task/center/config';
+import { AddressTypeEnum } from '/@/views/task/center/components/PollCommandInput';
+
 useComponentRegister('JSONEditor', JSONEditor);
 useComponentRegister('ObjectModelValidateForm', ObjectModelValidateForm);
 
@@ -17,6 +20,7 @@ export enum TypeEnum {
   IS_GATEWAY = 'GATEWAY',
   SENSOR = 'SENSOR',
 }
+
 export const isGateWay = (type: string) => {
   return type === TypeEnum.IS_GATEWAY;
 };
@@ -112,8 +116,60 @@ export const step1Schemas: FormSchema[] = [
     },
   },
   {
+    field: 'codeType',
+    label: '标识符类型',
+    component: 'Select',
+    dynamicRules({ values }) {
+      return [
+        {
+          required:
+            (values?.transportType === TransportTypeEnum.TCP &&
+              values?.deviceType === DeviceTypeEnum.SENSOR) ||
+            values?.deviceType === DeviceTypeEnum.GATEWAY,
+          message: '请输入设备标识符',
+        },
+      ];
+    },
+    ifShow: ({ values }) =>
+      values?.transportType === TransportTypeEnum.TCP &&
+      (values.deviceType === DeviceTypeEnum.SENSOR || values.deviceType === DeviceTypeEnum.GATEWAY),
+    componentProps: ({}) => {
+      return {
+        options: [
+          { label: '自定义', value: TaskTypeEnum.CUSTOM },
+          { label: 'ModBus', value: TaskTypeEnum.MODBUS },
+        ],
+      };
+    },
+  },
+  {
+    field: 'addressCode',
+    label: '地址码',
+    dynamicRules({ values }) {
+      return [
+        {
+          required:
+            values?.transportType === TransportTypeEnum.TCP &&
+            values?.deviceType === DeviceTypeEnum.SENSOR,
+          message: '请输入设备地址码',
+        },
+      ];
+    },
+    component: 'RegisterAddressInput',
+    changeEvent: 'update:value',
+    valueField: 'value',
+    componentProps: {
+      type: AddressTypeEnum.HEX,
+      maxValue: Number(247).toString(16),
+      minValue: 0,
+    },
+    ifShow: ({ values }) => {
+      return values?.codeType === TaskTypeEnum.MODBUS;
+    },
+  },
+  {
     field: 'code',
-    label: '设备标识/地址码',
+    label: '设备标识',
     dynamicRules({ values }) {
       return [
         {
@@ -125,15 +181,17 @@ export const step1Schemas: FormSchema[] = [
       ];
     },
     component: 'Input',
-    componentProps: {
-      maxLength: 255,
-      placeholder: '请输入设备标识或设备地址码',
+    componentProps: () => {
+      return {
+        maxLength: 255,
+        placeholder: '请输入设备标识或设备地址码',
+      };
+    },
+    ifShow: ({ values }) => {
+      return values?.codeType === TaskTypeEnum.CUSTOM;
     },
-    helpMessage: ['标准Modbus地址码值为16进制1-247值', '其他协议自定义'],
-    ifShow: ({ values }) =>
-      values?.transportType === TransportTypeEnum.TCP &&
-      (values.deviceType === DeviceTypeEnum.SENSOR || values.deviceType === DeviceTypeEnum.GATEWAY),
   },
+
   {
     field: 'brand',
     component: 'ApiRadioGroup',

@@ -127,6 +127,7 @@
   import { copyTransFun } from '/@/utils/fnUtils';
   import { useDrawer } from '/@/components/Drawer';
   import DeptDrawer from '/@/views/system/organization/OrganizationDrawer.vue';
+  import { TaskTypeEnum } from '/@/views/task/center/config';
 
   export default defineComponent({
     components: {
@@ -385,11 +386,21 @@
         positionState.latitude = deviceInfo.latitude;
         positionState.address = deviceInfo.address;
         devicePic.value = deviceInfo.avatar;
-        setFieldsValue(data);
+        setFieldsValue({
+          ...data,
+          code: data?.code,
+          deviceCode: data?.code,
+        });
       }
       // 父组件调用获取字段值的方法
       function parentGetFieldsValue() {
-        return getFieldsValue();
+        const value = getFieldsValue();
+        return {
+          ...value,
+          ...(value?.code || value?.deviceCode
+            ? { code: value?.codeType === TaskTypeEnum.CUSTOM ? value?.code : value?.deviceCode }
+            : {}),
+        };
       }
 
       // 父组件调用表单验证

@@ -183,8 +183,8 @@ export const formSchemas: FormSchema[] = [
             value: TaskTypeEnum.CUSTOM,
           },
           {
-            label: TaskTypeNameEnum.MODBUS_RTU,
-            value: TaskTypeEnum.MODBUS_RTU,
+            label: TaskTypeNameEnum.MODBUS,
+            value: TaskTypeEnum.MODBUS,
             disabled: transportType ? transportType && transportType !== PushWayEnum.TCP : true,
           },
         ],
@@ -240,7 +240,7 @@ export const formSchemas: FormSchema[] = [
     label: 'ModbusRTU轮询',
     rules: [{ required: true, message: '请输入Modbus RTU 轮询指令' }],
     ifShow: ({ model }) =>
-      model[FormFieldsEnum.EXECUTE_CONTENT_TYPE] === TaskTypeEnum.MODBUS_RTU &&
+      model[FormFieldsEnum.EXECUTE_CONTENT_TYPE] === TaskTypeEnum.MODBUS &&
       model[FormFieldsEnum.PUSH_WAY] === PushWayEnum.TCP,
     valueField: 'value',
     changeEvent: 'update:value',

 <script lang="ts" setup>
-  import { InputGroup, InputNumber, Select, Input } from 'ant-design-vue';
-  import { unref, watch } from 'vue';
-  import { computed } from 'vue';
-  import { ref } from 'vue';
+  import { Select, InputGroup, Input } from 'ant-design-vue';
+  import { ref, unref, computed } from 'vue';
+  import { isNullOrUnDef } from '/@/utils/is';
 
   enum AddressTypeEnum {
     DEC = 'DEC',
     HEX = 'HEX',
   }
-
   const emit = defineEmits(['update:value']);
 
-  const DEC_MAX_VALUE = parseInt('0xffff', 16);
-
   const props = withDefaults(
     defineProps<{
       value?: number | string;
-      inputProps?: Recordable;
       disabled?: boolean;
+      maxValue?: number | string;
+      minValue?: number | string;
+      type?: AddressTypeEnum;
+      toUpperCase?: boolean;
     }>(),
     {
-      value: 0,
       inputProps: () => ({}),
+      type: AddressTypeEnum.DEC,
+      maxValue: parseInt('FFFF', 16),
+      minValue: 0,
+      toUpperCase: true,
     }
   );
 
+  const maxHexPadLength = computed(() => {
+    const { maxValue, type } = props;
+    if (type === AddressTypeEnum.DEC) {
+      return Number(maxValue).toString(16).length;
+    } else {
+      return maxValue.toString().length;
+    }
+  });
+
+  const inputType = ref(props.type);
+
+  const getInputValue = computed(() => {
+    const { type, value, toUpperCase } = props;
+
+    if (isNullOrUnDef(value)) return value;
+
+    if (type === AddressTypeEnum.DEC) {
+      if (unref(inputType) === AddressTypeEnum.DEC) {
+        return Number(value);
+      } else {
+        const _value = Number(value).toString(16);
+        return toUpperCase ? _value.toUpperCase() : _value;
+      }
+    } else {
+      if (unref(inputType) === AddressTypeEnum.DEC) {
+        return parseInt(value, 16);
+      } else {
+        return toUpperCase ? value.toString().toUpperCase() : value;
+      }
+    }
+  });
+
+  const getValueOpposite = computed(() => {
+    if (isNullOrUnDef(unref(getInputValue))) {
+      if (unref(inputType) === AddressTypeEnum.DEC) {
+        return `0x${decToHex(props.minValue).padStart(unref(maxHexPadLength), '0').toUpperCase()}`;
+      } else {
+        return hexToDec(props.minValue);
+      }
+    }
+
+    if (unref(inputType) === AddressTypeEnum.DEC)
+      return `0x${decToHex(unref(getInputValue)!)
+        .toString()
+        .padStart(unref(maxHexPadLength), '0')
+        .toUpperCase()}`;
+    else return hexToDec(unref(getInputValue)!);
+  });
+
   const addressTypeOptions = [
     { label: AddressTypeEnum.DEC, value: AddressTypeEnum.DEC },
     { label: AddressTypeEnum.HEX, value: AddressTypeEnum.HEX },
   ];
 
-  const type = ref(AddressTypeEnum.DEC);
+  const getValueByInputType = (value: string | number) => {
+    let { type, toUpperCase, maxValue, minValue } = props;
 
-  const inputValue = ref<number | string>(props.value);
+    if (type === AddressTypeEnum.DEC) {
+      if (unref(inputType) === AddressTypeEnum.HEX) {
+        value = hexToDec(value);
+      }
+      value = Number(value);
+      maxValue = Number(maxValue);
+      minValue = Number(minValue);
+      value = value > maxValue ? maxValue : value;
+      value = value < minValue ? minValue : value;
+    } else {
+      if (unref(inputType) === AddressTypeEnum.DEC) {
+        value = decToHex(value);
+      }
 
-  const getHexValue = computed(() => {
-    return parseInt(unref(inputValue) || 0, 16);
-  });
+      const _maxValue = parseInt(maxValue, 16);
+      const _minValue = parseInt(minValue, 16);
 
-  const getDecValue = computed(() => {
-    let formatValue = Number(unref(inputValue) || 0).toString(16);
-    formatValue = `0x${formatValue.padStart(4, '0')}`;
-    return (inputValue.value as number) > DEC_MAX_VALUE ? '0x0000' : formatValue;
-  });
+      value = parseInt(value, 16) > _maxValue ? maxValue : value;
+      value = parseInt(value, 16) < _minValue ? minValue : value;
 
-  const toDEC = (value: number | string) => {
-    return unref(type) === AddressTypeEnum.DEC
-      ? isNaN(value as number)
-        ? 0
-        : Number(value)
-      : parseInt(value, 16);
-  };
+      value = toUpperCase ? value.toString().toUpperCase() : value;
+    }
 
-  const handleEmit = () => {
-    const syncValue = toDEC(unref(inputValue));
-    emit('update:value', syncValue);
+    return value;
   };
 
-  const handleChange = (value: AddressTypeEnum) => {
-    const syncValue = value === AddressTypeEnum.DEC ? unref(getHexValue) : unref(getDecValue);
-    inputValue.value = syncValue;
-    emit('update:value', toDEC(syncValue));
+  const validate = (value: string | number) => {
+    if (unref(inputType) === AddressTypeEnum.DEC) {
+      return /^[1-9]\d*$/.test(value.toString());
+    } else {
+      return /(0x)?[0-9a-fA-F]+/.test(value.toString());
+    }
   };
 
-  const stop = watch(
-    () => props.value,
-    (value) => {
-      inputValue.value = value;
-      stop();
+  const handleSyncValue = (event: ChangeEvent) => {
+    const value = (event.target as HTMLInputElement).value;
+    if (isNullOrUnDef(value) || value === '') {
+      emit('update:value', null);
+      return;
     }
-  );
+    if (!validate(value)) return;
+    const syncValue = getValueByInputType(value);
+    emit('update:value', syncValue);
+  };
+
+  function decToHex(value: number | string) {
+    return Number(value).toString(16);
+  }
+
+  function hexToDec(value: number | string) {
+    return parseInt(value, 16);
+  }
 </script>
 
 <template>
   <InputGroup compact class="!flex">
     <Select
-      v-model:value="type"
+      v-model:value="inputType"
       :options="addressTypeOptions"
-      @change="handleChange"
       :disabled="disabled"
       class="bg-gray-200 max-w-20"
     />
-    <InputNumber
-      v-if="type === AddressTypeEnum.DEC"
-      v-model:value="inputValue"
-      :step="1"
-      class="flex-1"
+
+    <Input
+      :value="getInputValue"
+      @change="handleSyncValue"
       :disabled="disabled"
-      v-bind="inputProps"
-      @change="handleEmit"
+      :placeholder="`请输入${inputType === AddressTypeEnum.DEC ? '十进制' : '十六进制'}设备地址码`"
     />
-    <Input v-if="type === AddressTypeEnum.HEX" v-model:value="inputValue" @change="handleEmit" />
     <div class="text-center h-8 leading-8 px-2 bg-gray-200 cursor-pointer rounded-1 w-20">
-      <div v-if="type === AddressTypeEnum.DEC">{{ getDecValue }}</div>
-      <div v-if="type === AddressTypeEnum.HEX">{{ getHexValue }}</div>
+      <div>{{ getValueOpposite }}</div>
     </div>
   </InputGroup>
 </template>

 import { findDictItemByCode } from '/@/api/system/dict';
 import { FormSchema, useComponentRegister } from '/@/components/Form';
 import { DictEnum } from '/@/enums/dictEnum';
-import RegisterAddressInput from './RegisterAddressInput.vue';
 import { createPickerSearch } from '/@/utils/pickerSearch';
 import { ControlGroup } from '../ControlGroup';
 
+useComponentRegister('ControlGroup', ControlGroup);
+
 export enum FormFieldsEnum {
   // 设备地址码
   DEVICE_CODE = 'deviceCode',
@@ -28,9 +29,6 @@ export enum FormFieldsEnum {
   REGISTER_VALUES = 'registerValues',
 }
 
-useComponentRegister('RegisterAddressInput', RegisterAddressInput);
-useComponentRegister('ControlGroup', ControlGroup);
-
 export enum FunctionCodeEnum {
   // 读取线圈状态01
   READ_COIL_STATE_01 = '01',

@@ -3,3 +3,8 @@ export enum ModeEnum {
   JSON = 'application/json',
   NORMAL = 'normal',
 }
+
+export enum AddressTypeEnum {
+  DEC = 'DEC',
+  HEX = 'HEX',
+}

@@ -27,11 +27,11 @@ export enum TaskTargetNameEnum {
 
 export enum TaskTypeEnum {
   CUSTOM = 'CUSTOM',
-  MODBUS_RTU = 'MODBUS_RTU',
+  MODBUS = 'MODBUS',
 }
 
 export enum TaskTypeNameEnum {
-  MODBUS_RTU = 'MODBUS_RTU轮询',
+  MODBUS = 'MODBUS_RTU轮询',
   CUSTOM = '自定义数据下发',
 }