elizebeth/src/xt_pages/dialysis/dialysisFlow.vue

<template>
    <div class="main-contain">
      <div class="position">
        <bread-crumb :crumbs="crumbs"></bread-crumb>
      </div>
      <div class="app-container">
    
        <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="病人名字、透析号"
            @keyup.enter.native='searchPatientAction'
          >
            <el-button
              slot="append"
              style="background-color: #409EFF; color: white; border-radius: 0;"
              icon="el-icon-search"
              @click="searchPatientAction"
            ></el-button>
          </el-input>
      
        </div>
        <div class="cell clearfix"  v-show="search_mode == 2">
           <label class="title">
            <span class="name">日期查询</span>:
          </label>
          <el-date-picker
            v-model="listQuery.start_time"
            prefix-icon="el-icon-date"
            @change="changeStartTime"
            style="width: 250px;"
            type="date"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions1"
            format="yyyy-MM-dd"
            value-format="timestamp"
          ></el-date-picker>
          -
          <el-date-picker
            v-model="listQuery.end_time"
            prefix-icon="el-icon-date"
            @change="changeEndTime"
            style="width: 250px;"
            type="date"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions1"
            format="yyyy-MM-dd"
            value-format="timestamp"
          ></el-date-picker>
        </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"
          border
  
          @current-change="clickCurrent"
          @selection-change="handleSelectionChange"
          highlight-current-row
          :cell-class-name="cellStyle"
        >
          <el-table-column
            type="selection"
            width="45"
            align="center"
          ></el-table-column>
       
          <el-table-column  label="排班日期"  align="center" width="120">
            <template slot-scope="scope">
               {{ getTimeTwo(scope.row.schedule_date) }}
             </template>
          </el-table-column>
          <el-table-column  label="姓名" align="center" width="80">
             <template slot-scope="scope">
               {{ scope.row.patient.name }}
             </template>
          </el-table-column>
          <el-table-column
          align="center"
          prop="name"
          v-for="(item,index) in moduleList"
          :key="index"
          :label="item.name"
        >
          <template slot-scope="scope">
            <span>{{getModeFinish(scope.row.dialysis_finish,item.id)}}</span>
          </template>

        </el-table-column>
          <!-- <el-table-column prop="mode_name" label="透析处方" align="center"  width="100">
            <template slot-scope="scope">
                <span v-if="scope.row.dialysis_finish!=null && scope.row.dialysis_finish.module == 1">
                   √
                </span>
                <span v-else>
                  ×
                </span>
             </template>

          </el-table-column>
  
          <el-table-column
            prop="mode_name"
            label="接诊评估"
            align="center"
            width="100"
          >
            <template slot-scope="scope">
                <span v-if="scope.row.dialysis_finish!=null && scope.row.dialysis_finish.module == 2">
                   √
                </span>
                <span v-else>
                  ×
                </span>
             </template>
          </el-table-column>
          <el-table-column
            prop="mode_name"
            label="透前评估"
            align="center"
            width="100"
          >
            <template slot-scope="scope">
                <span v-if="scope.row.dialysis_finish!=null && scope.row.dialysis_finish.module == 3">
                   √
                </span>
                <span v-else>
                  ×
                </span>
             </template>
          </el-table-column>
          <el-table-column
            prop="target_ultrafiltration"
            label="临时医嘱"
            align="center"
            width="100"
          >
           <template slot-scope="scope">
                <span v-if="scope.row.dialysis_finish!=null && scope.row.dialysis_finish.module == 4">
                   √
                </span>
                <span v-else>
                  ×
                </span>
             </template>
          </el-table-column>
  
          <el-table-column
            v-if="org_id == 10469"
            prop="prescription_water"
            label="双人核对"
            align="center"
            width="100"
          >
          <template slot-scope="scope">
                <span v-if="scope.row.dialysis_finish!=null && scope.row.dialysis_finish.module == 5">
                   √
                </span>
                <span v-else>
                  ×
                </span>
             </template>
         </el-table-column>
  
     
          <el-table-column
            prop="dry_weight"
            label="透析上机"
            align="center"
            width="120"
          >
          <template slot-scope="scope">
                <span v-if="scope.row.dialysis_finish!=null && scope.row.dialysis_finish.module == 6">
                   √
                </span>
                <span v-else>
                  ×
                </span>
             </template>
         </el-table-column>
          <el-table-column
            prop="dialysis_before_weight"
            label="透析监测"
            align="center"
            width="120"
          >
          <template slot-scope="scope">
                <span v-if="scope.row.dialysis_finish!=null && scope.row.dialysis_finish.module == 7">
                   √
                </span>
                <span v-else>
                  ×
                </span>
           </template>
         </el-table-column>
  
          <el-table-column
            prop="dialysis_after_weight"
            label="透析下机"
            align="center"
            width="120"
          >
          <template slot-scope="scope">
                <span v-if="scope.row.dialysis_finish!=null && scope.row.dialysis_finish.module == 8">
                   √
                </span>
                <span v-else>
                  ×
                </span>
           </template>
          </el-table-column>
  
          <el-table-column
            prop="dialysis_after_weight"
            label="透后评估"
            align="center"
            width="120"
          >
          <template slot-scope="scope">
                <span v-if="scope.row.dialysis_finish!=null && scope.row.dialysis_finish.module == 9">
                   √
                </span>
                <span v-else>
                  ×
                </span>
           </template>
         </el-table-column>
       
          <el-table-column
            prop="dialysis_after_weight"
            label="治疗小结"
            align="center"
            width="120"
          >
          <template slot-scope="scope">
                <span v-if="scope.row.dialysis_finish!=null && scope.row.dialysis_finish.module == 10">
                   √
                </span>
                <span v-else>
                  ×
                </span>
           </template>
         </el-table-column>

         <el-table-column
            prop="dialysis_after_weight"
            label="耗材出库"
            align="center"
            width="120"
          >
          <template slot-scope="scope">
                <span v-if="scope.row.dialysis_finish!=null && scope.row.dialysis_finish.module == 11">
                   √
                </span>
                <span v-else>
                  ×
                </span>
           </template>
         </el-table-column> -->
  

        </el-table>
  
        <el-pagination
          align="right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[20, 40, 60, 80,100]"
          :page-size="10"
          background
          style="margin-top:20px;"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  import { getDataConfig } from "@/utils/data";
  import store from "@/store";
  import { getSchedualPatientFlow, GetAllZone } from "@/api/dialysis";
  import { parseTime } from "@/utils";
  import BreadCrumb from "@/xt_pages/components/bread-crumb";
  import { getPrintTemplate } from "@/api/data";
  import { uParseTime } from '@/utils/tools'
  const moment = require('moment')
  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: "晚上" }
        ],
        moduleList:[
        {id:1,name:"透析处方"},
        {id:2,name:"接诊评估"},
        {id:3,name:"透前评估"},
        {id:4,name:"临时医嘱"},  
        {id:5,name:"双人核对"}, 
        {id:6,name:"透析上机"}, 
        {id:7,name:"透析监测"},
        {id:8,name:"透析下机"},
        {id:9,name:"透后评估"},
        {id:10,name:"治疗小结"},
        {id:11,name:"耗材出库"},
        ],
        template_id: 0,
  
        partitionType: 0,
  
        labelArr: ["第1次", "第2次", "第3次", "第4次", "第5次", "第6次", "第7次"],
  
        pickerOptions1: {
          shortcuts: [
            {
              text: "今天",
              onClick(picker) {
                var date = new 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 date1 = new Date(nowDate + " 00:00:00");
                picker.$emit("pick", date1.getTime());
              }
            },
            {
              text: "昨天",
              onClick(picker) {
                var d = new Date();
                d.setTime(d.getTime() - 3600 * 1000 * 24);
                var date = d;
                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 date1 = new Date(nowDate + " 00:00:00");
                picker.$emit("pick", date1.getTime());
              }
            },
            {
              text: "一周前",
              onClick(picker) {
                var d = new Date();
                d.setTime(d.getTime() - 3600 * 1000 * 24 * 7);
                var date = d;
                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 date1 = new Date(nowDate + " 00:00:00");
                picker.$emit("pick", date1.getTime());
              }
            },
            {
              text: "清空",
              onClick(picker) {
                picker.$emit("pick");
              }
            }
          ]
        },
  
        total: 0,
        listQuery: {
          page: 1,
          limit: 20,
          schedul_type: 0,
          partition_type: 0,
          schedul_time: "",
          keywords: "",
          start_time:"",
          end_time:"",
        },
        selecting_schs: [],
        partitionArr: [],
        bloodPressureMmonitoringSite: [],
        complicationList: [],
        template_id:0,
        org_id:0,
  
      };
    },
    created() {
      this.template_id = this.$store.getters.xt_user.template_info.template_id;
      this.org_id = this.$store.getters.xt_user.template_info.org_id;
      this.bloodPressureMmonitoringSite = getDataConfig(
        "hemodialysis",
        "blood_pressure_monitoring_site"
      );
     this.complicationList = getDataConfig("hemodialysis", "complication");
      var search_mode = this.$store.getters.search_mode
      var search_value = this.$store.getters.search_value
      console.log('search_mode',search_mode)
      if(search_mode == 2){
        this.search_mode = search_mode
        if(search_value != ''){
          this.patient_search_keyword = search_value
          this.listQuery.keywords = search_value
         
          this.getSchedualPatientList();
          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.getTemplateInfo();
        }else {
          var start_month = moment().startOf('month').format('YYYY-MM-DD')
          var start_time = this.getTimestamp(start_month) 
          this.listQuery.start_time = start_time
          var end_month = moment(new Date()).add('year',0).format("YYYY-MM-DD")
          var end_time = this.getTimestamp(end_month)
          this.listQuery.end_time = end_time 
          this.getSchedualPatientList()
        
          this.getAllZone();
          this.getTemplateInfo();
  
        }
      }else {
        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();
        var start_month = moment().startOf('month').format('YYYY-MM-DD')
        var start_time = this.getTimestamp(start_month) 
       
        this.listQuery.start_time = start_time
        var end_month = moment(new Date()).add('year',0).format("YYYY-MM-DD")
        var end_time = this.getTimestamp(end_month)
        this.listQuery.end_time = end_time
       
        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;
            console.log("templage-i233232323232322323233232323223",this.template_id)
          }
        });
      },
      clickCurrent(val) {
        console.log(val);
        this.$router.push({
          path: "/dialysis/details",
          query: { patient_id: val.patient_id, date: val.sch_time_int,mode_id:val.mode_id }
        });
      },
      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.start_time = ""
        this.listQuery.end_time = ""
        this.listQuery.start_time = this.getTimestampOne(this.time)
        this.listQuery.end_time = this.getTimestampOne(this.time)
        this.listQuery.schedul_time = this.time;
        this.getSchedualPatientList();
      },
      changeStartTime(){
       
        this.getSchedualPatientList()
      },
      changeEndTime(){
  
        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: "全部" });
          }
        });
      },
      getTimestamp(time) { //把时间日期转成时间戳
  
        return (new Date(time)).getTime() - 28800000
      },
      getTimestampOne(time) { //把时间日期转成时间戳
  
      return (new Date(time)).getTime() 
      },
      getSchedualPatientList: function() {
        this.loading = true;
        if (this.search_mode == 1) {
          this.listQuery.keywords = "";
  
  
        } else {
          this.listQuery.schedul_time = "";
  
        }
      
        
        console.log("params332322332323232",this.listQuery.start_time)
        this.SchedualPatientsTableData = [];
        getSchedualPatientFlow(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;
          
            
            this.SchedualPatientsTableData  = response.data.data.schedule
            console.log("SchedualPatientsTableData",response.data.data.schedule)
          }
        });
      },
      isShow(name) {
        var filedList = store.getters.xt_user.fileds;
        for (let i = 0; i < filedList.length; i++) {
          if (
            filedList[i].module == 4 &&
            filedList[i].filed_name_cn == name &&
            filedList[i].is_show == 1
          ) {
            return true;
          }
        }
        return false;
      },
      cellStyle({ row, column, rowIndex, columnIndex }) {
        let arr = [9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36];
        if (arr.indexOf(columnIndex) > -1) {
          return "spanClass";
        }
      },
      getTimeOne(val) {
          if(val < 0){
            return ""
          }
          if(val == ""){
          return ""
          }else {
          return uParseTime(val, '{h}:{i}')
          }
      },

      getTimeTwo(val) {
          if(val < 0){
            return ""
          }
          if(val == ""){
          return ""
          }else {
          return uParseTime(val, '{y}-{m}-{d}')
          }
      },
      getBloodPressure(id) {
        var name = "";
        for (let i = 0; i < this.bloodPressureMmonitoringSite.length; i++) {
          if (id == this.bloodPressureMmonitoringSite[i].id) {
            name = this.bloodPressureMmonitoringSite[i].name;
          }
        }
        return name;
      },
      getComplication(id) {
        var name = "";
        for (let i = 0; i < this.complicationList.length; i++) {
          if (id == this.complicationList[i].id) {
            name = this.complicationList[i].name;
          }
        }
        return name;
      },
      getValue: function(val) {
  
        if (val != undefined) {
          var str = val.value.split("/")
          return str[0];
        } else {
          return "";
        }
      },
     getValueOne: function(val) {
        if (val != undefined) {
          var str = val.value.split("/")
          return str[1];
        } 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;
          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.$store.dispatch('SetSearchMode', this.search_mode)
      },
      searchPatientAction: function() {
        this.listQuery.keywords = this.patient_search_keyword;
        this.$store.dispatch('SetSearchValue', 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();
      },
     getModeFinish(val,id){
      var name = "×"
       if(val!=null){
         for(let i=0;i<val.length;i++){
            if(val[i].module == id){
               name = "√"
            }
         }
       }
       return name
     }
      
      
    },
    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>
  <style scoped>
   /* 合并表格线样式 */
  .spanClass .cell {
    padding: 0 !important;
  }
  
  .spanClass .cell tr {
    display: inline-block;
    width: 100%;
  }
  
  .spanClass .cell tr td {
    padding: 10px 0;
    border-bottom: 1px solid #ebeef5;
    display: block;
    width: 100%;
  }
  .spanClass .cell tr:last-of-type td {
    border-bottom: none;
  }
  </style>