Web_TracerMethodology/pages/mainPointsDetail/mainPointsDetail.vue

<template>
	<view class="mainPointsDetailPage">
		<scroll-view scroll-y="true" class="scroll-y">
		<view class="checkItem">
			<view class="chBg">
				<image src="../../static/chahexiang-bg.png" mode="" class="img"></image>
				<text class="title">查核项</text>
			</view>
			<image src="../../static/tuli.png" mode="" class="tlImg"></image>
			<view class="chContent">
				<view class="checkItemName">{{data.checkItemName?data.checkItemName:''}}</view>
				<view class="checkPointName">{{data.checkPointName?data.checkPointName:''}}</view>
				<view class="cont">
					<view class="floatLeft other">
						<view class="letterTitle2">{{data.deptName?data.deptName:''}}</view>
						<view class="letterTitle">查核单位</view>
					</view>
					<view class="floatLeft borderLine"></view>
					<view class="floatLeft other">
						<view class="letterTitle2">{{data.checkModelName?data.checkModelName:''}}</view>
						<view class="letterTitle">查核方式</view>
					</view>
					<view class="floatLeft borderLine"></view>
					<view class="floatLeft other">
						<view class="letterTitle2">{{data.lastResult?data.lastResult:''}}</view>
						<view class="letterTitle">上次结果</view>
					</view>
					<view class="floatLeft borderLine"></view>
					<view class="floatLeft other">
						<view class="letterTitle2">{{data.checkResult?data.checkResult:''}}</view>
						<view class="letterTitle">本次结果</view>
					</view>
				</view>
				<view class="checked">
					<view class="checkItem" @click="checkedOne(1)" :style="Index==1?{backgroundColor:'#3377FF',color:'#fff'}:{backgroundColor:'#EBEFF7'}">不适用
						<view v-if="lastIndex == 1"><image src="../../static/shangci.png" mode="" class="img"></image>
						<text class="lastName">上次</text></view>
					</view>
					<view class="checkItem" @click="checkedOne(2)" :style="Index==2?{backgroundColor:'#3377FF',color:'#fff'}:{backgroundColor:'#EBEFF7'}">无缺失
						<view v-if="lastIndex == 2"><image src="../../static/shangci.png" mode="" class="img"></image>
						<text class="lastName">上次</text></view>
					</view>
					<view class="checkItem" @click="checkedOne(3)" :style="Index==3?{backgroundColor:'#3377FF',color:'#fff'}:{backgroundColor:'#EBEFF7'}">主要缺失
						<view v-if="lastIndex == 3"><image src="../../static/shangci.png" mode="" class="img"></image>
						<text class="lastName">上次</text></view>
					</view>
					<view class="checkItem" @click="checkedOne(4)" :style="Index==4?{backgroundColor:'#3377FF',color:'#fff'}:{backgroundColor:'#EBEFF7'}">次要缺失
						<view v-if="lastIndex == 4"><image src="../../static/shangci.png" mode="" class="img"></image>
						<text class="lastName">上次</text></view>
					</view>
					<view class="checkItem" @click="checkedOne(5)" :style="Index==5?{backgroundColor:'#3377FF',color:'#fff'}:{backgroundColor:'#EBEFF7'}">观察事项
						<view v-if="lastIndex == 5"><image src="../../static/shangci.png" mode="" class="img"></image>
						<text class="lastName">上次</text></view>
					</view>
				</view>
				<view class="more">
					<text>查看改善历史</text>
					<view class="moreImg">
						<image src="../../static/blue-arrow.png" mode="" class="moreImg2"></image>
					</view>
					
				</view>
			</view>
		</view>
		<view v-if="data.checkModelName == '访谈'" class="talk">
			<view v-for="(item,i) in talkList">
				<view class="talkTitle">
					<text>访谈内容{{i+1}}{{i==0?'':'（访谈人员：护士、医生）'}}</text>
					<text v-if="i!=0" class="del" @click="del(i)">删除</text>
				</view>
				<view>
					<view class="talkResult">
						<text class="seeName">查核结果</text>
						<textarea maxlength="300" class="seeTextarea" value="" placeholder="请输入" :value="item.talkResult" @blur="changeTextarea($event,i)"></textarea>
					</view>
					<view class="talkImg" @click="imgClick(i)">
						<tm-upload-img
						  label="上传图片"
						  :filePaths="item.filePath"
						  :isMultiple="true"
						  @changeFilePaths="changeFilePaths2"
						/>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="see">
			<view class="seeResult">
				<text class="seeName">查核结果</text>
				<textarea maxlength="300" class="seeTextarea" value="" placeholder="请输入" :value="recordList[0].talkResult" @blur="changeTextarea2"></textarea>
			</view>
			<view class="seeImg">
				<tm-upload-img
				  label="上传图片"
				  :filePaths="filePath"
				  :isMultiple="true"
				  @changeFilePaths="changeFilePaths"
				/>
			</view>
		</view>

		<button class="insert" @click="insert" v-if="data.checkModelName == '访谈'">+ 增加一条记录</button>
		</scroll-view>
		<button type="primary" class="sureDetail" @click="sureDetail">完成</button>
	</view>
</template>

<script>
	export default {
	  data() {
	    return {
			data:{},//详情数据
			lastIndex:null,//上次选中的结果
			Index:null,//点击修改本次选中样式
			filePath:[],
			recordList:[{seeResult:'', filePath: [] }],
			talkLength:1,
			talkList:[{talkResult:'',filePath:[],}],
			editIndex:null,
			resultConfigList:[],
			id:'',
		}
	  },
	  mounted() {
	  	this.checkTaskDetail();
		this.getPeizhiList();
	  },
	  methods:{
		  checkTaskDetail(){
			  this.$store.dispatch({
				  type: "mainPointsDetail/commActions",
				  payload: {
				    key: "checkTaskDetail",
				    data: {
				      id: this.id,
				    },
				  },
			  }).then(res=>{
				  if(res){
					  this.data = res;
					  if(res && res.lastResult == '不适用'){
						  this.lastIndex = 1;
					  }else if(res && res.lastResult == '无缺失'){
						  this.lastIndex = 2;
					  }else if(res && res.lastResult == '主要缺失'){
						  this.lastIndex = 3;
					  }else if(res && res.lastResult == '次要缺失'){
						  this.lastIndex = 4;
					  }else if(res && res.lastResult == '观察事项'){
						  this.lastIndex = 5;
					  }else{
						  this.lastIndex = 0;
					  }
				  }
			  })
		  },
		  getPeizhiList(){
			  this.$store.dispatch({
			      type: "configure/commActions",
			      payload: {
			        key: "getResultConfig",
			      },
			    })
			    .then((res) => {
					console.log(res)
			      this.resultConfigList = res ? res : [];
			    });
		  },
		  checkedOne(data){
			  this.Index = data;
			  if(data==1){
				  this.data.checkResult = '不适用'
			  }else if(data==2){
				  this.data.checkResult = '无缺失'
			  }else if(data==3){
				  this.data.checkResult = '主要缺失'
			  }else if(data==4){
				  this.data.checkResult = '次要缺失'
			  }else if(data==5){
				  this.data.checkResult = '观察事项'
			  }else{
				  this.data.checkResult = ''
			  }
		  },
		  changeFilePaths(filePaths, index) {
			let _recordList = [...this.recordList];
			_recordList[index].filePath = filePaths;
			this.filePath = _recordList[0].filePath;
		  },
		  insert(){
			  let list = [...this.talkList];
			  if(list.length<10){
				  list.push({talkResult:'',filePath:[],})
				  this.talkList = list;
			  }
			  
		  },
		  del(index){
			  let list = [...this.talkList];
			  let list2 = [];
			  for(let i = 0; i<list.length; i++){
				  if(i != index){
					  list2.push(list[i])
				  }
			  }
			  this.talkList = list2;
		  },
		  changeFilePaths2(filePaths, index){
			  for(let j = 0; j < this.talkList.length; j++){
			  	  this.talkList[this.editIndex].filePath = filePaths
			  }
		  },
		  changeTextarea(e,i){
			  for(let j = 0; j < this.talkList.length; j++){
				  this.talkList[i].talkResult = e.detail.value
			  }
		  },
		  changeTextarea2(e){
			  this.recordList[0].seeResult = e.target.value;
		  },
		  imgClick(i){
			  this.editIndex = i;
		  },
		  sureDetail(e){
			  if(this.Index){
				  let params = {
					id: this.data.id, 
					checkResult: this.data.checkResult, 
					checkResultRequestList: []
				  }
				  if(this.data.checkModelName == '访谈'){
					let list = [];
					for(let i = 0; i<this.talkList.length; i++){
					  let path = '';
					  for(let j = 0; j<this.talkList[i].filePath.length; j++){
						  if(j == 0){
							  path += `${this.talkList[i].filePath[j]}`
						  }else{
							  path += `,${this.talkList[i].filePath[j]}`
						  }
					  }
					  let item = {
						  checkResultId:i,
						  checkResultDescribe:this.talkList[i].talkResult,
						  checkResultUrl:path
					  }
					  list.push(item)
					}
					params.checkResultRequestList = list;
				  }else{
					  let list = [];
					  let path = '';
					  for(let j = 0; j<this.recordList[0].filePath.length; j++){
						  if(j == 0){
							  path += `${this.recordList[0].filePath[j]}`
						  }else{
							  path += `,${this.recordList[0].filePath[j]}`
						  }
					  }
				      let item = {
						checkResultId:1,
						checkResultDescribe:this.recordList[0].seeResult,
						checkResultUrl:path
				      }
					  list.push(item)
					  params.checkResultRequestList = list;
				  }

				  this.$store.dispatch({
					type: "mainPointsDetail/commActions",
					payload: {
						key: "saveCheckTaskDetail",
						data: {
							...params
						},
					},
				  }).then(res=>{
					  if(res){
						  for(let i = 0; i<this.resultConfigList.length;i++){
							if(this.resultConfigList[i].name == params.checkResult && (this.resultConfigList[i].resultType == 2 || this.resultConfigList[i].resultType == 3)){
							  let param = {
								  situationId:this.data.situationId,
								  situationName:this.data.situationName,
								  checkGroupId:this.data.checkGroupId,
								  checkGroupName:this.data.checkGroupName,
								  checkItemId:this.data.checkItemId,
								  checkItemName:this.data.checkItemName,
								  checkPointId:this.data.checkPointId,
								  checkPointName:this.data.checkPointName,
								  deptName:this.data.deptName,
								  deptId:this.data.deptId,
								  appointFlag:false,
								  desicion:0,
								  taskType:"1",
								  checkId:this.data.checkId,
								  checkResult:this.resultConfigList[i].id,
								  receiveEmpId:this.data.receiveEmpId,
								  receiveEmpName:this.data.receiveEmpName,
								  checkDetailId:this.data.id
							  }
							  this.$store.dispatch({
								type: "mission/commActions",
								payload: {
									key: "comTaskCirculation",
									data: {
										...param
									},
								},
							  })
							}
						}
					  }
				  })
				  
				  
			  }
		  }
	  },
	  onLoad({ date }){
	    this.id = date;
	  },
	}
</script>

<style lang="less">
	.mainPointsDetailPage{
		position: relative;
		// min-height: 75rpx;
		// overflow-y: auto;
		height: 100%;
		.scroll-y{
			height: calc(100% - 75rpx);
		}
		.checkItem{
			padding-top: 47.5rpx;
			width: 100%;
			height: 450rpx;
			background-color: #fff;
			position: relative;
			.chBg{
				position: absolute;
				top: 0;
				left: 0;
				width: 125rpx;
				height: 37.5rpx;
				.img{
					width: 125rpx;
					height: 37.5rpx;
				}
				.title{
					position: absolute;
					top: 8.75rpx;
					left: 25rpx;
					font-size: 20rpx;
					color: #fff;
					font-weight: 500;
					line-height: 20rpx;
				}
			}
			.tlImg{
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: 25rpx;
				top: 25rpx;
			}
			.chContent{
				width: 100%;
				.checkItemName{
					margin-left: 31.25rpx;
					font-size: 25rpx;
					line-height: 55rpx;
					color: #292C33;
				}
				.checkPointName{
					margin-left: 31.25rpx;
					font-size: 17.5rpx;
					line-height: 17.5rpx;
					color: #7A8599;
				}
				.cont{
					height: 135rpx;
					.floatLeft{
						float: left;
					}
					.borderLine{
						margin-top: 56.25rpx;
						width: 0.62rpx;
						height: 25rpx;
						background-color: #DADEE6;
					}
					.other{
						padding:40rpx 0rpx;
						height: 95rpx;
						width: 187.18rpx;
						text-align: center;
						.letterTitle{
							font-size: 17.5rpx;
							color: #7A8599;
							line-height: 17.5rpx;
						}
						.letterTitle2{
							height: 22.5rpx;
							font-size: 22.5rpx;
							line-height: 22.5rpx;
							color: #292C33;
							margin-bottom: 15rpx;
							font-weight: 500;
						}
					}
				}
				.checked{
					margin-bottom: 40rpx;
					padding:0rpx 15.62rpx;
					height: 75rpx;
					.checkItem{
						margin:0rpx 9.37rpx;
						padding: 0;
						width: 125rpx;
						height: 75rpx;
						background: #EBEFF7;
						float: left;
						line-height: 75rpx;
						text-align: center;
						color: #292C33;
						border-radius: 20rpx;
						position: relative;
						.img{
							width: 51.25rpx;
							height: 25rpx;
							position: absolute;
							right: -6.25rpx;
							top: -6.25rpx;
						}
						.lastName{
							color: #fff;
							font-size: 13.75rpx;
							line-height: 13.75rpx;
							position: absolute;
							right: 5rpx;
							top: -1.87rpx;
						}
					}
				}
				.more{
					margin:0rpx 25rpx 0rpx 25rpx;
					text-align: center;
					border-top: 0.62rpx solid #DADEE6;
					text{
						padding: 29.37rpx 0rpx 27.5rpx;
						margin-right: 10rpx;
						line-height: 22.5rpx;
						font-size: 22.5rpx;
						color: #3377FF;
						display: inline-block;
						vertical-align: top;
					}
					.moreImg{
						margin-top: 28.75rpx;
						width: 12.37rpx;
						height: 21.21rpx;
						display: inline-block;
					}
					.moreImg2{
						width: 12.37rpx;
						height: 21.21rpx;
					}
				}
			}
		}
		.see{
			margin-top: 15rpx;
			height: 287.5rpx;
			background-color: #fff;
			// padding-left: 25rpx;
			.seeResult{
				margin-left: 25rpx;
				padding-top: 32.5rpx;
				// height: 200rpx;
				border-bottom: 1px solid #DADEE6;
				.seeName{
					width: 175rpx;
					font-size: 22.5rpx;
					color: #525866;
					line-height: 22.5rpx;
					display: inline-block;
				}
				.seeTextarea{
					width: 531.25rpx;
					height: 155rpx;
					display: inline-block;
					font-size: 22.5rpx;
					line-height: 27.5rpx;
				}
			}
			.seeImg{
				min-height: 87.5rpx;
				.seeName2{
					width: 175rpx;
					font-size: 22.5rpx;
					color: #525866;
					line-height: 87.5rpx;
					display: inline-block;
				}
			}
		}
		.talk{
			.talkTitle{
				padding:25rpx 25rpx 15rpx;
				font-size: 22.5rpx;
				line-height: 22.5rpx;
				color: #666F80;
				.del{
					float: right;
					color: #3377FF;
				}
			}
			.talkResult{
				padding-left: 25rpx;
				padding-top: 32.5rpx;
				border-bottom: 1px solid #DADEE6;
				background-color: #fff;
				.seeName{
					width: 175rpx;
					font-size: 22.5rpx;
					color: #525866;
					line-height: 22.5rpx;
					display: inline-block;
				}
				.seeTextarea{
					width: 531.25rpx;
					height: 155rpx;
					display: inline-block;
					font-size: 22.5rpx;
					line-height: 27.5rpx;
				}
			}
			.talkImg{
				min-height: 87.5rpx;
				.seeName2{
					width: 175rpx;
					font-size: 22.5rpx;
					color: #525866;
					line-height: 87.5rpx;
					display: inline-block;
				}
			}
		}
		.insert{
			background-color: #fff;
			font-size: 22.5rpx;
			line-height: 22.5rpx;
			color: #3377FF;
			padding:26.25rpx;
		}
		.sureDetail{
			width: 100%;
			height: 75rpx;
			font-size:22.5rpx;
			background-color:#3377FF; 
			line-height: 75rpx;
			position: absolute;
			bottom: 0rpx;
		}
	}
</style>