elizebeth/src/xt_pages/workforce/components/template_table.vue

<template>
  <div v-loading="saving">

    <div class="cell clearfix" v-if="template.id != 0">
      <el-input
        size="small"
        style="width: 400px;"
        class="filter-item"
        v-model.trim="keywords"
        placeholder="病人名称/透析号"
        @keyup.enter.native='search'
      />
      <el-button
        size="small"
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="search"
      >搜索
      </el-button
      >
    </div>


    <el-dialog :visible.sync="searchTableVisible" width="80%">
      <el-table
        :data="schedulePatients"
        :header-cell-style="{
          backgroundColor: 'rgb(245, 247, 250)',
          color: '#606266'
        }"
        :row-style="{ color: '#303133' }"
        style="width: 100%"
        border
      >
        <el-table-column label="姓名" width="120">
          <template slot-scope="scope">
            {{ scope.row.patient }}
          </template>
        </el-table-column>
        <el-table-column label="星期">
          <template slot-scope="scope">
            {{ getWeekDay(scope.row.weekday) }}
          </template>
        </el-table-column>
        <el-table-column label="分区">
          <template slot-scope="scope">
            {{ scope.row.number.zone.name }}
          </template>
        </el-table-column>
        <el-table-column label="班次" width="80">
          <template slot-scope="scope">
            {{ getSchedulesType(scope.row.time_type) }}
          </template>
        </el-table-column>
        <el-table-column label="机号" width="80">
          <template slot-scope="scope">
            {{ scope.row.number.number }}
          </template>
        </el-table-column>
        <el-table-column label="透析模式" width="100">
          <template slot-scope="scope">
            {{ getModeName(scope.row.treat_mode) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="300">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status == 1"
              size="mini"
              type="primary"
              @click="cancel_schedule_action_two(scope.row)"
            >
              取消排班
            </el-button>

          </template>
        </el-table-column>
      </el-table>
    </el-dialog>


    <el-row v-show="editable">
      <el-col :span="24" style="text-align: left; margin-bottom: 10px;">
        <div v-show="editable && !is_editing">
          <el-button type="primary" size="small" @click="is_editing = true" icon="el-icon-edit-outline">编辑</el-button>
        </div>
        <div v-show="editable && is_editing">
          <el-button size="small" @click="is_editing = false" icon="el-icon-refresh">取消</el-button>
          <el-button type="primary" size="small" icon="el-icon-setting" @click="saveAction">保存</el-button>
        </div>
      </el-col>
    </el-row>

    <div id="table_data">
      <el-table :height="tableContainHeight" :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}" ref="table"
                :data="opera_device_numbers" :span-method="spanMethod"
                row-class-name="table-row-new-class schedule-table-row" @cell-click="itemClick">
        <el-table-column label="分区" width="80" align="center" fixed
                         style="width: 100px; background-color: red; display: block;">
          <template slot-scope="scope">
            {{ scope.row.zone.name }}
          </template>
        </el-table-column>

        <el-table-column label="机号" width="80" align="center" fixed>
          <template slot-scope="scope">
            <div>{{scope.row.number}}</div>
          </template>
        </el-table-column>

        <el-table-column label="周一" width="215" align="center">
          <el-table-column prop="1_1" label="上" width="70" align="center">
            <template slot-scope="scope">
              <template-table-item :info="scope.row['1_1']"></template-table-item>
            </template>
          </el-table-column>
          <el-table-column prop="1_2" label="下" width="70" align="center">
            <template slot-scope="scope">
              <template-table-item :info="scope.row['1_2']"></template-table-item>
            </template>
          </el-table-column>
          <el-table-column prop="1_3" label="晚" width="70" align="center">
            <template slot-scope="scope">
              <template-table-item :info="scope.row['1_3']"></template-table-item>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="周二" width="215" align="center">
          <el-table-column prop="2_1" label="上" width="70" align="center">
            <template slot-scope="scope">
              <template-table-item :info="scope.row['2_1']"></template-table-item>
            </template>
          </el-table-column>
          <el-table-column prop="2_2" label="下" width="70" align="center">
            <template slot-scope="scope">
              <template-table-item :info="scope.row['2_2']"></template-table-item>
            </template>
          </el-table-column>
          <el-table-column prop="2_3" label="晚" width="70" align="center">
            <template slot-scope="scope">
              <template-table-item :info="scope.row['2_3']"></template-table-item>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="周三" width="215" align="center">
          <el-table-column prop="3_1" label="上" width="70" align="center">
            <template slot-scope="scope">
              <template-table-item :info="scope.row['3_1']"></template-table-item>
            </template>
          </el-table-column>
          <el-table-column prop="3_2" label="下" width="70" align="center">
            <template slot-scope="scope">
              <template-table-item :info="scope.row['3_2']"></template-table-item>
            </template>
          </el-table-column>
          <el-table-column prop="3_3" label="晚" width="70" align="center">
            <template slot-scope="scope">
              <template-table-item :info="scope.row['3_3']"></template-table-item>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="周四" width="215" align="center">
          <el-table-column prop="4_1" label="上" width="70" align="center">
            <template slot-scope="scope">
              <template-table-item :info="scope.row['4_1']"></template-table-item>
            </template>
          </el-table-column>
          <el-table-column prop="4_2" label="下" width="70" align="center">
            <template slot-scope="scope">
              <template-table-item :info="scope.row['4_2']"></template-table-item>
            </template>
          </el-table-column>
          <el-table-column prop="4_3" label="晚" width="70" align="center">
            <template slot-scope="scope">
              <template-table-item :info="scope.row['4_3']"></template-table-item>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="周五" width="215" align="center">
          <el-table-column prop="5_1" label="上" width="70" align="center">
            <template slot-scope="scope">
              <template-table-item :info="scope.row['5_1']"></template-table-item>
            </template>
          </el-table-column>
          <el-table-column prop="5_2" label="下" width="70" align="center">
            <template slot-scope="scope">
              <template-table-item :info="scope.row['5_2']"></template-table-item>
            </template>
          </el-table-column>
          <el-table-column prop="5_3" label="晚" width="70" align="center">
            <template slot-scope="scope">
              <template-table-item :info="scope.row['5_3']"></template-table-item>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="周六" width="215" align="center">
          <el-table-column prop="6_1" label="上" width="70" align="center">
            <template slot-scope="scope">
              <template-table-item :info="scope.row['6_1']"></template-table-item>
            </template>
          </el-table-column>
          <el-table-column prop="6_2" label="下" width="70" align="center">
            <template slot-scope="scope">
              <template-table-item :info="scope.row['6_2']"></template-table-item>
            </template>
          </el-table-column>
          <el-table-column prop="6_3" label="晚" width="70" align="center">
            <template slot-scope="scope">
              <template-table-item :info="scope.row['6_3']"></template-table-item>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="周日" min-width="215" align="center">
          <el-table-column prop="7_1" label="上" min-width="70" align="center">
            <template slot-scope="scope">
              <template-table-item :info="scope.row['7_1']"></template-table-item>
            </template>
          </el-table-column>
          <el-table-column prop="7_2" label="下" min-width="70" align="center">
            <template slot-scope="scope">
              <template-table-item :info="scope.row['7_2']"></template-table-item>
            </template>
          </el-table-column>
          <el-table-column prop="7_3" label="晚" min-width="70" align="center">
            <template slot-scope="scope">
              <template-table-item :info="scope.row['7_3']"></template-table-item>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column prop="total" label="总数" width="60" align="center" fixed="right">
          <template slot-scope="scope">
            {{ scope.row.total }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <schedule-selector-dialog ref="selector_dialog" :patients="patients" @did_selected="will_add_schedule_action"
                              @did_cancel="cancel_schedule_action"></schedule-selector-dialog>
  </div>
</template>

<script>
  import TemplateTableItem from './template_table_item'
  import ScheduleSelectorDialog from './template_schedule_selector_dialog'
  import {
    cancelScheduleTemplate,
    getTemplateScheduleSearchResult,
    updateSchedules
  } from '@/api/schedule_template/patient'

  var rowspanNoControl = -1
  export default {
    name: 'TemplateTable',
    components: {
      TemplateTableItem,
      ScheduleSelectorDialog
    },
    data() {
      return {
        keywords: '',
        schedulePatients: [],
        searchTableVisible: false,
        saving: false,
        zone_device_counts: {},
        treat_modes: {},
        is_editing: false,
        opera_device_numbers: [],
        origin_device_numbers: [],

        tableHeight: document.documentElement.clientHeight
      }
    },
    props: {
      editable: {
        type: Boolean,
        default: true
      },
      device_numbers: {
        type: Array
      },
      template: {
        type: Object
      },
      patients: {
        type: Array
      }
    },
    created() {
      this.treat_modes = this.$store.getters.treatment_mode

      // window.addEventListener('scroll', this.handleScroll)
    },
    watch: {
      'device_numbers': function() {
        this.opera_device_numbers = this.makeDeviceNumbers(this.device_numbers)
        this.origin_device_numbers = this.makeDeviceNumbers(this.device_numbers)
      },
      'template.items': function() {
        // 先清除所有已有 item
        this.$nextTick(() => {
          var weekdays = [1, 2, 3, 4, 5, 6, 7] // 周一-周日
          var time_types = [1, 2, 3] // 上下晚
          for (let d_n_i = 0; d_n_i < this.opera_device_numbers.length; d_n_i++) {
            const op_d_n = this.opera_device_numbers[d_n_i]
            const or_d_n = this.origin_device_numbers[d_n_i]

            op_d_n.total = 0
            or_d_n.total = 0

            for (let w_i = 0; w_i < weekdays.length; w_i++) {
              const weekday = weekdays[w_i]
              for (let t_i = 0; t_i < time_types.length; t_i++) {
                const time_type = time_types[t_i]

                var item_key = weekday + '_' + time_type
                var op_item = op_d_n[item_key]
                var or_item = or_d_n[item_key]

                op_item.pid = 0
                op_item.name = ''
                op_item.treat_mode_id = 0
                op_item.treat_mode = ''

                or_item.pid = 0
                or_item.name = ''
                or_item.treat_mode_id = 0
                or_item.treat_mode = ''
              }
            }
          }

          for (let index = 0; index < this.template.items.length; index++) {
            const template_item = this.template.items[index]
            if (template_item.patient == null) {
              continue
            }

            for (let d_i = 0; d_i < this.opera_device_numbers.length; d_i++) {
              const device_number = this.opera_device_numbers[d_i]
              if (device_number.id == template_item.device_number_id) {
                var weekday = template_item.weekday
                var time_type = template_item.time_type
                var cell_item = device_number[weekday + '_' + time_type]
                cell_item.pid = template_item.patient_id
                cell_item.name = template_item.patient.name
                cell_item.treat_mode_id = template_item.treat_mode
                cell_item.treat_mode = template_item.treat_mode ? this.treat_modes[template_item.treat_mode].name : ''
                device_number.total += 1

                // origin_device_numbers 初始化时数据应该是和 opera_device_numbers 一样的，这里就不再用一个 for 遍历 origin_device_numbers 重复 opera_device_numbers 的操作了
                const o_device_number = this.origin_device_numbers[d_i]
                var o_cell_item = o_device_number[weekday + '_' + time_type]
                o_cell_item.pid = template_item.patient_id
                o_cell_item.name = template_item.patient.name
                o_cell_item.treat_mode_id = template_item.treat_mode
                o_cell_item.treat_mode = template_item.treat_mode ? this.treat_modes[template_item.treat_mode].name : ''
                o_device_number.total += 1

                break
              }
            }
          }
        })

        // this.$refs.table.doLayout()
      },
      tableHeight(val) {
        if (!this.timer) {
          this.tableHeight = val
          this.timer = true
          const that = this
          setTimeout(function() {
            that.timer = false
          }, 400)
        }
      }
    },
    mounted() {
      const that = this
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight
          if (window.fullHeight < 200) {
            that.tableHeight = 200
          } else {
            that.tableHeight = window.fullHeight - 200
          }
        })()
      }
    },
    mounted: function() {
      this.tableContainHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 310
    },
    methods: {
      getWeekDay: function(week) {
        let week_name = ''
        switch (week) {
          case 1:
            week_name = '星期一'
            break
          case 2:
            week_name = '星期二'

            break
          case 3:
            week_name = '星期三'
            break
          case 4:
            week_name = '星期四'
            break
          case 5:
            week_name = '星期五'
            break
          case 6:
            week_name = '星期六'
            break
          case 7:
            week_name = '星期日'
            break
        }
        return week_name

      },
      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
      },
      getModeName: function(mode) {
        if (this.$store.getters.treatment_mode[mode] != undefined) {
          return this.$store.getters.treatment_mode[mode].name
        }
        return ''
      },
      // handleScroll: function() {
      //     var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      //     console.log(scrollTop)
      //     if (scrollTop >= 150) {
      //         this.fixed_style = "background-color: red; position: fixed; top: 0px; left: 190px; right: 150px; z-index: 99;"
      //     } else {
      //         this.fixed_style = ""
      //     }
      // },
      makeDeviceNumbers: function(device_numbers) {
        var maked_device_numbers = []
        var weekdays = [1, 2, 3, 4, 5, 6, 7] // 周一-周日
        var time_types = [1, 2, 3] // 上下晚
        for (let index = 0; index < device_numbers.length; index++) {
          const device_number = device_numbers[index]
          var zone = {
            id: device_number.zone.id,
            name: device_number.zone.name,
            type: device_number.zone.type
          }
          var device = {
            id: device_number.id,
            number: device_number.number,
            group_id: device_number.group_id,
            zone_id: device_number.zone_id,
            zone: zone
          }

          // 以 weekday_timetype 为 key，{pid: 0, name: "", treat_mode_id: 0, treat_mode: ""} 为 value，加入到 maked_device_numbers 中
          for (let w_i = 0; w_i < weekdays.length; w_i++) {
            const weekday = weekdays[w_i]
            for (let t_i = 0; t_i < time_types.length; t_i++) {
              const time_type = time_types[t_i]

              var defaultValue = {}
              this.$set(defaultValue, 'pid', 0)
              this.$set(defaultValue, 'name', '')
              this.$set(defaultValue, 'treat_mode_id', 0)
              this.$set(defaultValue, 'treat_mode', '')

              this.$set(device, weekday + '_' + time_type, defaultValue)
            }
          }
          this.$set(device, 'total', 0) // 每个床位号每周的排班总数

          maked_device_numbers.push(device)
        }

        console.log(maked_device_numbers)
        return maked_device_numbers
      },
      spanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex == 0) {
          if (rowIndex == 0) {
            rowspanNoControl = -1
          }
          var spanRowCount = this.zone_device_counts[row.zone_id]
          var isFirstRowInGroup = false
          if (spanRowCount == undefined) {
            var count = 0
            for (let index = 0; index < this.opera_device_numbers.length; index++) {
              const number = this.opera_device_numbers[index]
              if (number.zone_id == row.zone_id) {
                count++
              }
            }
            this.zone_device_counts[row.zone_id] = count
            spanRowCount = count + 0
            isFirstRowInGroup = true
          } else {
            isFirstRowInGroup = rowIndex == rowspanNoControl + 1
            if (rowspanNoControl + spanRowCount == rowIndex) {
              rowspanNoControl = rowIndex
            }
          }

          if (isFirstRowInGroup) {
            return {
              rowspan: spanRowCount,
              colspan: 1
            }
          } else {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
      },
      search: function() {
        const params = {
          keywords: this.keywords,
          template_id: this.template.id
        }
        getTemplateScheduleSearchResult(params).then(response => {
          if (response.data.state == 1) {
            this.schedulePatients = response.data.data.schdules
            console.log(this.schedulePatients)
            this.searchTableVisible = true
          }
        })
      },
      itemClick: function(row, column, cell, event) {
        if (this.editable == false || this.is_editing == false) {
          return
        }

        if (column.property == undefined || /^[1-7]_[1-3]$/.test(column.property) == false) {
          return
        }
        if (row[column.property] == undefined) {
          return
        }

        var item = row[column.property]
        var weekday_timetype = column.property.split('_')
        var weekday = weekday_timetype[0]
        var time_type = weekday_timetype[1]
        var device_number_id = row.id
        if (item.pid == 0) {
          this.$refs.selector_dialog.show(weekday, time_type, device_number_id)
        } else {
          this.$refs.selector_dialog.showWith(item.pid, item.treat_mode_id, weekday, time_type, device_number_id)
        }
      },
      will_add_schedule_action: function(patient_id, treat_mode, weekday, time_type, device_number_id) {
        var patient = null
        for (let index = 0; index < this.patients.length; index++) {
          const p = this.patients[index]
          if (p.id == patient_id) {
            patient = p
            break
          }
        }
        if (patient == null) {
          this.$message.error('患者不存在')
          return
        }

        for (let index = 0; index < this.opera_device_numbers.length; index++) {
          const device_number = this.opera_device_numbers[index]
          for (let t_y = 1; t_y <= 3; t_y++) {
            if (t_y == time_type && device_number_id == device_number.id) {
              continue
            }
            if (device_number[weekday + '_' + t_y].pid == patient_id) {
              this.$message.error('同位患者一天内不可有两次排班')
              return
            }
          }
        }

        for (let index = 0; index < this.opera_device_numbers.length; index++) {
          const device_number = this.opera_device_numbers[index]
          if (device_number.id == device_number_id) {
            var isDiseaseSame = false
            var havePatientDisease = patient.contagions.length > 0
            if (patient.contagions.length > 0 || device_number.zone.type != 1) {
              if (device_number.zone.type != 1) {
                for (let c_i = 0; c_i < patient.contagions.length; c_i++) {
                  const contagion = patient.contagions[c_i]
                  if (contagion.disease_id == device_number.zone.type) {
                    isDiseaseSame = true
                  }
                }
              }
            } else {
              isDiseaseSame = true
            }
            if (isDiseaseSame == false) {
              // 此患者没有传染病，与此透析机不匹配，确定在此排班吗?
              // 此患者有传染病，与此透析机不匹配，确定在此排班吗?
              var msg = havePatientDisease ? '此患者有传染病，与此透析机不匹配，确定在此排班吗?' : '此患者没有传染病，与此透析机不匹配，确定在此排班吗?'
              this.$confirm(msg, '提示', { confirmButtonText: '确 定', cancelButtonText: '取 消', type: 'warning' })
                .then(() => {
                  this.add_schedule(patient, device_number, treat_mode, weekday, time_type)
                })
            } else {
              this.add_schedule(patient, device_number, treat_mode, weekday, time_type)
            }
            return
          }
        }

        this.$message.error('设备不存在')
      },
      cancel_schedule_action: function(weekday, time_type, device_number_id) {
        for (let index = 0; index < this.opera_device_numbers.length; index++) {
          const device_number = this.opera_device_numbers[index]
          if (device_number.id == device_number_id) {
            var item = device_number[weekday + '_' + time_type]
            item.pid = 0
            item.name = ''
            item.treat_mode_id = 0
            item.treat_mode = ''
            this.$refs.selector_dialog.hide()
          }
        }
      },
      cancel_schedule_action_two: function(row) {
        let params = {
          id: row.id
        }
        cancelScheduleTemplate(params).then(response => {
          if (response.data.state == 1) {
            for (let index = 0; index < this.schedulePatients.length; index++) {
              const sch = this.schedulePatients[index]
              if (sch.id == row.id) {
                this.schedulePatients.splice(index,1)
              }
            }

            for (let index = 0; index < this.opera_device_numbers.length; index++) {
              const device_number = this.opera_device_numbers[index]
              if (device_number.id == row.device_number_id) {
                var item = device_number[row.weekday + '_' + row.time_type]
                item.pid = 0
                item.name = ''
                item.treat_mode_id = 0
                item.treat_mode = ''
              }
            }

            // this.$emit('cancel_sch')

          }
        })

      },
      add_schedule: function(patient, device_number, treat_mode, weekday, time_type) {
        var item = device_number[weekday + '_' + time_type]
        var isNew = item.pid == 0

        item.pid = patient.id
        item.name = patient.name
        item.treat_mode_id = treat_mode
        item.treat_mode = this.treat_modes[treat_mode].name

        if (isNew) {
          device_number.total += 1
        }
        this.$refs.selector_dialog.hide()
      },
      saveAction: function() {
        this.saving = true

        var add_items = []
        var del_items = []
        var change_items = []
        var weekdays = [1, 2, 3, 4, 5, 6, 7] // 周一-周日
        var time_types = [1, 2, 3] // 上下晚
        for (let d_n_i = 0; d_n_i < this.opera_device_numbers.length; d_n_i++) {
          const op_d_n = this.opera_device_numbers[d_n_i]
          const or_d_n = this.origin_device_numbers[d_n_i]

          for (let w_i = 0; w_i < weekdays.length; w_i++) {
            const weekday = weekdays[w_i]
            for (let t_i = 0; t_i < time_types.length; t_i++) {
              const time_type = time_types[t_i]

              var item_key = weekday + '_' + time_type
              var op_item = op_d_n[item_key]
              var or_item = or_d_n[item_key]
              if (op_item.pid == 0 && or_item.pid == 0) {
                continue
              }
              if (op_item.pid == or_item.pid && op_item.treat_mode_id == or_item.treat_mode_id) {
                continue
              }
              if (op_item.pid == 0) {
                del_items.push({
                  device_number_id: op_d_n.id,
                  weekday: weekday,
                  time_type: time_type
                })
                continue
              } else if (or_item.pid == 0) {
                add_items.push({
                  device_number_id: op_d_n.id,
                  patient_id: op_item.pid,
                  mode: op_item.treat_mode_id,
                  weekday: weekday,
                  time_type: time_type
                })
                continue
              } else {
                if (op_item.pid != or_item.pid || op_item.treat_mode_id != or_item.treat_mode_id) {
                  change_items.push({
                    device_number_id: op_d_n.id,
                    patient_id: op_item.pid,
                    mode: op_item.treat_mode_id,
                    weekday: weekday,
                    time_type: time_type
                  })
                }
              }
            }
          }
        }

        updateSchedules(this.template.id, JSON.stringify(add_items), JSON.stringify(del_items), JSON.stringify(change_items)).then(rs => {
          var resp = rs.data
          if (resp.state == 1) {
            this.$message({
              message: '已保存',
              type: 'success'
            })
            this.template.items = resp.data.items
          } else {
            this.$message.error(resp.msg)
          }
          this.saving = false
          this.is_editing = false
        })
      }
    }
  }
</script>

<style scoped>
  .schedule-table-row {
    background: #fff !important;
  }

  .schedule-table-row:hover {
    background: #fff !important;
  }

  .schedule-table-row td:hover {
    background: rgb(88, 162, 236) !important;
  }

  .schedule-table-row td .cell {
    font-size: 12px;
    white-space: nowrap !important;
  }

  #table_data {
    min-height: calc(100vh - 350px);
  }

  #table_data ::-webkit-scrollbar {
    height: 15px;
  }
</style>