front/src/views/career/components/MajorTable.vue

<template>
  <div class="subject-page">
    <div class="content-box">
      <div class="xkcx-list-box" v-if="isShowTable">
        <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",
        },
        collect: {
          label: "选择",
          align: "left",
          slot: "select",
          width: "100px",
        },
      },
      curSelectScienceList: "",
      curSelectLiberalArts: [],
      options: [],
      selectNian: "",
      dataList: [],
      yearList: [],
      pageNum: 1,
      pageSize: 20,
      total: 0,
      keyword: "",
      isShowTable: true,
      locationsList: [],
      typesList: [],
      characteristicList: [],
      selectLocation: [], //地区
      selectTypes: [], //类别
      selectCharacteristic: [], //选中的特色
      isShowSchoolPopup: false,
      isShowMajorPopup: false,
      marjorsList: [],
      marjorsList2: [],
      marjorsList3: [],
      marjorsType: "本科",
      marjorsLevel: 1,
      marjorsCode: "",
      curMarjorsCode: "",
      curMarjorsCode2: "",
      curMarjorsCode3: [],
    };
  },
  created() {
    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) {
      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;
      });
    },
    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();
    },
    httpGetXkcxList() {
      xkcxlist({
        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;
  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>