2
0

fix:AP设备界面中英适配

This commit is contained in:
zhongzm
2025-02-07 18:30:15 +08:00
parent a974a042b0
commit 5b4f4b4ae1
4 changed files with 53 additions and 17 deletions

View File

@@ -698,6 +698,23 @@ const local: any = {
reset:'Reset', reset:'Reset',
search:'Search', search:'Search',
}, },
apdevice:{
aptitle:'AP Device Management',
online:'Online',
outline:'Offline',
apname:'Device Name',
ip:'IP',
mac:'MAC',
model:'Model',
uptime:'Online Time',
status:'Status',
total:'Total',
pledevice:'Please enter device name',
plemac:'Please enter MAC address',
search:'Search',
reset:'Reset',
},
}, },
form: { form: {
required: 'Cannot be empty', required: 'Cannot be empty',

View File

@@ -698,6 +698,23 @@ const local:any = {
reset:'重置', reset:'重置',
search:'查询', search:'查询',
}, },
apdevice:{
aptitle:'AP设备管理',
online:'在线',
outline:'离线',
apname:'设备名称',
ip:'IP地址',
mac:'MAC地址',
model:'型号',
uptime:'在线时间',
status:'状态',
total:'共',
pledevice:'请输入设备名称',
plemac:'请输入MAC地址',
search:'搜索',
reset:'重置',
},
}, },
form: { form: {
required: '不能为空', required: '不能为空',

View File

@@ -8,7 +8,7 @@
@search="handleSearch" @search="handleSearch"
/> />
<ACard <ACard
title="AP设备管理" :title="t('page.apdevice.aptitle')"
:bordered="false" :bordered="false"
:body-style="{ flex: 1, overflow: 'hidden' }" :body-style="{ flex: 1, overflow: 'hidden' }"
class="flex-col-stretch sm:flex-1-hidden card-wrapper" class="flex-col-stretch sm:flex-1-hidden card-wrapper"
@@ -35,7 +35,7 @@
total: mobilePagination.total, total: mobilePagination.total,
current: searchParams.pageNum, current: searchParams.pageNum,
pageSize: searchParams.pageSize, pageSize: searchParams.pageSize,
showTotal: (total: number) => ` ${total} ` showTotal: (total: number) => `${t('page.apdevice.total')} ${total} `
}" }"
:scroll="scrollConfig" :scroll="scrollConfig"
class="h-full" class="h-full"
@@ -48,7 +48,7 @@
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'status'"> <template v-if="column.key === 'status'">
<ATag :color="record.status === 1 ? 'success' : 'error'"> <ATag :color="record.status === 1 ? 'success' : 'error'">
{{ record.status === 1 ? '在线' : '离线' }} {{ record.status === 1 ? t('page.apdevice.online') : t('page.apdevice.outline') }}
</ATag> </ATag>
</template> </template>
</template> </template>
@@ -66,7 +66,8 @@ import { useElementSize } from '@vueuse/core';
import { fetchApDeviceList } from '@/service/api/auth'; import { fetchApDeviceList } from '@/service/api/auth';
import { Card as ACard, Table as ATable, Tag as ATag } 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';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const wrapperEl = shallowRef<HTMLElement | null>(null); const wrapperEl = shallowRef<HTMLElement | null>(null);
const { height: wrapperElHeight } = useElementSize(wrapperEl); const { height: wrapperElHeight } = useElementSize(wrapperEl);
@@ -121,42 +122,42 @@ const {
{ {
key: 'name', key: 'name',
dataIndex: 'name', dataIndex: 'name',
title: '设备名称', title: t('page.apdevice.apname'),
align: 'center', align: 'center',
width: 150 width: 150
}, },
{ {
key: 'publicIp', key: 'publicIp',
dataIndex: 'publicIp', dataIndex: 'publicIp',
title: 'IP地址', title: t('page.apdevice.ip'),
align: 'center', align: 'center',
width: 150 width: 150
}, },
{ {
key: 'mac', key: 'mac',
dataIndex: 'mac', dataIndex: 'mac',
title: 'MAC地址', title: t('page.apdevice.mac'),
align: 'center', align: 'center',
width: 180 width: 180
}, },
{ {
key: 'model', key: 'model',
dataIndex: 'model', dataIndex: 'model',
title: '型号', title: t('page.apdevice.model'),
align: 'center', align: 'center',
width: 150 width: 150
}, },
{ {
key: 'uptime', key: 'uptime',
dataIndex: 'uptime', dataIndex: 'uptime',
title: '在线时间', title: t('page.apdevice.uptime'),
align: 'center', align: 'center',
width: 180 width: 180
}, },
{ {
key: 'status', key: 'status',
dataIndex: 'status', dataIndex: 'status',
title: '状态', title: t('page.apdevice.status'),
align: 'center', align: 'center',
width: 100 width: 100
} }

View File

@@ -1,19 +1,19 @@
<template> <template>
<ACard :bordered="false" class="search-card"> <ACard :bordered="false" class="search-card">
<AForm layout="inline"> <AForm layout="inline">
<AFormItem label="设备名称"> <AFormItem :label="t('page.apdevice.apname')">
<AInput <AInput
v-model:value="model.name" v-model:value="model.name"
placeholder="请输入设备名称" :placeholder="t('page.apdevice.pledevice')"
allow-clear allow-clear
class="w-200px" class="w-200px"
@pressEnter="search" @pressEnter="search"
/> />
</AFormItem> </AFormItem>
<AFormItem label="MAC地址"> <AFormItem :label="t('page.apdevice.mac')">
<AInput <AInput
v-model:value="model.mac" v-model:value="model.mac"
placeholder="请输入MAC地址" :placeholder="t('page.apdevice.plemac')"
allow-clear allow-clear
class="w-200px" class="w-200px"
@pressEnter="search" @pressEnter="search"
@@ -25,13 +25,13 @@
<template #icon> <template #icon>
<icon-mdi-search /> <icon-mdi-search />
</template> </template>
搜索 {{ t('page.apdevice.search') }}
</AButton> </AButton>
<AButton @click="reset"> <AButton @click="reset">
<template #icon> <template #icon>
<icon-mdi-refresh /> <icon-mdi-refresh />
</template> </template>
重置 {{ t('page.apdevice.reset') }}
</AButton> </AButton>
</ASpace> </ASpace>
</AFormItem> </AFormItem>
@@ -41,7 +41,8 @@
<script setup lang="ts"> <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'; import { Form as AForm, FormItem as AFormItem, Input as AInput, Button as AButton, Space as ASpace, Card as ACard } from 'ant-design-vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
interface Props { interface Props {
model: { model: {
name?: string; name?: string;