zy-pda/pages/orderDetail/orderDetail.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="changeTab(tab.id)">
        {{tab.name}}
      </view>
    </view>
    <!-- tab -->
    <!-- 工单信息 -->
    <view class="orderDetail_info" v-show="selectedTab === 1">
      <view class="orderDetail_infoItem" v-if="orderInfo.id">
        <view class="orderDetail_infoItem_header">
          <view class="orderDetail_infoItem_header_title">
            <view class="icon"></view>
            <view class="taskNameAndWorkerName">
              <text class="taskName"
                v-if="orderInfo.taskType">{{orderInfo.isHalfInspect === 1? "半程陪检": orderInfo.taskType.taskName}}</text>
            </view>
          </view>
          <text class="orderDetail_infoItem_header_more">{{orderInfo.gdcode}}</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" v-if="orderInfo.gdState">{{orderInfo.gdState.name}}</text>
          </view>
          <view class="orderDetail_infoItem_item_content">
            <text class="orderDetail_infoItem_item_name">工单日期</text>
            <text class="orderDetail_infoItem_item_value">{{orderInfo.startTime || '暂无'}}</text>
          </view>
          <view class="orderDetail_infoItem_item_content">
            <text class="orderDetail_infoItem_item_name">总耗时</text>
            <text class="orderDetail_infoItem_item_value">{{orderInfo.showTimeNum || '暂无'}}</text>
          </view>
          <view class="orderDetail_infoItem_item_content">
            <text class="orderDetail_infoItem_item_name">申请科室</text>
            <text
              class="orderDetail_infoItem_item_value">{{orderInfo.createDeptDTO?(deptDisplay==2?orderInfo.createDeptDTO.deptalias:orderInfo.createDeptDTO.dept):'暂无'}}</text>
          </view>
          <view class="orderDetail_infoItem_item_content">
            <text class="orderDetail_infoItem_item_name">起点科室</text>
            <text
              class="orderDetail_infoItem_item_value">{{orderInfo.startDept?(deptDisplay==2?orderInfo.startDept.deptalias:orderInfo.startDept.dept):'暂无'}}</text>
          </view>
          <view class="orderDetail_infoItem_item_content"
            v-if="orderInfo.taskType.associationType.value === ASSOCIATION_TYPES['患者陪检业务']||orderInfo.taskType.associationType.value === ASSOCIATION_TYPES['患者其他服务业务']">
            <text class="orderDetail_infoItem_item_name">中间科室</text>
            <text class="orderDetail_infoItem_item_value">{{orderInfo.middleDept || '暂无'}}</text>
          </view>
          <view class="orderDetail_infoItem_item_content">
            <text class="orderDetail_infoItem_item_name">目标科室</text>
            <text class="orderDetail_infoItem_item_value">{{orderInfo.endDepts}}</text>
          </view>
          <view class="orderDetail_infoItem_item_content">
            <text class="orderDetail_infoItem_item_name">支助人员</text>
            <text class="orderDetail_infoItem_item_value">{{orderInfo.worker?orderInfo.worker.name:'暂无'}}</text>
          </view>
          <view class="orderDetail_infoItem_item_content">
            <text class="orderDetail_infoItem_item_name">联系电话</text>
            <text class="orderDetail_infoItem_item_value">{{orderInfo.worker?orderInfo.worker.phone:'暂无'}}</text>
          </view>
          <view class="orderDetail_infoItem_item_content"
            v-if="orderInfo.taskType.associationType.value === ASSOCIATION_TYPES['患者陪检业务']||orderInfo.taskType.associationType.value === ASSOCIATION_TYPES['患者其他服务业务']">
            <text class="orderDetail_infoItem_item_name">陪同情况</text>
            <text class="orderDetail_infoItem_item_value">{{orderInfo.isAccompany==1?'需要医护陪同':'无需医护陪同'}}</text>
          </view>
          <view class="orderDetail_infoItem_item_content"
            v-if="orderInfo.taskType.associationType.value === ASSOCIATION_TYPES['患者陪检业务']||orderInfo.taskType.associationType.value === ASSOCIATION_TYPES['患者其他服务业务']">
            <text class="orderDetail_infoItem_item_name">预约时间</text>
            <text
              class="orderDetail_infoItem_item_value">{{orderInfo.yyjdTime?(orderInfo.yyjdTime|formatDate('MM-dd HH:mm')):'暂无'}}</text>
          </view>
          <view class="orderDetail_infoItem_item_content"
            v-if="orderInfo.taskType.associationType.value === ASSOCIATION_TYPES['患者陪检业务']">
            <text class="orderDetail_infoItem_item_name">是否半程陪检</text>
            <text class="orderDetail_infoItem_item_value">{{orderInfo.isHalfInspect===1?'是':'否'}}</text>
          </view>
          <view class="orderDetail_infoItem_item_content"
            v-if="orderInfo.drugs && orderInfo.taskType.associationType.value === ASSOCIATION_TYPES['药品配送业务']">
            <text class="orderDetail_infoItem_item_name">药包编码</text>
            <text class="orderDetail_infoItem_item_value">{{orderInfo.drugs.packid || '暂无'}}</text>
          </view>
          <view class="orderDetail_infoItem_item_content"
            v-if="orderInfo.staticDistri && orderInfo.taskType.associationType.value === ASSOCIATION_TYPES['静配配送']">
            <text class="orderDetail_infoItem_item_name">药包编码</text>
            <text class="orderDetail_infoItem_item_value">{{orderInfo.staticDistri.packid || '暂无'}}</text>
          </view>
          <view class="orderDetail_infoItem_item_content"
            v-if="orderInfo.taskType.associationType.value === ASSOCIATION_TYPES['临时标本业务'] || orderInfo.taskType.associationType.value === ASSOCIATION_TYPES['标本轮巡业务']">
            <text class="orderDetail_infoItem_item_name">预计接收</text>
            <text class="orderDetail_infoItem_item_value">{{orderInfo.expectReceiveNum||'暂无'}}</text>
          </view>
          <view class="orderDetail_infoItem_item_content"
            v-if="orderInfo.taskType.associationType.value === ASSOCIATION_TYPES['临时标本业务'] || orderInfo.taskType.associationType.value === ASSOCIATION_TYPES['标本轮巡业务']">
            <text class="orderDetail_infoItem_item_name">实际接收</text>
            <text class="orderDetail_infoItem_item_value">{{orderInfo.actualReceiveNum||'暂无'}}</text>
          </view>
          <view class="orderDetail_infoItem_item_content">
            <text class="orderDetail_infoItem_item_name">是否加急</text>
            <text class="orderDetail_infoItem_item_value" v-if="orderInfo.emergencyType">
              {{(orderInfo.emergencyType.value == 2 || orderInfo.emergencyType.value == 3)?'是':'否'}}
            </text>
          </view>
          <view class="orderDetail_infoItem_item_content"
            v-if="orderInfo.workOrderRemark && (orderInfo.taskType.associationType.value === ASSOCIATION_TYPES['临时标本业务']||orderInfo.taskType.associationType.value === ASSOCIATION_TYPES['标本轮巡业务']||orderInfo.taskType.associationType.value === ASSOCIATION_TYPES['其他临床服务'])">
            <text class="orderDetail_infoItem_item_name">备注信息</text>
            <text class="orderDetail_infoItem_item_value">{{orderInfo.workOrderRemark||'暂无'}}</text>
          </view>
          <view class="orderDetail_infoItem_item_content" v-if="orderInfo.specialCloseReason">
            <text class="orderDetail_infoItem_item_name">特殊情况关闭原因</text>
            <text class="orderDetail_infoItem_item_value">{{orderInfo.specialCloseReason||'暂无'}}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 流程信息 -->
    <view class="orderDetail_info" v-show="selectedTab === 2">
      <view class="orderDetail_infoItem" v-if="logList.length">
        <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 process">
          <view class="orderDetail_process_item" v-for="(step,i) in logList" :key="i">
            <view class="step_infoStart">
              <view class="step_name">{{step.operationName}}</view>
              <view class="step_time" v-if="step.record && step.record[0]">
                {{step.record[0].operationTime|formatDate('MM-dd HH:mm')}}
              </view>
            </view>
            <view class="step_icon pda pda-icon_liucheng"
              :class="{'active':(step.record&&step.record[0]&&step.record[0].operationTime)}"></view>
            <view class="step_infoEnd">
              <view class="step_overtime" v-if="i!=0&&step.record&&step.record.length">
                耗时{{filterTime(step.record)}}
              </view>
              <view class="step_dept" v-if="step.record&&step.record[0]&&step.record[0].dept">
                <text v-for="(dept,index) in step.record"
                  :key="index">{{dept?(deptDisplay == 2?dept.deptalias:dept.dept)+',':''}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 业务信息 -->
    <view class="orderDetail_info" v-show="selectedTab === 3">
      <view class="orderDetail_infoItem">
        业务信息
      </view>
    </view>
    <!-- 底部 -->
    <seiminFooterBtn :btns="btns"></seiminFooterBtn>
    <seiminModel ref="seiminModel"></seiminModel>
  </view>
</template>

<script>
  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 {
        // 路由传参
        queryParams: {},
        // 关联类型
        ASSOCIATION_TYPES,
        // 选项卡
        tabs: [{
            id: 1,
            name: '工单信息'
          },
          {
            id: 2,
            name: '流程信息'
          },
          {
            id: 3,
            name: '业务信息'
          },
        ],
        // 当前选中的tab
        selectedTab: 1,
        // 工单信息
        orderInfo: {},
        // 流程信息
        logList: [],
        //底部按钮
        btns: [],
      };
    },
    computed: {
      ...mapState('other', ["deptDisplay"]),
    },
    methods: {
      init(queryParams) {
        this.queryParams = queryParams;
        this.changeTab(1);
      },
      // 格式化时分秒
      // （时间小于一分钟则显示秒，时间大于一分钟则显示分钟数，如超出一小时则显示小时和分钟。）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.getInfo(this.queryParams);
            break;
          case 2:
            this.getProcess(this.queryParams);
            break;
          case 3:
            this.getInfo(this.queryParams);
            break;
        }
      },
      //获取工单信息数据
      getInfo(queryParams) {
        uni.showLoading({
          mask: true,
          title: '加载中',
        })
        reqFetchData('api', 'workOrder', queryParams.id).then(res => {
          uni.hideLoading();
          if (res.status == 200) {
            // 检查科室处理
            if (res.data.middleDept) {
              //有检查科室的话
              res.data.middleDept = res.data.middleDept.map(v => {
                return this.deptDisplay == 2 ? v.deptalias : v.dept;
              }).toString();
            }
            // 终点科室处理
            res.data.endDepts = res.data.endDepts.map(v => {
              return this.deptDisplay == 2 ? v.deptalias : v.dept;
            }).toString();
            // 工单信息
            this.orderInfo = res.data;
            //底部按钮处理
            let btns = [{
              name: "回到列表",
              type: "default",
              click: () => {
                uni.navigateTo({
                  url: "/pages/orderList/orderList",
                });
              },
            }];
            let newOrder = this.orderInfo;
            if (newOrder.gdState.value == GDSTATE['待抢单'] ||
              newOrder.gdState.value == GDSTATE['待接单'] ||
              newOrder.gdState.value == GDSTATE['待到达'] ||
              newOrder.gdState.value == GDSTATE['定时预约'] ||
              newOrder.gdState.value == GDSTATE['待评价']) {

              if (newOrder.gdState.value == GDSTATE['待评价']) {
                //评价按钮
                btns.push({
                  name: "评价",
                  type: "primary",
                  click: () => {
                    showAppraise.call(this, newOrder.id, () => {
                      this.$refs.seiminModel.close();
                      uni.navigateTo({
                        url: "/pages/orderList/orderList",
                      });
                    });
                  },
                })
              }

              if (newOrder.gdState.value == GDSTATE['待抢单'] ||
                newOrder.gdState.value == GDSTATE['待接单'] ||
                newOrder.gdState.value == GDSTATE['待到达'] ||
                newOrder.gdState.value == GDSTATE['定时预约']) {
                //撤销按钮
                btns.push({
                  name: "撤销",
                  type: "primary",
                  click: () => {
                    openRecallModal.call(this, newOrder.id, () => {
                      this.$refs.seiminModel.close();
                      uni.navigateTo({
                        url: "/pages/orderList/orderList",
                      });
                    });
                  },
                })
              }

              if (newOrder.gdState.value == GDSTATE['定时预约']) {
                //立即执行按钮
                btns.push({
                  name: "立即执行",
                  type: "primary",
                  click: () => {
                    openExecModal.call(this, newOrder.id, () => {
                      this.$refs.seiminModel.close();
                      uni.navigateTo({
                        url: "/pages/orderList/orderList",
                      });
                    });
                  },
                })
              }

              if ((newOrder.gdState.value == GDSTATE['待抢单'] ||
                  newOrder.gdState.value == GDSTATE['待到达']) &&
                newOrder.taskType.allowUrgent == 1 &&
                !newOrder.urgentDetails) {
                //加急按钮
                btns.push({
                  name: "加急",
                  type: "primary",
                  click: () => {
                    showJiaji.call(this, newOrder.id, () => {
                      this.$refs.seiminModel.close();
                      uni.navigateTo({
                        url: "/pages/orderList/orderList",
                      });
                    });
                  },
                })
              }
            }
            // 按钮赋值
            this.btns = btns;
          } else {
            this.btns = [{
              name: "回到列表",
              type: "default",
              click: () => {
                uni.navigateTo({
                  url: "/pages/orderList/orderList",
                });
              },
            }, ];
            this.$refs.seiminModel.show({
              skin: 'toast',
              icon: 'error',
              content: '请求失败',
            })
          }
        })
      },
      //获取流程信息数据
      getProcess(queryParams) {
        uni.showLoading({
          mask: true,
          title: '加载中',
        })
        reqFetchWorkOrderLog(queryParams.id).then(res => {
          uni.hideLoading();
          if (res.status == 200) {
            // 流程信息
            this.logList = res.data;
          } else {
            this.$refs.seiminModel.show({
              skin: 'toast',
              icon: 'error',
              content: '请求失败',
            })
          }
        })
      },
    },
    onLoad(queryParams) {
      console.log(queryParams);
      this.init(queryParams);
    }
  }
</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;
        min-height: 320rpx;
        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;
            }
          }
        }
      }
    }
  }
</style>