payy-app/views/task/detail/detail.vue

<template>
	<view class="task-detail-wrap">
		<view class="table-wrap">
			<view class="table-title">
				<view class="tab-item"  @click="changeTab(index)"
				        v-for="(item,index) in tabItems" 
						:key="index" 
						:class="tabIndex === index?'active':''" 
						>
					<text>{{item}}</text>
				</view>
			</view>
			<view class="table-contain">
				<uni-collapse accordion>
					<uni-collapse-item title="详情">
						<view class="table-cont baseInfo">
							<!-- 基本信息 -->
						　　<view class="row">
								<text>执行部门：{{baseInfo.executeGroupName}}</text>
							</view>
						　　<view class="row">
								<text>执行人：{{baseInfo.executeAccountName}}</text>
							</view>
						　　<view class="row">
								<text>优先级：{{baseInfo.taskPriority | taskPriorityFilter}}</text>
							</view>
						　　<view class="row">
								<text>状态：{{baseInfo.status | taskStatusFilter}}</text>
							</view>
						　　<view class="row">
								<text>任务类别：{{baseInfo.taskCatTitle}}</text>
							</view>
						　　<view class="row">
								<text>风险点：{{baseInfo.riskPointTitle}}</text>
							</view> 
						　  <view class="row">
								<text>清单：{{baseInfo.checklistTitle}}</text>
							</view> 　
						　　<view class="row">
								<text>预计开始时间：{{baseInfo.expectedStartTime|isNull}}</text>
							</view>	
						　　<view class="row">
								<text>预计结束时间：{{baseInfo.expectedEndTime|isNull}}</text>
							</view>		
						　　<view class="row">
								<text>实际开始时间：{{baseInfo.actualStartTime|isNull}}</text>
							</view>	
						　　<view class="row">
								<text>实际结束时间：{{baseInfo.actualEndTime|isNull}}</text>
							</view>														　
						</view>	
					</uni-collapse-item>
				</uni-collapse>					
			</view>		
		</view>	
		<view class="handle-wrap" v-if="handleStatus">
			<button type="warn" size="mini" @click="showTransferTask">转交任务</button>
			<button type="success" size="mini" @click="completeTask">完成任务</button>
			<button type="default" size="mini" @click="cancelTask">撤消任务</button>
			<button type="primary" size="mini" @click="allPass">全部通过</button>							
		</view>			
	<!-- 转交 -->
		<view class="transferTask-wrap">
			<uni-drawer ref="transferTask"
				mode="right" :width="260"
				maskClick>
				<view class="uni-drawer-cont">
					<uni-forms ref="form">
						<uni-forms-item label="执行人" required>
							<picker :range="userList" range-key="accountRealName" @change="bindPickerChangeUser" :value="indexUser">
								<view class="uni-input">{{userList[indexUser].accountRealName}}</view>
							</picker>
						</uni-forms-item>
						<uni-forms-item label="意见" name="actionRemark" required>
							<textarea   v-model="formData.actionRemark"
								class="textarea" name="actionRemark" 
								placeholder-style="color:gray"
								placeholder="请输入隐患评审意见/说明/备注" />
						</uni-forms-item>				
					</uni-forms>
					<button class="submit-BT" @click="transferTask" type="primary">提交</button>				
				</view>
			</uni-drawer>
		</view>	
		<view v-for="(item, index) in dataList.hazardList" :key="item.hazardId" class="hazardList-wrap">
			<view class="hazardList">
				<view class="hazardTitle-wrap">
					<view class="hazardTitle">标题：{{item.hazardTitle}}</view>
					<view class="hazardCode">编号：{{item.hazardCode}}</view> 					
				</view>
				<view class="hazard-cont">
					<view v-for="(item1, riskIndex) in item.riskList" 
					:key="item1.riskId" class="hazardItem"
					:class="(item.riskList.length-1)===riskIndex?'delBorder':''">
						<view class="riskList">
							<view class="hazardHead">
								<view>风险源：{{item1.riskSource}}</view>
								<view>危险因素：{{item1.riskReason}}</view>
								<view>等级：{{item1.riskLevel}}</view>						
							</view>
							<view class="riskItem" 
								v-for="(measure, index) in item1.measureList" 
								:key="measure.measureId"
								@click="checkTask(measure,item)">
								<view>措施分类：{{measure.measureTypeTitle}}</view>
								<view>管控措施：{{measure.measureContent}}</view>
								<text>法律依据：{{measure.measureReference}}</text>
								<text class="risk-desc">描述：{{measure.measureDesc}}</text>
								<template v-if="measure.checkResult===0">
									<text class="status primary">处理</text>
								</template>
								<template v-if="measure.checkResult===1">
									<text class="status success">通过</text>
								</template>
								<template v-if="measure.checkResult===2">
									<text class="status error">不通过</text>
								</template>
								<template v-if="measure.checkResult===3">
									<text class="status warn">有隐患</text>
								</template>
								<text class="zhcx-iconfont zhcx-icon-youbianjiantoujiaoduxiao"></text>
							</view>
						</view>
					</view>					
				</view>
			</view>
		</view>			
	</view>
</template>

<script>
	import {taskStatus, taskPriority, riskType, riskLevel, checkResult} from '@/libs/enum';
	import { getUserList} from "@/api/danger.js"
	// import {manageTaskById} from '@/api/task'
	import {getCheckTaskView } from '@/api/entRiskPoint.js'
	import {getTaskDetailById,batchUpdateCheckTaskDoingItem,completeCheckTask,cancelCheckTask,transferCheckTask} from '@/api/task'
	export default {
		filters:{
			riskTypeFilter(val) {
			  return riskType(val)
			},
			riskLevelFilter(val) {
			  return riskLevel(val)
			},
			taskPriorityFilter(val) {
			  return taskPriority(val)
			},
			taskStatusFilter(val) {
			  return taskStatus(val)
			},
			checkResultFilter(val) {
			  return checkResult(val)
			},
			isNull(value){
				if(!value)
				{
					return '--';
				}
				return value;
			}
		},		
		data() {
			return {
				taskId: undefined,
				userId:undefined,
				indexUser:0,
				tabItems:[],
				handleStatus:false,
				dataList:[],
				baseInfo:{
					taskTitle: '',
					taskCatId: undefined,
					taskCatTitle: '',
					launchGroupId: undefined,
					launchGroupName: '',
					launchPositionId: undefined,
					launchPositionName: '',
					launchAccountId: undefined,
					launchAccountName: '',
					executeGroupId: undefined,
					executeGroupName: '',
					executePositionId: undefined,
					executePositionName: '',
					executeAccountId: undefined,
					executeAccountName: '',
					status: undefined,
					taskDesc: '',
					expectedStartTime: undefined,
					expectedEndTime: undefined,
					actualStartTime: undefined,
					actualEndTime: undefined,
					riskPointId: undefined,
					riskPointTitle: '',
					checklistId: undefined,
					checklistTitle: '',
					checklistCatId: undefined,
					checklistCatTitle: '',
					checklistDesc: '',
					checklistVersion: '',
					hazardCount: 0,
					hazardList: []					
				},
				userList:[],
				formData: {
					riskPointId: undefined,
					executeGroupId: undefined,
					executePositionId: undefined,
					executeAccountId: undefined
				}						
			}
		},
		onLoad(options) {
			this.taskId=options.id;
			this.riskPointId=options.riskPointId;
			this.getTaskDetails(options.id);
			this.getUserList();
			this.getTaskView(options.id)
		},
		methods: {
			getTaskView(taskId) {
				getCheckTaskView(taskId).then((resp) => {
					const { code, data, count } = resp
					if (code === 0) {
						this.dataList = data
					}
				}).catch((error) => {
					console.log(error)
				})
			},	
			checkTask(measure,item) {
				//跳转到分级管控检查表页面
				let riskPointId=this.riskPointId;
				let taskId=this.taskId;
				if(!riskPointId){
					uni.showToast({
						title:"riskPointId未找到"
					})
					return;
				}
				if(!taskId){
					uni.showToast({
						title:"taskId未找到"
					})
					return;
				}		
				measure.hazardId=item.hazardId;
				uni.setStorageSync('entRiskPointMeasure',measure)
				uni.navigateTo({
					url: `/views/entRiskPointCheck/checkInfo?taskId=${taskId}&riskPointId=${riskPointId}&type=taskdetail`
				});
			},				
			getTaskDetails(id){
				getTaskDetailById(id).then((res)=>{
					this.baseInfo=res.data;
					let executeAccountId=res.data.executeAccountId;
					let accountInfo=uni.getStorageSync('accountInfo');
					if(accountInfo){
						let userId=(JSON.parse(accountInfo)).userId;
						this.userId=userId;
						this.handleStatus=executeAccountId==userId;//登录用户是executeAccount
					}
				})
			},
			completeTask(){
				const taskId=this.taskId;
				uni.showModal({
					title: '提示',
					content: '此操作将完成任务, 是否继续?',
					success: function (res) {
						if (res.confirm) {
							completeCheckTask(taskId).then((res)=>{
								uni.showToast({
									"title":"操作成功！",
									"icon":"none",
									success() {
										setTimeout(()=>{
											uni.navigateBack({
												animationType:"pop-out"
											})							
										},1500)
									}
								})
							}).catch((res)=>{
								uni.showToast({
									"title":"操作失败！",
									"icon":"none"
								})				
							})
						}
					}
				});			
			},
			cancelTask(){
				uni.showModal({
					title: '提示',
					content: '是否要撤销',
					success: function (res) {
						if (res.confirm) {
							cancelCheckTask(this.taskId).then((res)=>{
								uni.showToast({
									"title":"操作成功！",
									"icon":"none",
									success() {
										setTimeout(()=>{
											uni.navigateBack({
												animationType:"pop-out"
											})							
										},1500)
									}
								})
							}).catch((res)=>{
								uni.showToast({
									"title":"操作失败！",
									"icon":"none"
								})				
							})
						}
					}
				});
			},
			//用户列表
			getUserList() {
				getUserList().then((resp) => {
					const { code, data } = resp
					if (code === 0) {
						this.userList = data
						this.formData.accountIdTo = this.userList[1].accountId
						this.formData.groupIdTo = this.userList[1].groupId
						this.formData.positionIdTo = this.userList[1].positionId
					}
				}).catch((error) => {
					console.log(error)
				})
			},			
			bindPickerChangeUser: function(e) {
				this.indexUser = e.target.value
				this.formData.accountId = this.userList[this.indexUser].accountId
				this.formData.accountIdTo = this.userList[this.indexUser].accountId
				this.formData.groupIdTo = this.userList[this.indexUser].groupId
				this.formData.positionIdTo = this.userList[this.indexUser].positionId
			},	
			showTransferTask(){
				this.$refs.transferTask.open();
			},
			transferTask(){
				let formData={
					taskId:this.taskId,
					riskPointId: this.baseInfo.riskPointId,
					executeGroupId: this.formData.groupIdTo,
					executePositionId: this.formData.positionIdTo,
					executeAccountId: this.formData.accountId				
				};
				transferCheckTask(formData).then((res)=>{
					if(res.code===0){
						this.$refs.transferTask.close();
						uni.showToast({
							"title":"操作成功！",
							"icon":"none",
							success() {
								setTimeout(()=>{
									uni.navigateBack({
										animationType:"pop-out"
									})							
								},1500)
							}
						})					
					}
				}).catch((res)=>{
					console.log(res)
					uni.showToast({
						"title":"操作失败！",
						"icon":"none"
					})				
				})
			},
			allPass(){
				batchUpdateCheckTaskDoingItem(this.taskId,1).then((res)=>{
					console.log(res)
					uni.showToast({
						"title":"操作成功！",
						"icon":"none",
						success() {
							setTimeout(()=>{
								uni.navigateBack({
									animationType:"pop-out"
								})							
							},1500)
						}
					})
				}).catch((res)=>{
					console.log(res)
					uni.showToast({
						"title":"操作失败！",
						"icon":"none"
					})				
				})				
			},
			getTaskById(taskId){
				//通告id查询任务
				console.log({taskId})
			  manageTaskById(taskId).then((resp) => {
				const { code, data, msg } = resp
				if (code === 0) {
				  // this.taskTitle = data.taskTitle
				  this.viewData = data
				} else {
				  this.$message.error(msg)
				}
			  }).catch((error) => {
				console.log(error)
			  })				
			}			
		}
	}
</script>

<style lang="scss" scoped>
.task-detail-wrap{
	padding:20upx 20upx 200upx;
	.table-wrap{
		.table-title{
			display: flex;
			.tab-item {
				height: 80upx;
				line-height: 80upx;
				flex-grow: 1;
				text-align: center;
				transition: 0.3s;
				&.active{
					color: #FFFFFF;
					background: #00A0FF;					
				}
			}			
		}
		.table-contain{
			.table-cont {
				.row{
					height: 78upx;
					line-height: 78upx;
					border-bottom: 2upx solid #EDE1D9;
					// background-color: #fff;
					&.desc{
						height: auto;
						line-height: 1.5;
						min-height: 78upx;
						border-bottom: none;
						padding-top: 16upx;
						display: flex;
						justify-content: flex-start;
						.desc-txt{
							width: 600upx;
							word-break: break-word;
						}
					}
				}				
			}	
		}
	}
	.handle-wrap{
		width:710upx;
		display: flex;
		justify-content: space-around;	
		padding: 20upx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
		background-color: rgba(255,255,255,0.6);
		button{
			width: 200upx;
			line-height: 2;
			margin: 0;
			margin-right: 20upx;
			padding: 15upx 0;			
			&:last-child{
				margin-right: 0;
			}
			&[type="success"]{
				background: #09BB07 !important;
				color: #fff;
			}
		}
	}	
	.uni-drawer-cont{
		padding: 20upx;
		.textarea{
			width: 85%;
			border: 1px solid #eaeaea;
			padding: 20upx;
			font-size: 28upx;
		}	
		.submit-BT{
			background-color: #0081FF;
			color: #fff;
		}
	}
		.uni-tr-hazard {
		  font-size: 13px;
		  font-weight: bold;
		  text-indent: 12px;
		  background: #0081FF;
		  padding: 10px 20px;
		  color: #fff;
		}
		.hazardList-wrap{
			.hazardList {
				padding:30upx;
				margin-bottom:30upx;
				background-color: #f5f5f5;
				// border-radius: 10upx;
				box-shadow: 0 0 6upx rgba(0,0,0,0.5);
				.hazardHead{
					background-color:#fff;
					font-weight: 600;
					padding-bottom: 10px;
				}
				.hazardTitle-wrap{
					.hazardTitle{
						font-weight: 600;
						font-size: 34upx;
					}	
					.hazardCode{
						font-weight: 600;
						font-size: 34upx;
						padding-bottom: 15upx;
					}				
				}	
				.hazardItem{
					background-color: #fff;
					margin-top: 28upx;
					border-top: 1px solid #eaeaea;
					padding:10upx 0;
					&.delBorder{
						border-top:none;
					}				
				}	
				.risk-desc{
					margin-left: 16upx;
				}
				.riskList{
					.riskItem{
						border-top: 1px solid #eaeaea;
						position: relative;
						padding: 20upx 0;
						.zhcx-iconfont{
							font-size: 16px;
							position: absolute;
							right: 10upx;
							top: 50%;
							transform: translateY(-50%);
						}
						.status{
							&.primary{
								color: #1aad19;
							}
							&.warn{
								color: #e6a23c;
							}
							&.success{
								color:#0081FF;
							}
							&.error{
								color: red;
							}
						}
					}				
				}					
			}					
		}			
}
</style>