perf(views): 优化“网关管理”模块支持批量查询与保存操作

src/api/index.ts

@@ -39,6 +39,7 @@ import type {
   GroupingListData,
   GroupRegions,
   InterfaceData,
+  InterfaceLsit,
   LimitForm,
   ListEquipmentParametersItemData,
   ListInfo,
@@ -496,6 +497,11 @@ export const gatewayLinkUpdate = async (agreementUpdate: AgreementUpdate) => {
   });
 };
 
+export const getGatewayLinks = async (gatewayId: number) => {
+  const data = await request<InterfaceLsit[]>(apiBiz(`/gatewayLink/getGatewayLinks/${gatewayId}`));
+  return data;
+};
+
 // 网关型号
 
 export const getGatewayModelInfo = async (id: number) => {

src/i18n/locales/zh.json

@@ -12,9 +12,11 @@
     "cancel": "取消",
     "cannotEmpty": "不能为空",
     "confirm": "确认",
+    "confirmDeletion": "是否确认删除?",
     "custom": "自定义",
     "delete": "删除",
     "deleteConfirmation": "删除确定",
+    "editor": "编辑",
     "emptyData": "请求数据为空",
     "entire": "全部",
     "exportToLocal": "导出到本地",

src/types/index.ts

@@ -1368,7 +1368,7 @@ export interface ParamValueListAutomaticData {
 
 export interface BatchUpdate {
   link: LinkType;
-  protocols: LinkProtocolType[];
+  protocols: VerificationAgreement[];
 }
 
 export interface LinkType {
@@ -1400,7 +1400,7 @@ export interface LinkProtocolType {
   linkId: number;
   protocolId: number;
   station: number;
-  isStandard: string; // 根据实际情况，如果`isStandard`只包含"true"或"false"，可以改为boolean类型
+  isStandard: string;
   dataSendInterval: number;
   highFreqSendInterval: number;
   deviceId?: number;
@@ -1604,3 +1604,7 @@ export interface FormatterData {
   encode: object;
   marker: string;
 }
+
+export interface InterfaceLsit extends InterfaceData {
+  protocols: VerificationAgreement[];
+}

src/views/gateway-list/GatewayList.vue

@@ -7,9 +7,8 @@ import { useRequest } from '@/hooks/request';
 import { t } from '@/i18n';
 import {
   addGatewayLinkBatchUpdate,
-  gatewayLinkGetList,
-  gatewayLinkList,
   gatewayList,
+  getGatewayLinks,
   obtainListInterfaces,
   obtainListPhysicalInterfaces,
   orgGatewayUnregister,
@@ -21,10 +20,9 @@ import type {
   GatewayListItem,
   GatewayQuery,
   InterfaceData,
-  LinkProtocolType,
+  InterfaceLsit,
   ListInterfaces,
   ListPhysicalInterfaces,
-  VerificationAgreement,
 } from '@/types';
 
 const gatewayColumns = [
@@ -81,14 +79,16 @@ const agreementColumns = [
 ];
 
 const gatewayData = ref<GatewayListItem[]>([]);
-const interfaceList = ref<InterfaceData[]>([]);
-const agreementList = ref<VerificationAgreement[]>([]);
+const interfaceList = ref<InterfaceLsit[]>([]);
+const interfaceOriginalData = ref<InterfaceLsit[]>([]);
+
 const gatewayId = ref<number>();
 const gatewayEditor = ref<boolean>(false);
 const interfaceSelectList = ref<ListInterfaces[]>([]);
 const listPhysicalInterfaces = ref<ListPhysicalInterfaces[]>([]);
 const gatewayLinks = ref<BatchUpdate[]>([]);
-const data: LinkProtocolType[] = [];
+// 添加选中状态
+const selectedRowId = ref<string | null>(null);
 
 const activeKey = ref();
 const gatewayQuery = ref<GatewayQuery>({
@@ -111,6 +111,7 @@ const getGatewayList = () => {
     if (records.length) {
       getObtainListInterfaces(gatewayData.value[0].modelId);
       postLinkGetList(gatewayData.value[0].id);
+      selectedRowId.value = String(gatewayData.value[0].id);
     }
   });
 };
@@ -128,6 +129,9 @@ const addReset = () => {
 const rowClick = (record: GatewayListItem) => {
   return {
     onClick: () => {
+      // 更新选中行ID
+      selectedRowId.value = String(record.id);
+
       gatewayId.value = record.id;
       getObtainListInterfaces(record.modelId);
       postLinkGetList(record.id);
@@ -135,6 +139,11 @@ const rowClick = (record: GatewayListItem) => {
   };
 };
 
+// 动态行类名
+const rowClassName = (record: GatewayListItem) => {
+  return String(record.id) === selectedRowId.value ? 'selected-row' : '';
+};
+
 const getObtainListInterfaces = (id: number) => {
   handleRequest(async () => {
     interfaceSelectList.value = await obtainListInterfaces(id);
@@ -143,7 +152,6 @@ const getObtainListInterfaces = (id: number) => {
 
 const getObtainListPhysicalInterfaces = (id: number, value?: InterfaceData) => {
   handleRequest(async () => {
-    console.log(id, value);
     listPhysicalInterfaces.value = await obtainListPhysicalInterfaces(id);
     if (value) {
       if (listPhysicalInterfaces.value.length) {
@@ -170,10 +178,10 @@ const choosePhysicalInterface = (
 
 const postLinkGetList = (id: number) => {
   handleRequest(async () => {
-    interfaceList.value = await gatewayLinkGetList(id);
-    if (interfaceList.value.length) {
+    interfaceOriginalData.value = await getGatewayLinks(id);
+    if (interfaceOriginalData.value.length) {
+      interfaceList.value = interfaceOriginalData.value;
       activeKey.value = interfaceList.value[0].id;
-      agreementList.value = await gatewayLinkList(interfaceList.value[0].id);
       getObtainListPhysicalInterfaces(interfaceList.value[0].interfaceId);
     }
   });
@@ -203,28 +211,51 @@ const addGatewayDelete = (id: number) => {
   modalComponentRef.value?.showView();
 };
 
+const cancelSave = () => {
+  gatewayEditor.value = false;
+  if (gatewayId.value) {
+    postLinkGetList(gatewayId.value);
+  }
+};
+
 const addSave = () => {
   handleRequest(async () => {
     interfaceList.value.forEach((item) => {
-      agreementList.value.forEach((item) => {
-        const { protocolId, station, isStandard, dataSendInterval, highFreqSendInterval, id, linkId } = item;
-        data.push({
-          id,
-          linkId,
-          protocolId,
-          station,
-          isStandard: String(isStandard),
-          dataSendInterval,
-          highFreqSendInterval,
-        });
-      });
+      const {
+        id,
+        linkName,
+        gatewayId,
+        interfaceId,
+        protocolType,
+        bindState,
+        dataBit,
+        parityBit,
+        stopBit,
+        baudRate,
+        readTimeout,
+        nextDataReadDelay,
+        nextRoundDataReadDelay,
+      } = item;
 
       gatewayLinks.value.push({
-        link: item,
-        protocols: data,
+        link: {
+          id,
+          linkName,
+          gatewayId,
+          interfaceId,
+          protocolType,
+          bindState,
+          dataBit,
+          parityBit,
+          stopBit,
+          baudRate,
+          readTimeout,
+          nextDataReadDelay,
+          nextRoundDataReadDelay,
+        },
+        protocols: item.protocols,
       });
     });
-    console.log(gatewayLinks.value);
     await addGatewayLinkBatchUpdate(gatewayLinks.value);
 
     gatewayEditor.value = false;
@@ -270,7 +301,7 @@ onMounted(() => {
             </div>
             <div>
               <span class="gateway-left-text">{{ $t('common.status') }}</span>
-              <ASelect class="select-width" v-model:value="gatewayQuery.state" placeholder="请选择" :allow-clear="true">
+              <ASelect class="select-width" v-model:value="gatewayQuery.state" placeholder="请选择">
                 <ASelectOption :value="-1">{{ $t('common.all') }}</ASelectOption>
                 <ASelectOption :value="1">{{ $t('common.online') }}</ASelectOption>
                 <ASelectOption :value="0">{{ $t('common.offline') }}</ASelectOption>
@@ -289,6 +320,7 @@ onMounted(() => {
             :row-key="(record) => record.id"
             :custom-row="rowClick"
             :pagination="false"
+            :row-class-name="rowClassName"
           >
             <template #bodyCell="{ column, record, index }">
               <template v-if="column.key === 'index'">
@@ -317,23 +349,18 @@ onMounted(() => {
         </ACol>
         <ACol :span="12" class="gateway-right">
           <AFlex justify="space-between" align="center" class="gateway-right-top">
-            <div class="gateway-left-top-text">网关配置</div>
+            <div class="gateway-left-top-text">{{ $t('registerGateway.gatewayConfiguration') }}</div>
             <div v-if="gatewayEditor">
-              <AButton
-                v-if="gatewayEditor"
-                type="text"
-                class="icon-button gateway-left-top-icon"
-                @click="gatewayEditor = false"
-              >
+              <AButton v-if="gatewayEditor" type="text" class="icon-button gateway-left-top-icon" @click="cancelSave">
                 <AFlex align="center">
                   <SvgIcon name="close" />
-                  <span> 取消 </span>
+                  <span> {{ $t('common.cancel') }} </span>
                 </AFlex>
               </AButton>
               <AButton v-if="gatewayEditor" type="text" class="icon-button gateway-left-top-icon" @click="addSave">
                 <AFlex align="center">
                   <SvgIcon name="edit-o" />
-                  <span> 保存 </span>
+                  <span> {{ $t('common.save') }} </span>
                 </AFlex>
               </AButton>
             </div>
@@ -346,7 +373,7 @@ onMounted(() => {
               >
                 <AFlex align="center">
                   <SvgIcon name="edit-o" />
-                  <span> 编辑 </span>
+                  <span> {{ $t('common.editor') }} </span>
                 </AFlex>
               </AButton>
             </div>
@@ -354,7 +381,7 @@ onMounted(() => {
           <ACollapse v-model:active-key="activeKey" accordion v-if="interfaceList.length" collapsible="icon">
             <ACollapsePanel v-for="(item, index) in interfaceList" :key="item.id">
               <template #header>
-                <span class="interface-text-right">物理接口: </span>
+                <span class="interface-text-right">{{ $t('createDevice.physicalInterface') }}: </span>
                 <span v-if="!gatewayEditor">{{ item.linkName }}</span>
                 <ASelect
                   v-else
@@ -366,7 +393,7 @@ onMounted(() => {
                 />
               </template>
               <AFlex align="center" class="gateway-type-bottom">
-                <div class="gateway-right-text">协议类型:</div>
+                <div class="gateway-right-text">{{ $t('setupProtocol.protocolType') }}:</div>
                 <div>
                   <span v-if="!gatewayEditor">{{ item.protocolType }}</span>
                   <ASelect
@@ -379,10 +406,10 @@ onMounted(() => {
                 </div>
               </AFlex>
 
-              <ATable :columns="agreementColumns" :data-source="agreementList" :pagination="false">
+              <ATable :columns="agreementColumns" :data-source="item.protocols" :pagination="false">
                 <template #bodyCell="{ column, record }">
                   <template v-if="column.key === 'station'">
-                    <AInputNumber v-if="gatewayEditor" v-model:value="record.station" :min="1" />
+                    <AInputNumber v-if="gatewayEditor" v-model:value="record.station" :min="0" />
                   </template>
                 </template>
               </ATable>
@@ -393,8 +420,8 @@ onMounted(() => {
     </div>
     <ConfirmModal
       ref="modalComponent"
-      :title="'删除确定'"
-      :description-text="'是否确认删除?'"
+      :title="$t('common.deleteConfirmation')"
+      :description-text="$t('common.confirmDeletion')"
       :icon="{ name: 'delete' }"
       :icon-bg-color="'#F56C6C'"
       @confirm="confirm"
@@ -403,6 +430,11 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
+/* 添加选中行样式 */
+:deep(.selected-row) td {
+  background-color: #e0f5f5 !important;
+}
+
 .gateway-type-bottom {
   margin-bottom: 12px;
 }