zc_saas_admin/src/views/education/examManagement/applicationData/formerAccount/index.vue

<template>
  <div id="formerAccount">
    <search-box-new
      ref="searchBox"
      :formData="formData"
      :formList="formList"
      @search="search"
      @init="init"
      :advanced="true"
      @Advanced="advanced"
      advancedName="高级输入"
    />
    <table-list
      :tableSets="tableSet"
      :tableData="tableData"
      :navText="navText"
      :loading="loading"
      ref="tableList"
      rowKey="subscribeId"
    >
      <template slot="customize">
        <el-button :size="size" type="warning" @click="moreActive"
          >前培账号标记</el-button
        >
      </template>
    </table-list>
    <pagination
      :total="total"
      :pageSize="formData.pageSize"
      :currentPage="formData.pageNum"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <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="mobles"
            class="el-button el-button--primary"
            style="margin-left: 14px; padding: 10px 20px"
            >上传学员名单</label
          ><input
            style="display: none"
            type="file"
            id="mobles"
            ref="input1"
            @change="importMobleadd"
          />
        </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>
    <el-dialog
      :visible.sync="dialogQP"
      width="460px"
      :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="dialogQP = false"
          />
        </div>
      </div>
      <div>
        <ul style="margin: 0px">
          <li class="liBVS" v-for="(item, index) in peopleList" :key="index">
            {{ item.realname }}
            <i
              v-if="peopleList.length > 1"
              class="el-icon-error clsw"
              @click="peopleList.splice(index, 1)"
            ></i>
          </li>
          <div style="clear: both"></div>
        </ul>
        <p style="margin: 0px">所选学员的前培账号标记为【已开通】吗？</p>
        <div style="text-align: center; margin-top: 12px">
          <el-radio-group v-model="beforeStatus">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogQP = false">取消</el-button>
        <el-button type="primary" @click="submitChecksQP">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as baseUrls from "@/utils/request.js";
import searchBoxNew from "@/components/searchBoxNew";
import tableList from "@/components/tableList";
import pagination from "@/components/pagination";
export default {
  name: "FormerAccount",
  components: { searchBoxNew, tableList, pagination },
  data() {
    return {
      dialogPLS: false,
      size: "small",
      beforeStatus: "",
      loading: false, //当前表单加载是否加载动画
      navText: {
        openCheckMore: true,
        tableHide: true,
        border: true,
        title: "前培账号标记",
        index: 0,
        ch: "条",
        num: false,
        choice: true,
        changeWidth: "240px",
        addHide: true,
        backFatherBtn: {
          status: false,
          title: "未定义",
        },
      },
      //搜索
      formList: [
        // {
        //   prop: "beforeId",
        //   placeholder: "前培计划",
        //   scope: "beforeLists",
        // },
        {
          prop: "applyId",
          placeholder: "考试计划",
          scope: "examLists",
        },
        {
          prop: "beforeStatus",
          placeholder: "开通状态",
          scope: "select",
          options: [
            {
              label: "已开通",
              value: 1,
            },
            {
              label: "未开通",
              value: 0,
            },
          ],
        },
        {
          prop: "searchKey",
          placeholder: "请输入学员姓名/学员身份证",
        },
        {
          prop: "idCards",
          placeholder: "请输入学员身份证",
          scope: "textarea",
        },
      ],
      formData: {
        beforeId: "",
        applyId: "",
        pageSize: 10,
        pageNum: 1,
        idCards: "",
        beforeStatus: "",
        canBefore: 1,
      },
      // 表单
      tableSet: [
        {
          label: "考试机会",
          prop1: "examNumber",
          prop2: "expendNumber",
          hidden: true,
          scope: "chance",
        },
        {
          label: "前培机会",
          prop1: "doNumber",
          prop2: "expendBefore",
          hidden: true,
          scope: "chance",
        },
        {
          label: "预约状态",
          prop: "subscribeStatus",
          hidden: true,
          scope: "isOptions",
          options: [
            {
              label: "正常",
              value: 1,
            },
            {
              label: "取消",
              value: 2,
            },
          ],
        },
        {
          label: "前培标记",
          prop: "beforeStatus",
          hidden: true,
          scope: "isOptions",
          options: [
            {
              label: "已开通",
              value: 1,
            },
          ],
        },
        {
          label: "考试登记",
          prop: "examStatus",
          hidden: true,
          scope: "isOptionsDZYQ",
          options: [
            {
              label: "待登记",
              value: 0,
            },
            {
              label: "正常",
              value: 1,
            },
            {
              label: "缺考",
              value: 2,
            },
            {
              label: "作弊",
              value: 3,
            },
            {
              label: "替考",
              value: 4,
            },
          ],
        },
        {
          label: "考试成绩和结果",
          prop1: "performance",
          prop2: "result",
          hidden: true,
          scope: "resultType",
        },
        {
          label: "证书编号",
          prop: "certificateCode",
          hidden: true,
        },
        {
          label: "考试标题",
          prop: "applyName",
          hidden: true,
        },
        {
          label: "前培标题",
          prop: "beforeName",
          hidden: true,
        },
        {
          label: "学员姓名",
          prop: "realname",
          hidden: true,
        },
        {
          label: "学员身份证",
          prop: "idCard",
          hidden: true,
        },
        {
          label: "所购商品",
          prop1: "goodsCode",
          prop2: "goodsName",
          prop3: "standPrice",
          hidden: true,
          scope: "goodsInfos",
        },
        {
          label: "学员报考类型",
          prop: "studentType",
          hidden: true,
          scope: "isOptions",
          options: [
            {
              label: "新考学员",
              value: 1,
            },
            {
              label: "补考学员",
              value: 2,
            },
          ],
        },
        {
          label: "所报专业",
          prop: "categoryName",
          hidden: true,
        },
        {
          label: "预约场次(考试地点和时间)",
          prop1: "applySiteAddress",
          prop2: "applySiteExamTime",
          prop3: "applySiteStartTime",
          prop4: "applySiteEndTime",
          prop5: "examineeCode",
          prop6: "seatNumber",
          prop7: "syncStatus",
          hidden: true,
          scope: "changAdress",
        },
        {
          label: "考试次数消耗",
          prop: "examExpend",
          hidden: true,
        },
        {
          label: "预约场次(考培地点和时间)",
          prop1: "applySiteAddressTrain",
          prop2: "applySiteExamTrainTime",
          prop3: "applySiteStartTrainTime",
          prop4: "applySiteEndTrainTime",
          hidden: true,
          scope: "changAdressKP",
        },
        {
          label: "前培次数消耗",
          prop: "beforeExpend",
          hidden: true,
        },
        {
          label: "创建时间",
          prop: "createTime",
          hidden: true,
          scope: "aTimeList",
        },
      ],
      tableData: [], //表单数据
      total: 0, //一共多少条
      idcordList: "",
      copyAppid: "",
      dialogQP: false,
      listData: {},
      peopleList: [],
    };
  },
  mounted() {
    // await this.getFirstOptions();
    this.search();
  },
  activated() {
    this.search();
  },
  methods: {
    /**
     * 下载模板
     */
    getDowm() {
      let url = baseUrls.BASE_IMG_URL + "/oss/images/file/20220214.xls" +
        `?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];
      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 = "";
        });
    },
    getFirstOptions() {
      return new Promise((resolve, reject) => {
        this.$api
          .inquiresystembefore({ status: "0,1,2", pageSize: 1, pageNum: 1 })
          .then((res) => {
            if (res.rows.length) {
              this.copyAppid = res.rows[0].beforeId;
              this.formData.beforeId = res.rows[0].beforeId;
            }
            resolve();
          });
      });
    },
    submitChecksPals() {
      this.formData.idCards = this.idcordList;
      this.dialogPLS = false;
    },
    advanced(datas) {
      this.dialogPLS = true;
      this.idcordList = this.formData.idCards;
    },
    moreActive() {
      if (!this.$refs.tableList.allCheckData.length) {
        this.$message.warning("请勾选需要前培账号标记的列表");
        return;
      }
      this.peopleList = JSON.parse(
        JSON.stringify(this.$refs.tableList.allCheckData)
      );
      this.listData = {};
      this.beforeStatus = 1;
      this.dialogQP = true;
    },
    submitChecksQP() {
      var data = JSON.parse(JSON.stringify(this.listData));
      if (!this.beforeStatus) {
        this.$message.warning("请选择是或否");
        return;
      }
      var arrays = [];
      this.peopleList.forEach((item) => {
        arrays.push(item.subscribeId);
      });
      data.subscribeId = arrays;
      if (this.beforeStatus === 1) {
        data.beforeStatus = 1;
        data.beforeId = this.formData.beforeId;
      }
      if (this.beforeStatus === 2) {
        data.beforeStatus = 0;
        data.beforeId = this.formData.beforeId;
      }
      this.$api.editsystemsubscribe(data).then((res) => {
        this.$message.success("前培账号已开通标记修改成功");
        this.dialogQP = false;
        this.search();
        this.$refs.tableList.allCheckData = [];
        this.$refs.tableList.$refs.pagerset.clearSelection();
      });
    },
    search(int) {
      this.loading = true;
      if (int === 1) {
        this.formData.pageNum = 1;
      }
      if (int === 2) {
        this.formData = {
          pageSize: 10,
          pageNum: 1,
          idCards: "",
          canBefore: 1,
          beforeId: this.formData.beforeId,
          applyId: "",
          beforeStatus: "",
        };
      }
      var data = JSON.parse(JSON.stringify(this.formData));
      if (this.formData.idCards) {
        data.idCards = this.formData.idCards.split("\n");
      }
      if (this.formData.searchKey && this.formData.idCards) {
        data.searchType = 1;
      } else {
        data.searchType = 0;
      }
      this.$api
        .inquiresystemsubscribelist(data)
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
          this.navText.index = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    init() {
      this.$refs.tableList.allCheckData = [];
      this.$refs.tableList.$refs.pagerset.clearSelection();
      this.search(2);
    },
    handleSizeChange(v) {
      this.formData.pageSize = v;
      this.formData.pageNum = 1;
      this.search();
    },
    handleCurrentChange(v) {
      this.formData.pageNum = v;
      this.search();
    },
  },
};
</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;
    }
  }
}
.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;
  }
}
.liBVS {
  margin-right: 20px;
  margin-bottom: 12px;
  padding: 0px 6px;
  border: 1px solid #999;
  border-radius: 4px;
  height: 30px;
  line-height: 30px;
  display: inline-block;
  float: left;
}
.clsw {
  margin-left: 4px;
  cursor: pointer;
  color: #f56c6c;
}
.swq {
  text-align: center;
  border-bottom: 1px solid #eee;
}
.dowmStys {
  color: blue;
  cursor: pointer;
}
</style>