diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts index 83f7bcc2..5048f09e 100644 --- a/src/i18n/locales/en-US.ts +++ b/src/i18n/locales/en-US.ts @@ -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', }, }, diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts index a22f4354..29c532f6 100644 --- a/src/i18n/locales/zh-CN.ts +++ b/src/i18n/locales/zh-CN.ts @@ -37,6 +37,7 @@ export default { tableStripedText: '表格斑马纹', reloadText: '刷新', columnSetText: '列设置', + columnSetTitle: '列展示/排序', sizeText: '密度', size: { default: '默认', diff --git a/src/views/neUser/auth/index.vue b/src/views/neUser/auth/index.vue index 46f9e3af..1a463fb5 100644 --- a/src/views/neUser/auth/index.vue +++ b/src/views/neUser/auth/index.vue @@ -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([]); + /**表格分页器参数 */ 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(() => { @@ -809,6 +819,10 @@ onMounted(() => { + @@ -840,12 +854,13 @@ onMounted(() => { @@ -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 }" > @@ -288,4 +303,8 @@ onMounted(() => { .table :deep(.ant-pagination) { padding: 0 24px; } + +.table :deep(.table-striped) td { + background-color: #fafafa; +} diff --git a/src/views/neUser/ims/index.vue b/src/views/neUser/ims/index.vue index bd387360..c77ee215 100644 --- a/src/views/neUser/ims/index.vue +++ b/src/views/neUser/ims/index.vue @@ -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(() => { - + - + @@ -261,15 +263,24 @@ onMounted(() => { size="small" /> + + + + - + - + @@ -278,15 +289,15 @@ onMounted(() => { :selected-keys="[tableState.size as string]" @click="fnTableSize" > - {{ - t('common.size.default') - }} - {{ - t('common.size.middle') - }} - {{ - t('common.size.small') - }} + + {{ t('common.size.default') }} + + + {{ t('common.size.middle') }} + + + {{ t('common.size.small') }} + @@ -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 }" > diff --git a/src/views/neUser/sub/index.vue b/src/views/neUser/sub/index.vue index b3bd29e2..993058d7 100644 --- a/src/views/neUser/sub/index.vue +++ b/src/views/neUser/sub/index.vue @@ -1,12 +1,12 @@