zhxy-desk/pages/studentRanked/studentRankedChange.vue

<template>

    <view class="">
        <view v-if="reActive == 1" @click="openPop"
            style="box-sizing: border-box;padding: 0 32rpx;margin-bottom: 32rpx;" class="btn-roll">
            排位调整
        </view>

        
        <view class="">
            <view class="ranked">
                <view v-for="(item,index) in selfClassList" :key="index" class="ranked-item">
                    <view @click="reActive == 1 ?itemClick(item1):Comment(item1)" v-for="(item1,index1) in item.nodes"
                        :key="item1.key" class="ranked-item-tr">
                        <!-- <image style="width: 90rpx;height: 90rpx;" src="@/static/image/female.png" mode=""></image> -->
                        <view :class="active.indexOf(item1.key) == -1 ? '' :'active'" style="width: 90%;text-align: center;background-color: #fff;
					border-radius: 5px;">
                            {{item1.title}} {{item1.key}}
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <uni-popup ref="popup" background-color="transparent">
            <view style="padding: 0;" class="popup-content"
                :class="{ 'popup-height': type === 'left' || type === 'right' }">
                <StuDraggable @change='change' :list.sync='selfClassList' />
            </view>
        </uni-popup>
        
    </view>
</template>

<script>
    import topBtn from '@/components/topBtn.vue'
    import StuDraggable from './stuDraggable.vue'
    import Tag from './tag.vue'
    import {
        getStuSchoolIdByStuClassId
    } from "@/common/api/stu.js"
    export default {
        components: {
            topBtn,
            StuDraggable,
            Tag
        },
        data() {
            return {
                show_classes: false,
                id: 1,
                info: {},
                type: 'center',
                btnList: ['学生评分', '坐位调整'],
                reActive: 0,
                active: [],
                activeList: [],
                tagList: [],
                list: [],
                teachList: [],
                chooseClassName: '',
                chooseClassId: '',
                selfClassList: [],
                notSelfClass: true,
            }
        },
        mounted() {
            this.id = this.$store.state.teacherInfo.selfclass.id

            this.getClassroomList();
            this.reActive = 1;
        },
        methods: {
            loginOut() {
                uni.setStorageSync("token", '')
                uni.navigateTo({
                    url: "/pages/login/login"
                })
            },
            doChooseClass(val) {
                console.log(val, "val");
                this.chooseClassId = val.value[0].id
                this.chooseClassName = val.value[0].class_name
                this.getStudent()
                this.show_classes = false
            },
            getClassroomList() {
                let teacher_id = this.$store.state.teacherInfo.id
                this.$api.sendRequest({
                    url: `/mobile/teacher/teachClasses`,
                    method: "post",
                    data: {
                        teacher_id: teacher_id
                    },
                    success: res => {
                        this.teachList.push(res.data)
                        console.log(this.teachList);
                    }
                })

            },
            itemClick(item) {
                let val = this.active.indexOf(item.key)
                if (val == -1) {
                    this.active.push(item.key)
                    this.activeList.push(item)
                } else {
                    this.active.splice(val, 1)
                    this.activeList.splice(val, 1)
                }
                if (this.active.length == 2) {

                    this.selfClassList.forEach((item2, index2) => {
                        item2.nodes.forEach((item1, index1) => {
                            let indexVal = this.active.indexOf(item1.key)
                            if (indexVal != -1) {

                                this.activeList.forEach(item3 => {
                                    if (item3.key != item1.key) {
                                        item2.nodes.splice(index1, 1, item3)
                                    }
                                })

                            }
                        })
                    })
                    this.activeList = []
                    this.active = []
                    let info = {
                        classroom_id: this.id,
                        seat_list: this.selfClassList
                    }
                    // return console.log(info);
                    this.$api.sendRequest({
                        url: `/mobile/saveSeat`,
                        method: "PUT",
                        data: info,
                        success: res => {
                            uni.showToast({
                                title: res.msg,

                            })

                        }
                    })
                }
            },
            openPop() {
                if (!this.notSelfClass) {
                    this.type = 'center'
                    this.$refs.popup.open('center')
                }
            },
            Comment(item) {
                console.log(item, "sgism");
                //item的id是studentClass的id,需要转换成stu_school_id传到

                this.$api.sendRequest({
                    url: getStuSchoolIdByStuClassId,
                    data: {
                        stu_class_id: item.id
                    },
                    success: res => {
                        console.log(res, "resrrrrr");


                        let stu_school_id = res.data.stu_school_id
                        uni.navigateTo({
                            url: "/pages/studentTab/studentTab?stu_school_id=" + stu_school_id
                        })
                    }
                })
            },
            popChange(val) {
                if (!val.show) {
                    this.tagList.forEach(item => {
                        item.show = false
                    })
                }
            },
            getStudent() {
                this.$api.sendRequest({
                    url: `/mobile/getSeat?classroom_id=${this.chooseClassId}`,
                    success: res => {
                        this.list = res.data

                    }
                })
            },
            change(list) {
                console.log("组件传的数据", list);
                this.selfClassList = list
                let info = {
                    classroom_id: this.id,
                    seat_list: this.selfClassList
                }
                // return console.log(info);
                this.$api.sendRequest({
                    url: `/mobile/saveSeat`,
                    method: "PUT",
                    data: info,
                    success: res => {
                        uni.showToast({
                            title: res.msg,
                        })
                    }
                })
            },
            getTagList() {
                this.$api.sendRequest({
                    url: `/mobile/student/tabs?id=${this.info.id}`,
                    success: res => {
                        res.data.forEach(item => {
                            item.show = false
                        })
                        this.tagList = res.data
                    }
                })
            },
            CommentOn(item, score) {

                let info = {
                    id: this.info.id,
                    tab_id: item.tab_id,
                    score: score
                }
                this.$api.sendRequest({
                    url: `/mobile/student/eval`,
                    data: info,
                    success: res => {
                        uni.showToast({
                            title: `${this.info.title} ${item.tab_name} ${item.type == 1 ? '+':'-'} ${score}分`,
                            icon: 'none'
                        })

                        this.$refs.CommentPopup.close()
                    }
                })
            }

        },
        watch: {
            reActive(newVal) {
                this.active = []
                this.activeList = []
                console.log(newVal);
                if (newVal == 1) {
                    console.log(this.$store.state.teacherInfo.selfclass, "this.$store.state.teacherInfo.selfclass");
                    if (this.$store.state.teacherInfo.selfclass) {
                        let classroom_id = this.$store.state.teacherInfo.selfclass.id
                        // let classroom_id=1
                        this.$api.sendRequest({
                            url: `/mobile/getSeat?classroom_id=${classroom_id}`,
                            success: res => {
                                console.log(res.data);
                                this.selfClassList = res.data/* .reverse().map(item => {
                                    item.nodes = item.nodes.reverse().filter(el => {
                                        return !!el.id;
                                    })
                                    return item;
                                }) */
                                this.notSelfClass = false
                            }
                        })
                    } else {
                        this.selfClassList = []
                        uni.showToast({
                            icon: "none",
                            title: "您不是班主任"
                        })
                    }
                }
            }
        },

    }
</script>

<style lang="scss" scoped>
    .form-btn-content {
        width: 30%;
        background: #05cca1;
        height: 72rpx;
        border-radius: 36rpx;
        color: #fff;
        font-size: 32rpx;
        text-align: center;
        line-height: 72rpx;
        margin: 0 auto;
        position: fixed;
        bottom: 40rpx;
        left: 35%;

    }

    .platform {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        height: 30rpx;
        margin-top: 60rpx;

        .platform-color {
            position: absolute;
            left: 0;
            top: 0;
            height: 60rpx;
            background-color: rgba(5, 204, 161, 1);
            width: 10rpx;
        }

        .platform-text {
            text-align: center;
            width: 60%;
            margin-top: 40rpx;

        }
    }

    .pop-title {
        border-bottom: 1px solid #f2f2f2;
        font-size: 36rpx;
        padding-bottom: 20rpx;
        display: flex;
        align-items: center;
    }

    .popup-content {
        border-radius: 10px;
        box-sizing: border-box;
        padding: 0 32rpx;
    }

    .btn-roll {
        background-color: #fff;
        border-radius: 25rpx;
        width: 190rpx;
        color: #666;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        margin-left: 32rpx;
    }

    .ranked {
        width: 100%;

        text-align: center;
        font-size: 10px;
        box-sizing: border-box;
        display: flex;

        .ranked-item {
            flex: 1;
            box-sizing: border-box;



            .ranked-item-tr {
                margin-bottom: 16rpx;
                border-radius: 5px;
                box-sizing: border-box;
                width: 100%;

                display: flex;
                justify-content: center;
            }

            .ranked-item-tr:last-child {
                margin-bottom: 0;
            }

            .active {
                border: 1px solid #ccc !important;
                background-color: rgba(5, 204, 161, 1) !important;
                color: #fff !important;
                box-sizing: border-box;
            }
        }

        .ranked-item:nth-child(2n) {
            border-right: 1px solid #ccc;
        }

        .ranked-item:last-child {
            border-right: 0;
        }

    }

    .ranked-radio {
        width: 100px;
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        top: 0rpx;

        border-bottom: 3px solid rgba(5, 204, 161, 1);
        border-radius: 50% 50% 0 0;
    }

    .visit-item {
        display: flex;
        align-items: center;

        .visit-item-left {
            width: 120rpx;
            color: #666;
        }
    }
</style>