xt_pad/src/pages/waitingRoom/components/waitingcontent.vue

<!-- 候诊室 -->
<template>
  <div>
    <div class="navigation">
      <div class="menuTab">
        <ul>
          <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>
    <div class="dataList">
      <div class="cell clearfix" v-if="scheduals.length > 0">
        <h2 class="title"> </h2>
        <data-list :scheduals="filtedScheduals"></data-list>
      </div>
    </div>
  </div>
</template>

<script>
import DataList from "./data_list"
import { getWaitingScheduals } from "@/api/dialysis"
import { parseTime } from "@/utils"

export default {
  name: "WaitingContent",
  components: {
    DataList
  },
  data() {
    return {
      menuList: [
        { value: "1", label: "全部", count:0 },
        { value: "2", label: "透前称量", count:0 },
        { value: "3", label: "制定处方", count:0 }
      ],

      select_index: 0,

      scheduals: [],
    };
  },
  computed: {
    filtedScheduals: function() {
      if (this.select_index == 0) {
        return this.scheduals

      } else if (this.select_index == 1) {
        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 scheduals

      } else {
        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
      }
    }
  },
  created() {
    this.requestScheduals()
  },
  methods: {
    menuTabClick: function(tabIndex) {
      this.select_index = tabIndex;
    },

    requestScheduals() {
      var date = parseTime(Date.parse(new Date()), "{y}-{m}-{d}")
      // var date = (Date.parse(new Date()) / 1000) - 28800
      console.log(date)
      getWaitingScheduals({date: date}).then(rs => {
        var resp = rs.data
        console.log(resp)
        if (resp.state == 1) {
          var scheduals = resp.data.scheduals
          console.log(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 = totalCount
          this.menuList[1].count = assessment_before_dislysis_count
          this.menuList[2].count = prescription_count
          this.scheduals = scheduals

        } else {
          this.$toast({
            message: resp.msg,
          })
        }
      })
    }
  }
};
</script>

<style style="stylesheet/scss" lang="scss"  scoped>
.menuTab {
  background: $main-color;
  padding: 0.17rem 0 0.28rem 0;
  color: $text-color;
  font-size: 0.3rem;
  @include box-sizing;
  ul {
    width: 70%;
    @include display-flex;
    @include text-align;
    @include align-items-center;
    @include justify-content-center;
    margin: 0 auto;
    li {
      //   @include flex;
      border-radius: 50px;
      padding: 0.16rem 0.3rem;
      margin: 0 0.2rem;
      &.active {
        background: rgba(255, 255, 255, 0.2);
      }
    }
  }
}
.dataList {
  @include box-sizing;
  margin: 0 0 1.425rem 0;
  .cell {
    padding: 0 0.28rem 0 0;
    margin-top: 0.3rem;
    background: $white-bg;
    .title {
      font-size: 0.36rem;
      padding: 0.27rem 0.4rem;
      color: $pgh-color;
      font-weight: 700;
    }
  }
}
</style>