xt_vue/src/xt_pages/dialysis/bloodPresssWatch.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
      <template v-if="this.template_id == 1">
        <el-button
          size="small"
          icon="el-icon-printer"
          :disabled="selecting_schs.length == 0"
          @click="batchPrintAction"
          type="primary"
          >打印</el-button
        >
      </template>
      <template v-if="this.template_id == 2 || this.template_id == 0">
        <div>
          <el-button
            :loading="loading"
            size="small"
            icon="el-icon-printer"
            @click="batchPrintAction"
            type="primary"
            >打印全部</el-button
          >
          <el-button
            :loading="loading"
            size="small"
            icon="el-icon-printer"
            @click="batchPrintActionOne"
            type="primary"
            style=""
            >打印纪录单</el-button
          >
          <el-button
            :loading="loading"
            size="small"
            icon="el-icon-printer"
            @click="batchPrintActionTwo"
            type="primary"
            >打印医嘱单</el-button
          >
        </div>
      </template>
      <template v-if="this.template_id == 3">
        <el-button
          size="small"
          icon="el-icon-printer"
          :disabled="selecting_schs.length == 0"
          @click="batchPrintAction"
          type="primary"
          >打印</el-button
        >
      </template>
      <template v-if="this.template_id == 4">
        <el-button
          size="small"
          icon="el-icon-printer"
          :disabled="selecting_schs.length == 0"
          @click="batchPrintAction"
          type="primary"
          >打印</el-button
        >
      </template>
      <template v-if="this.template_id == 5">
        <div>
          <el-button
            :loading="loading"
            size="small"
            icon="el-icon-printer"
            @click="batchPrintAction"
            type="primary"
            >打印全部</el-button
          >
          <el-button
            :loading="loading"
            size="small"
            icon="el-icon-printer"
            @click="batchPrintActionOne"
            type="primary"
            style=""
            >打印纪录单</el-button
          >
          <el-button
            :loading="loading"
            size="small"
            icon="el-icon-printer"
            @click="batchPrintActionTwo"
            type="primary"
            >打印医嘱单</el-button
          >
        </div>
      </template>
      <template v-if="this.template_id == 6">
        <el-button
          size="small"
          icon="el-icon-printer"
          :disabled="selecting_schs.length == 0"
          @click="batchPrintAction"
          type="primary"
          >打印</el-button
        >
      </template>
      <template v-if="this.template_id == 7">
        <el-button
          size="small"
          icon="el-icon-printer"
          :disabled="selecting_schs.length == 0"
          @click="batchPrintAction"
          type="primary"
          >批量打印</el-button
        >
      </template>
      <template v-if="this.template_id == 8">
        <el-button
          size="small"
          icon="el-icon-printer"
          :disabled="selecting_schs.length == 0"
          @click="batchPrintAction"
          type="primary"
          >批量打印</el-button
        >
      </template>
    </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
        :row-style="{ color: '#303133' }"
        :header-cell-style="{
          backgroundColor: 'rgb(245, 247, 250)',
          color: '#606266'
        }"
        :data="SchedualPatientsTableData"
        style="width: 100%"
        v-loading="loading"
        @current-change="clickCurrent"
        @selection-change="handleSelectionChange"
      >
        <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">
          <template slot-scope="scope">
            <span style="color: #579ef8">{{ scope.row.name }}</span>
          </template>
        </el-table-column>

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

        <el-table-column
          prop="dialysis_before_weight"
          label="透前称重(kg)"
          align="center"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="dialysis_after_weight"
          label="透后称重(kg)"
          align="center"
          width="120"
        ></el-table-column>
        <el-table-column label="透中血压(Hgmm)" align="center">
          <el-table-column
            v-for="(item, index) in labelArr"
            :key="index"
            :label="item"
            align="center"
          >
            <!-- 数据的遍历  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"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50]"
        :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";
import { getPrintTemplate } from "@/api/data";

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: "晚上" }
      ],
      template_id: 0,

      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();
    this.getTemplateInfo();
    // this.template_id = this.$store.getters.xt_user.template_info.template_id;
  },
  methods: {
    getTemplateInfo() {
      getPrintTemplate().then(response => {
        if (response.data.state == 0) {
          this.$message.error(response.data.msg);
          return false;
        } else {
          var template = response.data.data.template;
          this.template_id = template.template_id;
        }
      });
    },
    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;
    },

    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() {
      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();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getSchedualPatientList();
    },
    batchPrintAction: function() {
      // 模板ID为6
      var sch_ids = [];

      for (let index = 0; index < this.selecting_schs.length; index++) {
        sch_ids.push(this.selecting_schs[index].sch_id);
      }
      this.$store.dispatch("SetBatchPrintDialysisRecordIDs", sch_ids);
      if (this.template_id == 2 || this.template_id == 0) {
        this.$router.push({ path: "/dialysis/print/batch/other" });
      } else if (this.template_id == 1) {
        this.$router.push({ path: "/dialysis/print/batch" });
      } else if (this.template_id == 3) {
        this.$router.push({ path: "/dialysis/print/batch/three" });
      } else if (this.template_id == 4) {
        this.$router.push({ path: "/dialysis/print/batch/four" });
      } else if (this.template_id == 5) {
        this.$router.push({ path: "/dialysis/print/batch/five" });
      } else if (this.template_id == 6) {
        this.$router.push({ path: "/dialysis/print/batch/six" });
      } else if (this.template_id == 7) {
        this.$router.push({ path: "/dialysis/print/batch/seven" });
      } else if (this.template_id == 8) {
        this.$router.push({ path: "/dialysis/print/batch/eight" });
      }
    },
    batchPrintActionOne: 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);
      this.$store.dispatch("SetBatchPrintDialysisRecordIDs", sch_ids);
      if (this.template_id == 2 || this.template_id == 0) {
        this.$router.push({ path: "/dialysis/print/batch/otherone" });
      } else if (this.template_id == 1) {
        this.$router.push({ path: "/dialysis/print/batch" });
      } else if (this.template_id == 5) {
        this.$router.push({ path: "/dialysis/print/batch/fiveone" });
      }
    },
    batchPrintActionTwo: function() {
      var sch_ids = [];
      for (let index = 0; index < this.selecting_schs.length; index++) {
        sch_ids.push(this.selecting_schs[index].sch_id);
      }
      this.$store.dispatch("SetBatchPrintDialysisRecordIDs", sch_ids);
      if (this.template_id == 2 || this.template_id == 0) {
        this.$router.push({ path: "/dialysis/print/batch/othertwo" });
      } else if (this.template_id == 1) {
        this.$router.push({ path: "/dialysis/print/batch" });
      } else if (this.template_id == 5) {
        this.$router.push({ path: "/dialysis/print/batch/fivetwo" });
      }
    }
  },
  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;
    }
  }
}
.el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: #d0d3da;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #d0d3da;
}
.el-checkbox__inner::after {
  height: 10px;
  left: 7px;
}
.el-checkbox__inner {
  width: 20px;
  height: 20px;
}
</style>