From 0977880d054512fd5cbb8b3145e128ba23412e74 Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Tue, 7 Jan 2025 18:19:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E7=BB=88=E7=AB=AF=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E4=BB=A5=E5=8F=8A=E6=8E=A5=E9=80=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/device/terminal/index.vue           | 158 ++++++++++++++++++
 .../terminal/modules/terminal-search.vue      |  95 +++++++++++
 2 files changed, 253 insertions(+)
 create mode 100644 src/views/device/terminal/index.vue
 create mode 100644 src/views/device/terminal/modules/terminal-search.vue

diff --git a/src/views/device/terminal/index.vue b/src/views/device/terminal/index.vue
new file mode 100644
index 0000000..8a27605
--- /dev/null
+++ b/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>
diff --git a/src/views/device/terminal/modules/terminal-search.vue b/src/views/device/terminal/modules/terminal-search.vue
new file mode 100644
index 0000000..37a64b1
--- /dev/null
+++ b/src/views/device/terminal/modules/terminal-search.vue
@@ -0,0 +1,95 @@
+<template>
+  <ACard :bordered="false" class="search-card">
+    <AForm layout="inline">
+      <AFormItem label="设备名称">
+        <AInput
+          v-model:value="model.clientName"
+          placeholder="请输入设备名称"
+          allow-clear
+          class="w-200px"
+          @pressEnter="search"
+        />
+      </AFormItem>
+      <AFormItem label="设备类型">
+        <AInput
+          v-model:value="model.clientDeviceType"
+          placeholder="请输入设备类型"
+          allow-clear
+          class="w-200px"
+          @pressEnter="search"
+        />
+      </AFormItem>
+      <AFormItem label="MAC地址">
+        <AInput
+          v-model:value="model.clientMac"
+          placeholder="请输入MAC地址"
+          allow-clear
+          class="w-200px"
+          @pressEnter="search"
+        />
+      </AFormItem>
+      <AFormItem>
+        <ASpace>
+          <AButton type="primary" :loading="loading" @click="search">
+            <template #icon>
+              <icon-mdi-search />
+            </template>
+            搜索
+          </AButton>
+          <AButton @click="reset">
+            <template #icon>
+              <icon-mdi-refresh />
+            </template>
+            重置
+          </AButton>
+        </ASpace>
+      </AFormItem>
+    </AForm>
+  </ACard>
+</template>
+
+<script setup lang="ts">
+import { Form as AForm, FormItem as AFormItem, Input as AInput, Button as AButton, Space as ASpace, Card as ACard } from 'ant-design-vue';
+
+interface Props {
+  model: {
+    clientName?: string;
+    clientDeviceType?: string;
+    clientMac?: string;
+    pageNum: number;
+    pageSize: number;
+  };
+  loading?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false
+});
+
+const emit = defineEmits(['update:model', 'search', 'reset']);
+
+const search = () => {
+  emit('search');
+};
+
+const reset = () => {
+  emit('update:model', {
+    ...props.model,
+    clientName: '',
+    clientDeviceType: '',
+    clientMac: '',
+    pageNum: 1
+  });
+  emit('reset');
+};
+</script>
+
+<style scoped>
+.search-card {
+  margin-bottom: 16px;
+}
+
+.w-200px {
+  width: 200px;
+}
+</style>