gxytj/xztszzy/views/school/list.html

<template>
    <layout group="高校探索" title="高校信息大全" @search="search">
        <template v-slot:breadcrumb>
            <router-link to="/views/gaoxiao">高校探索</router-link>
        </template>
        <div class="c-page">
            <div class="c-row c-list-search">
                <div class="c-list-search-header c-flex" @click="show()">
                    <div v-for="menu in menus">
                        <template v-if="menu.checked||menu.selected.length===0">
                            {{menu.name}}
                            <img src="./../../gxytj/xztszzy/images/gaoxiao/down.png" style="width: 1rem;vertical-align: bottom"/>
                        </template>
                        <template v-else>
                            <span v-for="item in menu.selected">{{item}}</span>
                        </template>
                    </div>
                </div>
                <div class="c-list-search-body">
                    <div class="c-row c-flex c-form" style="height:45vh;">
                        <div v-for="menu in menus">
                            <label><input type="checkbox" v-model="menu.checked" value="" @change="changeAll($event,menu)" />不限</label>
                            <label v-for="item in menu.options"><input type="checkbox" @change="change($event,menu,item)" :value="item.name" v-model="menu.selected" />{{item.name}}</label>
                        </div>
                    </div>
                    <div class="c-row" style="height:8vh;">
                        <div class="c-btn" @click="search()" style="margin-right: 2rem">确定</div>
                        <div class="c-btn c-btn-light" @click="reset($event)">重置</div>
                    </div>
                </div>
            </div>
            <div class="c-row" style="height:40vh; padding: 0 5vh;">
                <table class="c-table">
                   <thead >

                       <tr >
                           <th width="5%">序号</th>
                           <th width="22%">院校</th>
                           <th width="7%">院校分类</th>
                           <th width="7%">学历类别</th>
                           <th width="7%">院校属地</th>
                           <th width="7%">办学类型</th>
                           <th width="45%">院校特色</th>
                       </tr>
                   </thead>

                    <tr v-for="(item,i) in model.university_list">
                        <td>{{getIndex(i)}}</td>
                        <td style="text-align:left;padding-left:2em;">
                            <router-link :to="'/views/school/item?name='+item.university_name+'&id='+item.university_id">
                                <img :src="'https://video.edusoa.com/static/images/schoollogo/'+item.logo"  onerror="this.src='https://video.edusoa.com/static/images/space/school.png'" style="height:4vh;padding-right:1.5vh;vertical-align:middle;" />
                                <span style="vertical-align:middle;">{{item.university_name}}</span>
                            </router-link></td>
                        <td>{{item.university_classification_name}}</td>
                        <td>{{item.university_type_name}}</td>
                        <td>{{item.province_name?item.province_name:'--'}}</td>
                        <td>{{item.university_property_name}}</td>
                        <td v-if="item.label_list.length!==0">
                            <span v-for="(tag,i) in getTags(item)" :style="'border-radius:1vh;padding:.5vh 1vh;border:.1vh solid '+tag.color+';color:'+tag.color+';margin:0 .5vh;'">{{tag.name}}</span>
                        </td>
                        <td v-else>--</td>
                    </tr>
                    <!--{{model.university_list}}-->
                    <tr v-if="model.university_list.length===0">
                        <td colspan="7">
                            <img src="images/empty-data.png" style="width: 17vh;margin-top: 5vh;margin-bottom: 2vh"/>
                            <div style="margin-bottom: 5vh;color: #a2a2a2;font-size: 2vh">暂无数据</div>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="c-row" style=" height:13vh;position:relative;padding:0 5vh;">
                <pagination v-model:index="model.pageNumber" v-model:size="model.pageSize" :total="model.totalRow" :callback="load" />
            </div>
        </div>
    </layout>
</template>
<script>
    export default {
        data: function () {
            return {
                state: store.state,
                color:['red'],
                model: {
                    pageNumber: 1,
                    pageSize: 5,
                    university_list: []
                },
                menus: [
                    {
                        name: '院校属地',
                        checked: true,
                        selected: [''],
                        options: []
                    },
                    {
                        name: '院校分类',
                        checked: true,
                        selected: [''],
                        options: []
                    },
                    {
                        name: '学历类别',
                        checked: true,
                        selected: [''],
                        options: [{name:'本科',id:1},{name:'专科（高职）',id:2},]
                    },
                    {
                        name: '办学类型',
                        checked: true,
                        selected: [''],
                        options: []
                    },
                    {
                        name: '院校特色',
                        selected: [''],
                        checked: true,
                        options: []
                    },
                ]
            };
        },
        mounted: function () {
//            store.state.query = '';
            this.state.query =this.$route.query.query===undefined? '':this.$route.query.query;
            this.getZyghProviceList();
            this.getDicItemByKind('UNIVERSITY_CLASSIFICATION',1);//院校分类
            this.getDicItemByKind('UNIVERSITY_PROPERTY',3);//办学类型（性质）
            this.getDicItemByKind('UNIVERSITY_LABEL',4);//院校特色
            this.load();
        },
        methods: {
            load: function () {
//                this.model.university_list = [];
                var url = '/dsideal_yy/zygh/university/getUniversityList';
                var uri = new URI();
                uri.setQuery("pageNumber", this.model.pageNumber);
                uri.setQuery("pageSize", this.model.pageSize);
                if ( this.state.query ) {
                    uri.setQuery("university_name",this.state.query );
                }
                var menu = null;
                //单选
//                menu = Enumerable.from(this.menus).firstOrDefault(o => o.name === '院校属地');
//                if (menu && menu.selected.length) {
//                    let id='';
//                    if(menu.selected[0]!==''){
//                        this.menus[0].options.forEach((i)=>{
//                            if(menu.selected[0]===i.name.toString()){
//                                id=i.id
//                            }
//                        })
//                    }
//                    uri.setQuery('province_id', id);
//                }
//                menu = Enumerable.from(this.menus).firstOrDefault(o => o.name === '院校分类');
//                if (menu && menu.selected.length) {
//                    let id='';
//                    if(menu.selected[0]!==''){
//                        this.menus[1].options.forEach((i)=>{
//                            if(menu.selected[0]===i.name.toString()){
//                                id=i.id
//                            }
//                        })
//                    }
//                    uri.setQuery('university_classification', id);
//                }
//                menu = Enumerable.from(this.menus).firstOrDefault(o => o.name === '学历类别');
//                if (menu && menu.selected.length) {
//                    let id='';
//                    if(menu.selected[0]!==''){
//                        this.menus[2].options.forEach((i)=>{
//                            if(menu.selected[0]===i.name.toString()){
//                                id=i.id
//                            }
//                        })
//                    }
//                    uri.setQuery('university_type', id);
//                }
//                menu = Enumerable.from(this.menus).firstOrDefault(o => o.name === '办学类型');
//                if (menu && menu.selected.length) {
//                    let id='';
//                    if(menu.selected[0]!==''){
//                        this.menus[3].options.forEach((i)=>{
//                            if(menu.selected[0]===i.name.toString()){
//                                id=i.id
//                            }
//                        })
//                    }
//                    uri.setQuery('university_property', id);
//                }
//                menu = Enumerable.from(this.menus).firstOrDefault(o => o.name === '院校特色');
//                if (menu && menu.selected.length) {
//                    let id='';
//                    if(menu.selected[0]!==''){
//                        this.menus[4].options.forEach((i)=>{
//                            if(menu.selected[0]===i.name.toString()){
//                                id=i.id
//                            }
//                        })
//                    }
//                    uri.setQuery('university_label', id);
//                }
                //多选
                menu = Enumerable.from(this.menus).firstOrDefault(o => o.name === '院校属地');
                if (menu && menu.selected.length) {

                    let id=[];
                    this.menus[0].options.forEach((item)=>{
                        menu.selected.forEach((i)=>{
                            if(i===item.name.toString()){
                                id.push(item.id)
                            }
                        })

                    });
                    uri.setQuery('province_id',id.join(','));
                }
                menu = Enumerable.from(this.menus).firstOrDefault(o => o.name === '院校分类');
                if (menu && menu.selected.length) {
                    let id=[];
                    this.menus[1].options.forEach((item)=>{
                        menu.selected.forEach((i)=>{
                            if(i===item.name.toString()){
                                id.push(item.id)
                            }
                        })

                    });
                    uri.setQuery('university_classification', id.join(','));
                }
                menu = Enumerable.from(this.menus).firstOrDefault(o => o.name === '学历类别');
                if (menu && menu.selected.length) {
                    let id=[];
                    this.menus[2].options.forEach((item)=>{
                        menu.selected.forEach((i)=>{
                            if(i===item.name.toString()){
                                id.push(item.id)
                            }
                        })

                    });
                    uri.setQuery('university_type', id.join(','));
                }
                menu = Enumerable.from(this.menus).firstOrDefault(o => o.name === '办学类型');
                if (menu && menu.selected.length) {
                    let id=[];
                    this.menus[3].options.forEach((item)=>{
                        menu.selected.forEach((i)=>{
                            if(i===item.name.toString()){
                                id.push(item.id)
                            }
                        })

                    });
                    uri.setQuery('university_property', id.join(','));
                }
                menu = Enumerable.from(this.menus).firstOrDefault(o => o.name === '院校特色');
                if (menu && menu.selected.length) {
                    let id=[];
                    this.menus[4].options.forEach((item)=>{
                        menu.selected.forEach((i)=>{
                            if(i===item.name.toString()){
                                id.push(item.id)
                            }
                        })

                    });
                    uri.setQuery('university_label',id.join(','));
                }
                var parent = this;
                $.post(url, uri.query(), function (response) {
                    if(response.success){
                        parent.model = response;
                    }
                });
            },
            //获取院校属地
            getZyghProviceList:function () {
                var parent=this;
                var url='/dsideal_yy/zygh/score/getZyghProviceList';
                $.post(url, {}, function (response) {
                   if(response.success){
                       var list=JSON.parse(JSON.stringify(response.table_List).replaceAll('provincename','name'));
                       parent.menus[0].options=list;
                   }
                });
            },
            //获取院校分类
            getDicItemByKind:function (type,num) {
                var parent=this;
                var uri = new URI();
                uri.setQuery({
                    "kind": type,
                });
                var url='/dsideal_yy/dic/getDicItemByKind';
                $.post(url,uri.query(), function (response) {
                    if(JSON.parse(response).success){
                        let arr=JSON.parse(response).table_List;
                        let list=JSON.parse(JSON.stringify(arr).replaceAll('CODE','id').replaceAll('DETAIL','name'));
                        parent.menus[num].options=list;
                    }
                });
            },

            getIndex: function (i) {
                return i + 1 + (this.model.pageNumber - 1) * this.model.pageSize;
            },
            getTags: function (item) {
                let arr=[];
                if(item.label_list.length!==0){
                    item.label_list.forEach((i)=>{
                        switch (i.detail){
                            case '985':
                                return arr.push({name:i.detail,color:'#75E0ED'});
                            case '211':
                                return arr.push({name:i.detail,color:'#e550ff'});
                            case 'C9':
                                return arr.push({name:i.detail,color:'#f78b54'});
                            case '强基计划':
                                return arr.push({name:i.detail,color:'#4cb1f7'});
                            case '双一流':
                                return arr.push({name:i.detail,color:'#ababf7'});
                            case '教育部直属':
                                return arr.push({name:i.detail,color:'#87e997'});
                            case '研究生院':
                                return arr.push({name:i.detail,color:'#F6A69B'});
                            case '示范性高职':
                                return arr.push({name:i.detail,color:'#f793d8'});
                            case '骨干高职':
                                return arr.push({name:i.detail,color:'#f7556f'});
                            case '双高计划':
                                return arr.push({name:i.detail,color:'#3c16f7'});


                        }
                    })
                }else{
                    arr=[]
                }
                return arr;
            },
            show: function () {
                $('.c-list-search-body').fadeToggle();
            },
            search: function () {
                this.model.pageNumber = 1;
                this.model.pageSize = 5;
                this.load();
                this.menus.forEach((i)=>{
                    if(i.selected.length===1&&i.selected[0]===''){
                        i.checked = true;
                    }
                });
                $('.c-list-search-body').hide();
            },
            changeAll: function (e, menu) {
                if (menu.checked) {
                    menu.selected = [];
                }
            },
            change: function (e, menu, item) {
//                menu.selected=[];
//                menu.selected.push(item.name);//单选
                if (e.target.checked) {
                    if (menu.checked) {
                        menu.checked = false;
                    }
                }
            },
            reset: function (e) {
                this.menus.forEach(o => {
                    o.checked = true;
                    o.selected = [];
                });
            }
        }
    }
</script>
<style>
    .c-table th, .c-table td {
        height: 6vh;
    }

    .c-list-search {
        padding: 3vh 5vh;
        height: 13vh;
        position: relative;
        overflow: visible;
    }

    .c-list-search-header {
        box-sizing: border-box;
        width: 100%;
        height: 7vh;
        border: 1px solid #AFDBFF;
        overflow: hidden;
        cursor: pointer;
    }

        .c-list-search-header > div {
            font-size: 1.6vh;
            display: inline-block;
            line-height: 1.6vh;
            box-sizing: border-box;
            width: 20%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

            .c-list-search-header > div span {
                padding: 0 .5vh;
            }

            .c-list-search-header > div:nth-child(even ) {
                border-left: 1px solid #666;
                border-right: 1px solid #666;
            }

        .c-list-search-header i {
            margin-left: 3vh;
        }

    .c-list-search-body {
        box-sizing: border-box;
        height: 53vh;
        border: 1px solid #AFDBFF;
        position: absolute;
        top: 13vh;
        left: 5vh;
        right: 5vh;
        z-index: 1;
        display: none;
        background-color: #fff;
    }

        .c-list-search-body .c-form > div {
            box-sizing: border-box;
            width: 20%;
            height: 100%;
        }

    .c-form label {
        display: inline-block;
        font-size: 1.6vh;
        line-height: 2vh;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: .8vh 0;
        white-space: nowrap;
        text-align: left;
        box-sizing: border-box;
        padding-left: 1vh;
    }

    .c-form > div label {
        width: 100%;
    }

    .c-form > div:first-child label {
        width: 33%;
        float: left;
    }

    .c-form > div:nth-child(2) label {
        width: 50%;
        float: left;
    }

    .c-form label > input {
        line-height: 1.6vh;
        margin-right: 1vh;
    }

    .c-form > div:not(:first-child) {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-content: flex-start;
    }
</style>