zy-pda/pages/orderList/orderList.vue

<template>
  <view class="orderList">
    <!-- 头部筛选 -->
    <view class="orderList_header">
      <view class="orderList_header_item" @click="openPicker('gdState')">
        <text class="orderList_header_itemText">{{selectedGdState}}</text>
        <text class="pda pda-xiala"></text>
      </view>
      <view class="orderList_header_item" @click="openPicker('associationType')">
        <text class="orderList_header_itemText">{{selectedAssociationType}}</text>
        <text class="pda pda-xiala"></text>
      </view>
    </view>
    <!-- 列表 -->
    <view class="orderList_list">
      <view class="orderList_listItem" v-for="newOrder in newOrderList" :key="newOrder.id">
        <view class="orderList_listItem_header">
          <view class="orderList_listItem_header_title">
            <view class="associationType_icon" v-if="newOrder.isHalfInspect === 1"> 半 </view>
            <view class="associationType_icon" v-else-if="newOrder.taskType.associationType.value == 'specimen'">标
            </view>
            <view class="associationType_icon" v-else-if="newOrder.taskType.associationType.value == 'drugsBag'"> 药
            </view>
            <view class="associationType_icon" v-else-if="newOrder.taskType.associationType.value == 'specimenPlan'"> 巡
            </view>
            <view class="associationType_icon" v-else-if="newOrder.taskType.associationType.value == 'jPBag'"> 静 </view>
            <view class="associationType_icon" v-else-if="newOrder.taskType.associationType.value == 'inspect'"> 病
            </view>
            <view class="associationType_icon"
              v-else-if="newOrder.taskType.associationType.value == 'patientTransport'"> 病
            </view>
            <view class="associationType_icon" v-else-if="newOrder.taskType.associationType.value == 'other'"> 其
            </view>
            <view class="taskNameAndWorkerName">
              <text class="taskName">{{newOrder.isHalfInspect === 1? "半程陪检": newOrder.taskType.taskName}}</text>
              <text class="workerName"
                v-if="newOrder.patient &&(newOrder.taskType.associationType.value =='patientTransport' ||newOrder.taskType.associationType.value =='inspect')">-{{newOrder.patient.patientName}}</text>
            </view>
          </view>
          <text class="orderList_listItem_header_more"
            :class="newOrder.stateTextClass">{{newOrder.gdState.name }}</text>
        </view>
        <view class="orderList_listItem_item">
          <view class="orderList_listItem_item_content">
            <text class="orderList_listItem_item_name"
              v-if="newOrder.worker">{{newOrder.worker.name}}{{newOrder.worker.phone? "-" + newOrder.worker.phone: ""}}</text>
            <text class="orderList_listItem_item_name" v-else>暂未接单</text>
            <text class="orderList_listItem_item_time" v-if="newOrder.showCreateTime">{{newOrder.showCreateTime}}</text>
            <text class="orderList_listItem_item_time"
              v-else-if="newOrder.yyjdTime && newOrder.gdState.value == 11">{{newOrder.yyjdTime | formatDate('MM-dd HH:mm')}}</text>
          </view>
          <view class="orderList_listItem_item_btns">
            <button type="primary" class="btn">撤销</button>
            <button type="primary" class="btn">加急</button>
          </view>
        </view>
      </view>
    </view>
    <seiminFooterNav></seiminFooterNav>
    <seiminModel ref="seiminModel"></seiminModel>
    <seiminPicker ref="sPicker" titleColor="#808080" titleFontSize="28rpx" confirmColor="#333" confirmFontSize="38rpx"
      confirmFontWeight="500" itemFontSize="28rpx" @onClose="closePicker" @onConfirm="confirmPicker"
      :pickerList="pickerList">
    </seiminPicker>
  </view>
</template>

<script>
  import {
    mapState,
    mapActions
  } from "vuex";
  import {
    reqFetchDataList
  } from "../../request/api.js";
  import {
    GDSTATE
  } from "../../utils/enum.gdstate.js";
  export default {
    name: 'orderList',
    data() {
      return {
        selectedGdState: '执行中',
        selectedAssociationType: '全部',
        gdStates: [{
            value: -1,
            label: '全部'
          },
          {
            value: 1,
            label: '执行中'
          },
          {
            value: 2,
            label: '待评价'
          },
        ], //工单状态筛选列表
        associationTypes: [{
          value: -1,
          label: '全部'
        }, ], //关联类型筛选列表
        newOrderList: [], //工单列表
        totalNum: 0, //工单总数量
        idx: 0, //页码
        pageNum: 20, //每页的工单数量
        pickerList: [], //picker列表
        type: '',
      };
    },
    computed: {
      ...mapState("login", ["loginInfo"]),
    },
    methods: {
      ...mapActions("dictionary", ["vxDictionary"]),
      //关闭
      closePicker() {
        this.$refs.sPicker._close();
      },
      //打开
      openPicker(type) {
        this.type = type;
        this.$refs.sPicker._open();
        if (type === 'gdState') {
          //工单状态
          this.pickerList = this.gdStates;
          let index = this.pickerList.findIndex(v => v.label === this.selectedGdState);
          let obj = this.pickerList.find(v => v.label === this.selectedGdState);
          this.$refs.sPicker._changeValue(index);
          this.selectedGdState = obj && obj.label;
        } else if (type === 'associationType') {
          //关联类型
          this.pickerList = this.associationTypes;
          let index = this.pickerList.findIndex(v => v.label === this.selectedAssociationType);
          let obj = this.pickerList.find(v => v.label === this.selectedAssociationType);
          this.$refs.sPicker._changeValue(index);
          this.selectedAssociationType = obj && obj.label;
        }
      },
      //确定：接收子组件传来的参数
      confirmPicker(checkedObj) {
        if (this.type === 'gdState') {
          //工单状态
          this.selectedGdState = checkedObj.label;
        } else if (this.type === 'associationType') {
          //关联类型
          this.selectedAssociationType = checkedObj.label;
        }
        let index = this.pickerList.findIndex(v => v.label === checkedObj.label);
        this.$refs.sPicker._changeValue(index);
        this.init();
      },
      // 获取页面数据
      init() {
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        Promise.all([
          this.queryWorkOrdersRequest(), //查询最新工单列表
          this.queryDictionary('association_types'), //获取数据字典
        ]).then((values) => {
          uni.hideLoading();
          uni.stopPullDownRefresh();
          this.queryWorkOrdersResponse(values[0]);
          this.queryDictionaryResponse(values[1], 'association_types');
        });
      },
      // 查询最新工单列表（上拉）
      reachBottom() {
        //没有更多
        if (this.newOrderList.length == this.totalNum) {
          uni.showToast({
            icon: 'none',
            title: '没有更多工单了'
          })
          return;
        }
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        Promise.all([
          this.queryWorkOrdersRequest(true), //查询最新工单列表
        ]).then((values) => {
          uni.hideLoading();
          this.queryWorkOrdersResponse(values[0], true);
        });
      },
      // 查询最新工单列表
      queryWorkOrdersRequest(idxPlus = false) {
        if (idxPlus) {
          //累加
          ++this.idx;
        } else {
          this.idx = 0;
        }
        return reqFetchDataList("nurse", "workOrder", {
          workOrder: {
            createDept: this.loginInfo.user.dept.id,
            platform: 2,
            searchDays: 2,
          },
          idx: this.idx,
          sum: this.pageNum,
        });
      },
      // 查询最新工单列表
      queryWorkOrdersResponse(res, idxPlus = false) {
        if (res.status == 200) {
          res.list = res.list || [];
          this.totalNum = res.totalNum || 0;
          let 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;
          });
          if (idxPlus) {
            //累加
            this.newOrderList = this.newOrderList.concat(newOrderList);
          } else {
            this.newOrderList = newOrderList;
          }
        } else {
          this.$refs.seiminModel.showChangeDept({
            skin: "toast",
            icon: "error",
            content: res.msg || "获取数据失败",
          });
          throw new Error(res.msg || '获取数据失败');
        }
      },
      // 获取数据字典
      queryDictionary(key) {
        let postData = {
          "type": "list",
          key
        };
        return this.vxDictionary(postData);
      },
      // 获取数据字典
      queryDictionaryResponse(res, type) {
        console.log(res, type);
        switch (type) {
          case 'association_types':
            let arr = res.map(v => ({
              value: v.id,
              label: v.name
            }));
            this.associationTypes = [{
              label: '全部',
              value: -1
            }, ...arr];
            break;
        }
      },
    },
    mounted() {
      this.init();
    },
    onPullDownRefresh() {
      this.init();
    },
    onReachBottom() {
      this.reachBottom();
    }
  }
</script>

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

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

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

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

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

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

    // 列表
    .orderList_list {
      padding: 0 24rpx;

      .orderList_listItem {
        width: 702rpx;
        min-height: 320rpx;
        background-color: #fff;
        margin-top: 8rpx;
        border-radius: 8rpx;
        border: 2rpx solid #e5e9ed;
        position: relative;
        padding: 0 15rpx;
        font-size: 32rpx;
        @include semicircle(#f9fafb, 82rpx);
        @include flex(flex-start, stretch, column);

        .orderList_listItem_header {
          height: 86rpx;
          border-bottom: 1px dashed #e5e9ed;
          @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%;
              background-color: #F0F6ED;
              border: 1px solid #39b199;
              font-size: 24rpx;
              color: #39b199;
              margin-right: 8rpx;
              @include flex(center, center);
            }

            .taskNameAndWorkerName {
              flex: 1;
              @include flex;

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

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

          .orderList_listItem_header_more {
            color: #666;
          }
        }

        .orderList_listItem_item {
          height: 88rpx;
          border-bottom: 1px solid #e5e9ed;
          color: #333;
          font-size: 30rpx;
          flex: 1;
          @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);

            .orderList_listItem_item_name {
              font-size: 38rpx;
              font-weight: bold;
            }

            .orderList_listItem_item_time {
              color: #666;
              font-size: 28rpx;
            }
          }

          .orderList_listItem_item_btns {
            position: relative;
            left: -14rpx;
            width: 698rpx;
            height: 88rpx;
            @include btn_background;
            @include flex;

            .btn {
              flex: 1;
              background-color: transparent;
              border-right: 2rpx solid #fff;

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

              &::after {
                border: none;
              }
            }
          }
        }
      }
    }
  }
</style>