smart-app/pages/task/task.vue

<template>
	<view>
		<scroll-view scroll-x class="bg-white nav ">
			<cu-custom bgColor="bg-blue" :isBack="false">
				<block slot="backText">我的任务</block>
				<block slot="content"></block>
				<block slot="right">
					<view class=" flex justify-center">
						<button class="margin-top-ssm cu-btn round line-blue text-white" v-if="manage" @tap="manage = false">
							<text>取消多选</text>
						</button>
						<button @click="addTask()" v-else class="cu-btn round line-blue text-white" style="height: 66rpx;padding: 0 20rpx;"><text class="cuIcon-add"></text>新建任务</button>
					</view>
				</block>
			</cu-custom>
			<view class="nav_b">
				<view style="height:90rpx ;"></view>
				<view class="nav_b_1">
					<view :class="index==TabCur?'nav_one':'nav_1'" v-for="(item,index) in menuList" :key="index" @tap="tabSelect" :data-id="index">
						{{item.name}}
						<text v-if='index==0'>({{taskList.length}})</text>
						<text v-if='index==1'>({{taskInitiateList.length}})</text>
						<view :class="index==TabCur?'nav_zwf':''"></view>
					</view>
				</view>
				<!-- <view class="cu-item flex-sub" :class="index==TabCur?'text-blue':'text-no'" v-for="(item,index) in menuList" :key="index"
				 @tap="tabSelect" :data-id="index">
					{{item.name}}
					<text v-if='index==0'>({{taskList.length}})</text>
					<text v-if='index==1'>({{taskInitiateList.length}})</text>
					<view :class="index==TabCur?'bottom_solid':''"></view>
				</view> -->
			</view>
			<view v-if="TabCur==0" @longtap="manage = true" class="cu-list menu-avatar list_b">
				<view class="cu-item_1" v-for="(item,index) in taskList" :key="item.id" @click="navToTaskDetails(item,0)">
					<view class="cu-item_left">
						<image v-if="item.task_category=='2'" src="../../static/task/report.png"></image>
						<image v-else-if="item.task_category=='3'|| item.task_category=='1'" src="../../static/task/audit.png"></image>
						<image v-else src="../../static/task/diy.png"></image>
					</view>
					<view :class="manage?'cu-item_right_sm':'cu-item_right'">
						<view class="cu-item_name">{{item.name}}</view>
						<view class="cu-item_start">
							<view class="cu-item_text"> 发起人:{{item.userName}}</view>
							<view class="cu-item_text">
								{{ item.start_date  | timeStamp }}
							</view>
						</view>
					</view>
					<checkbox-group @change="CheckboxChange" @tap.stop :data-index="index" class="padding-left-sm">
						<checkbox class="sc75 blue" v-show="manage" :class="item.checked?'checked':''" :checked="item.checked?true:false"></checkbox>
					</checkbox-group>
				</view>
				<view v-if="taskList.length==0" class="bg-white text-center">
						<view>
							<image class="menuImageNoTask" src="../../static/task/noTask.png"></image>
						</view>
						<view style="padding:28rpx 0 132rpx;font-size: 26rpx;color: #8A8A8A;">暂时没有待办任务~</view>
				</view>
				<view v-if="taskList.length!=0" style="padding: 60rpx 0 160rpx;text-align: center;font-size: 26rpx;color: #AEAEAE;">没有更多内容了~</view>
			</view>
			<view v-else @longtap="manage = true" class="cu-list menu-avatar list_b">
				<view class="cu-item_1" v-for="(item,index) in taskInitiateList" :key="item.id" @click="navToTaskDetails(item,1)">
					<view class="cu-item_left">
						<image v-if="item.task_category=='2'" src="../../static/task/report.png"></image>
						<image v-else-if="item.task_category=='3' || item.task_category=='1'" src="../../static/task/audit.png"></image>
						<image v-else src="../../static/task/diy.png"></image>
					</view>
					<view :class="manage?'cu-item_right_sm':'cu-item_right'">
						<view class="cu-item_name">{{item.name}}</view>
						<view class="cu-item_start">
							<view v-if="item.task_status==0" class="cu-item_text"> 任务进度: 未完成</view>
							<view v-if="item.task_status==1" class="cu-item_text"> 任务进度: 已完成</view>
							<view v-if="item.task_status==-1" class="cu-item_text"> 任务进度: 审核未通过</view>
							<view v-if="item.task_status==2" class="cu-item_text"> 任务进度: 已废除</view>
							<view class="cu-item_text">{{ item.start_date  | timeStamp }}</view>
						</view>
					</view>
					<checkbox-group @change="CheckboxChange" @tap.stop :data-index="index" class="padding-left-sm">
						<checkbox class="sc75 blue" v-show="manage" :class="item.checked?'checked':''" :checked="item.checked?true:false"></checkbox>
					</checkbox-group>
				</view>
				<view v-if="taskInitiateList.length==0" class="bg-white text-center">
					<view>
						<image class="menuImageNoTask" src="../../static/task/noTask.png"></image>
					</view>
					<view style="padding:28rpx 0 132rpx;font-size: 26rpx;color: #8A8A8A;">暂时没有发起任务~</view>
				</view>
				<view v-if="taskInitiateList.length!=0" style="padding: 60rpx 0 160rpx;text-align: center;font-size: 26rpx;color: #AEAEAE;">没有更多内容了~</view>
			</view>
			
		</scroll-view>
		
		<view class="botm padding bg-white flex justify-between" v-if="manage">
			<view>
				<checkbox-group @change="allChange">
					<checkbox class="sc75 blue" :class="isAll?'checked':''" :checked="isAll?true:false" value="all"></checkbox>
					<text class="padding-left-sm">全选</text>
				</checkbox-group>
			</view>
			<view>
				<button class="cu-btn round margin-right-sm bg-red" @tap="batchRepeal">批量废除</button>
				<button class="cu-btn round margin-right-sm" @tap="batchHandle">批量审批</button>
				<!-- <button class="cu-btn round bg-blue" ></button> -->
			</view>
		</view>
		
		<!-- 引入底部导航栏 -->
		<tabBar v-if="show" :pagePath="'/pages/task/task'"></tabBar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuList: [{
					name: '待办任务'
				}, {
					name: '我发起的'
				}],
				title: "待办任务",
				taskList: [],
				taskInitiateList: [],
				TabCur: 0,
				scrollLeft: 0,
				show:false,//用于待办任务的数据统计才显示组件
				
				manage:false,
				isAll:false,
				checkList:[],
				signType:{
					isOpenSign:0,//合同是否开启电签,0关闭，1开启
					isPfxFile:'',//是否有证书文件,1有
					isPhone:'',//绑定的手机号，没有则没绑定
				},
			}
		},
		onLoad() {

		},
		onShow() {
			this.findTask();
			this.findTaskMyMission();
		},
		methods: {
			navToTaskDetails(item, value) {
				var type;
				if (item.task_category == 2) {
					type = 2 //填报任务类型
				} else if (item.task_category == 3) {
					type = 3 //审核任务类型
				}  else if (item.task_category == 1) {
					type = 1  //上报类型
				}else{
					type=4 //自定义
				}
				uni.navigateTo({
					url: "/pages/task/details/details?type=" + type + "&value=" + value + "&taskId=" + item.id+ "&contractid=" +item.contract_info_id
				})
			},
			tabSelect(e) {
				if(this.manage){
					this.$prompt.none("多选状态中，请勿切换");
					return;
				}
				
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			navTo(index) {
				if (index == 0) { //待办任务
					this.showValue = true;
					this.title = "待办任务";
				} else if (index == 1) { //发起任务
					this.showValue = false;
					this.title = "我发起的";
				} else if (index == 2) { //新建任务

				}
			},
			/* 查询待办任务 */
			findTask() {
				var that = this;
				var userInfo = uni.getStorageSync("userInfo");
				var project = uni.getStorageSync("porject"+"_"+uni.getStorageSync("userInfo").id);
				that.http.request('/app/task/findTaskComing', {
					userId: userInfo.id,
					contractId: project.contractId,
					projectid: project.id
				}).then((result) => {
					that.taskList = result.datas;
					that.tabberData.taskNum =  that.taskList.length;
					that.show=true;
					if (!that.taskList) {
						that.taskList = []
					}
				})
			},
			/* 查询我发起的任务 */
			findTaskMyMission() {
				var that = this;
				var userInfo = uni.getStorageSync("userInfo")
				var porject = uni.getStorageSync("porject"+"_"+uni.getStorageSync("userInfo").id);
				that.http.request('/app/task/findTaskMyMission', {
					userId: userInfo.id,
					contractId: porject.contractId,
					projectid: porject.id
				}).then((result) => {
					that.taskInitiateList = result.datas;
					if (!that.taskInitiateList) {
						that.taskInitiateList = []
					}
				})
			},
			addTask() {
				uni.navigateTo({
					url: "createTask/createTask"
				})
			},
			
			//全选
			allChange(e){
				let values = e.detail.value;
				if(values.length>0){
					this.isAll = true;
				}else{
					this.isAll = false;
				}
				let list = [];
				if(this.TabCur == 0){
					list = this.taskList;
				}else if(this.TabCur == 1){
					list = this.taskInitiateList;
				}
				list.forEach((item)=>{
					this.$set(item,'checked',this.isAll);
				})
			},
			
			//点击单选
			CheckboxChange(e){
				let values = e.detail.value;
				let list = [];
				if(this.TabCur == 0){
					list = this.taskList;
				}else if(this.TabCur == 1){
					list = this.taskInitiateList;
				}
				let item = list[e.currentTarget.dataset.index];
				// console.log(e)
				// console.log(item)
				if(values.length>0){
					this.$set(item,'checked',true);
				}else{
					this.$set(item,'checked',false);
				}
			},
			
			//批量处理
			batchHandle() {
				if (!this.checkBatch()) {
				  return;
				}
				let formDataIds = [];
				let contractIdList = [];
				this.checkList.forEach((item)=>{
					formDataIds.push(item.id);
					contractIdList.push(item.contract_info_id);
				})
				uni.navigateTo({
					url:"/pages/task/approvalTasks/approvalTasks?formDataIds="+formDataIds.join(',')+"&contractIdList="+contractIdList.join(',')+"&task_flow="+this.checkList[0].task_flow
				})
			},
			
			checkBatch() {
				let list = [];
				if(this.TabCur == 0){
					list = this.taskList;
				}else if(this.TabCur == 1){
					list = this.taskInitiateList;
				}
				this.checkList = [];
				list.forEach((item)=>{
					if(item.checked){
						this.checkList.push(item);
					}
				})
				if (this.checkList.length < 1) {
					this.$prompt.none("请至少勾选一条任务");
					return false;
				};
				let type = this.checkList[0].type;
				let flow = this.checkList[0].task_flow;
				let isCustom = false;//是否自定义流程
				if (flow == 1) {
				  isCustom = true;
				}
				let isAll = true;
				for (let i = 0; i < this.checkList.length; i++) {
		
				  if (this.checkList[i].sign_status == 1) {
					this.$prompt.none("选择的第" + (i + 1) + "条任务电签中，请检查");
					isAll = false;
					break;
				  }
				  
				  if (this.checkList[i].task_category == 2) {
					this.$prompt.none("选择的第" + (i + 1) + "条任务为填报任务，无法审批");
					isAll = false;
					break;
				  }
		
				  if (this.checkList[i].type != type) {
					this.$prompt.none("只能批量处理任务类型相同的任务！");
					isAll = false;
					break;
				  } else if (this.checkList[i].task_status != 0) {
					this.$prompt.none("选择的第" + (i + 1) + "条任务状态不正确，请检查");
					isAll = false;
					break;
				  }
		
				  if (isCustom) {
					if (this.checkList[i].task_flow != 1) {
						this.$prompt.none("只能批量处理流程类型相同的任务！");
					  isAll = false;
					  break;
					}
				  } else {
					if (this.checkList[i].task_flow == 1) {
						this.$prompt.none("只能批量处理流程类型相同的任务！");
					  isAll = false;
					  break;
					}
				  }
				}
		
				if (isAll) {
				  return true;
				} else {
				  return false;
				}
			},
			
			//批量废除任务
			batchRepeal(){
				let { account } = uni.getStorageSync('userInfo')
				if (!this.checkBatchRepeal()) {
				  return;
				}
				let ids = [];
				this.checkList.forEach((item)=>{
					ids.push(item.id);
				})
				this.http.request('/app/task/batchRepeal', {
					opUserName: account ? account : '',
					taskId:ids.join(','),
					processId:"",
					cs:0,
				}).then((result) => {
					this.$prompt.none("废除成功");
					this.manage = false;
					this.isAll = false;
					this.checkList = [];
					this.findTask();
					this.findTaskMyMission();
				})
			},
			checkBatchRepeal(){
				let list = [];
				if(this.TabCur == 0){
					list = this.taskList;
				}else if(this.TabCur == 1){
					list = this.taskInitiateList;
				}
				this.checkList = [];
				list.forEach((item)=>{
					if(item.checked){
						this.checkList.push(item);
					}
				})
				if (this.checkList.length < 1) {
					this.$prompt.none("请至少勾选一条任务");
					return false;
				};
				
				let isAll = true;
				for (let i = 0; i < this.checkList.length; i++) {
					if (this.checkList[i].task_status != 0) {
						this.$prompt.none("选择的第" + (i + 1) + "条任务状态已完成,无法废除");
						isAll = false;
						break;
					}
				}
				
				if (isAll) {
				  return true;
				} else {
				  return false;
				}
			}
		},
		filters: {
			timeStamp: function(value) {
				if (!value) return '';
				var now = new Date(value);
				var year = now.getFullYear();
				var month = now.getMonth() + 1;
				if (month < 10) {
					month = '0' + month
				}
				var date = now.getDate();
				if (date < 10) {
					date = '0' + date
				}
				return year + "-" + month + "-" + date
			},
		},
		onHide() {
			this.show=false
		}
	}
</script>

<style lang="scss">
 .nav_b{z-index: 5;background: #fff;position: fixed;left: 0;top:var(--status-bar-height);width: 750rpx; padding: 0 130rpx;}
 .nav_b_1{display: flex;align-items: center;justify-content: space-between;height: 100rpx;width: 490rpx;}
 .nav_one{font-size: 30rpx;color: #0A8CD5;font-weight: bold;position: relative;width: 170rpx;text-align: center;}
 .nav_1{font-size: 30rpx;color: #101010;font-weight: bold;width: 170rpx;text-align: center;}
 .nav_zwf{width: 170rpx;height: 4rpx;background-color: #0A8CD5;position: absolute;bottom: -24rpx;left: 0;border-radius: 20rpx;}
 .list_b{padding-top: 100rpx;}
	page {
		background-color: white;
	}

	.box {
		margin-top: -20rpx;
	}

	.box view.cu-bar {
		margin-top: 20upx;
	}

	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}

	.menuImage {
		height: 90rpx;
		width: 90rpx;
	}

	.cu-list.grid>.cu-item uni-text {
		display: block;
		margin-top: 4px;
		color: black;
		font-size: 14px;
		line-height: 17px;
	}

	.margin-bottom-big {
		margin-bottom: 150rpx;
	}

	.text-blue {
		position: relative;
		font-size: 30rpx;
		color: #0A8CD5;
	}

	.text-no {
		font-size: 30rpx;
		color: #101010;
	}

	.bottom_solid {
		height: 4rpx;
		background-color: #0A8CD5;
		position: absolute;
		bottom: 0;
		left: 96rpx;
		right: 96rpx;
	} 
	.cu-item_1{display: flex;align-items: center;padding: 22rpx 24rpx;border-bottom: 2rpx solid #E3e1e1;}
	.cu-item_left{margin-right: 10rpx;}
	.cu-item_left image{width: 100rpx;height: 100rpx;}
	.cu-item_right{width: 592rpx;}
	.cu-item_right_sm{width: 530rpx;}
	.cu-item_name{font-size: 30rpx;color: #101010;overflow: hidden;text-overflow: ellipsis; -o-text-overflow: ellipsis;white-space:nowrap;}
	.cu-item_start{display: flex;align-items: center;justify-content: space-between;padding-top: 8rpx;}
	.cu-item_text{color: #8A8A8A;font-size: 26rpx;}
	.menuImageNoTask{width:162rpx;height: 105rpx;margin-top: 60rpx;}
	
	.botm{
		position: fixed;
		left: 0;
		bottom: 100rpx;
		width: 100%;
		box-shadow: 2px 2px 10px;
	}
	.sc75{
		transform: scale(0.75, 0.75); 
	}
</style>