WFC/fe.wfc
2
0
Fork 0
Code Activity

fix：ap设备界面功能增加

Browse Source
This commit is contained in:
zhongzm
2025-02-20 15:56:58 +08:00
parent 4ef332f5e9
commit d8c665b8ae
1 changed files with 530 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

544
src/views/device/apdevice/index.vue
View File

@@ -14,13 +14,32 @@
class="flex-col-stretch sm:flex-1-hidden card-wrapper"
>
<template #extra>
<TableHeaderOperation
<div class="flex items-center gap-4">
<a-select
v-model:value="selectedSiteId"
:loading="siteLoading"
:placeholder="t('page.apdevice.selectSite')"
style="width: 200px"
@change="handleSiteChange"
>
<a-select-option
v-for="site in siteList"
:key="site.siteId"
:value="site.siteId"
>
{{ site.name }}
</a-select-option>
</a-select>
<TableHeaderOperation
v-model:columns="columnChecks"
:loading="loading"
:not-show-add="true"
:show-delete="false"
@add="handleAdd"
@refresh="getData"
/>
</div>
</template>
<ATable
@@ -51,9 +70,156 @@
{{ record.status === 1 ? t('page.apdevice.online') : t('page.apdevice.outline') }}
</ATag>
</template>
<template v-if="column.key === 'operate'">
<div class="flex items-center justify-center gap-2">
<a-tooltip :title="t('page.apdevice.editConfig')">
<a-button type="link" size="small" @click="handleEditConfig(record)">
<template #icon>
<setting-outlined />
</template>
</a-button>
</a-tooltip>
<a-tooltip :title="t('page.apdevice.forget')">
<a-button type="link" size="small" @click="handleForgetDevice(record)">
<template #icon>
<delete-outlined />
</template>
</a-button>
</a-tooltip>
<template v-if="record.status === 1">
<a-tooltip :title="t('page.apdevice.restart')">
<a-button type="link" size="small" @click="handleRestart(record)">
<template #icon>
<reload-outlined />
</template>
</a-button>
</a-tooltip>
</template>
<template v-if="record.status === 0">
<a-tooltip :title="t('page.apdevice.adopt')">
<a-button type="link" size="small" @click="handleAdopt(record)">
<template #icon>
<plus-outlined />
</template>
</a-button>
</a-tooltip>
</template>
</div>
</template>
</template>
</ATable>
</ACard>
<!-- 添加设备对话框 -->
<a-modal
v-model:visible="addDeviceVisible"
:title="t('page.apdevice.addDevice')"
@ok="handleAddConfirm"
>
<a-form
:model="addDeviceForm"
:rules="addDeviceRules"
layout="vertical"
ref="formRef"
>
<a-form-item name="sn" :label="t('page.apdevice.sn')">
<a-input v-model:value="addDeviceForm.sn" autocomplete="off"/>
</a-form-item>
<a-form-item name="name" :label="t('page.apdevice.name')">
<a-input v-model:value="addDeviceForm.name" autocomplete="off"/>
</a-form-item>
<a-form-item name="username" :label="t('page.apdevice.username')">
<a-input v-model:value="addDeviceForm.username" autocomplete="off"/>
</a-form-item>
<a-form-item name="password" :label="t('page.apdevice.password')">
<a-input-password v-model:value="addDeviceForm.password" autocomplete="new-password"/>
</a-form-item>
</a-form>
</a-modal>
<!-- 修改配置对话框 -->
<a-modal
v-model:visible="configVisible"
:title="t('page.apdevice.editConfig')"
@ok="handleConfigConfirm"
>
<a-form
:model="configForm"
:rules="configRules"
layout="vertical"
ref="configFormRef"
>
<a-form-item name="name" :label="t('page.apdevice.name')">
<a-input v-model:value="configForm.name" />
</a-form-item>
<a-form-item name="ledSetting" :label="t('page.apdevice.led')">
<a-radio-group v-model:value="configForm.ledSetting">
<a-radio :value="2">{{ t('page.apdevice.useSiteSettings') }}</a-radio>
<a-radio :value="1">{{ t('page.apdevice.on') }}</a-radio>
<a-radio :value="0">{{ t('page.apdevice.off') }}</a-radio>
</a-radio-group>
</a-form-item>
<!-- <a-form-item name="tagIds" :label="t('page.apdevice.deviceTags')">-->
<!-- <a-select-->
<!-- v-model:value="configForm.tagIds"-->
<!-- mode="multiple"-->
<!-- :placeholder="t('page.apdevice.selectTags')"-->
<!-- >-->
<!-- <a-select-option v-for="tag in tagsList" :key="tag.id" :value="tag.id">-->
<!-- {{ tag.name }}-->
<!-- </a-select-option>-->
<!-- </a-select>-->
<!-- </a-form-item>-->
<a-form-item name="longitude" :label="t('page.apdevice.longitude')">
<a-input-number
v-model:value="configForm.longitude"
:precision="6"
style="width: 100%"
/>
</a-form-item>
<a-form-item name="latitude" :label="t('page.apdevice.latitude')">
<a-input-number
v-model:value="configForm.latitude"
:precision="6"
style="width: 100%"
/>
</a-form-item>
<a-form-item name="address" :label="t('page.apdevice.address')">
<a-textarea
v-model:value="configForm.address"
:auto-size="{ minRows: 2, maxRows: 6 }"
/>
</a-form-item>
</a-form>
</a-modal>
<!-- 纳管设备对话框 -->
<a-modal
v-model:visible="adoptVisible"
:title="t('page.apdevice.adopt')"
@ok="handleAdoptConfirm"
>
<a-form
:model="adoptForm"
:rules="adoptRules"
layout="vertical"
ref="adoptFormRef"
>
<a-form-item name="username" :label="t('page.apdevice.username')">
<a-input v-model:value="adoptForm.username" autocomplete="off"/>
</a-form-item>
<a-form-item name="password" :label="t('page.apdevice.password')">
<a-input-password v-model:value="adoptForm.password" autocomplete="new-password"/>
</a-form-item>
</a-form>
</a-modal>
</div>
</SimpleScrollbar>
</template>
@@ -63,10 +229,12 @@ import { useTable } from '@/hooks/common/table';
import { SimpleScrollbar } from '~/packages/materials/src';
import { computed, shallowRef } from 'vue';
import { useElementSize } from '@vueuse/core';
import { fetchApDeviceList } from '@/service/api/auth';
import { Card as ACard, Table as ATable, Tag as ATag } from 'ant-design-vue';
import { fetchApDeviceList,forgetApDevice, addApDevice } from '@/service/api/auth';
import {Card as ACard, Table as ATable, Tag as ATag, Modal, message } from 'ant-design-vue';
import DeviceSearch from './modules/device-search.vue';
import { useI18n } from 'vue-i18n';
import { SettingOutlined, DeleteOutlined, ReloadOutlined,PlusOutlined } from '@ant-design/icons-vue';
import {Rule} from "ant-design-vue/es/form";
const { t } = useI18n();
const wrapperEl = shallowRef<HTMLElement | null>(null);
@@ -77,6 +245,42 @@ const scrollConfig = computed(() => ({
x: 800
}));
// 添加站点相关的状态
const siteList = ref<Api.Site.SiteInfo[]>([]);
const selectedSiteId = ref<string>('');
const siteLoading = ref(false);
// 获取站点列表
const getSiteList = async () => {
try {
siteLoading.value = true;
const response = await fetchSiteList({
pageNum: 1,
pageSize: 100
});
// 适配新的响应格式
siteList.value = response.data.rows || [];
// 如果有站点数据，默认选择第一个
if (siteList.value.length > 0) {
selectedSiteId.value = siteList.value[0].siteId; // 使用 siteId 而不是 id
await getData();
}
} catch (error) {
console.error('Get site list error:', error);
message.error(t('page.apdevice.getSiteError'));
} finally {
siteLoading.value = false;
}
};
// 处理站点变更
const handleSiteChange = async (value: string) => {
selectedSiteId.value = value;
await getData();
};
const {
columns,
columnChecks,
@@ -86,15 +290,22 @@ const {
mobilePagination,
searchParams,
} = 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);
apiFn: async (params: { searchKey?: string; pageNum: number; pageSize: number }) => {
if (!selectedSiteId.value) {
return {
data: {
rows: response.data || [],
total: Array.isArray(response.data) ? response.data.length : 0
rows: [],
total: 0
}
};
}
try {
const response = await fetchApDeviceList(selectedSiteId.value, params);
return {
data: {
rows: response.data.rows,
total: response.data.total
}
};
} catch (error) {
@@ -108,7 +319,7 @@ const {
};
}
},
immediate: true,
immediate: false,
apiParams: {
pageNum: 1,
pageSize: 10,
@@ -159,6 +370,13 @@ const {
title: t('page.apdevice.status'),
align: 'center',
width: 100
},
{
key: 'operate',
title: t('common.operate'),
align: 'center',
width: 100,
fixed: 'right'
}
]
});
@@ -184,14 +402,312 @@ const handleReset = () => {
const currentPageSize = searchParams.pageSize;
// 重置搜索参数
searchParams.name = '';
searchParams.mac = '';
searchParams.searchKey = '';
searchParams.pageNum = 1;
searchParams.pageSize = currentPageSize;
// 重新获取数据
getData();
};
// 添加相关的处理函数
// 处理打开配置对话框
const handleEditConfig = async (record: Api.Device.ApDevice) => {
try {
if (!selectedSiteId.value) {
throw new Error('No site selected');
}
const hide = message.loading(t('common.loading'), 0);
// 先获取设备当前的配置
const response = await getApDeviceConfig(selectedSiteId.value, record.mac);
hide();
// 保存当前编辑的设备信息
currentDevice.value = record;
// 使用获取到的配置更新表单，处理 null 和嵌套对象
configForm.value = {
name: response.data?.name || record.name,
ledSetting: response.data?.ledSetting ?? 2, // 如果没有设置，默认使用站点设置
// tagIds: response.data?.tagIds || [], // 暂时注释掉
longitude: response.data?.location?.longitude,
latitude: response.data?.location?.latitude,
address: response.data?.location?.address || ''
};
// 显示配置对话框
configVisible.value = true;
} catch (error) {
console.error('Get device config error:', error);
message.error(t('page.apdevice.getConfigError'));
}
};
const handleForgetDevice = (record: Api.Device.ApDevice) => {
Modal.confirm({
title: t('common.confirm'),
content: t('page.apdevice.forgetConfirm'),
onOk: async () => {
try {
const hide = message.loading(t('common.loading'), 0);
console.log('Forgetting device:', record);
if (!selectedSiteId.value || !record.mac) {
throw new Error('Missing required parameters: siteId or mac');
}
// 使用当前选中的 siteId
const response = await forgetApDevice(selectedSiteId.value, record.mac);
console.log('Forget device response:', response);
hide();
message.success(t('page.apdevice.forgetSuccess'));
// 重新获取列表数据
getData();
} catch (error) {
console.error('Forget device error:', error);
message.error(t('page.apdevice.forgetError'));
throw error;
}
}
});
};
const handleRestart = (record: Api.Device.ApDevice) => {
// 处理重启设备
Modal.confirm({
title: t('common.confirm'),
content: t('page.apdevice.restartConfirm'),
onOk: async () => {
// 调用重启设备 API
console.log('Restart device:', record);
}
});
};
// 纳管表单数据
const adoptForm = ref({
username: '',
password: ''
});
// 纳管对话框可见性
const adoptVisible = ref(false);
// 当前要纳管的设备
const adoptingDevice = ref<Api.Device.ApDevice | null>(null);
// 处理纳管按钮点击
const handleAdopt = (record: Api.Device.ApDevice) => {
adoptingDevice.value = record;
adoptForm.value = {
username: '',
password: ''
};
adoptVisible.value = true;
};
// 处理纳管确认
const handleAdoptConfirm = async () => {
try {
if (!adoptingDevice.value || !selectedSiteId.value) {
throw new Error('Missing device or site information');
}
const hide = message.loading(t('common.loading'), 0);
// 构造请求参数，只有在有值时才包含
const params: { username?: string; password?: string } = {};
if (adoptForm.value.username) {
params.username = adoptForm.value.username;
}
if (adoptForm.value.password) {
params.password = adoptForm.value.password;
}
await adoptApDevice(selectedSiteId.value, adoptingDevice.value.mac, params);
hide();
message.success(t('page.apdevice.adoptSuccess'));
adoptVisible.value = false;
// 重新获取列表数据
getData();
} catch (error) {
console.error('Adopt device error:', error);
message.error(t('page.apdevice.adoptError'));
}
};
// 修改表单验证规则的定义
const addDeviceRules = {
sn: [
{ required: true, message: t('page.apdevice.snRequired'), trigger: 'blur' },
{
pattern: /^[A-Z0-9]{13}$/,
message: t('page.apdevice.snFormatError'),
trigger: 'blur'
}
] as Rule[],
name: [
{
pattern: /^[^ \+\-\@\=]$|^[^ \+\-\@\=].{0,126}[^ ]$/,
message: t('page.apdevice.nameFormatError'),
trigger: 'blur'
}
] as Rule[]
};
// 添加设备的表单数据
const addDeviceForm = ref({
sn: '',
name: '',
username: '',
password: ''
});
// 添加设备对话框的可见性
const addDeviceVisible = ref(false);
// 处理添加设备
const handleAdd = () => {
addDeviceVisible.value = true;
};
// 处理添加设备的确认
const handleAddConfirm = async () => {
try {
// 先验证表单
await formRef.value?.validate();
const hide = message.loading(t('common.loading'), 0);
// 构造请求参数，即使所有字段都为空也要发送一个空对象
// 构造请求参数，确保 sn 字段存在
const deviceParams: Api.Device.AddApDeviceItem = {
sn: addDeviceForm.value.sn // sn 是必填的
};
// 只添加其他有值的字段
if (addDeviceForm.value.name) {
deviceParams.name = addDeviceForm.value.name;
}
if (addDeviceForm.value.username) {
deviceParams.username = addDeviceForm.value.username;
}
if (addDeviceForm.value.password) {
deviceParams.password = addDeviceForm.value.password;
}
await addApDevice(selectedSiteId.value, deviceParams);
hide();
message.success(t('page.apdevice.addSuccess'));
addDeviceVisible.value = false;
// 清空表单
addDeviceForm.value = {
sn: '',
name: '',
username: '',
password: ''
};
// 重新获取列表数据
getData();
} catch (error) {
console.error('Add device error:', error);
message.error(t('page.apdevice.addError'));
}
};
// 添加表单引用
const formRef = ref();
// 配置表单的数据
const configForm = ref<Api.Device.ApDeviceConfigForm>({
name: '',
ledSetting: 2,
// tagIds: [],
longitude: undefined,
latitude: undefined,
address: ''
});
// 配置对话框的可见性
const configVisible = ref(false);
// 配置表单的验证规则
const configRules = {
name: [
{
pattern: /^[^ \+\-\@\=]$|^[^ \+\-\@\=].{0,126}[^ ]$/,
message: t('page.apdevice.nameFormatError'),
trigger: 'blur'
}
] as Rule[],
longitude: [
{
type: 'number',
min: -180,
max: 180,
message: t('page.apdevice.longitudeError'),
trigger: 'change'
}
] as Rule[],
latitude: [
{
type: 'number',
min: -90,
max: 90,
message: t('page.apdevice.latitudeError'),
trigger: 'change'
}
] as Rule[]
};
// 当前编辑的设备
const currentDevice = ref<Api.Device.ApDevice | null>(null);
// 处理配置确认
const handleConfigConfirm = async () => {
try {
await configFormRef.value?.validate();
if (!currentDevice.value || !selectedSiteId.value) {
throw new Error('Missing device or site information');
}
const hide = message.loading(t('common.loading'), 0);
await updateApDeviceConfig(
selectedSiteId.value,
currentDevice.value.mac,
configForm.value
);
hide();
message.success(t('page.apdevice.configSuccess'));
configVisible.value = false;
// 重新获取列表数据
getData();
} catch (error) {
console.error('Update config error:', error);
message.error(t('page.apdevice.configError'));
}
};
// 配置表单引用
const configFormRef = ref();
// 在组件挂载时获取站点列表
onMounted(() => {
getSiteList();
});
</script>
<style scoped>