fix: UDM用户数据表格优化

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