xjc-vue/src/views/xjc-integratedmachine/decision/choose_subjects_2.vue

<template>
    高考省份
    <span v-for="(item,index) in data.allareaList" @click="chooseAreaId(item)">&nbsp;
                {{item.name}}
        </span>
    <br>
    时间: <span v-for="(item,index) in yearArr" @click="chooseYear(item)">
    {{item}}&nbsp;
</span>
    <br>

    选考科目:

    <div v-show="universityForm.selstyle != 2 && universityForm.selstyle != undefined">
        <el-checkbox-group v-model="subjectArr">
            <el-checkbox value="物理">物理</el-checkbox>
            <el-checkbox value="化学">化学</el-checkbox>
            <el-checkbox value="生物">生物</el-checkbox>
            <el-checkbox value="历史">历史</el-checkbox>
            <el-checkbox value="地理">地理</el-checkbox>
            <el-checkbox value="政治">政治</el-checkbox>
        </el-checkbox-group>
    </div>


    <div v-show="universityForm.selstyle == 2">
        <el-radio-group v-model="subjectArr1">
            <el-radio value="物理">物理</el-radio>
            <el-radio value="历史">历史</el-radio>
        </el-radio-group>
        <el-checkbox-group v-model="subjectArr2">
            <el-checkbox value="化学">化学</el-checkbox>
            <el-checkbox value="生物">生物</el-checkbox>
            <el-checkbox value="地理">地理</el-checkbox>
            <el-checkbox value="政治">政治</el-checkbox>
        </el-checkbox-group>
    </div>


    专业倾向:
    <el-button @click="showZY">选择专业</el-button>
    您已选择的专业<br>----------------------------
    <div v-for="(item,index) in zyArr">
        {{item.name}}
        <el-button @click="removeChooseZY(item)">X</el-button>
    </div>


    <el-dialog v-model="zyFlag" width="600px" title="选择专业" append-to-body>
        学历层次:-----------------------------<br>
        <div @click="xlccChoose(1,1)">本科</div>
        <div @click="xlccChoose(2,1)">专科</div>
        专业门类:---------------------------<br>
        <div v-for="(item,index) in data.levelList2" @click="xlccChoose(item.oldid,2)">
            {{item.name}}
        </div>
        专业类：-------------------------<br>
        <div v-for="(item,index) in data.levelList3" @click="xlccChoose(item.oldid,3)">
            {{item.name}}
        </div>
        选择专业（可多选）：-------------------<br>
        <div v-for="(item,index) in data.levelList4">
            <el-checkbox v-model="item.checked" @change="(e) => selectZY(e,item)">{{item.name}}</el-checkbox>

        </div>
        您已选择的专业<br>----------------------------
        <div v-for="(item,index) in zyArr">
            {{item.name}}
            <el-button @click="removeChooseZY(item)">X</el-button>
        </div>

        <el-button @click="closeZY">确定</el-button>
    </el-dialog>


    <el-dialog v-model="gxFlag" width="800px" title="选择院校" append-to-body>
        学历层次:-----------------------------###<br>
        <span @click="choose_educationlevel(null,null)">全部</span>&nbsp;
        <span @click="choose_educationlevel(1,'本科')">本科</span>&nbsp;&nbsp;
        <span @click="choose_educationlevel(2,'专科')">专科</span><br>

        院校所在地：<span @click="choose_areaid(null)">全部</span>
        <span v-for="(item,index) in data.allareaList" @click="choose_areaid(item)">&nbsp;
                {{item.name}}
        </span>
        <br>
        院校特色:
        <span v-for="(item,index) in educationlevel_decision">&nbsp;&nbsp;
             <el-checkbox v-model="item.checked" @change="(e) => selectTS(e,item)">{{item.label}}</el-checkbox>
        </span>
        <br>
        院校分类:<span @click="choose_categoryid(null)">全部</span>&nbsp;
        <span v-for="(item,index) in school_category" @click="choose_categoryid(item)">
            {{item.label}}
        </span>
        <br>
        <br>
        选择高校(可多选)<br>
        <span v-for="(item,index) in data_list.rows">
            {{item.name}}
            <el-checkbox v-model="item.checked" @change="(e) => selectGX(e,item)">{{item.name}}</el-checkbox>

        </span>
        <pagination v-show="data_list.total > 0" :total="data_list.total" v-model:page="universityForm.pageNum"
                    v-model:limit="universityForm.pageSize" @pagination="getUniversity"/>

        您已选择的高校<br>----------------------------
        <div v-for="(item,index) in gxArr">
            {{item.name}}
            <el-button @click="removeChooseGX(item)">X</el-button>
        </div>

    </el-dialog>


    <br>
    高校倾向:
    <el-button @click="showGX">选择高校</el-button>
    <div>
        选择结果:
    </div>

    <div>
        <div v-show="gxArr.length == 0">
            <div v-if="universityForm.educationname != null">
                {{universityForm.educationname}}
                <el-button @click="choose_educationlevel(null)">x</el-button>
            </div>
            <div v-if="universityForm.name != null">
                {{universityForm.name}}
                <el-button @click="choose_areaid(null)">x</el-button>
            </div>
            <div v-for="(item,index) in tsArr">
                {{item.label}}
                <el-button @click="removeChooseTS(item)">x</el-button>
            </div>
            <div v-if="universityForm.categoryname != null">
                {{universityForm.categoryname}}
                <el-button @click="removeChooseCategory(null)">x</el-button>
            </div>
        </div>

        <div v-for="(item,index) in gxArr">
            {{item.name}}
            <el-button>x</el-button>
        </div>
    </div>

    <el-button @click="querySpecialtySelect">开始查询</el-button>
    <el-table :data="specialty_list.rows">
        <el-table-column label="ARWU排名" align="center" prop="sortnum"/>
        <el-table-column label="院校名称" align="center" prop="universityname"/>
        <el-table-column label="专业名称" align="center" prop="specialtyname"/>
        <el-table-column label="必考" align="center">
            <template #default="scope">
                <div v-if="scope.row.mustsubject == null">
                    --
                </div>
                <div v-if="scope.row.mustsubject != null">
                    {{scope.row.mustsubject}}
                </div>
            </template>
        </el-table-column>
        <el-table-column label="选考" align="center" prop="needSubject"/>
    </el-table>
    <pagination v-show="specialty_list.total > 0" :total="specialty_list.total" v-model:page="queryForm.pageNum"
                v-model:limit="queryForm.pageSize" @pagination="querySpecialtySelect"/>

</template>

<script setup>

    import {
        specialtySelect,
        getSpecData,
        getUniversityList,
        specialtySelectList,
        subjectSelect,
        getStyle
    } from '@/api/xjc-integratedmachine/decision/limitsubject.js'

    const {proxy} = getCurrentInstance()
    const {school_category, educationlevel_decision} = proxy.useDict('school_category', 'educationlevel_decision')


    const zyFlag = ref(false)
    const gxFlag = ref(false)

    function showZY() {
        zyFlag.value = true
    }

    function showGX() {
        gxFlag.value = true
    }

    const data = ref({})

    function init() {
        specialtySelect().then(resp => {
            data.value = resp
        })
    }

    function xlccChoose(value, level) {
        getSpecData({
            value: value
        }).then(resp => {
            if (level == 1) {
                data.value.levelList2 = resp
            } else if (level == 2) {
                data.value.levelList3 = resp
            } else if (level == 3) {
                data.value.levelList4 = resp
            }
        })
    }

    const zyArr = ref([])

    //---------------------------------------专业选择----------------------------------------------
    function selectZY(e, item) {
        if (e == true) {
            item.checked = true
            zyArr.value.push(item)
        } else {
            item.checked = false
            zyArr.value = zyArr.value.filter((element, idx) => item.oldid !== element.oldid);
        }
    }

    function removeChooseZY(item) {
        zyArr.value = zyArr.value.filter((element, idx) => item.oldid !== element.oldid);
        data.value.levelList4.forEach(function (it, ind) {
            if (it.oldid == item.oldid) {
                item.checked = false
            }
        })
    }

    function closeZY() {
        zyFlag.value = false
    }

    //---------------------------------------高校选择----------------------------------------------
    function choose_educationlevel(item, name) {
        if (item == null) {
            universityForm.value.educationlevel = null
            universityForm.value.educationname = null
        } else {
            universityForm.value.educationlevel = item
            universityForm.value.educationname = name
        }
        getUniversity()
    }

    function choose_areaid(item) {
        if (item == null) {
            universityForm.value.areaid = null
            universityForm.value.name = null
        } else {
            universityForm.value.areaid = item.id
            universityForm.value.name = item.name
        }
        getUniversity()
    }

    function choose_yxts(item) {
        if (item.value == 1) {
            universityForm.value.too = 1
        } else if (item.value == 2) {
            universityForm.value.nef = 1
        } else if (item.value == 3) {
            universityForm.value.self = 1
        } else if (item.value == 4) {
            universityForm.value.graduate = 1
        } else if (item.value == 5) {
            universityForm.value.istopschool = 1
        } else if (item.value == 6) {
            universityForm.value.istopsubject = 1
        }
        getUniversity()
    }

    const gxArr = ref([])

    function choose_categoryid(item) {
        universityForm.value.categoryid = item.value
        universityForm.value.categoryname = item.label
        getUniversity()
    }

    function removeChooseCategory(item) {
        universityForm.value.categoryid = null
        universityForm.value.categoryname = null
        getUniversity()
    }


    const universityForm = ref({
        educationlevel: null,
        areaid: null,
        graduate: null,
        categoryid: null,
        pageNum: 1,
        pageSize: 10,
    })
    const data_list = ref({})

    function getUniversity() {
        getUniversityList(universityForm.value).then(resp => {
            data_list.value.rows = resp.university_list.rows
            data_list.value.total = resp.university_list.total
            data_list.value.rows.forEach(function (it, ind) {
                let isHave = false
                gxArr.value.forEach(function (item, index) {
                    if (item.id == it.id) {
                        isHave = true
                    }
                })
                if (isHave) {
                    it.checked = true
                } else {
                    it.checked = false
                }
            })
            //console.log("!!!!",data_list.value.rows)
        })
    }

    function selectGX(e, item) {
        if (e == true) {
            item.checked = true
            gxArr.value.push(item)
        } else {
            item.checked = false
            gxArr.value = gxArr.value.filter((element, idx) => item.id !== element.id);
        }
    }

    function removeChooseGX(item) {
        gxArr.value = gxArr.value.filter((element, idx) => item.id !== element.id);
        data_list.value.rows.forEach(function (it, ind) {
            if (it.id == item.id) {
                item.checked = false
            }
        })
    }

    //特色
    const tsArr = ref([])

    function selectTS(e, item) {
        if (e == true) {
            item.checked = true
            tsArr.value.push(item)
        } else {
            item.checked = false
            tsArr.value = tsArr.value.filter((element, idx) => item.value !== element.value);
        }
        choose_yxts(item)
    }

    function removeChooseTS(item) {
        tsArr.value = tsArr.value.filter((element, idx) => item.value !== element.value);
    }

    //
    const queryForm = ref({
        pageSize: 10,
        pageNum: 1
    })

    //
    const yearArr = ref([])

    function chooseAreaId(item) {
        universityForm.value.areaid = item.id
        getStyle(universityForm.value).then(resp => {
            yearArr.value = resp.yearMap[universityForm.value.areaid]
        })
    }

    const specialty_list = ref([])

    function querySpecialtySelect() {
        if (universityForm.value.selstyle != 2 && universityForm.value.selstyle != undefined && checksubject()) {
            subjectSelect(queryForm.value).then(resp => {
                specialty_list.value = resp.data_list
            })
        } else if (universityForm.value.selstyle == 2 && universityForm.value.selstyle != undefined && checksubject2()) {
            subjectSelect(queryForm.value).then(resp => {
                specialty_list.value = resp.data_list
            })
        }

    }

    const subjectArr = ref([])

    function checksubject() {
        if (subjectArr.value.length != 3) {
            proxy.$modal.msgError("必须选3科")
            return false
        } else {
            queryForm.value.selsubject = ""
            subjectArr.value.forEach(function (item, index) {
                queryForm.value.selsubject += (item + ",")
            })
            queryForm.value.selsubject = queryForm.value.selsubject.substr(0, queryForm.value.selsubject.length - 1)
            return true
        }
    }


    function chooseYear(item) {
        universityForm.value.year = item
        queryForm.value.year = item
        getStyle(universityForm.value).then(resp => {
            universityForm.value.selstyle = resp.selstyle
        })
    }


    const subjectArr1 = ref([]);
    const subjectArr2 = ref([]);

    function checksubject2() {
        if (subjectArr1.value.length == 0) {
            proxy.$modal.msgError("物理、历史必选一科")
            return false
        } else if (subjectArr2.value.length != 2) {
            proxy.$modal.msgError("最多选3科")
            return false
        } else {
            subjectArr1.value.forEach(function (item, index) {
                queryForm.value.selsubject += (item + ",")
            })
            subjectArr2.value.forEach(function (item, index) {
                queryForm.value.selsubject += (item + ",")
            })
            return true
        }
    }

    init()

</script>

<style scoped>

</style>