perf(views): 优化“网关协议列表管理”页面，支持编辑协议

src/views/gateway-protocol/GatewayProtocol.vue

@@ -1,18 +1,47 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, useTemplateRef } from 'vue';
+import { computed, onMounted, reactive, ref, useTemplateRef } from 'vue';
 import { message, Modal } from 'ant-design-vue';
 
 import ModalGuidance from '@/layout/ModalGuidance.vue';
 import SvgIcon from '@/components/SvgIcon.vue';
 import { useRequest } from '@/hooks/request';
+import { useViewVisible } from '@/hooks/view-visible';
 import { t } from '@/i18n';
-import { deleteProtocolBaseInfo, getProtocolList } from '@/api';
+import { deleteProtocolBaseInfo, getProtocolList, updateProtocolBaseInfo } from '@/api';
 
+import ProtocolContent from '../setup-protocol/ProtocolContent.vue';
 import SetupProtocol from '../setup-protocol/SetupProtocol.vue';
 
 import type { ColumnType } from 'ant-design-vue/es/table';
 import type { PageParams, ProtocolBaseInfo } from '@/types';
 
+const protocolInitialInfo: Partial<ProtocolBaseInfo> = {
+  id: undefined,
+  protocolName: '',
+  protocolType: undefined,
+  deviceType: undefined,
+  dataBit: 5,
+  parityBit: 'N',
+  stopBit: '1',
+  baudRate: undefined,
+  dataSendInterval: undefined,
+  highFreqSendInterval: undefined,
+  readTimeout: undefined,
+  nextDataReadDelay: undefined,
+  nextRoundDataReadDelay: undefined,
+  readContinuousAddr: undefined,
+  readContinuousAddrCode: undefined,
+  readContinuousAddrLength: undefined,
+  byteOrder: undefined,
+  byteOrderCode: undefined,
+  addrOrder: undefined,
+  addrOrderCode: undefined,
+};
+
+const protocolInfoForm = reactive<Partial<ProtocolBaseInfo>>({
+  ...protocolInitialInfo,
+});
+
 const protocolList = ref<ProtocolBaseInfo[]>([]);
 const protocolTotal = ref(0);
 const searchContent = ref('');
@@ -84,7 +113,8 @@ const handleAdd = () => {
 };
 
 const handleEdit = (record: ProtocolBaseInfo) => {
-  console.log('Edit item:', record);
+  Object.assign(protocolInfoForm, record);
+  showView();
 };
 
 const handleDelete = (record: ProtocolBaseInfo) => {
@@ -111,6 +141,25 @@ const handlePageChange = (page: number, pageSize: number) => {
 };
 
 const modalGuidanceRef = useTemplateRef('modalGuidance');
+
+const { isLoading: isConfirmLoading, handleRequest: handleModalConfirmRequest } = useRequest();
+const { visible, showView, hideView } = useViewVisible();
+const protocolContentRef = useTemplateRef('protocolContent');
+
+const handleClose = () => {
+  Object.assign(protocolInfoForm, protocolInitialInfo);
+};
+
+const handleOk = () => {
+  handleModalConfirmRequest(async () => {
+    await protocolContentRef.value?.validateProtocolInfo();
+    await protocolContentRef.value?.isAtLeastOneParam();
+    await updateProtocolBaseInfo(protocolInfoForm);
+    message.success(t('gatewayProtocol.editProtocolSuccessful'));
+    getProtocolData();
+    hideView();
+  });
+};
 </script>
 
 <template>
@@ -159,9 +208,36 @@ const modalGuidanceRef = useTemplateRef('modalGuidance');
     <ModalGuidance ref="modalGuidance" @finish="getProtocolData">
       <SetupProtocol />
     </ModalGuidance>
+    <AModal
+      v-model:open="visible"
+      wrap-class-name="gateway-protocol-modal"
+      :title="$t('common.editor')"
+      :width="1140"
+      centered
+      :mask-closable="false"
+      :after-close="handleClose"
+      :confirm-loading="isConfirmLoading"
+      destroy-on-close
+      @ok="handleOk"
+    >
+      <ProtocolContent ref="protocolContent" :info="protocolInfoForm" :is-recognized="false" />
+    </AModal>
   </div>
 </template>
 
+<style lang="scss">
+.gateway-protocol-modal {
+  .ant-modal-content {
+    height: 638px;
+  }
+
+  .ant-modal-body {
+    height: calc(100% - 84px);
+    overflow: hidden auto;
+  }
+}
+</style>
+
 <style lang="scss" scoped>
 .protocol-list-container {
   height: 100%;