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"
          @click="toTuLi"
        ></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="checked-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="checked-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="checked-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="checked-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="checked-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" @click="toHistory">
            <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" v-if="data.display?data.display:false">完成</button> -->
	<view class="bottomMenuGroup">
		<view class="menuBtn" @click="goToPrevPage">
			<image class="threeLineMenuIcon" src="/static/threeLineMenu.png" ></image>
		</view>
		<view class="prevBtn" @click="switchItem(1)">下一项</view>
		<view class="nextBtn" @click="sureDetail" v-if="data.display?data.display:false">完成</view>
	</view>
  </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: "",
      checkPointId: "",
	  itemBelongGroup:[],
	  itemId:''
    };
  },
  mounted() {
    this.checkTaskDetail(this.id);
    this.getPeizhiList();
  },
  methods: {
    checkTaskDetail(id) {
      this.$store.dispatch({
          type: "mainPointsDetail/commActions",
          payload: {
            key: "checkTaskDetail",
            data: {
              id: 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) => {
          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,
                        },
                      },
                    }).then(() => {
                      uni.navigateTo({
                        url: `/pages/auditItemDetails/auditItemDetails?id=${this.data.id}&checkPointId=${this.checkPointId}`,
                      });
                    });
                }
              }
            }
          });
      } else {
        uni.showModal({
          title: "检查选项未选择",
          showCancel: false,
        });
      }
    },
    toTuLi() {
      uni.navigateTo({
        url: `/pages/legendDetails/legendDetails?checkItemId=${this.data.checkItemId}&checkPointId=${this.checkPointId}`,
      });
    },
    toHistory() {
      uni.navigateTo({
        url: `/pages/improve-mission-list/improve-mission-list?situationId=${this.data.situationId}`,
      });
    },
	goToPrevPage(){
		window.history.back();
	},
	switchItem(num){
		let current = this.itemBelongGroup.filter(item=>{
			  return item.id == this.id;
		});
		if(num<0){
			if(current[0].index==0){
				 uni.showToast({
				     title: '已经没有上一项',
				     duration: 2000,
					 icon:'none'
				 });
				 return;
			}
		}
		if(num>0){
			if(current[0].index==this.itemBelongGroup.length-1){
				 uni.showToast({
				     title: '已经没有下一项',
				     duration: 2000,
					 icon:'none'
				 });
				 return;
			}
		}
		let needItemIndex = num>0?current[0].index+1:current[0].index-1;
		let needItemId = this.itemBelongGroup[needItemIndex].id;
		this.checkTaskDetail(needItemId);	
	}
  },
  onLoad({ id, checkPointId }) {
    this.id = id;
    this.checkPointId = checkPointId;
	//接收来自上个页面所传过来的数据
	const eventChannel = this.getOpenerEventChannel();
	eventChannel.on('acceptDataFromOpenerPage', (data)=>{
	    console.log({data});
		this.itemBelongGroup =data.data[0].responseList.map((item,index)=>{
			    return({
					index:index,
					id:item['id'],
				})
		});
		//重新导航进页面，删除缓存并设置最新数据
		uni.removeStorageSync('itemBelongGroup');
	    uni.setStorageSync('itemBelongGroup',this.itemBelongGroup);
	});
	//手动刷新页面，获取本地缓存
	const itemBelongGroup = uni.getStorageSync('itemBelongGroup');
	this.itemBelongGroup = itemBelongGroup;
  },
};
</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%;
    min-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;
        .checked-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;
  }
  .bottomMenuGroup {
  	position: fixed;
  	bottom: 0;
  	width: 100%;
  	height: 75rpx;
  	display: flex;
  	flex-direction: row;
  	background: #FFFFFF;
  	border-top:0.62rpx solid #DADEE6;
  	.menuBtn {
  		display: flex;
  		width: 75rpx;
  		height: 75rpx;
  		justify-content: center;
  		align-items: center;
  		border-right: 0.62rpx solid #DADEE6;
  		.threeLineMenuIcon {
  			width: 26.25rpx;
  			height: 21.25rpx;
  		}
  		
  	}
	.prevBtn,.nextBtn {
		display: flex;
		flex: 1;
	    justify-content: center;
		height:75rpx;
		line-height:75rpx;
		font-size: 22.5rpx;
		font-family: SourceHanSansCN-Normal, SourceHanSansCN;
		font-weight: 400;
		color: #3377FF;
	}
  	.prevBtn {
  		border-right: 0.62rpx solid #DADEE6;
  	}
	.nextBtn{
		color: #FFFFFF;
		background: #3377FF;
	}
  }
}
</style>