fix:AP设备界面修改
This commit is contained in:
28
src/typings/api.d.ts
vendored
28
src/typings/api.d.ts
vendored
@@ -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;
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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');
|
||||||
|
|||||||
Reference in New Issue
Block a user