导入优化

zhanghua

2024-11-19 dc7de04cfaa135344071803f5af14c40a5ea53f3

 src/views/student/components/upload-student.vue

@@ -1,194 +1,202 @@
<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_dev/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>
  <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_dev/player/importPlayer'"
          >
            <div class="uploading-btn-to">
              <i class="iconfont iconAdd"></i> 上传
            </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 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>

        <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;
export default {
    inject: ["reload"],
    name: "Creation",
    data() {
        return {
            orgId: 0,
            staffId: 0,
            hasAudience: false,
            progress: false,
            percentage: 0,
            progressStatus: ""
  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')
    },
    clearaudience() {
      this.hasAudience = false;
    },
    fatherMethod(res, type) {
      // 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_dev/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.$message.success("上传数据成功");
              self.$emit("load-success");x
            } 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,
              });
            }

            self.progress = false;
          }
        };
    },
    components: { dragUpload },
    methods: {
        downloadlist() {
            window.open("../../../assets/学员导入模板.xlsx", "_blank");
            // this.download('downPlayerTemplate', '学员导入模板.xlsx')
        },
        clearaudience() {
            this.hasAudience = false;
        },
        fatherMethod(res, type) {
            // 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
            setTimeout(function () {
                const eventSource = new EventSource('/dream_dev/sse-stream/' + JSON.parse(localStorage.getItem("selectStaff")).id);

                eventSource.onmessage = function (event) {
                    const res = JSON.parse(event.data)
                    self.percentage = parseInt(res.current * 100 / res.total)
                    if (res.current == res.total) {
                        self.progressStatus = 'success'
                        if (res.falseLst === null) {
                            self.$message.success("上传数据成功");
                            self.$emit("load-success");
                        } else if (res.falseLst.length >= 1) {
                            let errortips = "";
                            res.falseLst.map((item) => {
                                errortips += (`${item.playerRoll}` + `${item.cause} \r\n`).replace('[]', '');
                            });
                            self.$message({
                                message: `导入数据成功导入${res.successNum}条,错误信息:${errortips}`,
                                type: "error",
                                duration: 6000,
                            });
                        }
                    }
                };

                eventSource.onerror = function (err) {
                    console.error("EventSource failed:", err);
                    eventSource.close();
                };
            }, 3 * 1000);
        }
        eventSource.onerror = function (err) {
          console.error("EventSource failed:", err);
          eventSource.close();
          self.showUploadProcess()
        };
      }, 3 * 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;
    > .uploading {
        min-height: 40px;
        line-height: 40px;
        box-sizing: border-box;
        border-radius: 4px;
    margin-left: 20px;
    color: #6993ff;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    height: 40px;
    > div {
      width: 117px;
      margin-left: 5px;
    }
    .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>