Add school filter panel to major selector

src/views/career/components/MajorChoiceDialog.vue

@@ -0,0 +1,595 @@
+<template>
+  <div class="subject-page">
+    <div>
+      <div class="schoolpop" v-show="flag.isShowSchoolPopup">
+        <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>
+      </div>
+      <div class="majorpop" v-show="isShowMajorPopup">
+        <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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  xkcxlist,
+  xkcxYears,
+  collectAdd,
+  collectRemove,
+  universityFilters,
+  marjorsList,
+} from "@/api/webApi/webQue";
+export default {
+  props: {
+    isShowSchoolPopup: {
+      type: Boolean,
+      default: false
+    },
+    isShowMajorPopup:  {
+      type: Boolean,
+      default: false
+    },
+  },
+  watch: {
+    isShowSchoolPopup() {
+      this.flag.isShowSchoolPopup = this.isShowSchoolPopup;
+    }
+  },
+  data() {
+    return {
+      flag: {
+        isShowSchoolPopup: false,
+      },
+      curSelectScienceList: "",
+      curSelectLiberalArts: [],
+      options: [],
+      selectNian: "",
+      dataList: [],
+      yearList: [],
+      pageNum: 1,
+      pageSize: 20,
+      total: 0,
+      keyword: "",
+      isShowTable: true,
+      locationsList: [],
+      typesList: [],
+      characteristicList: [],
+      selectLocation: [], //地区
+      selectTypes: [], //类别
+      selectCharacteristic: [], //选中的特色
+      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.flag.isShowSchoolPopup = false;
+      this.checkData();
+    },
+    majorSubmit() {
+      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) {
+      this.$emit("onMajorChoiced", {locations:this.selectLocation, ts:this.selectCharacteristic, types:this.selectTypes})
+    },
+    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;
+}
+.schoolpop,
+.majorpop {
+  padding: 0 0 30px;
+}
+.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>

src/views/career/subject/majorChoice.vue

@@ -35,11 +35,11 @@
             <i class="el-icon-my-button"></i>
           </el-button>
         </div>
-        <div class="button-major">
+        <!--div class="button-major">
           <el-button plain @click="onChangeMajorPopup">
             专业<i class="el-icon-my-button"></i
           ></el-button>
-        </div>
+        </div-->
         <div class="search_header">
           <input
             placeholder="搜索专业"
@@ -53,6 +53,9 @@
           />
         </div>
       </div>
+
+      <major-choice-dialog :isShowSchoolPopup="isShowSchoolPopup" v-on:onMajorChoiced="onMajorChoiced"></major-choice-dialog>
+
       <div class="popup-box major-box">
         <div class="popup-select">
           <div
@@ -144,7 +147,9 @@
 <script>
 import {xkcxYears, collectAdd, collectRemove, marjorsList, xkcxlistByMarjors} from "@/api/webApi/webQue";
 
+import MajorChoiceDialog from "../components/MajorChoiceDialog.vue";
 export default {
+  components: { MajorChoiceDialog },
   data() {
     return {
       selected: {
@@ -158,7 +163,10 @@ export default {
         },
         curMarjors: {
           one: "", two: "", three: []
-        }
+        },
+        locations: [],
+        ts: [],
+        types: []
       },
       dataList: [
       ],
@@ -199,7 +207,9 @@ export default {
       pageNum: 1,
       pageSize: 10,
       total: 0,
-      keyword: ''
+      keyword: '',
+      isShowSchoolPopup: false,
+      isShowMajorPopup: false
     };
   },
   created() {
@@ -224,6 +234,16 @@ export default {
     onChangeMajorPopup() {
       this.isShowMajorPopup = !this.isShowMajorPopup;
     },
+    onMajorChoiced(choice) {
+      console.log(choice);
+      this.isShowSchoolPopup = false;
+
+      this.selected.locations = choice.locations;
+      this.selected.ts = choice.ts;
+      this.selected.types = choice.types;
+
+      this.httpGetXkcxList();
+    },
 
     clickMarjorsType(type) {
       this.selected.marjorsType = type;
@@ -291,6 +311,9 @@ export default {
         keyword: this.keyword,
         year: this.selected.selectNian.toString(),
         marjors: this.selected.curMarjors.one.name + "," + this.selected.curMarjors.two.name + "," + this.selected.curMarjors.three.join(","),
+        locations: this.selected.locations.toString(),
+        ts: this.selected.ts.toString(),
+        types: this.selected.types.toString(),
         pageNum: this.pageNum,
         pageSize: this.pageSize,
       })