feat: 完成modbus rtu指令生成页面

@@ -124,6 +124,6 @@ export type ComponentType =
   | 'TransferTableModal'
   | 'ObjectModelValidateForm'
   | 'DevicePicker'
-  | 'CustomInput'
+  | 'PollCommandInput'
   | 'RegisterAddressInput'
   | 'ControlGroup';

-import { Component } from 'vue';
-import { ComponentType } from './type';
-
-const componentMap = new Map<ComponentType, Component>();
-
-export function add(compName: ComponentType, component: Component) {
-  componentMap.set(compName, component);
-}
-
-export function del(compName: ComponentType) {
-  componentMap.delete(compName);
-}
-
-export { componentMap };

-import type { ComponentType } from './type';
-import { tryOnUnmounted } from '@vueuse/core';
-import { add, del } from './componentMap';
-import type { Component } from 'vue';
-
-export function useComponentRegister(compName: ComponentType, comp: Component) {
-  add(compName, comp);
-  tryOnUnmounted(() => {
-    del(compName);
-  });
-}

 export { default as ControlGroup } from './index.vue';
-export { add, del } from './componentMap';
-export { useComponentRegister } from './help';

 <script lang="ts" setup>
   import { BasicForm, FormSchema, useForm } from '/@/components/Form';
   import { ComponentType, ColEx } from '/@/components/Form/src/types/index';
+  import { computed } from '@vue/reactivity';
+  import { isFunction } from '/@/utils/is';
+  import { unref } from 'vue';
+  import { watch } from 'vue';
+  import { nextTick } from 'vue';
+  import { ref } from 'vue';
+  import { onMounted } from 'vue';
 
-  withDefaults(
+  interface ValueItemType {
+    value: any;
+  }
+
+  enum FormFieldsEnum {
+    TOTAL_CONTROL = 'totalControl',
+  }
+
+  enum EmitEventEnum {
+    UPDATE_VALUE = 'update:value',
+  }
+
+  const emit = defineEmits<{
+    (event: EmitEventEnum.UPDATE_VALUE, value: ValueItemType[]): void;
+  }>();
+
+  const props = withDefaults(
     defineProps<{
+      value: ValueItemType[];
+      length?: number;
       component?: ComponentType;
       itemColProps?: Partial<ColEx>;
+      itemLabel?: (index: number) => string;
+      itemProps?: (index: number) => FormSchema;
+      showTotalControl?: boolean;
+      totalControlProps?: FormSchema;
     }>(),
     {
+      value: () => [],
+      length: 0,
       component: 'Switch',
+      itemLabel: (index: number) => `#${index}`,
+      itemProps: () => ({} as unknown as FormSchema),
       itemColProps: () => ({ span: 12 } as Partial<ColEx>),
+      showTotalControl: true,
+      totalControlProps: () => ({} as unknown as FormSchema),
     }
   );
 
-  const [registerForm, {}] = useForm({
+  const getProps = computed(() => {
+    return props;
+  });
+
+  const batchSetValue = (value: any): ValueItemType[] => {
+    const { length } = unref(getProps);
+    return Array.from({ length }, () => ({ value }));
+  };
+
+  const getTotalControlItem = computed(() => {
+    const { totalControlProps, component, showTotalControl } = unref(getProps);
+    return {
+      ...totalControlProps,
+      field: FormFieldsEnum.TOTAL_CONTROL,
+      component,
+      ifShow: showTotalControl,
+      componentProps: {
+        onChange(value: any) {
+          handleUpdateValue(batchSetValue(value));
+        },
+      },
+    } as FormSchema;
+  });
+
+  const getSchemas = computed(() => {
+    const { itemProps, itemLabel, length, component } = unref(getProps);
+    let label = isFunction(itemLabel) ? itemLabel : (index: number) => `#${index}`;
+    let _itemProps = isFunction(itemProps) ? itemProps : () => ({});
+    const schemas = Array.from(
+      { length },
+      (_item, index) =>
+        ({
+          ..._itemProps(index),
+          label: label(index),
+          field: index.toString(),
+          component,
+          componentProps: {
+            onChange: async () => {
+              await nextTick();
+              handleUpdateValue();
+            },
+          },
+        } as FormSchema)
+    );
+
+    length && schemas.unshift(unref(getTotalControlItem));
+
+    return schemas;
+  });
+
+  const [registerForm, { getFieldsValue, setProps, setFieldsValue }] = useForm({
     showActionButtonGroup: false,
-    schemas: Array.from({ length: 3 }).map((_item, index) => {
-      return {
-        field: index.toString(),
-        label: index.toString(),
-        component: 'Switch',
-      } as FormSchema;
-    }),
+    schemas: unref(getSchemas),
     // baseColProps,
+    baseColProps: props.itemColProps,
+  });
+
+  const handleUpdateValue = (value?: ValueItemType[]) => {
+    if (value) {
+      emit(EmitEventEnum.UPDATE_VALUE, value);
+      return;
+    }
+    const allValue = getFieldsValue();
+    const sortKeyList = Array.from({ length: unref(getProps).length }, (_v, key) => key);
+    const res = sortKeyList.map((item) => ({ value: allValue[item] } as ValueItemType));
+
+    emit(EmitEventEnum.UPDATE_VALUE, res);
+  };
+
+  const transformValue = (value: ValueItemType[]) => {
+    const { length } = unref(getProps);
+    if (value.length !== length) {
+      value = Array.from(
+        { length: unref(getProps).length },
+        () => ({ value: null } as ValueItemType)
+      );
+    }
+    return value.reduce((prev, next, index) => ({ ...prev, [index]: next.value }), {});
+  };
+
+  const initialized = ref(false);
+
+  watch(
+    () => props.value,
+    async (target) => {
+      if (target) {
+        let flag = unref(initialized);
+        if (!flag) {
+          await nextTick();
+        }
+        const value = transformValue(target);
+        setFieldsValue(value);
+
+        if (!flag) {
+          handleUpdateValue();
+        }
+      }
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  watch(
+    () => [props.length, props.component],
+    (target) => {
+      if (target !== undefined || target !== null) {
+        setProps({
+          schemas: unref(getSchemas),
+        });
+        handleUpdateValue();
+      }
+    }
+  );
+
+  onMounted(() => {
+    initialized.value = true;
   });
 </script>
 
 <template>
-  <BasicForm @register="registerForm" />
+  <BasicForm class="control-group-form" @register="registerForm" />
 </template>
+
+<style lang="less" scoped>
+  .control-group-form {
+    :deep(.ant-form-item-label) {
+      font-weight: 700;
+    }
+  }
+</style>

-export type ComponentType = '';

-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';
-
-export enum FormFieldsEnum {
-  ADDRESS = 'address',
-  FUNCTION_CODE = 'functionCode',
-  START_REGISTER_ADDRESS = 'startRegisterAddress',
-  REGISTER_NUMBER = 'registerNumber',
-  DATA_VALID = 'dataValid',
-}
-
-useComponentRegister('RegisterAddressInput', RegisterAddressInput);
-useComponentRegister('ControlGroup', ControlGroup);
-
-export const formSchemas: FormSchema[] = [
-  {
-    field: FormFieldsEnum.ADDRESS,
-    component: 'ApiSelect',
-    label: '从机地址',
-    componentProps: () => {
-      return {
-        api: async (params: Recordable) => {
-          try {
-            const result = await findDictItemByCode(params);
-            return result.map((item, index) => ({
-              ...item,
-              itemText: `${index + 1} - ${item.itemText}`,
-            }));
-          } catch (error) {
-            return [];
-          }
-        },
-        params: {
-          dictCode: DictEnum.SLAVE_ADDRESS,
-        },
-        labelField: 'itemText',
-        valueField: 'itemValue',
-        ...createPickerSearch(),
-        getPopupContainer: () => document.body,
-      };
-    },
-  },
-  {
-    field: FormFieldsEnum.FUNCTION_CODE,
-    component: 'ApiSelect',
-    label: '功能码',
-    componentProps: () => {
-      return {
-        api: findDictItemByCode,
-        params: {
-          dictCode: DictEnum.FUNCTION_CODE,
-        },
-        labelField: 'itemText',
-        valueField: 'itemValue',
-        getPopupContainer: () => document.body,
-      };
-    },
-  },
-  {
-    field: FormFieldsEnum.START_REGISTER_ADDRESS,
-    label: '起始寄存器地址',
-    component: 'RegisterAddressInput',
-    valueField: 'value',
-    changeEvent: 'update:value',
-  },
-  {
-    field: FormFieldsEnum.REGISTER_NUMBER,
-    label: '寄存器个数',
-    component: 'InputNumber',
-    componentProps: {
-      min: 1,
-      max: 64,
-      step: 1,
-    },
-  },
-  {
-    field: FormFieldsEnum.DATA_VALID,
-    label: '数据校验',
-    component: 'ApiSelect',
-    colProps: { span: 24 },
-    componentProps: () => {
-      return {
-        api: findDictItemByCode,
-        params: {
-          dictCode: DictEnum.DATA_VALIDATE,
-        },
-        labelField: 'itemText',
-        valueField: 'itemValue',
-        getPopupContainer: () => document.body,
-      };
-    },
-  },
-  // {
-  //   field: 'test',
-  //   label: '住',
-  //   component: 'ControlGroup',
-  // },
-];

@@ -6,7 +6,7 @@ import {
   validateDevicePicker,
   FormFieldsEnum as DeviceCascadePickerFieldsEnum,
 } from '../DevicePicker';
-import { CustomInput, ModeEnum } from '../CustomInput';
+import { PollCommandInput, ModeEnum } from '../PollCommandInput';
 import { DeviceProfileModel } from '/@/api/device/model/deviceModel';
 import { TransportTypeEnum } from '/@/views/device/profiles/components/TransportDescript/const';
 import { getDeviceProfile } from '/@/api/alarm/position';
@@ -15,7 +15,7 @@ import { TimeUnitEnum, TimeUnitNameEnum } from '/@/enums/toolEnum';
 import { createPickerSearch } from '/@/utils/pickerSearch';
 
 useComponentRegister('DevicePicker', DevicePicker);
-useComponentRegister('CustomInput', CustomInput);
+useComponentRegister('PollCommandInput', PollCommandInput);
 
 export enum FormFieldsEnum {
   // 任务名称
@@ -208,7 +208,7 @@ export const formSchemas: FormSchema[] = [
   },
   {
     field: FormFieldsEnum.RPC_COMMAND,
-    component: 'CustomInput',
+    component: 'PollCommandInput',
     label: '自定义数据流',
     rules: [{ required: true, message: '请输入自定义数据流' }],
     dynamicRules: ({ model }) =>
@@ -228,7 +228,7 @@ export const formSchemas: FormSchema[] = [
   },
   {
     field: FormFieldsEnum.RPC_COMMAND,
-    component: 'CustomInput',
+    component: 'PollCommandInput',
     label: 'ModbusRTU轮询',
     rules: [{ required: true, message: '请输入Modbus RTU 轮询指令' }],
     ifShow: ({ model }) => model[FormFieldsEnum.EXECUTE_CONTENT_TYPE] === TaskTypeEnum.MODBUS_RTU,

@@ -10,7 +10,7 @@
 
   const [registerModal] = useModal();
 
-  const [registerForm, {}] = useForm({
+  const [registerForm, { getFieldsValue }] = useForm({
     schemas: formSchemas,
     showActionButtonGroup: false,
     rowProps: { gutter: 10 },
@@ -19,7 +19,10 @@
 
   const commandValue = ref('');
 
-  const handleGetValue = async () => {};
+  const handleGetValue = async () => {
+    const value = getFieldsValue();
+    console.log(value);
+  };
 
   const handleOk = () => {
     emit('update:value', unref(commandValue));

@@ -14,9 +14,16 @@
 
   const DEC_MAX_VALUE = parseInt('0xffff', 16);
 
-  const props = defineProps<{
-    value?: string;
-  }>();
+  const props = withDefaults(
+    defineProps<{
+      value?: string;
+      inputProps?: Recordable;
+    }>(),
+    {
+      value: '0',
+      inputProps: () => ({}),
+    }
+  );
 
   const addressTypeOptions = [
     { label: AddressTypeEnum.DEC, value: AddressTypeEnum.DEC },
@@ -52,7 +59,6 @@
     () => props.value,
     (targetValue) => {
       inputValue.value = targetValue || 0;
-      console.log(`inputValue: ${unref(inputValue)}`);
     }
   );
 </script>
@@ -63,7 +69,7 @@
       v-model:value="type"
       :options="addressTypeOptions"
       @change="handleChange"
-      class="bg-gray-200"
+      class="bg-gray-200 max-w-20"
     />
     <InputNumber
       v-if="type === AddressTypeEnum.DEC"
@@ -71,6 +77,7 @@
       :step="1"
       class="flex-1"
       @change="handleEmit"
+      v-bind="inputProps"
     />
     <Input v-if="type === AddressTypeEnum.HEX" v-model:value="inputValue" />
     <div class="text-center h-8 leading-8 px-2 bg-gray-200 cursor-pointer rounded-1 w-20">

+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';
+
+export enum FormFieldsEnum {
+  ADDRESS = 'address',
+  FUNCTION_CODE = 'functionCode',
+  START_REGISTER_ADDRESS = 'startRegisterAddress',
+  DATA_VALID = 'dataValid',
+  // 线圈个数
+  COIL_NUMBER = 'coilNumber',
+  // 寄存器个数
+  REGISTER_NUMBER = 'registerNumber',
+  // 线圈值
+  COIL_VALUE = 'coilValue',
+  // 寄存器值
+  REGISTER_VALUE = 'registerValue',
+  // 线圈组值
+  COIL_VALUES = 'coilValues',
+  // 寄存器组值
+  REGISTER_VALUES = 'registerValues',
+}
+
+useComponentRegister('RegisterAddressInput', RegisterAddressInput);
+useComponentRegister('ControlGroup', ControlGroup);
+
+enum FunctionCodeEnum {
+  // 读取线圈状态01
+  READ_COIL_STATE_01 = '01',
+  // 读取输入状态02
+  READ_INPUT_STATE_02 = '02',
+  // 读取保持寄存器
+  READ_KEEP_REGISTER_03 = '03',
+  // 读取输入寄存器
+  READ_INPUT_REGISTER_04 = '04',
+  // 写入耽搁线圈寄存器
+  WRITE_SINGLE_COIL_REGISTER_05 = '05',
+  // 写入单个保持寄存器
+  WRITE_SINGLE_KEEP_COIL_REGISTER_06 = '06',
+  // 写入多个线圈状态
+  WRITE_MULTIPLE_COIL_STATE_15 = '15',
+  // 写入多个保持寄存器
+  WRITE_MULTIPLE_KEEP_REGISTER_16 = '16',
+}
+
+const showCoilNumber = (value: FunctionCodeEnum) =>
+  [
+    FunctionCodeEnum.READ_COIL_STATE_01,
+    FunctionCodeEnum.READ_INPUT_STATE_02,
+    FunctionCodeEnum.WRITE_MULTIPLE_COIL_STATE_15,
+  ].includes(value);
+
+const showRegisterNumber = (value: FunctionCodeEnum) =>
+  [
+    FunctionCodeEnum.READ_KEEP_REGISTER_03,
+    FunctionCodeEnum.READ_INPUT_REGISTER_04,
+    FunctionCodeEnum.WRITE_MULTIPLE_KEEP_REGISTER_16,
+  ].includes(value);
+
+const showCoilValue = (value: FunctionCodeEnum) =>
+  [FunctionCodeEnum.WRITE_SINGLE_COIL_REGISTER_05].includes(value);
+
+const showRegisterValue = (value: FunctionCodeEnum) =>
+  [FunctionCodeEnum.WRITE_SINGLE_KEEP_COIL_REGISTER_06].includes(value);
+
+const isWriteCoilGroup = (value: FunctionCodeEnum) =>
+  [FunctionCodeEnum.WRITE_MULTIPLE_COIL_STATE_15].includes(value);
+
+const isWriteRegisterGroup = (value: FunctionCodeEnum) =>
+  [FunctionCodeEnum.WRITE_MULTIPLE_KEEP_REGISTER_16].includes(value);
+
+export const formSchemas: FormSchema[] = [
+  {
+    field: FormFieldsEnum.ADDRESS,
+    component: 'ApiSelect',
+    label: '从机地址',
+    rules: [{ required: true, message: '请选择从机地址' }],
+    defaultValue: '01',
+    componentProps: () => {
+      return {
+        api: async (params: Recordable) => {
+          try {
+            const result = await findDictItemByCode(params);
+            return result.map((item, index) => ({
+              ...item,
+              itemText: `${index + 1} - ${item.itemText}`,
+            }));
+          } catch (error) {
+            return [];
+          }
+        },
+        params: {
+          dictCode: DictEnum.SLAVE_ADDRESS,
+        },
+        labelField: 'itemText',
+        valueField: 'itemValue',
+        ...createPickerSearch(),
+        getPopupContainer: () => document.body,
+      };
+    },
+  },
+  {
+    field: FormFieldsEnum.FUNCTION_CODE,
+    component: 'ApiSelect',
+    label: '功能码',
+    defaultValue: '01',
+    rules: [{ required: true, message: '请选择功能码' }],
+    componentProps: () => {
+      return {
+        api: findDictItemByCode,
+        params: {
+          dictCode: DictEnum.FUNCTION_CODE,
+        },
+        labelField: 'itemText',
+        valueField: 'itemValue',
+        getPopupContainer: () => document.body,
+      };
+    },
+  },
+  {
+    field: FormFieldsEnum.START_REGISTER_ADDRESS,
+    label: '起始寄存器地址',
+    component: 'RegisterAddressInput',
+    valueField: 'value',
+    changeEvent: 'update:value',
+    defaultValue: '0',
+  },
+  {
+    field: FormFieldsEnum.REGISTER_NUMBER,
+    label: '寄存器个数',
+    component: 'InputNumber',
+    ifShow: ({ model }) => showRegisterNumber(model[FormFieldsEnum.FUNCTION_CODE]),
+    defaultValue: 1,
+    rules: [{ required: true, message: '请输入寄存器个数' }],
+    componentProps: {
+      min: 1,
+      max: 64,
+      step: 1,
+      placeholder: '请输入寄存器个数',
+    },
+  },
+  {
+    field: FormFieldsEnum.COIL_NUMBER,
+    label: '线圈个数',
+    component: 'InputNumber',
+    ifShow: ({ model }) => showCoilNumber(model[FormFieldsEnum.FUNCTION_CODE]),
+    defaultValue: 1,
+    rules: [{ required: true, message: '请输入线圈个数' }],
+    componentProps: {
+      min: 1,
+      max: 64,
+      step: 1,
+      placeholder: '请输入线圈个数',
+    },
+  },
+  {
+    field: FormFieldsEnum.COIL_VALUE,
+    label: '线圈值',
+    component: 'RegisterAddressInput',
+    valueField: 'value',
+    changeEvent: 'update:value',
+    ifShow: ({ model }) => showCoilValue(model[FormFieldsEnum.FUNCTION_CODE]),
+    defaultValue: '0',
+    rules: [{ required: true, message: '请输入线圈值' }],
+    componentProps: {
+      placeholder: '请输入线圈值',
+    },
+  },
+  {
+    field: FormFieldsEnum.REGISTER_VALUE,
+    label: '寄存器值',
+    component: 'RegisterAddressInput',
+    valueField: 'value',
+    changeEvent: 'update:value',
+    ifShow: ({ model }) => showRegisterValue(model[FormFieldsEnum.FUNCTION_CODE]),
+    defaultValue: '0',
+    rules: [{ required: true, message: '请输入寄存器值' }],
+    componentProps: {
+      placeholder: '请输入寄存器值',
+    },
+  },
+  {
+    field: FormFieldsEnum.REGISTER_VALUES,
+    label: '',
+    component: 'ControlGroup',
+    colProps: { span: 24 },
+    valueField: 'value',
+    changeEvent: 'update:value',
+    ifShow: ({ model }) => isWriteRegisterGroup(model[FormFieldsEnum.FUNCTION_CODE]),
+    componentProps: ({ formModel }) => {
+      const length = formModel[FormFieldsEnum.REGISTER_NUMBER];
+      return {
+        length: length || 1,
+        itemColProps: { span: 12, style: { paddingRight: '10px' } },
+        component: 'RegisterAddressInput',
+        itemLabel: (index: number) => `#${index} 寄存器值`,
+        showTotalControl: false,
+        itemProps: () => {
+          return {
+            defaultValue: '0',
+          } as FormSchema;
+        },
+      };
+    },
+  },
+  {
+    field: FormFieldsEnum.COIL_VALUES,
+    label: '',
+    component: 'ControlGroup',
+    colProps: { span: 24 },
+    valueField: 'value',
+    changeEvent: 'update:value',
+    ifShow: ({ model }) => isWriteCoilGroup(model[FormFieldsEnum.FUNCTION_CODE]),
+    componentProps: ({ formModel }) => {
+      const length = formModel[FormFieldsEnum.COIL_NUMBER];
+      return {
+        length: length || 1,
+        itemColProps: { span: 6 },
+        itemLabel: (index: number) => `#${index} 线圈状态值`,
+        itemProps: (index: number) => {
+          return {
+            defaultValue: 0,
+            helpMessage: [`设置从起始地址偏移 ${index} 位的线圈开关量状态。`],
+          } as FormSchema;
+        },
+        totalControlProps: {
+          label: '全开或全关',
+          helpMessage: ['将以下所有线圈的开关量状态全部置为 1 或 0,实现一键全开或全关.'],
+          colProps: { span: 24 },
+        } as FormSchema,
+      };
+    },
+  },
+  {
+    field: FormFieldsEnum.DATA_VALID,
+    label: '数据校验',
+    component: 'ApiSelect',
+    colProps: { span: 24 },
+    rules: [{ required: true, message: '请选择数据校验方式' }],
+    componentProps: () => {
+      return {
+        api: findDictItemByCode,
+        params: {
+          dictCode: DictEnum.DATA_VALIDATE,
+        },
+        labelField: 'itemText',
+        valueField: 'itemValue',
+        placeholder: '请选择数据校验方式',
+        getPopupContainer: () => document.body,
+      };
+    },
+  },
+];

-export { default as CustomInput } from './index.vue';
+export { default as PollCommandInput } from './index.vue';
 export enum ModeEnum {
   JSON = 'application/json',
   NORMAL = 'normal',