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

<template>
  <div >
    <div class="content-box">
        <div>
          <el-row class="radioInput">
            <div>
              <span class="radiaTitle">年份:</span>
            </div>
            <el-radio-group v-model="selected.years" @change="yearChange">
              <el-radio-button
                v-for="item in form.years"
                :key="item"
                :label="item"
                style="margin-bottom: 10px"
              ></el-radio-button>
            </el-radio-group>
          </el-row>
          <el-row class="radioInput radioScience">
            <div v-if="selectCourse.course0 ? selectCourse.course0.length : selectCourse.course0" class="fx-row">
              <span class="radiaTitle">首选科目:</span>
              <el-checkbox-group v-model="selected.sciences[0]" @change="onScienceChanged" size="mini" :max="1">
                <el-checkbox-button v-for="item in selectCourse.course0" :key="item" :label="item">
                  {{item}}
                </el-checkbox-button>
               </el-checkbox-group>
            </div>

            <div class="fx-row">
              <span class="radiaTitle">{{ gkType == 1 ?  '再选科目' : '选科科目' }}：</span>
               <el-checkbox-group v-model="selected.sciences[1]" @change="onScienceChanged" size="mini" :max="gkType == 1 ? 2 : 3">
                <el-checkbox-button v-for="item in selectCourse.course1" :key="item" :label="item">
                  {{item}}
                </el-checkbox-button>
               </el-checkbox-group>
            </div>

          </el-row>
          <filter-form :filter="filter_form"></filter-form>
        </div>
        <div class="content">
          <mx-search-group class="mb10" justify="end" :span="12" v-model="keyword" placeholder="请输入内容" @search="httpGetXkcxList"
          ></mx-search-group>
          <div class="concerned-college-container" v-loading="loading">
            <mx-table :rows="dataList" :propDefines="propDefines">
              <template #collect="{ 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>
              <template #select="{ row }">
                <div @click="saveCourseCollect(row)">
                  <i class="el-icon el-icon-success"  style="color: #42b983" v-if="row.isSelectCourse"></i>
                  <i class="el-icon el-icon-success"  v-else></i>
                </div>

              </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>
</template>

<script>
  import {collectAdd, collectRemove, xkcxlist, xkcxYears,saveSelectCourse,getSelectCourse} from "@/api/webApi/webQue";
  import MxSearchGroup from "@/components/MxSearch/mx-search-group";
  import FilterForm from '@/views/career/components/FilterForm';
  export default {
    props: {
      course0:{
        type: String,
        default: ''
      },
      course1:{
        type: String,
        default: ''
      },
      readonly: {
        type: Boolean,
        default: false
      }
    },
    components : {
      MxSearchGroup,
      FilterForm
    },
    data() {
      return {
        // 初始条件
        form: {
          years: [],
        },
        selectCourse:{},
        gkType: 1, // 1 4选2  2 6选3
        filter_form:{
          location:'',
          natureTypeCN:'',
          type:'',
          level:'',
          features:'',
        },
        // 选中条件
        selected: { years:'', sciences:[[],[]]},
        pageNum: 1,
        pageSize: 20,
        total: 0,
        loading: false,
        keyword: "",
        // 查询结果
        dataList: [],
        isShowTabl: true,
        propDefines: {
          universityName: {
            label: "院校名称",
          },
          marjorName: {
            label: "专业（类）名称",
          },
          marjorBelongs: {
            label: "专业备注",
            align: "left",
          },
          level: {
            label: "专业层次",
          },
          courseRemark0: {
            label: "首选科目范围",
            align: "left",
          },
          courseRemark1: {
            label: "再选科目范围",
            align: "left",
          },
          year: {
            label: "年份",
            align: "left",
          },
          collect: {
            hidden: this.readonly,
            label: "收藏",
            align: "left",
            slot: "collect",
            width: "100px",
          },
          subjectCollect: {
            hidden: this.readonly,
            label: "选科收藏",
            align: "left",
            slot: "select",
            width: "100px",
          },
        },
      };
    },
    watch:{
      filter_form:{
        deep:true,
        handler(val) {
          this.httpGetXkcxList()
        }
      },
    },
    created() {
      this.selected.sciences[0] = this.course0 ? [this.course0] : []
      this.selected.sciences[1] = this.course1? this.course1.split(',') :[]
      if(this.course0 && this.course1) this.httpGetXkcxList()
      this.getYears();
      this.getSelectCourse()
    },
    methods: {
      getSelectCourse(){
        getSelectCourse().then(res => {
          this.selectCourse = res.data
          if(!res.data.course0.length) {
            this.gkType = 2
          }else {
            this.gkType = 1
          }
        })
      },
      // 有效年份
      getYears() {
        xkcxYears().then((res) => {
          this.form.years = res.data || [];
          this.selected.years  = this.form.years[0]
        });
      },
      yearChange(value) {
        this.httpGetXkcxList();
      },
      onScienceChanged(value) {
        this.httpGetXkcxList();
      },
      httpGetXkcxList() {
        const course = [...this.selected.sciences[0],...this.selected.sciences[1]]
        if (course.length<3) return;

        //console.log(this.selected);return;
        this.loading = true
        xkcxlist({
          keyword: this.keyword,
          course0: this.selected.sciences[0].toString(),
          course1: this.selected.sciences[1].toString(),
          year: this.selected.years.toString(),
          ...this.filter_form,
          pageNum: this.pageNum,
          marjors: [],
          pageSize: this.pageSize,
        })
          .then((res) => {
            this.dataList = res.rows;
            this.total = res.total;
            this.isShowTable = true;
          })
          .catch((err) => {
            console.log("请求出错！");
            this.cleanSchoolSelect();
          }).finally(() => {
            this.loading = false
        })
      },
      onChangePage(page) {
        this.pageSize = page.limit;
        this.pageNum = page.page;
        this.httpGetXkcxList();
      },
      // 收藏
      httpCollectAdd(row) {
        row.collect = true;
        collectAdd({
          refId: row.id,
        });
      },
      // 选科收藏 取消和收藏
      saveCourseCollect(row) {
        saveSelectCourse({
          refId:row.id,
          isSelectCourse: !row.isSelectCourse
        }).then(res =>{
          if(res.code== 200){
            row.isSelectCourse = !row.isSelectCourse
            this.$message.success(res.msg)
          }
        })
      },
      // 取消收藏
      httpCollectRemove(row) {
        row.collect = false;
        collectRemove({
          refId: row.id,
        });
      },
    },
  };
</script>

<style scoped>
.el-icon-success{
  cursor: pointer;
}

.college-icon {
  cursor: pointer;
}


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

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

</style>

<style lang="scss" scoped>
.layui-bg-orange {
  background-color: var(--themeColor);
  margin-left: 0;
}
</style>

<style lang="scss">
.el-checkbox-button {
  margin-bottom: 10px;
  .el-checkbox-button__inner {
    font-size: 14px;
  }
}

.radioInput {
  background-color: #ffffff;font-size: 14px;padding:5px;
  .el-radio {
    .el-radio__input {
      display: none;
    }
  }
}
.radioInput.radioScience {
  .el-radio-button {
    border: 1px solid #47C6A2;
    border-radius: 3px;
    margin-right: 10px;
  }
}
.radioInput {
  display: flex;
  .el-radio-button .el-radio-button__inner {
    border-radius: 4px !important;
    border: none;
    padding: 5px 10px !important;
    font-weight: 400;
    font-family: PingFangSC-Regular, PingFang SC;
  }
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    box-shadow: none;
  }
  .radiaTitle {
    display: inline-block;
    width: 80px;
    font-size: 14px;
    text-align: right;
    margin-top: 2px;
    margin-right: 10px;
  }
}
//.radioInput02 {
//  display: flex;
//  align-items: center;
//  .radiaTitle {
//    display: inline-block;
//    width: 130px;
//    font-size: 14px;
//    text-align: right;
//    margin-top: 2px;
//  }
//  .el-input--medium .el-input__inner {
//    border-radius: 50px;
//  }
//}
</style>