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

<template>
  <div>
    <div>
      <!-- 录取年份 -->
      <el-row class="radioInput">
        <div>
          <span class="radiaTitle">录取年份:</span>
        </div>
        <el-radio-group v-model="universityParams.year">
          <el-radio-button v-for="item in years" :key="item" :label="item"
                           style="margin-bottom:10px"></el-radio-button>
        </el-radio-group>
      </el-row>
      <!-- 科类 -->
      <el-row class="radioInput">
        <div>
          <span class="radiaTitle">科类:</span>
        </div>
        <el-radio-group v-model="universityParams.liberalScience">
          <el-radio-button label="">所有</el-radio-button>
          <el-radio-button v-for="item in types" :key="item" :label="item"
                           style="margin-bottom:10px"></el-radio-button>
        </el-radio-group>
      </el-row>
      <!-- 院校过滤条件 -->
      <filter-form :filter="filter_form"></filter-form>
      <mx-search-group class="mb10" justify="end" :span="6" v-model="name" placeholder="搜索" @search="clickSuffix"
      ></mx-search-group>
      <!-- 表格数据 -->
      <universities-line-table :universityParams="all_form"></universities-line-table>
    </div>
  </div>
</template>

<script>
  import {
    selectUniversityTypes,
    selectUniversityYears
  } from '@/api/webApi/shiftLine'
  import UniversitiesLineTable from '@/views/career/components/UniversitiesLineTable'
  import FilterForm from '@/views/career/components/FilterForm'
  import MxSearchGroup from '@/components/MxSearch/mx-search-group'
  export default {
    name: "UniversitiesLine",
    components: {UniversitiesLineTable,FilterForm,MxSearchGroup},
    data() {
      return {
        types: [],
        years: [],
        filter_form:{
          location:'',
          natureTypeCN:'',
          type:'',
          level:'',
          features:'',
          name:''
        },
        name:'',
        universityParams: {
          liberalScience: '',
          year: ''
        }
      }
    },
    computed:{
      all_form(){
       return {
         ...this.filter_form,
         ...this.universityParams,
       }
      }
    },
    watch: {
      'universityParams.year': {
        immediate: false,
        handler(val) {
          this.getUniversityTypes()
        }
      }
    },
    created() {
      this.getUniversityYears()
    },
    methods: {
      clickSuffix() {
        this.filter_form.name = this.name
      },
      getUniversityTypes() {
        const params = {
          year: this.universityParams.year,
        }
        selectUniversityTypes(params).then(res => {
          this.types = res.rows
        })
      },
      getUniversityYears() {
        selectUniversityYears().then(res => {
          this.universityParams.year = res.rows[0]
          this.years = res.rows
        })
      }
    }
  }
</script>

<style lang="scss" scoped>

.radioInput ::v-deep {
  background-color: #ffffff;
  font-size: 14px;
  padding:5px;
  .el-radio {
    .el-radio__input {
      display: none;
    }
  }
}

.radioInput ::v-deep {
  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;
  }
}
</style>