批量上传

src/styles/index.scss

@@ -515,4 +515,12 @@ div:focus {
 
 .el-progress-bar__inner {
     background-color: #165DFF;
+}
+
+.color-red {
+    color: #FF2F2F;
+}
+
+.color-green {
+    color: #3FC47C;
 }

src/views/organize_manage/BatchImport.vue

@@ -29,20 +29,29 @@
                     <div class="file-content">
                         <svg-icon icon-class="xlsx"></svg-icon>
                         <div class="file">
-                            <p>{{fileList[0].name}}</p>
+                            <p v-if="fileList[0]&&fileList[0].name">{{fileList[0].name}}</p>
                             <el-progress v-if="progressFlag" :percentage="percentage" :show-text="false"></el-progress>
-                            <b>{{fileList[0].fileSize}}</b>
+                            <b v-if="fileList[0]&&fileList[0].fileSize&&!progressFlag&&!uploading&&!resultData">{{fileList[0].fileSize}}</b>
+                            <div class="file-uploading" v-if="progressFlag">
+                                <span class="progress" v-if="realFileSize">{{'上传文件 '+alreadyUpload+'/'+realFileSize}}</span>
+                                <span>{{percentage}}%</span>
+                            </div>
+                            <div class="file-uploading" v-if="resultData">
+                                <span class="progress">{{'导入数据 '+resultData.cur_count+'/'+resultData.total_count}}</span>
+                                <span class="color-green" v-if="resultData.is_finish==='true'">完成</span>
+                                <span class="color-red" v-if="resultData.is_finish==='false'&&resultData.is_end==='true'">网络链接已中断</span>
+                            </div>
                         </div>
                     </div>
                     <i class="el-icon-error" @click="handleErmoveFile"></i>
                 </div>
                 <div class="file-bottom">
                     <p>批量上传内容与系统中有重复时</p>
-                    <el-radio-group v-model="sameUser">
+                    <el-radio-group v-model="sameUser" :disabled="uploading||(resultData&&resultData.is_finish==='true')">
                         <el-radio label="false">跳过</el-radio>
                         <el-radio label="true">覆盖</el-radio>
                     </el-radio-group>
-                    <el-checkbox-group v-model="coverUser">
+                    <el-checkbox-group v-model="coverUser" :disabled="uploading||(resultData&&resultData.is_finish==='true')">
                         <el-checkbox label="1">覆盖时忽略密码</el-checkbox>
                         <el-checkbox label="2">上传完成后自动导出密码文件</el-checkbox>
                     </el-checkbox-group>
@@ -55,14 +64,14 @@
             <a class="downLoad">下载模板</a>
             <div class="btn-box">
                 <el-button @click="closeDialog" size="small">取消</el-button>
-                <el-button type="primary" :disabled="!uploadFlag" v-if="!uploading&&!isStop"><svg-icon icon-class="upload"></svg-icon>开始上传</el-button>
-                <el-button type="primary" v-if="uploading&&!isStop"><svg-icon icon-class="pause-fill"></svg-icon>暂停</el-button>
-                <el-button type="warning" v-if="isStop"><i class="el-icon-refresh-right"></i>重试</el-button>
+                <el-button type="primary" :key="3" :disabled="!uploadFlag&&!file_id||(resultData&&resultData.is_finish==='true')" v-if="!uploading&&!isStop&&(resultData&&resultData.is_finish==='true'||!resultData)" @click="handleUpload" v-loading="loading"><svg-icon icon-class="upload"></svg-icon>开始上传</el-button>
+                <el-button type="primary" v-if="uploading&&!isStop" v-loading="loading" @click="handleInterruptTask"><svg-icon icon-class="pause-fill"></svg-icon>暂停</el-button>
+                <el-button type="warning" v-if="isStop" v-loading="loading" @click="handleUpload"><i class="el-icon-refresh-right"></i>重试</el-button>
             </div>
         </template>
         <template v-else>
             <div class="btn-box" style="flex:1">
-                <el-button type="primary"><svg-icon icon-class="upload"></svg-icon>导出日志</el-button>
+                <el-button :key="1" type="primary" :disabled="!(resultData&&resultData.is_finish==='true')"><svg-icon icon-class="upload"></svg-icon>导出日志</el-button>
             </div>
         </template>
     </div>
@@ -71,6 +80,7 @@
 
 <script>
 import { getToken } from "../../utils/auth";
+import { getLogin } from "@/api/ajax";
 export default {
   components: {},
   name: "batchImport",
@@ -86,8 +96,13 @@ export default {
       fileList: [],
       sameUser: 'false', // 存在相同的用户是否覆盖， true 覆盖，false 跳过。
       coverUser: [], // 覆盖用户时是否更新用户密码， true 更新，false 不更新。
-      progressFlag:true,
-      percentage:0
+      progressFlag:false,
+      percentage:0,
+      alreadyUpload:'', // 已经上传的大小
+      realFileSize: '', // 文件真实大小
+      loading: false,
+      timer: null,
+      resultData: null, // 上传结果数据
     };
   },
   watch: {},
@@ -123,7 +138,7 @@ export default {
     },
     handleSuccess(response, file, fileList) {
       if (response.status == 1) {
-        this.$message.success("用户上传成功");
+        this.progressFlag = false
         this.file_id = response.file_info_list[0].file_id
         this.uploadFlag = true
         this.fileList = fileList
@@ -139,30 +154,143 @@ export default {
             } else {
               item.fileSize = (item.size / 1000).toFixed(2) + "KB";
             }
-          });
+        });
       } else {
         this.fileList = [];
         this.file_id = ''
         this.uploadFlag = false
         this.$message.warning(response.msg);
         this.alreadyFile = false
+        this.progressFlag = false
+        this.percentage = 0
+        this.alreadyUpload = ''
       }
     },
     handleErmoveFile(){
+        if(this.progressFlag){
+            this.$message.warning('文件还未上传成功，不可删除');
+            return false
+        }
         this.file_id = ''
         this.uploadFlag = false
         this.fileList = []
         this.alreadyFile = false
+        this.progressFlag = false
+        this.isStop = false
+        this.percentage = 0
+        this.alreadyUpload = ''
+        this.resultData = null
+        this.sameUser = 'false'
+        this.coverUser = []
+        this.$forceUpdate()
     },
     uploadVideoProcess(event, file, fileList) {
-        // this.fileList = fileList
-        // this.progressFlag = true; // 显示进度条
-        // this.percentage = parseInt(event.percent); // 动态获取文件上传进度
-        // if (this.percentage >= 100) {
-        //     this.percentage = 100
-        //     setTimeout( () => {this.progressFlag = false}, 100) // 关闭进度条
-        // }
+        this.fileList = fileList
+        this.progressFlag = true; // 显示进度条
+        this.percentage = parseInt(event.percent); // 动态获取文件上传进度
+        if (file.size > 1000 * 1000) {
+            if (file.size / 1000 / 1000 / 1000 > 1) {
+            this.alreadyUpload =
+                (file.size / 1000 / 1000 / 1000 / 100*this.percentage).toFixed(2) + "GB";
+            this.realFileSize = (file.size / 1000 / 1000 / 1000).toFixed(2) + "GB";
+            } else {
+            this.alreadyUpload =
+                (file.size / 1000 / 1000 / 100*this.percentage).toFixed(2) + "MB";
+            this.realFileSize =
+                (file.size / 1000 / 1000).toFixed(2) + "MB";
+            }
+        } else {
+            this.alreadyUpload = (file.size / 1000 / 100*this.percentage).toFixed(2) + "KB";
+            this.realFileSize = (file.size / 1000).toFixed(2) + "KB";
+        }
+        if (this.percentage >= 100) {
+            this.percentage = 100
+        }
     },
+    // 开始上传
+    handleUpload(){
+        if(this.resultData&&this.resultData.is_finish==='true'){
+            this.$message.warning('已经解析过该文件');
+            return false
+        }
+        if(!this.file_id){
+            this.$message.warning('请先上传文件');
+            return false
+        }
+        this.loading = true
+        this.progressFlag = false
+        this.uploadFlag = false
+        let MethodName = "/OrgServer/Manager/DataImport/CreateSysUserImportTask";
+        let data = {
+            file_id: this.file_id,
+            is_cover_while_exit_same_user: this.sameUser,
+            is_update_password_while_cover_user: this.coverUser.indexOf('1')?'true':'false'
+        }
+        getLogin(MethodName, data)
+        .then((res) => {
+            if(res.status===1){
+                this.loading = false
+                this.uploading = true
+                this.isStop = false
+                this.timer = setInterval(() => {
+                    if (this.resultData&&this.resultData.is_finish==='true') {
+                        clearInterval(this.timer);
+                        this.timer = null;
+                        this.uploading = false
+                        this.$forceUpdate()
+                    }else{
+                        this.handleTaskStatus()
+                    }
+                }, 1000);
+            }else{
+                this.loading = false
+                this.uploading = false
+                this.uploadFlag = true
+                this.isStop = true
+                clearInterval(this.timer);
+            }
+        })
+        .catch(() => {
+            clearInterval(this.timer);
+            this.uploading = false
+            this.uploadFlag = true
+            this.isStop = true
+            this.loading = false
+        });
+    },
+    // 导入任务执行状态
+    handleTaskStatus(){
+        let MethodName = "/OrgServer/Manager/DataImport/GetSysUserImportTaskExecuteStatus";
+        let data = {
+            is_query_execute_log: 'true'
+        }
+        getLogin(MethodName, data)
+        .then((res) => {
+            if(res.status===1){
+                this.resultData = res
+                this.$forceUpdate()
+            }
+        })
+        .catch(() => {
+            this.uploading = false
+            this.loading = false
+        });    
+    },
+    // 中断任务
+    handleInterruptTask(){
+        this.loading = true
+        let MethodName = "/OrgServer/Manager/DataImport/InterruptSysUserImportTask";
+        getLogin(MethodName, {})
+        .then((res) => {
+            if(res.status===1){
+                this.isStop = true
+                this.loading = false
+            }
+        })
+        .catch(() => {
+            this.loading = false
+        });    
+    }
   },
   created() {
   },
@@ -304,6 +432,16 @@ export default {
     .el-progress{
         margin-bottom: 8px;
     }
+    .file-uploading{
+        display: flex;
+        justify-content: space-between;
+        font-size: 12px;
+        line-height: 14px;
+        color: #242634;
+        .progress{
+            font-weight: 600;
+        }
+    }
 }
 </style>
 <style lang="scss">
@@ -328,6 +466,7 @@ export default {
             color: #86909C;
             font-size: 12px;
             line-height: 20px;
+            word-break: break-word;
         }
     }
 }