zy-wechat/pages/my_list/my_list.vue

<template>
  <scroll-view :scroll-y="!models.disjunctor" @scroll="scrollList" :scroll-top="scroll_t" class="my_list">
    <view class="my_list_top">
      <view class="my_list_topL" @click="act()">
        筛选
        <text class="cubeic-pulldown icon_transport transport-paixujiantouxia" v-if="!actType"></text>
        <text class="cubeic-pullup icon_transport transport-paixujiantoushang" v-if="actType"></text>
      </view>
      <view class="my_list_topC">
        <input type="text" placeholder="请输入关键字" v-model="listData.workOrder.keyWord" />
      </view>
      <view class="my_list_topR" @click="search(listData)"> 搜索 </view>
    </view>
    <view class="my_list_tops" id="actType" :animation="animationData" v-if="actType">
      <view class="tops">
        <view>类型筛选</view>
        <view class="tops_cont">
          <view v-for="(data, i) of typeData" :key="i" :class="{ ac: checkedSear[data.id] }"
            @click="sxTab(data.associationTypes, data.id)" :id="data.id">
            {{ data.name }}
          </view>
        </view>
      </view>
      <view class="tops">
        <view>工单筛选</view>
        <view class="tops_cont1">
          <view :class="{ gdType: listData.workOrder.abnormityType == 0 }" @click="gdTab(0)">
            正常工单
          </view>
          <view :class="{ gdType: listData.workOrder.abnormityType == 1 }" @click="gdTab(1)">
            异常工单
          </view>
        </view>
      </view>
      <view class="foot_btn2">
        <view class="btn1" :class="{ btnType: btnType == 1 }" @click="ok(listData)">
          确定
        </view>
        <view class="btn2" @click="Reset()"> 重置 </view>
      </view>
    </view>
    <view class="item" @click="item()">
      <view class="page_items" v-if="workData && workData.length > 0">
        <view class="page_item" v-for="(infoDATA, i) of workData" :key="i" @click="detailIt(infoDATA)">
          <view class="page_item_top">
            <view class="page_item_top_L">
              <text class="L_text">单号:{{ infoDATA.gdcode }}</text>
              <view class="page_item_cont_start emergency1" v-if="infoDATA.emergencyType.value == 1">
                <text>
                  <text
                    class="cubeic-star icon_transport transport-shiwujiaoxing"></text>{{ infoDATA.emergencyType.name }}</text>
              </view>
              <view class="page_item_cont_start emergency" v-if="infoDATA.emergencyType.value == 2">
                <text>
                  <text
                    class="cubeic-star icon_transport transport-shiwujiaoxing"></text>{{ infoDATA.emergencyType.name }}</text>
              </view>
              <view class="page_item_cont_start emergencys" v-if="infoDATA.emergencyType.value == 3">
                <text>
                  <text
                    class="cubeic-star icon_transport transport-shiwujiaoxing"></text>{{ infoDATA.emergencyType.name }}</text>
              </view>
            </view>
            <view class="page_item_top_L">
              <text class="L_iocn" v-if="infoDATA.taskType.associationType.value == 'specimen'">标本</text>
              <text class="L_iocn" v-if="infoDATA.taskType.associationType.value == 'specimenPlan'">标本</text>
              <text class="L_iocn" v-if="infoDATA.taskType.associationType.value == 'drugsBag'">药品</text>
              <text class="L_iocn" v-if="infoDATA.taskType.associationType.value == 'jPBag'">静配</text>
              <text class="L_iocn" v-if="infoDATA.taskType.associationType.value == 'inspect'">陪检</text>
              <text class="L_iocn" v-if="
                  infoDATA.taskType.associationType.value == 'patientTransport'
                ">转运</text>
              <text class="L_iocn" v-if="infoDATA.taskType.associationType.value == 'other'">其他</text>
            </view>
            <view class="page_item_top_R">
              <view class="num">
                {{infoDATA.grade?(infoDATA.grade.gradeTotal>=0?'+'+infoDATA.grade.gradeTotal:'-'+infoDATA.grade.gradeTotal):''}}
              </view>
            </view>
            <view class="L"> </view>
            <view class="R"> </view>
          </view>
          <view class="page_item_cont">
            <view class="page_item_cont_T">
              <view class="page_item_cont_title">
                <text> <text class="starting">起</text> 点科室</text>
                <text class="text_big"> {{ infoDATA.startDept.dept }}</text>
              </view>
            </view>
            <view class="line"> </view>
            <view class="page_item_cont_B">
              <view class="page_item_cont_title" v-for="(dept, i) of infoDATA.middleDept" :key="i">
                <view v-if="infoDATA.taskType.associationType.value == 'inspect'">
                  <text> <text class="End">检</text> 查科室</text>
                  <text class="text_big"> {{ dept.dept }}</text>
                  <view></view>
                </view>
              </view>
              <view class="page_item_cont_title" v-for="(dept, i) of infoDATA.endDepts" :key="i">
                <view v-if="infoDATA.taskType.associationType.value != 'inspect'">
                  <text> <text class="End">终</text> 点科室</text>
                  <text class="text_big"> {{ dept.dept }}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="page_item_foot">
            <view class="page_item_foot_text">
              <text class="text1">完成时间</text>&nbsp;&nbsp;
              <text class="text1">{{ infoDATA.completeTime || 0 }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 弹窗 -->
    <showIntegralModel :disjunctor="models.disjunctor" :operate="models.operate" :timestamp="models.timestamp"
      :orderId="models.orderId" @know="know()"></showIntegralModel>
  </scroll-view>
</template>
<script>
  import {
    get,
    post,
    webHandle
  } from "../../http/http.js";
  import showIntegralModel from "../../components/showIntegralModel/showIntegralModel.vue";
  export default {
    data() {
      return {
        //滚动距离
        scroll_t: 0,
        scroll_t_old: 0,
        // 弹窗model
        models: {
          disjunctor: false,
        },
        animationData: {}, //动画
        actType: false,
        btnType: 1,
        checkedSear: {}, //筛选多选box
        types: "",
        typeData: [],
        listData: {
          idx: 0,
          sum: 20,
          workOrder: {
            abnormityType: "0",
            associationTypes: [],
            keyWord: "",
          },
        },
        workData: [],
      };
    },
    components: {
      showIntegralModel,
    },
    methods: {
      //滚动距离
      scrollList(e) {
        this.scroll_t_old = e.detail.scrollTop;
      },
      // 知道了
      know() {
        this.scroll_t = this.scroll_t_old;
        this.models.disjunctor = false;
      },
      //积分详情
      detailIt(infoDATA) {
        this.models.disjunctor = true;
        this.models.orderId = infoDATA.id;
        this.models.timestamp = Date.now();
      },
      item() {
        this.actType = false;
        this.animation.opacity(0).step();
        this.animationData = this.animation.export();
      },
      // 确定
      ok(data) {
        this.getData(data);
        this.actType = false;
        this.animation.opacity(0).step();
        this.animationData = this.animation.export();
      },
      // 搜索
      search(data) {
        this.getData(data);
        this.actType = false;
        this.animation.opacity(0).step();
        this.animationData = this.animation.export();
      },
      // 重置
      Reset() {
        for (var k in this.checkedSear) {
          this.checkedSear[k] = false;
        }
        this.listData.workOrder.associationType = [];
        this.listData.workOrder.abnormityType = "0";
        this.listData.workOrder.keyWord = "";
        this.getData(this.listData);
      },
      // 筛选
      act() {
        if (this.actType) {
          //当前状态时展开
          this.animation.opacity(0).step();
          this.animationData = this.animation.export();
        } else {
          //seimin
          this.animation.opacity(1).step();
          this.animationData = this.animation.export();
        }
        this.actType = !this.actType;
      },
      // 类型筛选
      sxTab(type, id) {
        this.$set(this.checkedSear, id, !this.checkedSear[id]);
        let checkedArr = [];
        for (var k in this.checkedSear) {
          if (this.checkedSear[k]) {
            checkedArr.push(k);
          }
        }
        this.listData.workOrder.associationTypes = checkedArr;
      },
      gdTab(type) {
        this.listData.workOrder.abnormityType = type;
      },

      getType() {
        let data = {
          type: "list",
          key: "association_types",
        };

        post("/common/common/getDictionary", data).then((res) => {
          for (var i = 0; i < res.length; i++) {
            let list = {
              name: "",
              associationTypes: "",
              id: "",
            };
            list.name = res[i].name;
            list.associationTypes = res[i].value;
            list.id = res[i].id;
            this.typeData.push(list);
            let id = res[i].id;
            this.$set(this.checkedSear, id, false);
          }
        });
      },
      getData(data) {
        uni.showLoading({
          title: '加载中',
          mask: true
        });
        post("/api/getOrdersByDate/" + this.types, data).then((res) => {
          uni.hideLoading();
          if (res.status == 200) {
            this.workData = res.data.data;
          } else {
            uni.showToast({
              icon: "none",
              title: "请求失败！",
            });
          }
        });
      },
    },
    onLoad(options) {
      console.log(options)
      this.types = options.type;
      this.getType();
      this.getData(this.listData);
      // 创建动画
      this.animation = uni.createAnimation({
        duration: 500,
        timingFunction: "ease",
      });
      // #ifdef APP-PLUS
      webHandle("no", "app");
      // #endif
      // #ifdef H5
      webHandle("no", "wx");
      // #endif
    },
    onUnload() {
      // 页面关闭后清空数据
      this.animationData = {};
    },
  };
</script>
<style lang="less">
  .my_list {
    height: 100vh;

    .my_list_top {
      height: 90rpx;
      background: #fff;
      line-height: 90rpx;
      border-bottom: 2rpx solid rgb(142, 157, 158);
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 999;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .my_list_topL {
        float: left;
        width: 22%;
        height: 100%;
        font-size: 32rpx;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;

        text {
          font-size: 34rpx;
        }
      }

      .my_list_topC {
        float: left;
        width: 55%;

        input {
          height: 60rpx;
          border: 2rpx solid rgb(142, 157, 158);
          border-radius: 40rpx;
          width: 100%;
          padding-left: 10rpx;
          padding-right: 10rpx;
        }
      }

      .my_list_topR {
        float: right;
        width: 22%;
        height: 100%;
        font-size: 32rpx;
        text-align: center;
      }
    }

    .my_list_tops {
      background: #fff;
      position: fixed;
      padding-top: 20rpx;
      z-index: 999;
      top: 92rpx;
      width: 100%;
      opacity: 0;

      .tops {
        height: 100%;
        text-align: left;
        padding-left: 30rpx;
        font-size: 32rpx;

        .tops_cont {
          height: 100%;
          margin-top: 10rpx;
          overflow: hidden;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          view {
            width: 32%;
            height: 70rpx;
            line-height: 70rpx;
            // float: left;
            text-align: center;
            // margin-right: 2%;
            color: rgb(142, 157, 158);
            background: rgb(249, 250, 251);
            border-radius: 8rpx;
            margin-bottom: 2%;
          }

          .ac {
            color: #fff !important;
            background-image: linear-gradient(to right,
                #72c172,
                #3bb197) !important;
          }

          .ac1 {
            display: inline-block;
          }
        }

        .tops_cont1 {
          height: 100rpx;
          margin-top: 10rpx;
          overflow: hidden;

          view {
            width: 45%;
            color: rgb(142, 157, 158);
            height: 70rpx;
            line-height: 70rpx;
            float: left;
            text-align: center;
            margin-right: 2%;
            background: rgb(249, 250, 251);
            border-radius: 8rpx;
          }
        }

        .tops_cont2 {
          height: 90rpx;
          line-height: 90rpx;
        }

        .lxType {
          color: #fff !important;
          background-image: linear-gradient(to right,
              #72c172,
              #3bb197) !important;
        }

        .gdType {
          color: #fff !important;
          background-image: linear-gradient(to right,
              #72c172,
              #3bb197) !important;
        }
      }

      .foot_btn2 {
        position: absolute;
        width: 100%;
        line-height: 90rpx;
        height: 90rpx;
        border-top: 2rpx solid #e5e9ed;
        border-bottom: 2rpx solid #e5e9ed;
        background: #f9fafb;
        text-align: center;

        view {
          height: 90rpx;
          width: 49%;
          color: rgb(153, 153, 153);
          font-size: 32rpx;
        }

        .btn1 {
          float: left;
        }

        .btn2 {
          float: right;
          border-left: 2rpx solid #e5e9ed;
        }
      }

      .btnType {
        color: rgb(102, 102, 102) !important;
      }
    }

    .item {
      padding: 0 20rpx;
      margin-top: 120rpx;

      .page_items {
        margin-bottom: 110rpx;

        .page_item {
          margin-top: 16rpx;
          min-height: 356rpx;
          background: #fff;
          border-radius: 8rpx;
          overflow: hidden;
          padding: 0 16rpx;
          border: 2rpx solid #e5e9ed;

          .L {
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
            background: #f9fafb; // background: blue;
            position: relative;
            left: -50rpx;
            top: 66rpx;
          }

          .R {
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
            background: #f9fafb;
            position: relative;
            float: right;
            right: -50rpx;
            top: 26rpx;
          }

          .starting {
            width: 50rpx;
            height: 50rpx;
            color: #fff;
            background: #49b856;
            display: inline-block;
            border-radius: 50%;
            text-align: center;
            line-height: 46rpx;
            font-size: 32rpx;
            margin-right: 6rpx;
          }

          .End {
            width: 50rpx;
            height: 50rpx;
            color: #fff;
            background: #39b199;
            display: inline-block;
            border-radius: 50%;
            text-align: center;
            line-height: 46rpx;
            font-size: 32rpx;
            margin-right: 6rpx;
          }

          .page_item_top {
            height: 86rpx;
            border-bottom: 2rpx dashed #e5e9ed;

            .page_item_top_L {
              height: 100%;
              float: left;
              line-height: 88rpx;

              .ac {
                width: 32rpx;
                height: 32rpx;
                border: 2rpx solid #ccc;
                display: inline-block;
                position: relative;
                top: 6rpx;
                display: none;

                text {
                  width: 24rpx;
                  height: 24rpx;
                  background: #39b199;
                  display: block;
                  margin: 0 auto;
                  margin-top: 4rpx;
                }
              }

              .ac1 {
                width: 32rpx;
                height: 32rpx;
                border: 2rpx solid #ccc;
                display: inline-block;
                position: relative;
                top: 6rpx;
              }

              .emergencys {
                background: #ff3b53 !important;
                width: 124rpx !important;
              }

              .emergency {
                background: #ff3b53 !important;
              }

              .emergency1 {
                background: #49b856 !important;
              }

              .page_item_cont_start {
                text-align: center;
                height: 44rpx;
                width: 104rpx;
                line-height: 44rpx;
                border-radius: 8rpx;
                background: #49b856;
                color: #fff;
                display: inline-block;
                font-size: 28rpx;
              }

              .L_time {
                color: #6cc076;
                font-size: 32rpx;
              }

              .L_text {
                font-size: 32rpx;
                display: inline-block;
                font-weight: 700;
              }

              .L_iocn {
                display: inline-block;
                height: 52rpx;
                color: rgb(7, 134, 60);
                font-size: 28rpx;
                font-weight: 700;
                margin-left: 20rpx;
              }
            }

            .page_item_top_R {
              height: 60rpx;
              float: right;
              padding-top: 20rpx;
              font-size: 32rpx;
              position: absolute;
              right: 50rpx;
              line-height: 48rpx;

              .num {
                color: rgb(7, 134, 60);
              }

              .num1 {
                color: #ff3b53 !important;
              }
            }
          }

          .page_item_cont {
            min-height: 180rpx;
            max-height: 424rpx;
            padding: 0 16rpx;
            text-align: left;
            position: relative;

            .text_big {
              font-size: 32rpx;
              position: absolute;
              right: 16rpx;
              font-weight: 700;
              margin-top: 10rpx;
            }

            .text_big2 {
              font-size: 32rpx;
              position: absolute;
              right: 16rpx;
              font-weight: 700;
            }

            .line {
              height: 20rpx;
              width: 2rpx;
              border-left: 2rpx solid #e5e9ed;
              position: absolute;
              top: 82rpx;
              left: 40rpx;
            }

            .lines {
              height: 40%;
              width: 2rpx;
              border-left: 2rpx solid #e5e9ed;
              position: absolute;
              top: 23%;
              left: 36rpx;
            }

            .page_item_cont_T {
              padding-top: 28rpx;
              font-size: 28rpx;

              .page_item_cont_title {
                height: 100%;
                font-size: 32rpx;
              }
            }

            .page_item_cont_B {
              padding-top: 28rpx;
              margin-bottom: 28rpx;

              .page_item_cont_title {
                height: 60rpx;
                font-size: 32rpx;
              }

              .page_item_cont_title1 {
                height: 60rpx;
                line-height: 60rpx;
                font-size: 32rpx;
                padding-left: 64rpx;
              }
            }
          }

          .page_item_foot {
            border-top: 2rpx dashed #e5e9ed;
            border-bottom: 2rpx dashed #e5e9ed;
            padding: 28rpx 16rpx;
            text-align: left;

            .page_item_foot_text {
              height: 48rpx;
              font-size: 32rpx;
              line-height: 48rpx;
              margin-bottom: 20rpx;

              .text1 {
                color: rgb(102, 102, 102);
              }

              .text2 {
                float: right;
                font-weight: 700;
              }
            }
          }

          #infos {
            display: none;
          }

          .page_item_infos {
            padding-bottom: 20rpx;
            border-bottom: 2rpx dashed #e5e9ed;

            .page_item_info2 {
              text-align: left;
              line-height: 60rpx;
              font-size: 32rpx;
              padding-left: 16rpx;

              .page_item_foot_text {
                height: 48rpx;
                font-size: 32rpx;
                line-height: 48rpx;
                margin-bottom: 20rpx;

                .text1 {
                  color: rgb(102, 102, 102);
                }

                .text2 {
                  float: right;
                  font-weight: 700;
                }
              }
            }
          }
        }
      }
    }
  }
</style>