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 class="blueBorder"></div>
    <div style="width:100%;overflow:hildden;overflow-x:auto;">
     <table class="table">
      <tr>
        <th width="50px">机号</th>
        <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>
          <td></td>


        </tr>
        <template v-for="(schedule) in schedules">
          <tr v-for="(advice, advice_index) in schedule.doctor_advice" :key="advice_index + '_' + index"  @click="clickfunction(schedule)">
            <td>{{ advice.parent_id == 0 ? schedule.device_number.number : "" }}</td>
            <td>{{ advice.parent_id == 0 ? schedule.patient.name : "" }}</td>
            <td>{{ advice.parent_id == 0 ? schedule.patient.dialysis_no : "" }}</td>
            <td>{{ getAdaviceType(advice.advice_type)}}</td>
            <td>{{ advice.parent_id == 0 ? parseTime(advice.start_time, "{m}-{d} {h}:{i}") : "" }}</td>
            <td>
              <span >{{advice.advice_name }}</span>
              <span >{{advice.advice_desc}}</span>
              <span>{{advice.prescribing_number}}{{advice.prescribing_number_unit}}</span>
              <span> 单次用量 {{advice.single_dose}}{{advice.single_dose_unit}}</span>
              <span >{{advice.delivery_way}}</span>
              <span >{{advice.execution_frequency}}</span>
            </td>
            <td>{{ advice.parent_id == 0 ? parseTime(advice.execution_time, "{m}-{d} {h}:{i}") : "" }}</td>
            <td>{{ advice.parent_id == 0 ? getName(advice.execution_staff) : "" }}</td>
            <td>{{ advice.parent_id == 0 ? getName(advice.checker) : "" }}</td>
            <td>{{ advice.parent_id == 0 ? parseTime(advice.check_time, "{m}-{d} {h}:{i}") : "" }}</td>
            <td>{{ advice.parent_id == 0 ? getName(advice.advice_doctor) : "" }}</td>
            <td>{{ advice.parent_id == 0 ? parseTime(advice.created_time, "{m}-{d} {h}:{i}") : "" }}</td>


          </tr>
        </template>
      </template>
    </table>
    </div>
    <!--<div class="NoData" v-show="zones.length <= 1"><img src="@/assets/login/data.jpg" alt=""></div>-->
    <div class="NoData" v-show="zones.length  <= 1"><img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/data.jpg" alt=""></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: {}
    };
  },
  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;
      }
      return scheduleMap;
    }
  },
  created() {
    this.requestSchedualDoctors();
  },
  methods: {
    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) {
      if (type == 1) {
        return "长嘱";
      } else if (type == 2) {
        return "临嘱";
      } else if (type == 3) {
        return "临嘱";
      }
    },
    getName(val) {

      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_zone.name] == null) {
              scheduleMap[schedule.device_zone.name] = [];
            }
            scheduleMap[schedule.device_zone.name].push(schedule);
            if (zoneMap[schedule.device_zone.name] == null) {
              zoneMap[schedule.device_zone.name] = schedule.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 = 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;
  ul {
    @include display-flex;
    @include align-items-center;
    @include text-align;
    @include justify-content-between;
    width: 70%;
    margin: 0 auto;
    font-size: 0.32rem;
    color: $pgh-color;
    li {
      @include display-flex;
      @include align-items-center;
      @include text-align;
      @include justify-content-between;
      padding: 0.3rem 0;
      font-size: 0.32rem;
      .iconfont {
        margin: 0 0.1rem;
      }
      .line {
        background: #a8b3ba;
        width: 0.2rem;
        height: 1px;
        margin: 0 0.2rem;
        display: inline-block;
      }
    }
  }
}

</style>