优化数据导入

src/api/request.js

@@ -9,6 +9,7 @@ export default {
       method: 'post',
     })
   },
+  // 上传文件
   uploadFile(url,data){
     return request({
       url: url,

src/router/index.js

@@ -471,21 +471,32 @@ export const constantRoutes = [
     component: Layout,
     meta:{
       icon: "table",
-      title: "首页导入"
+      title: "数据导入"
     },
     hidden: true,
     children: [
       {
         path: '/recordsImport',
         name: 'recordsImport',
-        component: () => import('@/views/recordsImport/index'),
+        component: () => import('@/views/dataImport/recordsImport/index'),
         meta: { 
-          title: '首页导入',
+          title: '首页数据导入',
           keepAlive: 1,
           canMultipleOpen: true,
           hidden: true
         }
-      }
+      },
+      {
+        path: '/dataAnalysis',
+        name: 'dataAnalysis',
+        component: () => import('@/views/dataImport/dataAnalysis/index'),
+        meta: { 
+          title: '首页数据分析',
+          keepAlive: 1,
+          canMultipleOpen: true,
+          hidden: true
+        }
+      },
     ]
   },
 

src/utils/request.js

@@ -70,11 +70,6 @@ service.interceptors.response.use(
     }
   },
   error => {
-    Message({
-      message: error.msg,
-      type: 'error',
-      duration: 5 * 1000,
-    });
     return Promise.reject(error);
   },
 );

src/views/recordsImport/index.vue → src/views/dataImport/recordsImport/index.vue

@@ -5,7 +5,7 @@
       <div class="titlebox">
         <div class="titlebox-text">病案首页数据导入</div>
         <div class="switch-box">
-          <el-switch v-model="switch_value" active-color="#185da6" disabled="true"></el-switch>
+          <el-switch v-model="switch_value" active-color="#185da6" :disabled="switch_disabled"></el-switch>
           <div class="switch-text">{{ switch_value?'上传 + 质控':'上传' }}</div>
         </div>
       </div>
@@ -16,13 +16,21 @@
           :accept="accept" 
           :limit="limit"
           action="none" 
+          :file-list="fileList"
           multiple 
           :on-exceed='limitCheck'
-          :http-request="uploadArticleCover"
+          :http-request="uploadArticleCover" 
+          
         >
           <i class="el-icon-upload"></i>
           <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
           <div class="el-upload__tip">支持excel、csv</div>
+
+          <div class="pop-box" v-if="is_loging">
+            <div class="pop-div">{{ loging_text }}</div>
+            <div class="pop-modal"></div>
+          </div>
+
         </el-upload>
       </div>
       <!-- 上传拖拽区域模块 结束 -->
@@ -53,15 +61,19 @@
 
 
     </div>
+
+
   </div>
 </template>
 <script>
+import request from '../../../api/request'//自定义封装的请求
 
 export default {
   name:'recordsImport',
   data() {
     return {
       switch_value: true,
+      switch_disabled: true,
       fileList: [],
       accept:'.xlsx,.xls,.csv', // 接受上传文件
       limit: 1, // 选着文件时限制总数
@@ -69,6 +81,8 @@ export default {
       tableData: [],
       sum_count: 0, //导入总数
       error_count: 0, // 导入失败数
+      is_loging: false,
+      loging_text:'',
     };
   },
   mounted() {
@@ -89,19 +103,25 @@ export default {
       const formData = new FormData();
       formData.append('file',param.file);
       formData.append('pictureCategory','articleCover');
-      this.$axios.post('/bl_import/importData',formData,{'Content-Type': 'multipart/form-data'}).then( res=>{
-        console.log(res)
-        console.log("上传完成")
-        this.fileList = [];
+      this.is_loging = true;
+      this.loging_text = '上传质控中...';
+      request.uploadFile('/bl_import/importData',formData).then( res=>{
         this.tableData = res.data.list;
         this.sum_count = res.data.sum_count; //导入总数
         this.error_count = res.data.error_count; // 导入失败数
+        this.loging_text = '质控完成';
+        
+        setTimeout( ()=>{
+          this.is_loging = false;
+        },2000)
+        this.$refs['upload'].clearFiles()
       }).catch( e=>{
         console.log('erro')
+        this.is_loging = false;
+        this.$message.error('上传失败');
+        this.$refs['upload'].clearFiles()
       })
     },
-
-    
    
   },
 };
@@ -140,6 +160,7 @@ export default {
     align-items: center;
     justify-content: center;
     margin-top: 10px;
+    position: relative;
   }
 
   .upload-demo::v-deep .el-upload-dragger{
@@ -171,4 +192,52 @@ export default {
     width: 100px;
     padding-left: 10px;
   }
+  .pop-box{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2001;
+  }
+  .pop-modal {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: .3;
+    background: #000;
+    z-index: 2000;
+  }
+  .pop-div{
+    display: inline-block;
+    width: 420px;
+    height: 70px;
+    line-height: 70px;
+    vertical-align: middle;
+    background-color: #FFF;
+    border-radius: 4px;
+    border: 1px solid #EBEEF5;
+    font-size: 18px;
+    -webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+    text-align: left;
+    overflow: hidden;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    text-align: center;
+    font-size: 15px;
+    z-index: 2001;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+  }
 </style>