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

<template>
  <div>
    <div class="swq">
      <img
        style="width: 182px; height: 168px"
        src="@/assets/images/dr.png"
        alt=""
      />
    </div>
    <div style="padding-left: 100px">
      <p>第一步：下载word导入模板</p>
      <p style="padding-left: 50px">
        <i class="el-icon-upload"></i
        ><span class="dowmStys" @click="getDowm">下载模板</span>
      </p>
      <p>第二步：点击“上传Word”完成导入</p>
      <label
        for="mobles"
        style="margin-left: 50px"
        class="el-button el-button--primary el-button--mini"
        >上传Word</label
      ><input
        style="display: none"
        type="file"
        id="mobles"
        ref="input1"
        @change="importMobleadd"
      />
    </div>
    <el-dialog
      append-to-body
      :visible.sync="dialogERROR"
      width="660px"
      :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="dialogERROR = false"
          />
        </div>
      </div>
      <div>
        <h4 style="margin-top: 0px; font-weight: bold; text-align: center">
          导入失败原因
        </h4>
        <el-input
          readonly
          type="textarea"
          :autosize="{ minRows: 6, maxRows: 24 }"
          v-model="errorData"
        >
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogERROR = false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as baseUrls from "@/utils/request.js";
export default {
  data() {
    return {
      errorData: "",
      formData: {
        eduId: "",
        businessId: "",
        subjectId: "",
        projectId: "",
      },
      dialogERROR: false,
    };
  },
  methods: {
    getDowm() {
      let url =
        baseUrls.BASE_IMG_URL + "/oss/images/file/20220324/1648102107588.docx" +
        `?time=${this.$methodsTools.getNewTime()}`;;
      let link = document.createElement("a");
      let fileName = "导入模板" + ".docx";
      document.body.appendChild(link);
      link.href = url;
      link.dowmload = fileName;
      link.click();
      link.remove();
    },
    importMobleadd(e) {
      var self = this;
      let arr = this.$parent.$parent.businObj;
      var file = e.target.files[0];
      let formData = new FormData();
      formData.append("file", file);
      formData.append("eduId", arr.educationTypeId);
      formData.append("projectId", arr.projectId);
      formData.append("businessId", arr.businessId);
      formData.append("subjectId", arr.subjectId);
      this.$api
        .bankquestionimportWordQuestionList(formData)
        .then((res) => {
          if (res.code === 200) {
            self.$message.success("导入成功");
            let numList = self.$parent.$parent.tableData;
            if (numList.length) {
              let numIndex = 0;
              let childrenIndex = 0;
              numList.forEach((items) => {
                if (items.sort > numIndex) {
                  numIndex = items.sort;
                }
                if (items.index > childrenIndex) {
                  childrenIndex = items.index;
                }
              });
              res.data.forEach((items, indexs) => {
                numIndex++
                childrenIndex++
                items.sort = numIndex;
                items.index = childrenIndex;
              });
            } else {
              res.data.forEach((items, indexs) => {
                items.sort = 1 + indexs;
                items.index = indexs;
              });
            }
            self.$parent.$parent.tableData =
              self.$parent.$parent.tableData.concat(res.data);
            self.$parent.$parent.dialogDRword = false;
          }
        })
        .finally(() => {
          e.target.value = "";
        });
    },
  },
};
</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>