From 2076a27a262b9af9985e97c307c1679a9eb6a6e7 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 22 Jan 2026 09:53:01 +0800
Subject: [PATCH] =?UTF-8?q?feat(iot):=E3=80=90=E7=BD=91=E5=85=B3=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=EF=BC=9A30%=E3=80=91=E5=A2=9E=E5=8A=A0=E7=BD=91?=
 =?UTF-8?q?=E5=85=B3=E8=AE=BE=E5=A4=87=E7=BB=91=E5=AE=9A=E8=83=BD=E5=8A=9B?=
 =?UTF-8?q?=EF=BC=88=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81=EF=BC=89=EF=BC=8C?=
 =?UTF-8?q?=E5=9F=BA=E4=BA=8E=20optimized-pondering-dragon.md=20=E8=A7=84?=
 =?UTF-8?q?=E5=88=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/iot/device/device/index.ts            |   9 +-
 src/api/iot/product/product/index.ts          |   4 +-
 .../device/detail/DeviceDetailsSubDevice.vue  | 136 ++++++++++++------
 3 files changed, 100 insertions(+), 49 deletions(-)

diff --git a/src/api/iot/device/device/index.ts b/src/api/iot/device/device/index.ts
index be5193c6d..d41429e0b 100644
--- a/src/api/iot/device/device/index.ts
+++ b/src/api/iot/device/device/index.ts
@@ -178,11 +178,8 @@ export const DeviceApi = {
     })
   },
 
-  // 获取可绑定到网关的子设备列表
-  getBindableSubDeviceList: async (gatewayId?: number) => {
-    return await request.get<DeviceVO[]>({
-      url: `/iot/device/bindable-sub-device-list`,
-      params: { gatewayId }
-    })
+  // 获取未绑定网关的子设备分页
+  getUnboundSubDevicePage: async (params: any) => {
+    return await request.get({ url: `/iot/device/unbound-sub-device-page`, params })
   }
 }
diff --git a/src/api/iot/product/product/index.ts b/src/api/iot/product/product/index.ts
index a34efaeb9..d491d3b28 100644
--- a/src/api/iot/product/product/index.ts
+++ b/src/api/iot/product/product/index.ts
@@ -68,8 +68,8 @@ export const ProductApi = {
   },
 
   // 查询产品（精简）列表
-  getSimpleProductList() {
-    return request.get({ url: '/iot/product/simple-list' })
+  getSimpleProductList(deviceType?: number) {
+    return request.get({ url: '/iot/product/simple-list', params: { deviceType } })
   },
 
   // 根据 ProductKey 获取产品信息
diff --git a/src/views/iot/device/device/detail/DeviceDetailsSubDevice.vue b/src/views/iot/device/device/detail/DeviceDetailsSubDevice.vue
index 16a406c4f..d24ad2995 100644
--- a/src/views/iot/device/device/detail/DeviceDetailsSubDevice.vue
+++ b/src/views/iot/device/device/detail/DeviceDetailsSubDevice.vue
@@ -62,40 +62,82 @@
   </ContentWrap>
 
   <!-- 添加子设备弹窗 -->
-  <!-- TODO @AI：需要增加检索：产品、设备等检索，可以一起讨论下； -->
-  <Dialog title="添加子设备" v-model="bindDialogVisible" width="800px">
-    <el-table
-      ref="bindTableRef"
-      v-loading="bindFormLoading"
-      :data="bindableDevices"
-      :stripe="true"
-      :show-overflow-tooltip="true"
-      @selection-change="handleBindSelectionChange"
-      max-height="400px"
-    >
-      <el-table-column type="selection" width="55" />
-      <el-table-column label="DeviceName" align="center" prop="deviceName" />
-      <el-table-column label="备注名称" align="center" prop="nickname" />
-      <el-table-column label="产品名称" align="center" prop="productName" />
-      <el-table-column label="设备状态" align="center" prop="state">
-        <template #default="{ row }">
-          <dict-tag :type="DICT_TYPE.IOT_DEVICE_STATE" :value="row.state" />
-        </template>
-      </el-table-column>
-    </el-table>
+  <Dialog title="添加子设备" v-model="bindDialogVisible" width="900px">
+    <ContentWrap>
+      <!-- 搜索区域 -->
+      <el-form :model="bindQueryParams" ref="bindQueryFormRef" :inline="true" class="-mb-15px">
+        <el-form-item label="产品" prop="productId">
+          <ProductSelect
+            v-model="bindQueryParams.productId"
+            :device-type="DeviceTypeEnum.GATEWAY_SUB"
+            class="!w-200px"
+          />
+        </el-form-item>
+        <el-form-item label="设备名称" prop="deviceName">
+          <el-input
+            v-model="bindQueryParams.deviceName"
+            placeholder="请输入设备名称"
+            clearable
+            class="!w-200px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getBindableDevicePage">
+            <Icon icon="ep:search" class="mr-5px" /> 搜索
+          </el-button>
+          <el-button @click="resetBindQuery">
+            <Icon icon="ep:refresh" class="mr-5px" /> 重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </ContentWrap>
+
+    <ContentWrap>
+      <!-- 分页表格 -->
+      <el-table
+        ref="bindTableRef"
+        v-loading="bindFormLoading"
+        :data="bindableDevices"
+        :stripe="true"
+        :show-overflow-tooltip="true"
+        @selection-change="handleBindSelectionChange"
+        max-height="400px"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column label="DeviceName" align="center" prop="deviceName" />
+        <el-table-column label="备注名称" align="center" prop="nickname" />
+        <el-table-column label="产品名称" align="center" prop="productName" />
+        <el-table-column label="设备状态" align="center" prop="state">
+          <template #default="{ row }">
+            <dict-tag :type="DICT_TYPE.IOT_DEVICE_STATE" :value="row.state" />
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页组件 -->
+      <Pagination
+        v-model:page="bindQueryParams.pageNo"
+        v-model:limit="bindQueryParams.pageSize"
+        :total="bindTotal"
+        @pagination="getBindableDevicePage"
+      />
+    </ContentWrap>
+
     <template #footer>
-      <el-button @click="bindDialogVisible = false">取消</el-button>
       <el-button type="primary" @click="handleBindSubmit" :loading="bindFormLoading">
         确定（已选 {{ bindSelectedIds.length }} 个）
       </el-button>
+      <el-button @click="bindDialogVisible = false">取消</el-button>
     </template>
   </Dialog>
 </template>
 
 <script setup lang="ts">
 import { DeviceApi, DeviceVO } from '@/api/iot/device/device'
+import { DeviceTypeEnum } from '@/api/iot/product/product'
 import { DICT_TYPE } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
+import ProductSelect from '@/views/iot/product/product/components/ProductSelect.vue'
 
 const props = defineProps<{
   gatewayId: number
@@ -104,18 +146,23 @@ const props = defineProps<{
 const message = useMessage()
 const { push } = useRouter()
 
-// TODO @AI：注释使用尾注释；
-// 列表数据
-const loading = ref(false)
-const subDeviceList = ref<DeviceVO[]>([])
-const selectedIds = ref<number[]>([])
+const loading = ref(false) // 列表加载状态
+const subDeviceList = ref<DeviceVO[]>([]) // 子设备列表
+const selectedIds = ref<number[]>([]) // 选中的设备ID
 
-// 绑定弹窗数据
-const bindDialogVisible = ref(false)
-const bindFormLoading = ref(false)
+const bindDialogVisible = ref(false) // 绑定弹窗可见性
+const bindFormLoading = ref(false) // 绑定弹窗加载状态
 const bindTableRef = ref()
-const bindableDevices = ref<DeviceVO[]>([])
-const bindSelectedIds = ref<number[]>([])
+const bindQueryFormRef = ref()
+const bindableDevices = ref<DeviceVO[]>([]) // 可绑定设备列表
+const bindSelectedIds = ref<number[]>([]) // 绑定选中的设备ID
+const bindTotal = ref(0) // 可绑定设备总数
+const bindQueryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  productId: undefined as number | undefined,
+  deviceName: ''
+})
 
 /** 获取子设备列表 */
 const getSubDeviceList = async () => {
@@ -141,18 +188,29 @@ const handleSelectionChange = (selection: DeviceVO[]) => {
 const openBindDialog = async () => {
   bindSelectedIds.value = []
   bindDialogVisible.value = true
+  await getBindableDevicePage()
+}
+
+/** 获取可绑定设备分页 */
+const getBindableDevicePage = async () => {
   bindFormLoading.value = true
   try {
-    // 获取可绑定的子设备列表
-    const list = await DeviceApi.getBindableSubDeviceList(props.gatewayId)
-    // 排除已绑定到当前网关的设备
-    // TODO @AI：不用排除，后端已经排除；
-    bindableDevices.value = list.filter((device: DeviceVO) => device.gatewayId !== props.gatewayId)
+    const result = await DeviceApi.getUnboundSubDevicePage(bindQueryParams)
+    bindableDevices.value = result.list
+    bindTotal.value = result.total
   } finally {
     bindFormLoading.value = false
   }
 }
 
+/** 重置绑定弹窗搜索条件 */
+const resetBindQuery = () => {
+  bindQueryParams.pageNo = 1
+  bindQueryParams.productId = undefined
+  bindQueryParams.deviceName = ''
+  getBindableDevicePage()
+}
+
 /** 绑定弹窗多选框选中数据 */
 const handleBindSelectionChange = (selection: DeviceVO[]) => {
   bindSelectedIds.value = selection.map((item) => item.id)
@@ -203,8 +261,4 @@ const handleUnbindBatch = async () => {
 onMounted(async () => {
   await getSubDeviceList()
 })
-
-// 暴露刷新方法
-// TODO @AI：refresh 需要提供么？
-defineExpose({ refresh: getSubDeviceList })
 </script>