smart-app/pages/task/details/details.vue

<!-- 查看任务自定义 -->
<template>
	<view>
		 <!-- 顶部 -->
		 <cu-custom bgColor="bg-blue" :isBack="true">
		 	<block slot="backText">任务详情</block>
		 	<block slot="content"></block>
		 	<block slot="right">
		 		<view class=" flex justify-center">
		 		 	<button v-if="initiate==1 && type!=1" :class="initiate==1 ? 'text-white line-blue ':'bg-blue text-blue '" @click="repeal()"  class="cu-btn round line-blue " style="width: 160rpx;height: 66rpx;padding: 0;">废除任务</button>
		 		 	<button v-if="initiate==0 && type==1" @click="repeal()"  class="text-white line-blue cu-btn round line-blue " style="width: 160rpx;height: 66rpx;padding: 0;">废除任务</button> 
				</view>
		 	</block>
		 </cu-custom>
		<!-- 内容 -->
		<view class="bg-white" style="padding: 36rpx 24rpx 30rpx;">
			<view class="cu_name">{{diySingle.name}}</view>
			<view class="cu_remarks">{{diySingle.task_explain}}</view>
			<!--审核、自定义任务的 附件 -->
			<view v-if="type!=2" class="cu-list_b">
				<view class="cu-item_1 flex justify-between">
					<text>附件(<text class="text-blue">{{fileList!=null? fileList.length:0}}</text>)</text>				
					<text class="text-bold padding-right-sm" :class="[isFlod ? 'cuIcon-unfold' : 'cuIcon-fold']" style="font-size: 36rpx;" @tap="flodHandle"></text>
				</view>
				<template v-if="!isFlod">
					<view class="cu-item_2" v-for="item in fileList" @click="viewFile(item)" :key="item.id">
						<view class="cu-item_img">
							<image v-if="item.fileType==1" src="/static/task/excel.png"></image>	
							<image v-if="item.fileType==2" src="/static/task/word.png"></image>	
							<image v-if="item.fileType==3" src="/static/task/pdf.png"></image>	
							<image v-if="item.fileType==4" src="/static/task/image.png"></image>	
						</view>
						<view class="cu-item_cut">
							<view class="cu-item_filename">{{item.fileName}}</view>
							<view class="cu-item_start">{{item.fileSize}}</view>		
						</view>
						<view class="action"style="width: auto;" >
							<text class="cuIcon-right text-bold"></text>
						</view>
					</view>
				</template>
			</view>
		    <!-- 填报显示的-->
			<view class="cu-item  bg-gray-secondary padding" v-if="type==2">
				<view class="content">
					<view class="text-gray text-cut text-lg">[{{formName}}]资料填报</view>	
				</view>
			</view>
			<view class="cu_use_name" style="height: 39px;">
				 <view>
					发送人:{{diySingle.use_name}}
				 </view>
				 <view>
				 	{{ diySingle.start_date  | timeStamp }} 至 {{ diySingle.end_date!=null ? diySingle.end_date : diySingle.blackout_date   | timeStamp }}
				 </view>
			</view>
		</view>
		<view  style="height: 16rpx;background-color: #F7F7F7;"></view>
		<!-- 负责人 -->
		<view class="cu-bar_b" style="height: 39px;" >
			<text  v-if="type==4">负责人</text>
			<text  v-if="type==2">任务人</text>	
			<text  v-if="type==1 || type==3">任务进度</text>	
		</view>
		<!-- 自定义、填报任务显示的负责人、任务人内容 -->
		<view v-if="type!=1" class="cu-list grid bg-black margin-bottom-xxxl" :class="['col-' + gridCol,gridBorder?'':'no-border']">
			<view class="cu-item" v-if="type!=2" v-for="(item,index) in diyData" :key="index">
				<view style="position: relative;">
					<image v-if="item.task_status==1" class="round" src ='/static/index/unfill-blue.png' style="background-color: white; z-index: 3;width: 36rpx;height: 36rpx;position: absolute;right: 20rpx;top: 0;"></image>
					<image class="menuImageTask round" :src="item.userp==null ? '/static/information/defaultAvatar.png' : item.userp"  ></image>
				</view>
				<view class="task_user_name">{{item.task_user_name}}</view>
			</view>	
		   <view class="cu-item" v-if="type==2" v-for="item in reportTask" :key="item.id">
		   	<view style="position: relative;">
				<image v-if="item.task_status==1" class="round" src ='/static/index/unfill-blue.png' style="background-color: white;z-index: 3;width: 36rpx;height: 36rpx;position: absolute;right: 20rpx;top: 0;"></image>
		   		<image class="menuImageTask round" :src="item.userp==null ? '/static/information/defaultAvatar.png' : item.userp"  ></image>
		   	</view>
		   	<view class="task_user_name">{{item.task_user_name}}</view>
		   </view>	
		</view>
		<!-- 审批任务显示的任务进度内容 -->
		<view v-if="type==1" class="cu-timeline" style="font-size: 58rpx;padding-bottom: 200px;" >
			<view  v-for="(item,index) in taskProgressList" :key="index" :class="[item.taskStatus==0 ? 'cuIcon-time text-gray' :'cuIcon-roundcheck  text-blue']" class="cu-item">
				<view class="text-black text-lg flex justify-between ">
					<view><text>{{item.name}}</text></view>
					<view v-if="index!=0">
						<text v-if="item.taskStatus == 0">等待审批</text>
						<text v-else-if="item.taskStatus == -1">审批未通过</text>
						<text v-else>审批同意</text>
					</view>
					<view v-else>
						<text v-if="item.taskStatus == -1">审批未通过</text>
						<text v-else>上报任务</text>
					</view>
					<view><text>{{item.start_date | timeStamp }}</text></view>
				</view>
			</view>
			
		</view>
		<!-- 底部-->
		<view v-if="initiate==0" class="cu-bar tabbar bg-white shadow foot solid-type-top" style="height: 120rpx;">
			 <view v-if="type==4" class="btn-group text-xxl ">
			 	<button class="cu-btn lg bg-blue round" style="width: 560rpx;"  @click="complete()">我已完成任务</button>
			</view>	 
			<view v-if="type==2" class="btn-group text-xxl ">
			 	<button class="cu-btn lg bg-yellow round text-white" style="width: 300rpx;"  @click="complete()">我已完成任务</button>
				<button class="cu-btn lg bg-blue round" style="width: 300rpx;"  @click="report(form)">立即填报</button>
			</view>		
		    <view v-if="type==1 || type==3" class="btn-group text-xxl ">
		     	<button class="cu-btn lg bg-blue round" style="width: 560rpx;" :class="btnType==true ? 'bg-gray' : '' " @click="approvalTasks()">立即审批</button>
		    </view>	
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:"",
				project:"",
				fileList:[],
				gridCol:5,
				gridBorder: false,
				type:1,// 1、任务审批显示的内容，2、//任务填报显示的内容 4、//任务自定义显示的内容
				initiate:0,//判断传递过来是不是我发起的任务
				taskProgressList:[],
				diyData:[],//任务的数据,
				diySingle:"",
				taskId:'',//数据ID
				reportTask:[],//填报类型的任务人
				btnType:false,
				formName:"",
				form:"",//表单数据
				contractid:'',//合同段id
				
				doMain:'https://huazheng2021.oss-cn-shenzhen.aliyuncs.com/',
				
				signType:{
					isOpenSign:0,//合同是否开启电签,0关闭，1开启
					isPfxFile:'',//是否有证书文件,1有
					isPhone:'',//绑定的手机号，没有则没绑定
				},
				smscode:'',
				sendCoded:false,//
				
				isFlod:false,//折叠
			}
		},
		onLoad(e) {
			var that =this;
		    that.userInfo =  uni.getStorageSync("userInfo");
			that.project = uni.getStorageSync("porject"+"_"+uni.getStorageSync("userInfo").id);
			that.type=e.type;
			that.taskId=e.taskId;
			that.initiate = e.value;
			this.contractid = e.contractid;
			//console.log(e)
			/* that.findTask(that.type); */
			
			this.getOss()
		},
		onShow() {
			var that=this;
			that.taskProgressList=[];
			that.findTask(that.type);
			uni.$on("save",res=>{
				that.btnType=true
			})
		},
		methods: {
			/* 获取任务信息 */
			 findTask(type){
				 var that=this;
				 //查询任务数据
				   if(type==2){//填报类型
					   that.http.request("/app/task/findTaskByReport",{taskId:that.taskId,contractId:that.contractid}).then((res)=>{
							that.diyData = res.datas;
							that.diySingle = that.diyData[0];
							that.diySingle.use_name=that.diyData[0].userName;
							that.findTaskMan(that.diyData[0].id);//获取任务填报的任务人
							that.findTaskTemplate(that.diyData[0].template_id);//获取表单信息
					   })
				   }else{//自定义，审批类型 type :0为待办 ， 1为我发起的
					   that.http.request("/app/task/findtaskByType",{type:that.initiate, taskId:that.taskId,userId:that.userInfo.id , contractId:that.contractid}).then((res)=>{
							that.diyData = res.datas;
							that.diySingle = that.diyData[0];
							that.findTaskFile(that.diySingle);
							//获取任务的进度
							that.schedule(that.diySingle);
							
							that.signType = res.data;
					   })
				   }
				 	
				 
			 },
			 /* 获取任务附件*/
			 findTaskFile(data){
				 var that=this;
				 var taskId;
				 if(that.type==1 || data.form_data_id==null){//自定义的附件
					 taskId =data.id;
				 }else if(that.type==3){//审批的附件
					 taskId =data.form_data_id; 
				 }
				 that.http.request("/app/task/findtaskFileById",{taskId:taskId}).then((res)=>{
				 	that.fileList = res.datas;
				 })
			 },
			 /* 获取填报类型的任务人*/
			 findTaskMan(taskId){
			 		var that=this;
			 		that.http.request("/app/task/findtaskBy",{taskId:that.taskId,contractId:that.contractid}).then((res)=>{
			 			that.reportTask = res.datas;
			 		})	 
			 },
			 /*获取任务填报的表单信息*/
			 findTaskTemplate(templateId){
				 var that =this;
				 that.http.request("/app/task/findTaskTemplate",{templateId:templateId}).then((res)=>{
					 var name = res.data.name.split("/");
					 that.formName =name[name.length-2]+"/"+name[name.length-1];
					 that.form= res.data;
				 })
			 },
			 /* 获取任务的进度*/
			 schedule(data){
				 var that=this;
				 var taskId;
				 if(data.form_data_id==null || data.form_data_id==""){
					 taskId =data.id;
				 }else{
					  taskId =data.form_data_id;
				 }
				 // that.http.request("/app/task/findTaskSchedule",{taskId:taskId}).then((res)=>{
				 // 	  that.taskProgressList=res.datas; 
				 // })
				 that.http.request("/app/task/findTaskSchedulenew",{taskId:taskId}).then((res)=>{
				 	  that.taskProgressList=res.datas; 
				 })
			 },
			 complete(){
				 var that =this;
				 that.http.request("/app/task/updateTaskStatus",{taskId:that.diySingle.id}).then((res)=>{
					if(res.result=="1"){
						that.$prompt.none("操作成功");
						setTimeout(function(){
							uni.navigateBack({
								delta:1
							})
						},500)
					}else{
						that.$prompt.none("操作失败")
					}
					 
				 })
			 },
			 repeal(){
				 var that=this;
				 if(that.initiate==1 || that.type==1){
					 that.http.request("/app/task/delTask",{type:that.type,taskName:that.diySingle.name,userId:that.userInfo.id , contractId:that.contractid}).then((res)=>{
					 	 if(res.result=="1"){
							 that.$prompt.none("废除成功");
							 setTimeout(function(){
								 uni.navigateBack({
								 	delta:1
								 })
							 },500)
						 }
					 })
				 }
			 },
			 report(data){
				 uni.navigateTo({
				 	url:"/pages/personBaseIndex/personBaseIndex?id="+this.diySingle.template_id
				 })
			 },
			 approvalTasks(){			 
				 if(this.btnType){
					 this.$prompt.none("你已审批");
					return; 
				 }
				 uni.navigateTo({
				 	url:"/pages/task/approvalTasks/approvalTasks?taskId="+this.taskId+"&isOpenSign="+this.signType.isOpenSign+"&isPfxFile="+this.signType.isPfxFile+"&isPhone="+this.signType.isPhone
				 })
				 return;
								 
			 },
			 viewFile(data){
				 //console.log(data.file)
				 //debugger
				 var reg=/huazheng2021\w*.oss-cn-shenzhen.aliyuncs.com/;
				 var path = '';
				 if(reg.test(data.file)){
					 path = data.file;
				 }else{
					 path = data.file.replace(this.doMain,"");
					 path = this.doMain+path;
				 }
				
				 if(data.fileType==4){
					 uni.navigateTo({
					 	url:"/pages/view/view?file="+path+"&title="+data.fileName
					 })
				 }else if(data.fileType==3){
					 var encode=encodeURIComponent(path);
					 uni.navigateTo({
					 	url:"/pages/view/preview/preview?preview="+ encode
					 })
				 }else{
					 uni.showLoading({
					 	title:"跳转中..."
					 })
					 uni.downloadFile({
					   url:path,
					   success: function (res) {
					     var filePath = res.tempFilePath;
					     uni.openDocument({
					       filePath: filePath,
					       success: function (res) {
					 		 uni.hideLoading()
					         console.log('打开文档成功');
					       },
					     }); 
					   }
					 });    
				 }
				  
				 
			 },
			 getOss(){
				 this.http.request("/app/getDoMain",{}).then((res)=>{
				 	this.doMain = res.data;
				 })
			 },
			 
			 flodHandle(){
				 this.isFlod = !this.isFlod;
			 }
			 		 
		},
		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
			},
		}
	}
</script>

<style>
	page{
		background-color: white;
	}
   .login-img{
	   width:70rpx;
	   height:70rpx;
   }
   .solid-type-top {
    	border-top: 2upx solid rgba(0, 0, 0, 0.1);
   }
   .cu-list.menu-avatar>.cu-item {
       position: relative;
       display: -webkit-box;
       display: -webkit-flex;
       display: flex;
       padding-right: 4px;
       height: 59px;
       background-color: #F7F7F7;
       -webkit-box-pack: end;
       -webkit-justify-content: flex-end;
       justify-content: flex-end;
       -webkit-box-align: center;
       -webkit-align-items: center;
       align-items: center;
   }
   .cu-avatar-bg{
	   background-color: #F7F7F7;
   }
   /* .cu-timeline>.cu-item::after {
       left:30px !important;
	} */
   .cu-list.menu-avatar>.cu-item:after, .cu-list.menu>.cu-item:after {
       position: absolute;
       top: 0;
       left: 0;
       box-sizing: border-box;
       width: 200%;
       height: 200%;
       border-bottom: 1.5px dashed #ddd;
       border-radius: inherit;
       content: " ";
       -webkit-transform: scale(.5);
       transform: scale(.5);
       -webkit-transform-origin: 0 0;
       transform-origin: 0 0;
       pointer-events: none;
   }
   .cu_name{color: #101010;font-size: 34rpx;font-weight: bold;}
   .cu_remarks{font-size: 30rpx;color: #101010;margin: 30rpx 0;}
   .cu-list_b{background-color: #F7F7F7;}
   .cu-item_1{padding: 26rpx 22rpx;border-bottom: 2rpx dashed #E3E1E1;font-size: 30rpx;color: #101010;font-weight: bold;}
   .cu-item_2{padding: 20rpx 22rpx;border-bottom: 2rpx dashed #E3E1E1;display: flex;align-items: center;}
   .cu-item_2:last-child{border-bottom: none;}
   .cu-item_img image{width: 80rpx;height: 80rpx;margin-right: 10rpx;}
   .cu-item_cut{width: 530rpx;margin-right: 10rpx;}
   .cu-item_filename{font-size: 30rpx;color: #101010;overflow: hidden;text-overflow: ellipsis; -o-text-overflow: ellipsis;white-space:nowrap;}
   .cu-item_start{font-size: 26rpx;color: #8A8A8A;margin-top: 6rpx;}
   .cu_use_name{display: flex;align-items: center;justify-content: space-between;font-size: 26rpx;color: #8A8A8A;padding-top: 26rpx;}
   .cu-bar_b{padding: 30rpx 24rpx;margin-top: 20rpx;font-size: 30rpx;color: #101010;font-weight: bold;background-color: #fff;border-bottom: 2rpx solid #E3E1E1;}
    .task_user_name{font-size: 30rpx;color: #101010;overflow-y: scroll;word-break:keep-all;white-space:nowrap;}
	.cu-bar_b {
	    padding: 5px 10px !important;
    }
	
	.cu-timeline>.cu-item[class*="cuIcon-"]::before{
		top: 30upx;
	}
	
	.cu-timeline>.cu-item:not(:first-child)::after {
		left: 64upx;
	}
</style>