xt_pad/src/pages/main/dialysis/RecordTable.vue

<template>
  <div>
    <van-list width="100%" v-model="loading" :finished="finished" @load="onLoad">
      <div class="choice">
        <ul>
          <li>
            透析时间：
            <div @click="openStartPicker" class>
              {{parseTime(startTime.getTime()/1000, "{y}-{m}-{d}")}}
              <span class="iconfont">&#xe74a;</span>
            </div>
            <span class="line"></span>
            <div @click="openEndPicker" class>
              {{parseTime(endTime.getTime()/1000, "{y}-{m}-{d}")}}
              <span class="iconfont">&#xe74a;</span>
            </div>
          </li>

          <!-- <popover placement="bottom">
            <div slot="content" class="popover-demo-content">
              <ul >
                <li  v-for="item in modeOptions" :key="item.id" @click="itemClick(item.id)"   :class="mode_id == item.id ? 'tick' : ''">{{item.name}}</li>
              </ul>
            </div>
            <li>透析模式:{{modeNameOther(mode_id)}}<span class="iconfont">&#xe74a;</span></li>
          </popover>-->

          <el-popover placement="bottom" trigger="click">
            <li slot="reference">
              透析模式：{{modeNameOther(mode_id)}}
              <span class="iconfont">&#xe74a;</span>
            </li>
            <div class="popover-demo-content">
              <ul>
                <li
                  v-for="item in modeOptions"
                  :key="item.id"
                  @click="itemClick(item.id)"
                  :class="mode_id == item.id ? 'tick' : ''"
                >{{item.name}}</li>
              </ul>
            </div>
          </el-popover>
        </ul>
      </div>
      <div class="blueBorder"></div>
      <!-- <div style="width:100%;overflow:hildden;overflow-x:auto;" class="RecordTable">
        <table class="table" style>
          <tr>
            <th width="124px">透析日期</th>
            <th width="72px">班次</th>
            <th width="80px">分区-机号</th>
            <th width="110px">透析模式</th>
            <th width="92px">透析时长(h)</th>
            <th width="76px">干体重(kg)</th>
            <th width="76px">透前体重(kg)</th>
            <th width="76px">透后体重(kg)</th>
            <th width="92px">透前血压(mmHg)</th>
            <th width="92px">透后血压(mmHg)</th>
            <th width="92px">超滤总量(L)</th>
            <th width="92px">抗凝剂种类 首剂/维持/总量</th>
            <th width="92px">治疗护士</th>
            <th width="92px">治疗医生</th>
          </tr>
          <tr
            v-for="(item,index) in tableDate"
            :key="index"
            :value="item.value"
            @click="jump(item)"
          >
            <td>{{parseTime(item.dialysis_date, "{y}-{m}-{d}")}}</td>
            <td>{{scheduleType(item.schedule_type)}}</td>
            <td>{{item.partition_name}} - {{item.device_number}}</td>
            <td>{{modeName(item.prescription.mode_id)}}</td>
            <td>{{item.prescription.dialysis_duration?item.prescription.dialysis_duration:""}}</td>
            <td>{{item.prescription.dry_weight?item.prescription.dry_weight:""}}</td>
            <td>{{item.predialysis_evaluation.weight_before?item.predialysis_evaluation.weight_before:""}}</td>
            <td>{{item.assessment_after_dislysis.weight_after?item.assessment_after_dislysis.weight_after:""}}</td>
            <td>{{item.predialysis_evaluation.systolic_blood_pressure?item.predialysis_evaluation.systolic_blood_pressure:""}}</td>
            <td>{{item.assessment_after_dislysis.systolic_blood_pressure?item.assessment_after_dislysis.systolic_blood_pressure:""}}</td>
            <td>{{item.predialysis_evaluation.ultrafiltration_amount?item.predialysis_evaluation.ultrafiltration_amount:""}}</td>
            <td>{{setAnticoagulantsConfit(item.prescription)}}</td>
            <td>{{getName(item.treatment_summary.zl_nurse)}}</td>
            <td>{{getName(item.treatment_summary.zl_doctor)}}</td>
          </tr>
        </table>
        <div class="NoData" v-show="tableDate.length == 0">
          <img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/data.jpg" alt />
        </div>

      </div>-->
      <el-table :data="tableDate" border style="width: 100%">
        <el-table-column fixed prop="date" label="透析日期" width="100" align="center">
          <template slot-scope="scope">{{parseTime(scope.row.dialysis_date, "{y}-{m}-{d}")}}</template>
        </el-table-column>
        <el-table-column prop="name" label="班次" width="100" align="center">
          <template slot-scope="scope">{{scheduleType(scope.row.schedule_type)}}</template>
        </el-table-column>
        <el-table-column prop="province" label="分区-机号" width="120" align="center">
          <template slot-scope="scope">{{scope.row.partition_name}} - {{scope.row.device_number}}</template>
        </el-table-column>
        <el-table-column prop="city" label="透析模式" width="120" align="center">
          <template slot-scope="scope">{{modeName(scope.row.prescription.mode_id)}}</template>
        </el-table-column>
        <el-table-column prop="address" label="透析时长(h)" width="100" align="center">
          <template
            slot-scope="scope"
          >{{scope.row.prescription.dialysis_duration?scope.row.prescription.dialysis_duration:""}}</template>
        </el-table-column>
        <el-table-column prop="date" label="干体重(kg)" width="100" align="center">
          <template
            slot-scope="scope"
          >{{scope.row.prescription.dry_weight?scope.row.prescription.dry_weight:""}}</template>
        </el-table-column>
        <el-table-column prop="name" label="透前体重(kg)" width="100" align="center">
          <template
            slot-scope="scope"
          >{{scope.row.predialysis_evaluation.weight_before?scope.row.predialysis_evaluation.weight_before:""}}</template>
        </el-table-column>
        <el-table-column prop="province" label="透后体重(kg)" width="120" align="center">
          <template
            slot-scope="scope"
          >{{scope.row.assessment_after_dislysis.systolic_blood_pressure?scope.row.assessment_after_dislysis.systolic_blood_pressure:""}}</template>
        </el-table-column>
        <el-table-column prop="city" label="透前血压(mmHg)" width="120" align="center">
          <template
            slot-scope="scope"
          >{{scope.row.predialysis_evaluation.systolic_blood_pressure?scope.row.predialysis_evaluation.systolic_blood_pressure:""}}</template>
        </el-table-column>
        <el-table-column prop="address" label="透后血压(mmHg)" width="100" align="center">
          <template
            slot-scope="scope"
          >{{scope.row.assessment_after_dislysis.systolic_blood_pressure?scope.row.assessment_after_dislysis.systolic_blood_pressure:""}}</template>
        </el-table-column>
        <el-table-column prop="date" label="超滤总量(L)" width="100" align="center">
          <template
            slot-scope="scope"
          >{{scope.row.predialysis_evaluation.ultrafiltration_amount?scope.row.predialysis_evaluation.ultrafiltration_amount:""}}</template>
        </el-table-column>
        <el-table-column prop="name" label="抗凝剂种类 首剂/维持/总量" width="100" align="center">
          <template slot-scope="scope">{{setAnticoagulantsConfit(scope.row.prescription)}}</template>
        </el-table-column>
        <el-table-column prop="province" label="治疗护士" width="120" align="center">
          <template slot-scope="scope">{{getName(scope.row.treatment_summary.zl_nurse)}}</template>
        </el-table-column>
        <el-table-column prop="city" label="治疗医生" width="120" align="center">
          <template slot-scope="scope">{{getName(scope.row.treatment_summary.zl_doctor)}}</template>
        </el-table-column>
      </el-table>
    </van-list>

    <mt-datetime-picker
      ref="start_date_picker"
      type="date"
      @confirm="handleStartDateConfirm"
      :endDate="new Date()"
      v-model="startTime"
    ></mt-datetime-picker>

    <mt-datetime-picker
      ref="end_date_picker"
      type="date"
      @confirm="handleEndDateConfirm"
      :endDate="new Date()"
      v-model="endTime"
    ></mt-datetime-picker>
  </div>
</template>

<script>
import { Popover } from "vux";
import { parseTime } from "@/utils";
import { getRecordList } from "@/api/patient";
import { fetchAllDoctorAndNurse, fetchAllAdminUsers } from "@/api/doctor";

export default {
  name: "LongTable",
  created() {
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth();
    var day = date.getDate();
    if (month < 10) {
      month = "0" + month;
    }
    if (day < 10) {
      day = "0" + day;
    }
    var nowDate = year + "-" + month + "-" + day;

    this.startTime = new Date(nowDate);

    this.modeOptions = this.$store.getters.treatment_mode;

    this.modeOptions["0"] = {
      id: 0,
      name: "全部"
    };

    // console.log(this.modeOptions);
    this.anticoagulantsConfit = this.$store.getters.anticoagulants_confit;
    this.queryParams.start_time = this.parseTime(
      this.startTime.getTime() / 1000,
      "{y}-{m}-{d}"
    );
    this.queryParams.end_time = this.parseTime(
      new Date().getTime() / 1000,
      "{y}-{m}-{d}"
    );
    this.queryParams.patient_id = this.$route.query.patient_id;
    this.queryParams.page = this.queryParams.page + 1;
    this.queryParams.limit = 15;
    this.tableDate = [];
    // console.log(this.queryParams);

    getRecordList(this.queryParams).then(response => {
      if (response.data.state == 0) {
        return false;
      } else {
        if (response.data.data.records.length == 0) {
        } else {
          for (let i = 0; i < response.data.data.records.length; i++) {
            this.tableDate.push(response.data.data.records[i]);
          }
        }
      }
    });
    this.fetchAllAdminUsers();
    this.fetchAllDoctorAndNurse();
  },
  data() {
    return {
      mode_id: "",
      loading: false,
      finished: false,
      startTime: new Date(),
      endTime: new Date(),
      modeOptions: {},
      anticoagulantsConfit: [],
      doctorList: [],
      nurseList: [],
      doctorOptions: [],
      adminUserOptions: null,

      queryParams: {
        mode_id: "",
        start_time: "",
        end_time: "",
        page: 0,
        patient_id: 0,
        limit: 15
      },

      tableDate: []
    };
  },
  methods: {
    modeName(mode_id) {
      return typeof this.modeOptions[mode_id] !== "undefined" &&
        typeof this.modeOptions[mode_id].name !== "undefined"
        ? this.modeOptions[mode_id].name
        : "";
    },
    modeNameOther(mode_id) {
      return typeof this.modeOptions[mode_id] !== "undefined" &&
        typeof this.modeOptions[mode_id].name !== "undefined"
        ? this.modeOptions[mode_id].name
        : "全部";
    },

    parseTime(time, layout) {
      return parseTime(time, layout);
    },
    openStartPicker: function() {
      this.$refs.start_date_picker.open();
    },
    openEndPicker: function() {
      this.$refs.end_date_picker.open();
    },
    handleStartDateConfirm: function(val) {
      this.queryParams.start_time = this.parseTime(
        this.startTime / 1000,
        "{y}-{m}-{d}"
      );
      this.queryParams.end_time = this.parseTime(
        this.endTime / 1000,
        "{y}-{m}-{d}"
      );
      this.queryParams.page = 1;
      this.queryParams.limit = 15;

      this.getRecordList(this.queryParams);
    },
    handleEndDateConfirm: function(val) {
      this.queryParams.start_time = this.parseTime(
        this.startTime / 1000,
        "{y}-{m}-{d}"
      );
      this.queryParams.end_time = this.parseTime(
        this.endTime / 1000,
        "{y}-{m}-{d}"
      );
      this.queryParams.page = 1;
      this.queryParams.limit = 15;
      this.getRecordList(this.queryParams);
    },
    getRecordList: function(val) {
      this.tableDate = [];
      getRecordList(val).then(response => {
        if (response.data.state == 0) {
          return false;
        } else {
          if (response.data.data.records.length == 0) {
          } else {
            for (let i = 0; i < response.data.data.records.length; i++) {
              this.tableDate.push(response.data.data.records[i]);
            }
          }
        }
      });
    },
    onLoad() {
      this.queryParams.start_time = this.parseTime(
        this.startTime.getTime() / 1000,
        "{y}-{m}-{d}"
      );
      this.queryParams.end_time = this.parseTime(
        this.endTime.getTime() / 1000,
        "{y}-{m}-{d}"
      );
      this.queryParams.patient_id = this.$route.query.patient_id;
      this.queryParams.page = this.queryParams.page + 1;
      this.queryParams.limit = 15;

      getRecordList(this.queryParams).then(response => {
        if (response.data.state == 0) {
          this.finished = true;
          this.loading = false;
          return false;
        } else {
          if (response.data.data.records.length == 0) {
            this.finished = true;
            this.loading = false;
          } else {
            for (let i = 0; i < response.data.data.records.length; i++) {
              this.tableDate.push(response.data.data.records[i]);
            }
            this.loading = false;
          }
        }
      });
    },
    scheduleType(scheduleType) {
      var typeName = "";
      switch (scheduleType) {
        case 1:
          typeName = "上午";
          break;
        case 2:
          typeName = "下午";
          break;
        case 3:
          typeName = "晚上";
          break;
        default:
          break;
      }
      return typeName;
    },
    setAnticoagulantsConfit: function(prescription) {
      if (
        typeof this.anticoagulantsConfit[prescription.anticoagulant] ===
        "undefined"
      ) {
        return "";
      } else {
        if (this.anticoagulantsConfit[prescription.anticoagulant].shouji != 1) {
          return this.anticoagulantsConfit[prescription.anticoagulant].name;
        } else {
          return (
            this.anticoagulantsConfit[prescription.anticoagulant].name +
            "/" +
            prescription.anticoagulant_shouji +
            "/" +
            prescription.anticoagulant_weichi +
            "/" +
            prescription.anticoagulant_zongliang
          );
        }
      }
    },
    getName: function(id) {
      if (id <= 0) {
        return "";
      }
      var name = "";
      if (
        this.adminUserOptions == null ||
        typeof this.adminUserOptions.length === "undefined"
      ) {
        return name;
      }
      var leng = this.adminUserOptions.length;
      if (leng == 0) {
        return name;
      }
      for (let index = 0; index < leng; index++) {
        if (this.adminUserOptions[index].id == id) {
          name = this.adminUserOptions[index].name;
          break;
        }
      }
      return name;
    },
    fetchAllAdminUsers() {
      fetchAllAdminUsers().then(response => {
        if (response.data.state == 1) {
          this.adminUserOptions = response.data.data.users;
          var alen = this.adminUserOptions.length;
          for (let index = 0; index < alen; index++) {
            if (this.adminUserOptions[index].user_type == 2) {
              this.doctorOptions.push(this.adminUserOptions[index]);
            }
          }
        }
      });
    },
    fetchAllDoctorAndNurse() {
      fetchAllDoctorAndNurse().then(response => {
        if (response.data.state == 1) {
          this.doctorOptions = response.data.data.doctors;
        }
      });
    },
    itemClick: function(val) {
      if (val == "0") {
        this.mode_id = "0";
      } else {
        this.mode_id = val;
      }
      this.queryParams.mode_id = val;
      this.queryParams.start_time = this.parseTime(
        this.startTime / 1000,
        "{y}-{m}-{d}"
      );
      this.queryParams.end_time = this.parseTime(
        this.endTime / 1000,
        "{y}-{m}-{d}"
      );
      this.queryParams.page = 1;
      this.queryParams.limit = 15;
      this.getRecordList(this.queryParams);
    },
    jump: function(val) {
      this.$emit("record", val);

      this.$router.push({
        path: "/details",
        query: {
          patient_id: val.patient_id,
          date: val.dialysis_date
        }
      });
    }
  },
  components: {
    Popover
  }
};
</script>

<style style="stylesheet/scss" lang="scss" scoped>
.choice {
  border-bottom: 1px #e5e5e5 solid;
  ul {
    @include display-flex;
    @include align-items-center;
    @include text-align;
    @include justify-content-between;
    width: 98%;
    margin: 0 auto;
    font-size: 0.4rem;
    color: $pgh-color;
    li {
      @include display-flex;
      @include align-items-center;
      @include text-align;
      padding: 0.3rem 0;
      .iconfont {
        margin: 0 0.1rem;
        @media only screen and (max-width: 812px) {
          font-size: 12px !important;
        }
      }
      .line {
        background: #a8b3ba;
        width: 0.2rem;
        height: 1px;
        margin: 0 0.2rem;
        display: inline-block;
      }
    }
  }
}
.RecordTable {
  padding-top: 0;
  background: #fff;
  min-height: calc(100vh - 180px);
}
.popover-demo-content {
  max-height: 400px;
  overflow-y: scroll;
}
</style>
<style lang="scss">
.el-table td {
  padding: 0;
}
.el-table th {
  padding: 6px 0;
}
</style>