zhgdyunapp_vue3/pages/projectEnd/standardSchedule/detail.vue

<template>
	<view class="deetailPage">
		<headers :showBack="true">
			<view class="headerName">
				进度管理系统
			</view>
		</headers>
		<view class="content">
			<view class="title">
				任务内容
			</view>
			<view class="type">
				<view class="textColor">分部分项工程名称：<span class="textStyle">{{itemFrom.taskName}}</span></view>
			</view>
			<view class="type">
				<view class="textColor">计划开始日期：<span class="textStyle">{{itemFrom.startDate}}</span></view>
			</view>
			<view class="type">
				<view class="textColor">计划完成日期：<span class="textStyle">{{itemFrom.finishDate}}</span></view>
			</view>
			<view class="type">
				<view class="textColor">实际开始日期：<span class="textStyle">{{itemFrom.actualStartDate}}</span></view>
			</view>
			<view class="type">
				<view class="textColor">实际完成日期：<span class="textStyle">{{itemFrom.actualFinishDate}}</span></view>
			</view>
			<view class="type">
				<view class="textColor">负责人：<span class="textStyle">{{itemFrom.dutyUserName}}</span></view>
			</view>
			<view class="type">
				<view class="textColor">进度：<span class="textStyle">{{itemFrom.progressRatio}}%</span></view>
			</view>
			<view class="type">
				<view class="textColor">执行状态：<span
						class="textStyle">{{itemFrom.status==0?'未开始':itemFrom.status==1?'进行中':itemFrom.status==2?'已完成':'已逾期'}}</span>
				</view>
			</view>
			<view class="type">
				<view class="textColor">开始预警：<span class="textStyle"
						:class="{'greenText': itemFrom.beginWarning === 1, 'blueText': itemFrom.beginWarning === 2, 'redText': itemFrom.beginWarning === 3}">{{itemFrom.beginWarning==1?'提前':itemFrom.beginWarning==2?'正常':'逾期'}}</span>
				</view>
			</view>
			<view class="type">
				<view class="textColor">结束预警：<span class="textStyle"
						:class="{'greenText': itemFrom.endWarning === 1, 'blueText': itemFrom.endWarning === 2, 'redText': itemFrom.endWarning === 3}">{{itemFrom.endWarning==1?'提前':itemFrom.endWarning==2?'正常':'逾期'}}</span>
				</view>
			</view>
			<view class="type">
				<view class="textColor">备注：<span class="textStyle">{{itemFrom.remark}}</span></view>
			</view>
			<view class="line"></view>
			<view class="title" style="margin-top: 40rpx;">
				材料用量
			</view>
			<view class="container">
				<view class="table-header">
					<view class="header-cell">材料类型</view>
					<view class="header-cell">计划用量</view>
					<view class="header-cell">实际用量</view>
				</view>
				<view class="table-body">
					<view class="table-row" v-for="(item, index) in tableData" :key="index">
						<view class="table-cell" :title="item.name">{{ item.name? (item.name + '('+ item.unit +')') : "" }}</view>
						<view class="table-cell">{{ item.planUsage || "" }}</view>
						<view class="table-cell">{{ item.actualUsage || "" }}</view>
					</view>
				</view>
			</view>

			<view class="closeProgess" v-if="itemFrom.status==2">
				任务已闭合
			</view>
			<view class="addProgess" @click="addProgessBtn"
				v-if="itemFrom.dutyUserId === userInfo.userId && itemFrom.status!==2">
				上报进度
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemFrom: {},
				userInfo: {},
				tableData: [],
				projectSn: '',
			}
		},
		onLoad(option) {
			this.itemFrom = JSON.parse(option.itemFrom);
			console.log("进入详情",this.itemFrom)
			if (this.itemFrom.status === 0) {
				this.startTask();
			}
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
		},
		// onUnload(option) {
		// 	this.itemFrom = JSON.parse(option.itemFrom);
		// 	this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
		// 	this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
		// 	// 进行数据刷新操作，比如重新请求接口获取最新数据
		// 	this.getMarList();
		// },
		onShow() {
			console.log("返回上传")
			this.getMarList()
			this.getListDetail()
		},
		methods: {
			//点击上报
			addProgessBtn() {
				uni.navigateTo({
					url: './addFrom?id=' + this.itemFrom.id
				})

			},
			// 开始任务
			startTask() {
				let data = {
					id: this.itemFrom.id,
					status: 1
				}
				this.sendRequest({
					url: 'xmgl/taskProgress/startTask',
					method: 'post',
					data,
					success: res => {
						console.log("开始任务",res)
						// this.getListDetail()
						this.itemFrom.status = 1
					}
				})
			},
			//获取材料用量
			getMarList() {
				let data = {
					taskProgressId: this.itemFrom.id,
					projectSn: this.projectSn
				}
				this.sendRequest({
					url: 'xmgl/taskProgressMaterialRel/detailList',
					method: 'get',
					data,
					success: res => {
						if (res.result.length > 0) {
							this.tableData = res.result
						}

					}
				})
			},
			// 获取详情
			getListDetail() {
				let data = {
					id: this.itemFrom.id,
				}
				this.sendRequest({
					url: 'xmgl/taskProgress/queryById',
					method: 'get',
					data,
					success: res => {
						if (res.success) {
							console.log("详情接口", res.result);
							this.itemFrom = res.result
						}

					}
				})
			},

		}
	}
</script>

<style lang="less">
	.content {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 16rpx;

		.title {
			margin: 20rpx;
			font-weight: bold;
			font-size: 28rpx;
		}

		.type {
			color: #9f9f9f;
			margin: 40rpx 20rpx 0 20rpx;
			font-size: 28rpx;

			.textStyle {
				float: right;
				color: #000;
			}

		}

		.line {
			border-bottom: 1px solid #e6e6e6;
			margin-top: 60rpx;
		}

		.container {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			font-size: 28rpx;
			margin-top: 40rpx;
		}

		.table-header {
			display: flex;
			background-color: #f7f8fa;

			text-align: center;
			height: 70rpx;
			line-height: 70rpx;

		}

		.header-cell {
			flex: 1;
			border: 1px solid #f0f0f0;
		}

		.table-body {
			display: flex;
			flex-direction: column;
			text-align: center;

		}

		.table-row {
			display: flex;

			height: 70rpx;
			line-height: 70rpx;
		}

		.table-cell {
			flex: 1;
			border: 1px solid #f0f0f0;
			width: 50rpx;
			white-space: nowrap;
			/* 防止换行 */
			overflow: hidden;
			/* 超出部分隐藏 */
			text-overflow: ellipsis;
			/* 超出部分显示省略号 */
		}

		.addProgess {
			width: 50%;
			background: #5181f6;
			text-align: center;
			margin: auto;
			height: 60rpx;
			color: #fff;
			border-radius: 40rpx;
			line-height: 60rpx;
			margin-top: 110rpx;
			font-size: 28rpx;
		}

		.closeProgess {
			width: 50%;
			text-align: center;
			margin: auto;
			height: 60rpx;
			border-radius: 40rpx;
			line-height: 60rpx;
			margin-top: 110rpx;
			font-size: 28rpx;
			background: #f7f8fa;
			color: #8c8c8c;
		}

		.greenText {
			color: green !important;
		}

		.blueText {
			color: #5181f6 !important;
		}

		.redText {
			color: red !important;
		}
	}
</style>