ChuangHengWx/pages/report.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='我的报告'></cus-header>
		<!-- <div class="tabs adf">
			<div class="t_pre" :class="{'active':tidx===2,'inactive':tidx!==2}" @tap="changeTab(2)">个人报告</div>
			<div class="t_pre" :class="{'active':tidx===1,'inactive':tidx!==1}" @tap="changeTab(1)">团队报告</div>
		</div> -->
		<template v-if="list.length">
			<div class="list">
				<div class="l_item" v-for="(item,index) in list" :key="index">
					<div class="li_title">{{item.reportName||''}}</div>
					<div class="li_pre">报告时间：<span>{{item.createDate||''}}</span></div>
					<div class="li_pre" v-if="item.type==1">作答人数：<span>{{item.finishNum||0}}/{{item.answerNum||0}}</span></div>
					<!-- <div class="li_pre">项目名称：<span>{{item.programName||''}}</span></div> -->
					<div class="li_pre">团队名称：<span>{{item.teamName||''}}</span></div>
					<div class="li_jd adfacjb" v-if="item.type==1">
						<div class="lj_l">
							<div class="ljl_box" :style="{'width':((item.finishNum||0)/(item.answerNum||0)*100)+'%'}"></div>
						</div>
						<div class="lj_r">进度<span>{{item.finishNum||0}}/{{item.answerNum||0}}</span></div>
					</div>
					<div class="li_actions">
						<div class="li_edit" v-if="canEditEvaluation(item)" @tap="openEvaluation(item)">评估修改</div>
						<div class="li_view" @tap="viewReport(item)">查看</div>
					</div>
				</div>
			</div>
		</template>
		<template v-else>
			<page-empty :height="'calc(100vh - 200px)'"></page-empty>
		</template>
		<view class="edit_mask" v-if="editVisible" @tap.stop="closeEvaluation">
			<view class="edit_dialog" @tap.stop>
				<view class="edit_title">修改评估内容</view>
				<view class="edit_label">总体评估结果</view>
				<textarea class="edit_textarea" maxlength="20000" v-model="editForm.overallAssessment" placeholder="请输入总体评估结果"></textarea>
				<view class="edit_label">团队发展建议</view>
				<textarea class="edit_textarea" maxlength="20000" v-model="editForm.developmentAdvice" placeholder="请输入团队发展建议"></textarea>
				<view class="edit_actions">
					<view class="edit_cancel" @tap="closeEvaluation">取消</view>
					<view class="edit_submit" :class="{disabled: editSubmitting}" @tap="submitEvaluation">{{editSubmitting?'提交中':'保存提交'}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import pageEmpty from '@/components/pageEmpty/index.vue'
	import { canEditEvaluation, EVALUATION_PROCESSING_PROMPT, normalizeEvaluationForm } from '@/utils/reportEvaluationEdit.js'
	export default {
		components:{ pageEmpty },
		data(){
			return {
				tidx:1,
				list:[],
				editVisible:false,
				editSubmitting:false,
				editReportId:'',
				editForm:{overallAssessment:'',developmentAdvice:''}
			}
		},
		onLoad() {
			this.getReportList();
		},
		methods:{
			changeTab(idx){
				this.tidx = idx;
				this.getReportList();
			},
			getReportList(){
				this.$api.get('/core/report/member/personalReportList').then(res=>{
					if(res.data.code!==0) return this.$showToast(res.data.msg)
					this.list = res.data.data;
				})
			},
			canEditEvaluation(item){
				return canEditEvaluation(item);
			},
			openEvaluation(item){
				if(!this.canEditEvaluation(item)) return;
				this.editReportId = item.reportId;
				this.editSubmitting = false;
				this.editVisible = true;
				this.$api.get('/core/report/evaluation/'+item.reportId).then(res=>{
					if(res.data.code!==0){ this.closeEvaluation(); return this.$showToast(res.data.msg); }
					const data = res.data.data || {};
					if(data.processing){ this.closeEvaluation(); return this.$showToast('评估分析正在重新生成中，请稍候'); }
					this.editForm = normalizeEvaluationForm(data);
				})
			},
			closeEvaluation(){
				if(this.editSubmitting) return;
				this.editVisible = false;
				this.editReportId = '';
			},
			submitEvaluation(){
				if(this.editSubmitting) return;
				if(!this.editForm.overallAssessment.trim()) return this.$showToast('请输入总体评估结果');
				if(!this.editForm.developmentAdvice.trim()) return this.$showToast('请输入团队发展建议');
				this.editSubmitting = true;
				this.$api.post('/core/report/evaluation/'+this.editReportId, this.editForm).then(res=>{
					if(res.data.code!==0) return this.$showToast(res.data.msg);
					this.editVisible = false;
					this.getReportList();
					uni.showModal({title:'温馨提示', content:EVALUATION_PROCESSING_PROMPT, showCancel:false, confirmText:'确定', confirmColor:'#007A69'});
				}).finally(()=>{ this.editSubmitting = false; });
			},
			viewReport(item){
				if(!item.fileUrl) return this.$showToast('报告pdf为空，请联系教练。')
				uni.navigateTo({
					url:`/pages/reportDetail?pdfUrl=${item.fileUrl}&reportId=${item.reportId}&fileName=${item.programName}-${item.reportName}`
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		background: #F7F7F7;
		padding-bottom: 40rpx;
		box-sizing: border-box;
		
		.tabs{
			width: 100%;
			height: 90rpx;
			background: #FFFFFF;
			.t_pre{
				width: 50%;
				height: 90rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #666666;
				line-height: 90rpx;
				text-align: center;
				position: relative;
				&.active{
					color: #33A7A7;
					&::after{
						content: '';
						width: 148rpx;
						height: 6rpx;
						background: #33A7A7;
						border-radius: 9rpx;
						position: absolute;
						left: 50%;
						margin-left: -74rpx;
						bottom: 0;
					}
				}
				&.inactive{
					color: #666666 !important;
					&::after{
						content: '';
						width: 148rpx;
						height: 6rpx;
						background: #FFFFFF !important;
						border-radius: 9rpx;
						position: absolute;
						left: 50%;
						margin-left: -74rpx;
						bottom: 0;
					}
				}
			}
		}
	
		.list{
			padding: 0 24rpx;
			overflow: hidden;
			.l_item{
				margin-top: 20rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 40rpx 24rpx;
				position: relative;
				.li_title{
					width: calc(100% - 100rpx);
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #252525;
					line-height: 30rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.li_pre{
					margin-top: 40rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #86909C;
					line-height: 26rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					span{
						color: #1D2129;
					}
				}
				.li_jd{
					margin-top: 27rpx;
					.lj_l{
						width: calc(100% - 181rpx);
						height: 10rpx;
						background: #EFEFEF;
						border-radius: 5rpx;
						position: relative;
						.ljl_box{
							height: 100%;
							background: #FFD750;
							border-radius: 5rpx;
							position: absolute;
							left: 0;
							top: 0;
						}
					}
					.lj_r{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #A6A6A6;
						line-height: 24rpx;
						span{
							color: #1D2129;
							margin-left: 8rpx;
						}
					}
				}
				.li_view{
					width: 88rpx;
					height: 54rpx;
					background: #833478;
					border-radius: 24rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 54rpx;
					text-align: center;
					position: absolute;
					top: 40rpx;
					right: 24rpx;
				}
				.li_actions{
					position:absolute;
					top:40rpx;
					right:24rpx;
					display:flex;
					gap:12rpx;
					.li_edit,.li_view{
						position:static;
						width:112rpx;
					}
					.li_edit{height:54rpx;background:#33A7A7;border-radius:24rpx;font-family:PingFang-SC, PingFang-SC;font-weight:bold;font-size:24rpx;color:#FFFFFF;line-height:54rpx;text-align:center;}
				}
			}
		}
	}
	.edit_mask{
		position:fixed;
		z-index:20;
		left:0;right:0;top:0;bottom:0;
		background:rgba(0,0,0,.45);
		display:flex;
		align-items:center;
		justify-content:center;
		.edit_dialog{
			width:650rpx;
			background:#fff;
			border-radius:16rpx;
			padding:34rpx 28rpx 26rpx;
			.edit_title{text-align:center;font-size:34rpx;font-weight:bold;color:#252525;margin-bottom:28rpx;}
			.edit_label{font-size:28rpx;font-weight:bold;color:#333;margin:18rpx 0 12rpx;}
			.edit_textarea{width:100%;height:180rpx;box-sizing:border-box;background:#f7f7f7;border-radius:8rpx;padding:18rpx;font-size:26rpx;color:#333;}
			.edit_actions{display:flex;justify-content:flex-end;gap:20rpx;margin-top:28rpx;}
			.edit_cancel,.edit_submit{padding:18rpx 28rpx;border-radius:10rpx;font-size:28rpx;}
			.edit_cancel{color:#666;background:#f2f2f2;}.edit_submit{color:#fff;background:#833478;}.edit_submit.disabled{opacity:.5;}
		}
	}
</style>