<template> <view> <!-- 弹窗 --> <view class="bgbox" @click="getClose" v-if="type&&type!=2"></view> <view class="bgbox" v-if="type&&type==2"></view> <!-- 录入 --> <block v-if="type==1"> <view class="importbox sfixed" :class="type==1?'imp_bot':''"> <view class="list flexc btn1" @click="getEnter(1)"> <image :src="importimg" class="imgl"></image> <view class="flex1"> <view class="f16 fw5 c16 mb4">导入{{titsta}}</view> <view class="f14 coa">已有{{titsta}}单表格,一键导入</view> </view> <image :src="rimg" class="imgr"></image> </view> <view class="list flexc btn2" @click="getEnter(2)"> <image :src="enterimg" class="imgl"></image> <view class="flex1"> <view class="f16 fw5 c16 mb4">录入{{titsta}}</view> <view class="f14 coa">在线录入{{titsta}}</view> </view> <image :src="rimg" class="imgr"></image> </view> </view> </block> <!-- 科目选择 --> <view class="subject sfixed" v-if="type==2"> <view class="chose_top flexc"> <!-- <view class="topbtn topl" @click="getClose">取消</view> --> <view class="topc">选择科目(可多选)</view> <view class="topbtn topr" @click="getsubConfirm">确定</view> </view> <!-- <view class="chose_box"> <view class="pr list" v-for="(ite,idx) in subjectlist" :key="idx"> <view class="lista flexcc" :class="ite.check ?'act':''" @click="getCheck(idx)" >{{ite.tit}} </view> <view class="listp" @click.stop="btns" v-if="ite.check"> <input placeholder="总分" maxlength="6" v-model="ite.manfen" type="digit"/> </view> </view> </view> --> <!-- 新样式 --> <view class="chose_nbox"> <view class="list" v-for="(ite,idx) in subjectlist" :key="idx"> <view class="listl over" :class="ite.check ?'act':''" @click="getCheck(idx)">{{ite.tit}}</view> <view class="listr flexc"> <view class="ltrtit">总分</view> <input placeholder="请输入总分" :disabled="!ite.check" maxlength="6" v-model="ite.manfen" type="digit" /> </view> </view> <view class="txt"><text>*</text>请先选择科目,再输入总分</view> </view> </view> <!-- 录入成绩 --> <view class="subject sfixed" v-if="type==3"> <view class="chose_top flexc"> <view class="topbtn topl" @click="getClose">取消</view> <view class="topc">添加学生成绩</view> <view class="topbtn topr" @click="getScore">完成</view> </view> <view class="chose_box"> <!-- <view class="lrlist"> <view class="label">学生姓名</view> <input placeholder="请输入学生姓名" v-model='studentinfo.scoreDataName'/> </view> --> <view style="width: 100%;"> <picker range-key="dictLabel" :range="studenlist" :value="stuidx" @change="bindDateChange"> <view class="lrlist"> <view class="label">学生姓名</view> <view class="flex1 f15" :class="studentinfo.scoreDataName?'co16':'coa'">{{studentinfo.scoreDataName||'请选择学生姓名'}}</view> <!-- <input placeholder="请输入学生姓名" v-model='studentinfo.scoreDataName'/> --> <image :src="rimg" class="ilrmgr"></image> </view> </picker> </view> <view class="lrlist" v-for="(ite,idx) in subList" :key="idx"> <view class="label">{{ite.xueke}}成绩</view> <!-- 选择各个科目成绩 --> <block><input type="digit" maxlength="6" placeholder="请输入分数" v-model="ite.score"/></block> <!-- <block><input placeholder="请输入分数" v-model="studentinfo[ite.val]"/></block> --> </view> <!-- params['params[role]'] --> <!-- <view class="lrlist"> <view class="label">成绩总分</view> <input placeholder="请输入分数" v-model="studentinfo.zongfen"/> <textarea auto-height="true" v-module='studentinfo.zongfen' placeholder="请输入点评成绩(选填)" class="input"></textarea> </view> --> </view> </view> <!-- 删除 --> <view class="delbox" v-if="type==4"> <view class="tit">修改信息</view> <view class="tit">删除学生</view> <view class="zhan"></view> <view class="tit close" @click="getClose">取消</view> </view> <!-- 有成绩之后 --> <view class="delbox" v-if="type==6"> <view class="tit" @click="getLook">查看{{titsta}}</view> <view class="tit" @click="getDel">删除{{titsta}}</view> <view class="zhan"></view> <view class="tit close" @click="getClose">取消</view> </view> <!-- 档案 --> <!-- 隐私提示 --> <view class="confirmbox flexdc" v-if="type==5"> <view class="tit flex0">隐私提示</view> <view class="txt">根据学生一对一隐私协议,只能查看自己的成绩</view> <view class="cfbtn flex "> <view class="cbtn btn2" @click="getClose">我知道了</view> <!-- <view class="cbtn btn2" @click="getConfirm">{{confdat.suretxt}}</view> --> </view> </view> <!-- 孩子 --> <view class="delbox" v-if="type==7"> <view class="tit" @click="getChose(ite)" v-for="(ite,idx) in childrens" :key="idx">{{ite.schoolName}}/{{ite.className}}/{{ite.studentName}}</view> <view class="zhan"></view> <view class="tit close" @click="getClose">取消</view> </view> <!-- 防溺水计划 --> <view class="fnsbox" v-if="type==8"> <view class="fns_top"> <image :src="fziconc" @click="getClose"></image> <view>加入防溺水计划</view> </view> <view class="fns_ma"> <picker range-key="className" :range="classlist" :value="classidx" @change="bindDateChangea"> <view class="flexc mibox mb16"> <view class="tit" style="margin-bottom: 0;">选择班级</view> <view class="f15 flex1 txr co16" v-if="classname" >{{classname}}</view> <view class="f15 flex1 txr coa" v-else>请选择班级</view> <image :src="rimg" class="rimg"></image> </view> </picker> <view class="fns_mab"> <image :src="fzicond"></image> <view class="tip">提示:本防溺水计划仅作为辅助提示作用,我们 将做到尽力推送,请确保学生照片信息清晰准确 无误!确认提交前,请先阅读完安全协议信息!</view> </view> <view class="rebtn mb16" style="height: 80rpx;" @click="getJoin">确认</view> <view class="lread" @click="checkflag=!checkflag"> <view class="lreadl"> <image :src="checkimg" v-if="checkflag"></image> <image :src="ncheckimg" v-else></image> </view> <view class="tit">我已阅读并知晓<text @click.stop="handlePrivacy">安全协议</text>信息,选择即为自愿同意</view> </view> </view> </view> <!-- 老师新增班级 --> <view class="subject sfixed" v-if="type==9"> <view class="chose_top flexc"> <view class="topbtn topl" @click="getClose">取消</view> <view class="topc">添加班级</view> <view class="topbtn topr" @click="getClassSure">完成</view> </view> <view class="chose_box"> <view style="width: 100%;"> <picker range-key="className" :range="classlist" :value="classvalidx" @change="bindDateChangeb"> <view class="lrlist"> <view class="label">班级</view> <view class="flex1 f15" :class="classinfo.className?'co16':'coa'">{{classinfo.className||'请选择班级'}}</view> <image :src="rimg" class="ilrmgr"></image> </view> </picker> </view> <view style="width: 100%;"> <picker range-key="dictLabel" :range="subjects" :value="cstuidx" @change="bindDateChangec"> <view class="lrlist"> <view class="label">学科</view> <view class="flex1 f15" :class="classinfo.discipline?'co16':'coa'">{{classinfo.discipline||'请选择学科'}}</view> <image :src="rimg" class="ilrmgr"></image> </view> </picker> </view> </view> </view> </view> </template> <script> //subLists 选择的科目 //subjectlist 字典值 成绩表科目 //nostudenlist 学生信息表 export default{ props:{ type: { type: Number, default () { return 0 } }, studentinfos:{ type: Object, default () { return {} } }, subLists:{}, subjectlists:{ type: Array, default () { return [] } }, titsta:{ type: String, default () { return '成绩' } }, nostudenlist:{ type: Array, default () { return [] } }, childrens:{ type: Array, default () { return [] } }, classlist:{ type: Array, default () { return [] } }, subjects:{ type: Array, default () { return [] } }, classinfos:{ type: Object, default () { return {} } } }, watch:{ subLists(val){ if(val&&val.length>0){ this.subList=val } }, nostudenlist(val){ this.studenlist=val }, subjectlists(val){ this.subjectlist=val }, studentinfos(val){ this.studentinfo=JSON.parse(JSON.stringify(val)) }, classinfos(val){ this.classinfo=JSON.parse(JSON.stringify(val)) }, type(val){ if(val==0){ var newobj={ scoreDataName:'',//姓名 scoreDataNameId:'',//姓名id studentNumber:'' } this.studentinfo=JSON.parse(JSON.stringify(newobj)) var classinfo={className:'',classId:'',discipline:''}; this.classinfo=JSON.parse(JSON.stringify(classinfo)) this.subList=[] }else{ if(this.studentinfos){ this.studentinfo=JSON.parse(JSON.stringify(this.studentinfos)) } if(this.subLists){ this.subList=JSON.parse(JSON.stringify(this.subLists)) } } } }, data(){ return{ importimg:require("@/mine/static/score/import.png"), enterimg:require("@/mine/static/score/enter.png"), rimg:require("@/mine/static/score/rimg.png"), fziconc:require("@/mine/static/score/fziconc.png"), fzicond:require("@/mine/static/score/fzicond.png"), checkimg:require('@/mine/static/score/check.png'), ncheckimg:require('@/mine/static/score/ncheck.png'), checkval:[], subList:[],//选中的课表 stuidx:0, classidx:0, checkflag:false, classname:'', classId:'', stuname:'', studenlist:[], scoreDataName:'', subjectlist:[], studentinfo:{}, classinfo:{ className:'', classId:'', discipline:'', }, classvalidx:0, cstuidx:0, } }, mounted() { this.subjectlist=this.subjectlists }, methods:{ inputChange(e){ var that = this e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null this.$nextTick(() => { that.rechargeMoney= e.target.value }) }, btns(){ }, getClose(){ this.$emit("getClose") }, getEnter(e){ this.$emit("getEnter",e) }, getConfirm(){ this.$emit("getConfirm") }, getLook(){ this.$emit("getLook") }, getDel(){ this.$emit("getDel") }, getChose(e){ this.$emit("getChose",e) }, getJoin(){ this.$emit("getJoin") }, getClassSure(){ this.$emit("getClassSure",this.classinfo) }, bindDateChange(e){ var idx=e.detail.value; // this.scoreDataName=this.studenlist[idx].dictLabel this.studentinfo.scoreDataName=this.studenlist[idx].dictLabel this.studentinfo.scoreDataNameId=this.studenlist[idx].dictValue this.studentinfo.studentNumber=this.studenlist[idx].studentNumber }, bindDateChangea(e){ var idx=e.detail.value; this.classname=this.classlist[idx].className this.classId=this.classlist[idx].classId }, bindDateChangeb(e){ var idx=e.detail.value; this.classinfo.className=this.classlist[idx].className this.classinfo.classId=this.classlist[idx].classId }, bindDateChangec(e){ var idx=e.detail.value; this.classinfo.discipline=this.subjects[idx].dictLabel }, getScore(){ var info=JSON.parse(JSON.stringify(this.subList)); var a=0 Object.keys(info).some((key) => { info[key].score=Number(info[key].score).toFixed(2) if (info[key].score.trim()== '') { a=1; this.$toast("请输入"+info[key].xueke+"成绩") return } }) // console.log(params) if(a==1){ return } this.studentinfo.scoreDataDetailBoList=info; this.$emit('getScore',this.studentinfo) }, getCheck(idx){ var newArr=this.subjectlist; newArr[idx].check=!newArr[idx].check; this.subjectlist=JSON.parse(JSON.stringify(newArr)) }, getsubConfirm(){ var newArr=this.subjectlist; var narr=[]; var mfboList=[]; var column1=[{ type:'index', fixed:true,width:80,align:'center', },{ name: 'scoreDataName', label: '姓名',fixed:true,width:140,emptyString:'--',align:'center' },]; var s={ name: 'operation', type:'operation',label: '操作', renders:[ {name:'编辑',func:'edit'}, // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit {name:'删除',type:'warn',func:"dele"}, ]} var num=0 Object.keys(newArr).some((key) => { if (newArr[key].check) { if(newArr[key].manfen){ var obj={}; // obj.name=newArr[key].val; obj.name=newArr[key].tit; obj.label=newArr[key].tit; obj.manfen=Number(newArr[key].manfen).toFixed(2); obj.sorter=true obj.align='center' obj.width=190 column1.push(obj) var xobj={}; xobj.xueke=newArr[key].tit; xobj.score=''; narr.push(xobj) var nobj={} nobj.xueke=newArr[key].tit; nobj.manfen=Number(newArr[key].manfen).toFixed(2); mfboList.push(nobj) return ; }else{ num=1 var str='请填写'+newArr[key].tit+'总分' this.$toast(str) return true; } } }) // 判断是否填写总分 if(num==1){ return } if(narr.length<1){ this.$toast("请至少选中一门科目") return } column1.push(s) this.subList=JSON.parse(JSON.stringify(narr)) var newobj={ narr:narr, column1:column1, mfboList:mfboList } this.$emit('getsubConfirm',newobj) } } } </script> <style lang="scss" scoped> //录入 .sfixed{position: fixed;bottom: 0;left: 0;right: 0;background: #fff;z-index: 5;} .importbox{transition: all linear 0.3s;transform: translateY(100%);padding:32rpx 32rpx 20rpx;box-sizing: border-box; &.imp_bot{transform: translateY(0);} .list{width: 100%;border-radius: 22rpx;padding: 24rpx 48rpx;margin-bottom: 24rpx;position: relative; &.btn1{background: #EFF4FF;} &.btn2{background: #E7FFF4;} .imgl{width: 74rpx;height: 74rpx;flex: 0 0 auto;margin-right: 24rpx;} .imgr{width: 18rpx;height: 32rpx;flex: 0 0 auto;margin-left: 24rpx;} } } .lrlist{width: 100%;min-height: 100rpx;background: #F2F2F2;border-radius: 10rpx;box-sizing: border-box;display: flex;align-items: center;padding: 0 48rpx;margin-bottom: 20rpx; .label{font-size: 28rpx;font-weight: bold;color: #161616;flex: 0 0 auto;margin-right: 48rpx;} input{font-size: 30rpx;color: #161616;} .input{font-size: 30rpx;color: #161616;} .ilrmgr{width: 12rpx;height: 22rpx;} } // 删除 .delbox{position: fixed;left:0;right: 0;bottom: 0;z-index: 5;background: #ffffff; .tit{font-size: 32rpx;font-weight: 500;color: #000000;height: 100rpx;display: flex;align-items: center;justify-content: center;} .zhan{height: 24rpx;background: #f5f5f5;width: 100%;} .close{color: #4775EA;} } // 科目 .subject{padding: 20rpx 0;max-height: calc(100vh - 200rpx);display: flex;flex-direction: column; .chose_top{margin-bottom: 20rpx;flex: 0 0 auto; .topbtn{font-weight: 500;font-size: 30rpx;color: #666666;width: 108rpx;height: 88rpx;display: flex;align-items: center;justify-content: center; &.topr{color: #4775EA;} } .topc{font-weight: 500;font-size: 30rpx;color: #161616;flex: 1;margin: 0 24rpx;text-align: center;} } .chose_box{padding: 16rpx 32rpx 2rpx;display: flex;flex-wrap: wrap;flex: 1;overflow: auto; .list{margin:0 52rpx 40rpx 0;position: relative; &:nth-child(3n){margin-right: 0;} .lista{ width: 190rpx;height:76rpx;background: #F2F2F2;border-radius: 38rpx;font-size: 30rpx;font-weight: 500; color: #666666; &.act{background: #1f57e6;color: #ffffff;} } .listp{position: absolute;left: 0;top: 90%;padding: 2rpx 2rpx;border-radius: 5px;background-color: #d8e4ff;color: #fff;font-size: 24rpx;height: 50rpx;width: 110rpx;box-sizing: border-box;text-align: center;margin-top: -4rpx; &::before{content: '';position: absolute;bottom: 100%;left: 50%;margin-left: -10rpx;border-width: 6rpx;border-style: solid;border-color: transparent transparent #d8e4ff transparent; } input{font-size: 26rpx;line-height: 40rpx;color: #161616;} } } } // 新样式 .chose_nbox{ padding: 16rpx 32rpx 2rpx;display: flex;flex-wrap: wrap;flex: 1;overflow: auto; .list{display: flex;align-items: center;width: 100%;margin-bottom: 24rpx; .listl{width: 240rpx; height: 76rpx;background: #F2F2F2;border-radius: 10rpx;font-size: 30rpx;font-weight: 500;color: #666666;flex: 0 0 auto;margin-right: 32rpx;text-align: center;line-height: 76rpx;padding: 0 10rpx;box-sizing: border-box; &.act{background: #1f57e6;color: #ffffff;} } .listr{height: 76rpx;width: 280rpx;background: #F2F2F2;border-radius: 10rpx;padding: 0 24rpx;box-sizing: border-box;flex: 1; .ltrtit{flex: 0 0 auto;font-size: 28rpx;font-weight: bold;color: #161616;margin-right: 24rpx;} input{font-size: 30rpx;line-height: 76rpx;color: #161616;} } } .txt{font-size: 26rpx;color: #AAAAAA;display: flex;align-items: flex-start;line-height: 40rpx; text{color: #F7082E;flex: 0 0 auto;} } } } // 隐私 .confirmbox{ position: fixed;left: 82rpx;right: 82rpx;min-height: 300rpx;top: 50%;margin-top: -30%;border-radius: 24rpx;z-index: 10;background-color: #ffffff;padding-top: 30rpx;box-sizing: border-box;text-align: center; .tit{font-size: 34rpx;font-weight: bold; color: #161616;line-height: 48rpx;} .txt{font-size: 32rpx;color: #161616;flex: 1;padding: 28rpx;display: flex;align-items: center;justify-content: center;line-height: 48rpx;} .cfbtn{border-top: 2rpx solid #DDDDDD;flex: 0 0 auto; .cbtn{width: 100%;height: 88rpx;line-height: 88rpx; &.btn1{font-size: 32rpx;font-weight: 500; color: #AAAAAA;position: relative; &::after{position: absolute;right: 1rpx;top: 0;bottom: 0;content: "";width: 2rpx;background-color: #DDDDDD;} } &.btn2{font-size: 32rpx;font-weight: 500;color: #4775EA;} } } } // 防溺水 .fnsbox{position: fixed;left:56rpx;right: 56rpx;min-height: 600rpx;box-sizing: border-box;padding: 32rpx 48rpx;background-color: #ffffff;border-radius: 10rpx;z-index: 10;top:0;top: 50%;transform: translateY(-50%);max-height: calc(100vh - 100rpx);overflow: auto; image{flex: 0 0 auto;} .fns_top{font-size: 30rpx;font-weight: bold;color: #161616;text-align: center;margin-bottom: 28rpx; image{width: 28rpx;height: 28rpx;position: absolute;left: 48rpx;top: 32rpx;} } .fns_ma{ .mibox{padding: 12rpx 0; .tit{font-size: 30rpx;font-weight: 500;color: #161616;flex: 0 0 auto;} .rimg{width: 14rpx;height: 26rpx;margin-left:18rpx;} } .fns_mab{display: flex;flex-wrap: wrap;margin-bottom: 52rpx; image{width: 30rpx;height: 30rpx;margin-right: 14rpx;flex: 0 0 auto;} .tip{flex: 1;font-size: 28rpx;font-weight: 500;color: #161616;} } } .lread{display: flex;align-items: flex-start;justify-content: center; .lreadl{padding-top: 4rpx; image{width: 28rpx;height: 28rpx;margin-right: 14rpx;} } .tit{font-size: 26rpx;font-weight: 500;color: #666666;line-height: 40rpx; text{color: #4775EA;text-decoration: underline;padding: 0 6rpx;} } } } </style>