From b1bfb7a91590252add4efc8bd7858d3f41b49a64 Mon Sep 17 00:00:00 2001 From: zhongzm Date: Fri, 11 Apr 2025 16:42:41 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E5=88=A0=E9=99=A4remark=E5=92=8Csmdata?= =?UTF-8?q?=E7=9A=84=E6=A0=A1=E9=AA=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/neUser/imsUDM/index.vue | 543 ++++++++---------------------- 1 file changed, 145 insertions(+), 398 deletions(-) diff --git a/src/views/neUser/imsUDM/index.vue b/src/views/neUser/imsUDM/index.vue index 5ccad1df..e59c01e3 100644 --- a/src/views/neUser/imsUDM/index.vue +++ b/src/views/neUser/imsUDM/index.vue @@ -124,13 +124,6 @@ let tableColumns = ref([ sorter: true, width: 100, }, - { - title: 'TAG', - dataIndex: 'tag', - align: 'center', - width: 150, - key: 'tag' - }, { title: 'TenantID', dataIndex: 'tenantID', @@ -150,6 +143,13 @@ let tableColumns = ref([ align: 'center', width: 150, }, + { + title: 'TAG', + dataIndex: 'tag', + align: 'center', + width: 150, + key: 'tag' + }, { title: t('common.operate'), key: 'imsi', @@ -241,7 +241,6 @@ let modalState: ModalStateType = reactive({ tag: '0', vni: '', num: 1, - remark: '', }, BatchDelForm: { num: 1, @@ -304,262 +303,17 @@ const modalStateFromOption = reactive({ ], }); -//新增时初始SM Data -const bigRows = ref([ - { - id: 0, - sst: '', - sd: '', - smallRows: [ - { - id: 0, - dnn: '', - smStaticIp: '', - msIp: '', - }, - { - id: 1, - dnn: 'ims', - smStaticIp: '', - msIp: '', - }, - ], - }, -]); - -//小数组的index -let smallRowIndexCounter = 0; - -/** - * 针对修改框的截取每位数值 - * @param num 二进制值: 10001 n:长度有几位 - */ -function PrefixZero(num: any, n: any) { - return (Array(n).join('0') + num).slice(-n); -} - -/** - * 对话框弹出显示为 批量新增,批量删除 - * @param noticeId 网元id, 不传为新增 - */ -function fnModalVisibleByBatch() { - modalStateBatchDelFrom.resetFields(); //重置表单 - modalState.title = - t('views.neUser.sub.batchDelText') + t('views.neUser.sub.subInfo'); - modalState.openByBatchDel = true; -} - -/** - * 对话框弹出显示为 新增或者修改 - * @param noticeId 网元id, 不传为新增 - */ -function fnModalVisibleByAdd() { - modalStateFrom.resetFields(); - modalState.title = t('common.addText') + t('views.neUser.sub.subInfo'); - modalState.openByAdd = true; -} - -/**对话框内表单属性和校验规则 */ -const modalStateFrom = Form.useForm( - modalState.from, - reactive({ - num: [ - { - required: true, - message: t('views.neUser.sub.numAdd') + t('common.unableNull'), - }, - ], - imsi: [ - { - required: computed(() => modalState.from.tag === '1'), - message: 'IMSI' + t('common.unableNull') - }, - { min: 15, max: 15, message: t('views.neUser.auth.imsiConfirm') }, - ], - msisdn: [ - { required: true, message: 'MSISDN' + t('common.unableNull') }, - ], - tag: [ - { required: true, message: 'TAG' + t('common.unableNull') }, - ], - vni: [ - { required: true, message: 'VNI' + t('common.unableNull') }, - ], - }) -); - -/** - * 封装为SM Data - */ -function transformData(data: any) { - let transformedData = data.map((item: any) => { - if (!item.sst || !item.smallRows.every((smallRow: any) => smallRow.dnn)) { - message.error({ - content: `${t('views.neUser.sub.smDataArrTip')}`, - duration: 3, - }); - throw new Error('sst, sd, and all dnn are required fields'); - } - - let sstSd = item.sd - ? item.sst + '-' + item.sd.padStart(6, '0') - : item.sst + '-'; - let smallRowData = item.smallRows - .map((smallRow: any) => { - let parts = [smallRow.dnn]; - if (smallRow.smStaticIp) { - parts.push(smallRow.smStaticIp); - } - if (smallRow.msIp) { - parts.push(smallRow.msIp); - } - return parts.join('-'); - }) - .join('&'); - - return sstSd + '&' + smallRowData; - }); - - return transformedData; -} - -/** - * 拆解SM Data成表单数据 - */ -function transformFormData(data: any) { - let allData = data ? data.split(';') : []; - let bigIDFlag = 0; - let smallIDFlag = 0; - - let transformedData = allData.map((item: any) => { - let json: any = { - id: bigIDFlag++, - sst: item.split('&')[0].split('-')[0], - sd: item.split('&')[0].split('-')[1] - ? item.split('&')[0].split('-')[1] - : '', - smallRows: [], - }; - item - .split('&') - .slice(1) - .forEach((single: any) => { - let smallRowJson: any = { - id: smallIDFlag++, - dnn: single.split('-')[0], - smStaticIp: '', - msIp: '', - }; - let smStaticIpArr: any = []; - single - .split('-') - .slice(1) - .forEach((dnnParts: any) => { - if (dnnParts.includes('/') && dnnParts.includes(':')) { - //IPV6 既有/ 又有: - smStaticIpArr.push(dnnParts); - } - if (!dnnParts.includes('/') && !dnnParts.includes(':')) { - const pattern = /^(\d{1,3}\.){3}\d{1,3}$/; - if (pattern.test(dnnParts)) { - // 验证数值范围 - const isValid = dnnParts.split('.').every((num: any) => { - const n = parseInt(num, 10); - return n >= 0 && n <= 255; - }); - - // 只有当验证通过时才添加 IP - if (isValid) { - smStaticIpArr.push(dnnParts); - } - } else { - //无/ 无:也有可能为dnn的字符串 - smallRowJson.dnn += '-' + dnnParts; - } - } - - if (dnnParts.includes('/') && !dnnParts.includes(':')) { - //msIp 只有/ 没有： - smallRowJson.msIp = dnnParts; - } - }); - smallRowJson.smStaticIp = smStaticIpArr.join('-'); - json.smallRows.push(smallRowJson); - }); - return json; - }); - if (transformedData.length > 0) { - bigRows.value = transformedData; - } else { - bigRows.value = [ - { - id: 0, - sst: '', - sd: '', - smallRows: [ - { - id: 0, - dnn: '', - smStaticIp: '', - msIp: '', - }, - { - id: 1, - dnn: 'ims', - smStaticIp: '', - msIp: '', - }, - ], - }, - ]; - } -} /** * 对话框弹出确认执行函数 * 进行表达规则校验 */ function fnModalOk() { const from = Object.assign({}, toRaw(modalState.from)); - try { - from.smData = transformData(bigRows.value).join(';'); - } catch (error: any) { - console.error(error.message); - return false; - } modalStateFrom .validate() .then(e => { modalState.confirmLoading = true; - let ardArr = [0, 0, 0, 0, 0, 0, 0, 0]; - let hplmnArr = [0, 0, 0, 0, 0, 0, 0, 0]; - let odbArr = [0, 0, 0, 0, 0, 0, 0, 0, 0]; - - from.ard.forEach((item: any) => { - ardArr[item] = 1; - }); - - from.hplmnOdb.forEach((item: any) => { - hplmnArr[item] = 1; - }); - - from.epsOdb.forEach((item: any) => { - odbArr[item] = 1; - }); - - from.epsOdb = '' + parseInt(odbArr.join(''), 2); - from.hplmnOdb = '' + parseInt(hplmnArr.join(''), 2); - from.ard = '' + parseInt(ardArr.join(''), 2); - - // 4G APN Context List - from.apnContext = from.apnContext - .map((item: number) => `${item}`.padStart(2, '0')) - .join(''); - - from.activeTime = `${from.activeTime}`; - from.rfspIndex = `${from.rfspIndex}`; - from.regTimer = `${from.regTimer}`; - from.ueUsageType = `${from.ueUsageType}`; from.neId = queryParams.neId || '-'; const result = from.num === 1 ? addIMSSub(from)//单条新增 @@ -614,60 +368,6 @@ function fnModalOk() { }); } -/**对话框内批量添加表单属性和校验规则 */ -const modalStateBatchDelFrom = Form.useForm( - modalState.BatchDelForm, - reactive({ - num: [ - { - required: true, - message: t('views.neUser.sub.numDel') + t('common.unableNull'), - }, - ], - imsi: [{ required: true, message: 'IMSI' + t('common.unableNull') }], - }) -); - -/** - * 对话框弹出 批量删除确认执行函数 - * 进行表达规则校验 - */ -function fnBatchDelModalOk() { - modalStateBatchDelFrom - .validate() - .then(e => { - modalState.confirmLoading = true; - const from = toRaw(modalState.BatchDelForm); - const neId = queryParams.neId || '-'; - batchDelIMSSub(neId, from.imsi, from.num).then(res => { - if (res.code === RESULT_CODE_SUCCESS) { - const timerS = Math.ceil(+from.num / 1500) + 1; - notification.success({ - message: modalState.title, - description: t('common.operateOk'), - duration: timerS, - }); - setTimeout(() => { - modalState.openByBatchDel = false; - modalState.confirmLoading = false; - modalStateBatchDelFrom.resetFields(); - fnGetList(1); - }, timerS * 1000); - } else { - modalState.confirmLoading = false; - notification.error({ - message: modalState.title, - description: res.msg, - duration: 3, - }); - } - }); - }) - .catch(e => { - message.error(t('common.errorFields', { num: e.errorFields.length }), 3); - }); -} - /** * 对话框弹出关闭执行函数 * 进行表达规则校验 @@ -675,38 +375,36 @@ function fnBatchDelModalOk() { function fnModalCancel() { modalState.openByAdd = false; modalStateFrom.resetFields(); - bigRows.value = [ - { - id: 0, - sst: '', - sd: '', - smallRows: [ - { - id: 0, - dnn: '', - smStaticIp: '', - msIp: '', - }, - { - id: 1, - dnn: 'ims', - smStaticIp: '', - msIp: '', - }, - ], - }, - ]; - smallRowIndexCounter = 0; } -/** - * 批量删除对话框弹出关闭执行函数 - * 进行表达规则校验 - */ -function fnBatchDelModalCancel() { - modalState.openByBatchDel = false; - modalStateBatchDelFrom.resetFields(); -} +/**对话框内表单属性和校验规则 */ +const modalStateFrom = Form.useForm( + modalState.from, + reactive({ + num: [ + { + required: true, + message: t('views.neUser.sub.numAdd') + t('common.unableNull'), + }, + ], + imsi: [ + { + required: computed(() => modalState.from.tag === '1'), + message: 'IMSI' + t('common.unableNull') + }, + { min: 15, max: 15, message: t('views.neUser.auth.imsiConfirm') }, + ], + msisdn: [ + { required: true, message: 'MSISDN' + t('common.unableNull') }, + ], + tag: [ + { required: true, message: 'TAG' + t('common.unableNull') }, + ], + vni: [ + { required: true, message: 'VNI' + t('common.unableNull') }, + ], + }) +); /** * UDM签约用户删除 @@ -1014,41 +712,6 @@ function fnModalUploadImportUpload(file: File) { }); } -function addSmallRow(bigIndex: any) { - const newSmallRow = { - id: ++smallRowIndexCounter, - dnn: '', - smStaticIp: '', - msIp: '', - }; - bigRows.value[bigIndex].smallRows.push(newSmallRow); -} - -function addBigRow() { - const newBigRow = { - id: bigRows.value.length, - sst: '', - sd: '', - smallRows: [ - { - id: 0, - dnn: '', - smStaticIp: '', - msIp: '', - }, - ], - }; - bigRows.value.push(newBigRow); -} - -function delDNN(sonIndex: any, bigIndex: any) { - bigRows.value[bigIndex].smallRows.splice(sonIndex, 1); -} - -function delBigRow(bigIndex: any) { - bigRows.value.splice(bigIndex, 1); -} - function fnTenantNameFocus() { Promise.allSettled([listTenant({ parentId: 0 })]).then(resArr => { if (resArr[0].status === 'fulfilled') { @@ -1071,6 +734,104 @@ function fnTenantNameFocus() { }); } +/** + * 对话框弹出显示为 新增 + */ +function fnModalVisibleByAdd() { + modalState.openByAdd = true; + modalState.title = t('common.addText') + t('views.neUser.sub.subInfo'); + modalState.from = { + imsi: '', + msisdn: '', + tag: '0', + vni: '', + num: 1, + }; +} + +/** + * 对话框弹出显示为 批量删除 + */ +function fnModalVisibleByBatch() { + modalState.openByBatchDel = true; + modalState.title = t('views.neUser.auth.batchDelText'); + modalState.BatchDelForm = { + num: 1, + imsi: '', + }; +} + +/** + * 批量删除对话框确认 + */ +function fnBatchDelModalOk() { + modalStateBatchDelFrom + .validate() + .then(() => { + modalState.confirmLoading = true; + const hide = message.loading(t('common.loading'), 0); + const neId = queryParams.neId; + if (!neId) return; + + batchDelIMSSub(neId, modalState.BatchDelForm.imsi, modalState.BatchDelForm.num) + .then(res => { + if (res.code === RESULT_CODE_SUCCESS) { + const timerS = Math.max( + Math.ceil(modalState.BatchDelForm.num / 500), + `${modalState.BatchDelForm.num}`.length * 5 + ); + notification.success({ + message: modalState.title, + description: t('common.operateOk'), + duration: timerS, + }); + setTimeout(() => { + fnGetList(1); + }, timerS * 1000); + } else { + notification.error({ + message: modalState.title, + description: res.msg, + duration: 3, + }); + } + }) + .finally(() => { + hide(); + fnBatchDelModalCancel(); + modalState.confirmLoading = false; + }); + }) + .catch(e => { + message.error(t('common.errorFields', { num: e.errorFields.length }), 3); + }); +} + +/** + * 批量删除对话框取消 + */ +function fnBatchDelModalCancel() { + modalState.openByBatchDel = false; + modalStateBatchDelFrom.resetFields(); +} + +/**批量删除对话框内表单属性和校验规则 */ +const modalStateBatchDelFrom = Form.useForm( + modalState.BatchDelForm, + reactive({ + imsi: [ + { required: true, message: 'IMSI' + t('common.unableNull') }, + { min: 15, max: 15, message: t('views.neUser.auth.imsiConfirm') }, + ], + num: [ + { + required: true, + message: t('views.neUser.sub.numDel') + t('common.unableNull'), + }, + ], + }) +); + onMounted(() => { // 获取网元网元列表 useNeInfoStore() @@ -1152,6 +913,18 @@ onMounted(() => { :placeholder="t('common.inputPlease')"> + + + + + { /> - - - - - @@ -1530,20 +1291,6 @@ onMounted(() => { - - - -