<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>