feat:终端设备界面以及接通
This commit is contained in:
zhongzm
158
src/views/device/terminal/index.vue
Normal file
158
src/views/device/terminal/index.vue
Normal file
@@ -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>
|
||||
95
src/views/device/terminal/modules/terminal-search.vue
Normal file
95
src/views/device/terminal/modules/terminal-search.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user