v3-lab-xcx/pages_student/accessApplication/chooseALaboratory.vue

<!-- 选择实验室 -->
<template>
    <view id="chooseALaboratory">
        <view class="picker-box">
            <picker @change="facultyChange" :value="facultyIndex" :range="faculty">
                <view class="picker-min-box">
                    <view class="left-box">请选择院系：</view>
                    <view>{{faculty[facultyIndex]}}</view>
                    <img src="@/images/basicsModules/icon_04.png">
                </view>
            </picker>
        </view>
        <view class="picker-box">
            <picker @change="buildingChange" :value="buildingIndex" :range="building">
                <view class="picker-min-box">
                    <view class="left-box">请选择实验楼：</view>
                    <view>{{building[buildingIndex]}}</view>
                    <img src="@/images/basicsModules/icon_04.png">
                </view>
            </picker>
        </view>
        <view class="for-max-box">
            <view class="for-box" v-for="(item,index) in dataList" :key="index" @click="goAccessApplication(item)">
                <view class="left-box">
                    <view>{{item.name}}</view>
                    <view>{{item.deptName}}{{item.buildName}}{{item.room}}</view>
                </view>
                <view class="right-p" :class="{'colorA':!item.isApply}">{{item.isApply?'已申请':'立即申请'}}</view>
                <img v-if="!item.isApply" src="@/images/basicsModules/icon_04.png">
            </view>
            <view class="bottom-null-view">暂无更多数据</view>
        </view>
    </view>
</template>

<script>
    import { departmentsList,buildingList,mySecuritySubjectList,subjectMaterialList } from '@/api/apiDemo/index.js'
    export default {
        data() {
            return {
                //空数据展示
                nullType:false,
                faculty:['暂无院系数据'],
                facultyList:[],
                facultyIndex:0,
                building:['暂无实验楼数据'],
                buildingList:[],
                buildingIndex:0,
                dataList:[],
            }
        },
        onLoad() {

        },
        onShow(){
            this.getDepartmentsList();
        },
        methods: {

            //查询院系
            async getDepartmentsList() {
                let self = this;
                const {data} = await departmentsList()
                if(data.code==200){
                    if (data.data[0]){
                        let list = [];
                        for(let i=0;i<data.data.length;i++){
                            list.push(data.data[i].deptName);
                        }
                        this.faculty = list;
                        this.facultyIndex = 0;
                        this.facultyList = data.data;
                        this.getDuildingList(this.facultyList[0].deptId)
                    }else{
                        this.faculty = ['暂无院系数据'];
                        this.facultyIndex = 0;
                        this.facultyList = [];
                        this.building = ['暂无实验楼数据'];
                        this.buildingIndex = 0;
                        this.buildingList = [];
                        this.dataList=[];
                    }
                }
            },
            //查询楼栋
            async getDuildingList(deptId) {
                let self = this;
                let obj = {deptId:deptId}
                const {data} = await buildingList(obj);
                if(data.code==200){
                    if (data.data[0]){
                        let list = [];
                        for(let i=0;i<data.data.length;i++){
                            list.push(data.data[i].deptName);
                        }
                        this.building = list;
                        this.buildingIndex = 0;
                        this.buildingList = data.data;
                        this.mySecuritySubjectList(this.buildingList[0].deptId);
                    }else{
                        this.building = ['暂无实验楼数据'];
                        this.buildingIndex = 0;
                        this.buildingList = [];
                        this.dataList=[];
                    }
                }
            },
            //查询列表
            async mySecuritySubjectList(deptId) {
                let self = this;
                let obj = {deptId:deptId}
                const {data} = await mySecuritySubjectList(obj);
                if(data.code==200){
                    if(data.data[0]){
                        this.dataList = data.data;
                    }else{
                        this.dataList=[];
                    }
                }
            },
            facultyChange(e){
                this.facultyIndex = e.target.value;
                this.getDuildingList(this.facultyList[this.facultyIndex].deptId)
            },
            buildingChange(e){
                this.buildingIndex = e.target.value;
                this.mySecuritySubjectList(this.buildingList[this.buildingIndex].deptId)
            },
            goAccessApplication(item){
                if(item.isApply){
                    //已申请
					return
                    item.infoId = item.appId;
                    uni.navigateTo({
                        url:'/pages_student/accessApplication/applicationDetails?item='+encodeURIComponent(JSON.stringify(item))
                    })
                }else{
                    //未申请
					this.subjectMaterialList(item);
                }
            },
			//查询实验室下的安全准入资格材料表
			async subjectMaterialList(item){
			    let obj = {
			        subjectId:item.id
			    }
			    const {data} = await subjectMaterialList(obj)
			    if(data.code == 200){
					if(data.data[0]){
						item.buildId = this.buildingList[this.buildingIndex].deptId;
						item.deptId = this.facultyList[this.facultyIndex].deptId;
						uni.navigateTo({
						    url:'/pages_student/accessApplication/accessApplication?item='+encodeURIComponent(JSON.stringify(item))+'&list='+encodeURIComponent(JSON.stringify(data.data))
						})
					}else{
						uni.showToast({
							title: '该实验室未配置准入资格,无法申请~',
							icon:"none",
							mask:true,
							duration: 2000
						});
					}
			    }
			},

        }
    }
</script>

<style lang="stylus" scoped>
    #chooseALaboratory{
        height:100%;
        width:100%;
        display flex
        flex-direction column
        .picker-box:nth-child(1){
            border-bottom:1rpx solid #e0e0e0;
        }
        .picker-box:nth-child(2){
            margin-bottom:40rpx;
        }
        .picker-box{
            height:80rpx;
            background: #fff
            .picker-min-box{
                display flex;
                view:nth-child(1){
                    flex:1;
                    line-height 80rpx
                    color:#333
                    margin-left:20rpx;
                }
                view:nth-child(2){
                    line-height 80rpx
                    color:#CCCCCC
                }
                img{
                    width:12rpx;
                    height:24rpx;
                    margin:28rpx 20rpx 0 28rpx;
                }
            }
        }
        .for-max-box{
            flex:1;
            overflow-y scroll
            .bottom-null-view{
                font-size:26rpx;
                color:#999;
                text-align: center
                line-height:80rpx;
            }
            .for-box{
                background #fff
                display flex
                border-bottom:1rpx solid #e0e0e0;
                .left-box{
                    flex:1;
                    margin-left:20rpx;
                    view:nth-child(1){
                        line-height: 28rpx;
                        font-size: 28rpx;
                        color: #333333;
                        margin:20rpx 0 0 0;
                    }
                    view:nth-child(2){
                        line-height: 24rpx;
                        font-size: 24rpx;
                        color: #999;
                        margin:25rpx 0 0 0;
                    }
                }
                .right-p{
                    line-height:120rpx;
                    font-size:24;
                    color: #999999;
					margin-right:52rpx;
                }
                img{
                    width:12rpx;
                    height:24rpx;
                    margin:48rpx 20rpx 48rpx 20rpx;
                }
                .colorA{
                    color: #0183FA;
					margin-right:0;
                }
            }
        }
    }
</style>