zhihuixiaoyuan2-ui/mine/pages/release/details.vue

<template>
	<view class="detail">
		<image :src="bgimg" class="bgimg"></image>
		<view class="dbox">
			
			<view class="top">
				<view class="tit">{{datainfo.scoreTitle||''}}</view>
				<!-- <view class="txt">学生姓名：周小亚</view> -->
				<view class="txt">考试类型：{{kaType(datainfo.scoreType,kaoshilist)||''}}</view>
				<view class="txt">学生班级：{{datainfo.scoreClassName||''}}</view>
				<view class="txt">考试时间：{{datainfo.scoreTime||''}}</view>
				<!-- <view class="txt">发布时间：{{datainfo.scoreTitle}}</view> -->
				<!-- <image :src="shareimg" class="shareimg"></image> -->
			</view>
			<!-- 家长 -->
			<block v-if="roles=='parents'">
				<block v-if="scorlist&&scorlist.length">
					<view class="dmain mb10" style="flex: 0 0 auto;overflow: hidden;"  v-for="(ite,idx) in scorlist" :key='idx'>
						<view class="tit mb20">成绩详情 </view>
							<view class="list">
								<view class="label">姓名</view>
								<view class="rtxt rtxt1">{{ite.scoreDataName}}</view>
							</view>
							<block v-if="ite.scoreDataDetailVoList&&ite.scoreDataDetailVoList.length">
								<view class="list" v-for="(site,sidx) in ite.scoreDataDetailVoList" :key="sidx">
									<view class="label">{{site.xueke}}</view>
									<view class="rtxt rtxt1">{{site.score}}<text>/{{site.scoreSort}}</text></view>
								</view>
							</block>
							
							<view class="list">
								<view class="label">总分</view>
								<view class="rtxt rtxt1">{{ite.zongfen}}</view>
							</view>
							<view class="list">
								<view class="label">排名</view>
								<view class="rtxt rtxt2">{{ite.scoreSort}}</view>
							</view>
						<water-mark :info="markinfo" v-if="watermarkflag=='true'"></water-mark> 
					</view>
				</block>
				<view class="dmain" v-else>
					<view class="nodata">
						<image :src="noiconpimg"></image>
						<view>暂无相关考试成绩</view>
					</view>
				</view>
			
			</block>
			<!-- 老师 -->
			<view class="dmain flex1" style="overflow: hidden;" v-else>
				<view class="flex0 flexcj mb20">
					<view class="tit">成绩详情</view>
					<view @click="getDel" class="delbox" v-if="checkPermi(['score:data:remove'])">删除</view>
					<!-- <view class="search flexc mb28">
						<image :src="searchimg" class="img"></image>
						<input placeholder="输入学生姓名进行搜索" v-model="name" class="flex1 input"/>
						<view class="btn" @click="getSearch">搜索</view>
					</view> -->
					<!-- 表格 -->
					
				</view>
				<!-- :pullUpLoading="pullUpLoading"
				:isShowLoadMore="true" -->
				<view class="flex1" style="overflow: hidden;position: relative;">
					<zb-table
				      :show-header="true"
				      :columns="columns"
				      :stripe="true"
					 
				      :fit="false"
				      @rowClick="rowClick"
				      @toggleRowSelection="toggleRowSelection"
				      @toggleAllSelection="toggleAllSelection"
				      :border="border"
				      @edit="buttonEdit"
				      @dele="dele"
				      :data="scorlist"></zb-table>
						 <water-mark :info="markinfo" v-if="watermarkflag=='true'"></water-mark> 
				</view>
			</view>
			<view class="fbtns" @click="getTotal" v-if="datainfo.scoreType!=4&&roles!='parents'">
				<image :src="total"></image>
				查看成绩统计分析
			</view>
			<!-- 年级统计 -->
			<view style="height: 120rpx;flex:0 0 auto" v-if="datainfo.scoreType!=4&&roles!='parents'"></view>
		</view>
		
		<!-- 水印 -->
		
	</view>
</template>

<script>
	// import tabSearch from "@/components/toptab/search.vue"；
	import {getDictionaryFn,getconfigKeyFn} from '@/api/mine/register.js'
	import zbTable from "@/mine/components/zb-table/zb-tables.vue"
	import waterMark from '@/mine/components/popup/watermark.vue' //
	import { selectDictValue } from '@/utils/common.js';
	import {getscoreDetFn,getscoreListFn,getscoreDelFn} from "@/api/mine/score.js"
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	export default {
		data() {
			return {
				bgimg: require("@/mine/static/score/scbg.png"),
				shareimg: require("@/mine/static/score/share.png"),
				searchimg: require("@/mine/static/score/search.png"),
				total: require("@/mine/static/score/total.png"),
				noiconpimg:require("@/static/images/noiconp.png"),
				name:'',
				flag1:true,
				columns:[],
				num:0,
				scoreId:'',
				datainfo:{},
				sublist:[],
				scorlist:[],
				allscorlist:[],
				kaoshilist:[],
				roles:this.$store.state.user.choseroles,
				markinfo:this.$store.state.user.phonenumber,
				watermarkflag:'false',
				border:false,
			}	
		},
		components:{zbTable,waterMark},
		onLoad: function(e) {
			if(e&&e.id){
				this.scoreId=e.id;
				this.getDataFn();
				this.init()
			}
			uni.removeStorageSync('scorecount')
		},
		onUnload(){
			uni.removeStorageSync('scorecount')
		},
		methods: {
			checkPermi, checkRole,
			getTotal(){
				var obj={
					scoreTime:this.datainfo.scoreTime,
					scoreType:this.datainfo.scoreType,
					scoreClassName:this.datainfo.scoreClassName,
					scoreClassId:this.datainfo.scoreClassId,
					scoreId:this.scoreId,
				}
				uni.setStorageSync('scorecount',JSON.stringify(obj))
				this.$tab.navigateTo('/mine/pages/release/count')
			},
			kaType(data, list) {
				return selectDictValue(list, data);
			},
			init(){
				// 考试类型
				getDictionaryFn('kaoshi').then(res=>{
					if(res.code==200){
						this.kaoshilist = res.data.map(v => {
							return {
								dictLabel: v.dictLabel,
								dictValue:v.dictValue,
							}
						})
				
					}
				})
				// 参数设置
				getconfigKeyFn('sys.index.scoreWatermark').then(res=>{
					if(res.code==200){
						this.watermarkflag=res.msg
					}
				})
				// 学科
				// getDictionaryFn('chjbxk').then(res=>{
				// 	if(res.code==200){
				// 		this.subjectlist = res.data.map(v => {
				// 			return {
				// 				tit: v.dictLabel,
				// 				val:v.dictValue,
				// 				check:false
				// 			}
				// 		})
				// 	}
				// })
			},
			getColumns(info){
				var newArr=info;
				var narr=[];
				var column1=[{ type:'index',label: '序号', fixed:true,width:80,align:'center', },{ name: 'scoreDataName', label: '姓名',fixed:true,width:140,emptyString:'--',align:'center' }];
				var narr=[{ name: 'zongfen', label: '总分',align:'center',width:112 },
    { name: 'scoreSort', label: '排名',align:'center',width:112 }]
				Object.keys(newArr).some((key) => {
					var obj={};
					obj.name=newArr[key].xueke;
					obj.label=newArr[key].xueke;
					obj.manfen=newArr[key].manfen;
					obj.sorter=true;
					obj.align='center';
					obj.width=190;
					obj.paddingRight=20;
					obj.show='true'
					column1.push(obj)
				})
				column1=column1.concat(narr)
				this.columns=JSON.parse(JSON.stringify(column1))
			},
			getDataFn(){
				var roles=this.$store.state.user.choseroles;
				var obj={
					role:roles
				}
				var params={
					scoreId:this.scoreId,
					params:obj
				}
				getscoreDetFn(params).then(res=>{
					if(res.code==200){
						this.datainfo=res.data;
						// 表头
						if(res.data.scoreDataMfVoList&&res.data.scoreDataMfVoList.length){
							this.getColumns(res.data.scoreDataMfVoList)
						}
						// 数据
						if(res.data.scoreDataStudentVoList&&res.data.scoreDataStudentVoList.length){
							if(roles=='parents'){
								this.scorlist=res.data.scoreDataStudentVoList;
							}else{
								this.scorlist=this.gethandleTable(res.data.scoreDataStudentVoList);
							}
						}
						// console.log(this.column1)
						// 表格展示
					}else{
						this.$toast(res.msg)
					}
				})
			},
			// 处理成表格数据
			gethandleTable(info){
				var strarr=[];
				var newArr=info;
				Object.keys(newArr).some((key) => {
					var params={}
					params.scoreDataName=newArr[key].scoreDataName;
					params.scoreDataNameId=newArr[key].scoreDataNameId;
					params.zongfen=newArr[key].zongfen.toFixed(2);
					params.scoreSort=newArr[key].scoreSort;
					if (newArr[key].scoreDataDetailVoList&&newArr[key].scoreDataDetailVoList.length) {
						var scBoList=newArr[key].scoreDataDetailVoList;
						scBoList.forEach(ite=>{
							params[ite.xueke]=ite.score
						})
					}
					strarr.push(params);
				})
				return strarr
			},
			getDel(){
				var that=this;
				this.$modal.confirm('确定删除该信息吗？').then(() => {
				  getscoreDelFn(that.scoreId).then(res=>{
					 if (res.code == 200) {
					 	that.$toast('删除成功')
						setTimeout(function(){
							uni.$emit('refreshscorelist');
							uni.navigateBack({
								delta:1
							})
						},1500)
					 } else {
					 	that.$toast(res.msg)
					 } 
				  })
				})
			},
			getSearch(){
				var name=this.name;
				
				// var params={}
				// params['scoreClassId']=this.datainfo.scoreClassId
				// params['params[scoreDataName]']=this.name
				// params['params[role]']=this.$store.state.user.choseroles
				// getscoreListFn(params).then(res=>{
				// 	if(res.code==200){
						
				// 	}else{
				// 		this.$toast(res.msg)
				// 	}
				// })
			},
			pullUpLoading(done){
			  if(!this.flag1){
			    return
			  }
			  this.flag1 = true;
			  setTimeout(()=>{
			    this.data.push({id:"20", date: '2016-05-02', name: '王小虎4',yw: 5,sx: 91,yy:89,},)
				this.flag1 = false;
			    this.num ++
			    if(this.num===2){
			      done('ok')
			      this.flag1 = true
			    }else {	
			      done()
			    }
			  },2000)
			},
		},

	}
</script>

<style lang="scss" scoped>
.detail{
	.bgimg{width: 750rpx;height: 400rpx;}
	.dbox{padding: 0 36rpx 20rpx;margin-top: -368rpx;position: relative;height: calc(100vh - 32rpx);
		display: flex;flex-direction: column;
		.top{position: relative;padding-bottom: 20rpx;flex: 0 0 auto;
			.tit{font-size: 36rpx;font-weight: bold;color: #FFFFFF;margin-bottom: 24rpx;}
			.txt{font-size: 30rpx;color: #D3DFFD;line-height: 40rpx;margin-bottom: 12rpx;}
			.shareimg{width: 28rpx;height: 34rpx;position: absolute;right: 0rpx;top: 0rpx;}
		}
		.dmain{padding: 40rpx 24rpx 10rpx;background: #FFFFFF;border-radius: 18rpx;position: relative;
			display: flex;flex-direction: column;
			.tit{font-size: 30rpx;font-weight: bold;color: #161616;}
			.list{width: 100%;background: #F7F7F7;display: flex;align-items: flex-start;line-height: 48rpx;
border-radius: 10rpx;min-height: 100rpx;padding: 26rpx;box-sizing: border-box;margin-bottom: 22rpx;
				.label{font-size: 30rpx;font-weight: bold;color: #161616;font-weight: bold;flex: 0 0 auto;}
				.rtxt{flex: 1;text-align: right;margin-left: 12rpx;
					&.rtxt1{font-size: 32rpx;font-weight: bold;color: #FE5A0E;
						text{color: #161616;font-size: 30rpx;font-weight: normal;}
					}
					&.rtxt2{font-size: 30rpx;font-weight: 500;color: #161616;}
				}
			}
			.search{height: 80rpx;background: #F2F5FB;border-radius: 40rpx;padding-left: 40rpx;
				.img{width: 30rpx;height: 32rpx;flex:0 0 auto;margin-right: 30rpx;}
				.btn{width: 120rpx;height: 80rpx;background: #1f57e6;border-radius: 40rpx;font-size: 30rpx;font-weight: 500;
color: #FFFFFF;text-align: center;line-height: 80rpx;flex:0 0 auto}
				.input{font-size: 30rpx;color: #161616;line-height: 80rpx;}
			}
			.delbox{font-size: 30rpx;color: #FE5A0E;padding:0 20rpx;}
			
		}
	}
	
}
.nodata{
	display: flex;flex-direction: column;align-items: center;box-sizing: border-box;padding: 80rpx 0 120rpx;
	image{width: 456rpx;height: 178rpx;margin-bottom: 28rpx;}
	view{font-size: 30rpx;color: #AAAAAA;font-weight: bold;}
}	
.fbtns{display: flex;align-items: center;background-color: #ffffff;padding:0rpx 30rpx 0rpx;box-shadow: 0px 0px 18rpx 0px rgba(121,121,121,0.39);height:100rpx;flex: 0 0 auto;justify-content: center;font-size: 30rpx;font-weight: 500;
color: #4775EA;
		image{width: 32rpx;height: 30rpx;margin-right: 20rpx;}
	}
.detail /deep/  .zb-table-header{background-color: #F2F5FB !important;}
.detail /deep/  .zb-table-applet .zb-table-header .zb-stick-side{background-color: #F2F5FB !important;}
.detail /deep/  .odd{background-color: #F2F5FB !important;}
.detail /deep/ .item-td{border-bottom: none !important;}
.detail /deep/ .item-th{border-bottom: none !important;background-color: #F2F5FB !important;}
</style>