perf(views): 优化“配置协议”页面

1. 新增和编辑标准参数时均单选，选择后需要手动填写其他表单项目
2. 优化网关参数名称动态修改
3. 优化识别结果修改

src/types/index.ts

@@ -238,6 +238,7 @@ export interface ProtocolParamInfo {
   decimalPlace: number;
   recognizeResult: string | null;
   candidateResults: string | null;
+  platformProtocolInfoId?: number;
   [key: string]: unknown;
 }
 
@@ -268,6 +269,7 @@ export interface ProtocolStandardParam {
   deviceTypeId: number;
   deviceType: string;
   enabled: number;
+  [key: string]: unknown;
 }
 
 export interface ProtocolStandardParamQuery extends PageParams {

src/views/setup-protocol/ProtocolContent.vue

@@ -234,6 +234,9 @@ const { isLoading, handleRequest } = useRequest();
 let recognizeResult: string[] = [];
 
 const getCurrentProtocolParams = () => {
+  paramList.value = [];
+  paramTotal.value = 0;
+
   handleRequest(async () => {
     const { id } = props.info;
 
@@ -313,13 +316,11 @@ const filterProtocolCandidateResult = (input: string, option: ProtocolCandidateR
 const handleProtocolCandidateChange = (value: SelectValue, params: ProtocolParamInfo) => {
   handleRequest(async () => {
     const paramInfo = await getProtocolStandardParam(value as number);
-
-    await updateProtocolParam({
-      ...paramInfo,
-      id: params.id,
-    });
-
-    getCurrentProtocolParams();
+    selectedParamId.value = params.id;
+    selectStandardParamsRef.value?.setIsAddParams(false);
+    selectStandardParamsRef.value?.setParamsForm(paramInfo);
+    selectStandardParamsRef.value?.setSelectedParams(paramInfo);
+    selectStandardParamsRef.value?.showFormView();
   });
 };
 
@@ -334,14 +335,23 @@ const handleGatewayParamExtChange = debounce(
   ) => {
     const { paramName, paramCode, gatewayParamExt } = ext;
 
-    await updateProtocolParam({
-      id: param.id,
-      gatewayParamName: paramName,
-      gatewayParamCode: paramCode,
-      gatewayParamExt,
-    });
+    try {
+      await updateProtocolParam({
+        ...param,
+        id: param.id,
+        gatewayParamName: paramName,
+        gatewayParamCode: paramCode,
+        gatewayParamExt,
+      });
 
-    getCurrentProtocolParams();
+      getCurrentProtocolParams();
+    } catch (err) {
+      if (err instanceof Error) {
+        message.error(err.message);
+      }
+
+      console.error(err);
+    }
   },
   300,
 );
@@ -888,6 +898,9 @@ defineExpose({
       ref="selectStandardParams"
       :protocol-id="info.id"
       :param-id="selectedParamId"
+      :is-modbus-rtu-protocol="isModbusRtuProtocol"
+      :is-modbus-tcp-protocol="isModbusTcpProtocol"
+      :is-s7-protocol="isS7Protocol"
       @add-local-params="addLocalStandardParams"
       @edit-local-param="editLocalStandardParam"
       @refresh-list="getCurrentProtocolParams"

src/views/setup-protocol/SelectStandardParams.vue

@@ -1,20 +1,27 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed, onMounted, reactive, ref, watch } from 'vue';
 import { message } from 'ant-design-vue';
 import { debounce } from 'lodash-es';
 
 import SvgIcon from '@/components/SvgIcon.vue';
+import { useDictData } from '@/hooks/dict-data';
 import { useRequest } from '@/hooks/request';
 import { useViewVisible } from '@/hooks/view-visible';
 import { t } from '@/i18n';
 import { addProtocolParam, getProtocolStandardParamList, updateProtocolParam } from '@/api';
+import { DictCode } from '@/constants';
 
+import type { FormInstance } from 'ant-design-vue';
+import type { DefaultOptionType, SelectValue } from 'ant-design-vue/es/select';
 import type { Key, RowSelectionType } from 'ant-design-vue/es/table/interface';
-import type { PageParams, ProtocolStandardParam } from '@/types';
+import type { FormRules, PageParams, ProtocolParamInfo, ProtocolStandardParam } from '@/types';
 
 interface Props {
   protocolId?: number;
   paramId?: number;
+  isModbusRtuProtocol?: boolean;
+  isModbusTcpProtocol?: boolean;
+  isS7Protocol?: boolean;
 }
 
 const props = defineProps<Props>();
@@ -82,7 +89,8 @@ const selectedParamIds = ref<number[]>([]);
 const selectedParams = ref<ProtocolStandardParam[]>([]);
 
 const selectionType = computed<RowSelectionType>(() => {
-  return isAddParams.value ? 'checkbox' : 'radio';
+  return 'radio';
+  // return isAddParams.value ? 'checkbox' : 'radio';
 });
 
 const handleParamSelectChange = (selectedRowKeys: Key[], selectedRows: ProtocolStandardParam[]) => {
@@ -95,6 +103,10 @@ const removeSelectedParam = ({ id }: ProtocolStandardParam) => {
   selectedParams.value = selectedParams.value.filter((item) => item.id !== id);
 };
 
+const setSelectedParams = (param: ProtocolStandardParam) => {
+  selectedParams.value = [param];
+};
+
 const clearSelectedParams = () => {
   selectedParamIds.value = [];
   selectedParams.value = [];
@@ -119,28 +131,31 @@ const handleOk = () => {
     return;
   }
 
-  handleAddParamRequest(async () => {
-    if (isAddParams.value) {
-      for (const item of selectedParams.value) {
-        await addProtocolParam({
-          baseInfoId: props.protocolId,
-          ...item,
-        });
-      }
-
-      message.success(t('setupProtocol.addStandardParamsSuccessful'));
-    } else {
-      await updateProtocolParam({
-        ...selectedParams.value[0],
-        id: props.paramId,
-      });
-
-      message.success(t('setupProtocol.updateStandardParamsSuccessful'));
-    }
-
-    hideView();
-    emit('refreshList');
-  });
+  showFormView();
+  setParamsForm(selectedParams.value[0]);
+
+  // handleAddParamRequest(async () => {
+  //   if (isAddParams.value) {
+  //     for (const item of selectedParams.value) {
+  //       await addProtocolParam({
+  //         baseInfoId: props.protocolId,
+  //         ...item,
+  //       });
+  //     }
+
+  //     message.success(t('setupProtocol.addStandardParamsSuccessful'));
+  //   } else {
+  //     await updateProtocolParam({
+  //       ...selectedParams.value[0],
+  //       id: props.paramId,
+  //     });
+
+  //     message.success(t('setupProtocol.updateStandardParamsSuccessful'));
+  //   }
+
+  //   hideView();
+  //   emit('refreshList');
+  // });
 };
 
 const handleClose = () => {
@@ -152,10 +167,175 @@ const handleClose = () => {
   clearSelectedParams();
 };
 
+const { visible: formVisible, showView: showFormView, hideView: hideFormView } = useViewVisible();
+const { dictData: registerTypes, getDictData: getRegisterTypes } = useDictData(DictCode.RegisterType);
+const { dictData: writeFuncCode, getDictData: getWriteFuncCode } = useDictData(DictCode.WriteFuncCode);
+const { dictData: readFuncCode, getDictData: getReadFuncCode } = useDictData(DictCode.ReadFuncCode);
+
+const standardParamsForm = reactive<Partial<ProtocolParamInfo>>({
+  platformParamName: '',
+  platformParamCode: '',
+  unit: '',
+  writeFuncCode: undefined,
+  readFuncCode: undefined,
+  addrLength: undefined,
+  addrNumber: '',
+  registerAddr: '',
+  registerType: undefined,
+  registerTypeCode: undefined,
+});
+
+const rules = computed<FormRules<ProtocolParamInfo>>(() => {
+  return {
+    platformParamName: [
+      {
+        required: true,
+        message: t('common.plzEnter', { name: t('setupProtocol.protocolParamFields.paramName') }),
+        trigger: 'blur',
+      },
+    ],
+    platformParamCode: [
+      {
+        required: true,
+        message: t('common.plzEnter', { name: t('setupProtocol.protocolParamFields.paramCode') }),
+        trigger: 'blur',
+      },
+    ],
+    readFuncCode: [
+      {
+        required: true,
+        message: t('common.plzSelect', { name: t('setupProtocol.protocolParamFields.readFunctionCode') }),
+        trigger: 'blur',
+      },
+    ],
+    addrLength: [
+      {
+        required: true,
+        message: t('common.plzEnter', { name: t('setupProtocol.protocolParamFields.addressLength') }),
+        trigger: 'blur',
+      },
+    ],
+    addrNumber: [
+      {
+        required: true,
+        message: t('common.plzEnter', { name: t('setupProtocol.protocolParamFields.addrNumber') }),
+        trigger: 'blur',
+      },
+    ],
+    registerType: [
+      {
+        required: true,
+        message: t('common.plzSelect', { name: t('setupProtocol.protocolParamFields.registerType') }),
+        trigger: 'blur',
+      },
+    ],
+    registerAddr: [
+      {
+        required: true,
+        message: t('common.plzEnter', { name: t('setupProtocol.protocolParamFields.registerAddress') }),
+        trigger: 'blur',
+      },
+    ],
+  };
+});
+
+const isModbusProtocol = computed(() => {
+  return props.isModbusRtuProtocol || props.isModbusTcpProtocol;
+});
+
+const modalTitle = computed(() => {
+  return isAddParams.value ? t('setupProtocol.addStandardParams') : t('setupProtocol.updateStandardParams');
+});
+
+const setParamsForm = (params: ProtocolStandardParam) => {
+  Object.keys(standardParamsForm).forEach((key) => {
+    const value = params[key];
+
+    if (value !== undefined && value !== null) {
+      standardParamsForm[key] = value;
+    }
+  });
+};
+
+onMounted(() => {
+  handleAddParamRequest(async () => {
+    await getRegisterTypes();
+    await getWriteFuncCode();
+    await getReadFuncCode();
+  });
+});
+
+const handleRegisterTypeChange = (_value: SelectValue, option: DefaultOptionType) => {
+  standardParamsForm.registerTypeCode = option.key;
+};
+
+const formRef = ref<FormInstance>();
+
+const handleFormOk = () => {
+  formRef.value
+    ?.validate()
+    .then(() => {
+      handleAddParamRequest(async () => {
+        const standardParam = selectedParams.value[0];
+        const paramInfo = {
+          ...standardParam,
+          ...standardParamsForm,
+          baseInfoId: props.protocolId,
+          platformProtocolInfoId: standardParam.id,
+          paramName: standardParam.platformParamName,
+        };
+
+        if (isAddParams.value) {
+          await addProtocolParam(paramInfo);
+          message.success(t('setupProtocol.addStandardParamsSuccessful'));
+        } else {
+          await updateProtocolParam({
+            ...paramInfo,
+            id: props.paramId,
+          });
+
+          hideView();
+          message.success(t('setupProtocol.updateStandardParamsSuccessful'));
+        }
+
+        hideFormView();
+      });
+    })
+    .catch((err) => {
+      console.error(err);
+    });
+};
+
+const handleFormClose = () => {
+  emit('refreshList');
+  formRef.value?.clearValidate();
+
+  Object.assign(standardParamsForm, {
+    platformParamName: '',
+    platformParamCode: '',
+    unit: '',
+    writeFuncCode: undefined,
+    readFuncCode: undefined,
+    addrLength: undefined,
+    addrNumber: '',
+    registerAddr: '',
+    registerType: undefined,
+    registerTypeCode: undefined,
+  });
+
+  if (!visible.value) {
+    clearSelectedParams();
+  }
+};
+
 defineExpose({
   showView,
   hideView,
   setIsAddParams,
+  showFormView,
+  hideFormView,
+  setParamsForm,
+  setSelectedParams,
 });
 </script>
 
@@ -166,7 +346,6 @@ defineExpose({
     :width="920"
     centered
     :after-close="handleClose"
-    :confirm-loading="isConfirmLoading"
     @ok="handleOk"
   >
     <div class="params-container">
@@ -236,6 +415,120 @@ defineExpose({
       </div>
     </div>
   </AModal>
+  <AModal
+    v-model:open="formVisible"
+    :title="modalTitle"
+    :width="920"
+    :z-index="1001"
+    centered
+    :after-close="handleFormClose"
+    :confirm-loading="isConfirmLoading"
+    @ok="handleFormOk"
+  >
+    <AForm ref="formRef" :model="standardParamsForm" :rules="rules" layout="vertical">
+      <ARow :gutter="30">
+        <ACol :span="8">
+          <AFormItem :label="$t('setupProtocol.protocolParamFields.paramName')" name="platformParamName">
+            <AInput
+              v-model:value="standardParamsForm.platformParamName"
+              class="protocol-input"
+              :placeholder="$t('common.plzEnter')"
+              disabled
+            />
+          </AFormItem>
+        </ACol>
+        <ACol :span="8">
+          <AFormItem :label="$t('setupProtocol.protocolParamFields.paramCode')" name="platformParamCode">
+            <AInput
+              v-model:value="standardParamsForm.platformParamCode"
+              class="protocol-input"
+              :placeholder="$t('common.plzEnter')"
+              disabled
+            />
+          </AFormItem>
+        </ACol>
+        <ACol :span="8">
+          <AFormItem :label="$t('setupProtocol.protocolParamFields.unit')" name="unit">
+            <AInput
+              v-model:value="standardParamsForm.unit"
+              class="protocol-input"
+              :placeholder="$t('common.plzEnter')"
+              disabled
+            />
+          </AFormItem>
+        </ACol>
+        <ACol v-if="isModbusProtocol" :span="8">
+          <AFormItem :label="$t('setupProtocol.protocolParamFields.writeFunctionCode')" name="writeFuncCode">
+            <ASelect
+              v-model:value="standardParamsForm.writeFuncCode"
+              class="protocol-input"
+              :placeholder="$t('common.plzSelect')"
+            >
+              <ASelectOption v-for="item in writeFuncCode" :key="item.dictEngValue" :value="item.dictValue">
+                {{ item.dictValue }}
+              </ASelectOption>
+            </ASelect>
+          </AFormItem>
+        </ACol>
+        <ACol v-if="isModbusProtocol" :span="8">
+          <AFormItem :label="$t('setupProtocol.protocolParamFields.readFunctionCode')" name="readFuncCode">
+            <ASelect
+              v-model:value="standardParamsForm.readFuncCode"
+              class="protocol-input"
+              :placeholder="$t('common.plzSelect')"
+            >
+              <ASelectOption v-for="item in readFuncCode" :key="item.dictEngValue" :value="item.dictValue">
+                {{ item.dictValue }}
+              </ASelectOption>
+            </ASelect>
+          </AFormItem>
+        </ACol>
+        <ACol v-if="isModbusProtocol" :span="8">
+          <AFormItem :label="$t('setupProtocol.protocolParamFields.addressLength')">
+            <AInputNumber
+              v-model:value="standardParamsForm.addrLength"
+              class="protocol-input"
+              :placeholder="$t('common.plzEnter')"
+              :min="0"
+              :precision="0"
+            />
+          </AFormItem>
+        </ACol>
+        <ACol v-if="isS7Protocol" :span="8">
+          <AFormItem :label="$t('setupProtocol.protocolParamFields.addrNumber')" name="addrNumber">
+            <AInput
+              v-model:value="standardParamsForm.addrNumber"
+              class="protocol-input"
+              :placeholder="$t('common.plzEnter')"
+            />
+          </AFormItem>
+        </ACol>
+        <ACol v-if="isS7Protocol" :span="8">
+          <AFormItem :label="$t('setupProtocol.protocolParamFields.registerType')" name="registerType">
+            <ASelect
+              v-model:value="standardParamsForm.registerType"
+              class="protocol-input"
+              :placeholder="$t('common.plzSelect')"
+              @change="handleRegisterTypeChange"
+            >
+              <ASelectOption v-for="item in registerTypes" :key="item.dictEngValue" :value="item.dictValue">
+                {{ item.dictValue }}
+              </ASelectOption>
+            </ASelect>
+          </AFormItem>
+        </ACol>
+        <ACol :span="8">
+          <AFormItem :label="$t('setupProtocol.protocolParamFields.registerAddress')" name="registerAddr">
+            <AInput
+              v-model:value="standardParamsForm.registerAddr"
+              class="protocol-input"
+              :placeholder="$t('common.plzEnter')"
+            />
+          </AFormItem>
+        </ACol>
+      </ARow>
+    </AForm>
+  </AModal>
 </template>
 
 <style lang="scss" scoped>
@@ -316,4 +609,8 @@ defineExpose({
   font-size: 16px;
   color: var(--antd-color-text-secondary);
 }
+
+.protocol-input {
+  width: 100%;
+}
 </style>