feat:终端设备界面以及接通

src/views/device/terminal/index.vue

@@ -0,0 +1,158 @@
+<template>
+  <SimpleScrollbar>
+    <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
+      <TerminalSearch
+        v-model:model="searchParams"
+        :loading="loading"
+        @reset="handleReset"
+        @search="handleSearch"
+      />
+      <ACard
+        title="终端设备"
+        :bordered="false"
+        :body-style="{ flex: 1, overflow: 'hidden' }"
+        class="flex-col-stretch sm:flex-1-hidden card-wrapper"
+      >
+        <ATable
+          ref="wrapperEl"
+          :columns="columns"
+          :data-source="data"
+          :loading="loading"
+          row-key="id"
+          size="small"
+          :pagination="{
+            ...mobilePagination,
+            total: mobilePagination.total,
+            current: searchParams.pageNum,
+            pageSize: searchParams.pageSize,
+            showTotal: (total: number) => `共 ${total} 条`
+          }"
+          :scroll="scrollConfig"
+          class="h-full"
+          @change="(pagination) => {
+            searchParams.pageNum = pagination.current;
+            searchParams.pageSize = pagination.pageSize;
+            getData();
+          }"
+        />
+      </ACard>
+    </div>
+  </SimpleScrollbar>
+</template>
+
+<script setup lang="ts">
+import { useTable } from '@/hooks/common/table';
+import { SimpleScrollbar } from '~/packages/materials/src';
+import { computed, shallowRef, watch } from 'vue';
+import { useElementSize } from '@vueuse/core';
+import { fetchTerminalList } from '@/service/api/auth';
+import { Card as ACard, Table as ATable } from 'ant-design-vue';
+import TerminalSearch from '@/views/device/terminal/modules/terminal-search.vue';
+
+const wrapperEl = shallowRef<HTMLElement | null>(null);
+const { height: wrapperElHeight } = useElementSize(wrapperEl);
+
+const scrollConfig = computed(() => ({
+  y: wrapperElHeight.value - 72,
+  x: 800
+}));
+
+const {
+  columns,
+  data,
+  loading,
+  getData,
+  mobilePagination,
+  searchParams,
+  resetSearchParams
+} = useTable({
+  apiFn: async (params: Api.Device.TerminalDeviceParams) => {
+    try {
+      console.log('Fetching with params:', JSON.stringify(params, null, 2));
+      const response = await fetchTerminalList(params);
+      console.log('API Response:', response);
+      const rows = response.data || [];
+      const total = Array.isArray(response.data) ? response.data.length : 0;
+      return {
+        data: {
+          rows,
+          total
+        }
+      };
+    } catch (error) {
+      console.error('API Error:', error);
+      return {
+        data: {
+          rows: [],
+          total: 0
+        },
+        error
+      };
+    }
+  },
+  immediate: true,
+  apiParams: {
+    pageNum: 1,
+    pageSize: 10,
+    clientName: '',
+    clientDeviceType: '',
+    clientMac: ''
+  } as Api.Device.TerminalDeviceParams,
+  rowKey: 'id',
+  pagination: true,
+  columns: (): AntDesign.TableColumn<Api.Device.TerminalDevice>[] => [
+    {
+      key: 'clientName',
+      dataIndex: 'clientName',
+      title: '设备名称',
+      align: 'center',
+      width: 150
+    },
+    {
+      key: 'clientDeviceType',
+      dataIndex: 'clientDeviceType',
+      title: '设备类型',
+      align: 'center',
+      width: 150
+    },
+    {
+      key: 'clientMac',
+      dataIndex: 'clientMac',
+      title: 'MAC地址',
+      align: 'center',
+      width: 180
+    }
+  ]
+});
+
+// 监听搜索参数变化并打印日志
+watch(
+  () => searchParams,
+  (newParams) => {
+    console.log('Search params changed:', JSON.stringify(newParams, null, 2));
+  },
+  { deep: true, immediate: true }
+);
+
+// 添加搜索处理函数
+const handleSearch = () => {
+  console.log('Searching with params:', JSON.stringify(searchParams, null, 2));
+  getData();
+};
+
+// 添加重置处理函数
+const handleReset = () => {
+  resetSearchParams();
+  getData();
+};
+</script>
+
+<style scoped>
+.h-full {
+  height: 100%;
+}
+
+.card-wrapper {
+  margin-top: 16px;
+}
+</style>