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="cell clearfix">
      <label class="title"><span class="name">患者状态</span> : </label>
      <div class="time ">
        <ul class="">
          <li v-for="option in patient_state" :key="option.value" @click="handleStateChange(option.value)" :class="patientStateVal == option.value ? 'active' : ''" >{{option.label}}
          </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 treat_state" :key="option.value" @click="handleTreatChange(option.value)" :class="treatStateVal == option.value ? 'active' : ''" >{{option.label}}
          </li>
        </ul>
      </div>
    </div>
    <div class="cell clearfix" style="margin-bottom:10px;">
      <label class="title"><span class="name">其他查询</span> : </label>
      <el-select v-model="schedule_type_selected" placeholder="班次" style="margin-right:10px;" @change="handletimeType">
        <el-option
          v-for="item in schedule_type_options"
          :key="item.value"
          :label="item.text"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="zone_selected" placeholder="分区" style="margin-right:10px;" @change="handleZoneChange">
        <el-option
          v-for="item in zone_options"
          :key="item.id"
          :label="item.text"
          :value="item.id">
        </el-option>
      </el-select>
      <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;margin-right:10px;" type="date" placeholder="选择日期时间" align="right" ></el-date-picker>
      <el-input size="small" style="width: 180px;" 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="PatientArea">
      <div v-for="zone_schedule in allPatient" :key="zone_schedule.zone_id" class="list clearfix" style="display:flex;">
        <!-- <h3 style="width:40px;" class="title">{{zone_schedule.zone_name}}</h3> -->
        <div v-if="zone_schedule.schedules.length > 0 && patientStateVal != 1" style="font-size:16px;font-weight: bold;color: #34495e;margin-right:10px;">{{zone_schedule.zone_name}}</div>
        <patient-box :schedules="zone_schedule.schedules" :patientStateVal='patientStateVal' style="flex:1"></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: '', // 输入中的关键字

        //
        patient_state:[
          {value: 0,label: '全部'},
          {value: 1,label: '已签到'},
          {value: 2,label: '未签到'},
          {value: 3,label: '已上机'},
          {value: 4,label: '已下机'},
        ],
        patientStateVal: 0,
        treat_state:[
          {value: 0,label: '全部'},
          {value: 1,label: '待开处方'},
          {value: 2,label: '待开小结'},
        ],
        treatStateVal: 0,
        allPatient:[]
      }
    },
    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
      var patient_state_selected = this.$store.getters.patient_state_selected
      var treat_state_selected = this.$store.getters.treat_state_selected
      var selected_date = this.$store.getters.selected_date
      if (schedule_type_selected) {
        this.schedule_type_selected = schedule_type_selected.schedule_type_selected
      }
      if (zone_selected) {
        this.zone_selected = zone_selected.zone_selected
      }
      if (patient_state_selected) {
        this.patientStateVal = patient_state_selected.patient_state_selected
      }
      if (treat_state_selected) {
        this.treatStateVal = treat_state_selected.treat_state_selected
      }
      if(selected_date.selected_date){
        this.selected_date = selected_date.selected_date
      }
      
      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(index) {
        console.log("askdjlkas",index)
        this.zone_selected = 0
        this.schedule_type_selected = 0
        this.patientStateVal = 0
        this.treatStateVal = 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.selected_date = index
        this.$store.dispatch('SetSelectedDate', { selected_date: index })
        this.requestDialysisSchedules()
      },
      searchAction: function() {
        this.search_keyword = this.search_input
        this.schedule_type_selected = 0
        this.zone_selected = 0
        this.treatStateVal = 0
        this.patientStateVal = 0
        if(this.search_input != ''){
          this.allPatient = this.filtedSchedules
        }else{
          this.getData()
        }
        
      },
      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)
            this.requestDialysisSchedules()
            this.getData()
            console.log(1111111111111,this.zone_schedules)
          } 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)
            this.allPatient = this.filtedSchedules
          } 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
      },

      //
      handleStateChange: function(index) {
        this.patientStateVal = index
        this.$store.dispatch('SetPatientStateSelected', { patient_state_selected: index })
        this.search_keyword = this.search_input = ''
        this.getData()
      },
      handleTreatChange: function(index) {
        this.treatStateVal = index
        this.$store.dispatch('SetTreatStateSelected', { treat_state_selected: index })
        this.search_keyword = this.search_input = ''
        this.getData()
      },
      handletimeType: function(index) {
        this.schedule_type_selected = index
        this.$store.dispatch('SetScheduleTypeSelected', { schedule_type_selected: index })
        this.search_keyword = this.search_input = ''
        this.getData()
      },
      //分区
      handleZoneChange: function(index) {
        this.zone_selected = index
        this.$store.dispatch('SetZoneSelected', { zone_selected: index })
        this.search_keyword = this.search_input = ''
        this.getData()
      },
      getData(){
    
        let patientArr = []
        patientArr = JSON.parse(JSON.stringify(this.zone_schedules))
        // for (let i = 0; i < patientArr.length; i++) {
          
        //   for (let j = 0; j < patientArr[i].schedules.length; j++) {
        //     if (patientArr[i].schedules.length > 0 && patientArr[i].schedules[j].dialysis_order != null) {
        //       // 删除元素后改变i的值
              
        //       console.log("候诊区",patientArr[i].schedules[j])
        //       patientArr[i].schedules.splice(j--, 1);
        //     }
        //   }
        // }
        let arr1 = []
        if(this.patientStateVal == 0){
          arr1 = patientArr
        }else if(this.patientStateVal == 1){
          let arr = []
          arr = patientArr
          for (let i = 0; i <arr.length; i++) {
            for (let j = 0; j < arr[i].schedules.length; j++) {
              if (arr[i].schedules.length > 0 && (arr[i].schedules[j].assessment_before_dislysis == null || (arr[i].schedules[j].assessment_before_dislysis.weight_before == '' && arr[i].schedules[j].assessment_before_dislysis.diastolic_blood_pressure == '' && arr[i].schedules[j].assessment_before_dislysis.systolic_blood_pressure == ''))) {
                // 删除元素后改变i的值
                arr[i].schedules.splice(j--, 1);
              }
            }
          }
          console.log("执行1",arr)
          arr1 = arr
        }else if(this.patientStateVal == 2){
          let arr = []
          arr = patientArr
          for (let i = 0; i < arr.length; i++) {
            for (let j = 0; j < arr[i].schedules.length; j++) {
              if (arr[i].schedules.length > 0 && (arr[i].schedules[j].assessment_before_dislysis != null && (arr[i].schedules[j].assessment_before_dislysis.weight_before != 0 || arr[i].schedules[j].assessment_before_dislysis.diastolic_blood_pressure != 0 || arr[i].schedules[j].assessment_before_dislysis.systolic_blood_pressure != 0))) {
                // 删除元素后改变i的值
                console.log('几次')
                arr[i].schedules.splice(j--, 1);
              }
            }
          }
          console.log("执行2",arr)
          arr1 = arr
        }else if(this.patientStateVal == 3){
          let arr = []
          arr = patientArr
          for (let i = 0; i <arr.length; i++) {
            for (let j = 0; j < arr[i].schedules.length; j++) {
              if (arr[i].schedules.length > 0 && (arr[i].schedules[j].dialysis_order == null || (arr[i].schedules[j].dialysis_order != null && arr[i].schedules[j].dialysis_order.stage != 1))) {
                // 删除元素后改变i的值
                arr[i].schedules.splice(j--, 1);
              }
            }
          }
          console.log("执行1",arr)
          arr1 = arr
        }else if(this.patientStateVal == 4){
          let arr = []
          arr = patientArr
          for (let i = 0; i < arr.length; i++) {
            for (let j = 0; j < arr[i].schedules.length; j++) {
              if (arr[i].schedules.length > 0 && (arr[i].schedules[j].dialysis_order == null || (arr[i].schedules[j].dialysis_order != null && arr[i].schedules[j].dialysis_order.stage != 2))) {
                // 删除元素后改变i的值
                arr[i].schedules.splice(j--, 1);
              }
            }
          }
          console.log("执行2",arr)
          arr1 = arr
        }

        let arr2 = []
        if(this.treatStateVal == 0){
          arr2 = JSON.parse(JSON.stringify(arr1))
        }else if(this.treatStateVal == 1){
          let arr = []
          arr = JSON.parse(JSON.stringify(arr1))
          for (let i = 0; i < arr.length; i++) {
            for (let j = 0; j < arr[i].schedules.length; j++) {
              if (arr[i].schedules.length > 0 && (arr[i].schedules[j].prescription != null || arr[i].schedules[j].prescription != null ? arr[i].schedules[j].prescription.creater != 0 : false)) {
                // 删除元素后改变i的值
                arr[i].schedules.splice(j--, 1);
              }
            }
          }
          arr2 = arr
        }else if(this.treatStateVal == 2){
          let arr = []
          arr = JSON.parse(JSON.stringify(arr1))
          for (let i = 0; i < arr.length; i++) {
            for (let j = 0; j < arr[i].schedules.length; j++) {
              if (arr[i].schedules.length > 0 && arr[i].schedules[j].treatment_summary != null && arr[i].schedules[j].treatment_summary.dialysis_summary != '') {
                // 删除元素后改变i的值
                arr[i].schedules.splice(j--, 1);
              }
            }
          }
          arr2 = arr
        }
        

        let arr3 = []
        if(this.schedule_type_selected == 0){
          arr3 = JSON.parse(JSON.stringify(arr2))
        }else{
          let arr = []
          arr = JSON.parse(JSON.stringify(arr2))
          for (let i = 0; i < arr.length; i++) {
            for (let j = 0; j < arr[i].schedules.length; j++) {
              if (this.schedule_type_selected != arr[i].schedules[j].schedule_type) {
                // 删除元素后改变i的值
                arr[i].schedules.splice(j--, 1);
              }
            }
          }
          arr3 = arr
        }
        

        let arr4 = []
        if(this.zone_selected == 0){
          arr4 = JSON.parse(JSON.stringify(arr3))
        }else{
          let arr = []
          arr = JSON.parse(JSON.stringify(arr3))
          for (let i = 0; i < arr.length; i++) {
            if (this.zone_selected != arr[i].zone_id) {
              // 删除元素后改变i的值
              arr.splice(i--, 1);
            }
          }
          arr4 = arr
        }
        
        
        if(this.patientStateVal == 1){
          arr4.map((item,index) => {
            if(index != 0){
              arr4[0].schedules.push(...arr4[index].schedules)
              arr4[index].schedules = []
            }
          })
          arr4[0].schedules.map(item => {
            item.created_time = item.assessment_before_dislysis.created_time
          })
          arr4[0].schedules.sort(this.compare('created_time'))
          this.allPatient = arr4
          console.log("arr4",arr4)
        }else{
          this.allPatient = arr4
        }
      },
      compare(property){
        return function(a,b){
          var value1 = a[property];
          var value2 = b[property];
          return value1 - value2;
        }
      }
    }
  }
</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>