zc_saas_admin/src/views/resource/bankManagement/topicManagement/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>第二步：选择必填项</p>
      <div>
        <!-- 教育类型 -->
        <el-select
          v-model="formData.eduId"
          placeholder="请选择教育类型（必填）"
          size="mini"
          @change="changeEducationType"
        >
          <el-option
            v-for="(items, indexs) in educationType"
            :key="indexs"
            :label="items.educationName"
            :value="items.id"
          ></el-option>
        </el-select>
        <!-- 业务层次 -->
        <el-select
          v-if="formData.eduId"
          v-model="formData.businessId"
          placeholder="请选择业务层次（必填）"
          size="mini"
          @change="changeBusinessLevel"
        >
          <el-option
            v-for="(items, indexs) in newBusinessLevel"
            :key="indexs"
            :label="items.projectName + '-' + items.businessName"
            :value="items.id"
          ></el-option>
        </el-select>
        <!-- 科目 -->
        <el-select
          v-if="formData.businessId"
          v-model="formData.subjectId"
          placeholder="请选择科目（必填）"
          size="mini"
        >
          <el-option
            v-for="(items, indexs) in newSujectType"
            :key="indexs"
            :label="items.subjectName"
            :value="items.id"
          ></el-option>
        </el-select>
      </div>
      <p>
        第三步：(批量新增)：点击“上传Word”完成导入<span
          v-if="!(formData.eduId && formData.businessId && formData.subjectId)"
          style="color: red; margin-left: 14px"
          >请完成第二步选择必填项</span
        >
      </p>
      <label
        v-if="formData.eduId && formData.businessId && formData.subjectId"
        for="mobles"
        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 { mapGetters } from "vuex";
import * as baseUrls from "@/utils/request.js";
export default {
  data() {
    return {
      newBusinessLevel: [],
      newSujectType: [],
      errorData: "",
      formData: {
        eduId: "",
        businessId: "",
        subjectId: "",
        projectId: "",
      },
      dialogERROR: false,
    };
  },
  computed: {
    ...mapGetters(["educationType"]),
  },
  watch: {
    "formData.eduId"() {
      this.formData.businessId = "";
      this.formData.projectId = "";
    },
    "formData.businessId"(v) {
      if (v) {
        for (let i = 0; i < this.newBusinessLevel.length; i++) {
          if (this.newBusinessLevel[i].id === v) {
            this.formData.projectId = this.newBusinessLevel[i].projectId;
            break;
          }
        }
      }
      this.formData.subjectId = "";
    },
  },
  methods: {
    changeEducationType(v) {
      this.$api
        .inquirebusinessList({ status: 1, educationId: v })
        .then((res) => {
          this.newBusinessLevel = res.rows;
        });
    },
    changeBusinessLevel(v) {
      this.$api
        .inquireCourseSubject({ status: 1, businessId: v })
        .then((res) => {
          this.newSujectType = res.rows;
        });
    },
    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;
      var file = e.target.files[0];
      let formData = new FormData();
      formData.append("file", file);
      formData.append("eduId", this.formData.eduId);
      formData.append("projectId", this.formData.projectId);
      formData.append("businessId", this.formData.businessId);
      formData.append("subjectId", this.formData.subjectId);
      this.$api
        .bankquestionimportWordData(formData)
        .then((res) => {
          if (res.code === 200) {
            if (!res.msg) {
              self.$message.success("导入成功");
              this.$parent.$parent.dialogDRword = false;
            } else {
              self.errorData = res.msg;
              self.dialogERROR = true;
            }
          }
        })
        .finally(() => {
          e.target.value = "";
          self.$emit("search", 2);
        });
    },
  },
};
</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>