fix: UDM用户数据表格优化

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',
+        subInfo:' Subscription Info', 
-        neTypePlease: 'Query network element Object',
         neType: 'UDM Object',
         export: 'Export',
         exportConfirm: 'Are you sure to export all signed user data?',
@@ -529,15 +529,12 @@ export default {
         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',
         neType: 'AMF Object',
       },
       ue: { 
-        neTypePlease: 'Query network element object',
         neType: 'SMF Object',
       },
       ims: { 
-        neTypePlease: 'Query network element object',
         neType: 'IMS Object',
       },
     },

src/i18n/locales/zh-CN.ts

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

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<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>

src/views/neUser/base5G/index.vue

@@ -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
+              <a-input v-model:value="queryParams.id" allow-clear></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">{{
+                  <a-menu-item key="default">
-                    t('common.size.default')
+                    {{ t('common.size.default') }}
-                  }}</a-menu-item>
+                  </a-menu-item>
-                  <a-menu-item key="middle">{{
+                  <a-menu-item key="middle">
-                    t('common.size.middle')
+                    {{ t('common.size.middle') }}
-                  }}</a-menu-item>
+                  </a-menu-item>
-                  <a-menu-item key="small">{{
+                  <a-menu-item key="small">
-                    t('common.size.small')
+                    {{ t('common.size.small') }}
-                  }}</a-menu-item>
+                  </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>

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(() => {
               <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
+              <a-input v-model:value="queryParams.imsi" allow-clear></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
+              <a-input v-model:value="queryParams.msisdn" allow-clear></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">{{
+                  <a-menu-item key="default">
-                    t('common.size.default')
+                    {{ t('common.size.default') }}
-                  }}</a-menu-item>
+                  </a-menu-item>
-                  <a-menu-item key="middle">{{
+                  <a-menu-item key="middle">
-                    t('common.size.middle')
+                    {{ t('common.size.middle') }}
-                  }}</a-menu-item>
+                  </a-menu-item>
-                  <a-menu-item key="small">{{
+                  <a-menu-item key="small">
-                    t('common.size.small')
+                    {{ t('common.size.small') }}
-                  }}</a-menu-item>
+                  </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 }"
       >

src/views/neUser/sub/index.vue

@@ -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({
+let tableColumnsDnd = reactive<ColumnsType>([]);
-//   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 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('common.selectPlease')"
-                :placeholder="t('views.neUser.sub.neTypePlease')"
               />
             </a-form-item>
           </a-col>
@@ -1073,48 +1050,10 @@ onMounted(() => {
               <template #icon><ReloadOutlined /></template>
             </a-button>
           </a-tooltip>
-          <!-- <a-tooltip>
+          <TableColumnsDnd
-            <template #title>
+            :columns="tableColumns"
-              {{ t('common.columnSetText') }}
+            v-model:columns-dnd="tableColumnsDnd"
-            </template>
+          ></TableColumnsDnd>
-            <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> -->
           <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 {
+.table :deep(.table-striped) td {
-  display: flex;
+  background-color: #fafafa;
-  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;
 }
 </style>

src/views/neUser/ue/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: [],
@@ -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
+              <a-input v-model:value="queryParams.imsi" allow-clear></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
+              <a-input v-model:value="queryParams.msisdn" allow-clear></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">{{
+                  <a-menu-item key="default">
-                    t('common.size.default')
+                    {{ t('common.size.default') }}
-                  }}</a-menu-item>
+                  </a-menu-item>
-                  <a-menu-item key="middle">{{
+                  <a-menu-item key="middle">
-                    t('common.size.middle')
+                    {{ t('common.size.middle') }}
-                  }}</a-menu-item>
+                  </a-menu-item>
-                  <a-menu-item key="small">{{
+                  <a-menu-item key="small">
-                    t('common.size.small')
+                    {{ t('common.size.small') }}
-                  }}</a-menu-item>
+                  </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>