zhxy-desk/pages/studentTab/studentTab.vue

<template>
	<view class="" style="">
		<view  style="padding: 32rpx;box-sizing: border-box;"
			class="">
			<view style="font-size: 32rpx;margin-bottom: 32rpx;" class="ui-flex ui-flex-space-between ui-flex-align-center">
				<span class="ui-flex">所有标签	<span @click="showCourse=true" class="ui-ml20 ui-flex">{{ course_text }}<u-icon name="arrow-down"></u-icon></span></span>
				<view v-if="teacher_id" style="background-color: #05CCA1;color: #fff;" class="edit-tag-item-btn " @click="openPop">
					+ 添加标签
				</view>
			</view>
			<view class="log" >
				<view class="" v-if="list.length">
					<u-list @scrolltolower="scrolltolower" height="90vh">
						<view v-for="(item,index) in list" :key="index" class="log-item" @click="xiugaiFenshu(item,index)">
							<view class="log-item-info">
								<view style="color: #999;">
									{{ item.studentTab.tab_name }}
								</view>
								<view>
									{{ item.score>0 ? "+"+item.score : item.score  }}
								</view>
							</view>
							<view class="log-item-info" style="border-bottom: none;">
								<view style="color: #999;">
									{{ item.course.course_name }} - {{ item.parentTab.tab_name }}
								</view>
								<view>
									{{ item.created_at }}
								</view>
							</view>
						</view>
						<u-loadmore status="nomore" v-if="is_bottom"/>
					</u-list>
				</view>
				<view class="" v-else>
					<u-empty mode="data" ></u-empty>
				</view>
			</view>
		</view>
		<uni-data-picker style="background-color: transparent;" ref="picker" placeholder="请选择" popup-title="请选择"
			:localdata="erjiBiaoqianShu" v-model="classes" @change="onchange" @nodeclick="onnodeclick"
			@popupopened="onpopupopened" @popupclosed="onpopupclosed">
		</uni-data-picker>
		<u-picker :show="xianshiFenshuXiala" :columns="fenshuLiebiao" @confirm="querenFenshu" @cancel="xianshiFenshuXiala=false" @close="xianshiFenshuXiala=false"></u-picker>
		<student-edit-tag ref="studentEditTag" @del="delTag()"></student-edit-tag>
		<u-picker :show="showCourse" :columns="courseColumns" keyName="course_name" @cancel="showCourse=false" @confirm="querenKemu"></u-picker>
	</view>

</template>

<script>
	import studentEditTag from "@/pages/studentTab/studentEditTag.vue"
	import Util from "@/common/js/util.js"
	import { getSubjectByStudentId } from "@/common/api/course.js"
	import { getStudentTabTreeByTeacherId,huoquBiaoqianXinxi,geiXueshengTianjiaBiaoqian,xueshengBiaoqianLiebiao } from "@/common/api/tab.js"
	export default {
		components : {
			studentEditTag
		},
		data() {
			return {
				showCourse : false,
				list : [],
				classes: '',
				type : 'center',
				teacher_id : '',
				erjiBiaoqianShu: [],
				suoxuanBiaoqianXinxi : {},
				jiafenLiebiao : [["+1","+2","+3","+4","+5"]],
				koufenLiebiao : [["-1","-2","-3","-4","-5"]],
				fenshuLiebiao : [],
				xianshiFenshuXiala : false,
				xuanzhongBiaoqianId : '',
				biaoqianXinxi : {
					leixing : '',
					fenshu : '',
				},
				stu_school_id : '',
				page : 1,
				is_bottom : false,
				chooseTabIndex : '',
				course_text : '选择科目',
				course_id : '',
				courseColumns : [[]],
				kemuXinxi : {},
			}
		},
		mounted() {
			this.stu_school_id = this.$route.query.stu_school_id		//学生stu_school_id
			if(this.$route.query.course_id){
				this.course_id=this.$route.query.course_id
			}
			this.getSubjectByStudentId()
			this.xueshengBiaoqianLiebiao()
			//如果是老师身份
			if(this.$store.state.teacher_id){
				this.teacher_id=this.$store.state.teacher_id
				this.huoquBiaoqianShu()
			}

		},
		methods: {
			querenKemu(val){
				this.kemuXinxi=val.value[0]
				this.course_text=this.kemuXinxi.course_name
				this.showCourse=false
				this.list=[]
				this.page=1
				this.course_id=this.kemuXinxi.course_id
				this.xueshengBiaoqianLiebiao()
			},
			getSubjectByStudentId(){
				this.$api.sendRequest({
					url: getSubjectByStudentId,
					data : {
						stu_school_id : this.stu_school_id,
					},
					success: res => {
						this.courseColumns=[[]]
						res.data.map(item=>{
							item.course_name=item.course.course_name
							this.courseColumns[0].push(item)
							if(item.course_id==this.course_id){
								this.course_text=item.course_name
							}
						})
					}
				})
			},
			xiugaiFenshu(item,index){
				if(this.teacher_id==item.eval_teacher_id){
					this.$refs.studentEditTag.showTag=true
					this.$refs.studentEditTag.tagInfo=item
					this.$refs.studentEditTag.score= item.score
					this.chooseTabIndex=index
				}
			},
			xueshengBiaoqianLiebiao(){
				this.$api.sendRequest({
					url: xueshengBiaoqianLiebiao,
					data : {
						stu_school_id : this.stu_school_id,
						page : this.page,
						course_id : this.course_id
					},
					success: res => {
						if(res.data.data.length==0){
							this.is_bottom=true
						}else{
							res.data.data.map(item=>{
								this.list.push(item)
							})
							this.page++
						}
					}
				})
			},
			querenFenshu(e){
				this.biaoqianXinxi.fenshu=e.indexs[0]+1
				this.$api.sendRequest({
					url: geiXueshengTianjiaBiaoqian,
					data : {
						teacher_id : this.teacher_id,
						tab_id : this.xuanzhongBiaoqianId,
						stu_school_id : this.stu_school_id,
						type : this.biaoqianXinxi.leixing,
						score : this.biaoqianXinxi.fenshu
					},
					method : 'post',
					success: res => {
						console.log(res,"shis,");
						this.xianshiFenshuXiala=false
						this.page=1
						this.list=[]
						this.xueshengBiaoqianLiebiao()
					}
				})
			},
			openPop() {
				this.$refs.picker.show()
			},
			onnodeclick(e) {

			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed',e);
			},
			onchange(e) {
				console.log(e,"biaoqianxinxi");
				this.suoxuanBiaoqianXinxi=e.detail.value
				this.course_id=e.detail.value[0].value
				this.course_text=e.detail.value[0].text
				this.xuanzhongBiaoqianId=e.detail.value[2].value
				//去后台查找标签信息
				this.chazhaoBiaoqianXinxi()
			},
			chazhaoBiaoqianXinxi(){
				this.$api.sendRequest({
					url: huoquBiaoqianXinxi,
					data : {
						tab_id : this.xuanzhongBiaoqianId
					},
					success: res => {
						console.log(res,"chazhaoshuju");
						if(res.data.type==1){	
							this.fenshuLiebiao=this.jiafenLiebiao
						}else{
							this.fenshuLiebiao=this.koufenLiebiao
						}
						this.biaoqianXinxi.leixing=res.data.type
						this.$refs.picker.hide()
						//选择完成后,弹出加分，扣分选项
						this.xianshiFenshuXiala=true
					}
				})
			},
			delTag(item,index){
				this.list.splice(this.chooseTabIndex,1)
			},
			huoquBiaoqianShu(){
				this.$api.sendRequest({
					url: getStudentTabTreeByTeacherId,
					method : 'post',
					data : {
						teacher_id : this.teacher_id,
					},
					success: res => {
						console.log(res,"shu");
						this.dataTree=res.data
						res.data.map((item)=>{
							let obj={
								text: item.course_name,
								value: item.course_id,
								children:[],
								course_id : item.course_id,
							}
							item.tabLv2.map(item2=>{
								let children1={
									text: item2.tab_name,
									value: item2.tab_id,
									tab_id : item2.tab_id,
									children :[],
								}
								if(item2.tabLv3){
									item2.tabLv3.map(item3=>{
										let children2={
											text: item3.tab_name,
											value: item3.tab_id,
											tab_id : item3.tab_id,
										}
										children1.children.push(children2)
									})
								}
								obj.children.push(children1)
							})
							this.erjiBiaoqianShu.push(obj)
						})
					}
				})
			},
			scrolltolower(){
				if(this.is_bottom==true) return
				this.xueshengBiaoqianLiebiao()
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.uni-data-tree-input {
		display: none;
	}

	.edit-tag {
	}

	.edit-tag-item-btn {
		background: rgba(5, 204, 161, 0.10);
		border-radius: 14.33px;
		padding: 4rpx 20rpx;
		width: fit-content;
	}
	.edit-tag-item {
		background: rgba(5, 204, 161, 0.10);
		border-radius: 14.33px;
		padding: 4rpx 20rpx;
		margin-right: 32rpx;
		margin-bottom: 32rpx;
		position: relative;
		.edit-tag-item-icon {
			position: absolute;
			width: 40rpx;
			border-radius: 50%;
			height: 40rpx;
			text-align: center;
			line-height: 40rpx;
			background-color: rgba(66, 185, 131, 1);
			right: -20rpx;
			top: -20rpx;
		}
	}

	.edit-tag-item-add {}
	
	.log {
		box-sizing: border-box;
		width: 100%;
		height: 60vh;
		.log-item {
			padding: 16rpx;
			box-sizing: border-box;
			margin-bottom: 28rpx;
			width: 100%;
			background: #ffffff;
			border-radius: 5.33px;
			box-shadow: 0px 0px 6.67px 0px rgba(147, 147, 147, 0.10);
	
			.log-item-info {
				width: 100%;
				padding: 20rpx 0;
				border-bottom: 1px solid #f2f2f2;
				display: flex;
				justify-content: space-between;
			}
	
			.log-item-content {
				width: 100%;
				border-bottom: 1px solid #f2f2f2;
				font-size: 20rpx;
				padding-bottom: 20rpx;
				display: flex;
				align-items: center;
			}
	
			.log-item-content-left {
				display: flex;
				align-items: center;
				flex: 1;
	
				.log-item-content-left-text {
					margin-left: 32rpx;
				}
			}
	
			.log-item-content-right {
				display: flex;
				align-items: center;
			}
	
			.log-item-content-right-color {
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
	
		}
	}
</style>

<style lang="scss">
	/deep/ .selected-item-active{
		border-bottom: 2px solid #05cca1 !important;
	}
	/deep/ .check{
		border: 2px solid #05cca1;
		border-left: 0;
		border-top:0
	}
</style>