159 lines
3.8 KiB
Vue
159 lines
3.8 KiB
Vue
<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>
|