zhgdyunapp/pages/projectEnd/progressManagement/index.vue

<template>
	<view>
		<headers :showBack="true">
			<view class="headerName">
				进度管理
			</view>
		</headers>
		<view class="tab flex2">
			<view class="tabType" @click="changeTab(0)" :class="checkedTab==0?'checkedTab':'noCheckTab'">未开始</view>
			<view class="tabType" @click="changeTab(1)" :class="checkedTab==1?'checkedTab':'noCheckTab'">进行中</view>
			<view class="tabType" @click="changeTab(2)" :class="checkedTab==2?'checkedTab':'noCheckTab'">已完成</view>
		</view>
		<view class="content">
			<view class="item" v-if="listData.length>0" v-for="(item,index) in listData" :key="index">
				<view class="item_title">{{item.taskName}}</view>
				<view class="item_content" >计划时间:{{item.startDate}}-{{item.finishDate}}</view>
				<view class="item_content" v-if="checkedTab==2">实际时间:{{item.actualStartDate}}-{{item.actualFinishDate}}</view>
				<view class="item_content" v-if="checkedTab==1">实际开始时间:{{item.actualStartDate}}</view>
				<view class="name">任务工期:{{item.duration}}</view>
				<view class="time">进度比例:{{item.progressRatio}}%</view>

				<view class="state"
					:class="item.differDay==0?'stateTextColor3':'stateTextColor1'">
					{{item.status==0?'':item.status==1?'':item.differDay==0?'正常':`提前${item.differDay}天`}}
				</view>
				<!-- <view class="state"
					:class="item.differDay==0?'stateTextColor3':'stateTextColor1'" v-if="checkedTab==2">
					{{item.differDay==0?'正常':`提前${item.differDay}天`}}
				</view> -->
				
				<view class="state2" :class="{'state2':item.status==0,'state2':item.status==1,'state3':item.status==2}"
					@click="editStatus(item)">
					{{item.status==0?'开始任务':item.status==1?'结束任务':''}}
				</view>
			</view>
		</view>
		<view class="noData" v-if="listData.length==0">
			<image class="noDataImg" src="/static/noData.png"></image>
			<view>暂无数据</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
				listData: [],
				checkedTab: 0,
				condition: {
					pageNo: 1,
					pageSize: 10,
					projectSn: "",
					status: 1, //0.未完成。1.进行中，2.已完成
					projectSn: '',

				},
				finishDate: ',',
				actualFinishDate: '',
				teach: true,
				


			}
		},
		onLoad() {
			this.condition.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
            this.checkedTab=sessionStorage.getItem('currentIndex')
		},
		onShow() {
			this.listData = [];
			this.condition.pageNo = 1;
			this.condition.pageSize = 10;
			this.getListData();
		},
		//上拉触底时间
		onReachBottom() {
			if (this.teach) {
				this.condition.pageNo = this.condition.pageNo + 1;
				this.getListData();
			}
		},
		methods: {
			
			//切换tab
			changeTab(type) {
				sessionStorage.setItem('currentIndex', type)
				this.checkedTab = type;
				this.condition.status = type;
				this.condition.pageNo = 1;
				this.condition.pageSize = 10;
				this.listData = [];
				this.getListData();
			},

			//获取进度数据
			getListData() {
				if (this.checkedTab == 0) {
					this.condition.taskName = ''
					this.condition.startDate = ''
					this.condition.duration = ''
					this.condition.progressRatio = ''
					this.status = 0

				} else if (this.checkedTab == 1) {
					this.condition.taskName = ''
					this.condition.startDate = ''
					this.condition.duration = ''
					this.condition.progressRatio = ''
					this.status = 1
				} else {
					this.condition.taskName = ''
					this.condition.startDate = ''
					this.condition.duration = ''
					this.condition.progressRatio = ''
					this.status = 2
				}

				let that = this;
				this.sendRequest({
					url: 'xmgl/progressTask/selectPage',
					method: 'get',
					data: that.condition,
					success: res => {
						let arr = JSON.parse(JSON.stringify(this.listData));
						if (res.result.records.length > 0) {
							let newArr = arr.concat(res.result.records);
							if (res.result.records.length < 10) {
								that.teach = false;
							} else {
								that.teach = true;
							}
							that.listData = newArr;
							console.log(that.listData)
						} else {
							that.teach = false;
						}
					}
				})
			},
			//修改进度数状态
			editStatus(item) {
				console.log('修改的数据内容', item);
				let _this = this
				//年
				let year = new Date().getFullYear();
				//月份是从0月开始获取的，所以要+1;
				let month = new Date().getMonth() + 1;
				//日
				let day = new Date().getDate();
				let time = year + '-' + month + '-' + day


				let arr = JSON.parse(JSON.stringify(item));
				console.log('arr================', arr);
				if (item.status == 0) {
					arr.startDate = time

					arr.actualStartDate = time
					arr.status = 1

				}
				if (item.status == 1) {
					arr.status = 2
					arr.actualFinishDate = time

				}
				this.sendRequest({
					url: 'xmgl/progressTask/updateProgressTask',
					method: 'post',
					data: arr,
					success: res => {
						uni.showToast({
							title: '状态编辑成功',
							duration: 2000,
						})
						setTimeout(() => {
							this.$router.go(0)
						}, 500)
					}

				})
			}
		}
	}
</script>

<style>
	.flex2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tab {
		width: 100%;
		height: 45px;
		text-align: center;
		box-shadow: 0 0 10px rgba(194, 194, 194, 0.5);
		position: fixed;
	}

	.tabType {
		width: 33%;
		line-height: 43px;
		border-bottom: 1px solid rgba(194, 194, 194, 0.2);

	}

	.checkedTab {
		color: #4181FE;
		border-bottom: 2px solid #4181FE;

	}


	.item {
		box-shadow: 0 4px 24px 0px rgba(212, 220, 236, 0.69);
		border-radius: 8px;
		height: 175px;
		width: 92%;
		margin: 15px 10px;
		padding: 10px 0px 0px 10px;

	}

	.noData {
		text-align: center;
		font-size: 32rpx;
		margin-top: 120px;
		color: #bed0fb;
	}

	.noDataImg {
		width: 125px;
		height: 98px;
	}

	.item_title {
		margin: 10px 10px;
		    font-weight: 800;
	}

	.item_content {
		margin: 10px 10px;
	}

	.name {
		margin: 10px 10px;
	}

	.time {
		margin: 10px 10px;
	}

	.content {
		/* padding: 20px 30rpx 0; */
		box-sizing: border-box;
		width: 100%;
		margin-top: 15%;
	}

	.state {

		font-size: 14px;
		margin-top: -42%;
		    margin-left: 85%;
	}

	.state2 {
		background: #3579ff;
		width: 89px;
		height: 30px;
		border-radius: 28px;
		text-align: center;
		line-height: 30px;
		color: #fff;
		    margin-left: 260px;
		    margin-top: 125px;
	}


	.state3 {
		display: none;
	}

	.stateTextColor1 {
		color: #ff9900;
		margin-left: 78%;
	}

	.stateTextColor2 {
		color: #0085ff;
	}

	.stateTextColor3 {
		color: #28d061;
	}

	.headerName {
		width: calc(113% - 50px);
		background: #4181fe;
		color: #fff;
		padding-left: 0 !important;
		position: fixed;
	}
</style>