fix: UDM用户数据表格优化

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