OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

feat: UDM用户数据接口调整，页面优化加载等待

Browse Source
This commit is contained in:
TsMask
2024-06-14 17:02:33 +08:00
parent 8bdfd7ea28
commit 1d55c092b1
4 changed files with 540 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
src/views/neUser/sub/index.vue
View File

@@ -7,22 +7,23 @@ import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table';
import UploadModal from '@/components/UploadModal/index.vue';
import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
import {
loadSub,
listSub,
getSub,
updateSub,
addSub,
delSub,
importSubData,
exportSub,
batchAddSub,
batchDelSub,
} from '@/api/neUser/sub';
import useNeInfoStore from '@/store/modules/neinfo';
import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import saveAs from 'file-saver';
import {
addUDMSub,
batchAddUDMSub,
batchDelUDMSub,
delUDMSub,
exportUDMSub,
getUDMSub,
importUDMSub,
listUDMSub,
resetUDMSub,
updateUDMSub,
} from '@/api/neData/udm_sub';
import { uploadFile } from '@/api/tool/file';
const { t } = useI18n();
/**网元参数 */
@@ -85,7 +86,7 @@ let tableState: TabeStateType = reactive({
});
/**表格字段列 */
let tableColumns: ColumnsType = [
let tableColumns = ref<ColumnsType>([
{
title: 'IMSI',
dataIndex: 'imsi',
@@ -163,7 +164,7 @@ let tableColumns: ColumnsType = [
fixed: 'right',
width: 100,
},
];
]);
/**表格字段列排序 */
let tableColumnsDnd = ref<ColumnsType>([]);
@@ -250,7 +251,7 @@ let modalState: ModalStateType = reactive({
visibleByBatchDel: false,
title: 'UDM签约用户',
from: {
id: '',
id: undefined,
msisdn: '',
imsi: '',
ambr: 'def_ambr',
@@ -275,7 +276,7 @@ let modalState: ModalStateType = reactive({
ueType: 1,
},
BatchForm: {
num: '',
num: 1,
msisdn: '',
imsi: '',
ambr: 'def_ambr',
@@ -300,7 +301,7 @@ let modalState: ModalStateType = reactive({
ueType: 1,
},
BatchDelForm: {
num: '',
num: 1,
imsi: '',
},
confirmLoading: false,
@@ -419,8 +420,8 @@ function fnModalVisibleByEdit(imsi?: string) {
if (modalState.confirmLoading) return;
const hide = message.loading(t('common.loading'), 0);
modalState.confirmLoading = true;
const neID = queryParams.neId || '-';
getSub(neID, imsi)
const neId = queryParams.neId || '-';
getUDMSub(neId, imsi)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
transformFormData(res.data.smData);
@@ -646,8 +647,8 @@ function fnModalOk() {
.map((item: number) => `${item}`.padStart(2, '0'))
.join('');
const neID = queryParams.neId || '-';
const result = from.id ? updateSub(neID, from) : addSub(neID, from);
from.neId = queryParams.neId || '-';
const result = from.id ? updateUDMSub(from) : addUDMSub(from);
const hide = message.loading(t('common.loading'), 0);
result
.then(res => {
@@ -734,29 +735,32 @@ function fnBatchModalOk() {
.map((item: number) => `${item}`.padStart(2, '0'))
.join('');
const neID = queryParams.neId || '-';
from.neID = neID;
const hide = message.loading(t('common.loading'), 0);
batchAddSub(from)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.msgSuccess', { msg: modalState.title }),
duration: 3,
});
fnGetList();
} else {
message.error({
content: `${res.msg}`,
duration: 3,
});
}
})
.finally(() => {
hide();
fnBatchModalCancel();
from.neId = queryParams.neId || '-';
batchAddUDMSub(from, from.num).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
const timerS = Math.max(
Math.ceil(+from.num / 500),
`${from.num}`.length * 5
);
notification.success({
message: modalState.title,
description: t('common.operateOk'),
duration: timerS,
});
setTimeout(() => {
fnBatchModalCancel();
modalState.confirmLoading = false;
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);
@@ -787,29 +791,30 @@ function fnBatchDelModalOk() {
.then(e => {
modalState.confirmLoading = true;
const from = toRaw(modalState.BatchDelForm);
from.neID = queryParams.neId || '-';
const hide = message.loading(t('common.loading'), 0);
batchDelSub(from)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.msgSuccess', { msg: modalState.title }),
duration: 3,
});
const neId = queryParams.neId || '-';
batchDelUDMSub(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.visibleByBatchDel = false;
modalState.confirmLoading = false;
modalStateBatchDelFrom.resetFields();
fnGetList();
} else {
message.error({
content: `${res.msg}`,
duration: 3,
});
}
})
.finally(() => {
hide();
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);
@@ -895,8 +900,8 @@ function fnBatchDelModalCancel() {
* @param imsi 编号imsi
*/
function fnRecordDelete(imsi: string) {
const neID = queryParams.neId;
if (!neID) return;
const neId = queryParams.neId;
if (!neId) return;
let imsiMsg = imsi;
if (imsi === '0') {
imsiMsg = `${tableState.selectedRowKeys[0]}... ${t(
@@ -911,7 +916,7 @@ function fnRecordDelete(imsi: string) {
onOk() {
modalState.loadDataLoading = true;
const hide = message.loading(t('common.loading'), 0);
delSub(neID, imsi)
delUDMSub(neId, imsi)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
const msgContent = t('common.msgSuccess', {
@@ -988,12 +993,12 @@ function fnRecordExport(type: string = 'txt') {
/**列表导出 */
function fnExportList(type: string) {
const neID = queryParams.neId;
if (!neID) return;
const neId = queryParams.neId;
if (!neId) return;
const key = 'exportSub';
message.loading({ content: t('common.loading'), key });
exportSub({
neId: neID,
exportUDMSub({
neId: neId,
type: type,
}).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
@@ -1015,29 +1020,27 @@ function fnExportList(type: string) {
/**重新加载数据 */
function fnLoadData() {
const neID = queryParams.neId;
if (tableState.loading || !neID) return;
const neId = queryParams.neId;
if (tableState.loading || !neId) return;
modalState.loadDataLoading = true;
tablePagination.total = 0;
tableState.data = [];
tableState.loading = true; // 表格loading
loadSub(neID).then(res => {
resetUDMSub(neId).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
const num = res.data;
const timerS = Math.ceil(+num / 1500) + 1;
notification.success({
message: t('views.neUser.sub.loadData'),
description: t('views.neUser.sub.loadDataTip', { num }),
duration: num < 10_0000 ? 10 : 30,
duration: timerS,
});
// 延迟20s后关闭loading刷新列表
setTimeout(
() => {
modalState.loadDataLoading = false;
tableState.loading = false; // 表格loading
fnQueryReset();
},
num < 10_0000 ? 10_000 : 30_000
);
setTimeout(() => {
modalState.loadDataLoading = false;
tableState.loading = false; // 表格loading
fnQueryReset();
}, timerS * 1000);
} else {
message.error({
content: t('common.getInfoFail'),
@@ -1055,7 +1058,7 @@ function fnGetList(pageNum?: number) {
queryParams.pageNum = pageNum;
tablePagination.current = pageNum;
}
listSub(toRaw(queryParams)).then(res => {
listUDMSub(toRaw(queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
// 取消勾选
if (tableState.selectedRowKeys.length > 0) {
@@ -1112,21 +1115,37 @@ function fnModalUploadImportClose() {
/**对话框表格信息导入上传 */
function fnModalUploadImportUpload(file: File) {
const neID = queryParams.neId;
if (!neID) {
const neId = queryParams.neId;
if (!neId) {
return Promise.reject('Unknown network element');
}
let formData = new FormData();
formData.append('file', file);
formData.append('neId', neID);
const hide = message.loading(t('common.loading'), 0);
uploadImportState.loading = true;
importSubData(formData)
// 上传文件
let formData = new FormData();
formData.append('file', file);
formData.append('subPath', 'import');
uploadFile(formData)
.then(res => {
uploadImportState.msg = res.msg;
if (res.code === RESULT_CODE_SUCCESS) {
return res.data.fileName;
} else {
uploadImportState.msg = res.msg;
uploadImportState.loading = false;
return '';
}
})
.catch((err: { code: number; msg: string }) => {
message.error(` ${err.msg}`);
.then((filePath: string) => {
if (!filePath) return;
// 文件导入
return importUDMSub({
neId: neId,
uploadPath: filePath,
});
})
.then(res => {
if (!res) return;
uploadImportState.msg = res.msg;
})
.finally(() => {
hide();
@@ -1222,12 +1241,20 @@ onMounted(() => {
</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
:placeholder="t('common.inputPlease')"
></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
:placeholder="t('common.inputPlease')"
></a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
@@ -2007,8 +2034,8 @@ onMounted(() => {
v-model:value="modalState.BatchForm.num"
style="width: 100%"
:min="1"
:max="100000"
placeholder="<=100000"
:max="10000"
placeholder="<=10000"
></a-input-number>
</a-form-item>
</a-col>
@@ -2568,8 +2595,8 @@ onMounted(() => {
v-model:value="modalState.BatchDelForm.num"
style="width: 100%"
:min="1"
:max="100000"
placeholder="<=100000"
:max="10000"
placeholder="<=10000"
></a-input-number>
</a-form-item>
</a-col>
@@ -2585,6 +2612,7 @@ onMounted(() => {
@close="fnModalUploadImportClose"
v-model:visible="uploadImportState.visible"
:ext="['.txt']"
:size="10"
>
<template #default>
<a-textarea