zy-pda/pages/patientDetail/patientDetail.vue

<template>
  <view class="orderDetail">
    <!-- 头部 -->
    <view class="orderDetail_header">
      <view class="orderDetail_header_item" v-for="tab in tabs" :key="tab.id" :class="{active:tab.id === selectedTab}"
        @click="debouncedChangeTab(tab.id)">
        {{tab.name}}
      </view>
    </view>
    <!-- tab -->
    <!-- 患者信息 -->
    <view class="orderDetail_info" v-if="selectedTab === 1">
      <scroll-view scroll-y class="orderDetail_infoItem" v-if="info.id">
        <view class="orderDetail_infoItem_header">
          <view class="orderDetail_infoItem_header_title">
            <view class="icon"></view>
            <view class="taskNameAndWorkerName">
              <text class="taskName">患者姓名:{{info.patientName||'暂无'}}</text>
            </view>
          </view>
          <text class="orderDetail_infoItem_header_more">床号:{{info.bedNum?info.bedNum + '床':'暂无'}}</text>
        </view>
        <view class="orderDetail_infoItem_item">
          <view class="orderDetail_infoItem_item_content">
            <text class="orderDetail_infoItem_item_name">住院号</text>
            <text class="orderDetail_infoItem_item_value">{{info.residenceNo || '暂无'}}</text>
          </view>
          <view class="orderDetail_infoItem_item_content">
            <text class="orderDetail_infoItem_item_name">护理级别</text>
            <text class="orderDetail_infoItem_item_value">{{info.careLevel ?info.careLevel.name: '暂无'}}</text>
          </view>
          <view class="orderDetail_infoItem_item_content">
            <text class="orderDetail_infoItem_item_name">病情级别</text>
            <text class="orderDetail_infoItem_item_value">{{info.illnessState ?info.illnessState.name: '暂无'}}</text>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 患者标本 -->
    <view class="orderDetail_info" v-if="selectedTab ===2">
      <scroll-view scroll-y class="orderDetail_infoItem">
        <view class="orderDetail_infoItem_header">
          <view class="orderDetail_infoItem_header_title">
            <view class="icon"></view>
            <view class="taskNameAndWorkerName">
              <text class="taskName">标本信息</text>
            </view>
          </view>
        </view>
        <!-- 标本信息 -->
        <view class="orderDetail_infoItem_item business business_specimen">
          <view class="inspect_specimen">
            <uni-table stripe emptyText="暂无更多数据">
              <!-- 表头行 -->
              <uni-tr class="th">
                <uni-th align="center" width="68">标本类型</uni-th>
                <uni-th align="center" width="71">标本编码</uni-th>
                <uni-th align="center" width="66">状态</uni-th>
                <uni-th align="center" width="71">科室</uni-th>
              </uni-tr>
              <!-- 表格数据行 -->
              <uni-tr v-for="data in info.specimens" :key="data.id"
                @click.native="toDetail(data.id,'specimen',data.scode)">
                <uni-td align="center">{{data.stype?data.stype.name:'暂无'}}</uni-td>
                <uni-td align="center">{{data.scode || '暂无'}}</uni-td>
                <uni-td align="center">{{data.speState?data.speState.name:'暂无'}}</uni-td>
                <uni-td align="center" class="td" v-if="data.checkDept">
                  {{deptDisplay==2?data.checkDept.deptalias:data.checkDept.dept}}
                  <image class="urgent" v-if="data.urgent == 1" src="../../static/imgs/icon_ji.png" mode="widthFix">
                  </image>
                </uni-td>
                <uni-td align="center" class="td" v-else>
                  暂无
                  <image class="urgent" v-if="data.urgent == 1" src="../../static/imgs/icon_ji.png" mode="widthFix">
                  </image>
                </uni-td>
              </uni-tr>
            </uni-table>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 患者检查 -->
    <view class="orderDetail_info" v-if="selectedTab === 3">
      <scroll-view scroll-y class="orderDetail_infoItem">
        <view class="orderDetail_infoItem_header">
          <view class="orderDetail_infoItem_header_title">
            <view class="icon"></view>
            <view class="taskNameAndWorkerName">
              <text class="taskName">检查信息</text>
            </view>
          </view>
        </view>
        <!-- 检查信息 -->
        <view class="orderDetail_infoItem_item business business_inspect">
          <view class="inspect_item" v-for="item in info.inspects" :key="item.id" @click="toDetail(item.id,'inspect')">
            <view class="inspect_item_name">
              {{item.inspectName||'暂无'}}
            </view>
            <view class="inspect_item_info">
              <view class="inspect_item_dept">预约时间</view>
              <view class="inspect_item_number">
                {{item.yyTime || '暂无'}}
              </view>
            </view>
            <view class="inspect_item_info">
              <view class="inspect_item_dept">到达时间</view>
              <view class="inspect_item_number">
                {{item.arriveTime || '暂无'}}
              </view>
            </view>
            <view class="inspect_item_info">
              <view class="inspect_item_dept">检查状态</view>
              <view class="inspect_item_number">
                {{item.inspectState?item.inspectState.name:'暂无'}}
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 底部 -->
    <seiminFooterBtn :btns="btns"></seiminFooterBtn>
    <seiminModel ref="seiminModel"></seiminModel>
    <seiminPicker ref="sPicker" :title="pickerTitle" titleColor="#808080" titleFontSize="28rpx" confirmColor="#333"
      confirmFontSize="38rpx" confirmFontWeight="500" itemFontSize="32rpx" @onClose="closePicker"
      @onConfirm="confirmPicker" :pickerList="taskTypeList">
    </seiminPicker>
  </view>
</template>

<script>
  import {
    backPress
  } from '../../utils/index.js';
  import {
    debounce
  } from 'lodash/function';
  import {
    reqGetPatientInspectInfo,
    reqDeptTSPTaskType,
    reqBuildTrip,
  } from "../../request/api.js";
  import {
    mapState,
    mapMutations,
  } from "vuex";
  import {
    GDSTATE
  } from "../../utils/enum.gdstate.js";
  import {
    ASSOCIATION_TYPES
  } from "../../utils/enum.association_types.js";
  import {
    showAppraise,
    openRecallModal,
    openExecModal,
    showJiaji,
  } from "../../utils/index.js";
  export default {
    onBackPress() {
      backPress();
    },
    data() {
      return {
        reFresh: '',
        checkedShowMsg: {}, //当前选中的任务类型的buildtrip信息
        pickerTitle: "", //一键建单picker的title
        taskTypeListResource: [], //任务类型列表(请求的原始数据)
        taskTypeList: [], //任务类型列表
        debouncedChangeTab: null,
        // 路由传参
        queryParams: {},
        // 关联类型
        ASSOCIATION_TYPES,
        // 选项卡
        tabs: [{
            id: 1,
            name: '患者信息'
          },
          {
            id: 2,
            name: '患者标本'
          },
          {
            id: 3,
            name: '患者检查'
          },
        ],
        // 当前选中的tab
        selectedTab: 1,
        // 工单信息
        info: {},
        // 流程信息
        logList: [],
        //底部按钮
        btns: [{
          name: "回到列表",
          type: "default",
          click: () => {
            uni.navigateTo({
              url: "/pages/patientList/patientList",
            });
          },
        }, {
          name: "一键建单",
          type: "default",
          click: () => {
            this.buildOrder(this.queryParams);
          },
        }],
      };
    },
    computed: {
      ...mapState('other', ["deptDisplay"]),
    },
    methods: {
      ...mapMutations('other', ['changeQucikCreateOrderType', 'clearPatientBuildData', 'changePatientBuildData']),
      //关闭
      closePicker() {
        this.$refs.sPicker._close();
      },
      //打开
      openPicker() {
        this.$refs.sPicker._open();
      },
      //确定：接收子组件传来的参数
      confirmPicker(checkedObj) {
        console.log(checkedObj);
        // 补充：清除建单数据
        this.clearPatientBuildData();
        // 2,获取buildTrip信息
        let postData = {
          "taskTypeId": checkedObj.value,
          "patientCode": this.selectedPatient.patientCode
        };
        uni.showLoading({
          mask: true,
          title: '加载中'
        })
        reqBuildTrip(postData).then(res => {
          uni.hideLoading();
          let taskType = this.taskTypeListResource.find(v => v.id == checkedObj.value);
          let patientTaskType = taskType || {};
          if (patientTaskType.associationType.value == this.ASSOCIATION_TYPES['患者其他服务业务']) {
            // 患者其他服务业务--无法用status判断，运输过程“默认患者所在科室”没有返回status==200，估计是后端漏掉了这种情况，如果后期后端可以返回status，则可以根据status判断。
            if (res.start && res.end) {
              if (res.status == 100013 || res.status == 100014 || res.status == 100015) {
                this.checkedShowMsg = res.data;
                //需要选择起点科室和目标科室
                this.changeQucikCreateOrderType({
                  type: "patient",
                  taskTypeId: checkedObj.value,
                  patientTaskType,
                  selectedPatient: this.selectedPatient,
                  patientBuildTrip: res,
                });
                uni.navigateTo({
                  url: "/pages/quickCreateOrder/quickCreateOrder",
                });
              } else {
                //无需选择科室
                this.checkedShowMsg = res.data;
                this.changePatientBuildData({
                  key: 'dept',
                  value: {
                    startDept: res.start.start.list[0],
                    endDept: res.end.end.list[0],
                  }
                });
                this.changeQucikCreateOrderType({
                  type: "patient",
                  taskTypeId: checkedObj.value,
                  patientTaskType,
                  selectedPatient: this.selectedPatient,
                  patientBuildTrip: res,
                });
                uni.navigateTo({
                  url: "/pages/patientBuild/patientBuild",
                });
              }
            } else {
              this.$refs.seiminModel.show({
                skin: "toast",
                icon: "error",
                content: res.msg || "获取数据失败",
              });
              throw new Error(res.msg || '获取数据失败');
            }
          } else if (patientTaskType.associationType.value == this.ASSOCIATION_TYPES['患者陪检业务']) {
            // 患者陪检业务
            if (res.status == 200) {
              this.checkedShowMsg = res.data;
              this.changePatientBuildData({
                key: 'dept',
                value: {
                  startDept: {
                    id: res.startDept,
                    dept: res.startDeptName,
                    deptalias: res.startDeptAlias
                  }, //待改
                  endDept: {
                    id: res.startDept,
                    dept: res.startDeptName,
                    deptalias: res.startDeptAlias
                  }, //待改
                }
              });
              this.changeQucikCreateOrderType({
                type: "patient",
                taskTypeId: checkedObj.value,
                patientTaskType,
                selectedPatient: this.selectedPatient,
                patientBuildTrip: res,
              });
              uni.navigateTo({
                url: "/pages/appointmentInspect/appointmentInspect",
              });
            } else {
              this.$refs.seiminModel.show({
                skin: "toast",
                icon: "error",
                content: res.msg || "获取数据失败",
              });
              throw new Error(res.msg || '获取数据失败');
            }
          }
        })
      },
      // 一键建单
      buildOrder(patient) {
        this.selectedPatient = patient;
        // 1,请求任务类型列表
        uni.showLoading({
          mask: true,
          title: '加载中'
        })
        reqDeptTSPTaskType().then(res => {
          uni.hideLoading();
          if (res.status == 200) {
            res.data = res.data || [];
            this.taskTypeListResource = res.data;
            this.taskTypeList = res.data.map((v) => ({
              value: v.id,
              label: v.taskName,
            }));
            this.pickerTitle = `您选择了<b class="green">${patient.patientName}</b>患者，请选择下方具体服务项`;
            this.openPicker();
          } else {
            this.$refs.seiminModel.show({
              skin: "toast",
              icon: "error",
              content: res.msg || "获取数据失败",
            });
            throw new Error(res.msg || "获取数据失败");
          }
        })
      },
      init(queryParams) {
        console.log(queryParams)
        this.queryParams = queryParams;
        this.changeTab(1);
      },
      // 跳转详情
      toDetail(id, associationType, scode) {
        if (scode) {
          uni.navigateTo({
            url: `/pages/detail/detail?id=${id}&associationType=${associationType}&scode=${scode}`
          })
        } else {
          uni.navigateTo({
            url: `/pages/detail/detail?id=${id}&associationType=${associationType}`
          })
        }
      },
      // 切换tab
      changeTab(id) {
        this.selectedTab = id;
        switch (id) {
          case 1:
            this.getInfo(this.queryParams);
            break;
          case 2:
            break;
          case 3:
            break;
        }
      },
      //获取工单信息数据
      getInfo(queryParams) {
        uni.showLoading({
          mask: true,
          title: '加载中',
        })
        let postData = {
          "patientCode": queryParams.patientCode
        };
        console.log(queryParams.patientCode)
        reqGetPatientInspectInfo(postData).then(res => {
          uni.hideLoading();
          if (res.status == 200) {
            // 工单信息
            res.data.specimens = res.data.specimens || [];
            res.data.inspects = res.data.inspects || [];
            this.info = res.data;
          } else {
            this.$refs.seiminModel.show({
              skin: 'toast',
              icon: 'error',
              content: '请求失败',
            })
          }
        })
      },
    },
    onLoad(queryParams) {
      console.log(queryParams);
      this.init(queryParams);
    },
    created() {
      this.debouncedChangeTab = debounce(this.changeTab, 166);
    },
    beforeDestroy() {
      this.debouncedChangeTab.cancel()
    }
  }
</script>

<style lang="scss" scoped>
  .orderDetail {
    padding-bottom: 108rpx;

    // 头部
    .orderDetail_header {
      position: fixed;
      z-index: 98;
      width: 100%;
      height: 88rpx;
      background-color: #fff;
      color: #333;
      @include flex;

      .orderDetail_header_item {
        flex: 1;
        font-size: 32rpx;
        @include border(right);
        @include border(bottom);
        @include flex(center, center);

        &:last-of-type {
          border-right: none;
        }

        &.active {
          color: $defaultColor;
          border-bottom: 4rpx solid $defaultColor;
        }
      }
    }

    // tab
    // 工单详情
    .orderDetail_info {
      padding: 108rpx 24rpx;

      .orderDetail_infoItem {
        width: 702rpx;
        height: 80vh;
        background-color: #fff;
        margin-top: 8rpx;
        border-radius: 8rpx;
        position: relative;
        padding: 0 24rpx 24rpx;
        font-size: 32rpx;
        @include border;
        @include semicircle(#f9fafb, 82rpx);
        @include flex(flex-start, stretch, column);

        .ji,
        .jiaji {
          width: 60rpx;
          position: absolute;
          right: 0;
          top: 0;
        }

        .orderDetail_infoItem_header {
          height: 86rpx;
          @include border($directive:bottom, $style:dashed);
          @include flex(space-between, center);

          .orderDetail_infoItem_header_title {
            color: #333;
            flex: 1;
            @include flex(flex-start, center);

            .icon {
              width: 10rpx;
              height: 46rpx;
              border-radius: 2rpx;
              background-color: #F0F6ED;
              @include btn_background;
            }

            .taskNameAndWorkerName {
              flex: 1;
              @include flex;

              .taskName {
                max-width: 10em;
                margin-left: 8rpx;
                font-size: 38rpx;
                font-weight: bold;
                @include clamp;
              }
            }
          }

          .orderDetail_infoItem_header_more {
            color: $defaultColor;
            font-weight: bold;
            font-size: 38rpx;
            @include clamp;
          }
        }

        .orderDetail_infoItem_item {
          padding-top: 12rpx;
          padding-bottom: 12rpx;
          color: #333;
          font-size: 30rpx;
          flex: 1;
          @include border(bottom);
          @include flex(flex-start, stretch, column);

          &.process {
            padding-top: 90rpx;
            padding-bottom: 90rpx;
          }

          &:last-of-type {
            border-bottom: none;
          }

          // 工单信息
          .orderDetail_infoItem_item_content {
            margin-top: 20rpx;
            @include flex(space-between, stretch);

            .orderDetail_infoItem_item_name {
              font-size: 34rpx;
              color: #666;
              max-width: 4em;
            }

            .orderDetail_infoItem_item_value {
              font-size: 38rpx;
              color: #333;
              font-weight: bold;
              max-width: 420rpx;
              text-align: justify;
              word-break: break-all;
            }
          }

          // 流程信息
          .orderDetail_process_item {
            min-height: 120rpx;
            line-height: 50rpx;
            color: #333;
            @include flex(center);

            &:last-of-type {
              .step_icon {
                &::after {
                  display: none;
                }
              }
            }

            .step_infoStart {
              font-size: 28rpx;
              flex: 1;
              @include flex(flex-end);

              .step_time {
                margin-left: 16rpx;
              }
            }

            .step_icon {
              font-size: 38rpx;
              margin-left: 30rpx;
              margin-right: 30rpx;
              position: relative;
              color: #E5E9ED;

              &.active {
                color: #07863C;
              }

              &::after {
                content: '';
                position: absolute;
                top: 60rpx;
                left: 18rpx;
                width: 1px;
                height: calc(100% - 70rpx);
                background-color: #DDE1E5;
              }
            }

            .step_infoEnd {
              font-size: 34rpx;
              flex: 1;
              padding-bottom: 16rpx;
            }
          }

          // 业务信息-检查
          &.business_inspect {
            .inspect_info {
              font-size: 34rpx;
              color: #333;
              padding-top: 20rpx;
              padding-bottom: 20rpx;
              @include border($directive:bottom, $style:dashed);

              .inspect_info_block {
                height: 60rpx;
                @include flex(space-between, center);

                .inspect_info_left {
                  @include flex;

                  .inspect_info_icon {
                    width: 50rpx;
                    height: 50rpx;
                    line-height: 50rpx;
                    border-radius: 50%;
                    font-size: 28rpx;
                    margin-right: 8rpx;
                    @include flex(center, center);

                    &.green {
                      color: $defaultColor;
                      border: 1px solid $defaultColor;
                      background-color: rgba(73, 184, 86, 0.1);
                    }

                    &.red {
                      color: #FF3B53;
                      border: 1px solid #FF3B53;
                      background-color: #FFE8EB;
                    }
                  }

                  .inspect_info_name {
                    font-weight: bold;
                  }
                }

                .inspect_info_right {
                  font-weight: bold;
                }
              }
            }

            .inspect_item {
              color: #333;
              font-size: 34rpx;
              line-height: 48rpx;
              padding-top: 26rpx;
              padding-bottom: 26rpx;
              @include border($directive:bottom, $style:dashed);

              .inspect_item_name {
                font-weight: bold;
              }

              .inspect_item_yytime {
                font-weight: bold;
              }

              .inspect_item_info {
                margin-top: 16rpx;
                margin-bottom: 16rpx;
                @include flex(space-between, center);

                .inspect_item_dept {
                  flex: 1;
                  word-break: break-all;
                  @include clamp;
                }

                .inspect_item_number {
                  flex: 1;
                  text-align: right;
                  word-break: break-all;
                  @include clamp;
                }
              }
            }
          }

          // 业务信息-标本
          &.business_specimen {
            font-size: 34rpx;

            .th {
              background-color: red;
              @include btn_background;

              th {
                color: #fff;
              }
            }

            .td {
              position: relative;

              .urgent {
                width: 60rpx;
                position: absolute !important;
                right: 0;
                top: 0;
              }
            }

            .table--border {
              border: none;
            }

            ::v-deep .uni-table {
              min-width: 0;
            }

            ::v-deep .uni-table-td {
              word-break: break-all;
            }
          }

          // 业务信息-药品
          &.business_drugsBag {
            .drugsBag_item {
              color: #333;
              font-size: 34rpx;
              margin-top: 20rpx;
              @include flex(space-between, center);

              .drugsBag_item_name {}

              .drugsBag_item_value {
                font-weight: bold;
              }
            }
          }
        }
      }
    }
  }
</style>