zy-pda/pages/search/search.vue

<template>
  <view class="search">
    <view class="search-box">
      <seiminSearch class="mSearch-input-box" :mode="2" button="inside" placeholder="请输入标本编码/检查单号/患者编码"
        @input="debounceInp" v-model="keyword" ref="search"></seiminSearch>
    </view>
    <view class="search-keyword">
      <!-- 患者 -->
      <view class="head" v-if="searchList.patientList.length">患者</view>
      <view class="orderList_listItem" v-for="search in searchList.patientList" :key="search.id"
        @click="toDetail(search,'patient')">
        <view class="orderList_listItem_header">
          <view class="orderList_listItem_header_title">
            <block v-if="search.illnessState">
              <view class="associationType_icon red" v-if="search.illnessState.value === '2'">危</view>
              <view class="associationType_icon red" v-else-if="search.illnessState.value === '3'">重</view>
            </block>
            <block v-if="search.careLevel">
              <view class="associationType_icon red" v-if="search.careLevel.value === '0'">特</view>
              <view class="associationType_icon red" v-else-if="search.careLevel.value === '1'">1</view>
              <view class="associationType_icon green" v-else-if="search.careLevel.value === '2'">2</view>
              <view class="associationType_icon green" v-else-if="search.careLevel.value === '3'">3</view>
            </block>
            <view class="taskNameAndWorkerName">
              <text class="workerName">{{search.patientName || '暂无'}}</text>
            </view>
          </view>
          <text class="orderList_listItem_header_more">{{search.bedNum }}床</text>
        </view>
        <view class="orderList_listItem_item">
          <view class="orderList_listItem_item_content">
            <text class="orderList_listItem_item_name">{{search.residenceNo || '暂无'}}</text>
            <text class="orderList_listItem_item_time">待检{{search.watingCount}}</text>
          </view>
        </view>
      </view>
      <!-- 标本 -->
      <view class="head" v-if="searchList.specimenList.length">标本</view>
      <view class="orderList_listItem" v-for="search in searchList.specimenList" :key="search.id"
        @click="toDetail(search,'specimen')">
        <view class="orderList_listItem_header">
          <view class="orderList_listItem_header_title">
            <view class="taskNameAndWorkerName">
              <text class="workerName">{{search.specimenDesc || '暂无'}}</text>
            </view>
          </view>
          <text class="orderList_listItem_header_more">{{search.scode || '暂无' }}</text>
        </view>
        <view class="orderList_listItem_item">
          <view class="orderList_listItem_item_content">
            <text class="orderList_listItem_item_name">{{search.patientName || '暂无'}}
              <block v-if="search.bedNum">({{search.bedNum}}床)</block>
            </text>
            <text class="orderList_listItem_item_time">{{search.speState?search.speState.name:'暂无'}}</text>
          </view>
        </view>
      </view>
      <!-- 检查 -->
      <view class="head" v-if="searchList.inspectList.length">检查</view>
      <view class="orderList_listItem" v-for="search in searchList.inspectList" :key="search.id"
        @click="toDetail(search,'inspect')">
        <view class="orderList_listItem_header">
          <view class="orderList_listItem_header_title">
            <view class="taskNameAndWorkerName">
              <text class="workerName">{{search.inspectName || '暂无'}}</text>
            </view>
          </view>
          <text class="orderList_listItem_header_more">{{search.bedNum }}床</text>
        </view>
        <view class="orderList_listItem_item">
          <view class="orderList_listItem_item_content no">
            <view class="no_item">
              <text class="orderList_listItem_item_name">{{search.inspectCode || '暂无'}}</text>
              <text class="orderList_listItem_item_time"></text>
            </view>
            <view class="no_item">
              <text class="orderList_listItem_item_name">{{search.patientName || '暂无'}}
                <block v-if="search.bedNum">({{search.bedNum}}床)</block>
              </text>
              <text class="orderList_listItem_item_time">{{search.yyTime||'暂无'}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <seiminModel ref="seiminModel"></seiminModel>
  </view>
</template>

<script>
  import {
    debounce
  } from 'lodash/function';
  import {
    reqSmartScan,
  } from "../../request/api.js";
  import {
    mapState,
    mapMutations,
  } from "vuex";
  import {
    ASSOCIATION_TYPES
  } from '../../utils/enum.association_types.js';
  export default {
    data() {
      return {
        queryParams: {}, //路由参数
        ASSOCIATION_TYPES,
        checkedShowMsg: {}, //当前选中的任务类型的buildtrip信息
        selectedPatient: {}, //当前选中的患者
        taskTypeListResource: [], //任务类型列表(请求的原始数据)
        taskTypeList: [], //任务类型列表
        pickerTitle: "", //一键建单picker的title
        debounceInp: null,
        keyword: "",
        searchList: {
          patientList: [],
          specimenList: [],
          inspectList: [],
        },
      };
    },
    computed: {
      ...mapState("login", ["loginInfo"]),
      ...mapState('other', ["deptDisplay"]),
    },
    methods: {
      ...mapMutations('other', ['changeQucikCreateOrderType', 'clearPatientBuildData', 'changePatientBuildData']),
      // 跳转患者详情
      toDetail(search, type) {
        switch (type) {
          case 'patient':
            uni.navigateTo({
              url: `/pages/patientDetail/patientDetail?patientCode=${search.patientCode}&patientName=${search.patientName}`
            })
            break;
          case 'specimen':
            uni.navigateTo({
              url: `/pages/detail/detail?id=${search.id}&associationType=specimen&scode=${search.scode}`
            })
            break;
          case 'inspect':
            uni.navigateTo({
              url: `/pages/detail/detail?id=${search.id}&associationType=inspect`
            })
            break;
        }
      },
      //监听输入
      inputChange(event = '') {
        let keyWord = event.detail ? event.detail.value : event;
        // 长度小于等于0,返回首页
        // 长度小于等于4,只搜索床号
        // 长度大于4,搜索患者住院号，患者二维码，标本码，检查单号
        if (!keyWord.length) {
          uni.reLaunch({
            url: '/pages/index/index'
          })
          return;
        }
        let postData = {
          deptId: this.loginInfo.user.dept.id,
          code: keyWord
        };
        uni.showLoading({
          title: "加载中",
        });
        reqSmartScan(postData).then((res) => {
          uni.hideLoading();
          uni.stopPullDownRefresh();
          if (res.state == 200) {
            Object.assign(this.searchList, res.data);
            console.log(this.searchList)
          } else {
            this.$refs.seiminModel.show({
              skin: "toast",
              icon: "error",
              content: res.msg || "获取数据失败",
            });
            throw new Error(res.msg || "获取数据失败");
          }
        });
      },
    },
    onReachBottom() {
      this.reachBottom();
    },
    onPullDownRefresh() {
      this.inputChange(this.keyword)
    },
    created() {
      this.debounceInp = debounce(this.inputChange, 500);
    },
    beforeDestroy() {
      this.debounceInp.cancel()
    },
    onLoad(queryParams) {
      this.queryParams = queryParams;
      this.keyword = queryParams.txt;
      this.inputChange(queryParams.txt);
    },
    mounted() {
      this.$refs.search.inputVal = this.queryParams.txt;
    }
  };
</script>
<style lang="scss" scoped>
  .search {
    padding-bottom: 108rpx;

    .search-box {
      background-color: rgb(242, 242, 242);
      padding: 15rpx 2.5%;
      position: fixed;
      z-index: 99;
      width: 100%;
      @include flex(space-between);

      .mSearch-input-box {
        width: 100%;
      }

      .input-box {
        width: 85%;
        flex-shrink: 1;
        @include flex(center, center);

        &>input {
          width: 100%;
          height: 60rpx;
          font-size: 32rpx;
          border: 0;
          border-radius: 60rpx;
          appearance: none;
          padding: 0 3%;
          margin: 0;
          background-color: #ffffff;
        }
      }

      .search-btn {
        width: 15%;
        margin: 0 0 0 2%;
        flex-shrink: 0;
        font-size: 28rpx;
        color: #fff;
        background: linear-gradient(to right, #ff9801, #ff570a);
        border-radius: 60rpx;
        @include flex(center, center);
      }
    }

    .search-keyword {
      padding: 88rpx 24rpx 0;

      .head {
        font-weight: bold;
      }

      // 列表项
      .orderList_listItem {
        width: 702rpx;
        min-height: 232rpx;
        background-color: #fff;
        position: relative;
        margin-top: 8rpx;
        border-radius: 8rpx;
        padding: 0 24rpx;
        font-size: 32rpx;
        @include border;
        @include semicircle(#F9FAFB, 82rpx);
        @include flex(flex-start, stretch, column);

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

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

            .associationType_icon {
              width: 48rpx;
              height: 48rpx;
              border-radius: 50%;
              font-size: 24rpx;
              margin-right: 8rpx;
              @include border($color:#39b199);
              @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;
              }
            }

            .taskNameAndWorkerName {
              flex: 1;
              @include flex;

              .taskName {
                max-width: 10em;
                @include clamp;
              }

              .workerName {
                flex: 1;
                @include clamp;
              }
            }
          }

          .orderList_listItem_header_more {
            color: #333;
            font-weight: bold;
            @include clamp;
          }
        }

        .orderList_listItem_item {
          height: 88rpx;
          color: #333;
          font-size: 30rpx;
          flex: 1;
          @include border(bottom);
          @include flex(flex-start, stretch, column);

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

          .orderList_listItem_item_content {
            min-height: 143rpx;
            flex: 1;
            @include flex(space-between, center);

            &.no {
              @include flex($flexDirection: column);

              .no_item {
                height: 50%;
                @include flex(space-between, center);
              }
            }

            .orderList_listItem_item_name {
              font-size: 34rpx;
            }

            .orderList_listItem_item_time {
              color: #333;
              font-size: 34rpx;
              font-weight: bold;
            }
          }
        }
      }
    }
  }
</style>