feat: 处理导入设备的 bug。关闭 弹窗还存在的问题。和进度条显示不准确的问题

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

@@ -1,8 +1,7 @@
 <template>
   <div class="system-edit-dic-container">
     <el-dialog :title="(open_type === 'upload' ? '导入' : '导出') + '设备'" v-model="isShowDialog" width="769px">
-      <el-form :model="ruleForm" ref="formRef" :rules="rules" label-width="110px">
-
+      <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">
             <el-option v-for="item in productData" :key="item.key" :label="item.name" :value="item.key" />
@@ -10,8 +9,8 @@
         </el-form-item>
 
         <el-form-item label="导入文件" prop="path" v-if="open_type === 'upload'">
-          <el-upload accept="xls,xlsx,csv" :show-file-list="true" :data="{ productKey: ruleForm.productKey }" :limit="1" :headers="headers" :action="uploadUrl" :on-success="updateImg" :before-upload="beforeAvatarUpload">
-            <el-button>
+          <el-upload ref="uploadRef" :disabled="uploading" accept="xls,xlsx,csv" :show-file-list="true" :data="{ productKey: ruleForm.productKey }" :limit="1" :headers="headers" :action="uploadUrl" :on-success="updateImg" :before-upload="beforeAvatarUpload">
+            <el-button :loading="uploading">
               <el-icon> <ele-Upload /> </el-icon>
               上传文件
             </el-button>
@@ -29,7 +28,7 @@
         <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>
         </span>
       </template>
     </el-dialog>
@@ -72,6 +71,8 @@ export default defineComponent({
     };
     const formRef = ref<HTMLElement | null>(null);
     const tagRef = ref<HTMLElement | null>(null);
+    const uploading = ref(false);
+    const uploadRef = ref();
     const state = reactive<DicState>({
       isShowDialog: false,
       open_type: '',
@@ -85,7 +86,7 @@ export default defineComponent({
     });
 
 
-    const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
+    const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile: any) => {
       if (!state.ruleForm.productKey) {
         ElMessage.error('请先选择所属产品!');
         return false;
@@ -94,10 +95,13 @@ export default defineComponent({
         ElMessage.error('文件不能超过2MB!');
         return false;
       }
+      uploading.value = true
       return true;
     };
 
-    const updateImg = (res: any) => {
+    const updateImg = (res: any, file: File) => {
+      uploadRef.value.handleRemove(file);
+      uploading.value = false
       if (res.code === 0) {
         ElMessage.success('导入成功');
         closeDialog(); // 关闭弹窗
@@ -180,14 +184,38 @@ export default defineComponent({
       beforeAvatarUpload,
       down,
       updateImg,
+      uploading,
       openDialog,
       closeDialog,
       onCancel,
       onSubmit,
+      uploadRef,
       formRef,
       ...toRefs(state),
     };
   },
 });
 </script>
+<style scoped lang="scss">
+.el-form {
+
+  ::v-deep(.el-input-group__prepend),
+  ::v-deep(.el-input-group__append) {
+    padding: 0 5px;
+  }
+
+  ::v-deep(.el-upload-list) {
+    display: none;
+  }
+
+  .upload-box {
 
+    // height: 24px;
+    ::v-deep(.el-upload) {
+      vertical-align: top;
+    }
+
+    margin: 0 12px;
+  }
+}
+</style>