zjugis_OA/client/src/views/OaSystem/attendanceCenter/dep.vue

<template>
  <div class="attendanceCenterDep">
    <h1>考勤统计表</h1>
    <div class="depSearch">
      <div class="depSearchFlex">
        <div class="searBox">
          <span class="span">月份：</span>
          <el-date-picker v-model="fromParams.month" type="month" placeholder="请选择月份" />
        </div>
        <div class="searBox">
          <span class="span">部门：</span>
          <el-tree-select
            v-model="fromParams.deptId"
            :data="deptList"
            :props="defaultProps"
            check-strictly
            default-expand-all
            node-key="id"
            placeholder="请选择部门"
            :disabled="porps.deptsName !== '公司'"
          />
        </div>
        <div class="searBox">
          <span class="span">人员：</span>
          <el-input v-model="fromParams.userName" placeholder="请输入人员名称" />
        </div>
        <div class="searBtns">
          <el-button @click="querysClick" type="primary" style="background: #3485ff">
            <img src="@/assets/imgs/OA/search.png" class="mr-8px" alt="" />
            查询</el-button
          >
          <ExportToExcel
            v-if="porps.deptsName == '公司'"
            :data="excelDataSource"
            :file-name="`${moment(fromParams.month).format('YYYY-MM')}考勤统计.xlsx`"
            :mergeRanges="mergeRanges"
            :colsWidth="colsWidth"
          />
          <el-button type="success" style="background-color: #05ce9e" v-if="false">
            <img src="@/assets/imgs/OA/kq/kqqrIcon.png" class="mr-8px" alt="" />
            考勤确认</el-button
          >
        </div>
      </div>

      <el-popover :width="50">
        <template #reference>
          <div class="depStateBox">
            <p>?</p>
          </div>
        </template>
        <template #default>
          <div class="depStateContent">
            <ul class="">
              <li class="flex" v-for="(l, i) in depStateContentList" :key="i">
                <div v-if="i == 0" class="flex">
                  <img src="@/assets/imgs/OA/kq/gouzi.png" alt="" />：
                  <p>{{ l.name }}</p>
                </div>
                <div v-else class="flex">
                  <h4>{{ l.deps }}：</h4>
                  <p>{{ l.name }}</p>
                </div>
              </li>
            </ul>
          </div>
        </template>
      </el-popover>
    </div>
    <div class="depTable">
      <el-table
        v-loading="tableLoading"
        :data="
          tableData.slice(
            (pagesList.pageNo - 1) * pagesList.pageSize,
            pagesList.pageSize * pagesList.pageNo
          )
        "
        style="width: 100%; height: 100%"
        stripe
      >
        <!-- <el-table-column type="index" width="50" /> -->
        <el-table-column prop="deptName" label="部门" />
        <el-table-column prop="nickName" label="姓名" width="80" />
        <el-table-column
          v-for="(item, index) in tableHeadList"
          :key="index"
          :label="item.dayOfWeek"
          width="30"
          :label-class-name="item.isworkday == 1 ? '' : 'workday'"
        >
          <el-table-column
            :label-class-name="item.isworkday == 1 ? '' : 'workday'"
            :label="item.day"
            width="30"
          >
            <template #default="scope">
              <div class="iconsFlex" v-if="item.isworkday == 1">
                <div class="sw" @click="swStateClick(scope.row, item, 1)">
                  <img
                    v-if="sco(scope.row, item, 1) == '1'"
                    src="@/assets/imgs/OA/kq/gouzi.png"
                    alt=""
                  />
                  <div v-else class="spans">
                    {{ attendanceTypeObj[sco(scope.row, item, 1)] ?? '' }}
                  </div>
                </div>
                <div class="xw" @click="swStateClick(scope.row, item, 2)">
                  <img
                    v-if="sco(scope.row, item, 2) == '1'"
                    src="@/assets/imgs/OA/kq/gouzi.png"
                    alt=""
                  />
                  <div v-else class="spans">
                    {{ attendanceTypeObj[sco(scope.row, item, 1)] ?? '' }}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          v-for="(item, index) in columList"
          :prop="item.prop"
          width="40"
          label-class-name="labelModeRl"
          :key="index"
        >
          <template #header>
            <span>{{ item.text }}</span>
            <span class="m-t-8px font-size-14px c-#989FA8">{{ item.unit }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="depPages">
      <el-pagination
        :current-page="pagesList.pageNo"
        :page-size="pagesList.pageSize"
        background
        layout="total, prev, pager, next, jumper"
        :total="pagesList.total"
        @current-change="handleCurrentChange"
      />
    </div>

    <DepsUpdataDetail ref="depsDetailRef" @updataInit="updataInit" />
  </div>
</template>
<script setup lang="ts">
defineOptions({ name: 'AttendanceDep' })
import * as DeptApi from '@/api/system/dept'
import DepsUpdataDetail from './components/depsUpdataDetail.vue'
import { defaultProps, handleTree } from '@/utils/tree'
import * as MineApi from '@/api/oa/attendanceCenter'
import { arrFlatten, depSort, isArrayDelOrNickname, allDeptsArr, dayOfWeekCall } from './attendAuth'
import moment from 'moment'
import { depsState } from './depsState'
import ExportToExcel from '@/components/ExportToExcel/index.vue'
import { getUserInfo } from '@/utils/tool'
const userInfo = getUserInfo()

const porps = defineProps(['deptsName'])

const pagesList: any = ref({
  pageNo: 1,
  pageSize: 12,
  total: 0
})
const fromParams: any = ref({
  deptId: userInfo.deptId ?? '',
  month: '',
  userName: ''
})

if (porps.deptsName == '公司') {
  fromParams.value.deptId = '4e99393c-c0ea-4146-a7fb-56fb8019c477'
}
const deptSort: any = ref([])
const deptList = ref<Tree[]>([]) // 树形结构
const tableData = ref([])
const initTreeDeps = async () => {
  DeptApi.getSimpleDeptList().then((res) => {
    deptList.value = handleTree(res)
    deptSort.value = arrFlatten(res, 'children')
  })
}
const depStateContentList = ref()
depStateContentList.value = depsState
const handleCurrentChange = async (page) => {
  pagesList.value.pageNo = page
  let toMoseMonths: any = []
  toMoseMonths[0] = moment().startOf('months').format('YYYY-MM-DD') + ' 00:00:00'
  toMoseMonths[1] = moment().endOf('months').format('YYYY-MM-DD') + ' 23:59:59'
  // initInsMouth(toMoseMonths)
}
const querysClick = async () => {
  // initInsMouth()
  pagesList.value.pageNo = 1
  let month = fromParams.value.month
  let toMoseMonths: any = []
  toMoseMonths[0] = moment(month).startOf('months').format('YYYY-MM-DD') + ' 00:00:00'
  toMoseMonths[1] = moment(month).endOf('months').format('YYYY-MM-DD') + ' 23:59:59'
  initInsMouth(toMoseMonths)
}

const tableLoading = ref(true)
const updataInit = (date) => {
  initInsMouth(date)
}

const initInsMouth = async (date: any) => {
  tableLoading.value = true
  let params = {
    attendanceDate: date, //	考勤时间
    attendanceStatus: '', //	考勤状态,示例值(2)
    attendanceType: '', //	考勤类型(1:上午;2:下午),示例值(1)
    otherMinute: '', //	其他考勤状态分钟(除了出勤)
    nickname: fromParams.value.userName, //用户昵称
    deptId: fromParams.value.deptId //部门ID
  }
  initWorkDay(date).then((restall) => {
    MineApi.getWorkdaySheetList(params).then((res) => {
      let namesArr: any = isArrayDelOrNickname(JSON.parse(JSON.stringify(res)))
      let resArr: any = res
      resArr.forEach((item: any) => {
        if (item.attendanceTime) {
          item.date = moment(item.attendanceTime).format('YYYY-MM-DD')
        } else {
          item.date = moment(item.attendanceDate).format('YYYY-MM-DD')
        }
      })
      let arr = allDeptsArr(restall, resArr, namesArr)
      let sbArr = depSort(deptSort.value, arr)

      // 导出数据
      excelDataSource.value = getExcelTable(sbArr)

      tableData.value = sbArr
      pagesList.value.total = arr.length
      tableLoading.value = false
    })
  })
}
const sco = (row, item, index) => {
  let kq = ''
  if (index == 1) {
    row.attendArray.forEach((k) => {
      if (k.date == item.date) {
        if (k.swAttendanceStatus) {
          kq = k.swAttendanceStatus
        }
      }
    })
  } else {
    row.attendArray.forEach((k) => {
      if (k.date == item.date) {
        if (k.xwAttendanceStatus) {
          kq = k.xwAttendanceStatus
        }
      }
    })
  }
  return kq
}
const tableHeadList: any = ref([])
const initWorkDay = async (date: any) => {
  let params = {
    dateDay: date, //		日期（数组）
    dayOfWeek: '', //			星期几
    holidayRemark: '', //			节假备注,示例值(国庆节)
    isworkday: '', //		是否工作日
    year: '', //		年份
    month: '', //		月份
    week: '' //		周
  }
  const res = await MineApi.getWorkdayList(params)
  let arr = res
  arr.forEach((item: any) => {
    item.date = moment(item.dateDay).format('YYYY-MM-DD')
    item.prop = item.dayOfWeek
    item.dayOfWeek = dayOfWeekCall(item.dayOfWeek)
    item.day = moment(item.dateDay).format('DD')
  })
  tableHeadList.value = arr
  return await arr
}
const depsDetailRef = ref()
const swStateClick = (row, item, index) => {
  //更改考勤
  if (porps.deptsName == '公司') {
    depsDetailRef.value.initShow(row, item, index, fromParams.value.month)
    return
  }
}
// 考勤对应的字典
const attendanceTypeObj = {
  1: '√', // 出勤
  2: '迟', // '迟到'
  3: '早', // '早退'
  4: '旷', // '旷工'
  5: '差', // '出差'
  11: '事', // '事假'
  12: '病', // '病假'
  13: '婚', // '婚假'
  14: '产', // '产假'
  15: '陪', // '陪产假'
  19: '丧', // '丧假'
  16: '伤', // '工伤'
  17: '年', // '年假'
  18: '调', // '调休'
  20: '假' // '其他'
}
// 考勤统计
const columList = [
  { text: '旷 工', prop: 'kg', unit: '天' },
  { text: '迟 到', prop: 'cd', unit: '次' },
  { text: '早 退', prop: 'zt', unit: '次' },
  { text: '出 差', prop: 'cc', unit: '天' },
  { text: '事 假', prop: 'sj', unit: '天' },
  { text: '调 休', prop: 'tx', unit: '天' },
  { text: '病 假', prop: 'bj', unit: '天' },
  { text: '年 假', prop: 'nj', unit: '天' },
  { text: '产 假', prop: 'cj', unit: '天' },
  { text: '其 他', prop: 'qt', unit: '天' }
]

// 考勤表格
const excelDataSource = ref<any>()
// 合并的单元格
const mergeRanges = [
  { s: { r: 0, c: 0 }, e: { r: 1, c: 0 } }, // 合并第一行的前两列
  { s: { r: 0, c: 1 }, e: { r: 1, c: 1 } } // 合并第二行的前两列
]
// 列宽设置
const colsWidth = [{ wch: 30 }, { wch: 10 }]
// 获取导出的数据表格
const getExcelTable = (attendanceData) => {
  const tableHead = [
    [
      '部门',
      '姓名',
      ...tableHeadList.value.map((item) => item.day),
      '旷工(天)',
      '迟到(次)',
      '早退(次)',
      '出差(天)',
      '事假(天)',
      '调休(天)',
      '病假(天)',
      '年假(天)',
      '产假(天)',
      '其他(天)'
    ],
    [
      '',
      '',
      ...tableHeadList.value.map((item) => item.dayOfWeek),
      '',
      '',
      '',
      '',
      '',
      '',
      '',
      '',
      '',
      ''
    ]
  ]
  const tableBody = attendanceData.map((item) => {
    const data = item.attendArray.map((arr, i) => {
      // 判断是不是工作日
      const isworkday = tableHeadList.value[i].isworkday
      if (!isworkday) return ''
      // 判断有没有数据
      if (!arr.swAttendanceStatus) return ''
      return `${attendanceTypeObj[arr.swAttendanceStatus] ?? ''} / ${
        attendanceTypeObj[arr.xwAttendanceStatus] ?? ''
      }`
    })
    return [
      item.deptName,
      item.nickName,
      ...data,
      item.kg,
      item.cd,
      item.zt,
      item.cc,
      item.sj,
      item.tx,
      item.bj,
      item.nj,
      item.cj,
      item.qt
    ]
  })

  return [...tableHead, ...tableBody]
}

onMounted(() => {
  let toMonth = moment().format('YYYY-MM')
  fromParams.value.month = toMonth
  // 加载部门树
  initTreeDeps()
  let toMoseMonths: any = []
  toMoseMonths[0] = moment().startOf('months').format('YYYY-MM-DD') + ' 00:00:00'
  toMoseMonths[1] = moment().endOf('months').format('YYYY-MM-DD') + ' 23:59:59'
  initInsMouth(toMoseMonths)
})
</script>
<style lang="scss" scoped>
.attendanceCenterDep {
  position: relative;
  width: 100%;
  height: calc(100% - 15px);
  padding: 15px 30px;
  margin-top: 15px;
  background: #fff;
  border-radius: 10px;

  h1 {
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 600;
    color: #121518;
  }

  .depSearch {
    display: flex;
    width: 100%;
    margin-bottom: 20px;
    align-items: center;
    justify-content: space-between;

    .depSearchFlex {
      display: flex;
      align-items: center;

      .searBox {
        display: flex;
        align-items: center;
        margin-right: 25px;

        .span {
          font-size: 16px;
          white-space: nowrap;
        }
      }
    }

    .depStateBox {
      display: flex;
      width: 30px;
      height: 30px;
      cursor: pointer;
      border: 2px solid #e1e4ea;
      border-radius: 50%;
      align-items: center;
      justify-content: center;

      p {
        font-size: 16px;
        font-weight: 600;
        color: #e1e4ea;
      }
    }
  }

  .depTable {
    width: 100%;
    height: calc(100% - 140px);
  }

  .depPages {
    position: absolute;
    right: 30px;
    bottom: 10px;
  }
}

:deep(.depTable) {
  .el-table {
    .workDayClass {
      color: pink;
    }

    .is-group {
      height: 80px;

      tr {
        background-color: #e5f0fb;

        th {
          font-weight: 500;
          color: #233755;
          background-color: #e5f0fb;
          border-color: #fff;
        }
      }
    }

    .cell {
      width: 100%;
      height: 100%;
      padding: 0 !important;
      font-size: 16px !important;
      text-align: center;
    }

    .el-table__cell {
      // padding: 0;
    }

    .el-table__body-wrapper {
      tr {
        td {
          border: 0;
        }
      }

      .el-table__row--striped {
        td {
          background-color: #f7f7f7;
        }
      }
    }

    .iconsFlex {
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      flex-wrap: wrap;

      .spans {
        width: 100%;
        height: 100%;
        font-size: 14px !important;
        font-weight: 800;
        color: #f23c3c;
        cursor: pointer;
        user-select: none;
      }

      .sw {
        display: flex;
        width: 100%;
        height: 50%;
        user-select: none;
        align-items: center;
        justify-content: center;
      }

      .sw:hover {
        .spans {
          color: #989fa8;
        }
      }

      .xw:hover {
        .spans {
          color: #989fa8;
        }
      }

      .xw {
        display: flex;
        width: 100%;
        height: 50%;
        user-select: none;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .labelModeRl {
    writing-mode: vertical-rl;
  }
}

:deep(.workday) {
  color: #989fa8 !important;
}
</style>