2
0

fix:AP设备界面修改

This commit is contained in:
zhongzm
2025-01-08 17:49:20 +08:00
parent 168e4bf1b8
commit 462dd40e92
3 changed files with 53 additions and 109 deletions

28
src/typings/api.d.ts vendored
View File

@@ -540,35 +540,29 @@ declare namespace Api {
namespace Device { namespace Device {
interface ApDevice { interface ApDevice {
id: number; id: number;
deviceName: string; mac: string;
deviceIp: string; publicIp: string;
deviceMac: string; name: string;
deviceModel: string; status: number;
delFlag: boolean; model: string;
uptime: string;
createBy: string | null; createBy: string | null;
createTime: string; createTime: string;
updateBy: string | null; updateBy: string | null;
updateTime: string | null; updateTime: string | null;
userId: number | null; operate?: string;
} }
interface ApDeviceResponse { type ApDeviceResponse = App.Service.Response<Api.Common.PaginatingQueryRecord<ApDevice>>;
code: number;
msg: string;
data: {
rows: ApDevice[];
total: number;
};
}
interface ApDeviceParams { interface ApDeviceParams {
pageNum: number; pageNum: number;
pageSize: number; pageSize: number;
deviceName?: string; name?: string;
deviceIp?: string; mac?: string;
deviceMac?: string;
} }
interface TerminalDevice { interface TerminalDevice {
id: number; id: number;
clientName: string; clientName: string;

View File

@@ -16,11 +16,9 @@
<template #extra> <template #extra>
<TableHeaderOperation <TableHeaderOperation
v-model:columns="columnChecks" v-model:columns="columnChecks"
:disabled-delete="selectedRowKeys.length === 0"
:loading="loading" :loading="loading"
:show-delete="true"
:not-show-add="true" :not-show-add="true"
@delete="handleBatchDelete" :show-delete="false"
@refresh="getData" @refresh="getData"
/> />
</template> </template>
@@ -32,10 +30,6 @@
:loading="loading" :loading="loading"
row-key="id" row-key="id"
size="small" size="small"
:row-selection="{
selectedRowKeys,
onChange: onSelectChange
}"
:pagination="{ :pagination="{
...mobilePagination, ...mobilePagination,
total: mobilePagination.total, total: mobilePagination.total,
@@ -52,10 +46,10 @@
}" }"
> >
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'"> <template v-if="column.key === 'status'">
<ASpace> <ATag :color="record.status === 1 ? 'success' : 'error'">
<AButton type="primary" danger @click="handleDelete(record)">删除</AButton> {{ record.status === 1 ? '在线' : '离线' }}
</ASpace> </ATag>
</template> </template>
</template> </template>
</ATable> </ATable>
@@ -65,14 +59,15 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useTable, useTableOperate } from '@/hooks/common/table'; import { useTable } from '@/hooks/common/table';
import { SimpleScrollbar } from '~/packages/materials/src'; import { SimpleScrollbar } from '~/packages/materials/src';
import { computed, shallowRef } from 'vue'; import { computed, shallowRef } from 'vue';
import { useElementSize } from '@vueuse/core'; import { useElementSize } from '@vueuse/core';
import { fetchApDeviceList, deleteApDevices } from '@/service/api/auth'; import { fetchApDeviceList } from '@/service/api/auth';
import { Card as ACard, Table as ATable, Button as AButton, Space as ASpace, Modal, message } from 'ant-design-vue'; import { Card as ACard, Table as ATable, Tag as ATag } from 'ant-design-vue';
import DeviceSearch from './modules/device-search.vue'; import DeviceSearch from './modules/device-search.vue';
const wrapperEl = shallowRef<HTMLElement | null>(null); const wrapperEl = shallowRef<HTMLElement | null>(null);
const { height: wrapperElHeight } = useElementSize(wrapperEl); const { height: wrapperElHeight } = useElementSize(wrapperEl);
@@ -96,12 +91,10 @@ const {
console.log('Fetching with params:', JSON.stringify(params, null, 2)); console.log('Fetching with params:', JSON.stringify(params, null, 2));
const response = await fetchApDeviceList(params); const response = await fetchApDeviceList(params);
console.log('API Response:', response); console.log('API Response:', response);
const rows = response.data || [];
const total = Array.isArray(response.data) ? response.data.length : 0;
return { return {
data: { data: {
rows, rows: response.data || [],
total total: Array.isArray(response.data) ? response.data.length : 0
} }
}; };
} catch (error) { } catch (error) {
@@ -119,100 +112,57 @@ const {
apiParams: { apiParams: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
deviceName: '', name: '',
deviceMac: '' mac: ''
} as Api.Device.ApDeviceParams, } as Api.Device.ApDeviceParams,
rowKey: 'id', rowKey: 'id',
pagination: true, pagination: true,
columns: (): AntDesign.TableColumn<Api.Device.ApDevice>[] => [ columns: (): AntDesign.TableColumn<Api.Device.ApDevice>[] => [
{ {
key: 'deviceName', key: 'name',
dataIndex: 'deviceName', dataIndex: 'name',
title: '设备名称', title: '设备名称',
align: 'center', align: 'center',
width: 150 width: 150
}, },
{ {
key: 'deviceIp', key: 'publicIp',
dataIndex: 'deviceIp', dataIndex: 'publicIp',
title: 'IP地址', title: 'IP地址',
align: 'center', align: 'center',
width: 150 width: 150
}, },
{ {
key: 'deviceMac', key: 'mac',
dataIndex: 'deviceMac', dataIndex: 'mac',
title: 'MAC地址', title: 'MAC地址',
align: 'center', align: 'center',
width: 180 width: 180
}, },
{ {
key: 'deviceModel', key: 'model',
dataIndex: 'deviceModel', dataIndex: 'model',
title: '设备型号', title: '型号',
align: 'center', align: 'center',
width: 150 width: 150
},
{
key: 'uptime',
dataIndex: 'uptime',
title: '在线时间',
align: 'center',
width: 180
},
{
key: 'status',
dataIndex: 'status',
title: '状态',
align: 'center',
width: 100
} }
] ]
}); });
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( watch(
() => searchParams, () => searchParams,

View File

@@ -3,7 +3,7 @@
<AForm layout="inline"> <AForm layout="inline">
<AFormItem label="设备名称"> <AFormItem label="设备名称">
<AInput <AInput
v-model:value="model.deviceName" v-model:value="model.name"
placeholder="请输入设备名称" placeholder="请输入设备名称"
allow-clear allow-clear
class="w-200px" class="w-200px"
@@ -12,7 +12,7 @@
</AFormItem> </AFormItem>
<AFormItem label="MAC地址"> <AFormItem label="MAC地址">
<AInput <AInput
v-model:value="model.deviceMac" v-model:value="model.mac"
placeholder="请输入MAC地址" placeholder="请输入MAC地址"
allow-clear allow-clear
class="w-200px" class="w-200px"
@@ -44,8 +44,8 @@ import { Form as AForm, FormItem as AFormItem, Input as AInput, Button as AButto
interface Props { interface Props {
model: { model: {
deviceName?: string; name?: string;
deviceMac?: string; mac?: string;
pageNum: number; pageNum: number;
pageSize: number; pageSize: number;
}; };
@@ -65,8 +65,8 @@ const search = () => {
const reset = () => { const reset = () => {
emit('update:model', { emit('update:model', {
...props.model, ...props.model,
deviceName: '', name: '',
deviceMac: '', mac: '',
pageNum: 1 pageNum: 1
}); });
emit('reset'); emit('reset');