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: 1.58rem;
    background: #fff;
  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;
      }
    }
  }
}
.table {
}
.NormalAdvice{
  padding-top:115px;
  background: #fff;
  min-height: calc(100vh - 2px);
}


</style>