zy-wechat/pages/patientInspectLog/patientInspectLogDetail.vue

<template>
  <view class="incidentDetail">
    <view class="head">
      <view class="tab" :class="{active: tab.value === dataInfo.tabActiveValue}" v-for="tab in dataInfo.tabs" :key="tab.id" @click="clickTab(tab.value)">
        {{tab.name}}<text v-if="tab.num !== ''">({{tab.num}})</text>
      </view>
    </view>
    <scroll-view scroll-y class="body">
      <!-- 基本信息 -->
      <template v-if="dataInfo.tabActiveValue === '1'">
        <view class="detail_head">
          <text class="title">基本信息</text>
          <view class="other">
            <view class="status">{{dataInfo.patientInspectLogData.state ? dataInfo.patientInspectLogData.state.name : ''}}</view>
          </view>
        </view>
        <view class="detail_item_wrap">
          <view class="deital_item">
            <text class="name">患者科室：</text>
            <text class="value">{{dataInfo.patientInspectLogData.deptName}}</text>
          </view>
          <view class="deital_item">
            <text class="name">患者姓名：</text>
            <text class="value">{{dataInfo.patientInspectLogData.patientName}}</text>
            <text class="value text_value">年龄：<text v-if="dataInfo.patientInspectLogData.age !== undefined">{{dataInfo.patientInspectLogData.age }}岁</text></text>
          </view>
          <view class="deital_item">
            <text class="name">住院号：</text>
            <text class="value">{{dataInfo.patientInspectLogData.patientCode}}</text>
            <text class="value text_value">床号：{{dataInfo.patientInspectLogData.bedNum }}</text>
          </view>
          <view class="deital_item">
            <text class="name">护理等级：</text>
            <text class="value">{{dataInfo.patientInspectLogData.careLevel ? dataInfo.patientInspectLogData.careLevel.name : ''}}</text>
            <text class="value text_value">危重等级：{{dataInfo.patientInspectLogData.illnessState ? dataInfo.patientInspectLogData.illnessState.name : ''}}</text>
          </view>
        </view>

        <view class="detail_head">
          <text class="title">陪检信息</text>
        </view>
        <view class="detail_item_wrap">
          <view class="deital_item">
            <text class="name">陪检方式：</text>
            <text class="value">{{dataInfo.patientInspectLogData.tripTypeDTO ? dataInfo.patientInspectLogData.tripTypeDTO.inspectMode : ''}}</text>
          </view>
          <view class="deital_item">
            <text class="name">携带设备：</text>
            <text class="value">{{dataInfo.patientInspectLogData.goodsNames}}</text>
          </view>
          <view class="deital_item">
            <text class="name">出科时间：</text>
            <text class="value">{{dataInfo.patientInspectLogData.outDeptTime | formatDate('yyyy-MM-dd hh:mm')}}</text>
          </view>
          <view class="deital_item">
            <text class="name">出科人：</text>
            <text class="value">{{dataInfo.patientInspectLogData.backDeptUserDTO ? dataInfo.patientInspectLogData.backDeptUserDTO.name : ''}}</text>
          </view>
        </view>
        
        <view class="detail_head">
          <text class="title">最新操作</text>
        </view>
        <view class="detail_item_wrap">
          <view class="deital_item">
            <text class="name">签到时间：</text>
            <text class="value">{{dataInfo.patientInspectLogData.signTime | formatDate('yyyy-MM-dd hh:mm')}}</text>
          </view>
          <view class="deital_item">
            <text class="name">签到人：</text>
            <text class="value">{{dataInfo.patientInspectLogData.signUserDTO ? dataInfo.patientInspectLogData.signUserDTO.name : ''}}</text>
          </view>
          <view class="deital_item">
            <text class="name">签到科室：</text>
            <text class="value">{{dataInfo.patientInspectLogData.signDeptDTO ? dataInfo.patientInspectLogData.signDeptDTO.dept : ''}}</text>
          </view>
        </view>
        
        <view class="detail_head">
          <text class="title">回科信息</text>
        </view>
        <view class="detail_item_wrap">
          <view class="deital_item">
            <text class="name">回科时间：</text>
            <text class="value">{{dataInfo.patientInspectLogData.backDeptTime | formatDate('yyyy-MM-dd hh:mm')}}</text>
          </view>
          <view class="deital_item">
            <text class="name">回科人：</text>
            <text class="value">{{dataInfo.patientInspectLogData.backDeptUserDTO ? dataInfo.patientInspectLogData.backDeptUserDTO.name : ''}}</text>
          </view>
        </view>
      </template>

      <!-- 检查信息 -->
      <template v-if="dataInfo.tabActiveValue === '2'">
        <view class="info">
          <view v-for="item in dataInfo.valueList" :key="item.id" class="infoItem">
            <view class="name">检查项目：<text class="fwb">{{item.inspectName}}</text></view>
            <view class="name">检查单号：<text>{{item.inspectCode}}</text></view>
            <view class="name">状态：<text>{{item.inspectState ? item.inspectState.name : ''}}</text></view>
            <view class="name">检查地点：<text>{{item.execDept ? item.execDept.dept : ''}}</text></view>
          </view>
        </view>
      </template>

      <!-- 流程图 -->
      <template v-if="dataInfo.tabActiveValue === '3'">
        <view class="process_item_wrap">
          <view class="process_item" v-for="item in dataInfo.logList" :key="item.id">
            <view class="process_item_top">
              <view class="name">{{item.operationType ? item.operationType.name : '' }}</view>
              <view class="value" v-if="item.remark">（{{item.remark}}）</view>
            </view>
            <view class="process_item_bottom">
              <text class="name">{{item.operationTime | formatDate('yyyy-MM-dd hh:mm')}}</text>
              <text class="value" v-if="item.username">{{item.username}}</text>
            </view>
          </view>
        </view>
      </template>
    </scroll-view>
    <view class="foot_common_btns">
      <button @click="toList()" type="default" class="primaryButton btn">返回</button>
      <button v-if="dataInfo.patientInspectLogData.state.value === '4'" @click="tagClick(dataInfo.patientInspectLogData)" type="default" class="primaryButton btn">标记回科</button>
    </view>
    <!-- 弹窗 -->
    <showModel :title="models.title" :icon="models.icon" :disjunctor="models.disjunctor" :content="models.content" @ok="ok" @cancel="cancel" @know="know" :operate="models.operate"></showModel>
  </view>
</template>

<script>
  import { get, post, SM, deleteIt, webHandle } from "../../http/http.js";
  export default {
    data(){
      return {
        selectData: {},
        // 弹窗model
        models: {
          disjunctor: false,
        },
        dataInfo: {
          tabs: [
             {id: 1, name: '基本信息', value: '1', num: ''},
             {id: 2, name: '检查信息', value: '2', num: ''},
             {id: 3, name: '流程信息', value: '3', num: ''},
          ],
          tabActiveValue: 1,//当前选择的tab
          patientInspectLogId: undefined,//闭环ID
          patientInspectLogData: {},//闭环对象
          valueList: [],//检查信息
          logList: [],//流程图
         }
      }
    },
    methods: {
      // 标记回科
      tagClick(data){
        this.selectData = data;
        this.models = {
          disjunctor: true,
          title: "提示",
          content: `您确认${data.patientName}患者已回科吗？`,
          icon: "warn",
          operate: {
            ok: "确定",
            cancel: "取消",
          },
        };
      },
      //确定
      ok() {
        this.models.disjunctor = false;
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        post("/nurse/patientInspect/setPatientInspectBackDept", {
          pilId: this.selectData.id,
        }).then((res) => {
          uni.hideLoading();
          let _this = this;
          if (res.state == 200) {
            uni.showToast({
              icon: "none",
              mask: true,
              title: "操作成功！",
            });
            setTimeout(() => {
              _this.toList();
            },300)
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg || '请求数据失败！'
            });
          }
        })
      },
      //取消
      cancel() {
        this.models.disjunctor = false;
      },
      // 点击tab
      clickTab(tabValue){
       if(this.dataInfo.tabActiveValue == tabValue){
         return;
       }
       this.dataInfo.tabActiveValue = tabValue;
       this.initData()
      },
      // tab业务数据接口
      initData(){
       if(this.dataInfo.tabActiveValue === '1'){
         
       }else if(this.dataInfo.tabActiveValue === '2'){
         this.getValue();
       }else if(this.dataInfo.tabActiveValue === '3'){
         this.getLog();
       }
      },
      // 获取检查信息
      getValue(){
       uni.showLoading({
         title: "加载中",
         mask: true,
       });
       let postData = {
           pilId: this.dataInfo.patientInspectLogId,
       };
       post(`/nurse/patientInspect/getPatientInspectList`, postData).then(res => {
         uni.hideLoading();
         if(res.status == 200){
           this.dataInfo.valueList = res.list || [];
         }else{
           uni.showToast({
             icon: 'none',
             title: res.msg || '请求数据失败！'
           });
         }
       })
      },
      // 获取流程信息
      getLog(){
       uni.showLoading({
         title: "加载中",
         mask: true,
       });
      let postData = {
        "idx": 0,
        "sum": 9999,
        "patientInspectLogLog": {
          "pilId": this.dataInfo.patientInspectLogId
        }
      };
       post(`/simple/data/fetchDataList/patientInspectLogLog`, postData).then(res => {
         uni.hideLoading();
         if(res.status == 200){
           this.dataInfo.logList = res.list || [];
         }else{
           uni.showToast({
             icon: 'none',
             title: res.msg || '请求数据失败！'
           });
         }
       })
      },
      // 获取详情
      getDetail(){
       uni.showLoading({
         title: "加载中",
         mask: true,
       });

       get(`/simple/data/fetchData/patientInspectLog/${this.dataInfo.patientInspectLogId}`).then(res => {
         uni.hideLoading();
         if(res.status == 200){
           this.dataInfo.patientInspectLogData = res.data || {};
           this.dataInfo.logList = this.dataInfo.patientInspectLogData.logList || [];
           
           this.dataInfo.tabActiveValue = this.dataInfo.tabs[0].value;
           console.log(this.dataInfo.tabActiveValue)
           this.initData()
         }else{
           uni.showToast({
             icon: 'none',
             title: res.msg || '请求数据失败！'
           });
         }
       })
      },
      // 返回列表
      toList(){
       uni.reLaunch({
         url: `/pages/patientInspectLog/patientInspectLogList`
       })
      }
    },
    onLoad(options){
      this.dataInfo.patientInspectLogId = options.patientInspectLogId;
      this.getDetail();
    }
  }
 //  import chunk from 'lodash-es/chunk'
 //  import { ref, reactive } from 'vue'
 //  import { onLoad } from '@dcloudio/uni-app'
 //  import { api_listAttachment, api_inspectionTaskDetail, api_inspectionFormValues } from "@/http/api.js"
 //  import { defaultColor } from '@/static/js/theme.js'
 //  import { useSetTitle } from '@/share/useSetTitle.js'
 //  import { filterFormatDate } from '@/filters/filterFormatDate.js'

 //  useSetTitle();
 //  const { formatDate }  = filterFormatDate();

 //  // 主题颜色
 //  const primaryColor = ref(defaultColor)
	
 //  // 数据
 //  const dataInfo = reactive({
 //    tabs: [
 //      {id: 1, name: '基础信息', value: '1', num: ''},
 //      // {id: 2, name: '巡检信息', value: '2', num: ''},
 //      {id: 3, name: '流程图', value: '3', num: ''},
 //    ],
 //    tabActiveValue: 0,//当前选择的tab
 //    patientInspectLogId: undefined,//巡检执行ID
 //    patientInspectLogData: {},//巡检执行对象
 //    inspectionTaskImgs: [],//巡检图片
 //    valueList: [],//巡检信息
 //    logList: [],//流程图
 //  })
  
 //  function getValuex(value){
 //    return value.formItemConfigList ? value.formItemConfigList.map(v => v.valuex).toString() : value.valuex;
 //  }

 //  // 获取巡检信息
 //  function getValue(){
 //    uni.showLoading({
 //      title: "加载中",
 //      mask: true,
 //    });
 //    let postData = {
 //        "idx": 0,
 //        "sum": 9999,
 //        "inspectionFormValues": {
 //          taskId: dataInfo.patientInspectLogId,
 //        }
 //    };
 //    api_inspectionFormValues(postData).then(res => {
 //      uni.hideLoading();
 //      if(res.status == 200){
 //        let valueList = res.list || [];
 //        let imgFlag = valueList.some(v => v.inspectionFormItemDTO.type.value == 7);

 //        if(imgFlag){
 //          valueList.forEach(v => {
 //            if(v.inspectionFormItemDTO.type.value == 7){
 //              v.valuex = [];
 //            }
 //          })
 //        }

 //        dataInfo.valueList = chunk(valueList, 3);

 //        if(imgFlag){
 //          getInspectionImgs();
 //        }
 //      }else{
 //        uni.showToast({
 //          icon: 'none',
 //          title: res.msg || '请求数据失败！'
 //        });
 //      }
 //    })
 //  }

 //  // 预览图片
 //  function previewImg(index, type, imgList){
 //    uni.previewImage({
 //      current: index,
 //      urls: imgList.map(v => v.previewUrl),
 //      longPressActions: {
 //        itemList: ['发送给朋友', '保存图片', '收藏'],
 //        success: function(data) {
 //          console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
 //        },
 //        fail: function(err) {
 //          console.log(err.errMsg);
 //        }
 //      }
 //    });
 //  }

 //  // 初始化表单
 //  function initData(){
 //    if(dataInfo.tabActiveValue === '1'){
      
 //    }else if(dataInfo.tabActiveValue === '2'){
 //      getValue();
 //    }else if(dataInfo.tabActiveValue === '3'){
      
 //    }
 //  }

 //  // 点击tab
 //  function clickTab(tabValue){
 //    if(dataInfo.tabActiveValue == tabValue){
 //      return;
 //    }
 //    dataInfo.tabActiveValue = tabValue;
 //    initData()
 //  }

 //  // 获取巡检执行详情
 //  function getDetail(){
 //    uni.showLoading({
 //      title: "加载中",
 //      mask: true,
 //    });

 //    api_inspectionTaskDetail(dataInfo.patientInspectLogId).then(res => {
 //      uni.hideLoading();
 //      if(res.status == 200){
 //        dataInfo.patientInspectLogData = res.data || {};
 //        dataInfo.logList = dataInfo.patientInspectLogData.logList || [];
        
 //        // 巡检信息
 //        if(dataInfo.patientInspectLogData.status.value === '2'){
 //          let flag = dataInfo.tabs.some(v => v.value === '2');
 //          !flag && dataInfo.tabs.splice(1, 0, {id: 2, name: '巡检信息', value: '2', num: ''});
 //        }
        
 //        dataInfo.tabActiveValue = dataInfo.tabs[0].value;
 //        initData()
 //      }else{
 //        uni.showToast({
 //          icon: 'none',
 //          title: res.msg || '请求数据失败！'
 //        });
 //      }
 //    })
 //  }
	
 //  // 获取巡检图片
 //  function getInspectionImgs(){
 //    uni.showLoading({
 //      title: "加载中",
 //      mask: true,
 //    });
 //    api_listAttachment('inspection', dataInfo.patientInspectLogId).then(res => {
 //      uni.hideLoading();
 //      res.data = res.data || [];
 //      res.data.forEach(v => {
 //        v.previewUrl = location.origin + "/file" + v.relativeFilePath;
 //        v.thumbFilePath = location.origin + "/file" + v.thumbFilePath;
 //      })
      
 //      let imgList = res.data || [];
 //      dataInfo.valueList.forEach(v => {
 //        v.forEach(vv => {
 //          imgList.forEach(item => {
 //            if(vv.itemId == item.recordId){
 //              if(vv.valuex && vv.valuex.length){
 //                vv.valuex.push(item)
 //              }else{
 //                vv.valuex = [item];
 //              }
 //            }
 //          })
 //        })
 //      })
 //    })
 //  }

 //  // 返回巡检列表
 //  function toList(){
 //    uni.reLaunch({
 //      url: `/pages/inspection/inspectionExecute/inspectionExecute`
 //    })
 //  }
  
 //  // 查看故障单
 //  function viewIncidentDetail(incidentId){
 //    uni.navigateTo({
 //      url: `/pages/incidentDetail/incidentDetail?incidentId=${incidentId}`
 //    })
 //  }

 //  onLoad((option) => {
 //    dataInfo.patientInspectLogId = option.patientInspectLogId;
	// 	getDetail();
 //  })
</script>

<style lang="scss" scoped>
.popup-content{
	padding: 40rpx;
}
.incidentDetail{
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #EBEBEB;
  .head{
    height: 88rpx;
    display: flex;
    position: fixed;
    z-index: 99;
    width: 100%;
    background-color: #fff;
    font-size: 30rpx;
    .tab{
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 4rpx solid transparent;
      position: relative;
      &:last-of-type{
        &:after{
          display: none;
        }
      }
      // &:after{
      //   content: '';
      //   position: absolute;
      //   right: 0;
      //   top: 50%;
      //   transform: translateY(-50%);
      //   width: 1rpx;
      //   height: 44rpx;
      //   background-color: #515151;
      // }
      &.active{
        color: #49B856;
        border-color: #49B856;
      }
    }
  }
  .body{
    margin-top: 88rpx;
    box-sizing: border-box;
    flex: 1;
    min-height: 0;
    border-top: 7rpx solid #EBEBEB;
    .phone-filled{
      margin-left: 5rpx;
    }
    .mic-filled{
      margin-right: 100rpx;
    }
    .detail_item_wrap{
      padding-bottom: 24rpx;
    }
    .detail_head{
      padding: 24rpx;
      border-top: 8rpx solid #D2D2D2;
      border-bottom: 1rpx solid #D2D2D2;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &:first-of-type{
        border-top: none;
      }
      .title{
        font-size: 26rpx;
        color: #49B856;
        padding-left: 18rpx;
        position: relative;
        &:before{
          content: '';
          width: 8rpx;
          height: 25rpx;
          background-color: #49B856;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .other{
        display: flex;
        align-items: center;
        .priority{
          font-size: 26rpx;
          margin-right: 15rpx;
        }
        .status{
          font-size: 26rpx;
        }
      }
    }

    .deital_item{
      font-size: 26rpx;
      color: #555;
      padding: 24rpx 24rpx 0;
      display: flex;
      align-items: center;
      .name{
        width: 5em;
        margin-right: 24rpx;
      }
      .value{
        flex: 2;
        word-break: break-all;
        &.text_value{
          flex: 1;
        }
        &.img{
          display: flex;
          .imgItem{
            width: 82rpx;
            height: 82rpx;
            margin-right: 24rpx;
            &:last-of-type{
              margin-right: 0;
            }
          }
					.resourceItem{
						width: 100rpx;
						height: 100rpx;
						margin-right: 24rpx;
						&:last-of-type{
						  margin-right: 0;
						}
					}
					.resourceItem-audio{
						width: 300rpx;
						height: 60rpx;
					}
        }
      }
    }

    .summaryItem_bodyItem{
      padding: 24rpx 24rpx 0;
      font-size: 26rpx;
      .summaryItem_bodyItem_top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .value{
          padding-left: 48rpx;
          flex-shrink: 0;
        }
      }
      .summaryItem_bodyItem_bottom{
        margin-top: 24rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .name{
          text-align: right;
          flex: 1;
        }
        .value{
          width: 220rpx;
          text-align: right;
          flex-shrink: 0;
        }
      }
    }

    .summaryItem_bodyItem_total{
      text-align: right;
      padding: 24rpx;
      font-size: 26rpx;
    }

    .summaryItem_total{
      text-align: center;
      padding-top: 24rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #49B856;
      border-top: 1rpx solid #D2D2D2;
    }
    
    .info{
      .infoItem{
        padding: 24rpx;
        background-color: #fff;
        border-top: 8rpx solid #D2D2D2;
        font-size: 24rpx;
        &:first-of-type{
          border-top: none;
        }
        .name{
          margin-top: 24rpx;
          &:first-of-type{
            margin-top: 0;
          }
        }
      }
    }

    .process_item_wrap{
      padding: 38rpx;
      .process_item{
        &:last-of-type{
          .process_item_bottom{
            border-left: none;
          }
        }
        .process_item_top{
          padding-left: 30rpx;
          display: flex;
          align-items: center;
          position: relative;
          &:before{
            content: '';
            position: absolute;
            left: -13rpx;
            top: 50%;
            width: 26rpx;
            height: 26rpx;
            border-radius: 50%;
            background-color: #49B856;
            transform: translateY(-50%);
          }
          .name{
            font-size: 30rpx;
          }
          .value{
            margin-left: 20rpx;
            font-size: 22rpx;
            color: #A1A1A1;
						flex: 1;
          }
        }
        .process_item_bottom{
          min-height: 82rpx;
          border-left: 1rpx solid #B7BDC6;
          margin-top: 5rpx;
          padding-left: 30rpx;
          display: flex;
          font-size: 24rpx;
          color: #A1A1A1;
          .value{
            margin-left: 20rpx;
          }
        }
      }
    }

    .appraise_detail{
      padding: 24rpx 24rpx 24rpx 40rpx;
      .appraise_detail_top{
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 26rpx;
        .name{
          color: #A1A1A1;
        }
        .value{}
      }
      .appraise_detail_bottom{
        font-size: 30rpx;
        margin-top: 24rpx;
        word-break: break-all;
      }
    }
  }
}
</style>