zjugis_OA/client/src/views/OaSystem/personnelManagement/ProjectStatistics/projectForm.vue

<template>
  <el-form :inline="true" class="searchBox">
    <el-form-item label="项目名称：" class="form project-name">
      <el-input v-model="queryParams.projectName" clearable />
    </el-form-item>
    <el-form-item label="人员：" class="form">
      <UserSelect
        ref="userSelectRef"
        construction="simple"
        :multiple="false"
        :onChange="onChangeUser"
      />
    </el-form-item>
    <el-form-item label="月份:" class="form">
      <el-date-picker
        v-model="queryParams.date"
        type="month"
        placeholder="请选择月份"
        :clearable="false"
      />
    </el-form-item>
    <el-form-item class="search-button">
      <el-button type="primary" :icon="Search" @click="onSearchHandle">查询</el-button>
      <ExportToExcel
        :data="exportData"
        :file-name="`${moment(queryParams.date).format('YYYY年M月')}项目工时统计.xlsx`"
        :colsWidth="colsWidth"
        :title="`${moment(queryParams.date).format('YYYY年M月')}-项目工时统计`"
      />
    </el-form-item>
  </el-form>
</template>
<script lang="ts" setup>
/**
 * @description 查询表单
 */

import { Search } from '@element-plus/icons-vue'
import moment from 'moment'
import request from '@/config/axios'
import UserSelect from '@/components/UserSelect/index.vue'
import ExportToExcel from '@/components/ExportToExcel/index.vue'
import PubsubService from '@/utils/PubsubService'

interface IQuery {
  projectName: string // 项目名称
  userId: string // 人员
  date: string // 日期
}
const queryParams = reactive<IQuery>({
  projectName: '',
  userId: '',
  date: moment().format('YYYY-MM')
})

// 查询
const onSearchHandle: () => void = () => {
  queryParams.date = moment(queryParams.date).format('YYYY-MM')
  const params = {
    year: moment(queryParams.date).format('YYYY'),
    month: moment(queryParams.date).format('M'),
    userId: queryParams.userId ?? '',
    projectName: queryParams.projectName ?? ''
  }

  // 发布查询事件
  PubsubService.publish('xmgstj-form-onSearch', params)
  // onSearch?.(queryParams)
  // 重置查询
  getAllData()
}

// 切换人员
const onChangeUser = (user) => {
  queryParams.userId = user
}

onMounted(() => {
  getAllData()
})

/* 导出 */

// 导出头部
const tableHead = [['人员', '项目名称', '项目编号', '项目工时(小时)']]
// const newTableHead = [['公司', '月份', '部门', '人员', '项目编号', '合同编码', '工时']]
// 列宽设置
const colsWidth = ref([{ wch: 8 }, { wch: 100 }, { wch: 18 }, { wch: 15 }])
const exportData = ref(tableHead)

// 获取所有统计数据
const getAllData = () => {
  // 发布获取所有统计数据事件
  PubsubService.publish('xmgstj-form-getAllData', {})
  request
    .get({
      url: '/adm/reportWorkloadStatistics/query-workload-statistics',
      params: {
        year: moment(queryParams.date).format('YYYY'),
        month: moment(queryParams.date).format('M'),
        userId: queryParams.userId ?? '',
        projectName: queryParams.projectName ?? '',
        isPage: false
      }
    })
    .then((res) => {
      getExportData(res)
    })
    .catch(() => {
      exportData.value = []
    })
}
// 整合导出表格数据
const getExportData = (data) => {
  const tableBody = data.map((item) => [
    item.nickName ?? '',
    item.xmmc ?? '',
    item.xmbh ?? '',
    item.workTime ?? ''
  ])
  exportData.value = [...tableHead, ...tableBody]
  // console.log('exportData.value', exportData.value)
}
</script>

<style scoped lang="scss">
.project-name {
  width: 400px !important;
}
.search-button {
  display: flex;
  margin: 5px 0;
  align-items: center;
  flex-shrink: 0;
}
</style>