标本详情和检查详情

pages.json

@@ -40,6 +40,13 @@
         "navigationBarBackgroundColor": "#2C2D31"
       }
 
+    }, {
+      "path": "pages/detail/detail",
+      "style": {
+        "navigationBarTitleText": "详情",
+        "navigationBarBackgroundColor": "#2C2D31"
+      }
+
     }
   ],
   "globalStyle": {

pages/detail/detail.vue

@@ -0,0 +1,654 @@
+<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-show="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">检查单号</text>
+            </view>
+          </view>
+          <text class="orderDetail_infoItem_header_more">{{info.inspectCode||'暂无'}}</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.patientName||'暂无'}}</text>
+          </view>
+          <view class="orderDetail_infoItem_item_content">
+            <text class="orderDetail_infoItem_item_name">患者床号</text>
+            <text class="orderDetail_infoItem_item_value">{{info.bedNum ?info.bedNum + '床': '暂无'}}</text>
+          </view>
+          <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.inspectName||'暂无'}}</text>
+          </view>
+          <view class="orderDetail_infoItem_item_content">
+            <text class="orderDetail_infoItem_item_name">预约时间</text>
+            <text class="orderDetail_infoItem_item_value">{{info.yyTime||'暂无'}}</text>
+          </view>
+          <view class="orderDetail_infoItem_item_content">
+            <text class="orderDetail_infoItem_item_name">叫号信息</text>
+            <text class="orderDetail_infoItem_item_value">{{info.reservationNumber||'暂无'}}</text>
+          </view>
+          <view class="orderDetail_infoItem_item_content">
+            <text class="orderDetail_infoItem_item_name">状态</text>
+            <text class="orderDetail_infoItem_item_value">{{info.inspectState?info.inspectState.name:'暂无'}}</text>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+    <!-- 标本信息 -->
+    <view class="orderDetail_info" v-show="selectedTab === 2">
+      <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">标本编码</text>
+            </view>
+          </view>
+          <text class="orderDetail_infoItem_header_more">{{info.scode||'暂无'}}</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.patientName||'暂无'}}</text>
+          </view>
+          <view class="orderDetail_infoItem_item_content">
+            <text class="orderDetail_infoItem_item_name">患者床号</text>
+            <text class="orderDetail_infoItem_item_value">{{info.bedNum ?info.bedNum + '床': '暂无'}}</text>
+          </view>
+          <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.stype?info.stype.name:'暂无'}}</text>
+          </view>
+          <view class="orderDetail_infoItem_item_content">
+            <text class="orderDetail_infoItem_item_name">检验科室</text>
+            <text
+              class="orderDetail_infoItem_item_value">{{info.checkDept?(deptDisplay == 2?info.checkDept.deptalias:info.checkDept.dept):'暂无'}}</text>
+          </view>
+          <view class="orderDetail_infoItem_item_content">
+            <text class="orderDetail_infoItem_item_name">申请科室</text>
+            <text
+              class="orderDetail_infoItem_item_value">{{info.sickRoom?(deptDisplay == 2?info.sickRoom.deptalias:info.sickRoom.dept):'暂无'}}</text>
+          </view>
+          <view class="orderDetail_infoItem_item_content">
+            <text class="orderDetail_infoItem_item_name">状态</text>
+            <text class="orderDetail_infoItem_item_value">{{info.speState?info.speState.name:'暂无'}}</text>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+    <!-- 流程信息 -->
+    <view class="orderDetail_info" v-show="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>
+      </scroll-view>
+    </view>
+    <!-- 底部 -->
+    <seiminFooterBtn :btns="btns"></seiminFooterBtn>
+    <seiminModel ref="seiminModel"></seiminModel>
+  </view>
+</template>
+
+<script>
+  import {
+    debounce
+  } from 'lodash/function';
+  import {
+    reqFetchData,
+    reqFetchWorkOrderLog,
+  } from "../../request/api.js";
+  import {
+    mapState
+  } 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 {
+    data() {
+      return {
+        debouncedChangeTab: null,
+        // 路由传参
+        queryParams: {},
+        // 关联类型
+        ASSOCIATION_TYPES,
+        // 选项卡
+        tabs: [],
+        // 当前选中的tab
+        selectedTab: 1,
+        // 标本信息、检查信息
+        info: {},
+        //底部按钮
+        btns: [],
+      };
+    },
+    computed: {
+      ...mapState('other', ["deptDisplay"]),
+    },
+    methods: {
+      init(queryParams) {
+        this.queryParams = queryParams;
+        let type = 0;
+        switch (queryParams.associationType) {
+          case 'inspect':
+            this.tabs = [{
+                id: 1,
+                name: '检查信息'
+              },
+              {
+                id: 3,
+                name: '过程信息'
+              },
+            ];
+            this.changeTab(1);
+            break;
+          case 'specimen':
+            this.tabs = [{
+                id: 2,
+                name: '标本信息'
+              },
+              {
+                id: 3,
+                name: '过程信息'
+              },
+            ];
+            this.changeTab(2);
+            break;
+        }
+
+      },
+      // 格式化时分秒
+      // （时间小于一分钟则显示秒，时间大于一分钟则显示分钟数，如超出一小时则显示小时和分钟。）time单位:秒
+      formatTime(time) {
+        let timeStr = "";
+        if (time >= 0 && time < 60) {
+          // 秒
+          timeStr = time + "秒";
+        } else if (time >= 60 && time < 3600) {
+          // 分钟
+          timeStr = Math.floor(time / 60) + "分钟";
+        } else if (time >= 3600) {
+          // 时 + 分
+          let h = "";
+          let m = "";
+          h = Math.floor(time / 3600) + "小时";
+          m = time % 3600 >= 60 ? Math.floor((time % 3600) / 60) + "分钟" : "";
+          timeStr = h + m;
+        }
+        return timeStr;
+      },
+      // 计算流程信息耗时
+      filterTime(step) {
+        let num = 0;
+        step.forEach((e) => {
+          num += e.difTime;
+        });
+        return this.formatTime(num / 1000);
+      },
+      // 切换tab
+      changeTab(id) {
+        this.selectedTab = id;
+        switch (id) {
+          case 1:
+            this.getInspect(this.queryParams);
+            break;
+          case 2:
+            this.getSpecimen(this.queryParams);
+            break;
+          case 3:
+            break;
+        }
+      },
+      //获取检查信息数据
+      getInspect(queryParams) {
+        uni.showLoading({
+          mask: true,
+          title: '加载中',
+        })
+        reqFetchData('api', 'inspect', queryParams.id).then(res => {
+          uni.hideLoading();
+          if (res.status == 200) {
+            // 工单信息
+            this.info = res.data;
+            //底部按钮处理
+            this.btns = [{
+              name: "返回",
+              type: "default",
+              click: () => {
+                uni.navigateBack();
+              },
+            }];
+          } else {
+            this.btns = [{
+              name: "回到列表",
+              type: "default",
+              click: () => {
+                uni.navigateTo({
+                  url: "/pages/orderList/orderList",
+                });
+              },
+            }, ];
+            this.$refs.seiminModel.show({
+              skin: 'toast',
+              icon: 'error',
+              content: '请求失败',
+            })
+          }
+        })
+      },
+      //获取标本信息数据
+      getSpecimen(queryParams) {
+        uni.showLoading({
+          mask: true,
+          title: '加载中',
+        })
+        reqFetchData('api', 'specimen', queryParams.id).then(res => {
+          uni.hideLoading();
+          if (res.status == 200) {
+            // 流程信息
+            this.info = res.data;
+            //底部按钮处理
+            this.btns = [{
+              name: "返回",
+              type: "default",
+              click: () => {
+                uni.navigateBack();
+              },
+            }];
+          } else {
+            //底部按钮处理
+            this.btns = [{
+              name: "返回",
+              type: "default",
+              click: () => {
+                uni.navigateBack();
+              },
+            }];
+            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 0;
+
+      .orderDetail_infoItem {
+        width: 702rpx;
+        height: calc(100vh - 340rpx);
+        background-color: #fff;
+        margin-top: 8rpx;
+        border-radius: 8rpx;
+        position: relative;
+        padding: 0 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: #333;
+            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;
+                    background-color: #FFE8EB;
+                    border-radius: 50%;
+                    border: 1px solid #FF3B53;
+                    color: #FF3B53;
+                    font-size: 28rpx;
+                    margin-right: 8rpx;
+                    @include flex(center, center);
+
+                    &.green {
+                      border: 1px solid $defaultColor;
+                      background-color: rgba(73, 184, 86, 0.1);
+                    }
+                  }
+
+                  .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>

pages/orderDetail/orderDetail.vue

@@ -196,7 +196,8 @@
           </view>
           <!-- 检查信息 -->
           <block v-if="orderInfo.taskType.associationType.value==ASSOCIATION_TYPES['患者陪检业务']">
-            <view class="inspect_item" v-for="item in orderInfo.checkList" :key="item.id">
+            <view class="inspect_item" v-for="item in orderInfo.checkList" :key="item.id"
+              @click="toDetail(item.id,orderInfo.taskType.associationType.value)">
               <view class="inspect_item_name">
                 {{item.inspectName||'暂无'}}
               </view>
@@ -227,7 +228,8 @@
                 <uni-th align="center" width="71">科室</uni-th>
               </uni-tr>
               <!-- 表格数据行 -->
-              <uni-tr v-for="data in orderInfo.specimenSet" :key="data.id">
+              <uni-tr v-for="data in orderInfo.specimenSet" :key="data.id"
+                @click.native="toDetail(data.id,orderInfo.taskType.associationType.value)">
                 <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>
@@ -373,6 +375,12 @@
         this.queryParams = queryParams;
         this.changeTab(1);
       },
+      // 跳转详情
+      toDetail(id, associationType) {
+        uni.navigateTo({
+          url: `/pages/detail/detail?id=${id}&associationType=${associationType}`
+        })
+      },
       // 格式化时分秒
       // （时间小于一分钟则显示秒，时间大于一分钟则显示分钟数，如超出一小时则显示小时和分钟。）time单位:秒
       formatTime(time) {