OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

fix: UDM用户数据表格优化

Browse Source
This commit is contained in:
TsMask
2023-11-25 15:26:56 +08:00
parent 9f5f35c79d
commit 03a3899377
7 changed files with 170 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/i18n/locales/en-US.ts
View File

@@ -37,6 +37,7 @@ export default {
tableStripedText: 'Form Zebra',
reloadText: 'Refresh',
columnSetText: 'Column Setting',
columnSetTitle: 'Column Display / Sorting',
sizeText: 'Density',
size: {
default: 'Default',
@@ -493,8 +494,7 @@ export default {
delSure:'Are you sure you want to delete the user with IMSI number: {imsi}?',
},
sub: {
subInfo:'Subscription Info',
neTypePlease: 'Query network element Object',
subInfo:' Subscription Info',
neType: 'UDM Object',
export: 'Export',
exportConfirm: 'Are you sure to export all signed user data?',
@@ -528,16 +528,13 @@ export default {
hplmnOdbTip: 'HPLMN-ODB homing operator-determined blocking, i.e., the ability of a subscriber to access services in the EPS network is determined by the subscriber is homing operator',
ardTip:'Access-Restriction-Data (Access-Restriction-Data), can be used to distinguish between 2G/3G/LTE users, to facilitate the coexistence of 2G/3G/LTE network for different types of users to distinguish between the service',
},
base5G: {
neTypePlease: 'Query network element object',
base5G: {
neType: 'AMF Object',
},
ue: {
neTypePlease: 'Query network element object',
ue: {
neType: 'SMF Object',
},
ims: {
neTypePlease: 'Query network element object',
ims: {
neType: 'IMS Object',
},
},

1
src/i18n/locales/zh-CN.ts
View File

@@ -37,6 +37,7 @@ export default {
tableStripedText: '表格斑马纹',
reloadText: '刷新',
columnSetText: '列设置',
columnSetTitle: '列展示/排序',
sizeText: '密度',
size: {
default: '默认',

27
src/views/neUser/auth/index.vue
View File

@@ -6,6 +6,7 @@ import { SizeType } from 'ant-design-vue/lib/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table';
import UploadModal from '@/components/UploadModal/index.vue';
import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
import {
listAuth,
getAuth,
@@ -85,7 +86,7 @@ let tableColumns: ColumnsType = [
{
title: 'IMSI',
dataIndex: 'imsi',
align: 'center',
align: 'left',
fixed: 'left',
width: 5,
sorter: true,
@@ -129,6 +130,9 @@ let tableColumns: ColumnsType = [
},
];
/**表格字段列排序 */
let tableColumnsDnd = reactive<ColumnsType>([]);
/**表格分页器参数 */
let tablePagination = reactive({
/**当前页数 */
@@ -162,6 +166,11 @@ function fnTableSize({ key }: MenuInfo) {
tableState.size = key as SizeType;
}
/**表格斑马纹 */
function fnTableStriped(_record: unknown, index: number): any {
return tableState.striped && index % 2 === 1 ? 'table-striped' : undefined;
}
/**表格分页、排序、筛选变化时触发操作, 排序方式，取值为 ascend descend */
function fnTableChange(pagination: any, filters: any, sorter: any, extra: any) {
const { field, order } = sorter;
@@ -569,6 +578,7 @@ function fnGetList(pageNum?: number) {
tableState.loading = true;
if (pageNum) {
queryParams.pageNum = pageNum;
tablePagination.current = pageNum;
}
listAuth(toRaw(queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
@@ -683,7 +693,7 @@ onMounted(() => {
<a-select
v-model:value="queryParams.neId"
:options="neOtions"
allow-clear
:placeholder="t('common.selectPlease')"
/>
</a-form-item>
</a-col>
@@ -809,6 +819,10 @@ onMounted(() => {
<template #icon><ReloadOutlined /></template>
</a-button>
</a-tooltip>
<TableColumnsDnd
:columns="tableColumns"
v-model:columns-dnd="tableColumnsDnd"
></TableColumnsDnd>
<a-tooltip placement="topRight">
<template #title>{{ t('common.sizeText') }}</template>
<a-dropdown placement="bottomRight" trigger="click">
@@ -840,12 +854,13 @@ onMounted(() => {
<a-table
class="table"
row-key="imsi"
:columns="tableColumns"
:columns="tableColumnsDnd"
:loading="tableState.loading"
:data-source="tableState.data"
:size="tableState.size"
:row-class-name="fnTableStriped"
:pagination="tablePagination"
:scroll="{ x: 1000, y: 400 }"
:scroll="{ x: tableColumnsDnd.length * 100, y: 450 }"
@change="fnTableChange"
>
<template #bodyCell="{ column, record }">
@@ -1271,4 +1286,8 @@ onMounted(() => {
.table :deep(.ant-pagination) {
padding: 0 24px;
}
.table :deep(.table-striped) td {
background-color: #fafafa;
}
</style>

57
src/views/neUser/base5G/index.vue
View File

@@ -44,6 +44,8 @@ type TabeStateType = {
loading: boolean;
/**紧凑型 */
size: SizeType;
/**斑马纹 */
striped: boolean;
/**搜索栏 */
seached: boolean;
/**记录数据 */
@@ -56,6 +58,7 @@ type TabeStateType = {
let tableState: TabeStateType = reactive({
loading: false,
size: 'middle',
striped: false,
seached: true,
data: [],
selectedRowKeys: [],
@@ -122,11 +125,16 @@ function fnTableSize({ key }: MenuInfo) {
tableState.size = key as SizeType;
}
/**表格斑马纹 */
function fnTableStriped(_record: unknown, index: number): any {
return tableState.striped && index % 2 === 1 ? 'table-striped' : undefined;
}
/**查询列表, pageNum初始页数 */
function fnGetList(pageNum?: number) {
if (tableState.loading) return;
tableState.loading = true;
if(pageNum){
if (pageNum) {
queryParams.pageNum = pageNum;
}
listBase5G(toRaw(queryParams)).then(res => {
@@ -162,7 +170,7 @@ onMounted(() => {
}
} else {
message.warning({
content: `暂无网元列表数据`,
content: t('common.noData'),
duration: 2,
});
}
@@ -189,16 +197,13 @@ onMounted(() => {
<a-select
v-model:value="queryParams.neId"
:options="neOtions"
:placeholder="t('views.neUser.base5G.neTypePlease')"
:placeholder="t('common.selectPlease')"
/>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item label="GNB ID" name="id">
<a-input
v-model:value="queryParams.id"
allow-clear
></a-input>
<a-input v-model:value="queryParams.id" allow-clear></a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
@@ -235,15 +240,24 @@ onMounted(() => {
size="small"
/>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.zebra') }}</template>
<a-switch
v-model:checked="tableState.striped"
:checked-children="t('common.switch.show')"
:un-checked-children="t('common.switch.hide')"
size="small"
/>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.reloadText') }}</template>
<a-button type="text" @click.prevent="fnGetList()">
<template #icon><ReloadOutlined /></template>
</a-button>
</a-tooltip>
<a-tooltip>
<a-tooltip placement="topRight">
<template #title>{{ t('common.sizeText') }}</template>
<a-dropdown trigger="click">
<a-dropdown placement="bottomRight" trigger="click">
<a-button type="text">
<template #icon><ColumnHeightOutlined /></template>
</a-button>
@@ -252,15 +266,15 @@ onMounted(() => {
:selected-keys="[tableState.size as string]"
@click="fnTableSize"
>
<a-menu-item key="default">{{
t('common.size.default')
}}</a-menu-item>
<a-menu-item key="middle">{{
t('common.size.middle')
}}</a-menu-item>
<a-menu-item key="small">{{
t('common.size.small')
}}</a-menu-item>
<a-menu-item key="default">
{{ t('common.size.default') }}
</a-menu-item>
<a-menu-item key="middle">
{{ t('common.size.middle') }}
</a-menu-item>
<a-menu-item key="small">
{{ t('common.size.small') }}
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
@@ -276,8 +290,9 @@ onMounted(() => {
:loading="tableState.loading"
:data-source="tableState.data"
:size="tableState.size"
:row-class-name="fnTableStriped"
:pagination="tablePagination"
:scroll="{ x: 1000, y:400 }"
:scroll="{ x: 1000, y: 400 }"
>
</a-table>
</a-card>
@@ -288,4 +303,8 @@ onMounted(() => {
.table :deep(.ant-pagination) {
padding: 0 24px;
}
.table :deep(.table-striped) td {
background-color: #fafafa;
}
</style>

54
src/views/neUser/ims/index.vue
View File

@@ -47,6 +47,8 @@ type TabeStateType = {
loading: boolean;
/**紧凑型 */
size: SizeType;
/**斑马纹 */
striped: boolean;
/**搜索栏 */
seached: boolean;
/**记录数据 */
@@ -59,6 +61,7 @@ type TabeStateType = {
let tableState: TabeStateType = reactive({
loading: false,
size: 'middle',
striped: false,
seached: true,
data: [],
selectedRowKeys: [],
@@ -137,6 +140,11 @@ function fnTableSize({ key }: MenuInfo) {
tableState.size = key as SizeType;
}
/**表格斑马纹 */
function fnTableStriped(_record: unknown, index: number): any {
return tableState.striped && index % 2 === 1 ? 'table-striped' : undefined;
}
/**查询列表, pageNum初始页数 */
function fnGetList(pageNum?: number) {
if (tableState.loading) return;
@@ -180,7 +188,7 @@ onMounted(() => {
}
} else {
message.warning({
content: `暂无网元列表数据`,
content: t('common.noData'),
duration: 2,
});
}
@@ -207,24 +215,18 @@ onMounted(() => {
<a-select
v-model:value="queryParams.neId"
:options="neOtions"
:placeholder="t('views.neUser.ims.neTypePlease')"
:placeholder="t('common.selectPlease')"
/>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item label="IMSI" name="imsi">
<a-input
v-model:value="queryParams.imsi"
allow-clear
></a-input>
<a-input v-model:value="queryParams.imsi" allow-clear></a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item label="MSISDN" name="msisdn">
<a-input
v-model:value="queryParams.msisdn"
allow-clear
></a-input>
<a-input v-model:value="queryParams.msisdn" allow-clear></a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
@@ -261,15 +263,24 @@ onMounted(() => {
size="small"
/>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.zebra') }}</template>
<a-switch
v-model:checked="tableState.striped"
:checked-children="t('common.switch.show')"
:un-checked-children="t('common.switch.hide')"
size="small"
/>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.reloadText') }}</template>
<a-button type="text" @click.prevent="fnGetList()">
<template #icon><ReloadOutlined /></template>
</a-button>
</a-tooltip>
<a-tooltip>
<a-tooltip placement="topRight">
<template #title>{{ t('common.sizeText') }}</template>
<a-dropdown trigger="click">
<a-dropdown placement="bottomRight" trigger="click">
<a-button type="text">
<template #icon><ColumnHeightOutlined /></template>
</a-button>
@@ -278,15 +289,15 @@ onMounted(() => {
:selected-keys="[tableState.size as string]"
@click="fnTableSize"
>
<a-menu-item key="default">{{
t('common.size.default')
}}</a-menu-item>
<a-menu-item key="middle">{{
t('common.size.middle')
}}</a-menu-item>
<a-menu-item key="small">{{
t('common.size.small')
}}</a-menu-item>
<a-menu-item key="default">
{{ t('common.size.default') }}
</a-menu-item>
<a-menu-item key="middle">
{{ t('common.size.middle') }}
</a-menu-item>
<a-menu-item key="small">
{{ t('common.size.small') }}
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
@@ -302,6 +313,7 @@ onMounted(() => {
:loading="tableState.loading"
:data-source="tableState.data"
:size="tableState.size"
:row-class-name="fnTableStriped"
:pagination="tablePagination"
:scroll="{ x: 1200, y: 400 }"
>

133
src/views/neUser/sub/index.vue
View File

@@ -1,12 +1,12 @@
<script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from '@ant-design-vue/pro-layout';
// import { Container, Draggable } from 'vue3-smooth-dnd';
import { message, Modal, Form, notification } from 'ant-design-vue/lib';
import { SizeType } from 'ant-design-vue/lib/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table';
import UploadModal from '@/components/UploadModal/index.vue';
import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
import {
loadSub,
listSub,
@@ -85,21 +85,21 @@ let tableState: TabeStateType = reactive({
});
/**表格字段列 */
let tableColumns = reactive<ColumnsType>([
let tableColumns: ColumnsType = [
{
title: 'IMSI',
dataIndex: 'imsi',
align: 'center',
align: 'left',
fixed: 'left',
width: 5,
width: 3,
sorter: true,
},
{
title: 'MSISDN',
dataIndex: 'msisdn',
align: 'center',
align: 'left',
fixed: 'left',
width: 5,
width: 3,
sorter: true,
},
{
@@ -136,7 +136,7 @@ let tableColumns = reactive<ColumnsType>([
title: 'CN Type Restriction',
dataIndex: 'cn',
align: 'center',
width: 5,
width: 3,
},
{
title: 'Subscribed Data',
@@ -157,23 +157,10 @@ let tableColumns = reactive<ColumnsType>([
fixed: 'right',
width: 2,
},
]);
];
// /**表格字段列 */
// const tableColumnsState = reactive({
// indeterminate: true,
// checkAll: false,
// columnsTitleList: tableColumns.map(s => s.title),
// });
// /**表格紧凑型变更操作 */
// function fnTableColumnsCheckAllChange(e: any) {
// const checked = e.target.checked;
// console.log(checked)
// tableColumnsState.indeterminate = false
// tableColumnsState.columnsTitleList = checked ? tableColumns.map(s => s.title) : []
// }
/**表格字段列排序 */
let tableColumnsDnd = reactive<ColumnsType>([]);
/**表格分页器参数 */
let tablePagination = reactive({
@@ -208,6 +195,11 @@ function fnTableSize({ key }: MenuInfo) {
tableState.size = key as SizeType;
}
/**表格斑马纹 */
function fnTableStriped(_record: unknown, index: number): any {
return tableState.striped && index % 2 === 1 ? 'table-striped' : undefined;
}
/**表格分页、排序、筛选变化时触发操作, 排序方式，取值为 ascend descend */
function fnTableChange(pagination: any, filters: any, sorter: any, extra: any) {
const { field, order } = sorter;
@@ -806,6 +798,7 @@ function fnGetList(pageNum?: number) {
tableState.loading = true;
if (pageNum) {
queryParams.pageNum = pageNum;
tablePagination.current = pageNum;
}
listSub(toRaw(queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
@@ -873,21 +866,6 @@ function fnModalUploadImportUpload(file: File) {
});
}
// let items = reactive([
// { id: 1, data: 'Princess Mononoke' },
// { id: 2, data: 'Spirited Away' },
// { id: 3, data: 'My Neighbor Totoro' },
// { id: 4, data: "Howl's Moving Castle" },
// ]);
// function onDrop(dropResult: any) {
// const { removedIndex, addedIndex, payload } = dropResult;
// if (removedIndex !== null && addedIndex !== null) {
// let itemToAdd = payload;
// itemToAdd = items.splice(removedIndex, 1)[0];
// items.splice(addedIndex, 0, itemToAdd);
// }
// }
onMounted(() => {
// 获取网元网元列表
useNeInfoStore()
@@ -935,8 +913,7 @@ onMounted(() => {
<a-select
v-model:value="queryParams.neId"
:options="neOtions"
allow-clear
:placeholder="t('views.neUser.sub.neTypePlease')"
:placeholder="t('common.selectPlease')"
/>
</a-form-item>
</a-col>
@@ -1073,48 +1050,10 @@ onMounted(() => {
<template #icon><ReloadOutlined /></template>
</a-button>
</a-tooltip>
<!-- <a-tooltip>
<template #title>
{{ t('common.columnSetText') }}
</template>
<a-popover trigger="click" placement="bottomRight">
<template #title>
<div class="table-column-setting-title">
<a-checkbox
v-model:checked="tableColumnsState.checkAll"
:indeterminate="tableColumnsState.indeterminate"
@change="fnTableColumnsCheckAllChange"
>
列展示/排序
</a-checkbox>
<a-button type="link" size="small"> 重置 </a-button>
</div>
</template>
<template #content>
<Container orientation="vertical" @drop="onDrop">
<a-checkbox-group
v-model:value="tableColumnsState.columnsTitleList"
style="width: 100%"
>
<Draggable
v-for="(item, i) in tableColumnsState.columns"
:key="item.id"
>
<div class="table-column-setting-list-item">
<HolderOutlined class="anticon" />
<a-checkbox :value="item"
>{{ i + 1 }} -> {{ item.title }}</a-checkbox
>
</div>
</Draggable>
</a-checkbox-group>
</Container>
</template>
<a-button type="text">
<template #icon><TableOutlined /></template>
</a-button>
</a-popover>
</a-tooltip> -->
<TableColumnsDnd
:columns="tableColumns"
v-model:columns-dnd="tableColumnsDnd"
></TableColumnsDnd>
<a-tooltip placement="topRight">
<template #title>{{ t('common.sizeText') }}</template>
<a-dropdown placement="bottomRight" trigger="click">
@@ -1146,12 +1085,13 @@ onMounted(() => {
<a-table
class="table"
row-key="imsi"
:columns="tableColumns"
:columns="tableColumnsDnd"
:loading="tableState.loading"
:data-source="tableState.data"
:size="tableState.size"
:row-class-name="fnTableStriped"
:pagination="tablePagination"
:scroll="{ x: 2500, y: 400 }"
:scroll="{ x: tableColumnsDnd.length * 200, y: 450 }"
@change="fnTableChange"
>
<template #bodyCell="{ column, record }">
@@ -2131,28 +2071,7 @@ onMounted(() => {
padding: 0 24px;
}
.table-column-setting-title {
display: flex;
align-items: center;
justify-content: space-between;
height: 32px;
margin-left: 4px;
}
.table-column-setting-list-item {
display: flex;
align-items: center;
width: 100%;
padding: 4px 16px 4px 0;
}
.table-column-setting-list-item > .anticon {
padding-right: 6px;
cursor: move;
}
.table-column-setting-list-item .ant-checkbox-wrapper {
flex: 1;
margin: 0;
.table :deep(.table-striped) td {
background-color: #fafafa;
}
</style>

72
src/views/neUser/ue/index.vue
View File

@@ -47,6 +47,8 @@ type TabeStateType = {
loading: boolean;
/**紧凑型 */
size: SizeType;
/**斑马纹 */
striped: boolean;
/**搜索栏 */
seached: boolean;
/**记录数据 */
@@ -59,6 +61,7 @@ type TabeStateType = {
let tableState: TabeStateType = reactive({
loading: false,
size: 'middle',
striped: false,
seached: true,
data: [],
selectedRowKeys: [],
@@ -157,6 +160,11 @@ function fnTableSize({ key }: MenuInfo) {
tableState.size = key as SizeType;
}
/**表格斑马纹 */
function fnTableStriped(_record: unknown, index: number): any {
return tableState.striped && index % 2 === 1 ? 'table-striped' : undefined;
}
/**对话框对象信息状态类型 */
type ModalStateType = {
/**详情框是否显示 */
@@ -191,7 +199,7 @@ let modalState: ModalStateType = reactive({
*/
function fnModalVisibleByVive(row: Record<string, any>) {
if (!row.imsi) {
message.error(`记录信息存在错误`, 2);
message.error(t('common.getInfoFail'), 2);
return;
}
const imsiIdx = row.imsi.lastIndexOf('-');
@@ -203,7 +211,7 @@ function fnModalVisibleByVive(row: Record<string, any>) {
row.msisdn = row.msisdn.substring(msisdnIdx + 1);
}
modalState.from = Object.assign(modalState.from, row);
modalState.title = `${row.imsi} 记录信息`;
modalState.title = `${row.imsi}`;
modalState.visibleByView = true;
}
@@ -220,7 +228,7 @@ function fnModalCancel() {
function fnGetList(pageNum?: number) {
if (tableState.loading) return;
tableState.loading = true;
if(pageNum){
if (pageNum) {
queryParams.pageNum = pageNum;
}
listUE(toRaw(queryParams)).then(res => {
@@ -259,7 +267,7 @@ onMounted(() => {
}
} else {
message.warning({
content: `暂无网元列表数据`,
content: t('common.noData'),
duration: 2,
});
}
@@ -286,24 +294,18 @@ onMounted(() => {
<a-select
v-model:value="queryParams.neId"
:options="neOtions"
:placeholder="t('views.neUser.ue.neTypePlease')"
:placeholder="t('common.selectPlease')"
/>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item label="IMSI" name="imsi">
<a-input
v-model:value="queryParams.imsi"
allow-clear
></a-input>
<a-input v-model:value="queryParams.imsi" allow-clear></a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item label="MSISDN" name="msisdn">
<a-input
v-model:value="queryParams.msisdn"
allow-clear
></a-input>
<a-input v-model:value="queryParams.msisdn" allow-clear></a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
@@ -340,15 +342,24 @@ onMounted(() => {
size="small"
/>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.zebra') }}</template>
<a-switch
v-model:checked="tableState.striped"
:checked-children="t('common.switch.show')"
:un-checked-children="t('common.switch.hide')"
size="small"
/>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.reloadText') }}</template>
<a-button type="text" @click.prevent="fnGetList()">
<template #icon><ReloadOutlined /></template>
</a-button>
</a-tooltip>
<a-tooltip>
<a-tooltip placement="topRight">
<template #title>{{ t('common.sizeText') }}</template>
<a-dropdown trigger="click">
<a-dropdown placement="bottomRight" trigger="click">
<a-button type="text">
<template #icon><ColumnHeightOutlined /></template>
</a-button>
@@ -357,15 +368,15 @@ onMounted(() => {
:selected-keys="[tableState.size as string]"
@click="fnTableSize"
>
<a-menu-item key="default">{{
t('common.size.default')
}}</a-menu-item>
<a-menu-item key="middle">{{
t('common.size.middle')
}}</a-menu-item>
<a-menu-item key="small">{{
t('common.size.small')
}}</a-menu-item>
<a-menu-item key="default">
{{ t('common.size.default') }}
</a-menu-item>
<a-menu-item key="middle">
{{ t('common.size.middle') }}
</a-menu-item>
<a-menu-item key="small">
{{ t('common.size.small') }}
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
@@ -381,6 +392,7 @@ onMounted(() => {
:loading="tableState.loading"
:data-source="tableState.data"
:size="tableState.size"
:row-class-name="fnTableStriped"
:pagination="tablePagination"
:scroll="{ x: 1000, y: 400 }"
>
@@ -388,7 +400,7 @@ onMounted(() => {
<template v-if="column.key === 'imsi'">
<a-space :size="8" align="center">
<a-tooltip>
<template #title>查看详情</template>
<template #title>{{ t('common.viewText') }}</template>
<a-button
type="link"
@click.prevent="fnModalVisibleByVive(record)"
@@ -403,13 +415,13 @@ onMounted(() => {
</a-card>
<!-- 详情框 -->
<a-modal
<DraggableModal
width="800px"
:visible="modalState.visibleByView"
:title="modalState.title"
@cancel="fnModalCancel"
>
<a-form layout="horizontal">
<a-form layout="horizontal" :label-col="{ span: 6 }" :labelWrap="true">
<a-row :gutter="16">
<a-col :lg="8" :md="8" :xs="24">
<a-form-item label="IMSI" name="imsi">
@@ -461,7 +473,7 @@ onMounted(() => {
{{ t('common.close') }}
</a-button>
</template>
</a-modal>
</DraggableModal>
</PageContainer>
</template>
@@ -469,4 +481,8 @@ onMounted(() => {
.table :deep(.ant-pagination) {
padding: 0 24px;
}
.table :deep(.table-striped) td {
background-color: #fafafa;
}
</style>