Vue_New/src/xt_pages/dialysis/bloodPresssWatch.1.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
      <el-button
        size="small"
        icon="el-icon-printer"
        :disabled="selecting_schs.length == 0"
        @click="batchPrintAction"
        type="primary"
        >打印</el-button
      >
    </div>
    <div class="app-container">
      <!-- <div class="filter-container">
        <el-input style="width: 400px;" v-model="searchKey" class="filter-item"/>
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </div>-->
      <div class="cell clearfix">
        <label class="title">
          <span class="name">{{
            search_mode == 1 ? "日期查询" : "病人查询"
          }}</span>
          :
        </label>
        <el-date-picker
          v-show="search_mode == 1"
          v-model="time"
          prefix-icon="el-icon-date"
          @change="changeTime"
          :editable="false"
          style="width: 250px;"
          type="date"
          placeholder="选择日期时间"
          align="right"
          :picker-options="pickerOptions1"
          format="yyyy-MM-dd"
          value-format="timestamp"
        ></el-date-picker>
        <el-input
          v-show="search_mode == 2"
          v-model="patient_search_keyword"
          style="width: 250px;"
          placeholder="病人名字、透析号"
        >
          <el-button
            slot="append"
            style="background-color: #409EFF; color: white; border-radius: 0;"
            icon="el-icon-search"
            @click="searchPatientAction"
          ></el-button>
        </el-input>
        <el-button type="primary" @click="changeSearchMode">{{
          search_mode == 1 ? "改为病人查询" : "改为日期查询"
        }}</el-button>
        <!-- <el-button type="primary" :disabled="selecting_schs.length == 0" @click="batchPrintAction">打印</el-button> -->
      </div>
      <div class="cell clearfix">
        <label class="title"> <span class="name">排班班次</span> : </label>
        <div class="time">
          <ul class>
            <li
              :class="item.value == schedulType ? 'active' : ''"
              @click="selectSchedulType(item.value)"
              v-for="item in schedulArr"
              :key="item.value"
            >
              {{ item.label }}
            </li>
          </ul>
        </div>
      </div>
      <div class="cell clearfix">
        <label class="title"> <span class="name">分区</span> : </label>
        <div class="time">
          <ul class>
            <li
              :class="item.id == partitionType ? 'active' : ''"
              @click="selectPartitionType(item.id)"
              v-for="item in partitionArr"
              :key="item.id"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>

      <el-table
        :data="SchedualPatientsTableData"
        style="width: 100%"
        v-loading="loading"
        @current-change="handleSelectionChange"
        :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)' }"
      >
        <el-table-column
          type="selection"
          width="45"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="number"
          label="机号"
          align="center"
        ></el-table-column>
        <el-table-column
          label="排班日期"
          prop="sch_time"
          align="center"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="dialysis_no"
          label="透析号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="mode_name"
          label="透析模式"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="dialysis_before_weight"
          label="透前称重 (kg)"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="dialysis_after_weight"
          label="透后称重 (kg)"
          align="center"
        ></el-table-column>
        <el-table-column label="透中血压">
          <el-table-column
            v-for="(item, index) in labelArr"
            :key="index"
            :label="item"
          >
            <!-- 数据的遍历  scope.row就代表数据的每一个对象-->
            <template slot-scope="scope">
              <!--<span>{{scope.row.bp[index].value}}</span>-->
              <span>{{ getValue(scope.row.bp[index]) }}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>

      <el-pagination
        align="right"
        @current-change="handleCurrentChange"
        :page-sizes="[10]"
        :page-size="10"
        background
        style="margin-top:20px;"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { getSchedualPatient, GetAllZone } from "@/api/dialysis";
import { parseTime } from "@/utils";
import BreadCrumb from "@/xt_pages/components/bread-crumb";

export default {
  name: "Patient",
  data() {
    return {
      crumbs: [
        { path: false, name: "透析管理" },
        { path: false, name: "透析监测" }
      ],
      loading: false,
      time: "",

      search_mode: 1, // 搜索模式 1.日期搜索 2.病人搜索
      patient_search_keyword: "",

      SchedualPatientsTableData: [],
      active: true,
      schedulType: 0,
      schedulArr: [
        { value: 0, label: "全部" },
        { value: 1, label: "上午" },
        { value: 2, label: "下午" },
        { value: 3, label: "晚上" }
      ],

      partitionType: 0,

      labelArr: ["第1次", "第2次", "第3次", "第4次", "第5次", "第6次", "第7次"],

      pickerOptions1: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          },
          {
            text: "清空",
            onClick(picker) {
              picker.$emit("pick");
            }
          }
        ]
      },

      total: 0,
      listQuery: {
        page: 1,
        limit: 10,
        schedul_type: 0,
        partition_type: 0,
        schedul_time: "",
        keywords: ""
      },
      selecting_schs: [],
      partitionArr: []
    };
  },
  created() {
    var date = new Date();
    this.time = date;
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    if (month < 10) {
      month = "0" + month;
    }
    if (day < 10) {
      day = "0" + day;
    }
    var nowDate = year + "-" + month + "-" + day;
    var date = new Date(nowDate + " 00:00:00");
    this.listQuery.schedul_time = date.getTime();
    this.getAllZone();
    this.getSchedualPatientList();
  },
  methods: {
    clickCurrent(val) {
      console.log(val);
      this.$router.push({
        path: "/dialysis/details",
        query: { patient_id: val.patient_id, date: val.sch_time_int }
      });
    },
    handleSelectionChange(val) {
      this.selecting_schs = val;
      console.log(this.selecting_schs, this.selecting_schs.length);
    },

    selectSchedulType(scheduleType) {
      // alert(scheduleType);/
      this.schedulType = scheduleType;
      this.listQuery.schedul_type = scheduleType;
      this.getSchedualPatientList();
    },
    selectPartitionType(partitionType) {
      this.partitionType = partitionType;
      this.listQuery.partition_type = partitionType;
      this.getSchedualPatientList();
    },

    changeTime() {
      console.log(this.time);
      this.listQuery.schedul_time = this.time;
      this.getSchedualPatientList();
    },
    getAllZone: function() {
      GetAllZone().then(response => {
        if (response.data.state == 0) {
          this.$message.error(response.data.msg);
          return false;
        } else {
          this.partitionArr = response.data.data.zone;
          this.partitionArr.unshift({ id: 0, name: "全部" });
        }
      });
    },
    getSchedualPatientList: function() {
      this.loading = true;
      if (this.search_mode == 1) {
        this.listQuery.keywords = "";
      } else {
        this.listQuery.schedul_time = "";
      }
      this.SchedualPatientsTableData = [];
      getSchedualPatient(this.listQuery).then(response => {
        if (response.data.state == 0) {
          this.loading = false;
          this.$message.error(response.data.msg);
          return false;
        } else {
          this.loading = false;
          this.total = response.data.data.total;
          // console.log(response.data.data)
          for (let i = 0; i < response.data.data.schedule.length; i++) {
            if (response.data.data.schedule[i].patient.id > 0) {
              const SchedualPatientsTable = {
                bp: []
              };

              SchedualPatientsTable["sch_id"] =
                response.data.data.schedule[i].id;
              SchedualPatientsTable["sch_time_int"] =
                response.data.data.schedule[i].schedule_date;
              SchedualPatientsTable["sch_time"] = parseTime(
                response.data.data.schedule[i].schedule_date,
                "{y}-{m}-{d}"
              );
              SchedualPatientsTable["dialysis_no"] =
                response.data.data.schedule[i].patient.dialysis_no;
              SchedualPatientsTable["name"] =
                response.data.data.schedule[i].patient.name;
              SchedualPatientsTable["number"] =
                response.data.data.schedule[i].device_number.number;
              SchedualPatientsTable["gender"] =
                response.data.data.schedule[i].patient.gender;
              SchedualPatientsTable["source"] =
                response.data.data.schedule[i].patient.source;
              SchedualPatientsTable["patient_id"] =
                response.data.data.schedule[i].patient_id;
              SchedualPatientsTable["mode_name"] =
                response.data.data.schedule[i].treatment_mode.name;
              if (
                response.data.data.schedule[i].assessment_before_dislysis.id > 0
              ) {
                SchedualPatientsTable["dialysis_before_weight"] =
                  response.data.data.schedule[
                    i
                  ].assessment_before_dislysis.weight_before;
              }
              if (
                response.data.data.schedule[i].assessment_after_dislysis.id > 0
              ) {
                SchedualPatientsTable["dialysis_after_weight"] =
                  response.data.data.schedule[
                    i
                  ].assessment_after_dislysis.weight_after;
              }

              SchedualPatientsTable.bp = [];
              for (
                let a = 0;
                a < response.data.data.schedule[i].monitoring_record.length;
                a++
              ) {
                const bp = {};
                bp["value"] =
                  response.data.data.schedule[i].monitoring_record[
                    a
                  ].systolic_blood_pressure.toString() +
                  "/" +
                  response.data.data.schedule[i].monitoring_record[
                    a
                  ].diastolic_blood_pressure.toString();

                SchedualPatientsTable.bp.unshift(bp);
              }

              this.SchedualPatientsTableData.push(SchedualPatientsTable);
            }
          }
        }
      });
    },
    getValue: function(val) {
      if (val != undefined) {
        return val.value;
      } else {
        return "";
      }
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getSchedualPatientList();
    },
    changeSearchMode: function() {
      if (this.search_mode == 1) {
        this.search_mode = 2;
      } else {
        this.search_mode = 1;
      }
    },
    searchPatientAction: function() {
      this.listQuery.keywords = this.patient_search_keyword;
      console.log(this.patient_search_keyword);
      if (this.patient_search_keyword.length == 0) {
        return;
      }
      this.getSchedualPatientList();
    },
    batchPrintAction: function() {
      var sch_ids = [];
      for (let index = 0; index < this.selecting_schs.length; index++) {
        sch_ids.push(this.selecting_schs[index].sch_id);
      }
      console.log("sch_ids", sch_ids);
      this.$store.dispatch("SetBatchPrintDialysisRecordIDs", sch_ids);
      this.$router.push({ path: "/dialysis/print/batch" });
    }
  },
  components: {
    BreadCrumb
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-container {
  //   margin: 20px;
  font-size: 15px;
  .filter-container {
    padding-bottom: 5px;
  }
  .cqd-dataTitle {
    color: #303133;
    font-size: 14px;
    border-bottom: 2px #e4e7ed solid;
    height: 36px;
    line-height: 36px;
    margin: 0 0 25px 0;
    position: relative;
  }
  .cqd-dataTitle::before {
    position: absolute;
    left: 0;
    bottom: -2px;
    content: "";
    width: 42px;
    height: 2px;
    background: #409eff;
  }
  .search-component {
    width: 500px;
    .searchBox {
      width: 300px;
      height: 36px;
      line-height: 36px;
      padding-left: 15px;
      border: 1px #dcdfe6 solid;
      border-right: none;
      outline: none;
      float: left;
      border-radius: 6px 0 0 6px;
      font-size: 14px;
      color: #333;
      background: #fff;
      box-shadow: 3px 3px 4px rgba(135, 135, 135, 0.05);
    }
    .searchBtn {
      background-color: #409eff;
      color: #fff;
      font-size: 15px;
      text-align: center;
      height: 36px;
      line-height: 36px;
      float: left;
      outline: none;
      width: 70px;
      border: none;
      border-radius: 0 6px 6px 0;
      font-family: "Microsoft Yahei";
      cursor: pointer;
    }
  }
  .amount {
    font-weight: normal;
    padding: 10px 0 0 0;
    color: #606266;
    font-size: 14px;
    span {
      color: #ef2525;
      font-family: "Arial";
      padding: 0 2px;
    }
  }
}
</style>