ChuangHengWx/pagesHome/components/report/generateList.vue

<template>
	<view class="gbox">
		<u-list @scrolltolower="scrolltolower" height="100%">
			<u-list-item v-for="(item, index) in list" :key="index">
				<view class="gbox-item">
					<view class="gbox-item-top adf">
						<view class="gbox-item-top-type">{{typeCfg[item.type]||'基础版'}}</view>
						<view class="gbox-item-top-title">{{item.reportName||''}}</view>
					</view>
					<view class="gbox-item-p adf">
						<view class="gbox-item-p-left">团队名称：</view>
						<view class="gbox-item-p-right">{{item.teamName||''}}</view>
					</view>
					<view class="gbox-item-p adf">
						<view class="gbox-item-p-left">报告状态：</view>
						<view class="gbox-item-p-right" :style="{'color':stateColor[item.state]}">{{stateDict[item.state]}}</view>
					</view>
					<!-- <view class="gbox-item-p adfac">
						<view class="gbox-item-p-left">报告进度：</view>
						<view class="gbox-item-p-progress adfacjb">
							<view class="gbox-item-p-progress-l">
								<view class="gbox-item-p-progress-l-current" :style="{'width':(80)+'%'}"></view>
							</view>
							<view class="gbox-item-p-progress-r">{{80}}%</view>
						</view>
					</view> -->
					<view class="gbox-item-bottom adfacjb">
						<view class="gbox-item-bottom-left adfac">
							<view class="gbox-item-bottom-left-text">创建时间：</view>
							<view class="gbox-item-bottom-left-time">{{item.createDate||''}}</view>
						</view>
						<view class="gbox-item-bottom-right" @click="reviewPdf(item)" v-if="item.state==1">预览</view>
						<view class="gbox-item-bottom-right" @click="sendReport(item)" v-if="item.state!=-1">发送报告</view>
						<view class="gbox-item-bottom-right" @click="reSendReport(item)" v-else>重新生成</view>
					</view>
				</view>
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
	export default {
		props:{
			list:{
				typeof:Array,
				default:[]
			}
		},
		data(){
			return {
				typeCfg:{
					1:'基础版',
					2:'专业版',
					3:'专家版'
				},
				stateDict:{
					'0':'生成中',
					'1':'生成成功',
					'-1':'生成失败'
				},
				stateColor:{
					'0':'#FFD750',
					'1':'#33A7A7',
					'-1':'#F4657A'
				}
			}
		},
		methods:{
			scrolltolower(){
				this.$emit('scrolltolower')
			},
			reviewPdf(item){
				let url = `/pagesHome/pdf?reportId=${item.reportId}`;
				if(item.type==2) url = `/pagesHome/pdfZyb?reportId=${item.reportId}`
				uni.navigateTo({ url })
			},
			sendReport(item){
				if(!item.fileUrl) return this.$showModal('该报告尚未生成PDF文件，请等待生成后发送。')
				uni.showModal({
					title:'发送报告',
					content:`是否将“${item.reportName||''}”发送给团队成员`,
					success: (res) => {
						if(res.confirm){
							this.$api.get(`/core/report/sendReport/${item.reportId}`).then(({data:res})=>{
								if(res.code!==0) return this.$showToast(res.msg)
								uni.navigateTo({
									url:'/pagesHome/sendResult?result='+res.code
								})
							})
						}
					}
				})
			},
			reSendReport(item){
				this.$api.get(`/core/report/regenerateReport/${item.reportId}`).then(({data:res})=>{
					if(res.code!==0) return this.$showToast(res.msg)
					this.$emit('reSendReport')
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.gbox{
		height: 100%;
		&-item{
			margin-top: 20rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 40rpx 24rpx 10rpx;
			position: relative;
			&-top{
				&-type{
					width: 98rpx;
					height: 36rpx;
					padding: 2rpx 13rpx;
					box-sizing: border-box;
					background: #FFF7DC;
					border-radius: 6rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #BA9B31;
					line-height: 33rpx;
				}
				&-title{
					width: calc(100% - 98rpx);
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #002846;
					line-height: 32rpx;
					text-indent: 17rpx;
				}
			}
			
			&-p{
				margin-top: 36rpx;
				&>view{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #667E90;
					line-height: 24rpx;
				}
				&-left{
					width: 134rpx;
				}
				&-right{
					width: calc(100% - 134rpx);
				}
				&-progress{
					width: calc(100% - 134rpx);
					&-l{
						width: 410rpx;
						height: 12rpx;
						background: #F0F2F8;
						border-radius: 6rpx;
						position: relative;
						&-current{
							height: 12rpx;
							background: #FFDF73;
							border-radius: 6rpx;
							position: absolute;
							left: 0;
							top: 0;
						}
					}
					&-r{
						width: calc(100% - 410rpx);
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #002846;
						line-height: 24rpx;
						text-align: right;
					}
				}
			}
			
			&-bottom{
				margin-top: 30rpx;
				border-top: 1rpx solid #EFEFEF;
				padding-top: 18rpx;
				&-left{
					&>view{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #667E90;
						line-height: 24rpx;
					}
				}
				&-right{
					padding: 17rpx 20rpx;
					background: linear-gradient( 90deg, #33A7A7 0%, #4DB2B2 100%);
					border-radius: 30rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 26rpx;
					letter-spacing: 2rpx;
				}
			}
		}
	}
</style>