style: UDM鉴权签约页面样式优化

src/views/neUser/auth/index.vue

@@ -83,36 +83,45 @@ let tableColumns: ColumnsType = [
     title: 'IMSI',
     dataIndex: 'imsi',
     align: 'center',
+    fixed: 'left',
+    width: 5,
   },
   {
     title: 'AMF',
     dataIndex: 'amf',
     align: 'center',
+    width: 3,
   },
   {
     title: 'STATUS',
     dataIndex: 'status',
     align: 'center',
+    width: 2,
   },
   {
     title: 'KI',
     dataIndex: 'ki',
     align: 'center',
+    width: 10,
   },
   {
     title: 'OPC',
     dataIndex: 'opc',
     align: 'center',
+    width: 10,
   },
   {
     title: 'ALGO_INDEX',
     dataIndex: 'algoIndex',
     align: 'center',
+    width: 4,
   },
   {
     title: t('common.operate'),
     key: 'imsi',
     align: 'center',
+    fixed: 'right',
+    width: 5,
   },
 ];
 
@@ -236,6 +245,28 @@ const modalStateBatchDelFrom = Form.useForm(
   })
 );
 
+/**
+ * 对话框弹出显示为 详情框
+ * @param imsi 网元id, 不传为新增
+ */
+function fnModalVisibleByVive(imsi: string) {
+  if (modalState.confirmLoading) return;
+  const hide = message.loading('正在打开...', 0);
+  modalState.confirmLoading = true;
+  const neID = queryParams.neId || '-';
+  getAuth(neID, imsi).then(res => {
+    modalState.confirmLoading = false;
+    hide();
+    if (res.code === RESULT_CODE_SUCCESS) {
+      modalState.from = Object.assign(modalState.from, res.data);
+      modalState.title = '查看鉴权信息';
+      modalState.visibleByView = true;
+    } else {
+      message.error(`获取鉴权信息失败`, 2);
+    }
+  });
+}
+
 /**
  * 对话框弹出显示为 新增或者修改
  * @param noticeId 网元id, 不传为新增
@@ -803,11 +834,22 @@ onMounted(() => {
         :data-source="tableState.data"
         :size="tableState.size"
         :pagination="tablePagination"
-        :scroll="{ x: true, y: 400 }"
+        :scroll="{ x: 1500, y: 400 }"
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'imsi'">
             <a-space :size="8" align="center">
+              <a-tooltip>
+                <template #title>{{ t('common.viewText') }}</template>
+                <a-button
+                  type="link"
+                  @click.prevent="fnModalVisibleByVive(record.imsi)"
+                >
+                  <template #icon>
+                    <ProfileOutlined />
+                  </template>
+                </a-button>
+              </a-tooltip>
               <a-tooltip>
                 <template #title>{{ t('common.editText') }}</template>
                 <a-button
@@ -833,6 +875,55 @@ onMounted(() => {
       </a-table>
     </a-card>
 
+    <!-- 详情框 -->
+    <a-modal
+      width="800px"
+      :visible="modalState.visibleByView"
+      :title="modalState.title"
+      @cancel="fnModalCancel"
+    >
+      <a-form layout="horizontal">
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item label="IMSI" name="imsi">
+              {{ modalState.from.imsi }}
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item label="AMF" name="amf">
+              {{ modalState.from.amf }}
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item label="KI" name="ki">
+              {{ modalState.from.ki }}
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item label="Algo Index" name="algo">
+              {{ modalState.from.algoIndex }}
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item label="OPC" name="opc">
+              {{ modalState.from.opc }}
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+      <template #footer>
+        <a-button key="cancel" @click="fnModalCancel">{{
+          t('common.close')
+        }}</a-button>
+      </template>
+    </a-modal>
+
     <!-- 新增框或修改框 -->
     <a-modal
       width="800px"
@@ -847,7 +938,7 @@ onMounted(() => {
       <a-form
         name="modalStateFrom"
         layout="horizontal"
-        :label-col="{ span: 7 }"
+        :label-col="{ span: 6 }"
       >
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
@@ -897,7 +988,7 @@ onMounted(() => {
                 v-model:value="modalState.from.ki"
                 allow-clear
                 placeholder="请输入KI"
-                :disabled="modalState.from.id!==''"
+                :disabled="modalState.from.id !== ''"
               >
               </a-input>
             </a-form-item>
@@ -929,7 +1020,7 @@ onMounted(() => {
                 v-model:value="modalState.from.opc"
                 allow-clear
                 placeholder="请输入OPC"
-                :disabled="modalState.from.id!==''"
+                :disabled="modalState.from.id !== ''"
               ></a-input>
             </a-form-item>
           </a-col>

src/views/neUser/sub/index.vue

@@ -86,56 +86,70 @@ let tableColumns: ColumnsType = [
     title: 'IMSI',
     dataIndex: 'imsi',
     align: 'center',
+    fixed: 'left',
+    width: 5,
   },
   {
     title: 'MSISDN',
     dataIndex: 'msisdn',
     align: 'center',
+    fixed: 'left',
+    width: 5,
   },
   {
     title: 'Subscribed AMBR Temp',
     dataIndex: 'ambr',
     align: 'center',
+    width: 5,
   },
   {
     title: 'Subscribed SNSSAIs Temp',
     dataIndex: 'sar',
     align: 'center',
+    width: 5,
   },
   {
     title: 'RAT Restriction',
     dataIndex: 'rat',
     align: 'center',
+    width: 5,
   },
   {
     title: 'Forbidden Areas Temp',
     dataIndex: 'arfb',
     align: 'center',
+    width: 5,
   },
   {
     title: 'Service Area Restrict Temp',
     dataIndex: 'nssai',
     align: 'center',
+    width: 5,
   },
   {
     title: 'CN Type Restriction',
     dataIndex: 'cn',
     align: 'center',
+    width: 5,
   },
   {
     title: 'Subscribed Data',
     dataIndex: 'smData',
     align: 'center',
+    width: 10,
   },
   {
     title: 'EPS Flag',
     dataIndex: 'epsFlag',
     align: 'center',
+    width: 2,
   },
   {
     title: t('common.operate'),
     key: 'imsi',
     align: 'center',
+    fixed: 'right',
+    width: 5,
   },
 ];
 
@@ -997,7 +1011,7 @@ onMounted(() => {
         :data-source="tableState.data"
         :size="tableState.size"
         :pagination="tablePagination"
-        :scroll="{ x: true, y: 400 }"
+        :scroll="{ x: 2500, y: 400 }"
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'imsi'">