xt_pad/src/pages/main/WaitingArea.vue

<template>
  <div>
    <div class="screening">
      <ul>
        <el-popover
          v-model="zone_options_visible"
          placement="bottom"
          trigger="click">
          <li slot="reference">
            {{ zone_options[zone_selected].text }}<span class="iconfont">&#xe74a;</span>
          </li>
          <div class="popover-demo-content">
            <ul>
              <li v-for="(option, index) in zone_options" :key="index" @click="handleZoneChange(index)" :class="zone_selected == index ? 'tick' : ''">{{ option.text }}</li>
            </ul>
          </div>
        </el-popover>

         <li v-for="(item,i) in menuList" :class="select_index == i ? 'active' : ''" @click="menuTabClick(i)" 
        :key="i">{{ item.label + (item.count > 0 ? '(' + item.count + ')' : '') }}</li>
      </ul>
    </div>
    <div class="stateBox ">
      <!-- <patient-box class="clearfix" :patients="filtedScheduals "></patient-box> -->
      <div v-for="(item, index) in filtedScheduals" :key="index">
        <h2 class="title" >{{item.zone_name}}</h2>
        <patient-box class="clearfix" :patients="item.scheduals"></patient-box>
      </div>
      <div class="NoData" v-show="filtedScheduals.length == 0"><img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/data.jpg" alt=""></div>

    </div>
  </div>
</template>

<script>
import PatientBox from "./PatientBox";
import { getWaitingScheduals } from "@/api/dialysis";
import { parseTime } from "@/utils";
import { Popover } from "vux";

export default {
  name: "WaitingArea",
  components: {
    PatientBox,
    Popover
  },
  data() {
    return {
      menuList: [
        { value: "2", label: "透前称量", count: 0 },
        { value: "3", label: "制定处方", count: 0 }
      ],

      select_index: -1,
      zone_selected: 0,

      scheduals: [],

      zone_options: [{ value: 0, text: "全部分区" }],
      zone_scheduals: [],

      zone_options_visible: false,
    };
  },
  props: {
    search_keyword: {
      type: String
    }
  },
  computed: {
    filtedScheduals: function() {
      var search_keyword = this.search_keyword;
      if (this.search_keyword.length > 0) {
        var scheduals = [];
        for (let index = 0; index < this.scheduals.length; index++) {
          const schedual = this.scheduals[index];
          if (
            schedual.patient.name.indexOf(search_keyword) != -1 ||
            schedual.patient.dialysis_no.indexOf(search_keyword) != -1
          ) {
            scheduals.push(schedual);
          }
        }
        return this.processScheduals(scheduals);
      }

      if (this.zone_selected != 0) {
        var zone_name = this.zone_options[this.zone_selected].text;
        for (let index = 0; index < this.zone_scheduals.length; index++) {
          const zone_scheduals = this.zone_scheduals[index];
          if (zone_scheduals.zone_name == zone_name) {
            return [zone_scheduals];
          }
        }
      }

      if (this.select_index == 0) {
        // console.log("点击了第二个");
        var scheduals = [];
        for (let index = 0; index < this.scheduals.length; index++) {
          const schedual = this.scheduals[index];
          if (schedual.assessment_before_dislysis != null) {
            scheduals.push(schedual);
          }
        }
        return this.processScheduals(scheduals);
        // return scheduals;
      } else if (this.select_index == 1) {
        // console.log("点击了第三个");
        var scheduals = [];
        for (let index = 0; index < this.scheduals.length; index++) {
          const schedual = this.scheduals[index];
          if (
            schedual.assessment_before_dislysis == null &&
            schedual.prescription != null
          ) {
            scheduals.push(schedual);
          }
        }
        // return scheduals;
        return this.processScheduals(scheduals);
      } else {
        return this.zone_scheduals;
      }
    }
  },
  created() {
    this.requestScheduals();
  },
  methods: {
    menuTabClick: function(tabIndex) {
      this.select_index = tabIndex;
      this.zone_selected = 0;
    },
    handleZoneChange: function(index) {
      this.zone_options_visible = false;
      this.zone_selected = index;
      this.select_index = -1;
    },

    requestScheduals() {
      var date = parseTime(Date.parse(new Date()), "{y}-{m}-{d}");
      getWaitingScheduals({ date: date }).then(rs => {
        var resp = rs.data;
        // console.log(resp);
        if (resp.state == 1) {
          var scheduals = resp.data.scheduals;
          var totalCount = scheduals.length;
          var prescription_count = 0;
          var assessment_before_dislysis_count = 0;
          for (let index = 0; index < scheduals.length; index++) {
            const schedual = scheduals[index];
            if (schedual.assessment_before_dislysis != null) {
              assessment_before_dislysis_count += 1;
            } else if (schedual.prescription != null) {
              prescription_count += 1;
            }
          }
          this.menuList[0].count = assessment_before_dislysis_count;
          this.menuList[1].count = prescription_count;
          this.scheduals = scheduals;

          this.zone_options = this.makeZones(scheduals);
          this.zone_scheduals = this.processScheduals(scheduals);
        } else {
          this.$toast({
            message: resp.msg
          });
        }
      });
    },
    makeZones: function(scheduals) {
      var zoneMap = {};
      for (let index = 0; index < scheduals.length; index++) {
        const schedual = scheduals[index];
        if (zoneMap[schedual.device_number.zone.id] == null) {
          zoneMap[schedual.device_number.zone.id] = schedual.device_number.zone;
        }
      }

      var zones = [];
      zones.push({ value: 0, text: "全部分区" });
      for (var zoneId in zoneMap) {
        zones.push({ value: zoneMap[zoneId].id, text: zoneMap[zoneId].name });
      }

      zones = zones.sort(function(a, b) {
        return a.id > b.id;
      });
      return zones;
    },
    processScheduals: function(scheduals) {
      var zoneMap = {};
      var schedualMap = {};
      for (let index = 0; index < scheduals.length; index++) {
        const schedual = scheduals[index];
        if (schedualMap[schedual.device_number.zone.id] == null) {
          schedualMap[schedual.device_number.zone.id] = [];
        }
        schedualMap[schedual.device_number.zone.id].push(schedual);
        if (zoneMap[schedual.device_number.zone.id] == null) {
          zoneMap[schedual.device_number.zone.id] = schedual.device_number.zone;
        }
      }

      var zones = [];
      // zones.push({ value: 0, text: "全部分区" })
      for (var zoneId in zoneMap) {
        zones.push({ id: zoneMap[zoneId].id, name: zoneMap[zoneId].name });
      }

      zones = zones.sort(function(a, b) {
        return a.id > b.id;
      });
      // this.zones = zones

      var zone_scheduals = [];
      for (let index = 0; index < zones.length; index++) {
        const zone = zones[index];
        var scheduals = schedualMap[zone.id];
        zone_scheduals.push({
          zone_id: zone.id,
          zone_name: zone.name,
          scheduals: scheduals
        });
      }
      // this.zone_scheduals = zone_scheduals;
      return zone_scheduals;
    }
  }
};
</script>

<style style="stylesheet/scss" lang="scss" scoped>
.screening {
  border-bottom: 1px #e5e5e5 solid;
  position: fixed;
  top: 63px;
  right: 0;
  z-index: 66;
  left: 1.58rem;
  background: #fff;
  ul {
    @include display-flex;
    @include align-items-center;
    @include text-align;
    @include justify-content-between;
    width: 60%;
    margin: 0 auto;
    font-size: 0.32rem;
    color:$title-color;
    li {
      padding: 0.3rem 0;
      .iconfont {
        font-size: 0.32rem;
        margin-left: 0.1rem;
      }
    }
    .active {
      position: relative;
      &::before {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: $main-color;
        // border-bottom: 0.04rem $main-color solid;
        content: "";
      }
    }
  }
}
.stateBox {
  // padding: 0.5rem 0 0 0.6rem;
  .title {
    font-size: 0.34rem;
    color: #34495e;
    font-weight: 600;
    height: 1rem;
    line-height: 1rem;
    display: inline-block;
  }
}
</style>