xt_pad/src/pages/advice/NormalAdviceTable.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="NormalAdvice"
    >
      <div class="blueBorder"></div>
      <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.id + '_' + advice_index + '_' + index"
              @click="clickfunction(schedule)"
            >
              <!--<td>{{ advice.parent_id == 0 && advice.dialysis_order&&advice.dialysis_order.device_number&& advice.dialysis_order.device_number.number.length > 0 ? advice.dialysis_order.device_number.number : schedule.device_number.number }}</td>-->
              <!--<td>{{getNumber(advice)}}</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, advice.parent_id) }}
              </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 }}{{ 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>
              </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 class="NoData" v-show="zones.length <= 1">
        <img
          style="margin-top: 50px; margin-bottom: 50px"
          src="@/assets/login/data.jpg"
          alt
        />
      </div>
    </div>
    <!--<div class="NoData" v-show="zones.length <= 1"><img 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: {
    getNumber: function(advice) {
      if (
        advice.parent_id == 0 &&
        advice.dialysis_order &&
        advice.dialysis_order.device_number &&
        advice.dialysis_order.device_number.number.length > 0
      ) {
        console.log("111111");
      } else {
        console.log("222222");
      }
    },
    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) {
      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) {
      if (time == 0) {
        return "";
      }
      return parseTime(time, layout);
    },
    requestSchedualDoctors() {
      getSchedualDoctors({
        date: this.selected_date_str,
        patient_type: this.patient_selected,
        advice_type: this.advice_type_selected
      }).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: 63px;
  right: 0;
  z-index: 66;
  left: 0;
  background: #fff;
  @media only screen and (max-width: 376px) {
    top: 38px !important;
  }
  @media only screen and (min-width: 376px) and (max-width: 812px) {
    top: 38px !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;
    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;
      }
    }
  }
}
.table {
}
.NormalAdvice {
  padding-top: 115px;
  background: #fff;
  min-height: calc(100vh - 2px);
  @media only screen and (max-width: 812px) {
    padding-top: 70px !important;
  }
  @media only screen and (min-width: 813px) and (max-width: 1024px) {
    padding-top: 115px !important;
  }
}
</style>