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

247
src/views/neUser/auth/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 {
listAuth,
getAuth,
updateAuth,
addAuth,
delAuth,
loadAuth,
exportAuth,
importAuthData,
batchAuth,
batchDelAuth,
} from '@/api/neUser/auth';
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 {
addUDMAuth,
updateUDMAuth,
batchAddUDMAuth,
batchDelUDMAuth,
delUDMAuth,
getUDMAuth,
exportUDMAuth,
importUDMAuth,
resetUDMAuth,
listUDMAuth,
} from '@/api/neData/udm_auth';
import { uploadFile } from '@/api/tool/file';
const { t } = useI18n();
/**网元参数 */
@@ -82,7 +83,7 @@ let tableState: TabeStateType = reactive({
});
/**表格字段列 */
let tableColumns: ColumnsType = [
let tableColumns = ref<ColumnsType>([
{
title: 'IMSI',
dataIndex: 'imsi',
@@ -125,7 +126,7 @@ let tableColumns: ColumnsType = [
key: 'imsi',
align: 'left',
},
];
]);
/**表格字段列排序 */
let tableColumnsDnd = ref<ColumnsType>([]);
@@ -291,8 +292,8 @@ function fnModalVisibleByEdit(row?: Record<string, any>) {
if (modalState.confirmLoading) return;
const hide = message.loading(t('common.loading'), 0);
modalState.confirmLoading = true;
const neID = queryParams.neId || '-';
getAuth(neID, row.imsi)
const neId = queryParams.neId || '-';
getUDMAuth(neId, row.imsi)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
modalState.from = Object.assign(modalState.from, res.data);
@@ -340,7 +341,7 @@ function fnModalOk() {
const from = toRaw(modalState.from);
from.neId = queryParams.neId || '-';
from.algoIndex = `${from.algoIndex}`;
const result = from.id ? updateAuth(from) : addAuth(from);
const result = from.id ? updateUDMAuth(from) : addUDMAuth(from);
const hide = message.loading(t('common.loading'), 0);
result
.then(res => {
@@ -379,31 +380,35 @@ function fnBatchModalOk() {
.then(e => {
modalState.confirmLoading = true;
const from = toRaw(modalState.BatchForm);
from.neID = queryParams.neId || '-';
from.neId = queryParams.neId || '-';
from.algoIndex = `${from.algoIndex}`;
const result = batchAuth(from);
const hide = message.loading(t('common.loading'), 0);
result
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.msgSuccess', { msg: modalState.title }),
duration: 3,
});
const result = batchAddUDMAuth(from, from.num);
result.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
const timerS = Math.max(
Math.ceil(+from.num / 500),
`${from.num}`.length
);
notification.success({
message: modalState.title,
description: t('common.operateOk'),
duration: timerS,
});
setTimeout(() => {
modalState.confirmLoading = false;
modalState.visibleByBatch = false;
modalStateBatchFrom.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);
@@ -420,33 +425,30 @@ function fnBatchDelModalOk() {
.then(e => {
modalState.confirmLoading = true;
const from = toRaw(modalState.BatchDelForm);
const neID = queryParams.neId || '-';
// const result = from.id ? updateAuth(from) : addAuth(neID, from);
from.neID = neID;
const result = batchDelAuth(from);
const hide = message.loading(t('common.loading'), 0);
result
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.msgSuccess', { msg: modalState.title }),
duration: 3,
});
const neId = queryParams.neId || '-';
batchDelUDMAuth(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);
@@ -485,8 +487,8 @@ function fnModalCancel() {
* @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(
@@ -501,7 +503,7 @@ function fnRecordDelete(imsi: string) {
onOk() {
modalState.loadDataLoading = true;
const hide = message.loading(t('common.loading'), 0);
delAuth(neID, imsi)
delUDMAuth(neId, imsi)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
const msgContent = t('common.msgSuccess', {
@@ -557,56 +559,50 @@ function fnRecordExport(type: string = 'txt') {
/**列表导出 */
function fnExportList(type: string) {
const neID = queryParams.neId;
if (!neID) return;
const key = 'exportAuth';
message.loading({ content: t('common.loading'), key });
exportAuth({
neId: neID,
const neId = queryParams.neId;
if (!neId) return;
const hide = message.loading(t('common.loading'), 0);
exportUDMAuth({
neId: neId,
type: type,
}).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.msgSuccess', { msg: t('common.export') }),
key,
duration: 2,
});
saveAs(res.data, `UDMAuth_${Date.now()}.${type}`);
} else {
message.error({
content: `${res.msg}`,
key,
duration: 2,
});
}
});
})
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success(t('common.msgSuccess', { msg: t('common.export') }), 3);
saveAs(res.data, `UDMAuth_${Date.now()}.${type}`);
} else {
message.error(`${res.msg}`, 3);
}
})
.finally(() => {
hide();
});
}
/**重新加载数据 */
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
loadAuth(neID).then(res => {
resetUDMAuth(neId).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
const num = res.data;
const timerS = Math.ceil(+num / 2500);
notification.success({
message: t('views.neUser.auth.loadData'),
description: t('views.neUser.auth.loadDataTip', { num }),
duration: num < 10_0000 ? 10 : 30,
duration: Math.ceil(+num / 2500),
});
// 延迟10s后关闭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'),
@@ -624,7 +620,7 @@ function fnGetList(pageNum?: number) {
queryParams.pageNum = pageNum;
tablePagination.current = pageNum;
}
listAuth(toRaw(queryParams)).then(res => {
listUDMAuth(toRaw(queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
// 取消勾选
if (tableState.selectedRowKeys.length > 0) {
@@ -675,26 +671,42 @@ function fnModalUploadImportOpen() {
/**对话框表格信息导入关闭窗口 */
function fnModalUploadImportClose() {
uploadImportState.visible = false;
fnGetList();
fnGetList(1);
}
/**对话框表格信息导入上传 */
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;
importAuthData(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 importUDMAuth({
neId: neId,
uploadPath: filePath,
});
})
.then(res => {
if (!res) return;
uploadImportState.msg = res.msg;
})
.finally(() => {
hide();
@@ -755,7 +767,11 @@ 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">
@@ -1162,8 +1178,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>
@@ -1348,8 +1364,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>
@@ -1365,6 +1381,7 @@ onMounted(() => {
@close="fnModalUploadImportClose"
v-model:visible="uploadImportState.visible"
:ext="['.txt']"
:size="10"
>
<template #default>
<a-textarea