zc_saas_admin/src/views/education/examManagement/applicationData/bulkImportPlan/newRegister.vue

<template>
  <div id="newRegister">
    <div style="margin-bottom: 12px">
      <span style="font-size: 14px">第一步：</span>
      <el-select
        :style="marSty"
        :size="size"
        filterable
        v-model="formData.applyId"
        placeholder="请选择考试计划（必填）"
      >
        <el-option
          v-for="item in examList"
          :key="item.applyId"
          :label="item.applyName"
          :value="item.applyId"
        >
        </el-option>
      </el-select>
      <el-select
        :style="marSty"
        :size="size"
        filterable
        v-model="formData.applySiteAddress"
        placeholder="请选择考试地点（必填）"
      >
        <el-option
          v-for="item in applySiteAddress"
          :key="item.siteId"
          :label="item.siteAddress"
          :value="item.siteAddress"
        >
        </el-option>
      </el-select>
      <el-button :size="size" type="info" @click="advanced">选择学员</el-button>
      <el-input
        v-if="formData.idCards"
        type="textarea"
        :size="size"
        readonly
        :rows="1"
        style="width: 180px; vertical-align: top; margin: 0px 10px"
        placeholder="请点击选择学员按钮上传学员名单"
        v-model="formData.idCards"
      >
      </el-input>
      <el-button :size="size" type="warning" @click="downModel"
        >下载模板</el-button
      >
    </div>
    <div style="margin-bottom: 12px">
      <span style="font-size: 14px">第二步：</span>
      <label
        for="mobles4"
        class="el-button el-button--success el-button--mini"
        style="margin-right: 10px"
        >批量导入</label
      ><input
        style="display: none"
        type="file"
        id="mobles4"
        ref="input4"
        @change="importMobleadd"
      />
    </div>
    <div>
      <el-badge
        :hidden="!tableDataSuccess.length"
        :value="tableDataSuccess.length"
        class="item"
      >
        <el-button
          :size="size"
          :type="active === 1 ? 'primary' : ''"
          @click="active = 1"
          >成功导入</el-button
        >
      </el-badge>
      <el-badge
        :hidden="!tableDataError.length"
        :value="tableDataError.length"
        class="item"
      >
        <el-button
          :size="size"
          :type="active === 2 ? 'primary' : ''"
          @click="active = 2"
          >失败导入</el-button
        >
      </el-badge>
    </div>
    <div v-show="active === 1" class="exportBox">
      <h4 class="h4Sty">
        成功导入<strong style="color: red">{{ tableDataSuccess.length }}</strong
        >人
      </h4>
      <el-table
        max-height="600"
        :data="tableDataSuccess"
        style="width: 100%"
        border
        :header-cell-style="{
          'background-color': '#eee',
          color: '#333',
          fontSize: '14px',
        }"
      >
        <el-table-column
          v-for="(item, index) in computedForm(tableSet, 1)"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="item.scope === 'time'">
              <div>{{ scope.row[item.prop1] }}</div>
              <div>{{ scope.row[item.prop2] }} {{ scope.row[item.prop3] }}</div>
            </div>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-show="active === 2" class="exportBox">
      <h4 class="h4Sty">
        失败导入<strong style="color: red">{{ tableDataError.length }}</strong
        >人
        <el-button
          v-if="tableDataError.length"
          style="margin-left: 10px"
          :size="size"
          type="success"
          @click="dowmErrorData"
          >下载失败数据</el-button
        >
      </h4>
      <el-table
        max-height="600"
        :data="tableDataError"
        style="width: 100%"
        border
        :header-cell-style="{
          'background-color': '#eee',
          color: '#333',
          fontSize: '14px',
        }"
      >
        <el-table-column
          v-for="(item, index) in computedForm(tableSet, 2)"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="item.scope === 'time'">
              {{ changeDatas(scope.row[item.prop]) }}
            </span>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :visible.sync="dialogPLS"
      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="dialogPLS = false"
          />
        </div>
      </div>
      <el-row :gutter="20">
        <el-col :span="12"
          ><h4>请输入学员的身份证号码，换行隔开，每行一个</h4>
          <el-input
            type="textarea"
            :rows="10"
            placeholder="请输入身份证"
            v-model="idcordList"
          >
          </el-input>
        </el-col>
        <el-col :span="12">
          <h4>快捷导入</h4>
          <el-link type="primary" @click="getDowm">下载模板</el-link>
          <label
            for="mobles3"
            class="el-button el-button--primary"
            style="margin-left: 14px; padding: 10px 20px"
            >上传学员名单</label
          ><input
            style="display: none"
            type="file"
            id="mobles3"
            ref="input1"
            @change="importMobleadds"
          />
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogPLS = false">取消</el-button>
        <el-button type="primary" @click="submitChecksPals">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as baseUrls from "@/utils/request.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      dialogPLS: false,
      active: 1,
      marSty: { marginRight: "10px" },
      size: "mini",
      formData: {
        applyId: "",
        applySiteAddress: "",
        idCards: "",
      },
      idcordList: "",
      tableDataSuccess: [],
      tableDataError: [],
      tableSet: [
        {
          label: "学员姓名",
          prop: "userName",
        },
        {
          label: "学员身份证",
          prop: "idCard",
        },
        {
          label: "考试标题",
          prop: "applyName",
          width: "140px",
        },
        {
          label: "考试地点",
          prop: "applySiteAddress",
          width: "180px",
        },
        {
          label: "考试日期",
          prop: "applySiteExamTime",
          scope: "time",
          width: "140px",
        },
        {
          label: "考试时间段",
          prop: "applySiteTime",
          width: "140px",
        },
        {
          label: "商品编码",
          prop: "code",
          width: "120px",
        },
        {
          label: "商品标题",
          prop: "goodsName",
          width: "180px",
        },
        {
          label: "预约登记",
          prop: "subscribeStatus",
        },
        {
          label: "考试登记",
          prop: "examStatus",
        },
        {
          label: "考试成绩",
          prop: "performance",
        },
        {
          label: "考试结果",
          prop: "result",
        },
        {
          label: "证书编号",
          prop: "userName",
        },
        {
          label: "出错原因",
          prop: "cause",
          hidden: true,
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["examList", "applySiteAddress"]),
    computedForm: function () {
      return function (tabs, int) {
        if (int === 1) {
          const ayst = tabs.filter((item) => {
            return !item.hidden;
          });
          return ayst;
        } else {
          return tabs;
        }
      };
    },
  },
  methods: {
    /**
     * 转换时间格式
     */
    changeDatas(time) {
      if (time) {
        var datas = this.$methodsTools.onlyForma(
          new Date(time).getTime() / 1000,
          false
        );
        return datas;
      } else {
        return "";
      }
    },
    importMobleadd(e) {
      var file = e.target.files[0];
      let formData = new FormData();
      formData.append("file", file);
      this.$api
        .editsystemsubscribeimportData(formData)
        .then((res) => {
          this.tableDataSuccess = res.data.successList;
          this.tableDataError = res.data.errorList;
        })
        .finally(() => {
          e.target.value = "";
        });
    },
    advanced() {
      this.dialogPLS = true;
      this.idcordList = this.formData.idCards;
    },
    submitChecksPals() {
      this.formData.idCards = this.idcordList;
      this.dialogPLS = false;
    },
    /**
     * 窗口下载模板
     */
    getDowm() {
      let url = baseUrls.BASE_IMG_URL + "/oss/images/file/20220214.xls";
      let link = document.createElement("a");
      let fileName = "导入模板" + ".xlsx";
      document.body.appendChild(link);
      link.href = url;
      link.dowmload = fileName;
      link.click();
      link.remove();
    },
    /**
     * 导入
     */
    importMobleadds(e) {
      var self = this;
      var file = e.target.files[0];
      let formData = new FormData();
      formData.append("file", file);
      this.$api
        .editsystemimportIdsData(formData)
        .then((res) => {
          if (!res.data.length) {
            this.$message.warning("未检测到上传学员数据，请检查上传文件");
            return;
          }
          let idList = res.data.map((item) => {
            return item.idCard.toString();
          });
          if (this.idcordList) {
            var arr = this.idcordList.split("\n");
            var arrs = arr.concat(idList);
            var newArr = arrs.filter(function (value, index, self) {
              return self.indexOf(value) === index;
            });
            this.idcordList = newArr.join("\n");
          } else {
            var newArr = idList.filter(function (value, index, self) {
              return self.indexOf(value) === index;
            });
            this.idcordList = newArr.join("\n");
          }
          this.$message.success("上传成功");
        })
        .finally(() => {
          e.target.value = "";
        });
    },
    /**下载模板 */
    downModel() {
      if (!this.formData.applyId) {
        this.$message.warning("请选择考试计划");
        return;
      }
      if (!this.formData.applySiteAddress) {
        this.$message.warning("请选择考试地点");
        return;
      }
      var data = JSON.parse(JSON.stringify(this.formData));
      if (this.formData.idCards) {
        data.idCards = this.formData.idCards.split("\n");
      } else {
        this.$message.warning("请选择学员");
        return;
      }
      const indexs = this.examList.findIndex((item) => {
        return item.applyId == data.applyId;
      });
      data.applyName = this.examList[indexs].applyName;
      this.$api.inquiresystemsubscribeexportRegister(data).then((res) => {
        let url = baseUrls.baseURL + "common/download?fileName=" + res.msg;
        let link = document.createElement("a");
        let fileName = "导入模板" + ".xlsx";
        document.body.appendChild(link);
        link.href = url;
        link.dowmload = fileName;
        link.click();
        link.remove();
      });
    },
    /**
     * 下载错误数据
     */
    dowmErrorData() {
      this.$api
        .inquiresystemsubscribeexportErrorNew(this.tableDataError)
        .then((res) => {
          let url = baseUrls.baseURL + "common/download?fileName=" + res.msg;
          let link = document.createElement("a");
          let fileName = "导入模板" + ".xlsx";
          document.body.appendChild(link);
          link.href = url;
          link.dowmload = fileName;
          link.click();
          link.remove();
        });
    },
  },
};
</script>

<style lang="less" scoped>
.h4Sty {
  margin: 6px;
  font-size: 14px;
}
.exportBox {
  border: 1px solid #999;
  padding: 10px;
  margin-top: 10px;
  border-radius: 4px;
}
/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;
    }
  }
}
.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;
  }
}
.item {
  margin-top: 10px;
  margin-right: 20px;
}
</style>