front/src/views/career/subject/subjectChoice.vue

<template>
  <div class="subject-page">
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/career/plan/index' }"
        >生涯·志愿
        </el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/career/subject/index' }"
        >选科查询
        </el-breadcrumb-item
        >
        <el-breadcrumb-item>由科目选专业</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content-box">
      <div class="content-top-box">
        <div class="content-box-title">根据科目（组合）查询可报专业</div>
        <div class="my-subject-button" @click="toMyPage()">我的选科方案</div>
      </div>
      <div class="content-msg">
        高校招生专业必须给出最多3门选考科目要求，根据考生选择的不同选考科目，未来志愿填报时可选择的专业也会有相应不同。任意一个选科组合考生有一定范围的专业选择。您可以根据自己的选考科目优势，或者选考科目的竞争度来自主搭配选考科目组合，查询可报专业。
      </div>

      <div class="select-box">
        <div class="select-item">
          <div class="select-msg">
            * 请在“物理”和“历史”两门科目中，任意选择1门（必选）
          </div>
          <div class="select-click-list">
            <div
              class="select-box-click-item two"
              :class="isShowScience(item.name) ? 'active' : ''"
              v-for="(item, index) in scienceList"
              :key="index"
              @click="onClickScience(item)"
            >
              <div>{{ item.name }}</div>
              <div
                class="select-box-click-item-icon"
                v-if="isShowScience(item.name)"
              >
                <i class="el-icon-check"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="select-item">
          <div class="select-msg">
            * 请从以下4门可选科目中点击选中2个，查询对应的可报专业信息
          </div>
          <div class="select-click-list">
            <div
              class="select-box-click-item four"
              :class="isShowLiberalArts(item.name) ? 'active' : ''"
              v-for="(item, index) in liberalArts"
              @click="onClickLiberalArts(item)"
              :key="index"
            >
              <div>{{ item.name }}</div>
              <div
                class="select-box-click-item-icon"
                v-if="isShowLiberalArts(item.name)"
              >
                <i class="el-icon-check"></i>
              </div>
            </div>
          </div>
        </div>
        <img src="@/assets/images/subject/img_dEmAZ_5698_big.png"/>
      </div>
      <el-button type="primary" @click="onSearch">查询可报专业</el-button>

      <div class="xkcx-list-box" v-if="isShowTable">
        <div class="xkcx-list-title">
          <span>选择“</span>
          <span>{{ getSubjectText() }}</span>
          <span>”作为选考科目可填报以下{{ total }}个专业</span>
        </div>
        <div class="xkcx-input-box">
          <div>
            <el-select
              v-model="selectNian"
              @change="onChangeYear"
              placeholder="全部年份"
            >
              <el-option
                v-for="(item, index) in yearList"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
          <div class="button-school">
            <el-button plain @click="onChangeSchoolPopup">
              学校
              <i class="el-icon-my-button"></i>
            </el-button>
          </div>
          <div class="button-major">
            <el-button plain @click="onChangeMajorPopup">
              专业<i class="el-icon-my-button"></i
            ></el-button>
          </div>
          <div class="search_header">
            <input
              placeholder="请输入内容"
              v-model="keyword"
              @keyup.enter="checkData()"
            />
            <img
              src="@/assets/images/icon_search2.png"
              alt=""
              @click="checkData()"
            />
          </div>
        </div>
        <div class="concerned-college-container">
          <mx-table :rows="dataList" :propDefines="propDefines">
            <template #select="{ row }">
              <img
                class="college-icon"
                v-if="row.collect"
                @click="httpCollectRemove(row)"
                src="@/assets/images/subject/icon_shoucang_pre.png"
              />
              <img
                class="college-icon"
                v-else
                @click="httpCollectAdd(row)"
                src="@/assets/images/subject/icon_shoucang_n.png"
              />
            </template>
          </mx-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="pageNum"
            :limit.sync="pageSize"
            :page-size="20"
            @pagination="onChangePage"
          />
        </div>
      </div>
    </div>
    <div>
      <el-dialog
        :visible="isShowSchoolPopup"
        width="75%"
        :before-close="onChangeSchoolPopup"
      >
        <div class="popup-box">
          <div class="popup-item">
            <div class="popup-item-title">地域选择<span>（可多选）</span></div>
            <div class="popup-item-content">
              <el-checkbox-group v-model="selectLocation">
                <el-checkbox
                  class="check-box-item"
                  :label="item"
                  v-for="(item, index) in locationsList"
                  :key="index"
                ></el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <div class="popup-item">
            <div class="popup-item-title">院校特色<span>（可多选）</span></div>
            <div class="popup-item-content">
              <el-checkbox-group v-model="selectCharacteristic">
                <el-checkbox
                  class="check-box-item"
                  :label="item.code"
                  v-for="(item, index) in characteristicList"
                  :key="index"
                >{{ item.label }}
                </el-checkbox
                >
              </el-checkbox-group>
            </div>
          </div>
          <div class="popup-item">
            <div class="popup-item-title">院校类别<span>（可多选）</span></div>
            <div class="popup-item-content">
              <el-checkbox-group v-model="selectTypes">
                <el-checkbox
                  class="check-box-item"
                  :label="item"
                  v-for="(item, index) in typesList"
                  :key="index"
                ></el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <div class="bottom-box">
            <div class="popup-msg">*请点击（或取消）以下学校信息进行筛选</div>
            <div class="button-list">
              <el-button @click="cleanSchoolSelect">清空</el-button>
              <el-button @click="schoolSubmit" type="primary">确定</el-button>
            </div>
          </div>
        </div>
      </el-dialog>
      <el-dialog
        :visible="isShowMajorPopup"
        width="75%"
        :before-close="onChangeMajorPopup"
      >
        <div class="popup-box major-box">
          <div class="popup-select">
            <div
              class="popup-select-item"
              :class="marjorsType == '本科' ? 'active' : ''"
              @click="clickMarjorsType('本科')"
            >
              本科
            </div>
            <div
              class="popup-select-item"
              :class="marjorsType == '高职专科' ? 'active' : ''"
              @click="clickMarjorsType('高职专科')"
            >
              专科
            </div>
          </div>
          <div class="choice-box">
            <div class="choice-item">
              <div
                class="choice-item-menv"
                v-for="(item, index) in marjorsList"
                :key="index"
                :class="curMarjorsCode == item.code ? 'active' : ''"
                @click="changeMajor(item)"
              >
                {{ item.name }}
              </div>
            </div>
            <div class="choice-item">
              <div
                class="choice-item-menv"
                v-for="(item, index) in marjorsList2"
                :key="index"
                :class="curMarjorsCode2 == item.code ? 'active' : ''"
                @click="changeMajor(item)"
              >
                {{ item.name }}
              </div>
            </div>
            <div class="choice-item">
              <el-checkbox-group v-model="curMarjorsCode3">
                <el-checkbox
                  class="choice-item-checkbox"
                  label="全选"
                  @change="onSelectMarjorsAll"
                ></el-checkbox>
                <el-checkbox
                  class="choice-item-checkbox"
                  :label="item.name"
                  v-for="(item, index) in marjorsList3"
                  :key="index"
                ></el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
        <div class="bottom-box">
          <div class="popup-msg">*请点击（或取消）以下学校信息进行筛选</div>
          <div class="button-list">
            <el-button @click="cleanMajorList">清空</el-button>
            <el-button @click="majorSubmit" type="primary">确定</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {
    xkcxlist,
    xkcxYears,
    collectAdd,
    collectRemove,
    universityFilters,
    marjorsList,
  } from "@/api/webApi/webQue";

  export default {
    data() {
      return {
        scienceList: [
          {
            name: "物理",
            id: 1,
          },
          {
            name: "历史",
            id: 2,
          },
        ],
        liberalArts: [
          {
            name: "化学",
            id: 1,
          },
          {
            name: "生物",
            id: 2,
          },
          {
            name: "地理",
            id: 3,
          },
          {
            name: "政治",
            id: 4,
          },
        ],
        propDefines: {
          universityName: {
            label: "院校名称",
          },
          marjorName: {
            label: "专业（类）名称",
          },
          resourcesName: {
            label: "类中所含专业",
            align: "left",
          },
          level: {
            label: "专业层次",
          },
          courseRemark0: {
            label: "首选科目",
            align: "left",
          },
          courseRemark1: {
            label: "再选科目",
            align: "left",
          },
          year: {
            label: "年份",
            align: "left",
          },
          collect: {
            label: "选择",
            align: "left",
            slot: "select",
            width: "100px",
          },
        },
        curSelectScienceList: "",
        curSelectLiberalArts: [],
        options: [],
        selectNian: "",
        dataList: [],
        yearList: [],
        pageNum: 1,
        pageSize: 20,
        total: 0,
        keyword: "",
        isShowTable: false,
        locationsList: [],
        typesList: [],
        characteristicList: [],
        selectLocation: [], //地区
        selectTypes: [], //类别
        selectCharacteristic: [], //选中的特色
        isShowSchoolPopup: false,
        isShowMajorPopup: false,
        marjorsList: [],
        marjorsList2: [],
        marjorsList3: [],
        marjorsType: "本科",
        marjorsLevel: 1,
        marjorsCode: "",
        curMarjorsCode: "",
        curMarjorsCode2: "",
        curMarjorsCode3: [],
      };
    },
    created() {
      if (this.scienceList.length > 0) {
        this.curSelectScienceList = this.scienceList[0]["name"];
      }
      if (this.liberalArts.length > 2) {
        this.curSelectLiberalArts.push(this.liberalArts[0]["name"]);
        this.curSelectLiberalArts.push(this.liberalArts[1]["name"]);
      }
      // 回显
      if(this.$route.query.curSelectScienceList) {
        this.curSelectScienceList = this.$route.query.curSelectScienceList
      }

      if(this.$route.query.curSelectLiberalArts.length > 0) {
        this.curSelectLiberalArts = this.$route.query.curSelectLiberalArts
      }
      this.httpGetXkcxYears();
      this.httpUniversityFilters();
      this.httpGetMarjorsList();
    },
    methods: {
      onSelectMarjorsAll(res) {
        if (res) {
          let len = this.marjorsList3.length;
          for (let i = 0; i < len; i++) {
            let name = this.marjorsList3[i]["name"];
            let index = this.curMarjorsCode3.indexOf(name);
            if (index < 0) {
              this.curMarjorsCode3.push(name);
            }
          }
        } else {
          this.curMarjorsCode3 = [];
        }
      },
      onChangeSchoolPopup() {
        this.isShowSchoolPopup = !this.isShowSchoolPopup;
      },
      onChangeMajorPopup() {
        this.isShowMajorPopup = !this.isShowMajorPopup;
      },
      changeMajor(res) {
        this.curMarjorsCode3 = [];
        switch (res.level) {
          case 1:
            this.curMarjorsCode = res.code;
            break;
          case 2:
            this.curMarjorsCode2 = res.code;
            break;
        }
        this.marjorsCode = res.code;
        this.marjorsLevel = res.level + 1;
        this.httpGetMarjorsList();
      },
      schoolSubmit() {
        this.isShowSchoolPopup = false;
        this.checkData();
      },
      majorSubmit() {
        this.isShowMajorPopup = false;
        this.checkData();
      },
      cleanSchoolSelect() {
        this.selectLocation = [];
        this.selectTypes = [];
        this.selectCharacteristic = [];
      },
      cleanMajorList() {
        this.curMarjorsCode3 = [];
      },
      getSubjectText() {
        let rText = "";
        rText += this.curSelectScienceList + "+";
        let lLen = this.curSelectLiberalArts.length;
        for (let i = 0; i < lLen; i++) {
          rText += this.curSelectLiberalArts[i];
          if (i != lLen - 1) {
            rText += "+";
          }
        }
        return rText;
      },
      clickMarjorsType(type) {
        this.marjorsType = type;
        this.marjorsLevel = 1;
        this.marjorsCode = "";
        this.httpGetMarjorsList();
      },
      httpGetMarjorsList() {
        marjorsList({
          type: this.marjorsType,
          level: this.marjorsLevel,
          code: this.marjorsCode,
        }).then((res) => {
          switch (this.marjorsLevel) {
            case 2:
              this.marjorsList2 = res.rows;
              this.changeMajor(res.rows[0]);
              break;
            case 3:
              this.marjorsList3 = res.rows;
              break;
            default:
              this.marjorsList = res.rows;
              this.changeMajor(res.rows[0]);
              break;
          }
        });
      },
      httpUniversityFilters() {
        universityFilters({}).then(({data}) => {
          this.locationsList = data.locations;
          this.typesList = data.types;
          this.characteristicList = data.features;
        });
      },
      httpCollectAdd(row) {
        collectAdd({
          refId: row.id,
        }).then((res) => {
          this.checkData();
        });
      },
      httpCollectRemove(row) {
        collectRemove({
          refId: row.id,
        }).then((res) => {
          this.checkData();
        });
      },
      onChangeYear(res) {
        //切换学年时，取第1页
        this.pageNum = 1;
        this.checkData();
      },
      onClickScience(item) {
        if (this.curSelectScienceList == item.name) {
          return;
        } else {
          this.curSelectScienceList = item.name;
        }
        this.isShowTable = false;
      },
      onClickLiberalArts(item) {
        let index = this.curSelectLiberalArts.indexOf(item.name);
        if (index >= 0) {
          this.curSelectLiberalArts.splice(index, 1);
        } else {
          this.curSelectLiberalArts.push(item.name);
        }
        this.isShowTable = false;
      },
      isShowScience(name) {
        return this.curSelectScienceList == name;
      },
      isShowLiberalArts(name) {
        return this.curSelectLiberalArts.indexOf(name) >= 0;
      },
      onSearch() {
        this.checkData();
      },
      httpGetXkcxYears() {
        xkcxYears().then((res) => {
          this.yearList = res.data || [];
          this.selectNian = this.yearList[0]
        });
      },
      onChangePage(page) {
        this.pageSize = page.limit;
        this.pageNum = page.page;
        this.checkData();
      },
      checkData(cb) {
        if (this.curSelectLiberalArts.length != 2) {
          this.$message.error("请从右侧4门可选科目中点击选择2门");
          return;
        }

        this.httpGetXkcxList();
      },
      toMyPage() {
        this.$router.push("/career/subject/myChoice");
      },
      httpGetXkcxList() {
        xkcxlist({
          level:this.marjorsType,
          keyword: this.keyword,
          course0: this.curSelectScienceList,
          course1: this.curSelectLiberalArts.toString(),
          locations: this.selectLocation.toString(),
          ts: this.selectCharacteristic.toString(),
          types: this.selectTypes.toString(),
          year: this.selectNian,
          pageNum: this.pageNum,
          marjors: this.curMarjorsCode3.toString(),
          pageSize: this.pageSize,
        })
          .then((res) => {
            this.dataList = res.rows;
            this.total = res.total;
            this.isShowTable = true;
          })
          .catch((err) => {
            console.log("请求出错！");
            this.cleanSchoolSelect();
          });
      },
    },
  };
</script>

<style scoped>
  .subject-page {
    padding: 0 100px;
  }

  .college-icon {
    cursor: pointer;
  }

  .breadcrumb {
    padding: 15px 30px;
    margin: 15px 0;
    border-bottom: 1px solid #eee;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
  }

  .el-breadcrumb {
    font-size: 16px !important;
  }

  .content-box {
    padding: 60px 40px 60px 50px;
  }

  .content-box-title {
    color: #47c6a2;
    font-size: 24px;
  }

  .content-top-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .my-subject-button {
    color: #47c6a2;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid #47c6a2;
    padding: 13px 110px;
  }

  .content-msg {
    margin: 32px 0;
    font-size: 16px;
  }

  .select-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .select-item {
    box-sizing: border-box;
    border: 1px dashed rgba(24, 144, 255, 1);
    height: 334px;
    padding: 20px;
    margin-right: 20px;
  }

  .select-msg {
    color: #47c6a2;
    font-size: 14px;
  }

  .select-click-list {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .select-box-click-item {
    background-color: #fbfbfb;
    cursor: pointer;
    height: 89px;
    line-height: 89px;
    font-size: 24px;
    color: #414141;
    font-weight: 600;
    text-align: center;
    position: relative;
  }

  .select-box-click-item.two {
    margin: 10px 0;
    width: 100%;
  }

  .select-box-click-item.four {
    margin: 10px 0;
    width: 46%;
  }

  .select-box-click-item.active {
    background-color: #d4eaff !important;
  }

  .select-box-click-item-icon {
    height: 20px;
    width: 20px;
    border-radius: 2px;
    background: #47c6a2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    position: absolute;
    right: 0;
    bottom: 0;
    color: #fff;
  }

  .select-button {
    padding: 0px 60px;
  }

  .xkcx-list-title {
    width: 100%;
    background-color: #e8e8e8;
    padding: 30px;
    text-align: center;
    font-size: 24px;
    color: #4c4c4c;
    margin-top: 80px;
  }

  .xkcx-input-box {
    padding: 20px 0;
    display: flex;
  }

  .search_header {
    margin-left: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    margin-right: 20px;
  }

  .search_header img {
    position: absolute;
    right: 20px;
    cursor: pointer;
    top: 6px;
  }

  .search_header input {
    background: #f7f7ff;
    border-radius: 20px;
    border: 1px solid #c6cbf5;
    outline: none;
    width: 340px;
    height: 32px;
    padding-left: 24px;
  }

  .button-school {
    margin: 0 20px;
  }

  .button-icon {
    width: 12px;
    height: 12px;
  }

  .el-icon-my-button {
    background: url(../../../assets/images/subject/icon_shaixuan.png) center no-repeat;
    background-size: cover;
  }

  .el-icon-my-button:before {
    content: "替";
    font-size: 16px;
    visibility: hidden;
  }

  .popup-item-title {
    color: #414141;
    font-size: 16px;
    font-weight: 600;
  }

  .popup-item-title span {
    font-size: 14px;
    font-weight: 500;
  }

  .check-box-item {
    padding: 8px 0;
    min-width: 70px;
  }

  .popup-item-content {
    padding: 20px 0;
  }

  .popup-msg {
    color: #ffa400;
    font-weight: 400;
    font-size: 14px;
  }

  .bottom-box {
    display: flex;
    justify-content: space-between;
  }

  .button-list {
    padding: 0 20px;
  }

  .major-box {
    display: flex;
    margin-bottom: 30px;
  }

  .popup-select {
    border-right: 1px solid #d7d7d7;
  }

  .popup-select-item {
    cursor: pointer;
    line-height: 30px;
    width: 100px;
    padding: 0 20px 0 30px;
  }

  .popup-select-item.active {
    color: #47c6a2;
    border-right: 2px solid #47c6a2;
  }

  .choice-box {
    display: flex;
  }

  .choice-item {
    margin: 0 10px;
    min-width: 300px;
    border: 1px solid #d7d7d7;
    height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .choice-item-menv {
    margin: 15px 20px;
    cursor: pointer;
  }

  .choice-item-menv.active {
    color: #47c6a2;
  }

  .choice-item-checkbox {
    padding: 10px 20px;
    width: 100%;
    box-sizing: border-box;
  }
</style>