zhxy-desk/pages/studentRanked/components/mark-score.vue

<template>
	<el-dialog :visible.sync="show" :title="`标记点评给 ${title}`" custom-class="content"
		style="background-color: #00142f63;backdrop-filter: blur(4px);" width="600px">
		<view class="ui-flex-column">
			<!-- <view class="ui-p" style="background: #022c5a80;border-bottom: 2px solid #051d37;">
                <text class="txt-white"> </text>
            </view> -->
			<view class="ui-flex-row">
				<view class="ui-flex-1 ui-flex-align-center ui-flex-row">
					<view class="ui-pl20">
						<view class="ui-flex-row ui-border-radius-20" @click="$refs.markScoreList.open()"
							style="background-color: #1C63A8;padding: 4px 8px;">
							<text class="txt-white f26 ui-mr10">点评记录</text>
							<u-icon color="#fff" name="list-dot"></u-icon>
						</view>
					</view>
				</view>
				<view style="width: 220px;" class="ui-p">
					<u-subsection :list="['表扬', '需改进']" mode="button" bgColor="#1b63a8" inactiveColor="#aec3ee"
						:current="curIndex" @change="change"></u-subsection>
				</view>
				<view class="ui-flex-1"></view>
			</view>
			<view style="background: #0000003b;">
				<u-tabs :list="viewCourseList" :activeStyle="{
                    color: '#fff',
                    fontWeight: 'bold',
                    transform: 'scale(1.2)'
                }" :inactiveStyle="{
                    color: '#959595',
                    transform: 'scale(1)'
                }" @change="changeCourse"></u-tabs>
			</view>

			<scroll-view scroll-y style="height: 240px;" show-scrollbar>
				<view class="ui-p">
                    <u-grid :col="6" :border="false" style="align-items: baseline;">
                    	<u-grid-item @click="toActive(index,item)" v-for="(item, index) in list" :key="index" class="ui-p"
                            v-if="course_id ? item.course_id == course_id : (course_name ? item.course_name == course_name : true)"
                            :bgColor="activeId == index ? '#ffffff42' : '#0000'"
                    		:class="{
                                'no-select' : activeId >= 0 && activeId != index,
                                'item-active' : activeId == index
                            }">
                    		<u--image :src="item.img" width="46px" height="46px"></u--image>
                    		<view class="ui-pt10 text-center">
                    			<text class="grid-text txt-white f28">{{item.tab_name}}</text>
                    		</view>
                    		<!-- <u-badge v-if="activeId == index" absolute :offset="[0,10]" :value="score"></u-badge> -->
                    	</u-grid-item>
                    </u-grid>
                </view>
			</scroll-view>

			<view class="ui-p ui-flex ui-flex-center" style="background-color: #1b63a870;">
				<view class="ui-flex" style="width: 250px;">
					<!-- <u-button size="small" plain :text="score ? '取消选择' : '关闭点评'" @click="cancelAct"
						style="background-color: #0d4980;" class="ui-mr10"></u-button> -->
					<u-button size="small" :disabled="!score" type="primary" @click="submit(1)" text="提交点评 +1"></u-button>
					<u-button class="ui-ml10" size="small" :disabled="!score" type="primary" @click="submit(3)" text="提交点评 +3"></u-button>
				</view>
			</view>
		</view>

		<markScoreList ref="markScoreList" :stuList="stuList"></markScoreList>
	</el-dialog>
</template>

<script>
    import markScoreList from './mark-score-list.vue'
    // 标签缓存
    let tabList = {};
    
	export default {
		props: {
			stuList: {
				type: Array,
				default: () => []
			},
		},
        components : {
            markScoreList
        },
		data() {
			return {
                title : '',
				show: false,
                list : [],
				curIndex: 0,
				type: 0,
				score: 0, //加扣分分数
				activeId: -1, //选中项
                course_id : 0,
                course_name : '',
				itemTab: '',
				courseList: [],
			}
		},
		watch: {
			show() {
				if (!this.show) {
					this.activeId = -1;
					this.score = 0;
					this.$emit('close')
				}
			}
		},
        computed : {
            viewCourseList(){
                let custom = [];
                this.list.forEach(item => {
                    if(item.course_id == 0 && item.course_name){
                        if(!custom.includes(item.course_name)){
                            custom.push(item.course_name)
                        }
                    }
                });
                
                console.log(custom)
                
                
                return [
                    {
                        id : 0,
                        name : '全部'
                    },
                    ...this.courseList,
                    ...custom.map(item => {
                        return {
                            id : 0,
                            name : item
                        }
                    })
                ]
            }
        },
		methods: {
			change(e){
				this.curIndex = e
                this.getTipList();
			},
            changeCourse(item){
                this.course_id = item.id;
                this.course_name = item.name == '全部' ? '' : item.name;
            },
            getTipList() {
                if(tabList[this.curIndex]){
                    this.list = tabList[this.curIndex];
                    return;
                }
                this.$api.sendRequest({
                    url: `/mobile/studentTab/getStudentTabs`,
                    method: "post",
                    data: {
                        teacher_id: this.$store.state.teacher_id,
                        type: this.curIndex
                    },
                    success: res => {
                        tabList[this.curIndex] = res.data;
                        this.list = res.data
                    }
                })
            },
            getAllCourse(){
                if(this.courseList.length){
                    return;
                }
                this.$api.sendRequest({
                	url: '/mobile/systemBaseData/getAllCourse',
                	method: "post",
                	success: res => {
                		// console.log(res);
                        this.courseList = res.data.map(item => {
                            return {
                                name : item.course_name,
                                id : item.id
                            }
                        })
                	}
                })
            },
			// 外部访问使用
			open(title) {
                this.title = title;
				this.show = true;
                this.getTipList();
                this.getAllCourse();
			},
			toActive(index, item) {
				// 是否旧的选中项
				let always = this.activeId >= 0 && this.activeId == index;
				this.activeId = index;
				if (always) {
					this.score++;
				} else {
					this.score = 1;
				}
				this.itemTab = item
			},
			cancelAct() {
				if (this.score) {
					this.activeId = -1;
					this.score = 0;
				} else {
					this.show = false;
					this.$emit('close', false)
				}
			},
			submit(scoreValue) {    //修改成固定给分值
                this.score = scoreValue;
				let obj = {
					teacher_id: this.$store.state.teacher_id,
					stu_school_ids: this.stuList,
					tab_id: this.itemTab.tab_id,
					score: this.score
				}
				this.$api.sendRequest({
					url: '/mobile/studentTab/geiXueshengTianjiaBiaoqian',
					method: "post",
					data: obj,
					success: res => {
						if (res.code == 200) {
							uni.showToast({
								title: res.msg,
								'icon': 'none',
							});
							this.show = false;
							this.activeId = -1;
							this.score = 0;
							this.$emit('close', res.data.batch_id)
						}
					}
				})
			},

		}
	}
</script>

<style>
	/deep/ .content {
		background-image: url('https://zhxy.obs.cn-hz1.ctyun.cn:443/static/desk_bg/class_bj.jpg');
		background-size: auto;
		border: 1px solid #0d5396;
	}

	/deep/ .el-dialog__header {
		background: #022c5a80;
		border-bottom: 2px solid #051d37;
	}

	/deep/ .el-dialog__title {
		color: #fff;
	}

	/deep/ .el-dialog__body {
		padding: 0;
	}
    .item-active{
        background-color: #ffffff42;
        border-radius: 10px;
    }
	.no-select {
		opacity: .5;
	}
</style>