fix: 查看信息

src/views/neUser/ue/index.vue

@@ -157,6 +157,65 @@ function fnTableSize({ key }: MenuInfo) {
   tableState.size = key as SizeType;
 }
 
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**详情框是否显示 */
+  visibleByView: boolean;
+  /**新增框或修改框是否显示 */
+  visibleByEdit: boolean;
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  visibleByView: false,
+  visibleByEdit: false,
+  title: '在线信息',
+  from: {
+    imsi: '',
+    msisdn: '',
+    pduSessionInfo: undefined,
+    ratType: '',
+  },
+  confirmLoading: false,
+});
+
+/**
+ * 对话框弹出显示为 查看
+ * @param row 单行记录信息
+ */
+function fnModalVisibleByVive(row: Record<string, any>) {
+  if (!row.imsi) {
+    message.error(`记录信息存在错误`, 2);
+    return;
+  }
+  const imsiIdx = row.imsi.lastIndexOf('-');
+  if (imsiIdx != -1) {
+    row.imsi = row.imsi.substring(imsiIdx + 1);
+  }
+  const msisdnIdx = row.msisdn.lastIndexOf('-');
+  if (msisdnIdx != -1) {
+    row.msisdn = row.msisdn.substring(msisdnIdx + 1);
+  }
+  modalState.from = Object.assign(modalState.from, row);
+  modalState.title = `${row.imsi} 记录信息`;
+  modalState.visibleByView = true;
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.visibleByEdit = false;
+  modalState.visibleByView = false;
+}
+
 /**查询列表 */
 function fnGetList() {
   if (tableState.loading) return;
@@ -324,8 +383,84 @@ onMounted(() => {
         :pagination="tablePagination"
         :scroll="{ x: true }"
       >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'imsi'">
+            <a-space :size="8" align="center">
+              <a-tooltip>
+                <template #title>查看详情</template>
+                <a-button
+                  type="link"
+                  @click.prevent="fnModalVisibleByVive(record)"
+                >
+                  <template #icon><ProfileOutlined /></template>
+                </a-button>
+              </a-tooltip>
+            </a-space>
+          </template>
+        </template>
       </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="8" :md="8" :xs="24">
+            <a-form-item label="IMSI" name="imsi">
+              {{ modalState.from.imsi }}
+            </a-form-item>
+          </a-col>
+          <a-col :lg="8" :md="8" :xs="24">
+            <a-form-item label="MSISDN" name="msisdn">
+              {{ modalState.from.msisdn }}
+            </a-form-item>
+          </a-col>
+          <a-col :lg="8" :md="8" :xs="24">
+            <a-form-item label="RatType" name="ratType">
+              {{ modalState.from.ratType }}
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-descriptions
+          :title="v.dnn"
+          :column="2"
+          size="small"
+          bordered
+          v-for="v in modalState.from.pduSessionInfo"
+          :key="v.dnn"
+        >
+          <a-descriptions-item label="IPV4">{{ v.ipv4 }}</a-descriptions-item>
+          <a-descriptions-item label="IPV6">{{ v.ipv6 }}</a-descriptions-item>
+          <a-descriptions-item label="TAI">{{ v.tai }}</a-descriptions-item>
+          <a-descriptions-item label="SST_SD">
+            {{ v.sstSD }}</a-descriptions-item
+          >
+          <a-descriptions-item label="UPF_N3_IP">
+            {{ v.upfN3IP }}
+          </a-descriptions-item>
+          <a-descriptions-item label="RAN_N3_IP">
+            {{ v.ranN3IP }}
+          </a-descriptions-item>
+          <a-descriptions-item label="ActiveTime">
+            {{ v.activeTime }}
+          </a-descriptions-item>
+          <a-descriptions-item label="pduSessionId">
+            {{ v.pduSessionID }}
+          </a-descriptions-item>
+        </a-descriptions>
+      </a-form>
+      <template #footer>
+        <a-button key="cancel" @click="fnModalCancel">
+          {{ t('common.close') }}
+        </a-button>
+      </template>
+    </a-modal>
   </PageContainer>
 </template>