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.goodsList | filterNames('name')}}</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.outDeptUserDTO ? dataInfo.patientInspectLogData.outDeptUserDTO.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 && 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;
           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();
    }
  }
</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>