From 320e75460d2f5e517c902b87fcc5c4d220472f6f Mon Sep 17 00:00:00 2001 From: zhanghua <314079846@qq.com> Date: 星期五, 20 十二月 2024 20:05:10 +0800 Subject: [PATCH] 学生导入优化 --- src/views/student/components/upload-student.vue | 427 +++++++++++++++++++++++++++++------------------------ 1 files changed, 232 insertions(+), 195 deletions(-) diff --git a/src/views/student/components/upload-student.vue b/src/views/student/components/upload-student.vue index 87b668e..db23140 100644 --- a/src/views/student/components/upload-student.vue +++ b/src/views/student/components/upload-student.vue @@ -1,230 +1,267 @@ <template> - <el-form class="demo-ruleForm"> - <el-form-item label="" style="display: inline-block"> - <div class="uploading-center"> - <div class="uploading"> - <dragUpload - :limit="1" - :orgId="parseInt(orgId)" - :staffId="parseInt(staffId)" - @fileSuccess="fatherMethod" - @file-uploading="showUploadProcess" - :type="'AUDIENCE'" - :action="'/dream/player/importPlayer'" - > - <div class="uploading-btn-to"> - <i class="iconfont iconAdd"></i> 涓婁紶 + <el-form class="demo-ruleForm"> + <el-form-item label="" style="display: inline-block"> + <div class="uploading-center"> + <div class="uploading"> + <dragUpload + :limit="1" + :orgId="parseInt(orgId)" + :staffId="parseInt(staffId)" + @fileSuccess="fatherMethod" + @file-uploading="showUploadProcess" + :type="'AUDIENCE'" + :action="'/dream/player/importPlayer'" + > + <div class="uploading-btn-to"> + <i class="iconfont iconAdd"></i> 涓婁紶 + </div> + <div class="el-upload__tip" slot="tip"> + 鍙兘涓婁紶.xls,.xlsx鏂囦欢 + </div> + </dragUpload> + </div> + <div class="download-file"> + <i class="iconfont iconFile"></i> + <a href="/static/瀛﹀憳瀵煎叆妯℃澘.xlsx" download + >涓嬭浇瀛﹀憳妯℃澘</a + > + </div> </div> - <div class="el-upload__tip" slot="tip">鍙兘涓婁紶.xls,.xlsx鏂囦欢</div> - </dragUpload> - </div> - <div class="download-file"> - <i class="iconfont iconFile"></i> - <a href="/static/瀛﹀憳瀵煎叆妯℃澘.xlsx" download>涓嬭浇瀛﹀憳妯℃澘</a> - </div> - </div> - <div style="font-size: 12px; color: #6993ff" v-if="hasAudience"> - 宸蹭笂浼�,濡傞渶淇敼鐩存帴鐐瑰嚮涓婁紶 - <i class="el-icon-close" title="鍒犻櫎" @click="clearaudience"></i> - </div> - </el-form-item> + <div style="font-size: 12px; color: #6993ff" v-if="hasAudience"> + 宸蹭笂浼�,濡傞渶淇敼鐩存帴鐐瑰嚮涓婁紶 + <i + class="el-icon-close" + title="鍒犻櫎" + @click="clearaudience" + ></i> + </div> + </el-form-item> - <el-progress - v-show="progress" - type="circle" - :percentage="percentage" - :status="progressStatus" - ></el-progress> - </el-form> + <el-progress + v-show="progress" + type="circle" + :percentage="percentage" + :status="progressStatus" + ></el-progress> + </el-form> </template> <script> import dragUpload from "@/components/drag-upload"; var self = null; +var eventSource = null; export default { - inject: ["reload"], - name: "Creation", - data() { - return { - orgId: 0, - staffId: 0, - hasAudience: false, - progress: false, - percentage: 0, - progressStatus: "", - }; - }, - components: { dragUpload }, - methods: { - downloadlist() { - window.open("../../../assets/瀛﹀憳瀵煎叆妯℃澘.xlsx", "_blank"); - // this.download('downPlayerTemplate', '瀛﹀憳瀵煎叆妯℃澘.xlsx') + inject: ["reload"], + name: "Creation", + data() { + return { + orgId: 0, + staffId: 0, + hasAudience: false, + progress: false, + percentage: 0, + progressStatus: "", + over: false + }; }, - clearaudience() { - this.hasAudience = false; - }, - fatherMethod(res, type) { - this.progress = false; - if (res.success) { - var ojb = JSON.parse(res.message); - if (ojb.falseLst === null) { - this.$message.success("涓婁紶鏁版嵁鎴愬姛"); - this.$emit("load-success"); - } else if (ojb.falseLst.length >= 1) { - let errortips = ""; - ojb.falseLst.map((item) => { - errortips += ( - `${item.playerRoll}` + - `${item.cause} </div><div style='line-height: 1.5;'>` - ).replace("[]", ""); - }); - this.$message({ - dangerouslyUseHTMLString: true, - message: `<div style='line-height: 1.5;'>瀵煎叆鏁版嵁鎴愬姛瀵煎叆${ - res.successNum || 0 - }鏉�,閿欒淇℃伅:</div><div style='line-height: 1.5;'>${errortips}</div>`, - type: "error", - duration: 6000, - showClose: true, - }); - } - } else { - this.$message.error(res.message); - } - // if (res.falseLst === null) { - // this.$message.success("涓婁紶鏁版嵁鎴愬姛"); - // this.$emit("load-success"); - // } else if (res.falseLst.length >= 1) { - // let errortips = ""; - // res.falseLst.map((item) => { - // errortips += (`${item.playerRoll}` + `${item.cause} \r\n`).replace('[]', ''); - // }); - // this.$message({ - // message: `瀵煎叆鏁版嵁鎴愬姛瀵煎叆${res.successNum}鏉�,閿欒淇℃伅:${errortips}`, - // type: "error", - // duration: 6000, - // }); - // } - }, - showUploadProcess() { - self.progress = true; - self.percentage = 0.1; - self.progressStatus = ""; - setTimeout(function () { - const eventSource = new EventSource( - "/dream/sse-stream/" + - JSON.parse(localStorage.getItem("selectStaff")).id - ); + components: { dragUpload }, + methods: { + downloadlist() { + window.open("../../../assets/瀛﹀憳瀵煎叆妯℃澘.xlsx", "_blank"); + // this.download('downPlayerTemplate', '瀛﹀憳瀵煎叆妯℃澘.xlsx') + }, + clearaudience() { + this.hasAudience = false; + }, + fatherMethod(res, type) { + this.progress = false; + // if (res.falseLst === null || res.falseLst.length === 0) { + // this.$message.success("涓婁紶鏁版嵁鎴愬姛"); + // this.$emit("load-success"); + // } + // else { + // let errortips = ""; + // res.falseLst.map((item) => { + // errortips += ( + // `${item.playerRoll}` + + // `${item.cause} </div><div style='line-height: 1.5;'>` + // ).replace("[]", ""); + // }); + // this.$message({ + // dangerouslyUseHTMLString: true, + // message: `<div style='line-height: 1.5;'>瀵煎叆鏁版嵁鎴愬姛瀵煎叆${res.successNum || 0 + // }鏉�,閿欒淇℃伅:</div><div style='line-height: 1.5;'>${errortips}</div>`, + // type: "error", + // duration: 6000, + // showClose: true, + // }); + // } - eventSource.onmessage = function (event) { - const res = JSON.parse(event.data); - self.percentage = Math.floor((res.current / res.total) * 10000) / 100; - - if (res.current == res.total) { - self.progressStatus = "success"; - if (res.falseLst === null || res.falseLst.length === 0) { - self.$message.success("涓婁紶鏁版嵁鎴愬姛"); - self.$emit("load-success"); - eventSource.close() + if (res.success) { + var ojb = JSON.parse(res.message); + if (ojb.falseLst === null) { + this.$message.success("涓婁紶鏁版嵁鎴愬姛"); + this.$emit("load-success"); + } else if (ojb.falseLst.length >= 1) { + let errortips = ""; + ojb.falseLst.map((item) => { + errortips += ( + `${item.playerRoll}` + + `${item.cause} </div><div style='line-height: 1.5;'>` + ).replace("[]", ""); + }); + this.$message({ + dangerouslyUseHTMLString: true, + message: `<div style='line-height: 1.5;'>瀵煎叆鏁版嵁鎴愬姛瀵煎叆${ojb.successNum || 0 + }鏉�,閿欒淇℃伅:</div><div style='line-height: 1.5;'>${errortips}</div>`, + type: "error", + duration: 6000, + showClose: true, + }); + } + } else { + this.$message.error(res.message); + } + if (res.falseLst === null) { + this.$message.success("涓婁紶鏁版嵁鎴愬姛"); + this.$emit("load-success"); } else if (res.falseLst.length >= 1) { - let errortips = ""; - res.falseLst.map((item) => { - errortips += ( - `${item.playerRoll}` + - `${item.cause} </div><div style='line-height: 1.5;'>` - ).replace("[]", ""); - }); - self.$message({ - dangerouslyUseHTMLString: true, - message: `<div style='line-height: 1.5;'>瀵煎叆鏁版嵁鎴愬姛瀵煎叆${ - res.successNum || 0 - }鏉�,閿欒淇℃伅:</div><div style='line-height: 1.5;'>${errortips}</div>`, - type: "error", - duration: 6000, - showClose: true, - }); + let errortips = ""; + res.falseLst.map((item) => { + errortips += (`${item.playerRoll}` + `${item.cause} \r\n`).replace('[]', ''); + }); + this.$message({ + message: `瀵煎叆鏁版嵁鎴愬姛瀵煎叆${res.successNum}鏉�,閿欒淇℃伅:${errortips}`, + type: "error", + duration: 6000, + }); } - self.progress = false; - } - }; - eventSource.onerror = function (err) { - console.error("EventSource failed:", err); - eventSource.close(); - self.showUploadProcess(); - }; - }, 3 * 1000); + setTimeout(function () { + if (eventSource) + eventSource.close() + }, 5 * 1000); + + }, + showUploadProcess() { + self.progress = true; + self.percentage = 0.1; + self.progressStatus = ""; + setTimeout(function () { + eventSource = new EventSource( + "/dream/sse-stream/" + + JSON.parse(localStorage.getItem("selectStaff")).id + ); + + eventSource.onmessage = function (event) { + const res = JSON.parse(event.data); + self.percentage = Math.floor((res.current / res.total) * 10000) / 100; + + if (res.current == res.total) { + self.progressStatus = "success"; + if ((res.falseLst === null || res.falseLst.length === 0) && self.progress) { + self.$message.success("涓婁紶鏁版嵁鎴愬姛"); + self.$emit("load-success"); + } else if (res.falseLst.length >= 1) { + let errortips = ""; + res.falseLst.map((item) => { + errortips += ( + `${item.playerRoll}` + + `${item.cause} </div><div style='line-height: 1.5;'>` + ).replace("[]", ""); + }); + self.$message({ + dangerouslyUseHTMLString: true, + message: `<div style='line-height: 1.5;'>瀵煎叆鏁版嵁鎴愬姛瀵煎叆${res.successNum || 0 + }鏉�,閿欒淇℃伅:</div><div style='line-height: 1.5;'>${errortips}</div>`, + type: "error", + duration: 6000, + showClose: true, + }); + } + + eventSource.close() + self.progress = false; + } + }; + + eventSource.onerror = function (err) { + console.error("EventSource failed:", err); + eventSource.close(); + // self.showUploadProcess(); + }; + }, 2 * 1000); + }, }, - }, - created() { - self = this; - const selectStaff = JSON.parse(localStorage.getItem("selectStaff")); - this.orgId = selectStaff.org.id; - this.staffId = selectStaff.id; - }, + created() { + self = this; + const selectStaff = JSON.parse(localStorage.getItem("selectStaff")); + this.orgId = selectStaff.org.id; + this.staffId = selectStaff.id; + }, }; </script> <style lang="scss" scoped> .demo-ruleForm { - text-align: center; + text-align: center; } .creation-center { - padding: 40px 40px 40px 40px; + padding: 40px 40px 40px 40px; } .uploading-center { - display: flex; - flex-direction: row; - > .uploading { - min-height: 40px; - line-height: 40px; - box-sizing: border-box; - border-radius: 4px; - } - .uploading-btn-to { - width: 100px; - line-height: 38px; - height: 38px; - border-radius: 3px; - text-align: center; - padding: 0 0px; - cursor: pointer; - user-select: none; - margin-left: 0; - color: #ffa800; - font-size: 14px; - border: 1px solid #ffbe41; - > i { - color: #ffbe41; - font-size: 12px; - margin-right: 5px; - } - } - > .download-file { - float: left; display: flex; flex-direction: row; - margin-left: 20px; - color: #6993ff; - font-size: 14px; - cursor: pointer; - user-select: none; - height: 40px; - > div { - width: 117px; - margin-left: 5px; + > .uploading { + min-height: 40px; + line-height: 40px; + box-sizing: border-box; + border-radius: 4px; } - } + .uploading-btn-to { + width: 100px; + line-height: 38px; + height: 38px; + border-radius: 3px; + text-align: center; + padding: 0 0px; + cursor: pointer; + user-select: none; + margin-left: 0; + color: #ffa800; + font-size: 14px; + border: 1px solid #ffbe41; + > i { + color: #ffbe41; + font-size: 12px; + margin-right: 5px; + } + } + > .download-file { + float: left; + display: flex; + flex-direction: row; + margin-left: 20px; + color: #6993ff; + font-size: 14px; + cursor: pointer; + user-select: none; + height: 40px; + > div { + width: 117px; + margin-left: 5px; + } + } } .uploading-center-style { - ::v-deep .upload-demo { - ::v-deep .el-upload { - line-height: 38px; + ::v-deep .upload-demo { + ::v-deep .el-upload { + line-height: 38px; + } } - } } ::v-deep .uploading-center > .uploading { - line-height: 37px; + line-height: 37px; } </style> \ No newline at end of file -- Gitblit v1.8.0