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>
      <!-- 通告栏 -->
      <uni-notice-bar
        :speed="20"
        scrollable
        single
        showIcon
        :text="updateTipsForNurses"
        background-color="#fff"
        color="#666"
      >
      </uni-notice-bar>
      <!-- 一键收标本 -->
      <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">
          {{ specimenButton }}
        </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"
              @click="quickOrderOther(quickOther)"
            >
              {{ quickOther.taskName }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <seiminFooterNav></seiminFooterNav>
    <seiminModel ref="seiminModel"></seiminModel>
    <seiminPicker
      ref="sPicker"
      :title="pickerTitle"
      titleColor="#808080"
      titleFontSize="28rpx"
      confirmColor="#333"
      confirmFontSize="38rpx"
      confirmFontWeight="500"
      itemFontSize="28rpx"
      @onClose="closePicker"
      @onConfirm="confirmPicker"
      :pickerList="hospitalList"
    >
    </seiminPicker>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import {
  reqSpecimenWorkOrderMsg,
  reqDeptTaskType,
  reqFetchDataList,
} 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: [], //快捷工单列表
      hospitalList: [], //当前用户权限中的院区列表
      // list: [{
      //     value: '1',
      //     label: '身份证'
      //   },
      //   {
      //     value: '2',
      //     label: '驾驶证'
      //   },
      //   {
      //     value: '3',
      //     label: '护照'
      //   },
      //   {
      //     value: '4',
      //     label: '其他证件'
      //   },
      // ],
      pickerTitle: "", //选择院区picker的title
    };
  },
  computed: {
    ...mapState("user", ["loginInfo"]),
    ...mapState([
      "isShowSeiminModel",
      "deptDisplay",
      "specimenButton",
      "updateTipsForNurses",
    ]),
  },
  methods: {
    ...mapMutations([
      "changeSeiminModel",
      "changeQucikCreateOrderType",
      "changeDeptDisplay",
      "changeUpdateTipsForNurses",
      "changeSpecimenButton",
      "changeNurseDeptSwitchTip",
      "changeSearchDeptParams",
    ]),
    // 获取页面数据
    init() {
      Promise.all([
        this.querySpecimenNumRequest(), //查询急标和普标数量
        this.queryWorkOrdersRequest(), //查询最新工单列表
        this.queryDeptTaskTypeRequest(), //查询快捷工单（其他临床服务任务类型）
        this.queryDeptDisplayRequest(), //护士端科室显示选择(名称还是别名)
        this.queryUpdateTipsForNursesRequest(), //护士端更新提示
        this.querySpecimenButtonRequest(), //标本按钮文字
        this.queryNurseDeptSwitchTipRequest(), //护士科室切换提示自动关闭设置
      ]).then((values) => {
        uni.hideLoading();
        uni.stopPullDownRefresh();
        this.querySpecimenNumResponse(values[0]);
        this.queryWorkOrdersResponse(values[1]);
        this.queryDeptTaskTypeResponse(values[2]);
        this.queryDeptDisplayResponse(values[3]);
        this.queryUpdateTipsForNursesResponse(values[4]);
        this.querySpecimenButtonResponse(values[5]);
        this.queryNurseDeptSwitchTipResponse(values[6]);
        if (this.isShowSeiminModel) {
          this.showDeptModel();
          this.changeSeiminModel(false);
        }
      });
    },
    // 查询急标和普标数量
    querySpecimenNumRequest() {
      return reqSpecimenWorkOrderMsg({
        deptId: this.loginInfo.user.dept.id,
      });
    },
    // 查询急标和普标数量
    querySpecimenNumResponse(res) {
      if (res.status == 200) {
        if (res.specimenCount) {
          this.urgentNum = res.specimenCount.urgent;
        }
        if (res.specimenCount) {
          this.ordinaryNum = res.specimenCount.noUrgent;
        }
      }
    },
    // 查询最新工单列表
    queryWorkOrdersRequest() {
      return reqFetchDataList("nurse", "workOrder", {
        workOrder: {
          createDept: this.loginInfo.user.dept.id,
          platform: 2,
          searchDays: 2,
        },
        idx: 0,
        sum: 5,
      });
    },
    // 查询最新工单列表
    queryWorkOrdersResponse(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;
        });
      }
    },
    // 查询快捷工单（其他临床服务任务类型）
    queryDeptTaskTypeRequest() {
      return reqDeptTaskType({
        deptId: this.loginInfo.user.dept.id,
      });
    },
    // 查询快捷工单（其他临床服务任务类型）
    queryDeptTaskTypeResponse(res) {
      if (res.status == 200) {
        this.quickOtherList = res.data.allTaskTypes.filter(
          (v) => v.associationType.value == ASSOCIATION_TYPES["其他临床服务"]
        );
        let specimenTaskType = res.data.allTaskTypes.find(
          (v) => v.associationType.value == ASSOCIATION_TYPES["临时标本业务"]
        );
        this.specimenTaskTypeId = specimenTaskType && specimenTaskType.id;
      }
    },
    // 护士端科室显示选择(名称还是别名)
    queryDeptDisplayRequest() {
      return reqFetchDataList("simple/data", "systemConfiguration", {
        idx: 0,
        sum: 1,
        systemConfiguration: {
          keyconfig: "deptDisplay",
        },
      });
    },
    // 护士端科室显示选择(名称还是别名)
    queryDeptDisplayResponse(res) {
      if (res.status == 200) {
        this.changeDeptDisplay(res.list[0].valueconfig);
      }
    },
    // 护士端更新提示
    queryUpdateTipsForNursesRequest() {
      return reqFetchDataList("simple/data", "systemConfiguration", {
        idx: 0,
        sum: 1,
        systemConfiguration: {
          keyconfig: "updateTipsForNurses",
        },
      });
    },
    // 护士端更新提示
    queryUpdateTipsForNursesResponse(res) {
      if (res.status == 200) {
        this.changeUpdateTipsForNurses(res.list[0].valueconfig);
      }
    },
    // 标本按钮文字
    querySpecimenButtonRequest() {
      return reqFetchDataList("simple/data", "systemConfiguration", {
        idx: 0,
        sum: 1,
        systemConfiguration: {
          keyconfig: "specimenButton",
        },
      });
    },
    // 标本按钮文字
    querySpecimenButtonResponse(res) {
      if (res.status == 200) {
        this.changeSpecimenButton(res.list[0].valueconfig);
      }
    },
    // 护士科室切换提示自动关闭设置
    queryNurseDeptSwitchTipRequest() {
      return reqFetchDataList("simple/data", "systemConfiguration", {
        idx: 0,
        sum: 1,
        systemConfiguration: {
          keyconfig: "nurseDeptSwitchTip",
        },
      });
    },
    // 护士科室切换提示自动关闭设置
    queryNurseDeptSwitchTipResponse(res) {
      if (res.status == 200) {
        this.changeNurseDeptSwitchTip(res.list[0].valueconfig);
      }
    },
    // 一键收取标本
    collectSpecimens() {
      uni.navigateTo({
        url: "/pages/quickCreateOrder/quickCreateOrder",
      });
      this.changeQucikCreateOrderType({
        type: "specimen",
        taskTypeId: this.specimenTaskTypeId,
      });
    },
    //其他临床服务快捷建单
    quickOrderOther(quickOther) {
      uni.navigateTo({
        url: "/pages/quickCreateOrder/quickCreateOrder",
      });
      this.changeQucikCreateOrderType({
        type: "other",
        taskTypeId: quickOther.id,
      });
    },
    // 切换科室弹窗
    showDeptModel() {
      const {
        user, //当前登录用户
      } = this.loginInfo;
      const userDept =
        user && user.dept
          ? this.deptDisplay == 1
            ? user.dept.dept
            : user.dept.deptalias
          : "";
      this.$refs.seiminModel.showChangeDept({
        content: `您当前所属科室为<text class="green">${userDept}</text>，如与您实际科室不符点击<text class="red">切换科室</text>。`,
        btns: [
          {
            name: "知道了",
            textColor: "#49B856",
            flex: 2,
          },
          {
            name: "前往切换科室",
            textColor: "#666",
            flex: 3,
            click: (e) => {
              this.$refs.seiminModel.close();
              this.openPicker();
            },
          },
        ],
      });
    },
    //关闭
    closePicker() {
      this.$refs.sPicker._close();
    },
    //打开
    openPicker() {
      this.$refs.sPicker._open();
    },
    //确定：接收子组件传来的参数
    confirmPicker(checkedObj) {
      this.changeSearchDeptParams({
        backUrl: "/pages/index/index", //返回的url
        type: "changeDept_index", //首页切换科室
        hospital: checkedObj, //先选择院区
      });
      uni.navigateTo({
        url: "/pages/searchDept/searchDept",
      });
    },
  },
  mounted() {
    //选择院区picker的title
    this.pickerTitle = `您当前所属科室为<b class="green">${this.loginInfo.user.dept.dept}</b>，请您先选择院区`;
    //权限中的院区修改数据结构
    this.hospitalList = this.loginInfo.infoPermission.hospitals.map((v) => ({
      value: v.id,
      label: v.hosName,
    }));
    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);
      }
    }

    // 通告栏
    .uni-noticebar {
      height: 88rpx;
      margin-top: 24rpx;
      margin-bottom: 0;
      border: 1px solid #e5e9ed;
    }

    // 一键收标本
    .collect_specimens {
      width: 702rpx;
      height: 176rpx;
      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;
      @include flex(center, center);
      @include semicircle(#f9fafb);

      .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;
        width: 224rpx;
        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>