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] instanceof Array)">
                <span v-if="row.attendance[item.date]['0'].sign_in_at">✔️</span>
                <span v-else-if="row.attendance[item.date]['qingxiujia'][0]">{{ row.attendance[item.date]['qingxiujia'][0].qingjialeibie }}</span>
                <span v-else-if="row.attendance[item.date]['chuchai'][0]">C</span>
                <span v-else>✘</span>
              </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] instanceof Array)">
                <span v-if="row.attendance[item.date]['0'].sign_out_at">✔️</span>
                <span v-else-if="row.attendance[item.date]['qingxiujia'][1]">{{ row.attendance[item.date]['qingxiujia'][1].qingjialeibie }}</span>
                <span v-else-if="row.attendance[item.date]['chuchai'][1]">C</span>
                <span v-else>✘</span>
              </div>
              <div v-else>
                ✘
              </div>
            </template>
          </vxe-column>
        </vxe-colgroup>
      </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: []
      }
    }
  },
  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)
      }
    }
  },
  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
    }
  },
  created() {
    this.getStatistics()
  },
  mounted() {
    this.bindToolbar()
  },
}
</script>

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