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="请选择部门"
          />
        </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
          >
          <el-button type="primary">
            <img src="@/assets/imgs/OA/open.png" class="mr-8px" alt="" />
            导出</el-button
          >
          <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 class="spans" v-else-if="sco(scope.row, item, 1) == '2'"> 迟 </div>
                  <div class="spans" v-else-if="sco(scope.row, item, 1) == '3'"> 早 </div>
                  <div class="spans" v-else-if="sco(scope.row, item, 1) == '4'"> 旷 </div>
                  <div class="spans" v-else-if="sco(scope.row, item, 1) == '5'"> 差 </div>
                  <div class="spans" v-else-if="sco(scope.row, item, 1) == '11'"> 事 </div>
                  <div class="spans" v-else-if="sco(scope.row, item, 1) == '12'"> 病 </div>
                  <div class="spans" v-else-if="sco(scope.row, item, 1) == '13'"> 婚 </div>
                  <div class="spans" v-else-if="sco(scope.row, item, 1) == '14'"> 产 </div>
                  <div class="spans" v-else-if="sco(scope.row, item, 1) == '15'"> 陪 </div>
                  <div class="spans" v-else-if="sco(scope.row, item, 1) == '19'"> 丧 </div>
                  <div class="spans" v-else-if="sco(scope.row, item, 1) == '16'"> 伤 </div>
                  <div class="spans" v-else-if="sco(scope.row, item, 1) == '17'"> 年 </div>
                  <div class="spans" v-else-if="sco(scope.row, item, 1) == '18'"> 调 </div>
                  <div class="spans" v-else-if="sco(scope.row, item, 1) == '20'"> 他 </div>
                  <div class="spans" v-else>　</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 class="spans" v-else-if="sco(scope.row, item, 2) == '2'"> 迟 </div>
                  <div class="spans" v-else-if="sco(scope.row, item, 2) == '3'"> 早 </div>
                  <div class="spans" v-else-if="sco(scope.row, item, 2) == '4'"> 旷 </div>
                  <div class="spans" v-else-if="sco(scope.row, item, 2) == '5'"> 差 </div>
                  <div class="spans" v-else-if="sco(scope.row, item, 2) == '11'"> 事 </div>
                  <div class="spans" v-else-if="sco(scope.row, item, 2) == '12'"> 病 </div>
                  <div class="spans" v-else-if="sco(scope.row, item, 2) == '13'"> 婚 </div>
                  <div class="spans" v-else-if="sco(scope.row, item, 2) == '14'"> 产 </div>
                  <div class="spans" v-else-if="sco(scope.row, item, 2) == '15'"> 陪 </div>
                  <div class="spans" v-else-if="sco(scope.row, item, 2) == '19'"> 丧 </div>
                  <div class="spans" v-else-if="sco(scope.row, item, 2) == '16'"> 伤 </div>
                  <div class="spans" v-else-if="sco(scope.row, item, 2) == '17'"> 年 </div>
                  <div class="spans" v-else-if="sco(scope.row, item, 2) == '18'"> 调 </div>
                  <div class="spans" v-else-if="sco(scope.row, item, 2) == '20'"> 他 </div>
                  <div class="spans" v-else>　</div>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column prop="kg" width="40" label-class-name="labelModeRl">
          <template #header>
            <span>旷工</span>
            <span class="c-#989FA8 font-size-14px m-t-8px">天</span>
          </template>
        </el-table-column>
        <el-table-column prop="cd" width="40" label-class-name="labelModeRl">
          <template #header>
            <span>迟到</span>
            <span class="c-#989FA8 font-size-14px m-t-8px">次</span>
          </template>
        </el-table-column>
        <el-table-column prop="zt" width="40" label-class-name="labelModeRl">
          <template #header>
            <span>早退</span>
            <span class="c-#989FA8 font-size-14px m-t-8px">次</span>
          </template>
        </el-table-column>
        <el-table-column prop="cc" width="40" label-class-name="labelModeRl">
          <template #header>
            <span>出差</span>
            <span class="c-#989FA8 font-size-14px m-t-8px">天</span>
          </template>
        </el-table-column>
        <el-table-column prop="sj" width="40" label-class-name="labelModeRl">
          <template #header>
            <span>事假</span>
            <span class="c-#989FA8 font-size-14px m-t-8px">天</span>
          </template>
        </el-table-column>
        <el-table-column prop="tx" width="40" label-class-name="labelModeRl">
          <template #header>
            <span>调休</span>
            <span class="c-#989FA8 font-size-14px m-t-8px">天</span>
          </template>
        </el-table-column>
        <el-table-column prop="bj" width="40" label-class-name="labelModeRl">
          <template #header>
            <span>病假</span>
            <span class="c-#989FA8 font-size-14px m-t-8px">天</span>
          </template>
        </el-table-column>
        <el-table-column prop="nj" width="40" label-class-name="labelModeRl">
          <template #header>
            <span>年假</span>
            <span class="c-#989FA8 font-size-14px m-t-8px">天</span>
          </template>
        </el-table-column>
        <el-table-column prop="cj" width="40" label-class-name="labelModeRl">
          <template #header>
            <span>产假</span>
            <span class="c-#989FA8 font-size-14px m-t-8px">天</span>
          </template>
        </el-table-column>
        <el-table-column prop="qt" width="40" label-class-name="labelModeRl">
          <template #header>
            <span>其他</span>
            <span class="c-#989FA8 font-size-14px m-t-8px">天</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'
const porps = defineProps(['deptsName'])

const pagesList: any = ref({
  pageNo: 1,
  pageSize: 12,
  total: 0
})
const fromParams: any = ref({
  deptId: '0a168fe9-2ba8-4302-b6b6-a524c1aef967',
  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)
      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 == '公司') {
    return
  }
  depsDetailRef.value.initShow(row, item, index, fromParams.value.month)
}
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>