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 != 2">
        <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">
        <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>
    </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="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"
        @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: "晚上" }
      ],
      template_id : 1,

      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.template_id = this.$store.getters.xt_user.template_info.template_id;
  },
  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;
    },

    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) {
              let 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++
              ) {
                let 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)
      }
      this.$store.dispatch("SetBatchPrintDialysisRecordIDs", sch_ids)
      if (this.$store.getters.xt_user.template_info.template_id == 2){
        this.$router.push({ path: "/dialysis/print/batch/other" });
      }else{
        this.$router.push({ path: "/dialysis/print/batch" });
      }
    },
    batchPrintActionOne: 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.$store.getters.xt_user.template_info.template_id == 2){
        this.$router.push({ path: "/dialysis/print/batch/otherone" });
      }else{
        this.$router.push({ path: "/dialysis/print/batch" });
      }
    },
    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.$store.getters.xt_user.template_info.template_id == 2){
        this.$router.push({ path: "/dialysis/print/batch/othertwo" });
      }else{
        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>