zjugis_OA/client/src/views/OaSystem/personnelManagement/weeklyStatistic/index.vue

<template>
  <div class="weeklyStatisticBox">
    <div class="title">部门周报统计</div>
    <div class="searchBox">
      <el-form :inline="true" class="demo-form-inline">
        <DeptAndUserSelect
          :defaultDept="getDefaultDept()"
          :isHideDept="true"
          :deptOnChange="deptOnChange"
          :userOnChange="userOnChange"
        />
        <!-- <el-form-item label="部门:">
          <DeptSelect :onChange="deptOnChange" :defaultValue="deptId ?? ''" />
        </el-form-item>
        <el-form-item label="人员:">
          <UserSelect :onChange="userOnChange" construction="tree" :defaultValue="userId ?? ''" />
        </el-form-item> -->
        <el-form-item label="月份:">
          <el-date-picker
            v-model="reportYearAndMonth"
            type="month"
            placeholder="请选择月份"
            :clearable="false"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="onSearchHandle">查询</el-button>
          <!-- <el-button type="primary" :icon="UploadFilled" @click="onExportHandle">导出</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <div class="tableBox">
      <el-table :data="dataSource" style="width: 100%" :height="calculateTableHeight(400)">
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column label="月份" width="100">
          <template #default="scope">
            <div>{{ getChineseMonth(scope.row.reportMonth) }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="deptName" label="部门" />
        <el-table-column prop="nickName" label="姓名" />
        <el-table-column prop="shouldFilledCount" label="应填（周）" />
        <el-table-column prop="notFilledCount" label="未填（周）" />
        <el-table-column prop="filledCount" label="已填（周）" />
        <el-table-column label="填写率">
          <template #default="scope">
            <div>{{ getPercent(scope.row.fillRate) }}%</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="jumpToMyLog(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pageBox">
      <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :total="pageTotal"
        layout="total, prev, pager, next, sizes, jumper"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import request from '@/config/axios'
import { Search } from '@element-plus/icons-vue'
import moment from 'moment'
import { getUserInfo, calculateTableHeight } from '@/utils/tool'
// import DeptSelect from '@/components/DeptSelect/index.vue'
// import UserSelect from '@/components/UserSelect/index.vue'
import DeptAndUserSelect from '@/components/DeptAndUserSelect/index.vue'

// 获取用户部门id
const getDefaultDept = () => {
  const userInfo = getUserInfo()
  return userInfo.deptId
}

// 条件查询
const onSearchHandle = (): void => {
  getWeeklyStatisticData()
}
const handleCurrentChange = (current): void => {
  pageNo.value = current
  getWeeklyStatisticData()
}
const handleSizeChange = (size): void => {
  pageSize.value = size
  getWeeklyStatisticData()
}

// 点击查看
const { push } = useRouter()
const jumpToMyLog = (row: any): void => {
  const { userId, nickName, reportYear, reportMonth } = row
  // 查看本月填报详情
  push(`/weeklyLogDetail?userId=${userId}&userName=${nickName}&date=${reportYear}-${reportMonth}`)
  // 查看本月填报列表
  // push(
  //   `/mySendLog?type=weekly&userId=${userId}&userName=${nickName}&date=${reportYear}-${reportMonth}`
  // )
}

const { currentRoute } = useRouter()

onMounted(() => {
  // 如果有传部门id
  const urlDeptId = currentRoute.value.query.deptId
  if (urlDeptId) {
    // console.log('urlDeptId', urlDeptId)
    deptId.value = urlDeptId
  }
  // 获取周报数据
  getWeeklyStatisticData()
})

// const userInfo = getUserInfo()
const reportYearAndMonth = ref(moment())
// const userId = ref(userInfo.id ?? '')
const userId = ref('')
// const deptId = ref(userInfo.deptId ?? '')
const deptId = ref(getDefaultDept())
const dataSource = ref('')
const pageSize = ref(20)
const pageNo = ref(1)
const pageTotal = ref(0)
// 获取周报统计数据
const getWeeklyStatisticData = async (): Promise<void> => {
  const params = {
    reportType: 'weekly',
    year: moment(reportYearAndMonth.value).format('YYYY'),
    month: moment(reportYearAndMonth.value).format('M'),
    deptId: deptId.value,
    userId: userId.value,
    pageSize: pageSize.value,
    pageNo: pageNo.value
  }
  const { list = [], total = 0 } = await request.get({
    url: '/adm/reportStatistics/query-report-statistics',
    params
  })
  dataSource.value = list
  pageTotal.value = total
}

// 部门切换时
const deptOnChange = (id) => {
  deptId.value = id
}

// 人员切换时
const userOnChange = (id) => {
  userId.value = id
}

// 获取中文月份
const monthList = [
  '一月',
  '二月',
  '三月',
  '四月',
  '五月',
  '六月',
  '七月',
  '八月',
  '九月',
  '十月',
  '十一月',
  '十二月'
]
const getChineseMonth = (month = 0) => {
  return monthList[month - 1]
}

// 获取百分比
const getPercent = (value = 0) => {
  return (value * 100).toFixed(1)
}
</script>

<style lang="scss" scoped>
.weeklyStatisticBox {
  margin-top: 20px;
  height: calc(100% - 20px);
  background-color: #fff;
  border-radius: 20px;
  padding: 20px;
  .title {
    height: 32px;
    font-weight: bold;
    font-size: 24px;
    color: #121518;
    margin-bottom: 20px;
  }
  .tableBox {
    height: auto;
  }
  :deep {
    .el-table th.el-table__cell {
      background-color: #edf2fc;
      color: #4c525b;
    }
  }
  .pageBox {
    padding: 20px;
    display: flex;
    justify-content: right;
  }
}
</style>