perf: 优化上传组件

src/views/neUser/sub/index.vue

@@ -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>