zy-pda/pages/specimenList/specimenList.vue

<template>
  <view class="specimenList">
    <!-- 头部筛选 -->
    <view class="orderList_header">
      <view class="orderList_header_item" @click="openPicker('speStatus')">
        <text class="orderList_header_itemText">{{selectedSpeState}}</text>
        <text class="pda pda-xiala"></text>
      </view>
    </view>
    <!-- 标本列表 -->
    <view class="orderDetail_infoItem_item business business_specimen">
      <view class="inspect_specimen">
        <uni-table stripe emptyText="暂无更多数据">
          <!-- 表头行 -->
          <uni-tr class="th">
            <uni-th align="center" width="68">标本类型</uni-th>
            <uni-th align="center" width="71">标本编码</uni-th>
            <uni-th align="center" width="66">状态</uni-th>
            <uni-th align="center" width="71">科室</uni-th>
          </uni-tr>
          <!-- 表格数据行 -->
          <uni-tr v-for="data in speList" :key="data.id" @click.native="toDetail(data.id,'specimen',data.scode)">
            <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>
            <uni-td align="center" class="td" v-if="data.checkDept">
              {{deptDisplay==2?data.checkDept.deptalias:data.checkDept.dept}}
              <image class="urgent" v-if="data.urgent == 1" src="../../static/imgs/icon_ji.png" mode="widthFix">
              </image>
            </uni-td>
            <uni-td align="center" class="td" v-else>
              暂无
              <image class="urgent" v-if="data.urgent == 1" src="../../static/imgs/icon_ji.png" mode="widthFix">
              </image>
            </uni-td>
          </uni-tr>
        </uni-table>
      </view>
    </view>
    <seiminFooterBtn :btns="btns"></seiminFooterBtn>
    <seiminPicker ref="sPicker" titleColor="#808080" titleFontSize="28rpx" confirmColor="#333" confirmFontSize="38rpx"
      confirmFontWeight="500" itemFontSize="32rpx" @onClose="closePicker" @onConfirm="confirmPicker"
      :pickerList="pickerList">
    </seiminPicker>
  </view>
</template>

<script>
  import {
    backPress
  } from '../../utils/index.js';
  import {
    mapState,
  } from "vuex";
  import {
    reqGetSpecimenWorkOrderDetails,
  } from "../../request/api.js";
  export default {
    onBackPress() {
      backPress();
    },
    data() {
      return {
        reFresh: '',
        speList: [], //标本列表
        pickerList: [], //picker列表
        type: '', //打开picker的类型，急或普查
        // 当前筛选的急查或普查
        selectedSpeState: '',
        //急查或普查筛选列表
        speStates: [{
            value: 1,
            label: '急查'
          },
          {
            value: 0,
            label: '普查'
          },
        ],
        //底部按钮
        btns: [{
          name: "返回首页",
          type: "primary",
          click: () => {
            uni.navigateTo({
              url: "/pages/index/index",
            });
          },
        }],
      };
    },
    computed: {
      ...mapState("login", ["loginInfo"]),
      ...mapState("other", ["deptDisplay"]),
    },
    methods: {
      // 跳转详情
      toDetail(id, associationType, scode) {
        uni.navigateTo({
          url: `/pages/detail/detail?id=${id}&associationType=${associationType}&scode=${scode}`
        })
      },
      // 查询最新工单列表
      queryWorkOrdersRequest(idxPlus = false) {
        if (idxPlus) {
          //累加
          ++this.idx;
        } else {
          this.idx = 0;
        }
        console.log(this.speStates, this.selectedSpeState)
        let postData = {
          "deptId": this.loginInfo.user.dept.id,
          "urgent": Number(this.speStates.find(v => v.label == this.selectedSpeState).value)
        };
        return reqGetSpecimenWorkOrderDetails(postData);
      },
      // 查询最新工单列表
      queryWorkOrdersResponse(res, idxPlus = false) {
        if (res.status == 200) {
          let speList = res.data || [];
          console.log(speList, idxPlus)
          if (idxPlus) {
            //累加
            this.speList = this.speList.concat(speList);
          } else {
            this.speList = speList;
          }
        } else {
          this.$refs.seiminModel.show({
            skin: "toast",
            icon: "error",
            content: res.msg || "获取数据失败",
          });
          throw new Error(res.msg || '获取数据失败');
        }
      },
      // 查询最新列表（上拉）
      reachBottom() {
        //没有更多
        uni.showToast({
          icon: 'none',
          title: '没有更多标本了'
        })
      },
      // 获取页面数据
      init() {
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        Promise.all([
          this.queryWorkOrdersRequest(), //查询最新工单列表
        ]).then((values) => {
          uni.hideLoading();
          uni.stopPullDownRefresh();
          this.queryWorkOrdersResponse(values[0]);
        });
      },
      //关闭
      closePicker() {
        this.$refs.sPicker._close();
      },
      //打开
      openPicker(type) {
        this.type = type;
        this.$refs.sPicker._open();
        if (type === 'speStatus') {
          //标本是急查或普查
          this.pickerList = this.speStates;
          let index = this.pickerList.findIndex(v => v.label === this.selectedSpeState);
          let obj = this.pickerList.find(v => v.label === this.selectedSpeState);
          this.$refs.sPicker._changeValue(index);
          this.selectedSpeState = obj && obj.label;
        }
      },
      //确定：接收子组件传来的参数
      confirmPicker(checkedObj) {
        if (this.type === 'speStatus') {
          this.selectedSpeState = checkedObj.label;
        }
        let index = this.pickerList.findIndex(v => v.label === checkedObj.label);
        this.$refs.sPicker._changeValue(index);
        this.init();
      },
    },
    mounted() {
      this.init();
    },
    onLoad(querParams) {
      this.selectedSpeState = querParams.urgent == 1 ? '急查' : '普查';
    },
    onPullDownRefresh() {
      this.init();
    },
    onReachBottom() {
      this.reachBottom();
    },
  }
</script>

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

    // 头部筛选
    .orderList_header {
      height: 88rpx;
      background-color: #fff;
      position: fixed;
      left: 0;
      z-index: 99;
      width: 100%;
      @include border(bottom);
      @include flex(center, center);

      .orderList_header_item {
        flex: 1;
        height: 100%;
        padding: 0 50rpx;
        @include border(right);
        @include flex(space-between, center);

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

        .orderList_header_itemText {
          color: #333;
          font-size: 38rpx;
        }
      }

      .pda-xiala {
        color: #DDE1E5;
      }
    }

    // 标本列表
    .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);

      // 业务信息-标本
      &.business_specimen {
        padding-top: 116rpx;
        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;
        }
      }

    }
  }
</style>