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

---
 src/service/api/auth.ts                       |   7 +
 src/typings/auto-imports.d.ts                 |   5 +
 src/typings/components.d.ts                   |   1 +
 src/views/device/apdevice/index.vue           | 246 ++++++++++++++++++
 .../device/apdevice/modules/device-search.vue |  84 ++++++
 5 files changed, 343 insertions(+)
 create mode 100644 src/views/device/apdevice/index.vue
 create mode 100644 src/views/device/apdevice/modules/device-search.vue

diff --git a/src/service/api/auth.ts b/src/service/api/auth.ts
index e635922..67734f0 100644
--- a/src/service/api/auth.ts
+++ b/src/service/api/auth.ts
@@ -171,6 +171,13 @@ export function fetchApDeviceList(params: Api.Device.ApDeviceParams) {
     params
   });
 }
+/** 删除AP设备 */
+export function deleteApDevices(ids: string) {
+  return request<any>({
+    url: `/system/device/${ids}`,
+    method: 'delete'
+  });
+}
 /** 获取终端设备列表 */
 export function fetchTerminalList(params: Api.Device.TerminalDeviceParams) {
   return request<Api.Device.TerminalDeviceResponse>({
diff --git a/src/typings/auto-imports.d.ts b/src/typings/auto-imports.d.ts
index 0a70adf..2a0c8f7 100644
--- a/src/typings/auto-imports.d.ts
+++ b/src/typings/auto-imports.d.ts
@@ -60,6 +60,7 @@ declare global {
   const defineStore: typeof import('pinia')['defineStore']
   const delData: typeof import('../service/api/dictData')['delData']
   const delJobLog: typeof import('../service/api/job')['delJobLog']
+  const deleteApDevices: typeof import('../service/api/auth')['deleteApDevices']
   const deletePackage: typeof import('../service/api/auth')['deletePackage']
   const describe: typeof import('vitest')['describe']
   const dict: typeof import('../store/modules/dict/index')['default']
@@ -121,7 +122,9 @@ declare global {
   const exportJobLog: typeof import('../service/api/jobLog')['exportJobLog']
   const extendRef: typeof import('@vueuse/core')['extendRef']
   const extractTabsByAllRoutes: typeof import('../store/modules/tab/shared')['extractTabsByAllRoutes']
+  const fetchApDeviceList: typeof import('../service/api/auth')['fetchApDeviceList']
   const fetchBillList: typeof import('../service/api/auth')['fetchBillList']
+  const fetchBillRuleList: typeof import('../service/api/auth')['fetchBillRuleList']
   const fetchCdrHistory: typeof import('../service/api/auth')['fetchCdrHistory']
   const fetchCustomBackendError: typeof import('../service/api/auth')['fetchCustomBackendError']
   const fetchGetAllPages: typeof import('../service/api/menu')['fetchGetAllPages']
@@ -133,6 +136,7 @@ declare global {
   const fetchRateLimitList: typeof import('../service/api/auth')['fetchRateLimitList']
   const fetchRefreshToken: typeof import('../service/api/auth')['fetchRefreshToken']
   const fetchRegister: typeof import('../service/api/auth')['fetchRegister']
+  const fetchTerminalList: typeof import('../service/api/auth')['fetchTerminalList']
   const filterAuthRoutesByRoles: typeof import('../store/modules/route/shared')['filterAuthRoutesByRoles']
   const filterTabsById: typeof import('../store/modules/tab/shared')['filterTabsById']
   const filterTabsByIds: typeof import('../store/modules/tab/shared')['filterTabsByIds']
@@ -270,6 +274,7 @@ declare global {
   const unref: typeof import('vue')['unref']
   const unrefElement: typeof import('@vueuse/core')['unrefElement']
   const until: typeof import('@vueuse/core')['until']
+  const updateBillRule: typeof import('../service/api/auth')['updateBillRule']
   const updateData: typeof import('../service/api/dictData')['updateData']
   const updateJob: typeof import('../service/api/job')['updateJob']
   const updateLocaleOfGlobalMenus: typeof import('../store/modules/route/shared')['updateLocaleOfGlobalMenus']
diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts
index 9f6b1c5..ba4e03c 100644
--- a/src/typings/components.d.ts
+++ b/src/typings/components.d.ts
@@ -79,6 +79,7 @@ declare module 'vue' {
     IconLocalLogo: typeof import('~icons/local/logo')['default']
     IconMdiDrag: typeof import('~icons/mdi/drag')['default']
     IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
+    IconMdiSearch: typeof import('~icons/mdi/search')['default']
     LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
     LookForward: typeof import('./../components/custom/look-forward.vue')['default']
     MenuToggler: typeof import('./../components/common/menu-toggler.vue')['default']
diff --git a/src/views/device/apdevice/index.vue b/src/views/device/apdevice/index.vue
new file mode 100644
index 0000000..803f931
--- /dev/null
+++ b/src/views/device/apdevice/index.vue
@@ -0,0 +1,246 @@
+<template>
+  <SimpleScrollbar>
+    <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
+      <DeviceSearch
+        v-model:model="searchParams"
+        :loading="loading"
+        @reset="handleReset"
+        @search="handleSearch"
+      />
+      <ACard
+        title="AP设备管理"
+        :bordered="false"
+        :body-style="{ flex: 1, overflow: 'hidden' }"
+        class="flex-col-stretch sm:flex-1-hidden card-wrapper"
+      >
+        <template #extra>
+          <TableHeaderOperation
+            v-model:columns="columnChecks"
+            :disabled-delete="selectedRowKeys.length === 0"
+            :loading="loading"
+            :show-delete="true"
+            :not-show-add="true"
+            @delete="handleBatchDelete"
+            @refresh="getData"
+          />
+        </template>
+
+        <ATable
+          ref="wrapperEl"
+          :columns="columns"
+          :data-source="data"
+          :loading="loading"
+          row-key="id"
+          size="small"
+          :row-selection="{
+            selectedRowKeys,
+            onChange: onSelectChange
+          }"
+          :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();
+          }"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'action'">
+              <ASpace>
+                <AButton type="primary" danger @click="handleDelete(record)">删除</AButton>
+              </ASpace>
+            </template>
+          </template>
+        </ATable>
+      </ACard>
+    </div>
+  </SimpleScrollbar>
+</template>
+
+<script setup lang="ts">
+import { useTable, useTableOperate } from '@/hooks/common/table';
+import { SimpleScrollbar } from '~/packages/materials/src';
+import { computed, shallowRef } from 'vue';
+import { useElementSize } from '@vueuse/core';
+import { fetchApDeviceList, deleteApDevices } from '@/service/api/auth';
+import { Card as ACard, Table as ATable, Button as AButton, Space as ASpace, Modal, message } from 'ant-design-vue';
+import DeviceSearch from './modules/device-search.vue';
+
+const wrapperEl = shallowRef<HTMLElement | null>(null);
+const { height: wrapperElHeight } = useElementSize(wrapperEl);
+
+const scrollConfig = computed(() => ({
+  y: wrapperElHeight.value - 72,
+  x: 800
+}));
+
+const {
+  columns,
+  columnChecks,
+  data,
+  loading,
+  getData,
+  mobilePagination,
+  searchParams,
+  resetSearchParams
+} = useTable({
+  apiFn: async (params: Api.Device.ApDeviceParams) => {
+    try {
+      console.log('Fetching with params:', JSON.stringify(params, null, 2));
+      const response = await fetchApDeviceList(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,
+    deviceName: '',
+    deviceMac: ''
+  } as Api.Device.ApDeviceParams,
+  rowKey: 'id',
+  pagination: true,
+  columns: (): AntDesign.TableColumn<Api.Device.ApDevice>[] => [
+    {
+      key: 'deviceName',
+      dataIndex: 'deviceName',
+      title: '设备名称',
+      align: 'center',
+      width: 150
+    },
+    {
+      key: 'deviceIp',
+      dataIndex: 'deviceIp',
+      title: 'IP地址',
+      align: 'center',
+      width: 150
+    },
+    {
+      key: 'deviceMac',
+      dataIndex: 'deviceMac',
+      title: 'MAC地址',
+      align: 'center',
+      width: 180
+    },
+    {
+      key: 'deviceModel',
+      dataIndex: 'deviceModel',
+      title: '设备型号',
+      align: 'center',
+      width: 150
+    }
+  ]
+});
+
+const {
+  checkedRowKeys: selectedRowKeys,
+  onBatchDeleted
+} = useTableOperate(data, { getData, idKey: 'id' });
+
+// 处理选择变化
+const onSelectChange = (keys: (string | number)[]) => {
+  selectedRowKeys.value = keys.map(key => Number(key));
+};
+
+// 处理单个删除
+const handleDelete = async (record: Api.Device.ApDevice) => {
+  try {
+    await Modal.confirm({
+      title: '确认删除',
+      content: '确定要删除该设备吗？',
+      okText: '确定',
+      cancelText: '取消',
+      okButtonProps: { danger: true }
+    });
+
+    await deleteApDevices(record.id.toString());
+    message.success('删除成功');
+    getData();
+  } catch (error) {
+    if (error) {
+      console.error('删除失败:', error);
+      message.error('删除失败');
+    }
+  }
+};
+
+// 处理批量删除
+const handleBatchDelete = async () => {
+  if (selectedRowKeys.value.length === 0) return;
+
+  try {
+    await Modal.confirm({
+      title: '确认删除',
+      content: '确定要删除选中的设备吗？',
+      okText: '确定',
+      cancelText: '取消',
+      okButtonProps: { danger: true }
+    });
+
+    const ids = selectedRowKeys.value.join(',');
+    await deleteApDevices(ids);
+    message.success('删除成功');
+    onBatchDeleted();
+  } catch (error) {
+    if (error) {
+      console.error('删除失败:', error);
+      message.error('删除失败');
+    }
+  }
+};
+
+// 监听搜索参数变化并打印日志
+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/apdevice/modules/device-search.vue b/src/views/device/apdevice/modules/device-search.vue
new file mode 100644
index 0000000..948958f
--- /dev/null
+++ b/src/views/device/apdevice/modules/device-search.vue
@@ -0,0 +1,84 @@
+<template>
+  <ACard :bordered="false" class="search-card">
+    <AForm layout="inline">
+      <AFormItem label="设备名称">
+        <AInput
+          v-model:value="model.deviceName"
+          placeholder="请输入设备名称"
+          allow-clear
+          class="w-200px"
+          @pressEnter="search"
+        />
+      </AFormItem>
+      <AFormItem label="MAC地址">
+        <AInput
+          v-model:value="model.deviceMac"
+          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: {
+    deviceName?: string;
+    deviceMac?: 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,
+    deviceName: '',
+    deviceMac: '',
+    pageNum: 1
+  });
+  emit('reset');
+};
+</script>
+
+<style scoped>
+.search-card {
+  margin-bottom: 16px;
+}
+
+.w-200px {
+  width: 200px;
+}
+</style>