xt_vue/src/xt_pages/workforce/components/tableWeeks.vue

<template>
  <div>
    <div class="cell clearfix" style="float: right" >
      <el-button style="float: right" size="small" icon="el-icon-printer" @click="printAction()" type="primary">打印
      </el-button>
    </div>

    <div class="cell clearfix">
      <label class="title">
        <span class="name">时间</span> :
      </label>
      <div class="time">
        <ul class>
          <li
            :class="item.id==week_type?'active':''"
            @click="selectWeekType(item.id)"
            v-for="item in weekArr"
            :key="item.id"
          >{{item.name}}
          </li>
        </ul>
      </div>
    </div>
    <el-table
      :data="scheduleData"
      border
      :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}"
      style="width: 100%">
      <el-table-column label="姓名" min-width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.patient}}
        </template>
      </el-table-column>
      <el-table-column label="分区" min-width="120" align="center">
        <template slot-scope="scope">
          {{scope.row.zone.name}}
        </template>
      </el-table-column>
      <el-table-column label="班次" min-width="120" align="center">
        <template slot-scope="scope">
          {{getSchedulesType(scope.row.schedule_type)}}
        </template>
      </el-table-column>
      <el-table-column label="机号" min-width="120" align="center">
        <template slot-scope="scope">
          {{scope.row.number.number}}
        </template>
      </el-table-column>
      <el-table-column label="透析模式" min-width="120" align="center">
        <template slot-scope="scope">
          {{modeOptions[scope.row.mode_id].name}}
        </template>
      </el-table-column>
      <el-table-column label="透析器" min-width="120" align="center">
        <template slot-scope="scope">
          {{scope.row.prescription.dialyzer_perfusion_apparatus}}
        </template>
      </el-table-column>
      <el-table-column label="抗凝剂" min-width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.prescription.anticoagulant ? anticoagulants_confit[scope.row.prescription.anticoagulant].name :
          ''}}
        </template>
      </el-table-column>
      <el-table-column label="低分子肝素" min-width="120" align="center">
        <template slot-scope="scope">
          {{scope.row.prescription.anticoagulant_zongliang?scope.row.prescription.anticoagulant_zongliang:''}}
        </template>
      </el-table-column>
      <el-table-column label="长期医嘱" min-width="120" align="center">
        <template slot-scope="scope">
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { getSchedules, getScheduleWeekDay } from '@/api/schedule'
  import WeekItem from './WeekItem'

  export default {
    name: 'tableWeeks',
    props: {
      weekTime: {
        type: String,
        default: 'thisWeek'
      }
    },

    data() {
      return {
        weekArr: [
          { id: 1, name: '周一' },
          { id: 2, name: '周二' },
          { id: 3, name: '周三' },
          { id: 4, name: '周四' },
          { id: 5, name: '周五' },
          { id: 6, name: '周六' },
          { id: 7, name: '周日' }
        ],
        anticoagulants_confit: null,

        week_type: '1',
        weekTitle: ['', '', '', '', '', '', ''],
        weekData: {
          Monday: [],
          Tuesday: [],
          Wednesday: [],
          Thursday: [],
          Friday: [],
          Saturday: [],
          Sunday: []
        },
        scheduleData: [],
        modeOptions: null
      }
    },
    watch: {
      weekTime: function() {
        var theType = this.weekType(this.weekTime)
        this.getSchedules(theType)
      }
    },

    methods: {
      printAction(){
        console.log("111111")
        this.$router.push({ path: '/schedule/remind/print?week_type=' + this.week_type })

      },
      getScheduleWeekDay(weekType) {
        getScheduleWeekDay(weekType).then(response => {
          this.scheduleData = []
          if (response.data.state == 1) {
            this.scheduleData = response.data.data.schdules
            console.log(this.scheduleData)
          } else {
            this.$message.error('网络错误')
            return false
          }
        })
      },

      // getSchedules(weekType) {
      //   getSchedules(weekType).then(response => {
      //     this.scheduleData = []
      //     if (response.data.state == 1) {
      //       this.weekTitle = response.data.data.weekTitle
      //       var theSchedules = response.data.data.schdules
      //       var that = this
      //       theSchedules.forEach(function(schedule) {
      //         schedule['mode_name'] = typeof (that.modeOptions[schedule.mode_id]) == 'undefined' ? '' : that.modeOptions[schedule.mode_id].name
      //         var weekPath = that.weekPath(schedule.schedule_week)
      //         if (weekPath.length > 0) {
      //           that.weekData[weekPath].push(schedule)
      //         }
      //       })
      //       var rowNum = 0
      //       console.log(that.weekData)
      //       for (var index in that.weekData) {
      //         var thisLen = that.weekData[index].length
      //         rowNum = rowNum >= thisLen ? rowNum : thisLen
      //       }
      //       console.log(rowNum)
      //       for (let index = 0; index < rowNum; index++) {
      //         var dataItem = {}
      //         for (var weekIndex in that.weekData) {
      //           var weekItem = that.weekData[weekIndex].shift()
      //           console.log('weekItem', weekItem)
      //           if (typeof (weekItem) != 'undefined') {
      //             dataItem[weekIndex] = weekItem
      //           }
      //         }
      //         that.scheduleData.push(dataItem)
      //       }
      //
      //       console.log(that.scheduleData)
      //
      //     } else {
      //       this.$message.error('网络错误')
      //       return false
      //     }
      //   })
      // },
      weekType(weekTime) {
        var theType = 2
        switch (weekTime) {
          case 'lastWeek':
            theType = 1
            break
          case 'thisWeek':
            theType = 2
            break
          case 'nextWeek':
            theType = 3
            break
          case 'nextTwoWeek':
            theType = 4
            break
          default:
            theType = 2
            break
        }
        return theType
      },
      weekPath(week) {
        var weekArr = {
          1: 'Monday',
          2: 'Tuesday',
          3: 'Wednesday',
          4: 'Thursday',
          5: 'Friday',
          6: 'Saturday',
          7: 'Sunday'
        }
        if (typeof (weekArr[week]) == 'undefined') {
          return ''
        }
        return weekArr[week]
      }, selectWeekType(type) {
        this.week_type = type
        let params = {
          week_type: this.week_type
        }
        this.getScheduleWeekDay(params)
      }, getSchedulesType: function(type) {
        let type_name = ''
        switch (type) {
          case 1:
            type_name = '上午'
            break
          case 2:
            type_name = '下午'
            break
          case 3:
            type_name = '晚上'
            break
        }
        return type_name
      }
    },
    components: {
      WeekItem
    },
    created() {
      this.modeOptions = this.$store.getters.treatment_mode
      this.anticoagulants_confit = this.$store.getters.anticoagulants_confit

      this.week_type = new Date().getDay()
      let params = {
        week_type: this.week_type
      }
      this.getScheduleWeekDay(params)
    }
  }
</script>

<style rel="stylesheet/css" lang="scss" scoped>


</style>