Vue_New/src/xt_pages/dialysis/schedualPatient.vue

<template>
<div class="main-contain">
  <div class="position">
    <bread-crumb :crumbs='crumbs'></bread-crumb>
  </div>
  <div class="app-container">
    <div class="cell clearfix">
      <!-- <label class="title"><span class="name">病人查询</span> : </label> -->
      <el-input size="small" style="width: 280px;" v-model.trim="search_input" class="filter-item"/>
      <el-button size="small" class="filter-item" type="primary" icon="el-icon-search" @click="searchAction">搜索</el-button>
    </div>
    <div class="cell clearfix">
      <label class="title"><span class="name">日期查询</span> : </label>
      <el-date-picker v-model="selected_date" prefix-icon="el-icon-date" @change="handleScheduleDateChange" :editable="false" :clearable="false" style="width: 196px;" type="date" placeholder="选择日期时间" align="right" ></el-date-picker>
    </div>
    <div class="cell clearfix">
      <label class="title"><span class="name">排班班次</span> : </label>
      <div class="time ">
        <ul class="">
          <li v-for="option in schedule_type_options" :key="option.value" @click="handletimeType(option.value)" :class="schedule_type_selected == option.value ? 'active' : ''" >{{option.text}}
          </li>
        </ul>
      </div>
    </div>
    <div class="cell clearfix">
      <label class="title"><span class="name">分区</span> : </label>
      <div class="time ">
        <ul class="">
          <li v-for="option in zone_options" :key="option.id" :class="option.id == zone_selected ? 'active' : ''" @click='handleZoneChange(option.id)'>{{ option.text }}
          </li>
        </ul>
      </div>
    </div>

    <div class="PatientArea">
      <div v-for="zone_schedule in filtedSchedules" :key="zone_schedule.zone_id" class="list clearfix">
        <h3 class="title">{{zone_schedule.zone_name}}</h3>
        <patient-box :schedules="zone_schedule.schedules"></patient-box>
      </div>
      <div class="NoData" v-show="filtedSchedules.length == 0">
        <img src="@/assets/img/data.jpg" alt="">
      </div>
    </div>
  </div>
</div>
</template>

<script>
  import PatientBox from './PatientBox'
import { getDialysisRecordInitData, getDialysisSchedules } from '@/api/dialysis_record'
  import { parseTime } from '@/utils'
  import BreadCrumb from '@/xt_pages/components/bread-crumb'

  export default {
    name: 'Patient',
    components: {
      PatientBox,
      BreadCrumb
    },
    data() {
      return {
        crumbs: [
          { path: false, name: '透析管理' },
          { path: 'dialysis/dialysisrecord', name: '透析记录' }
        ],
        selected_date: new Date(), // this.$store.getters.app.dialysis_area.schedule_date,
        schedule_type_selected: 0, // this.$store.getters.app.dialysis_area.schedule_type_select_index,
        schedule_type_options: [
          { value: 0, text: '全部' },
          { value: 1, text: '上午' },
          { value: 2, text: '下午' },
          { value: 3, text: '晚上' }
        ],
        zone_selected: 0, // this.$store.getters.app.dialysis_area.zone_select_index,
        zone_options: [
          { id: 0, text: '全部' }
        ],
        zone_schedules: [],

        date_picker_options: {
          shortcuts: [
            {
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', new Date())
              }
            },
            {
              text: '昨天',
              onClick(picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24)
                picker.$emit('pick', date)
              }
            },
            {
              text: '一周前',
              onClick(picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', date)
              }
            }
          ]
        },

        // search_input 和 search_keyword，使输入关键字时不会经常刷新 filtedSchedules
        search_keyword: '', // 确定用于搜索的关键字
        search_input: '' // 输入中的关键字
      }
    },
    computed: {
      filtedSchedules: function() {
        var search_keyword = this.search_keyword
        if (search_keyword.length > 0) {
          var schedules = []
          for (let o_i = 0; o_i < this.zone_schedules.length; o_i++) {
            const scheduleInfo = this.zone_schedules[o_i]
            var originSchedules = scheduleInfo.schedules
            if (originSchedules.length == 0) {
              continue
            }
            var filtedSchedules = []
            for (let s_i = 0; s_i < originSchedules.length; s_i++) {
              const schedule = originSchedules[s_i]
              if (schedule.patient.name.indexOf(search_keyword) != -1) {
                filtedSchedules.push(schedule)
                // break
              }
            }
            if (filtedSchedules.length > 0) {
              schedules.push({ zone_id: scheduleInfo.zone_id, zone_name: scheduleInfo.zone_name, schedules: filtedSchedules })
            }
          }
          return schedules
        }

        var zone_selected = this.zone_selected
        var timetype_selected = this.schedule_type_selected
        if ((zone_selected == 0 && timetype_selected == 0) || this.zone_options.length <= 1) {
          var schedules = []
          for (let index = 0; index < this.zone_schedules.length; index++) {
            const scheduleInfo = this.zone_schedules[index]
            if (scheduleInfo.schedules.length != 0) {
              schedules.push(scheduleInfo)
            }
          }
          return schedules
        }

        var schedules = []
        for (let o_i = 0; o_i < this.zone_schedules.length; o_i++) {
          const scheduleInfo = this.zone_schedules[o_i]
          if (zone_selected == scheduleInfo.zone_id && timetype_selected == 0) {
            if (scheduleInfo.schedules.length == 0) {
              return []
            } else {
              return [scheduleInfo]
            }
          }
          var originSchedules = scheduleInfo.schedules
          if (originSchedules.length == 0) {
            continue
          }
          var filtedSchedules = []
          for (let s_i = 0; s_i < originSchedules.length; s_i++) {
            const schedule = originSchedules[s_i]
            if (zone_selected != 0) {
              if (zone_selected == schedule.device_number.zone.id) {
                if (timetype_selected == 0 || schedule.schedule_type == timetype_selected) {
                  filtedSchedules.push(schedule)
                }
              }
            } else {
              if (timetype_selected == 0 || schedule.schedule_type == timetype_selected) {
                filtedSchedules.push(schedule)
              }
            }
          }
          if (filtedSchedules.length > 0) {
            schedules.push({ zone_id: scheduleInfo.zone_id, zone_name: scheduleInfo.zone_name, schedules: filtedSchedules })
          }
        }
        return schedules
      }
    },
    created() {
      var schedule_type_selected = this.$store.getters.schedule_type_selected
      var zone_selected = this.$store.getters.zone_selected
      if (schedule_type_selected) {
        this.schedule_type_selected = schedule_type_selected.schedule_type_selected
      }
      if (zone_selected) {
        this.zone_selected = zone_selected.zone_selected
      }
      this.getInitData()
    },
    methods: {
      handletimeType: function(index) {
        this.schedule_type_selected = index
        this.$store.dispatch('SetScheduleTypeSelected', { schedule_type_selected: index })
        this.search_keyword = this.search_input = ''
        // this.$store.dispatch("SaveDialysisAreaSelectIndexs", {
        //   zone: this.zone_selected,
        //   schedule_type: this.schedule_type_selected,
        //   schedule_date: this.selected_date,
        // })
      },
      handleZoneChange: function(index) {
        this.zone_selected = index
        this.$store.dispatch('SetZoneSelected', { zone_selected: index })
        this.search_keyword = this.search_input = ''
        // this.$store.dispatch("SaveDialysisAreaSelectIndexs", {
        //   zone: this.zone_selected,
        //   schedule_type: this.schedule_type_selected,
        //   schedule_date: this.selected_date,
        // })
      },
      handleScheduleDateChange: function() {
        this.zone_selected = 0
        this.schedule_type_selected = 0
        this.search_keyword = this.search_input = ''
        // this.$store.dispatch("SaveDialysisAreaSelectIndexs", {
        //   zone: this.zone_selected,
        //   schedule_type: this.schedule_type_selected,
        //   schedule_date: this.selected_date,
        // })
        this.requestDialysisSchedules()
      },
      searchAction: function() {
        this.search_keyword = this.search_input
        this.schedule_type_selected = 0
        this.zone_selected = 0
      },
      getInitData: function() {
        getDialysisRecordInitData().then(rs => {
          var resp = rs.data
          if (resp.state == 1) {
            var zones = resp.data.zones
            var schedules = resp.data.schedules
            var zone_options = [{ id: 0, text: '全部' }]
            for (let z_i = 0; z_i < zones.length; z_i++) {
              const zone = zones[z_i]
              zone_options.push({ id: zone.id, text: zone.name })
            }
            this.zone_options = zone_options
            this.zone_schedules = this.processedDialysisSchedules(schedules, this.zone_options)
          } else {
            this.$message.error(resp.msg)
          }
        })
      },
      requestDialysisSchedules: function() {
        var ymd = parseTime(this.selected_date, '{y}-{m}-{d}')
        getDialysisSchedules(ymd).then(rs => {
          var resp = rs.data
          if (resp.state == 1) {
            var schedules = resp.data.schedules
            this.zone_schedules = this.processedDialysisSchedules(schedules, this.zone_options)
          } else {
            this.$message.error(resp.msg)
          }
        })
      },
      processedDialysisSchedules: function(schedules, zone_options) {
        var zoneMap = {}
        var scheduleMap = {}
        for (let z_i = 0; z_i < zone_options.length; z_i++) {
          const zone = zone_options[z_i]
          if (zone.id == 0) {
            continue
          }
          scheduleMap[zone.id] = []
        }
        for (let index = 0; index < schedules.length; index++) {
          const schedule = schedules[index]
          scheduleMap[schedule.device_number.zone.id].push(schedule)
        }
        var zone_schedules = []
        for (let index = 0; index < zone_options.length; index++) {
          const zone = zone_options[index]
          if (zone.id == 0) {
            continue
          }
          var schedules = scheduleMap[zone.id]
          zone_schedules.push({ zone_id: zone.id, zone_name: zone.text, schedules: schedules })
        }
        return zone_schedules
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .app-container {
    // margin: 20px;
    font-size: 15px;
    .filter-container {
      padding-bottom: 5px;
    }
    .search-component {
      width: 500px;
      .searchBox {
        width: 300px;
        height: 36px;
        line-height: 36px;
        padding-left: 15px;
        border: 1px #dcdfe6 solid;
        border-right: none;
        outline: none;
        float: left;
        border-radius: 6px 0 0 6px;
        font-size: 14px;
        color: #333;
        background: #fff;
        box-shadow: 3px 3px 4px rgba(135, 135, 135, 0.05);
      }
      .searchBtn {
        background-color: #409eff;
        color: #fff;
        font-size: 15px;
        text-align: center;
        height: 36px;
        line-height: 36px;
        float: left;
        outline: none;
        width: 70px;
        border: none;
        border-radius: 0 6px 6px 0;
        font-family: "Microsoft Yahei";
        cursor: pointer;
      }
    }

    .amount {
      font-weight: normal;
      padding: 10px 0 0 0;
      color: #606266;
      font-size: 14px;
      span {
        color: #ef2525;
        font-family: "Arial";
        padding: 0 2px;
      }
    }
  }
  .PatientArea{
    .list{
      .title{
        font-size: 16px;
        color: #34495e;
        height:50px ;
        line-height: 50px;
        font-weight: bold;
      }
    }
  }
</style>