perf: 网元授权勾选多上传更新

This commit is contained in:
TsMask
2024-05-24 17:41:08 +08:00
parent c155160cf7
commit b1c7a068cf
3 changed files with 61 additions and 111 deletions

View File

@@ -736,6 +736,7 @@ export default {
licensePathTip: "Please upload license file", licensePathTip: "Please upload license file",
upload: 'Upload', upload: 'Upload',
uploadBatch: "Upload License", uploadBatch: "Upload License",
uploadChangeFail: "Some network elements failed to update the license, please check whether the service terminal environment is available!",
}, },
neConfPara5G: { neConfPara5G: {
title: 'Save Info', title: 'Save Info',

View File

@@ -736,6 +736,7 @@ export default {
licensePathTip: "请上传许可证文件", licensePathTip: "请上传许可证文件",
upload: '上传', upload: '上传',
uploadBatch: "上传许可证", uploadBatch: "上传许可证",
uploadChangeFail: "部分网元更新许可证失败,请检查服务终端环境是否可用!",
}, },
neConfPara5G: { neConfPara5G: {
title: '保存信息', title: '保存信息',

View File

@@ -1,12 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted, watch, PropType, computed } from 'vue'; import { reactive, onMounted, watch, PropType, h } from 'vue';
import { message, Upload } from 'ant-design-vue/lib'; import { message, notification, Upload } from 'ant-design-vue/lib';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface'; import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
import { FileType } from 'ant-design-vue/lib/upload/interface'; import { FileType } from 'ant-design-vue/lib/upload/interface';
import { uploadFile } from '@/api/tool/file'; import { uploadFile } from '@/api/tool/file';
import { changeNeLicense, listNeLicense } from '@/api/ne/neLicense'; import { changeNeLicense } from '@/api/ne/neLicense';
const { t } = useI18n(); const { t } = useI18n();
const emit = defineEmits(['ok', 'cancel', 'update:visible']); const emit = defineEmits(['ok', 'cancel', 'update:visible']);
const props = defineProps({ const props = defineProps({
@@ -27,10 +27,6 @@ type ModalStateType = {
visibleByUploadFile: boolean; visibleByUploadFile: boolean;
/**标题 */ /**标题 */
title: string; title: string;
/**模式 */
mode: 'Universal' | 'AUSF-UDM-IMS';
/**指定网元 */
selectNe: any[];
/**授权文件路径 */ /**授权文件路径 */
licensePath: string; licensePath: string;
/**上传文件 */ /**上传文件 */
@@ -42,8 +38,6 @@ type ModalStateType = {
/**对话框对象信息状态 */ /**对话框对象信息状态 */
let modalState: ModalStateType = reactive({ let modalState: ModalStateType = reactive({
visibleByUploadFile: false, visibleByUploadFile: false,
mode: 'Universal',
selectNe: [],
licensePath: '', licensePath: '',
uploadFiles: [], uploadFiles: [],
title: '授权文件', title: '授权文件',
@@ -56,41 +50,60 @@ let modalState: ModalStateType = reactive({
*/ */
async function fnModalOk() { async function fnModalOk() {
if (!modalState.licensePath) { if (!modalState.licensePath) {
message.warning('请上传授权文件', 3); message.warning(t('views.ne.neLicense.licensePathTip'), 3);
return; return;
} }
if (modalState.confirmLoading) return; if (modalState.confirmLoading) return;
modalState.confirmLoading = true; modalState.confirmLoading = true;
const hide = message.loading(t('common.loading'), 0);
let reqArr: any = calcSelectNe.value.map(s => { const notificationKey = 'NE_LICENSE_MORE';
s.reload = true; // 重启网元 notification.info({
s.licensePath = modalState.licensePath; key: notificationKey,
return changeNeLicense(s); message: modalState.title,
description: t('common.loading'),
duration: 0,
}); });
if (reqArr.length === 0) {
message.warning('没有对应的网元对象', 3); if (props.licenseList.length === 0) {
hide(); notification.close(notificationKey);
modalState.confirmLoading = false; modalState.confirmLoading = false;
return; return;
} }
Promise.all(reqArr) const hasFailNeType: string[] = [];
.then(resArr => { for (const item of props.licenseList) {
for (const res of resArr) { try {
if (res.code === RESULT_CODE_SUCCESS) { const res = await changeNeLicense({
message.success(t('common.operateOk'), 3); neType: item.neType,
} else { neId: item.neId,
message.success(res.msg, 3); licensePath: modalState.licensePath,
} reload: true, // 重启网元
});
if (res.code !== RESULT_CODE_SUCCESS) {
hasFailNeType.push(item.neType);
} }
emit('ok', resArr); } catch (error) {
fnModalCancel(); console.error(error);
}) }
.finally(() => { }
hide();
modalState.confirmLoading = false; // 存在错误网元提示
if (hasFailNeType.length > 0) {
notification.warning({
message: modalState.title,
description: h('div', {}, [
h('p', t('views.ne.neLicense.uploadChangeFail')),
h('div', { style: { color: '#f5222d' } }, hasFailNeType.join('、')),
]),
duration: 4.5,
}); });
}
// 结束
emit('ok', hasFailNeType);
fnModalCancel();
notification.close(notificationKey);
modalState.confirmLoading = false;
} }
/** /**
@@ -100,8 +113,6 @@ async function fnModalOk() {
function fnModalCancel() { function fnModalCancel() {
modalState.visibleByUploadFile = false; modalState.visibleByUploadFile = false;
modalState.confirmLoading = false; modalState.confirmLoading = false;
modalState.mode = 'Universal';
modalState.selectNe = [];
modalState.licensePath = ''; modalState.licensePath = '';
modalState.uploadFiles = []; modalState.uploadFiles = [];
emit('cancel'); emit('cancel');
@@ -136,7 +147,6 @@ function fnUploadFile(up: UploadRequestOption) {
uploadFile(formData) uploadFile(formData)
.then(res => { .then(res => {
if (res.code === RESULT_CODE_SUCCESS) { if (res.code === RESULT_CODE_SUCCESS) {
message.success('upload success', 3);
// 改为完成状态 // 改为完成状态
const file = modalState.uploadFiles[0]; const file = modalState.uploadFiles[0];
file.percent = 100; file.percent = 100;
@@ -159,43 +169,12 @@ watch(
() => props.visible, () => props.visible,
val => { val => {
if (val) { if (val) {
// 传入授权列表 modalState.title = t('views.ne.neLicense.updateTtile');
if (props.licenseList.length === 0) {
listNeLicense({
neType: undefined,
neId: '',
version: '',
pageNum: 1,
pageSize: 20,
}).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
modalState.selectNe = res.rows;
}
});
} else {
modalState.selectNe = props.licenseList;
}
modalState.title = 'Upload License File';
modalState.visibleByUploadFile = true; modalState.visibleByUploadFile = true;
} }
} }
); );
/**授权模式选择 */
const calcSelectNe = computed(() => {
if (!Array.isArray(modalState.selectNe)) return [];
if (modalState.mode === 'AUSF-UDM-IMS') {
return modalState.selectNe.filter(s =>
['AUSF', 'UDM', 'IMS'].includes(s.neType)
);
}
return modalState.selectNe.filter(
s => !['OMC', 'AUSF', 'UDM', 'IMS'].includes(s.neType)
);
});
onMounted(() => {}); onMounted(() => {});
</script> </script>
@@ -207,30 +186,31 @@ onMounted(() => {});
:visible="modalState.visibleByUploadFile" :visible="modalState.visibleByUploadFile"
:title="modalState.title" :title="modalState.title"
:confirm-loading="modalState.confirmLoading" :confirm-loading="modalState.confirmLoading"
:cancel-button-props="{ disabled: modalState.confirmLoading }"
:closable="false"
@ok="fnModalOk" @ok="fnModalOk"
@cancel="fnModalCancel" @cancel="fnModalCancel"
> >
<a-form <a-form
name="modalStateFrom" name="modalStateFrom"
layout="horizontal" layout="horizontal"
:validate-on-rule-change="false"
:validateTrigger="[]"
:wrapper-col="{ span: 18 }" :wrapper-col="{ span: 18 }"
:label-col="{ span: 6 }" :label-col="{ span: 6 }"
:labelWrap="true" :labelWrap="true"
> >
<a-form-item label="NE Type" v-if="calcSelectNe.length > 0"> <a-form-item :label="t('views.ne.common.neType')">
<a-tag color="default" v-for="s in calcSelectNe"> <a-tag color="processing" v-for="s in props.licenseList">
{{ s.neType }} {{ s.neType }}
</a-tag> </a-tag>
</a-form-item> </a-form-item>
<a-form-item label="License Mode" name="mode">
<a-select v-model:value="modalState.mode"> <a-form-item
<a-select-option value="Universal">Universal</a-select-option> :label="t('views.ne.neLicense.licensePath')"
<a-select-option value="AUSF-UDM-IMS">AUSF-UDM-IMS</a-select-option> name="file"
</a-select> :required="true"
</a-form-item> :validate-on-rule-change="false"
<a-form-item label="License File" name="file" :required="true"> :validateTrigger="[]"
>
<a-upload <a-upload
name="file" name="file"
v-model:file-list="modalState.uploadFiles" v-model:file-list="modalState.uploadFiles"
@@ -251,42 +231,10 @@ onMounted(() => {});
<template #icon> <template #icon>
<UploadOutlined /> <UploadOutlined />
</template> </template>
Upload {{ t('views.ne.neLicense.upload') }}
</a-button> </a-button>
</a-upload> </a-upload>
</a-form-item> </a-form-item>
<a-form-item label="License File" name="file" v-if="false">
<a-input-group compact>
<a-upload
name="file"
v-model:file-list="modalState.uploadFiles"
accept=".ini"
list-type="text"
:multiple="true"
:max-count="1"
:show-upload-list="{
showPreviewIcon: false,
showRemoveIcon: false,
showDownloadIcon: false,
}"
:before-upload="fnBeforeUploadFile"
:custom-request="fnUploadFile"
:disabled="modalState.confirmLoading"
>
<a-button type="primary">
<template #icon>
<UploadOutlined />
</template>
Upload
</a-button>
</a-upload>
<a-select v-model:value="modalState.mode" style="width: 142px">
<a-select-option value="Other">Other</a-select-option>
<a-select-option value="AUSF-UDM-IMS">AUSF-UDM-IMS</a-select-option>
</a-select>
</a-input-group>
</a-form-item>
</a-form> </a-form>
</a-modal> </a-modal>
</template> </template>