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

perf: 优化上传组件

Browse Source
This commit is contained in:
TsMask
2023-09-25 10:39:28 +08:00
parent 0bc2be52ef
commit 3525d7567e
4 changed files with 232 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/views/neUser/auth/index.vue
View File

@@ -6,7 +6,7 @@ import { message, Modal, Form, notification } 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 UploadImport from '@/components/UploadImport/index.vue';
import UploadModal from '@/components/UploadModal/index.vue';
import {
listAuth,
getAuth,
@@ -22,7 +22,6 @@ 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 { formItemProps } from 'ant-design-vue/lib/form';
const { t } = useI18n();
const route = useRoute();
@@ -186,7 +185,7 @@ let modalState: ModalStateType = reactive({
visibleByBatchDel: false,
title: 'UDM鉴权用户',
from: {
id:'',
id: '',
imsi: '',
amf: '',
ki: '',
@@ -237,18 +236,18 @@ const modalStateBatchFrom = Form.useForm(
})
);
/**对话框内批量删除表单属性和校验规则 */
const modalStateBatchDelFrom = Form.useForm(
modalState.BatchDelForm,
reactive({
num: [{ required: true, message: '放号数不能为空' },
{ min: 1, max: 100, message: '放号数必须小于等于100' }],
num: [
{ required: true, message: '放号数不能为空' },
{ min: 1, max: 100, message: '放号数必须小于等于100' },
],
imsi: [{ required: true, message: 'IMSI不能为空' }],
})
);
/**
* 对话框弹出显示为 新增或者修改
* @param noticeId 网元id, 不传为新增
@@ -347,7 +346,7 @@ function fnBatchModalOk() {
const from = toRaw(modalState.BatchForm);
const neID = queryParams.neId || '-';
// const result = from.id ? updateAuth(from) : addAuth(neID, from);
from.neID=neID;
from.neID = neID;
const result = batchAuth(from);
const hide = message.loading({ content: t('common.loading') });
result
@@ -500,39 +499,54 @@ type ModalUploadImportStateType = {
visible: boolean;
/**标题 */
title: string;
/**导入模板下载触发 */
templateDownload: boolean;
/**是否上传中 */
loading: boolean;
/**上传结果信息 */
msg: string;
};
/**对话框表格信息导入对象信息状态 */
let modalUploadImportState: ModalUploadImportStateType = reactive({
let uploadImportState: ModalUploadImportStateType = reactive({
visible: false,
title: '数据导入',
templateDownload: false,
loading: false,
msg: '',
});
/**
* 对话框表格信息导入确认执行函数
* @param isUpload 是否已上传文件
*/
function fnModalUploadImportClose(isUpload: boolean) {
if (isUpload) {
fnGetList();
}
}
/**对话框表格信息导入弹出窗口 */
function fnModalImportOpen() {
modalUploadImportState.visible = true;
function fnModalUploadImportOpen() {
uploadImportState.msg = '';
uploadImportState.loading = false;
uploadImportState.visible = true;
}
/**列表导入数据 */
async function fnModalImportData(data: FormData) {
/**对话框表格信息导入关闭窗口 */
function fnModalUploadImportClose() {
uploadImportState.visible = false;
fnGetList();
}
/**对话框表格信息导入上传 */
function fnModalUploadImportUpload(file: File) {
let formData = new FormData();
formData.append('file', file);
const neID = queryParams.neId;
if (!neID) {
return Promise.reject('未知网元');
}
return importAuthData(neID, data);
const hide = message.loading('正在上传...', 0);
uploadImportState.loading = true;
importAuthData(neID, formData)
.then(res => {
uploadImportState.msg = res.msg;
})
.catch((err: { code: number; msg: string }) => {
message.error(`上传失败 ${err.msg}`);
})
.finally(() => {
hide();
uploadImportState.loading = false;
});
}
onMounted(() => {
@@ -635,7 +649,12 @@ onMounted(() => {
</template>
{{ t('views.neUser.auth.batchAddText') }}
</a-button>
<a-button type="primary" danger ghost @click.prevent="fnModalVisibleByBatch(0)">
<a-button
type="primary"
danger
ghost
@click.prevent="fnModalVisibleByBatch(0)"
>
<template #icon>
<DeleteOutlined />
</template>
@@ -659,7 +678,7 @@ onMounted(() => {
</a-button>
</a-popconfirm>
<a-button type="dashed" @click.prevent="fnModalImportOpen">
<a-button type="dashed" @click.prevent="fnModalUploadImportOpen">
<template #icon><ImportOutlined /></template>
{{ t('views.neUser.auth.import') }}
</a-button>
@@ -785,7 +804,8 @@ onMounted(() => {
:label-col="{ span: 7 }"
>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24"> {{ modalState.from }}
<a-col :lg="12" :md="12" :xs="24">
{{ modalState.from }}
<a-form-item
label="IMSI"
name="imsi"
@@ -793,7 +813,7 @@ onMounted(() => {
>
<a-input
v-model:value="modalState.from.imsi"
:disabled="modalState.from.id!=''"
:disabled="modalState.from.id != ''"
allow-clear
placeholder="请输入IMSI"
>
@@ -985,14 +1005,24 @@ onMounted(() => {
</a-modal>
<!-- 上传导入表格数据文件框 -->
<UploadImport
:title="modalUploadImportState.title"
v-model:visible="modalUploadImportState.visible"
:file-size="5"
:file-ext="['.csv', '.txt']"
:upload-file-method="fnModalImportData"
<UploadModal
:title="uploadImportState.title"
:loading="uploadImportState.loading"
@upload="fnModalUploadImportUpload"
@close="fnModalUploadImportClose"
/>
v-model:visible="uploadImportState.visible"
:ext="['.csv', '.txt']"
:size="5"
>
<template #default>
<a-textarea
:disabled="true"
:hidden="!uploadImportState.msg"
:value="uploadImportState.msg"
:auto-size="{ minRows: 2, maxRows: 8 }"
/>
</template>
</UploadModal>
</PageContainer>
</template>

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

@@ -6,7 +6,7 @@ import { message, Modal, Form, notification } 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 UploadImport from '@/components/UploadImport/index.vue';
import UploadModal from '@/components/UploadModal/index.vue';
import {
loadSub,
listSub,
@@ -463,39 +463,54 @@ type ModalUploadImportStateType = {
visible: boolean;
/**标题 */
title: string;
/**导入模板下载触发 */
templateDownload: boolean;
/**是否上传中 */
loading: boolean;
/**上传结果信息 */
msg: string;
};
/**对话框表格信息导入对象信息状态 */
let modalUploadImportState: ModalUploadImportStateType = reactive({
let uploadImportState: ModalUploadImportStateType = reactive({
visible: false,
title: '数据导入',
templateDownload: false,
loading: false,
msg: '',
});
/**
* 对话框表格信息导入确认执行函数
* @param isUpload 是否已上传文件
*/
function fnModalUploadImportClose(isUpload: boolean) {
if (isUpload) {
fnGetList();
}
}
/**对话框表格信息导入弹出窗口 */
function fnModalImportOpen() {
modalUploadImportState.visible = true;
function fnModalUploadImportOpen() {
uploadImportState.msg = '';
uploadImportState.loading = false;
uploadImportState.visible = true;
}
/**列表导入数据 */
async function fnModalImportData(data: FormData) {
/**对话框表格信息导入关闭窗口 */
function fnModalUploadImportClose() {
uploadImportState.visible = false;
fnGetList();
}
/**对话框表格信息导入上传 */
function fnModalUploadImportUpload(file: File) {
let formData = new FormData();
formData.append('file', file);
const neID = queryParams.neId;
if (!neID) {
return Promise.reject('未知网元');
}
return importSubData(neID, data);
const hide = message.loading('正在上传...', 0);
uploadImportState.loading = true;
importSubData(neID, formData)
.then(res => {
uploadImportState.msg = res.msg;
})
.catch((err: { code: number; msg: string }) => {
message.error(`上传失败 ${err.msg}`);
})
.finally(() => {
hide();
uploadImportState.loading = false;
});
}
onMounted(() => {
@@ -621,7 +636,7 @@ onMounted(() => {
</a-button>
</a-popconfirm>
<a-button type="dashed" @click.prevent="fnModalImportOpen">
<a-button type="dashed" @click.prevent="fnModalUploadImportOpen">
<template #icon>
<ImportOutlined />
</template>
@@ -1074,14 +1089,24 @@ onMounted(() => {
</a-modal>
<!-- 上传导入表格数据文件框 -->
<UploadImport
:title="modalUploadImportState.title"
v-model:visible="modalUploadImportState.visible"
:file-size="5"
:file-ext="['.csv', '.txt']"
:upload-file-method="fnModalImportData"
<UploadModal
:title="uploadImportState.title"
:loading="uploadImportState.loading"
@upload="fnModalUploadImportUpload"
@close="fnModalUploadImportClose"
/>
v-model:visible="uploadImportState.visible"
:ext="['.csv', '.txt']"
:size="5"
>
<template #default>
<a-textarea
:disabled="true"
:hidden="!uploadImportState.msg"
:value="uploadImportState.msg"
:auto-size="{ minRows: 2, maxRows: 8 }"
/>
</template>
</UploadModal>
</PageContainer>
</template>