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

1. 支持动态修改网关参数名称与编码

src/views/setup-protocol/GatewayParamExt.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref } from 'vue';
+
 interface Props {
   extInfo: {
     deviceName?: string;
@@ -12,18 +14,91 @@ interface Props {
   };
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  change: [
+    param: {
+      paramName: string;
+      paramCode: string;
+      gatewayParamExt: string;
+    },
+  ];
+}>();
+
+const deviceNum = ref<string | number | undefined>(props.extInfo.deviceNum);
+const moduleNum = ref<string | number | undefined>(props.extInfo.moduleNum);
+
+const handleChange = () => {
+  const { deviceName, deviceParam, moduleName, moduleParam, statusName, statusParam } = props.extInfo;
+
+  const deviceNumNameStr = deviceNum.value ? `#${deviceNum.value}` : '';
+  const deviceNumCodeStr = deviceNum.value ? `_${deviceNum.value}_` : '';
+
+  const moduleNumNameStr = moduleNum.value ? `#${moduleNum.value}` : '';
+  const moduleNumCodeStr = moduleNum.value ? `_${moduleNum.value}_` : '';
+
+  const paramName = `${deviceName ?? ''}${deviceNumNameStr}${moduleName ?? ''}${moduleNumNameStr}${statusName ?? ''}`;
+  const paramCode = `${deviceParam ?? ''}${deviceNumCodeStr}${moduleParam ?? ''}${moduleNumCodeStr}${statusParam ?? ''}`;
+
+  const gatewayParamExt = {
+    ...props.extInfo,
+  };
+
+  if (deviceName) {
+    gatewayParamExt.deviceNum = deviceNum.value ? String(deviceNum.value) : '';
+  }
+
+  if (moduleName) {
+    gatewayParamExt.moduleNum = moduleNum.value ? String(moduleNum.value) : '';
+  }
+
+  emit('change', {
+    paramName,
+    paramCode,
+    gatewayParamExt: JSON.stringify(gatewayParamExt),
+  });
+};
 </script>
 
 <template>
-  <div>
-    <div v-if="extInfo.deviceName && extInfo.deviceNum">
+  <div class="gateway-param-ext-container">
+    <template v-if="extInfo.deviceName && extInfo.deviceNum !== undefined">
       {{ extInfo.deviceName }}
-      <AInputNumber :value="extInfo.deviceNum" :min="0" :precision="0" />
-    </div>
-    <div v-if="extInfo.moduleName && extInfo.moduleNum">
+      <AInputNumber
+        class="gateway-param-ext-input"
+        v-model:value="deviceNum"
+        :min="0"
+        :precision="0"
+        :controls="false"
+        @change="handleChange"
+      />
+    </template>
+    <template v-if="extInfo.moduleName && extInfo.moduleNum !== undefined">
       {{ extInfo.moduleName }}
-      <AInputNumber :value="extInfo.moduleNum" :min="0" :precision="0" />
-    </div>
+      <AInputNumber
+        class="gateway-param-ext-input"
+        v-model:value="moduleNum"
+        :min="0"
+        :precision="0"
+        :controls="false"
+        @change="handleChange"
+      />
+    </template>
+    <span>{{ extInfo.statusName }}</span>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.gateway-param-ext-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.gateway-param-ext-input {
+  width: 32px;
+  height: 32px;
+  margin-inline: 2px;
+}
+</style>

src/views/setup-protocol/ProtocolContent.vue

@@ -339,6 +339,30 @@ const handleProtocolCandidateChange = (value: SelectValue, params: ProtocolParam
   });
 };
 
+const handleGatewayParamExtChange = debounce(
+  async (
+    ext: {
+      paramName: string;
+      paramCode: string;
+      gatewayParamExt: string;
+    },
+    param: ProtocolParamInfo,
+  ) => {
+    const { paramName, paramCode, gatewayParamExt } = ext;
+
+    await updateProtocolParam({
+      id: param.id,
+      paramName,
+      gatewayParamName: paramName,
+      gatewayParamCode: paramCode,
+      gatewayParamExt,
+    });
+
+    getCurrentProtocolParams();
+  },
+  300,
+);
+
 const customParamsRef = useTemplateRef('customParams');
 const selectStandardParamsRef = useTemplateRef('selectStandardParams');
 
@@ -778,10 +802,14 @@ defineExpose({
         class="table-column-item-required"
         :title="$t('setupProtocol.protocolParamFields.gatewayParamName')"
         data-index="gatewayParamName"
-        :width="200"
+        :width="270"
       >
         <template #default="{ record }">
-          <GatewayParamExt v-if="record.gatewayParamExt" :ext-info="JSON.parse(record.gatewayParamExt || '{}')" />
+          <GatewayParamExt
+            v-if="record.gatewayParamExt"
+            :ext-info="JSON.parse(record.gatewayParamExt || '{}')"
+            @change="handleGatewayParamExtChange($event, record)"
+          />
           <div v-else>{{ record.gatewayParamName }}</div>
         </template>
       </ATableColumn>