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

<!-- 透析室 -->
<template>
  <div>
    <div class="navigation">
      <ul class="ul">
        <li class="list" @click="showZonePicker">
          <span>{{selected_zone[0].text}}</span>
          <span class="iconfont">&#xe60c;</span>
        </li>
        <li class="list" @click="showSchedualTypePicker">
          <span>{{selected_schedual_type[0].text}}</span>
          <span class="iconfont">&#xe60c;</span>
        </li>
        <li class="list" @click="openPicker">
          <span>{{selected_date_str}}</span>
          <span class="iconfont">&#xe60c;</span>
        </li>
      </ul>

      <vue-pickers :show="show_zone_picker" :columns="1" :defaultData="selected_zone" :selectData="zones" @cancel="hideZonePicker" @confirm="didSelectZone">
      </vue-pickers>

      <vue-pickers :show="show_schedual_type_picker" :columns="1" :defaultData="selected_schedual_type" :selectData="schedual_types" @cancel="hideSchedualTypePicker" @confirm="didSelectSchedualType">
      </vue-pickers>

      <mt-datetime-picker ref="datePicker" type="date" v-model="selected_date" :endDate="new Date()" @confirm="didSelectDate">
      </mt-datetime-picker>
    </div>

    <div class="dataList">
      <div v-for="(scheduals, index) in filtedScheduals" :key="index" class="cell clearfix">
        <h2 class="title">{{scheduals.zone_name}}</h2>
        <data-list :scheduals="scheduals.scheduals"></data-list>
      </div>
    </div>
  </div>
</template>

<script>
import DataList from "./data_list"
import vuePickers from "vue-pickers"
import { parseTime } from "@/utils/index"
import { getDialysisScheduals } from "@/api/dialysis"

export default {
  name: "DialysisContent",
  components: {
    DataList,
    vuePickers
  },
  data() {
    return {
      show_schedual_type_picker: false,
      selected_schedual_type: [{ value: 0, text: "全部班" }],
      schedual_types: {
        data1: [
          { value: 0, text: "全部班" },
          { value: 1, text: "上午" },
          { value: 2, text: "下午" },
          { value: 3, text: "晚上" },
        ]
      },

      show_zone_picker: false,
      selected_zone: [{ value: 0, text: "全部分区" }],
      zones: {
        data1: [
          { value: 0, text: "全部分区" }
        ]
      },

      selected_date: new Date(),

      dialysis_scheduals: [],
    };
  },
  computed: {
    selected_date_str: function() {
      return parseTime(this.selected_date, "{y}-{m}-{d}")
    },
    filtedScheduals: function() {
      if (this.selected_zone[0].value == 0) {
        return this.dialysis_scheduals

      } else {
        var zone_name = this.selected_zone[0].text
        for (let index = 0; index < this.dialysis_scheduals.length; index++) {
          const dialysis_scheduals = this.dialysis_scheduals[index];
          if (dialysis_scheduals.zone_name == zone_name) {
            return [{zone_name: zone_name, scheduals: dialysis_scheduals.scheduals}]
          }
        }
      }
    }
  },
  created() {
    this.requestDialysisScheduals()
  },
  methods: {
    openPicker() {
      this.$refs.datePicker.open();
    },
    didSelectDate: function(date) {
      this.requestDialysisScheduals()
    },

    showZonePicker() {
      this.show_zone_picker = true
    },
    hideZonePicker() {
      this.show_zone_picker = false
    },
    didSelectZone(val) {
      this.show_zone_picker = false
      this.selected_zone = [val.select1];
    },

    showSchedualTypePicker() {
      this.show_schedual_type_picker = true
    },
    hideSchedualTypePicker() {
      this.show_schedual_type_picker = false
    },
    didSelectSchedualType(val) {
      this.show_schedual_type_picker = false;
      this.selected_schedual_type = [val.select1];
      this.requestDialysisScheduals()
    },

    requestDialysisScheduals() {
      var type = this.selected_schedual_type[0].value
      // var date = (Date.parse(new Date(this.selected_date_str)) / 1000) - 28800
      getDialysisScheduals({type: type, date: this.selected_date_str}).then(rs => {
        var resp = rs.data
        if (resp.state == 1) {
          console.log(resp.data)
          var scheduals = resp.data.scheduals
          var zoneMap = {}
          var schedualMap = {}
          for (let index = 0; index < scheduals.length; index++) {
            const schedual = scheduals[index]
            if (schedual.dialysis_order == null) {
              continue
            }
            if (schedualMap[schedual.device_zone.name] == null) {
              schedualMap[schedual.device_zone.name] = []
            }
            schedualMap[schedual.device_zone.name].push(schedual)
            if (zoneMap[schedual.device_zone.name] == null) {
              zoneMap[schedual.device_zone.name] = schedual.device_zone
            }
          }

          var zones = []
          zones.push({ value: 0, text: "全部分区" })
          for (var zoneName in zoneMap) {
            zones.push({ value: zoneMap[zoneName].id, text: zoneName })
          }
          zones = zones.sort(function(a, b) {
            return a.value > b.value
          })
          this.zones.data1 = zones

          var dialysis_scheduals = []
          for (let index = 0; index < zones.length; index++) {
            const zone = zones[index]
            var scheduals = schedualMap[zone.text]
            if (scheduals == null) {
              continue
            }
            dialysis_scheduals.push({zone_name: zone.text, scheduals: scheduals})
          }
          this.dialysis_scheduals = dialysis_scheduals

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


<style rel="stylesheet/scss" lang="scss" scoped>
.navigation {
  padding: 0.17rem 0 0.28rem 0;
  background: $main-color;
  .ul {
    @include box-sizing;
    @include display-flex;
    @include justify-content-center;
    @include text-align;
    /*overflow-y:scroll;*/
    width: 60%;
    margin: 0 auto;
    .list {
      color: $text-color;
      display: inline-block;
      font-size: 0.3rem;
      @include flex;
      span {
        &.iconfont {
          font-size: 0.3rem;
        }
      }
    }
  }
}
.dataList {
  @include box-sizing;
  margin: 0 0 1.425rem 0;
  .cell {
    padding: 0.28rem 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>