xt_pad/src/pages/advice/DialysisAdviceTable.vue

<template>
  <div class="mainBox">
    <div class="choice">
      <ul>
        <el-popover placement="bottom" trigger="click" v-model="show_patient_type_selector">
          <li slot="reference">
            {{ patient_types[patient_selected].text }}
            <span class="iconfont">&#xe74a;</span>
          </li>
          <div class="popover-demo-content">
            <ul>
              <li
                v-for="type in patient_types"
                :key="type.value"
                @click="handlePaitentType(type.value)"
                :class="advice_type_selected == type.value ? 'tick' : ''"
              >{{ type.text }}</li>
            </ul>
          </div>
        </el-popover>

        <el-popover placement="bottom" trigger="click" v-model="show_zone_selector">
          <li slot="reference">
            {{ zones[zone_selected].text }}
            <span class="iconfont">&#xe74a;</span>
          </li>
          <div class="popover-demo-content">
            <ul>
              <li
                v-for="(zone, index) in zones"
                :key="zone.value"
                @click="handleZoneChange(index)"
                :class="zone_selected == index ? 'tick' : ''"
              >{{ zone.text }}</li>
            </ul>
          </div>
        </el-popover>
        <el-popover placement="bottom" trigger="click" v-model="show_sch_type_selector">
          <li slot="reference">
            {{ schedule_types[schedule_type_selected].text }}
            <span class="iconfont">&#xe74a;</span>
          </li>
          <div class="popover-demo-content">
            <ul>
              <li
                v-for="scheduleType in schedule_types"
                :key="scheduleType.value"
                @click="handletimeType(scheduleType.value)"
                :class="
                  schedule_type_selected == scheduleType.value ? 'tick' : ''
                "
              >{{ scheduleType.text }}</li>
            </ul>
          </div>
        </el-popover>
        <!--<el-popover placement="bottom" trigger="click" v-model="show_advice_type_selector">-->
        <!--<li slot="reference">{{advice_types[advice_type_selected].text}}<span class="iconfont">&#xe74a;</span></li>-->
        <!--<div class="popover-demo-content">-->
        <!--<ul>-->
        <!--<li v-for="type in advice_types" :key="type.value" @click="handleAdviceType(type.value)" :class="advice_type_selected == type.value ? 'tick' : ''" >{{type.text}}</li>-->
        <!--</ul>-->
        <!--</div>-->
        <!--</el-popover>-->

        <li @click="openPicker()">
          {{ selected_date_str }}
          <span class="iconfont">&#xe74a;</span>
        </li>
      </ul>
    </div>

    <div style="width:100%;overflow:hildden;overflow-x:auto;" class="DialysisAdvice">
      <div class="blueBorder"></div>
      <!-- <table class="table">
      <tr>
        <th width="50px">姓名</th>
        <th width="50px">透析号</th>
        <th width="50px">期效</th>
        <th width="100px">开始时间</th>
        <th width="200px">医嘱内容</th>
        <th width="50px">执行时间</th>
        <th width="50px">执行护士</th>
        <th width="50px">校对护士</th>
        <th width="100px">校对时间</th>
        <th width="50px">开嘱医生</th>
        <th width="100px">开嘱时间</th>
      </tr>
      <template v-for="(schedules, zone_name, index) in filtedScheduals">
        <tr :key="index">
          <td>{{ zone_name }}</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <template v-for="schedule in schedules">
          <template v-for="(group, group_index) in schedule.new_advice">
            <tr v-for="(advice, advice_index) in group.advices" @click="clickfunction(schedule)">

              <td
                v-if="advice_index == 0"
                :rowspan="group.advices.length"
                style="color:#409eff;"
              >{{ advice.parent_id == 0 ? schedule.patient.name : "" }}</td>
              <td v-if="advice_index == 0" :rowspan="group.advices.length">
                {{
                advice.parent_id == 0 ? schedule.patient.dialysis_no : ""
                }}
              </td>
              <td
                v-if="advice_index == 0"
                :rowspan="group.advices.length"
              >{{ getAdaviceType(advice.advice_type, advice.parent_id) }}</td>
              <td v-if="advice_index == 0" :rowspan="group.advices.length">
                {{
                advice.parent_id == 0
                ? parseTime(advice.start_time, "{m}-{d} {h}:{i}")
                : ""
                }}
              </td>
              <td
                :class="
                    advice.parent_id == 0
                      ? 'advice_content'
                      : 'subadvice_content'
                  "
              >
                <span>{{ advice.advice_name }}</span>
                <span>{{ advice.advice_desc }}{{ advice.drug_spec_unit }}</span>
                <span v-if="advice.prescribing_number">
                  {{ advice.prescribing_number
                  }}{{ advice.prescribing_number_unit }}
                </span>
                <span v-if="advice.single_dose">
                  单次用量 {{ advice.single_dose
                  }}{{ advice.single_dose_unit }}
                </span>
                <span>{{ advice.delivery_way }}</span>
                <span>{{ advice.execution_frequency }}</span>
                <span v-if="advice.parent_id == 0 && advice.remark.length > 0">({{ advice.remark }})</span>
              </td>
              <td>{{ parseTime(advice.execution_time, "{m}-{d} {h}:{i}") }}</td>
              <td>{{ getName(advice.execution_staff) }}</td>
              <td>{{ getName(advice.checker) }}</td>
              <td>{{ parseTime(advice.check_time, "{m}-{d} {h}:{i}") }}</td>
              <td>{{ getName(advice.advice_doctor) }}</td>
              <td>{{ parseTime(advice.created_time, "{m}-{d} {h}:{i}") }}</td>
            </tr>
          </template>
        </template>
      </template>
      </table>

      <div class="NoData" v-show="zones.length <= 1">
        <img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/data.jpg" alt />
      </div>-->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="date" label="姓名" width="100"></el-table-column>
        <el-table-column prop="name" label="透析号" width="100"></el-table-column>
        <el-table-column prop="province" label="期效" width="100"></el-table-column>
        <el-table-column prop="city" label="开始时间" width="100"></el-table-column>
        <el-table-column prop="address" label="医嘱内容" width="200"></el-table-column>
        <el-table-column prop="zip" label="执行时间" width="100"></el-table-column>
        <el-table-column prop="zip" label="执行护士" width="150"></el-table-column>
        <el-table-column prop="zip" label="校对护士" width="200"></el-table-column>
        <el-table-column prop="zip" label="校对时间" width="200"></el-table-column>
        <el-table-column prop="zip" label="开嘱医生" width="200"></el-table-column>
        <el-table-column prop="zip" label="开嘱时间" width="200"></el-table-column>
      </el-table>
    </div>

    <mt-datetime-picker
      v-model="selected_date"
      type="date"
      ref="picker"
      year-format="{value} "
      month-format="{value} "
      date-format="{value} "
      @confirm="requestSchedualDoctors"
    ></mt-datetime-picker>
  </div>
</template>

<script>
import SideBar from '@/pages/layout/SideBar';
import { parseTime } from '@/utils';
import { getSchedualDoctors } from '@/api/advice';

export default {
  name: 'DialysisAdviceTable',
  components: {
    SideBar
  },
  data () {
    return {
      selected_date: new Date(),
      admin_user: [],

      show_sch_type_selector: false,
      schedule_type_selected: 0,
      schedule_types: [
        { value: 0, text: '全部班次' },
        { value: 1, text: '上午' },
        { value: 2, text: '下午' },
        { value: 3, text: '晚上' }
      ],

      show_zone_selector: false,
      zone_selected: 0,
      show_patient_type_selector: false,
      zones: [{ value: 0, text: '全部分区', select: true }],

      show_advice_type_selector: false,
      advice_type_selected: 0,
      advice_types: [
        { value: 0, text: '全部医嘱' },
        { value: 1, text: '长期医嘱' },
        { value: 3, text: '临时医嘱' }
      ],

      patient_types: [
        { value: 0, text: '全部病人' },
        { value: 1, text: '我的病人' },
        { value: 2, text: '未执行病人' }
      ],
      patient_selected: 0,

      scheduleMap: {},
      tableData: []
    }
  },
  computed: {
    selected_date_str: function () {
      return parseTime(this.selected_date, '{y}-{m}-{d}')
    },
    filtedScheduals: function () {
      var scheduleMap = new Object()
      if (this.zone_selected == 0) {
        for (const key in this.scheduleMap) {
          scheduleMap[key] = this.scheduleMap[key]
        }
      } else {
        var zone_name = this.zones[this.zone_selected].text
        scheduleMap[zone_name] = this.scheduleMap[zone_name]
      }

      if (this.schedule_type_selected != 0) {
        var _scheduleMap = {}
        for (const key in scheduleMap) {
          var origin_schedules = scheduleMap[key]
          var schedules = []
          for (let index = 0; index < origin_schedules.length; index++) {
            const schedule = origin_schedules[index]
            if (schedule.schedule_type == this.schedule_type_selected) {
              schedules.push(schedule)
            }
          }
          if (schedules.length > 0) {
            _scheduleMap[key] = schedules
          }
        }

        scheduleMap = _scheduleMap
      }
      for (var key in scheduleMap) {
        let mapArr = scheduleMap[key]
        for (let i = 0; i < mapArr.length; i++) {
          mapArr[i]['new_advice'] = []
        }
      }

      for (var key in scheduleMap) {
        let mapArr = scheduleMap[key]
        for (let i = 0; i < mapArr.length; i++) {
          var maps = mapArr[i]
          var resp_advices = maps.doctor_advice
          if (resp_advices.length > 0) {
            var newGroupObject = function () {
              return Object.assign(
                {},
                {
                  group_no: 0,
                  advices: []
                }
              )
            };
            var initGroupBlock = function (group, advice) {
              group.group_no = advice.groupno
            };

            var advice_groups = []
            var group = newGroupObject()
            for (let index = 0; index < resp_advices.length; index++) {
              const advice = resp_advices[index]
              if (advice.groupno == 0) {
                // 老版本的医嘱
                if (advice.parent_id > 0) {
                  if (advice_groups.length > 0) {
                    var parent_group = advice_groups[advice_groups.length - 1]
                    if (parent_group.advices.length > 0) {
                      if (parent_group.advices[0].id == advice.parent_id) {
                        parent_group.advices.push(advice)
                      }
                    }
                  }
                  continue
                } else {
                  if (group.group_no > 0) {
                    advice_groups.push(group)
                    group = newGroupObject()
                  }

                  initGroupBlock(group, advice)
                  group.advices.push(advice)
                  advice_groups.push(group)
                  group = newGroupObject()
                  continue;
                }
              } else {
                if (group.group_no > 0 && group.group_no != advice.groupno) {
                  advice_groups.push(group)
                  group = newGroupObject()
                }
                if (group.group_no == 0) {
                  initGroupBlock(group, advice)
                }
                if (group.group_no == advice.groupno) {
                  group.advices.push(advice)
                }
              }
            }
            if (group.group_no > 0) {
              // 上述的算法会导致最后一组没有加到advice_groups，这里要手动加上
              advice_groups.push(group)
            }
            advice_groups = advice_groups
          } else {
            advice_groups = []
          }
          maps.new_advice = advice_groups
        }
      }

      console.log(scheduleMap)

      return scheduleMap
    }
  },
  created () {
    this.requestSchedualDoctors()
  },
  methods: {
    // getNumber: function (advice,schedule) {
    //   console.log(advice)
    //   if (advice.parent_id == 0 ) {
    //     if(advice.dialysis_order && advice.dialysis_order.device_number && advice.dialysis_order.device_number.number.length > 0){
    //       return advice.dialysis_order.device_number.number
    //     }else{
    //       return schedule.device_number.number
    //     }
    //   }
    //
    // },
    clickfunction: function (val) {
      // console.log(val);
      this.$router.push({
        path: '/details',
        query: {
          patient_id: val.patient.id,
          date: this.selected_date.getTime() / 1000,
          patient_name: val.patient.name
        }
      })
    },
    handlePaitentType: function (index) {
      this.patient_selected = index
      this.show_patient_type_selector = false
      this.requestSchedualDoctors()
    },
    openPicker () {
      this.$refs.picker.open()
    },
    getAdaviceType (type, parent_id) {
      if (parent_id == 0) {
        if (type == 1) {
          return '长嘱';
        } else if (type == 2) {
          return '临嘱';
        } else if (type == 3) {
          return '临嘱';
        }
      }
    },
    getName (val) {
      console.log(this.admin_user)

      for (let i = 0; i < this.admin_user.length; i++) {
        if (this.admin_user[i].id == val) {
          return this.admin_user[i].name
        }
      }
    },
    handletimeType: function (index) {
      this.schedule_type_selected = index
      this.show_sch_type_selector = false
    },
    handleAdviceType: function (index) {
      this.advice_type_selected = index
      this.show_advice_type_selector = false
      this.requestSchedualDoctors()
    },
    handleZoneChange: function (index) {
      this.zone_selected = index
      this.show_zone_selector = false
    },
    parseTime: function (time, layout) {
      // console.log(time);
      if (time == 0) {
        return '';
      }
      return parseTime(time, layout)
    },
    requestSchedualDoctors () {
      getSchedualDoctors({
        date: this.selected_date_str,
        patient_type: this.patient_selected,
        advice_type: 2
      }).then(rs => {
        var resp = rs.data
        if (resp.state == 1) {
          this.admin_user = resp.data.adminUser
          var schedules = resp.data.scheduals
          var zoneMap = {}
          var scheduleMap = {}
          for (let index = 0; index < schedules.length; index++) {
            const schedule = schedules[index]
            if (schedule.doctor_advice.length == 0) {
              continue
            }
            if (scheduleMap[schedule.device_number.zone.name] == null) {
              scheduleMap[schedule.device_number.zone.name] = []
            }
            scheduleMap[schedule.device_number.zone.name].push(schedule)
            if (zoneMap[schedule.device_number.zone.name] == null) {
              zoneMap[schedule.device_number.zone.name] =
                schedule.device_number.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 = zones

          this.scheduleMap = scheduleMap
        } else {
          this.$toast({
            message: resp.msg
          })
        }
      })
    },
    adviceDesc (advice) {}
  }
}
</script>

<style style="stylesheet/scss" lang="scss" scoped>
.top {
  .hospital {
    width: 2rem;
  }
  .TopTitle {
    font-size: 0.36rem;
    color: $title-color;
    font-weight: normal;
  }
  padding: 0.3rem 0.3rem;
  @include display-flex;
  @include align-items-center;
  @include text-align;
  @include justify-content-between;
  border-bottom: 1px #e5e5e5 solid;
  .title {
    font-size: 0.3rem;
    font-weight: bold;
    color: $pgh-color;
  }
  .iconfont {
    font-size: 0.4rem;
    color: #a8b3ba;
  }
}
.search {
  background: #ebf1f7;
  border-radius: 30px;
  padding: 0 0.3rem;
  height: 0.6rem;
  line-height: 0.6rem;
  color: #a8b3ba;

  .iconfont {
    color: #a8b3ba;
    font-size: 0.28rem;
  }
  .searchInput {
    font-size: 0.28rem;
    border: none;
    outline: none;
    background: #ebf1f7;
  }
}
.choice {
  border-bottom: 1px #e5e5e5 solid;
  position: fixed;
  top: 48px;
  right: 0;
  z-index: 66;
  left: 0;
  background: #258ffc;
  // @media only screen and (max-width: 415px) {
  //   top: 38px !important;
  // }
  // @media only screen and (min-width: 376px) and (max-width: 812px) {
  //   top: 38px !important;
  // }
  @media only screen and (min-width: 768px) {
    top: 80px !important;
  }
  ul {
    @include display-flex;
    @include align-items-center;
    @include text-align;
    @include justify-content-between;
    width: 90%;
    margin: 0 auto;
    font-size: 0.32rem;
    // color: $pgh-color;
    color: #fff;
    li {
      @include display-flex;
      @include align-items-center;
      @include text-align;
      @include justify-content-between;
      padding: 0 0 0.3rem;
      font-size: 0.45rem;
      .iconfont {
        margin: 0 0.1rem;
        color: #fff;
      }
      .line {
        background: #a8b3ba;
        width: 0.2rem;
        height: 1px;
        margin: 0 0.2rem;
        display: inline-block;
      }
    }
  }
}
.DialysisAdvice {
  padding-top: 85px;
  // background: #fff;
  min-height: calc(100vh - 2px);
  // @media only screen and (max-width: 812px) {
  //   padding-top: 70px !important;
  // }
  @media only screen and (min-width: 768px) {
    padding-top: 130px !important;
  }
  // @media only screen and (min-width: 813px) and (max-width: 1024px) {
  //   padding-top: 118px !important;
  // }
}

.advice_content {
  text-align: left;
  padding-left: 5px;
  padding-right: 5px;
  // background: #eff6fc;
}
.subadvice_content {
  text-align: left;
  padding-left: 25px;
  padding-right: 5px;
  // background: #fafcfe;
}
</style>
<style lang="scss">
// .el-table {
//   margin-top: 64px;
// }
.el-table td {
  padding: 0;
}
.el-table th {
  padding: 6px 0;
}
</style>