perf(components): 优化“协议内容”组件协议参数表格

1. 支持重新配置标准参数和自定义参数

src/api/index.ts

@@ -68,6 +68,7 @@ import type {
   ProtocolParamInfo,
   ProtocolParamSearchParams,
   ProtocolReset,
+  ProtocolStandardParam,
   ProtocolStandardParamData,
   ProtocolStandardParamQuery,
   RegionQuery,
@@ -622,6 +623,11 @@ export const orgGatewaySerialNumber = async (protocolList: ProtocolList) => {
 
 // 平台标准协议参数
 
+export const getProtocolStandardParam = async (paramId: number) => {
+  const data = await request<ProtocolStandardParam>(apiBiz(`/platformProtocolInfo/info/${paramId}`));
+  return data;
+};
+
 export const getProtocolStandardParamList = async (params: ProtocolStandardParamQuery) => {
   const data = await request<ProtocolStandardParamData>(apiBiz('/platformProtocolInfo/getPageList'), {
     method: 'POST',

src/types/index.ts

@@ -219,6 +219,7 @@ export interface ProtocolParamInfo {
   decimalPlace: number;
   recognizeResult: string | null;
   candidateResults: string | null;
+  [key: string]: unknown;
 }
 
 export interface ProtocolCandidateResult {

src/views/setup-protocol/CustomParams.vue

@@ -146,6 +146,16 @@ const setIsAddParams = (isAdd: boolean) => {
   isAddParams.value = isAdd;
 };
 
+const setParamsForm = (params: ProtocolParamInfo) => {
+  Object.keys(customParamsForm).forEach((key) => {
+    const value = params[key];
+
+    if (value !== undefined && value !== null) {
+      customParamsForm[key] = value;
+    }
+  });
+};
+
 onMounted(() => {
   handleRequest(async () => {
     await getReadWriteTypes();
@@ -218,6 +228,7 @@ defineExpose({
   showView,
   hideView,
   setIsAddParams,
+  setParamsForm,
 });
 </script>
 

src/views/setup-protocol/ProtocolContent.vue

@@ -7,7 +7,7 @@ import SvgIcon from '@/components/SvgIcon.vue';
 import { useDictData } from '@/hooks/dict-data';
 import { useRequest } from '@/hooks/request';
 import { t } from '@/i18n';
-import { batchDeleleProtocolParam, getProtocolParamList } from '@/api';
+import { batchDeleleProtocolParam, getProtocolParamList, getProtocolStandardParam, updateProtocolParam } from '@/api';
 import { DictCode, ProtocolRecognitionResult, ProtocolType } from '@/constants';
 
 import CustomParams from './CustomParams.vue';
@@ -308,19 +308,49 @@ const filterProtocolCandidateResult = (input: string, option: ProtocolCandidateR
   return option.platformProtocolGatewayParamName.toLowerCase().indexOf(input.toLowerCase()) >= 0;
 };
 
-const handleProtocolCandidateChange = (_value: SelectValue, option: DefaultOptionType) => {
-  console.log(_value, option);
+const handleProtocolCandidateChange = (value: SelectValue, params: ProtocolParamInfo) => {
+  handleRequest(async () => {
+    const paramInfo = await getProtocolStandardParam(value as number);
+
+    await updateProtocolParam({
+      ...paramInfo,
+      id: params.id,
+    });
+
+    getCurrentProtocolParams();
+  });
 };
 
 const customParamsRef = useTemplateRef('customParams');
 const selectStandardParamsRef = useTemplateRef('selectStandardParams');
 
+const addCustomParams = () => {
+  customParamsRef.value?.setIsAddParams(true);
+  customParamsRef.value?.showView();
+};
+
+const addStandardParams = () => {
+  selectStandardParamsRef.value?.setIsAddParams(true);
+  selectStandardParamsRef.value?.showView();
+};
+
+const selectedParamId = ref<number>();
+
 const changeToCustomParams = (params: ProtocolParamInfo) => {
-  console.log(params);
+  selectedParamId.value = params.id;
+  customParamsRef.value?.setIsAddParams(false);
+  customParamsRef.value?.showView();
+
+  // 延时执行自定义参数表单的初始化，避免表单重置时会保留首次初始化的值，而不是默认的空值
+  setTimeout(() => {
+    customParamsRef.value?.setParamsForm(params);
+  }, 0);
 };
 
 const changeToStandardParams = (params: ProtocolParamInfo) => {
-  console.log(params);
+  selectedParamId.value = params.id;
+  selectStandardParamsRef.value?.setIsAddParams(false);
+  selectStandardParamsRef.value?.showView();
 };
 
 defineExpose({
@@ -520,8 +550,8 @@ defineExpose({
         <AButton danger :disabled="selectedParamIds.length === 0" @click="deleteSelectedParams">
           {{ $t('setupProtocol.deleteSelected') }}
         </AButton>
-        <AButton @click="customParamsRef?.showView">{{ $t('setupProtocol.addCustomParams') }}</AButton>
-        <AButton @click="selectStandardParamsRef?.showView" type="primary">
+        <AButton @click="addCustomParams">{{ $t('setupProtocol.addCustomParams') }}</AButton>
+        <AButton @click="addStandardParams" type="primary">
           {{ $t('setupProtocol.addStandardParams') }}
         </AButton>
       </div>
@@ -584,7 +614,7 @@ defineExpose({
         :width="188"
       >
         <template #default="{ record }">
-          <a v-if="record.recognizeResult === ProtocolRecognitionResult.Success">
+          <a v-if="record.platformParamName && !record.candidateResults" @click="changeToStandardParams(record)">
             {{ record.platformParamName }}
           </a>
           <ADropdown v-else-if="record.recognizeResult === ProtocolRecognitionResult.Unrecognized">
@@ -606,22 +636,23 @@ defineExpose({
           <ASelect
             v-else-if="record.recognizeResult === ProtocolRecognitionResult.MultipleResults"
             class="multiple-results-select"
+            :value="record.platformParamName || undefined"
             :options="JSON.parse(record.candidateResults || '[]')"
             :field-names="{ label: 'platformProtocolGatewayParamName', value: 'platformProtocolId' }"
             :dropdown-match-select-width="176"
             :placeholder="$t('common.plzSelect')"
             show-search
             :filter-option="filterProtocolCandidateResult"
-            @change="handleProtocolCandidateChange"
+            @change="handleProtocolCandidateChange($event, record)"
           >
             <template #dropdownRender="{ menuNode: menu }">
               <div class="multiple-results-select-header">
-                <AButton type="primary" @click="changeToStandardParams(record)">
+                <div class="multiple-results-select-button" @click="changeToStandardParams(record)">
                   {{ $t('setupProtocol.selectFromProtocolLibrary') }}
-                </AButton>
-                <AButton @click="changeToCustomParams(record)">
+                </div>
+                <div class="multiple-results-select-button" @click="changeToCustomParams(record)">
                   {{ $t('common.custom') }}
-                </AButton>
+                </div>
               </div>
               <VNodes :vnodes="menu" />
             </template>
@@ -727,12 +758,18 @@ defineExpose({
     <CustomParams
       ref="customParams"
       :protocol-id="info.id"
+      :param-id="selectedParamId"
       :is-modbus-rtu-protocol="isModbusRtuProtocol"
       :is-modbus-tcp-protocol="isModbusTcpProtocol"
       :is-s7-protocol="isS7Protocol"
       @refresh-list="getCurrentProtocolParams"
     />
-    <SelectStandardParams ref="selectStandardParams" :protocol-id="info.id" @refresh-list="getCurrentProtocolParams" />
+    <SelectStandardParams
+      ref="selectStandardParams"
+      :protocol-id="info.id"
+      :param-id="selectedParamId"
+      @refresh-list="getCurrentProtocolParams"
+    />
   </div>
 </template>
 
@@ -902,10 +939,26 @@ defineExpose({
   margin-bottom: 8px;
   border-bottom: 1px solid #e4e7ed;
 
-  /* stylelint-disable-next-line no-descending-specificity */
-  button {
+  .multiple-results-select-button {
     height: 24px;
     padding: 1px 8px;
+    font-size: 14px;
+    line-height: 22px;
+    text-shadow: 0 -2px 12px rgb(0 0 0 / 10%);
+    cursor: pointer;
+    border-radius: 4px;
+    box-shadow: 0 -2px 12px 0 rgb(0 0 0 / 10%);
+
+    &:first-child {
+      color: #fff;
+      background: var(--antd-color-primary);
+    }
+
+    &:last-child {
+      color: var(--antd-color-primary);
+      background: #fff;
+      border: 1px solid var(--antd-color-primary);
+    }
   }
 }
 </style>