cz-hjjc-oa/src/views/attendance/statistics.vue

<template>
  <div>
    <card-container>
      <vxe-toolbar export print ref="toolbar">
        <template #buttons>
          <el-date-picker v-model="select.month" type="month" size="small" value-format="yyyy-MM"></el-date-picker>
          <el-button icon="el-icon-search" type="primary" plain size="small" style="margin-left: 6px;" @click="getStatistics">搜索</el-button>
        </template>
      </vxe-toolbar>
      <vxe-table
        ref="table"
        stripe
        style="margin-top: 10px;"
        round
        :max-height="600"
        keep-source
        show-header-overflow
        show-footer-overflow
        show-overflow
        :row-config="{ isHover: true }"
        :header-cell-style="{ 'white-space': 'wrap' }"
        :print-config="{}"
        :export-config="{}"
        :column-config="{ resizable: true }"
        :data="tableData.admins">
        <vxe-column type="seq" width="50" align="center" fixed="left"></vxe-column>
        <vxe-column field="name" title="姓名" fixed="left" align="center" width="120"></vxe-column>
        <vxe-column field="department.name" title="所在部门" align="center" width="150"></vxe-column>
        <vxe-colgroup v-for="item in dateTableColumns" align="center" :title="item.title">
          <vxe-column title="上午" width="160" align="center">
            <template #default="{ row }">
              <div v-if="row.attendance[item.date]['qingxiujia'] && row.attendance[item.date]['qingxiujia'][0]">
                {{ row.attendance[item.date]['qingxiujia'][0].qingjialeibie }}
              </div>
              <div v-else-if="row.attendance[item.date]['chuchai'] && row.attendance[item.date]['chuchai'][0]">
                出差
              </div>

              <div v-else-if="(row.attendance[item.date].hasOwnProperty('0')) && row.attendance[item.date]['0'].sign_in_at">
                ✔️
              </div>
              <div v-else>
                ✘
              </div>
            </template>
          </vxe-column>
          <vxe-column title="下午" width="160" align="center">
            <template #default="{ row }">
              <div v-if="row.attendance[item.date]['qingxiujia'] && row.attendance[item.date]['qingxiujia'][1]">
                {{ row.attendance[item.date]['qingxiujia'][1].qingjialeibie }}
              </div>
              <div v-else-if="row.attendance[item.date]['chuchai'] && row.attendance[item.date]['chuchai'][1]">
                出差
              </div>

              <div v-else-if="(row.attendance[item.date].hasOwnProperty('0')) && row.attendance[item.date]['0'].sign_out_at">
                ✔️
              </div>
              <div v-else>
                ✘
              </div>
            </template>
          </vxe-column>
        </vxe-colgroup>
        <vxe-column title="备注" min-width="200" header-align="center" align="left">
          <template #default="{ row }">
            <span>{{ getRemark(row) }}</span>
          </template>
        </vxe-column>
      </vxe-table>
    </card-container>
  </div>
</template>

<script>
import { throttle } from '@/utils'
import { statistics } from '@/api/attendance'
export default {
  data() {
    return {
      select: {
        month: this.$moment().format('YYYY-MM')
      },
      tableData: {
        admins: [],
        dates: [],
        leave_types: []
      }
    }
  },
  methods: {
    bindToolbar: throttle(function () {
      this.$nextTick(() => {
        if (this.$refs["table"] && this.$refs["toolbar"]) {
          this.$refs["table"].connect(this.$refs["toolbar"]);
        }
      });
    }, 1000, true),
    async getStatistics() {
      try {
        const res = await statistics(this.select)
        this.tableData = res
      } catch (err) {
        console.error(err)
      }
    },

    getRemark(row) {
      let result = ''
      let overtimeDay = 0
      let leave = new Map(this.tableData.leave_types.map(i => [i, 0]))
      let signDay = Object.entries(row.attendance).reduce((pre, [key, value]) => {
        if (value['qingxiujia'][0]) {
          console.log(value['qingxiujia'][0])
          leave.set(value['qingxiujia'][0]['qingjialeibie'], Number(leave.get(value['qingxiujia'][0]['qingjialeibie']) ?? 0) + Number(value['qingxiujia'][0]['day'] ?? 0))
        }
        if (value['qingxiujia'][1]) {
          leave.set(value['qingxiujia'][1]['qingjialeibie'], Number(leave.get(value['qingxiujia'][1]['qingjialeibie']) ?? 0) + Number(value['qingxiujia'][1]['day'] ?? 0))
        }
        return pre + (!value.hasOwnProperty('0') ? 0 : (
          this.workDates.indexOf(key) !== -1 ? (
            (() => {
              let temp = 0
              temp += value['0'].sign_in_at ? 0.5 : 0
              temp += value['0'].sign_out_at ? 0.5 : 0
              return temp
            })()
          ) : ((
            (() => {
              overtimeDay += value['0'].sign_in_at ? 0.5 : 0
              overtimeDay += value['0'].sign_out_at ? 0.5 : 0
              return 0
            })()
          )??0)
        ))
      }, 0)
      result += signDay === this.workDates.length ? '全勤' : `缺勤${this.workDates.length-signDay}天`
      result += overtimeDay ? `,加班${overtimeDay}天` : ''
      Array.from(leave).forEach(([name, day]) => {
        if (day) {
          result += `,${name}${day}天`
        }
      })
      return result
    }
  },
  computed: {
    dateTableColumns() {
      let columns = this.tableData.dates.map(i => ({
        title: `${this.$moment(i.day).format('YYYY年MM月DD日')} ${i.is_workday ? '工作日' : '公休'}`,
        field: i.day,
        date: i.date
      }))
      return columns
    },
    workDates() {
      return this.tableData.dates.filter(i => i.is_workday).map(i => i.date)
    }
  },
  created() {
    this.getStatistics()
  },
  mounted() {
    this.bindToolbar()
  },
}
</script>

<style scoped lang="scss">
</style>