elizebeth/src/xt_pages/workforce/printOne.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
      <el-row style="float:right;">
        <el-col :span="24">
          <el-button size="small" icon="el-icon-printer" type="primary" @click="printAction">打印</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="app-container" style="background-color: white;">

      <div id="print_content">
        <div class="print_main_content" v-for="(item,index) in tableData" :key="index">
        
          <div class="order_title_panl">
            <span class="main_title">{{getTimeOne(item.schedule_date)}}&nbsp;
              <span v-if="item.schedule_type == 1">上午</span>
              <span v-if="item.schedule_type == 2">下午</span>
              <span v-if="item.schedule_type == 3">晚上</span>
            </span>
          </div>
          <div class="table_panel">

            <table class="table">
              <thead>
              <tr>
                <td :width="td_1_width">分区</td>
             
                <td :width="td_3_width">病人姓名</td>
               
              </tr>
              </thead>
              <tbody>
              <tr v-for="(it, i) in item.zones" :key="i">
                <td :width="td_1_width">{{getZoneName(it.partition_id)}} </td>
                <td :width="td_3_width" valign="top">
                  <div style="min-height: 80px;">
                    <div class="proj">
                      <div class="proj_item">
                        <span class="zone_name">
                          {{getPatientName(item.schedule_type,it.partition_id)}}  
                        </span>
                        
                      </div>
                    </div>
                  </div>
                </td>
               
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { GetAllZone,getSchedualPrintList } from "@/api/dialysis";
  import { parseTime } from '@/utils'
  import { uParseTime } from '@/utils/tools'
  import BreadCrumb from '@/xt_pages/components/bread-crumb'
  import print from 'print-js'

  export default {
    name: 'SchedulePrint',
    data() {
      return {
        crumbs: [
          { path: false, name: '排班管理' },
          { path: false, name: '排班打印' }
        ],
        td_1_width: '8%',
        td_2_width: '8%',
        td_3_width: '64%',
        td_4_width: '20%',

        month: 1,
        begin_day: 1,

        schedules: [
          {
            day: 1,
            weekday: '星期一',
            all: {
              am: { /* zone_name: [ schedule, ... ] */ },
              pm: { /* zone_name: [ schedule, ... ] */ },
              evening: { /* zone_name: [ schedule, ... ] */ }
            },
            hdf: [ /* schedule, ... */],
            hd_hp: [ /* schedule, ... */],

            new_hdf:{
              am: { /* zone_name: [ schedule, ... ] */ },
              pm: { /* zone_name: [ schedule, ... ] */ },
              evening: { /* zone_name: [ schedule, ... ] */ }
            },
            new_hd_hp:{
              am: { /* zone_name: [ schedule, ... ] */ },
              pm: { /* zone_name: [ schedule, ... ] */ },
              evening: { /* zone_name: [ schedule, ... ] */ }
            }

          },
          {
            day: 2,
            weekday: '星期二',
            all: {
              am: { /* zone_name: [ schedule, ... ] */ },
              pm: { /* zone_name: [ schedule, ... ] */ },
              evening: { /* zone_name: [ schedule, ... ] */ }
            },
            hdf: [ /* schedule, ... */],
            hd_hp: [ /* schedule, ... */],
            new_hdf:{
              am: { /* zone_name: [ schedule, ... ] */ },
              pm: { /* zone_name: [ schedule, ... ] */ },
              evening: { /* zone_name: [ schedule, ... ] */ }
            },
            new_hd_hp:{
              am: { /* zone_name: [ schedule, ... ] */ },
              pm: { /* zone_name: [ schedule, ... ] */ },
              evening: { /* zone_name: [ schedule, ... ] */ }
            }
          },
          {
            day: 3,
            weekday: '星期三',
            all: {
              am: { /* zone_name: [ schedule, ... ] */ },
              pm: { /* zone_name: [ schedule, ... ] */ },
              evening: { /* zone_name: [ schedule, ... ] */ }
            },
            hdf: [ /* schedule, ... */],
            hd_hp: [ /* schedule, ... */],
            new_hdf:{
              am: { /* zone_name: [ schedule, ... ] */ },
              pm: { /* zone_name: [ schedule, ... ] */ },
              evening: { /* zone_name: [ schedule, ... ] */ }
            },
            new_hd_hp:{
              am: { /* zone_name: [ schedule, ... ] */ },
              pm: { /* zone_name: [ schedule, ... ] */ },
              evening: { /* zone_name: [ schedule, ... ] */ }
            }
          },
          {
            day: 4,
            weekday: '星期四',
            all: {
              am: { /* zone_name: [ schedule, ... ] */ },
              pm: { /* zone_name: [ schedule, ... ] */ },
              evening: { /* zone_name: [ schedule, ... ] */ }
            },
            hdf: [ /* schedule, ... */],
            hd_hp: [ /* schedule, ... */],
            new_hdf:{
              am: { /* zone_name: [ schedule, ... ] */ },
              pm: { /* zone_name: [ schedule, ... ] */ },
              evening: { /* zone_name: [ schedule, ... ] */ }
            },
            new_hd_hp:{
              am: { /* zone_name: [ schedule, ... ] */ },
              pm: { /* zone_name: [ schedule, ... ] */ },
              evening: { /* zone_name: [ schedule, ... ] */ }
            }
          },
          {
            day: 5,
            weekday: '星期五',
            all: {
              am: { /* zone_name: [ schedule, ... ] */ },
              pm: { /* zone_name: [ schedule, ... ] */ },
              evening: { /* zone_name: [ schedule, ... ] */ }
            },
            hdf: [ /* schedule, ... */],
            hd_hp: [ /* schedule, ... */],
            new_hdf:{
              am: { /* zone_name: [ schedule, ... ] */ },
              pm: { /* zone_name: [ schedule, ... ] */ },
              evening: { /* zone_name: [ schedule, ... ] */ }
            },
            new_hd_hp:{
              am: { /* zone_name: [ schedule, ... ] */ },
              pm: { /* zone_name: [ schedule, ... ] */ },
              evening: { /* zone_name: [ schedule, ... ] */ }
            }
          },
          {
            day: 6,
            weekday: '星期六',
            all: {
              am: { /* zone_name: [ schedule, ... ] */ },
              pm: { /* zone_name: [ schedule, ... ] */ },
              evening: { /* zone_name: [ schedule, ... ] */ }
            },
            hdf: [ /* schedule, ... */],
            hd_hp: [ /* schedule, ... */],
            new_hdf:{
              am: { /* zone_name: [ schedule, ... ] */ },
              pm: { /* zone_name: [ schedule, ... ] */ },
              evening: { /* zone_name: [ schedule, ... ] */ }
            },
            new_hd_hp:{
              am: { /* zone_name: [ schedule, ... ] */ },
              pm: { /* zone_name: [ schedule, ... ] */ },
              evening: { /* zone_name: [ schedule, ... ] */ }
            }
          },
          {
            day: 7,
            weekday: '星期日',
            all: {
              am: { /* zone_name: [ schedule, ... ] */ },
              pm: { /* zone_name: [ schedule, ... ] */ },
              evening: { /* zone_name: [ schedule, ... ] */ }
            },
            hdf: [ /* schedule, ... */],
            hd_hp: [ /* schedule, ... */],
            new_hdf:{
              am: { /* zone_name: [ schedule, ... ] */ },
              pm: { /* zone_name: [ schedule, ... ] */ },
              evening: { /* zone_name: [ schedule, ... ] */ }
            },
            new_hd_hp:{
              am: { /* zone_name: [ schedule, ... ] */ },
              pm: { /* zone_name: [ schedule, ... ] */ },
              evening: { /* zone_name: [ schedule, ... ] */ }
            }
          }
        ],

        total:[],
        list:[],
        schedule_date:"",
        schedule_type:0,
        partition_type:0,
        keywords:"",
        loading:false,
        tableData:[],
        numberList:[],
        partitionArr:[],

      }
    },
    components: {
      BreadCrumb
    },
    created() {
      var date = new Date().getTime()
      if (this.$route.query.date) {
        date = this.$route.query.date
      }
      var date_str = parseTime(date, '{y}-{m}-{d}')

      this.month = parseInt(parseTime(date, '{m}'))
      this.getAllZone()
      this.getlist()
    

 
    },
    methods: {
     getAllZone() {
      GetAllZone().then(response => {
        if (response.data.state == 0) {
          this.$message.error(response.data.msg);
          return false;
        } else {
          this.partitionArr = response.data.data.zone;
        }
      });
     },
      getlist(){
         var params = {
           schedule_date:this.$route.query.schedule_date,
           schedule_type:parseInt(this.$route.query.schedule_type),
           partition_type:parseInt(this.$route.query.partition_type),
           keywords:this.$route.query.keywords,
           page:1,
           limit:5000,
         }
        this.loading = true;
        this.tableData = [];
        getSchedualPrintList(params).then(response => {
            if(response.data.state == 1){
            this.loading = false
            var list =  response.data.data.list
            this.list = list
            var listOne = response.data.data.listOne
            if(list!=null && list.length > 0){
              let dataInfo = {}
              list.forEach((item, index) => {
                 let { schedule_type } = item
                  if (!dataInfo[schedule_type]) {
                    dataInfo[schedule_type] = {
                      schedule_type:item.schedule_type,
                      schedule_date:item.schedule_date,
                      zones: [],
                    }
                  }
                })
              let arr = Object.values(dataInfo)
              console.log("arr222",arr)
               
             if(arr!=null && arr.length > 0){
              for(let i=0;i<arr.length;i++){
                for(let j=0;j<listOne.length;j++){
                   if(arr[i].schedule_type == listOne[j].schedule_type){
                      arr[i].zones.push(listOne[j])
                   }
                }
              } 
             }
            console.log("arr23322332",arr)
             
              this.tableData = arr
            }
            
           
            this.numberList = response.data.data.numberList
            console.log("list2332233232wo",list)
            console.log("numberList",this.numberList)
           
           
            }
        
        });
      },
     getTimeOne(val) {
        if(val == ""){
        return ""
        }else {
        return uParseTime(val, '{y}-{m}-{d}')
        }
     },
      getPatientNum(week,type){
        if(week == '星期一'){
          week = 1
        }else if(week == '星期二'){
          week = 2
        }else if(week == '星期三'){
          week = 3
        }else if(week == '星期四'){
          week = 4
        }else if(week == '星期五'){
          week = 5
        }else if(week == '星期六'){
          week = 6
        }else if(week == '星期日'){
          week = 7
        }
        let num = 0
        this.total.map(item => {
          if(item.schedule_week == week && item.schedule_type == type){
            num = item.Count
          }
        })
        return num
      },
      patient_names: function(schedules) {
        var names = []
        for (let index = 0; index < schedules.length; index++) {
          const schedule = schedules[index]
          console.log(schedule)

          names.push(schedule.patient.name)
        }
        const obj = {}
        names = names.reduce((cur, next) => {
          obj[next] ? '' : obj[next] = true && cur.push(next)
          return cur
        }, []) // 设置cur默认类型为数组，并且初始值为空的数组
        console.log('names',names)
        return names.join('、')
      },
      patient_other_names: function(schedules) {
        let am = []
        let pm = []
        let evening = []

        var names = []
        for (let index = 0; index < schedules.length; index++) {
          const schedule = schedules[index]
          console.log(schedule)

          names.push(schedule.patient.name)

          if(schedule.schedule_type == 1){
            am.push(schedule.patient.name)

          }else if(schedule.schedule_type == 2){
            pm.push(schedule.patient.name)


          }else if(schedule.schedule_type == 3){
            evening.push(schedule.patient.name)
          }
        }
        const obj = {}
        names = names.reduce((cur, next) => {
          obj[next] ? '' : obj[next] = true && cur.push(next)
          return cur
        }, []) // 设置cur默认类型为数组，并且初始值为空的数组
        var str= ""

        if(am.length > 0){
          str = "上午:"+ am.length + '人' +"<br/>" + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + am.join("、") +"<br/>"
        }

        if(pm.length > 0){
          str = str + "下午:" + pm.length + '人' + "<br/>" + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + pm.join("、")+"<br/>"
        }

        if(evening.length > 0){
          str = str + "晚上:" + evening.length + '人' +"<br/>" + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + evening.join("、")
        }
        return str
      },
      printAction: function() {
        const style = '@media print { .print_main_content { background-color: white; width:960px;  margin:0 auto; padding: 0 0 20px 0; } .order_title_panl { text-align: center; } .main_title { font-size: 18px; line-height: 40px; font-weight: 500; } .table_panel { } .table { width: 100%; border: 1px solid; border-collapse: collapse; padding: 2px; } thead tr td { border: 1px solid; text-align: center; font-size: 20px; padding: 15px 5px; } tbody tr td { border: 1px solid; text-align: center; font-size: 18px; padding: 10px 5px; } .proj { padding: 5px 0; text-align: left; } .proj_title { font-size: 16px; font-weight: 500; line-height: 25px; } .proj_item { font-size: 15px; line-height: 20px; } .zone_name { font-weight: 500; } }'

        printJS({
          printable: 'print_content',
          type: 'html',
          documentTitle: '  ',
          style: style,
          scanStyles: false
        })
      },
      getPatientName(schedule_type,partition_id){
        
        var str = ""
        var arr= []
        if(this.list!=null && this.list.length > 0){
          for(let i=0;i<this.list.length;i++){
            if(this.list[i].schedule_type == schedule_type && this.list[i].partition_id == partition_id){
                arr.push(this.list[i])
            }
          }
        }
       
        if(arr.length > 0){
          for(let i=0;i<arr.length;i++){
            str += arr[i].name + ","
          }
        }
        return str.slice(0,str.length-1)
      },
      getZoneName(id){
        var name = ""
        for(let i=0;i<this.partitionArr.length;i++){
          if(id == this.partitionArr[i].id){
            name = this.partitionArr[i].name
          }
        }
       

        return name
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .print_main_content {
    background-color: white;
    width: 960px;
    margin: 0 auto;
    padding: 0 0 20px 0;

  .order_title_panl {
    text-align: center;

  .main_title {
    font-size: 18px;
    line-height: 40px;
    font-weight: 500;
  }

  }
  .table_panel {

  .table {
    width: 100%;
    border: 1px solid;
    border-collapse: collapse;
    padding: 2px;

  thead {

  tr {

  td {
    border: 1px solid;
    text-align: center;
    font-size: 20px;
    padding: 15px 5px;
  }

  }
  }
  tbody {

  tr {

  td {
    border: 1px solid;
    text-align: center;
    font-size: 18px;
    padding: 10px 5px;

  .proj {
    padding: 5px 0;
    text-align: left;

  .proj_title {
    font-size: 16px;
    font-weight: 500;
    line-height: 25px;
  }

  .proj_item {
    font-size: 15px;
    line-height: 20px;

  .zone_name {
    font-weight: 500;
  }

  }
  }
  }
  }
  }
  }
  }
  }
</style>