fix: UDM用户数据表格优化

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