multiple select support -- college & elective subject query

src/views/career/components/FilterForm.vue

@@ -4,51 +4,63 @@
       <div>
         <span class="radiaTitle">院校省份:</span>
       </div>
-      <el-radio-group v-model="filter.location">
-        <el-radio-button label="">所有</el-radio-button>
-        <el-radio-button v-for="item in filter_list.locations" :key="item" :label="item" style="margin-bottom:10px"
-        ></el-radio-button>
-      </el-radio-group>
+      <el-checkbox-button v-if="multiple" :value="!!!this.filter.location.length" @click.native="filter.location=[]">不限
+      </el-checkbox-button>
+      <component :is="useSelectComponent" v-model="filter.location">
+        <component v-if="!multiple" :is="useOptionComponent" label="">所有</component>
+        <component :is="useOptionComponent" v-for="item in filter_list.locations" :key="item" :label="item"
+                   style="margin-bottom:10px"></component>
+      </component>
     </el-row>
-    <el-row class="radioInput" >
+    <el-row class="radioInput">
       <div>
         <span class="radiaTitle">院校类型:</span>
       </div>
-      <el-radio-group v-model="filter.type">
-        <el-radio-button label="">所有</el-radio-button>
-        <el-radio-button v-for="item in filter_list.types" :key="item" :label="item" style="margin-bottom:10px"
-        ></el-radio-button>
-      </el-radio-group>
+      <el-checkbox-button v-if="multiple" :value="!!!this.filter.type.length" @click.native="filter.type=[]">不限
+      </el-checkbox-button>
+      <component :is="useSelectComponent" v-model="filter.type">
+        <component v-if="!multiple" :is="useOptionComponent" label="">所有</component>
+        <component :is="useOptionComponent" v-for="item in filter_list.types" :key="item" :label="item"
+                   style="margin-bottom:10px"></component>
+      </component>
     </el-row>
     <el-row class="radioInput">
       <div>
         <span class="radiaTitle">院校层次:</span>
       </div>
-      <el-radio-group v-model="filter.features">
-        <el-radio-button label="">所有</el-radio-button>
-        <el-radio-button v-for="item in filter_list.features" :key="item" :label="item" style="margin-bottom:10px"
-        ></el-radio-button>
-      </el-radio-group>
+      <el-checkbox-button v-if="multiple" :value="!!!this.filter.features.length" @click.native="filter.features=[]">不限
+      </el-checkbox-button>
+      <component :is="useSelectComponent" v-model="filter.features">
+        <component v-if="!multiple" :is="useOptionComponent" label="">所有</component>
+        <component :is="useOptionComponent" v-for="item in filter_list.features" :key="item" :label="item"
+                   style="margin-bottom:10px"></component>
+      </component>
     </el-row>
-    <el-row class="radioInput" >
+    <el-row class="radioInput">
       <div>
         <span class="radiaTitle">办学类型:</span>
       </div>
-      <el-radio-group v-model="filter.natureTypeCN">
-        <el-radio-button label="">所有</el-radio-button>
-        <el-radio-button v-for="item in filter_list.natureTypes" :key="item" :label="item" style="margin-bottom:10px"
-        ></el-radio-button>
-      </el-radio-group>
+      <!--   NOTE:注意value传值要强制转成boolean类型，否则无法正常工作   -->
+      <el-checkbox-button v-if="multiple" :value="!!!this.filter.natureTypeCN.length"
+                          @click.native="filter.natureTypeCN=[]">不限
+      </el-checkbox-button>
+      <component :is="useSelectComponent" v-model="filter.natureTypeCN">
+        <component v-if="!multiple" :is="useOptionComponent" label="">所有</component>
+        <component :is="useOptionComponent" v-for="item in filter_list.natureTypes" :key="item" :label="item"
+                   style="margin-bottom:10px"></component>
+      </component>
     </el-row>
     <el-row class="radioInput" v-if="!levelHide">
       <div>
         <span class="radiaTitle">学历层次:</span>
       </div>
-      <el-radio-group v-model="filter.level">
-        <el-radio-button label="">所有</el-radio-button>
-        <el-radio-button  v-for="item in filter_list.levels" :key="item" :label="item" style="margin-bottom:10px"
-        ></el-radio-button>
-      </el-radio-group>
+      <el-checkbox-button v-if="multiple" :value="!!!this.filter.level.length" @click.native="filter.level=[]">不限
+      </el-checkbox-button>
+      <component :is="useSelectComponent" v-model="filter.level">
+        <component v-if="!multiple" :is="useOptionComponent" label="">所有</component>
+        <component :is="useOptionComponent" v-for="item in filter_list.levels" :key="item" :label="item"
+                   style="margin-bottom:10px"></component>
+      </component>
     </el-row>
   </div>
 </template>
@@ -61,32 +73,52 @@ export default {
       type: Object,
       default: {}
     },
-    levelHide:{
+    levelHide: {
+      type: Boolean,
+      default: false
+    },
+    multiple: {
       type: Boolean,
       default: false
     }
   },
-  created() {
-    this.getFilter()
-  },
   data() {
     return {
       filter_list: {}
     }
   },
-  methods:{
+  computed: {
+    useSelectComponent() {
+      return this.multiple ? 'el-checkbox-group' : 'el-radio-group'
+    },
+    useOptionComponent() {
+      return this.multiple ? 'el-checkbox-button' : 'el-radio-button'
+    }
+  },
+  created() {
+    this.getFilter()
+  },
+  methods: {
     getFilter() {
       universityFilters().then(res => {
         this.filter_list = res.data
       })
     },
+    handleEmpty(key) {
+      this.$set(this.filter, key, this.multiple ? [] : '')
+    }
   }
 }
 </script>
 <style scoped lang="scss">
 .radioInput ::v-deep {
-  background-color: #ffffff;font-size: 14px;padding:5px;
+  background-color: #ffffff;
+  font-size: 14px;
+  padding: 5px;
+
+  .el-checkbox,
   .el-radio {
+    .el-checkbox__input,
     .el-radio__input {
       display: none;
     }
@@ -96,6 +128,7 @@ export default {
 .radioInput ::v-deep {
   display: flex;
 
+  .el-checkbox-button .el-checkbox-button__inner,
   .el-radio-button .el-radio-button__inner {
     border-radius: 4px !important;
     border: none;
@@ -104,10 +137,15 @@ export default {
     font-family: PingFangSC-Regular, PingFang SC;
   }
 
+  .el-checkbox-button__original:checked + .el-checkbox-button__inner,
   .el-radio-button__orig-radio:checked + .el-radio-button__inner {
     box-shadow: none;
   }
 
+  .el-checkbox-button {
+    margin-left: 10px;
+  }
+
   .radiaTitle {
     display: inline-block;
     width: 80px;

src/views/career/plan/compoents/AllUniversity.vue

@@ -1,86 +1,89 @@
 <template>
   <div v-loading="loading">
-      <filter-form :filter="filter_form"></filter-form>
-      <mx-search-group justify="end"  v-model="collegeName" @search="clickSuffix">
-        <p>共 <span class="f-primary">{{pageForm.total}}</span> 条</p>
-      </mx-search-group>
-      <el-row class="mt10 ">
-        <div v-if="pageForm.total > 0">
-          <div class="list-wrap pl30">
-            <div class="list-item fx-row mb30" v-for="item in collegeList">
-              <div class="img" >
-                <img style="width: 100%;height: 100%" :src="item.logo" alt="">
-              </div>
-              <div class="info ml20">
-                <div class="college_name pointer f-333 f20 mb5" @click="toDetail(item)">{{item.name}}</div>
-                <div class="tags" v-if="item.features">
-                  <span class="mr5 el-tag el-tag--info el-tag--plain" v-for="feature in item.features.split(',')">{{ feature }}</span>
-                </div>
-                <div class="college-desc mt5 f14 f-666">
-                  <p>{{`${item.location} ${item.cityName} ${item.type} / ${item.natureTypeCN} / ${item.managerType} `}}</p>
-                </div>
-              </div>
-              <div class="heat f12 f-666">
-                <p>排名</p>
-                <p class="mt3">{{ `第${item.ranking}名 / 综合指数${item.comScore}` }}</p>
+    <filter-form :filter="filter_form" multiple></filter-form>
+    <mx-search-group justify="end" v-model="collegeName" @search="clickSuffix">
+      <p>共 <span class="f-primary">{{ pageForm.total }}</span> 条</p>
+    </mx-search-group>
+    <el-row class="mt10 ">
+      <div v-if="pageForm.total > 0">
+        <div class="list-wrap pl30">
+          <div class="list-item fx-row mb30" v-for="item in collegeList">
+            <div class="img">
+              <img style="width: 100%;height: 100%" :src="item.logo" alt="">
+            </div>
+            <div class="info ml20">
+              <div class="college_name pointer f-333 f20 mb5" @click="toDetail(item)">{{ item.name }}</div>
+              <div class="tags" v-if="item.features">
+                <span class="mr5 el-tag el-tag--info el-tag--plain"
+                      v-for="feature in item.features.split(',')">{{ feature }}</span>
               </div>
-              <div class="heat f12  f-666">
-                <p>热度</p>
-                <p class="mt3">{{ (item.hits/10000).toFixed(1) }}万</p>
+              <div class="college-desc mt5 f14 f-666">
+                <p>
+                  {{ `${item.location} ${item.cityName} ${item.type} / ${item.natureTypeCN} / ${item.managerType} ` }}</p>
               </div>
             </div>
+            <div class="heat f12 f-666">
+              <p>排名</p>
+              <p class="mt3">{{ `第${item.ranking}名 / 综合指数${item.comScore}` }}</p>
+            </div>
+            <div class="heat f12  f-666">
+              <p>热度</p>
+              <p class="mt3">{{ (item.hits / 10000).toFixed(1) }}万</p>
+            </div>
           </div>
-          <pagination class="mt10" :total="pageForm.total" :autoScroll="false" @pagination="onChangePage"
-                      :page.sync="pageForm.pageNum"
-                      :limit.sync="pageForm.pageSize"
-          ></pagination>
         </div>
-        <evaluation-empty v-else shadow title="暂无数据"></evaluation-empty>
-      </el-row>
+        <pagination class="mt10" :total="pageForm.total" :autoScroll="false" @pagination="onChangePage"
+                    :page.sync="pageForm.pageNum"
+                    :limit.sync="pageForm.pageSize"
+        ></pagination>
+      </div>
+      <evaluation-empty v-else shadow title="暂无数据"></evaluation-empty>
+    </el-row>
   </div>
 </template>
 
 <script>
-import FilterForm from '@/views/career/components/FilterForm';
+import FilterForm from '@/views/career/components/FilterForm'
 import { selectUniversityList } from '@/api/webApi/career-course'
 import MxSearchGroup from '@/components/MxSearch/mx-search-group'
 import transferMixin from '@/components/mx-transfer-mixin'
+
 export default {
-  mixins:[transferMixin],
-  components: { MxSearchGroup,FilterForm },
+  mixins: [transferMixin],
+  components: { MxSearchGroup, FilterForm },
   data() {
     return {
-      filter_form:{
-        location:'',
-        natureTypeCN:'',
-        type:'',
-        level:'',
-        features:'',
-        name:''
+      filter_form: {
+        location: [],
+        natureTypeCN: [],
+        type: [],
+        level: [],
+        features: [],
+        name: ''
       },
-      loading:false,
-      collegeName:'',
-      pageForm:{
-        pageSize:10,
-        pageNum:1,
-        total:0
+      loading: false,
+      collegeName: '',
+      pageForm: {
+        pageSize: 10,
+        pageNum: 1,
+        total: 0
       },
-      filter_list:{},
-      collegeList:[],
+      filter_list: {},
+      collegeList: []
     }
   },
   watch: {
-    filter_form:{
+    filter_form: {
       immediate: true,
-      deep:true,
+      deep: true,
       handler(val) {
         this.getUniversityList()
       }
-    },
+    }
   },
   methods: {
     toDetail(item) {
-      this.transferTo('/career/plan/UniversityDetail',{code:item.code})
+      this.transferTo('/career/plan/UniversityDetail', { code: item.code })
     },
     onChangePage(page) {
       this.pageForm.pageSize = page.limit
@@ -90,40 +93,49 @@ export default {
     clickSuffix() {
       this.filter_form.name = this.collegeName
     },
-    getUniversityList(){
+    formatFilterForm() {
+      const result = {}
+      Object.keys(this.filter_form).forEach(key => result[key] = this.filter_form[key].toString())
+      return result
+    },
+    getUniversityList() {
       this.loading = true
       // console.log(params)
-      selectUniversityList({ ...this.filter_form,
-        pageNum:this.pageForm.pageNum,
-        pageSize:this.pageForm.pageSize,
-      }).then(res=>{
-        this.pageForm.total =res.total
-        this.collegeList =res.rows
+      selectUniversityList({
+        ...this.formatFilterForm(),
+        pageNum: this.pageForm.pageNum,
+        pageSize: this.pageForm.pageSize
+      }).then(res => {
+        this.pageForm.total = res.total
+        this.collegeList = res.rows
       }).finally(() => {
         this.loading = false
       })
-    },
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.heat{
+.heat {
   width: 200px;
   height: 72px;
   padding-top: 22px;
   color: #666;
 }
-.info{
+
+.info {
   width: 400px;
 }
-.img{
+
+.img {
   flex-shrink: 0;
   width: 72px;
   height: 72px;
 }
+
 .tags {
-  .el-tag{
+  .el-tag {
     height: 16px;
     line-height: 16px;
     font-size: 12px;

src/views/career/subject/subjectChoice.vue

@@ -36,7 +36,7 @@
           </div>
 
         </el-row>
-        <filter-form :filter="filter_form"></filter-form>
+        <filter-form :filter="filter_form" multiple></filter-form>
         <mx-search-group class="mb10" justify="end" :span="12" v-model="keyword" placeholder="请输入内容"
                          @search="httpGetXkcxList"
         ></mx-search-group>
@@ -116,11 +116,11 @@ export default {
       selectCourse: {},
       gkType: 1, // 1 4选2  2 6选3
       filter_form: {
-        location: '',
-        natureTypeCN: '',
-        type: '',
-        level: '',
-        features: ''
+        location: [],
+        natureTypeCN: [],
+        type: [],
+        level: [],
+        features: []
       },
       // 选中条件
       selected: { years: '', sciences: [[], []] },
@@ -174,6 +174,11 @@ export default {
     onScienceChanged(value) {
       this.httpGetXkcxList()
     },
+    formatFilterForm() {
+      const result = {}
+      Object.keys(this.filter_form).forEach(key => result[key] = this.filter_form[key].toString())
+      return result
+    },
     httpGetXkcxList() {
       const course = [...this.selected.sciences[0], ...this.selected.sciences[1]].filter(item => item != '')
       if (course.length < 3) return
@@ -184,7 +189,7 @@ export default {
         course0: this.selected.sciences[0].toString(),
         course1: this.selected.sciences[1].toString(),
         year: this.selected.years.toString(),
-        ...this.filter_form,
+        ...this.formatFilterForm(),
         pageNum: this.pageNum,
         marjors: [],
         pageSize: this.pageSize
@@ -195,7 +200,7 @@ export default {
           this.total = res.total
           this.isShowTable = true
           Object.keys(res.header).forEach(item => {
-            if (item === 'collect' && this.hiddenCollect) return 
+            if (item === 'collect' && this.hiddenCollect) return
             propDefines[item] = { label: res.header[item], slot: item }
           })
           this.propDefines = propDefines