zc_saas_admin/src/views/resource/bankManagement/testPaperManagement/excelPop.vue

<template>
  <div>
    <el-dialog
      :visible.sync="dialogDRexcel"
      :append-to-body="true"
      width="780px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">批量导入</div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="dialogDRexcel = false"
          />
        </div>
      </div>
      <div class="swq">
        <img
          style="width: 182px; height: 168px"
          src="@/assets/images/dr.png"
          alt=""
        />
      </div>
      <div style="padding-left: 100px">
        <p>第一步：下载excel导入模板</p>
        <p style="padding-left: 50px">
          <i class="el-icon-upload"></i
          ><span class="dowmStys" @click="getDowm">下载模板</span>
        </p>
        <p>第二步：点击“上传Excel”</p>
        <label
          for="mobles2"
          class="el-button el-button--primary el-button--mini"
          >上传Excel</label
        ><input
          style="display: none"
          type="file"
          id="mobles2"
          ref="input2"
          @change="importMobleadd"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogDRexcel = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as baseUrls from "@/utils/request.js";
export default {
  data() {
    return {
      dialogDRexcel: false,
      tableData: [],
      businObj: {},
    };
  },
  methods: {
    openBoxs(arr, obj) {
      if (arr.length) {
        this.tableData = JSON.parse(JSON.stringify(arr));
      }
      this.businObj = JSON.parse(JSON.stringify(obj));
      this.dialogDRexcel = true;
    },
    getDowm() {
      let url =
        baseUrls.BASE_IMG_URL +
        "/oss/images/file/20220518/1652865393160.xlsx" +
        `?time=${this.$methodsTools.getNewTime()}`;
      let link = document.createElement("a");
      let fileName = "导入模板" + ".xlsx";
      document.body.appendChild(link);
      link.href = url;
      link.dowmload = fileName;
      link.click();
      link.remove();
    },
    importMobleadd(e) {
      var self = this;
      var file = e.target.files[0];
      if (file === undefined) {
        e.target.value = "";
        return;
      }
      var type = e.target.value.toLowerCase().split(".").splice(-1);
      if (type[0] != "xlsx" && type[0] != "xls") {
        self.$message.error("请上传excel文件,且上传格式需为：.xlsx、.xls");
        return;
      }
      let formData = new FormData();
      formData.append("file", file);
      this.$api
        .importDatabankimportDataBackList(formData)
        .then((res) => {
          console.log(res);
          if (res.data.fullStatus == "全部成功") {
            self.backDataX(res.data.questionList);
            self.$message.success("全部导入成功");
          } else {
            let url =
              baseUrls.baseURL +
              "common/download?fileName=" +
              res.data.errorExcel.msg;
            let link = document.createElement("a");
            let fileName = "导入模板" + ".xlsx";
            document.body.appendChild(link);
            link.href = url;
            link.dowmload = fileName;
            link.click();
            link.remove();
            if (res.data.fullStatus == "部分成功") {
              self.backDataX(res.data.questionList);
              self.$message.warning("部分导入成功，请打开文档查看错误原因");
            } else {
              self.$message.error("导入失败，请打开文档查看错误原因");
            }
          }
        })
        .finally(() => {
          e.target.value = "";
        });
    },
    backDataX(arry) {
      let arr = JSON.parse(JSON.stringify(arry));
      for (let i = 0; i < arr.length; i++) {
        arr[i].partScore = 0;
        arr[i].score = "";
        arr[i].status = 1;
        arr[i].businessList = [this.businObj];
        if (arr[i].type === 4) {
          arr[i].optionsList = JSON.parse(arr[i].jsonStr);
          arr[i].optionsList.forEach((item) => {
            if (item.type === 3 || item.type === 5) {
              item.optionsList = [];
              item.jsonStr = "";
            }
          });
        } else if (arr[i].type === 5) {
          arr[i].jsonStr = "";
          arr[i].optionsList = [];
        } else {
          arr[i].jsonStr = JSON.stringify(arr[i].optionsList);
        }
      }
      if (this.tableData.length) {
        let maxIndex = 0;
        let childrenIndex = 0;
        this.tableData.forEach((item) => {
          if (item.sort > maxIndex) {
            maxIndex = item.sort;
          }
          if (item.index > childrenIndex) {
            childrenIndex = item.index;
          }
        });
        arr.forEach((item, index) => {
          item.sort = maxIndex + 1;
          item.index = childrenIndex + 1;
          maxIndex++;
          childrenIndex++;
        });
      } else {
        arr.forEach((item, index) => {
          item.sort = index + 1;
          item.index = index;
        });
      }
      this.$emit("backExcelData", arr);
      this.dialogDRexcel = false;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-button {
  border-radius: 8px;
}
/deep/.el-dialog {
  border-radius: 8px;
  .el-dialog__header {
    padding: 0;
    .hearders {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 18px 0px 20px;
      border-bottom: 1px solid #e2e2e2;
      .leftTitle {
        font-size: 14px;
        font-weight: bold;
        color: #2f4378;
      }
      .rightBoxs {
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
          margin-left: 13px;
          cursor: pointer;
        }
      }
    }
  }
  .el-dialog__footer {
    padding: 0;
    .dialog-footer {
      padding: 0px 40px;
      height: 70px;
      border-top: 1px solid #e2e2e2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}

.swq {
  text-align: center;
  border-bottom: 1px solid #eee;
}
.dowmStys {
  color: blue;
  cursor: pointer;
}
.imgBox {
  width: 100%;
  // height: 210px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 8px 8px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .imgLabel {
    flex: 1;
    width: 100%;
    border: 1px dotted #e2e2e2;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    .msPhoto {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 100%;
      max-height: 270px;
      img {
        max-width: 100%;
        max-height: 270px;
      }
    }
    .imgbbx {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      i {
        font-weight: bold;
        margin: 14px 0;
        font-size: 24px;
      }
    }
  }
  p {
    margin: 5px 0px;
  }
}
</style>