Pad_New/src/pages/advice/DialysisAdviceTable.vue

<template>
  <div class="mainBox">
    <van-sticky>
      <div class="floatLeft">
        <i class="iconfont icon-zuojiantou jiantou" @click="$router.go(-1)"></i>
        <span class="titleName">透析医嘱</span>
      </div>
    </van-sticky>
    <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 dialysisTable">
        <tr>
          <th width="40px">姓名</th>
          <th width="40px">透析号</th>
          <!-- <th width="50px">类型</th> -->
          <th width="50px">开始时间</th>
          <th width="60px">医嘱内容</th>
          <th width="50px">执行时间</th>
          <th width="80px">执行护士</th>
          <th width="80px">校对护士</th>
          <th width="50px">校对时间</th>
          <th width="60px">开嘱医生</th>
          <th width="50px">开嘱时间</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, "{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, "{h}:{i}") }}</td>
                <td>{{ getName(advice.execution_staff) }}</td>
                <td>{{ getName(advice.checker) }}</td>
                <td>{{ parseTime(advice.check_time, "{h}:{i}") }}</td>
                <td>{{ getName(advice.advice_doctor) }}</td>
                <td>{{ parseTime(advice.created_time, "{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="date" border style="width: 100%">
        <el-table-column fixed prop="date" label="姓名" width="100" align="center">
            <template slot-scope="scope">
               {{ scope.row.advice_name }}
            </template>
        </el-table-column>
        <el-table-column prop="name" label="透析号" width="100" align="center"></el-table-column>
        <el-table-column prop="province" label="期效" width="100" align="center"></el-table-column>
        <el-table-column prop="city" label="开始时间" width="100" align="center"></el-table-column>
        <el-table-column prop="address" label="医嘱内容" width="200" align="center"></el-table-column>
        <el-table-column prop="zip" label="执行时间" width="100" align="center"></el-table-column>
        <el-table-column prop="zip" label="执行护士" width="150" align="center"></el-table-column>
        <el-table-column prop="zip" label="校对护士" width="200" align="center"></el-table-column>
        <el-table-column prop="zip" label="校对时间" width="200" align="center"></el-table-column>
        <el-table-column prop="zip" label="开嘱医生" width="200" align="center"></el-table-column>
        <el-table-column prop="zip" label="开嘱时间" width="200" align="center"></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: {}
    };
  },
  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;
        }
      }

      return scheduleMap;
    }
  },
  created() {
    this.requestSchedualDoctors();
  },
  methods: {
    // getNumber: function (advice,schedule) {
    //   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) {
      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: 2
      }).then(rs => {
        var resp = rs.data;
        if (resp.state == 1) {
          this.admin_user = resp.data.adminUser;
          var schedules = resp.data.scheduals;

          for (let i = 0; i < schedules.length; i++) {
            schedules[i].dialysis_no = parseInt(
              schedules[i].patient.dialysis_no
            );
          }
          console.log("schedules", schedules);

          var arr = [];
          for (let j = 0; j < schedules.length; j++) {
            arr.push(schedules[j].dialysis_no);
          }
          arr.sort(function(a, b) {
            return a - b;
          });
          console.log("arr", arr);

          var arrTwo = [];
          for (let i = 0; i < arr.length; i++) {
            for (let j = 0; j < schedules.length; j++) {
              if (arr[i] == schedules[j].dialysis_no) {
                arrTwo.push(schedules[j]);
              }
            }
          }

          arrTwo.map((item, index) => {
            // console.log(item);
            // item.doctor_advice.map((items, i) => {
            //   console.log(items);
            // });
            item.doctor_advice.sort(this.compare("start_time"));
          });
          console.log("arrTwo", arrTwo);

          const res = new Map();
          let a = arrTwo.filter(
            a => !res.has(a.dialysis_no) && res.set(a.dialysis_no, 1)
          );

          console.log("a", a);

          schedules = a;
          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) {},
    compare(property) {
      return function(a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
      };
    }
  }
};
</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;
  }
}
.floatLeft {
  padding-left: 0.3rem;
  height: 1rem;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 0.6rem;
  background: #258ffc;
  .titleName {
    font-size: 0.6rem;
  }
  .icons {
    font-size: 0.8rem;
  }
  .jiantou {
    font-size: 0.8rem;
    color: #fff;
    padding-right: 4rem;
  }
}
.choice {
  border-bottom: 1px #e5e5e5 solid;
  position: fixed;
  top: 28px;
  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: 416px) and (max-width: 767px) {
    top: 38px !important;
  }
  @media only screen and (min-width: 768px) {
    top: 48px !important;
  }
  ul {
    @include display-flex;
    @include align-items-center;
    @include text-align;
    @include justify-content-between;
    width: 94%;
    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.3rem 0;
      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: 36px;
  // 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: 60px !important;
  }
  @media only screen and (min-width: 415px) and (max-width: 767px) {
    padding-top: 46px;
  }
  // @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;
}
.dialysisTable {
  @media only screen and (max-width: 450px) {
    width: 800px;
    //
  }
}
</style>
<style lang="scss">
// .el-table {
//   margin-top: 64px;
// }
.el-table td {
  padding: 0;
}
.el-table th {
  padding: 6px 0;
}
</style>