zy-pda/pages/index/index.vue

<template>
  <view class="index">
    <view class="arc_edge"></view>
    <view class="index_container">
      <!-- 头部搜索 -->
      <view class="search">
        <view class="search_wrap">
          <input focus placeholder="请输入标本编码/检查单号/请…" :placeholder-style="placeholderStyle" confirm-type="search" />
          <view class="searchBtn">
            搜索
          </view>
        </view>
        <view class="icon-saoma">
          <text class="pda pda-saoma"></text>
        </view>
      </view>
      <!-- 一键收标本 -->
      <view class="collect_specimens">
        <view class="collect_icon">
          标
        </view>
        <view class="collect_specimensNum">
          <view class="urgent collect_row">
            急标数量<text class="collect_num">{{urgentNum | specimenNum}}</text>
          </view>
          <view class="ordinary collect_row">
            普标数量<text class="collect_num">{{ordinaryNum | specimenNum}}</text>
          </view>
        </view>
        <button class="collect_btn" type="default" @click="collectSpecimens">一键收标本</button>
      </view>
      <!-- 最新工单 -->
      <view class="newOrders">
        <view class="newOrders_header">
          <text class="newOrders_header_title">最新工单</text>
          <text class="newOrders_header_more">更多&gt;&gt;</text>
        </view>
        <view class="newOrders_item" v-for="newOrder in newOrderList" :key="newOrder.id">
          <view class="newOrders_item_time">{{newOrder.showCreateTime}}</view>
          <text
            class="newOrders_item_taskType">{{newOrder.isHalfInspect === 1 ? "半程陪检" : (newOrder.taskType&&newOrder.taskType.taskName)}}</text>
          <text class="newOrders_item_patientName">{{newOrder.patient&&newOrder.patient.patientName}}</text>
          <text class="newOrders_item_status"
            :class="newOrder.stateTextClass">{{newOrder.gdState&&newOrder.gdState.name}}</text>
        </view>
      </view>
      <!-- 快捷工单 -->
      <view class="quick_other">
        <view class="quick_other_header">
          <text class="quick_other_header_title">快捷工单</text>
        </view>
        <view class="quick_other_container">
          <view class="quick_other_container_item" v-for="quickOther in quickOtherList" :key="quickOther.id">
            <view class="quick_other_container_item_text">
              {{quickOther.taskName}}
            </view>
          </view>
        </view>
      </view>
    </view>
    <seiminFooterNav></seiminFooterNav>
    <seiminModel ref="seiminModel"></seiminModel>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex';
  import {
    reqSpecimenWorkOrderMsg,
    reqWorkOrders,
    reqDeptTaskType
  } from '../../request/api.js';
  import {
    GDSTATE
  } from '../../utils/enum.gdstate.js';
  import {
    ASSOCIATION_TYPES
  } from '../../utils/enum.association_types.js';
  export default {
    data() {
      return {
        placeholderStyle: 'color:#999;font-size:30rpx;',
        urgentNum: 0, //急标数量
        ordinaryNum: 0, //普标数量
        newOrderList: [], //最新工单列表
        quickOtherList: [], //快捷工单列表
      };
    },
    computed: {
      ...mapState('user', ['loginInfo']),
      ...mapState(['isShowSeiminModel']),
    },
    methods: {
      ...mapMutations(['changeSeiminModel', 'changeQucikCreateOrderType']),
      // 获取页面数据
      init() {
        let deptId = this.loginInfo.user && this.loginInfo.user.dept.id;
        Promise.all([
          reqSpecimenWorkOrderMsg({
            deptId
          }),
          reqWorkOrders({
            "workOrder": {
              "createDept": deptId,
              "platform": 2,
              "searchDays": 2,
            },
            "idx": 0,
            "sum": 5
          }),
          reqDeptTaskType({
            deptId
          })
        ]).then(values => {
          uni.hideLoading();
          uni.stopPullDownRefresh();
          this.querySpecimenNum(values[0]);
          this.queryWorkOrders(values[1]);
          this.queryDeptTaskType(values[2]);
        });
      },
      // 查询急标和普标数量
      querySpecimenNum(res) {
        if (res.status == 200) {
          if (res.specimenCount) {
            this.urgentNum = res.specimenCount.urgent;
          }
          if (res.specimenCount) {
            this.ordinaryNum = res.specimenCount.noUrgent;
          }
        }
      },
      // 查询最新工单列表
      queryWorkOrders(res) {
        if (res.status == 200) {
          this.newOrderList = res.list.map(v => {
            if (v.gdState) {
              if (v.gdState.value == GDSTATE['待接单'] || v.gdState.value == GDSTATE['待抢单']) {
                v.stateTextClass = 'red';
              } else if (v.gdState.value == GDSTATE['待评价'] || v.gdState.value == GDSTATE['已完成']) {
                v.stateTextClass = 'green';
              } else {
                v.stateTextClass = 'yellow';
              }
            }
            return v;
          });
        }
      },
      // 查询快捷工单（其他临床服务任务类型）
      queryDeptTaskType(res) {
        if (res.status == 200) {
          this.quickOtherList = res.data.allTaskTypes.filter(v => v.associationType.value == ASSOCIATION_TYPES[
            '其他临床服务']);
        }
      },
      // 一键收取标本
      collectSpecimens() {
        uni.navigateTo({
          url: '/pages/quickCreateOrder/quickCreateOrder'
        })
        this.changeQucikCreateOrderType('specimen');
      },
      // 切换科室弹窗
      showDeptModel() {
        const {
          user //当前登录用户
        } = this.loginInfo;
        const userDept = (user && user.dept) ? user.dept.dept : '';
        this.$refs.seiminModel.show({
          content: `您当前所属科室为<text class="green">${userDept}</text>，如与您实际科室不符点击<text class="red">切换科室</text>。`,
          btns: [{
              name: "知道了",
              textColor: "#49B856",
              flex: 2,
            },
            {
              name: "前往切换科室",
              textColor: "#666",
              flex: 3,
              click: (e) => {
                console.log('切换科室');
              }
            },
          ]
        });
      },
    },
    mounted() {
      if (this.isShowSeiminModel) {
        this.showDeptModel();
        this.changeSeiminModel(false);
      }
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      this.init();
    },
    onPullDownRefresh() {
      this.init();
    }
  };
</script>

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

    // 弧形背景
    .arc_edge {
      @include arc_edge;
    }

    .index_container {
      padding: 0 24rpx;
      position: relative;
      z-index: 2;

      // 搜素框
      .search {
        height: 66rpx;
        margin-top: -200rpx;
        @include flex(space-between, center);

        .search_wrap {
          width: 600rpx;
          height: 100%;
          border-radius: 33rpx;
          background-color: #fff;
          position: relative;

          input {
            height: 100%;
            padding-left: 33rpx;
            padding-right: 147rpx;
          }

          .searchBtn {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            line-height: 1em;
            color: #666;
            font-size: 32rpx;
            width: 110rpx;
            text-align: center;
            border-left: 2rpx solid #E5E9ED;
            padding: 6rpx 0;
          }
        }

        .icon-saoma {
          width: 66rpx;
          height: 66rpx;
          background-color: #BEE1A7;
          border-radius: 50%;
          color: $defaultColor;
          @include flex(center, center);
        }
      }

      // 一键收标本
      .collect_specimens {
        width: 702rpx;
        height: 176rpx;
        background-color: #fff;
        margin-top: 24rpx;
        border-radius: 8rpx;
        // box-shadow: 0 0 7rpx 0 rgba(73, 184, 86, 0.09);
        border: 1px solid #E5E9ED;
        position: relative;
        @include flex(center, center);
        @include semicircle(#fff);

        .collect_icon {
          width: 48rpx;
          height: 48rpx;
          border-radius: 50%;
          background-color: rgba(57, 177, 153, 0.3);
          border: 1px solid #39B199;
          font-size: 24rpx;
          color: #39B199;
          @include flex(center, center);
        }

        .collect_specimensNum {
          margin: 0 35rpx;
          width: 277rpx;
          font-size: 34rpx;
          color: #666;

          .collect_num {
            font-size: 46rpx;
            font-weight: 600;
            color: #333;
            margin-left: 16rpx;
          }

          .collect_row {
            height: 88rpx;
            @include flex(flex-start, center);
            border-bottom: 1px dashed #E5E9ED;

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

        .collect_btn {
          margin: 0;
          height: 88rpx;
          background: linear-gradient(90deg, #74C271 0%, #39B199 100%);
          border-radius: 56rpx;
          color: #fff;
          font-size: 32rpx;
          line-height: 88rpx;
        }
      }

      // 最新工单
      .newOrders {
        width: 702rpx;
        min-height: 530rpx;
        background-color: #fff;
        margin-top: 8rpx;
        border-radius: 8rpx;
        // box-shadow: 0 0 7rpx 0 rgba(73, 184, 86, 0.09);
        border: 1px solid #E5E9ED;
        position: relative;
        padding: 0 15rpx;
        font-size: 32rpx;
        @include semicircle(#f9fafb, 70rpx);

        .newOrders_header {
          height: 87rpx;
          padding: 0 27rpx;
          border-bottom: 1px dashed #E5E9ED;
          @include flex(space-between, center);

          .newOrders_header_title {
            color: #333;
          }

          .newOrders_header_more {
            color: #666;
          }
        }

        .newOrders_item {
          height: 88rpx;
          padding: 0 27rpx;
          border-bottom: 1px solid #E5E9ED;
          color: #333;
          font-size: 30rpx;
          @include flex(center, center);

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

          .newOrders_item_time {
            width: 140rpx;
          }

          .newOrders_item_taskType {
            flex: 1;
            margin-left: 16rpx;
            @include clamp(1);
          }

          .newOrders_item_patientName {
            margin-left: 16rpx;
            margin-right: 16rpx;
            width: 148rpx;
            @include clamp(1);
          }

          .newOrders_item_status {}
        }
      }

      // 快捷工单
      .quick_other {
        width: 702rpx;
        background-color: #fff;
        margin-top: 8rpx;
        border-radius: 8rpx;
        // box-shadow: 0 0 7rpx 0 rgba(73, 184, 86, 0.09);
        border: 1px solid #E5E9ED;
        position: relative;
        padding: 0 15rpx;
        font-size: 32rpx;
        @include semicircle(#f9fafb, 70rpx);

        .quick_other_header {
          height: 87rpx;
          padding: 0 27rpx;
          border-bottom: 1px dashed #E5E9ED;
          @include flex(space-between, center);

          .quick_other_header_title {
            color: #333;
          }
        }

        .quick_other_container {
          min-height: 288rpx;
          @include flex(flex-start, center);
          flex-wrap: wrap;
          font-size: 28rpx;

          .quick_other_container_item {
            width: 96rpx;
            height: 96rpx;
            border-radius: 8rpx;
            margin: 16rpx 35rpx;
            color: #fff;
            text-align: center;

            @include flex(center, center) .quick_other_container_item_text {
              @include clamp(2);
            }

            &:nth-of-type(8n+1) {
              background-color: #A4C4C1;
            }

            &:nth-of-type(8n+2) {
              background-color: #56BAB6;
            }

            &:nth-of-type(8n+3) {
              background-color: #39B199;
            }

            &:nth-of-type(8n+4) {
              background-color: #48717F;
            }

            &:nth-of-type(8n+5) {
              background-color: #56BAB6;
            }

            &:nth-of-type(8n+6) {
              background-color: #A4C4C1;
            }

            &:nth-of-type(8n+7) {
              background-color: #48717F;
            }

            &:nth-of-type(8n+8) {
              background-color: #8E9D9E;
            }
          }
        }
      }
    }
  }
</style>