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

<template>
  <div class="major-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="xkcx-input-box">
        <div>
          <el-select
            v-model="selected.selectNian"
            @change="onChangeYear"
            placeholder="全部年份"
          >
            <el-option
              v-for="(item, index) in selected.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="httpGetXkcxList()"
          />
          <img
            src="@/assets/images/icon_search2.png"
            alt=""
            @click="httpGetXkcxList()"
          />
        </div>
      </div>
      <div class="popup-box major-box">
        <div class="popup-select">
          <div
            class="popup-select-item"
            :class="selected.marjorsType == '本科' ? 'active' : ''"
            @click="clickMarjorsType('本科')"
          >
            本科
          </div>
          <div
            class="popup-select-item"
            :class="selected.marjorsType == '专科' ? 'active' : ''"
            @click="clickMarjorsType('专科')"
          >
            专科
          </div>
        </div>
        <div class="choice-box">
          <div class="choice-item">
            <div
              class="choice-item-menv"
              v-for="(item, index) in selected.marjorsList.one"
              :key="index"
              :class="selected.curMarjors.one.code == item.code ? 'active' : ''"
              @click="changeMajor(item)"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="choice-item">
            <div
              class="choice-item-menv"
              v-for="(item, index) in selected.marjorsList.two"
              :key="index"
              :class="selected.curMarjors.two.code == item.code ? 'active' : ''"
              @click="changeMajor(item)"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="choice-item">
            <el-checkbox-group v-model="selected.curMarjors.three" @change="httpGetXkcxList">
              <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 selected.marjorsList.three"
                :key="index"
              ></el-checkbox>
            </el-checkbox-group>
          </div>
        </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>
</template>

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

export default {
  data() {
    return {
      selected: {
        yearList: [],
        selectNian: '',
        marjorsType: "本科",
        marjorsLevel: 1,
        marjorsCode: "",
        marjorsList: {
          one: [], two: [], three: []
        },
        curMarjors: {
          one: "", two: "", three: []
        }
      },
      dataList: [
      ],
      propDefines: {
        universityName: {
          label: "院校名称",
        },
        marjorName: {
          label: "专业（类）名称",
        },
        marjorBelongs: {
          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",
        },
      },
      selectIds: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      keyword: ''
    };
  },
  created() {
    this.httpGetXkcxYears();
    this.httpGetMarjorsList();
  },
  methods: {
    httpGetXkcxYears() {
      xkcxYears().then((res) => {
        this.selected.yearList = res.data || [];
        this.selected.selectNian = this.selected.yearList[0]
      });
    },
    onChangeYear(res) {
      //切换学年时，取第1页
      this.pageNum = 1;
      this.httpGetMarjorsList();
    },
    onChangeSchoolPopup() {
      this.isShowSchoolPopup = !this.isShowSchoolPopup;
    },
    onChangeMajorPopup() {
      this.isShowMajorPopup = !this.isShowMajorPopup;
    },

    clickMarjorsType(type) {
      this.selected.marjorsType = type;
      this.selected.marjorsLevel = 1;
      this.selected.marjorsCode = "";
      this.httpGetMarjorsList();
    },
    onSelectMarjorsAll(res) {
      if (res) {
        let len = this.selected.marjorsList.three.length;
        for (let i = 0; i < len; i++) {
          let name = this.selected.marjorsList.three[i]["name"];
          let index = this.selected.curMarjors.three.indexOf(name);
          if (index < 0) {
            this.selected.curMarjors.three.push(name);
          }
        }
      } else {
        this.selected.curMarjors.three = [];
      }
    },
    changeMajor(res) {
      this.selected.curMarjors.three = [];
      switch (res.level) {
        case 1:
          this.selected.curMarjors.one = res;
          break;
        case 2:
          this.selected.curMarjors.two = res;
          break;
      }
      this.selected.marjorsCode = res.code;
      this.selected.marjorsLevel = res.level + 1;
      this.httpGetMarjorsList();
    },
    httpGetMarjorsList() {
      marjorsList({
        type: this.selected.marjorsType,
        level: this.selected.marjorsLevel,
        code: this.selected.marjorsCode,
      }).then((res) => {
        switch (this.selected.marjorsLevel) {
          case 2:
            this.selected.marjorsList.two = res.rows;
            this.changeMajor(res.rows[0]);
            break;
          case 3:
            this.selected.marjorsList.three = res.rows;
            this.httpGetXkcxList();
            break;
          default:
            this.selected.marjorsList.one = res.rows;
            this.changeMajor(res.rows[0]);
            break;
        }
      });
    },
    // 查询结果
    httpGetXkcxList() {
      if (this.selected.curMarjors.three.length<1) return;

      //console.log(this.selected);return;
      xkcxlistByMarjors({
        level:this.selected.marjorsType.toString(),
        keyword: this.keyword,
        year: this.selected.selectNian.toString(),
        marjors: this.selected.curMarjors.one.name + "," + this.selected.curMarjors.two.name + "," + this.selected.curMarjors.three.join(","),
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      })
        .then((res) => {
          this.dataList = res.rows;
          this.total = res.total;
          this.isShowTable = true;
        })
        .catch((err) => {
          console.log("请求出错！");
          this.cleanSchoolSelect();
        });
    },

    onChangePage(page) {
      this.pageSize = page.limit;
      this.pageNum = page.page;
      this.httpGetXkcxList();
    },
    // 收藏
    httpCollectAdd(row) {
      row.collect = true;
      collectAdd({
        refId: row.id,
      });
    },
    // 取消收藏
    httpCollectRemove(row) {
      row.collect = false;
      collectRemove({
        refId: row.id,
      });
    },
  },
};
</script>


<style scoped>
.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);
}
.content-box {
  padding: 10px 40px 10px 50px;
}
.major-list-title span {
  color: #d28140;
}

el-button {
  padding: 9px 20px;
}
.button-school {
  margin: 0 10px;
}
.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;
}


.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;
}


.xkcx-input-box {
  padding: 20px 0 0;
  display: flex;
  margin-bottom: 20px;
  border-bottom: 2px solid #47c6a2;
}
.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;
}

</style>