diff --git a/src/api/neUser/ue.ts b/src/api/neUser/ue.ts new file mode 100644 index 00000000..3c35f278 --- /dev/null +++ b/src/api/neUser/ue.ts @@ -0,0 +1,30 @@ +import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; +import { request } from '@/plugins/http-fetch'; +import { parseObjLineToHump } from '@/utils/parse-utils'; + +/** + * 查询列表 + * @param query 查询参数 + * @returns object + */ +export async function listUE(query: Record) { + query.nbId = query.id; + const result = await request({ + url: '/ueManagement/v1/elementType/smf/objectType/ueInfo', + method: 'get', + params: query, + }); + let data: DataList = { + total: 0, + rows: [], + code: result.code, + msg: result.msg, + }; + // 解析数据 + if (result.code === RESULT_CODE_SUCCESS && Array.isArray(result.data.data)) { + const rows = parseObjLineToHump(result.data.data); + data.total = rows.length; + data.rows = rows; + } + return data; +} diff --git a/src/views/neUser/base5G/index.vue b/src/views/neUser/base5G/index.vue index 6c6cc5f6..a0ced82a 100644 --- a/src/views/neUser/base5G/index.vue +++ b/src/views/neUser/base5G/index.vue @@ -141,8 +141,6 @@ function fnGetList() { } onMounted(() => { - // 获取列表数据 - fnGetList(); // 获取网元网元列表 useNeInfoStore() .fnNelist() @@ -166,6 +164,10 @@ onMounted(() => { duration: 2, }); } + }) + .finally(() => { + // 获取列表数据 + fnGetList(); }); }); diff --git a/src/views/neUser/ue/index.vue b/src/views/neUser/ue/index.vue index 94c55211..26b3b858 100644 --- a/src/views/neUser/ue/index.vue +++ b/src/views/neUser/ue/index.vue @@ -2,30 +2,31 @@ import { useRoute } from 'vue-router'; import { reactive, ref, onMounted, toRaw } from 'vue'; import { PageContainer } from '@ant-design-vue/pro-layout'; -import { message, Modal, Form } from 'ant-design-vue/lib'; +import { message } from 'ant-design-vue/lib'; import { SizeType } from 'ant-design-vue/lib/config-provider'; import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import { ColumnsType } from 'ant-design-vue/lib/table'; -import { - listNeInfo, - getNeInfo, - addNeInfo, - updateNeInfo, - delNeInfo, -} from '@/api/configManage/neManage'; -import { parseDateToStr } from '@/utils/date-utils'; +import { listUE } from '@/api/neUser/ue'; +import useNeInfoStore from '@/store/modules/neinfo'; import useI18n from '@/hooks/useI18n'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; const { t } = useI18n(); const route = useRoute(); /**路由标题 */ -let title = ref(route.meta.title as string ?? '标题'); +let title = ref((route.meta.title as string) ?? '标题'); + +/**网元参数 */ +let neOtions = ref[]>([]); /**查询参数 */ let queryParams = reactive({ - /**网元类型 */ - neType: '', + /**网元ID */ + neId: undefined, + /**IMSI */ + imsi: '', + /**msisdn */ + msisdn: '', /**当前页数 */ pageNum: 1, /**每页条数 */ @@ -35,7 +36,8 @@ let queryParams = reactive({ /**查询参数重置 */ function fnQueryReset() { queryParams = Object.assign(queryParams, { - neType: '', + imsi: '', + msisdn: '', pageNum: 1, pageSize: 20, }); @@ -70,72 +72,54 @@ let tableState: TabeStateType = reactive({ /**表格字段列 */ let tableColumns: ColumnsType = [ { - title: '网元类型', - dataIndex: 'neType', - align: 'center', - }, - { - title: '网元内部标识', - dataIndex: 'neId', - align: 'center', - }, - { - title: '资源唯一标识', - dataIndex: 'rmUid', - align: 'center', - }, - { - title: '网元名称', - dataIndex: 'neName', - align: 'center', - }, - { - title: 'IP地址', - dataIndex: 'ip', - align: 'center', - }, - { - title: '网元地址', - dataIndex: 'neAddress', - align: 'center', - }, - { - title: '端口', - dataIndex: 'port', - align: 'center', - }, - { - title: '网元虚拟化标识', - dataIndex: 'pvFlag', - align: 'center', - }, - { - title: '网元所在省份', - dataIndex: 'province', - align: 'center', - }, - { - title: '厂商名称', - dataIndex: 'vendorName', - align: 'center', - }, - { - title: '网络标识', - dataIndex: 'dn', - align: 'center', - }, - { - title: '修改时间', - dataIndex: 'updateTime', + title: 'IMSI', + dataIndex: 'imsi', align: 'center', customRender(opt) { - if (!opt.value) return ''; - return parseDateToStr(opt.value); + const idx = opt.value.lastIndexOf('-'); + if (idx != -1) { + return opt.value.substring(idx + 1); + } + return opt.value; }, }, { - title: t("common.operate"), - key: 'id', + title: 'MSISDN', + dataIndex: 'msisdn', + align: 'center', + customRender(opt) { + const idx = opt.value.lastIndexOf('-'); + if (idx != -1) { + return opt.value.substring(idx + 1); + } + return opt.value; + }, + }, + { + title: 'RatType', + dataIndex: 'ratType', + align: 'center', + }, + { + title: 'DnnList', + dataIndex: 'pduSessionInfo', + align: 'center', + customRender(opt) { + if (opt.value) { + let arr = []; + for (const v of opt.value) { + if (v.dnn) { + arr.push(v.dnn); + } + } + return arr.sort().join(','); + } + return ''; + }, + }, + { + title: t('common.operate'), + key: 'imsi', align: 'center', }, ]; @@ -173,167 +157,11 @@ function fnTableSize({ key }: MenuInfo) { tableState.size = key as SizeType; } -/**对话框对象信息状态类型 */ -type ModalStateType = { - /**详情框是否显示 */ - visibleByView: boolean; - /**新增框或修改框是否显示 */ - visibleByEdit: boolean; - /**标题 */ - title: string; - /**表单数据 */ - from: Record; - /**确定按钮 loading */ - confirmLoading: boolean; -}; - -/**对话框对象信息状态 */ -let modalState: ModalStateType = reactive({ - visibleByView: false, - visibleByEdit: false, - title: '网元', - from: { - dn: '网络标识', - ip: '192.168.4.132', - neAddress: '192.160.0.107', - neId: '网元内部标识', - neName: '网元名称', - neType: 'AMF', - port: '3030', - province: '网元所在省份', - pvFlag: '', - rmUid: '资源唯一标识', - vendorName: '厂商名称', - }, - confirmLoading: false, -}); - -/**对话框内表单属性和校验规则 */ -const modalStateFrom = Form.useForm( - modalState.from, - reactive({ - neType: [{ required: true, message: '网元类型不能为空' }], - neId: [{ required: true, message: '网元内部标识不能为空' }], - rmUid: [{ required: true, message: '资源唯一标识不能为空' }], - ip: [{ required: true, message: 'IP地址不能为空' }], - port: [{ required: true, message: '端口不能为空' }], - pvFlag: [{ required: true, message: '请选择网元虚拟化标识' }], - neName: [{ required: true, message: '网元名称不能为空' }], - }) -); - -/** - * 对话框弹出显示为 新增或者修改 - * @param noticeId 网元id, 不传为新增 - */ -function fnModalVisibleByEdit(row?: Record) { - if (!row) { - modalStateFrom.resetFields(); - modalState.title = '添加网元'; - modalState.visibleByEdit = true; - } else { - if (modalState.confirmLoading) return; - const hide = message.loading('正在打开...', 0); - modalState.confirmLoading = true; - getNeInfo(row.id).then(res => { - modalState.confirmLoading = false; - hide(); - if (res.code === RESULT_CODE_SUCCESS) { - modalState.from = Object.assign(modalState.from, res.data); - modalState.title = '修改网元'; - modalState.visibleByEdit = true; - } else { - message.error(`获取网元信息失败`, 2); - } - }); - } -} - -/** - * 对话框弹出确认执行函数 - * 进行表达规则校验 - */ -function fnModalOk() { - modalStateFrom - .validate() - .then(e => { - modalState.confirmLoading = true; - const from = toRaw(modalState.from); - const result = from.id ? updateNeInfo(from) : addNeInfo(from); - const hide = message.loading({ content: t('common.loading') }); - result - .then(res => { - if (res.code === RESULT_CODE_SUCCESS) { - message.success({ - content: t('common.msgSuccess', { msg: modalState.title }), - duration: 3, - }); - modalState.visibleByEdit = false; - modalStateFrom.resetFields(); - fnGetList(); - } else { - message.error({ - content: `${res.msg}`, - duration: 3, - }); - } - }) - .finally(() => { - hide(); - modalState.confirmLoading = false; - }); - }) - .catch(e => { - message.error(t('common.errorFields', { num: e.errorFields.length }), 3); - }); -} - -/** - * 对话框弹出关闭执行函数 - * 进行表达规则校验 - */ -function fnModalCancel() { - modalState.visibleByEdit = false; - modalState.visibleByView = false; - modalStateFrom.resetFields(); -} - -/** - * 网元删除 - * @param row 网元编号ID - */ -function fnRecordDelete(row: Record) { - Modal.confirm({ - title: '提示', - content: `确认删除网元编号为 【${row.id}】 的数据项?`, - onOk() { - const key = 'delNotice'; - message.loading({ content: '请稍等...', key }); - delNeInfo(row).then(res => { - if (res.code === 200) { - message.success({ - content: `删除成功`, - key, - duration: 2, - }); - fnGetList(); - } else { - message.error({ - content: `${res.msg}`, - key: key, - duration: 2, - }); - } - }); - }, - }); -} - -/**查询网元列表 */ +/**查询列表 */ function fnGetList() { if (tableState.loading) return; tableState.loading = true; - listNeInfo(toRaw(queryParams)).then(res => { + listUE(toRaw(queryParams)).then(res => { if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) { // 取消勾选 if (tableState.selectedRowKeys.length > 0) { @@ -341,14 +169,43 @@ function fnGetList() { } tablePagination.total = res.total; tableState.data = res.rows; + } else { + tablePagination.total = 0; + tableState.data = []; } tableState.loading = false; }); } onMounted(() => { - // 获取列表数据 - fnGetList(); + // 获取网元网元列表 + useNeInfoStore() + .fnNelist() + .then(res => { + if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) { + if (res.data.length > 0) { + let arr: Record[] = []; + res.data.forEach(i => { + if (i.neType === 'SMF') { + arr.push({ value: i.neId, label: i.neName }); + } + }); + neOtions.value = arr; + if (arr.length > 0) { + queryParams.neId = arr[0].value; + } + } + } else { + message.warning({ + content: `暂无网元列表数据`, + duration: 2, + }); + } + }) + .finally(() => { + // 获取列表数据 + fnGetList(); + }); }); @@ -363,11 +220,29 @@ onMounted(() => { - + + + + + + + + + + + @@ -391,14 +266,7 @@ onMounted(() => { - +