fix: 修复导入设备时 当上传接口报错之后，关闭这个页面，重新再打开，上传这个按钮还是再转圈加载

src/views/iot/device/instance/component/excel.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="system-edit-dic-container">
-    <el-dialog :title="(open_type === 'upload' ? '导入' : '导出') + '设备'" v-model="isShowDialog" width="769px">
+    <el-dialog :title="(open_type === 'upload' ? '导入' : '导出') + '设备'" v-model="isShowDialog" width="769px" destroy-on-close>
       <el-form :model="ruleForm" ref="formRef" :rules="rules" label-width="110px" v-if="isShowDialog">
         <el-form-item label="所属产品" prop="productKey">
           <el-select v-model="ruleForm.productKey" placeholder="请选择所属产品" class="w100">
@@ -27,8 +27,7 @@
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="onCancel">取 消</el-button>
-          <el-button type="primary" @click="onSubmit" v-if="open_type !== 'upload'">{{ open_type === 'upload' ? '导入设备' : '导出设备'
-            }}</el-button>
+          <el-button type="primary" @click="onSubmit" v-if="open_type !== 'upload'">{{ open_type === "upload" ? "导入设备" : "导出设备" }}</el-button>
         </span>
       </template>
     </el-dialog>
@@ -36,11 +35,11 @@
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, defineComponent, ref, unref, nextTick } from 'vue';
-import api from '/@/api/device';
+import { reactive, toRefs, defineComponent, ref, unref, nextTick } from "vue";
+import api from "/@/api/device";
 import { ElMessage, UploadProps } from "element-plus";
-import downloadFile from '/@/utils/download';
-import getOrigin from '/@/utils/origin';
+import downloadFile from "/@/utils/download";
+import getOrigin from "/@/utils/origin";
 import { getToken } from "/@/utils/auth";
 
 interface RuleFormState {
@@ -49,25 +48,23 @@ interface RuleFormState {
 }
 
 const form: RuleFormState = {
-  productKey: '',
-  path: '',
-}
+  productKey: "",
+  path: "",
+};
 
 interface DicState {
   productData: any[];
   isShowDialog: boolean;
   ruleForm: RuleFormState;
-  rules: {}
+  rules: {};
   open_type: string;
 }
 
-
 export default defineComponent({
   setup(prop, { emit }) {
-
     const uploadUrl: string = getOrigin("/product/device/import");
     const headers = {
-      Authorization: 'Bearer ' + getToken(),
+      Authorization: "Bearer " + getToken(),
     };
     const formRef = ref<HTMLElement | null>(null);
     const tagRef = ref<HTMLElement | null>(null);
@@ -75,38 +72,36 @@ export default defineComponent({
     const uploadRef = ref();
     const state = reactive<DicState>({
       isShowDialog: false,
-      open_type: '',
+      open_type: "",
       productData: [], // 分类数据
       ruleForm: {
-        ...form
+        ...form,
       },
       rules: {
-        productKey: [{ required: true, message: '所属产品不能为空', trigger: 'blur' }],
-      }
+        productKey: [{ required: true, message: "所属产品不能为空", trigger: "blur" }],
+      },
     });
 
-
-    const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile: any) => {
+    const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile: any) => {
       if (!state.ruleForm.productKey) {
-        ElMessage.error('请先选择所属产品!');
+        ElMessage.error("请先选择所属产品!");
         return false;
       }
       if (rawFile.size / 1024 / 1024 > 2) {
-        ElMessage.error('文件不能超过2MB!');
+        ElMessage.error("文件不能超过2MB!");
         return false;
       }
-      uploading.value = true
+      uploading.value = true;
       return true;
     };
 
     const updateImg = (res: any, file: File) => {
       uploadRef.value.handleRemove(file);
-      uploading.value = false
+      uploading.value = false;
       if (res.code === 0) {
-        ElMessage.success('导入成功');
+        ElMessage.success("导入成功");
         closeDialog(); // 关闭弹窗
-        emit('typeList')
-
+        emit("typeList");
       } else {
         ElMessage.error(res.message);
       }
@@ -122,12 +117,15 @@ export default defineComponent({
     };
     const resetForm = () => {
       state.ruleForm = {
-        ...form
-      }
+        ...form,
+      };
     };
     // 关闭弹窗
-    const closeDialog = () => {
+    const closeDialog = (done?: () => void) => {
+      uploadRef.value?.abort();
       state.isShowDialog = false;
+      uploading.value = false;
+      done?.();
     };
     // 取消
     const onCancel = () => {
@@ -137,46 +135,44 @@ export default defineComponent({
     const getCurrentTime = () => {
       const date = new Date();
       const year = date.getFullYear().toString();
-      const month = (date.getMonth() + 1).toString().padStart(2, '0');
-      const day = date.getDate().toString().padStart(2, '0');
-      const hours = date.getHours().toString().padStart(2, '0');
-      const minutes = date.getMinutes().toString().padStart(2, '0');
+      const month = (date.getMonth() + 1).toString().padStart(2, "0");
+      const day = date.getDate().toString().padStart(2, "0");
+      const hours = date.getHours().toString().padStart(2, "0");
+      const minutes = date.getMinutes().toString().padStart(2, "0");
       return year + month + day + hours + minutes;
-    }
+    };
     const onSubmit = () => {
       const formWrap = unref(formRef) as any;
       if (!formWrap) return;
       formWrap.validate((valid: boolean) => {
         if (valid) {
-          if (state.open_type === 'upload') {
+          if (state.open_type === "upload") {
             api.device.import(state.ruleForm).then((res: any) => {
-              ElMessage.success('导入成功');
+              ElMessage.success("导入成功");
               closeDialog(); // 关闭弹窗
             });
           } else {
             const selectedProduct = state.productData.find((item) => item.key === state.ruleForm.productKey);
             if (selectedProduct) {
-              api.device.export({ productKey: state.ruleForm.productKey }).then((res: any) => downloadFile(res, selectedProduct.name + "-" + getCurrentTime() + ".xlsx"))
+              api.device.export({ productKey: state.ruleForm.productKey }).then((res: any) => downloadFile(res, selectedProduct.name + "-" + getCurrentTime() + ".xlsx"));
               closeDialog(); // 关闭弹窗
             }
-
-
           }
         }
       });
     };
     const down = () => {
-      const fileURL = '/deviceImportExample.xlsx';
+      const fileURL = "/deviceImportExample.xlsx";
       // 创建下载链接
-      const link = document.createElement('a');
+      const link = document.createElement("a");
       link.href = fileURL;
-      link.setAttribute('download', 'deviceImportExample.xlsx');
+      link.setAttribute("download", "deviceImportExample.xlsx");
 
       // 模拟点击下载链接进行下载
       document.body.appendChild(link);
       link.click();
       document.body.removeChild(link);
-    }
+    };
     return {
       uploadUrl,
       headers,
@@ -198,7 +194,6 @@ export default defineComponent({
 </script>
 <style scoped lang="scss">
 .el-form {
-
   ::v-deep(.el-input-group__prepend),
   ::v-deep(.el-input-group__append) {
     padding: 0 5px;
@@ -216,4 +211,4 @@ export default defineComponent({
     }
   }
 }
-</style>
+</style>