From ff6669eb172a4080eb547dd381d9443a70e5ef7d Mon Sep 17 00:00:00 2001
From: fhysy <1149505133@qq.com>
Date: Thu, 7 Aug 2025 14:42:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E7=BD=91=E5=85=B3?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增接入方式列
- 修改网络组件和消息协议列的字段
- 优化接入方式下拉框样式，增加描述信息
- 添加接入方式列的自定义渲染
---
 .../src/views/operations/gateway/data.ts      | 35 +++++++++++++++++--
 .../src/views/operations/gateway/index.vue    |  9 +++++
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/apps/web-antd/src/views/operations/gateway/data.ts b/apps/web-antd/src/views/operations/gateway/data.ts
index 9ceda22..a40e9bf 100644
--- a/apps/web-antd/src/views/operations/gateway/data.ts
+++ b/apps/web-antd/src/views/operations/gateway/data.ts
@@ -1,6 +1,8 @@
 import type { FormSchemaGetter } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
+import { h } from 'vue';
+
 import { networkList } from '#/api/operations/network';
 import { protocolList } from '#/api/operations/protocol';
 
@@ -132,13 +134,18 @@ export const columns: VxeGridProps['columns'] = [
     title: '网关名称',
     field: 'name',
   },
+  {
+    title: '接入方式',
+    field: 'provider',
+    slots: { default: 'provider' },
+  },
   {
     title: '网络组件',
-    field: 'channelId',
+    field: 'channelName',
   },
   {
     title: '消息协议',
-    field: 'protocol',
+    field: 'protocolName',
   },
   {
     title: '启用状态',
@@ -180,6 +187,7 @@ export const drawerSchema: FormSchemaGetter = () => [
       options: providerOptions,
       placeholder: '请选择',
       showSearch: true,
+      class: 'w-full',
       onChange: async (value: string) => {
         console.log('抽屉表单接入方式变化:', value);
         if (networkOptionsUpdateCallback) {
@@ -187,7 +195,28 @@ export const drawerSchema: FormSchemaGetter = () => [
         }
       },
     },
-    rules: 'required',
+    renderComponentContent: () => {
+      return {
+        option: (option: any) => {
+          return h(
+            'div',
+            { class: 'flex flex-col', title: option.description },
+            [
+              h('span', { class: 'font-medium text-blue-500' }, option.label),
+              h(
+                'span',
+                {
+                  class: 'text-[14px] text-black/25 truncate',
+                  style:
+                    'max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;',
+                },
+                option.description,
+              ),
+            ],
+          );
+        },
+      };
+    },
   },
   {
     label: '网络组件',
diff --git a/apps/web-antd/src/views/operations/gateway/index.vue b/apps/web-antd/src/views/operations/gateway/index.vue
index 3558f8e..ffee24f 100644
--- a/apps/web-antd/src/views/operations/gateway/index.vue
+++ b/apps/web-antd/src/views/operations/gateway/index.vue
@@ -21,6 +21,7 @@ import {
   columns,
   getNetworkOptions,
   getProtocolOptions,
+  providerOptions,
   querySchema,
   registerNetworkOptionsUpdate,
 } from './data';
@@ -222,6 +223,14 @@ function handleDownloadExcel() {
           </a-button>
         </Space>
       </template>
+      <template #provider="{ row }">
+        <div class="flex flex-col">
+          <span class="font-medium">{{
+            providerOptions.find((option) => option.value === row.provider)
+              ?.label
+          }}</span>
+        </div>
+      </template>
       <template #enabled="{ row }">
         <Tag :color="row.enabled === '1' ? 'success' : 'error'">
           {{ row.enabled === '1' ? '启用' : '禁用' }}