feat(hrm): 新增请假统计报表功能及优化请假申请页面

新增请假统计报表页面，包含趋势图、部门统计图、类型统计图和表格展示
优化请假申请页面布局和字段展示
添加多个图表组件用于数据可视化展示
调整样式和表单验证规则

klp-ui/src/views/wms/hrm/components/LeaveDeptChart.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="dept-chart" ref="chartRef"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  name: 'LeaveDeptChart',
+  props: {
+    chartData: {
+      type: Object,
+      default: () => ({ xAxis: [], countData: [], dayData: [] })
+    }
+  },
+  watch: {
+    chartData: { deep: true, handler: 'initChart' }
+  },
+  mounted() { this.initChart(); window.addEventListener('resize', this.resizeChart); },
+  beforeDestroy() { window.removeEventListener('resize', this.resizeChart); this.chart?.dispose(); },
+  data() { return { chart: null }; },
+  methods: {
+    initChart() {
+      const dom = this.$refs.chartRef;
+      if (!dom) return;
+      this.chart = echarts.init(dom);
+      const option = {
+        title: { text: '按部门请假统计', left: 'center', textStyle: { fontSize: 14 } },
+        tooltip: { trigger: 'axis' },
+        legend: { data: ['请假记录数', '请假总天数'], top: 30 },
+        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+        xAxis: [{ type: 'category', data: this.chartData.xAxis }],
+        yAxis: [{ type: 'value' }],
+        series: [
+          { name: '请假记录数', type: 'bar', data: this.chartData.countData, barWidth: '30%' },
+          { name: '请假总天数', type: 'bar', data: this.chartData.dayData, barWidth: '30%' }
+        ]
+      };
+      this.chart.setOption(option);
+    },
+    resizeChart() { this.chart?.resize(); }
+  }
+};
+</script>
+
+<style scoped>
+.dept-chart { width: 100%; height: 100%; }
+</style>

klp-ui/src/views/wms/hrm/components/LeaveRecordTable.vue

@@ -0,0 +1,38 @@
+<template>
+  <el-table :data="tableData" :loading="loading" highlight-current-row border stripe style="width: 100%"
+    :row-key="'leaveId'" :tree-props="{ children: 'children' }" default-expand-all>
+    <el-table-column prop="userName" label="请假人" align="center" width="120" />
+    <el-table-column label="请假总次数" align="center" prop="leaveCount"></el-table-column>
+    <el-table-column label="请假总时长(天)" align="center" prop="leaveDays"></el-table-column>
+    <el-table-column prop="leaveType" label="请假类型" align="center" width="120" />
+    <el-table-column prop="leaveDays" label="请假时长(天)" align="center" width="120" />
+    <el-table-column prop="leaveReason" label="请假理由" align="center" show-overflow-tooltip />
+    <el-table-column prop="startTime" label="开始时间" align="center" show-overflow-tooltip />
+    <el-table-column prop="endTime" label="结束时间" align="center" show-overflow-tooltip />
+    <el-table-column prop="leaveShift" label="请假班次" align="center" show-overflow-tooltip />
+  </el-table>
+</template>
+
+<script>
+export default {
+  name: 'LeaveRecordTable',
+  props: {
+    tableData: {
+      type: Array,
+      default: () => [
+        { userName: '张三', leaveCount: 2, leaveDays: 3.5, children: [] },
+        { userName: '李四', leaveCount: 1, leaveDays: 1.5, children: [] },
+      ]
+    },
+    loading: { type: Boolean, default: false }
+  },
+};
+</script>
+
+<style scoped>
+/* ✅ 完全正确：Vue2的深度选择器就是 ::v-deep，不用改！ */
+::v-deep .el-table {
+  --el-table-header-text-color: #333;
+  --el-table-row-hover-bg-color: #fafafa;
+}
+</style>

klp-ui/src/views/wms/hrm/components/LeaveTrendChart.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="trend-chart" ref="chartRef"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  name: 'LeaveTrendChart',
+  props: {
+    chartData: {
+      type: Object,
+      default: () => ({ xAxis: [], countData: [], dayData: [] })
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler() {
+        this.initChart();
+      }
+    }
+  },
+  mounted() {
+    this.initChart();
+    window.addEventListener('resize', this.resizeChart);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeChart);
+    this.chart && this.chart.dispose();
+  },
+  data() {
+    return {
+      chart: null
+    };
+  },
+  methods: {
+    initChart() {
+      const dom = this.$refs.chartRef;
+      if (!dom) return;
+      this.chart = echarts.init(dom);
+      const option = {
+        title: { text: '按时间请假统计', left: 'center', textStyle: { fontSize: 14 } },
+        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+        legend: { data: ['请假记录数', '请假总天数'], top: 30 },
+        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+        xAxis: [{ type: 'category', data: this.chartData.xAxis }],
+        yAxis: [{ type: 'value' }],
+        series: [
+          { name: '请假记录数', type: 'line', data: this.chartData.countData, smooth: true },
+          { name: '请假总天数', type: 'line', data: this.chartData.dayData, smooth: true }
+        ]
+      };
+      this.chart.setOption(option);
+    },
+    resizeChart() {
+      this.chart && this.chart.resize();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.trend-chart {
+  width: 100%;
+  height: 100%;
+}
+</style>

klp-ui/src/views/wms/hrm/components/LeaveTypeChart.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="type-chart" ref="chartRef"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  name: 'LeaveTypeChart',
+  props: {
+    chartData: {
+      type: Object,
+      default: () => ({ countPie: [], dayPie: [] })
+    }
+  },
+  watch: {
+    chartData: { deep: true, handler: 'initChart' }
+  },
+  mounted() { this.initChart(); window.addEventListener('resize', this.resizeChart); },
+  beforeDestroy() { window.removeEventListener('resize', this.resizeChart); this.chart?.dispose(); },
+  data() { return { chart: null }; },
+  methods: {
+    initChart() {
+      const dom = this.$refs.chartRef;
+      if (!dom) return;
+      this.chart = echarts.init(dom);
+      const option = {
+        title: { text: '按请假类型统计', left: 'center', textStyle: { fontSize: 14 } },
+        tooltip: { trigger: 'item' },
+        legend: { top: 30 },
+        grid: { left: '0%', right: '0%', bottom: '0%', containLabel: true },
+        series: [
+          {
+            name: '请假记录数占比',
+            type: 'pie',
+            radius: ['20%', '40%'],
+            center: ['25%', '60%'],
+            data: this.chartData.countPie,
+            label: { show: true, fontSize: 12 }
+          },
+          {
+            name: '请假天数占比',
+            type: 'pie',
+            radius: ['20%', '40%'],
+            center: ['75%', '60%'],
+            data: this.chartData.dayPie,
+            label: { show: true, fontSize: 12 }
+          }
+        ]
+      };
+      this.chart.setOption(option);
+    },
+    resizeChart() { this.chart?.resize(); }
+  }
+};
+</script>
+
+<style scoped>
+.type-chart { width: 100%; height: 100%; }
+</style>

klp-ui/src/views/wms/hrm/leaveReport.vue

@@ -0,0 +1,256 @@
+<template>
+  <div class="leave-statistics-container">
+    <!-- 1. 时间筛选区域 -->
+    <div class="search-form">
+      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
+        <el-form-item label="请假时间">
+          <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始时间"
+            end-placeholder="结束时间" value-format="yyyy-MM-dd" style="width: 260px"></el-date-picker>
+        </el-form-item>
+        <el-form-item label="请假人">
+          <dict-select v-model="queryParams.applicantName" dict-type="hrm_leave_employee" placeholder="请选择请假人"
+            style="width: 260px" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
+          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+          <el-button icon="el-icon-download" type="warning" plain @click="handleExport">导出</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!-- 2. 图表展示区域 - 横向三个图表组件 -->
+    <div class="chart-box">
+      <div class="chart-item">
+        <leave-trend-chart :chart-data="trendChartData" />
+      </div>
+      <div class="chart-item">
+        <leave-dept-chart :chart-data="deptChartData" />
+      </div>
+      <div class="chart-item">
+        <leave-type-chart :chart-data="typeChartData" />
+      </div>
+    </div>
+
+    <!-- 3. 请假记录表格区域 - 封装的折叠表格组件 -->
+    <div class="table-box">
+      <leave-record-table :table-data="tableGroupData" :loading="loading" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { listLeaveRequest } from "@/api/wms/leaveRequest";
+// 引入4个封装的子组件
+import LeaveTrendChart from './components/LeaveTrendChart';
+import LeaveDeptChart from './components/LeaveDeptChart';
+import LeaveTypeChart from './components/LeaveTypeChart';
+import LeaveRecordTable from './components/LeaveRecordTable';
+import DictSelect from '@/components/DictSelect';
+
+export default {
+  name: 'LeaveStatistics',
+  components: {
+    LeaveTrendChart,
+    LeaveDeptChart,
+    LeaveTypeChart,
+    LeaveRecordTable,
+    DictSelect
+  },
+  data() {
+    return {
+      loading: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 9999, // 查全部数据用于图表统计
+        startTime: '',
+        endTime: '',
+      },
+      leaveIds: '', // 请假人ID列表
+      dateRange: [], // 时间筛选绑定值
+      leaveRequestList: [], // 原始请假数据列表
+      // 图表渲染数据
+      trendChartData: { xAxis: [], countData: [], dayData: [] }, // 折线图数据
+      deptChartData: { xAxis: [], countData: [], dayData: [] }, // 柱状图数据
+      typeChartData: { countPie: [], dayPie: [] }, // 饼图数据
+      tableGroupData: [] // 表格分组数据（按请假人聚合）
+    };
+  },
+  mounted() {
+    // 初始化默认时间：当月第一天 至 当前时间
+    this.initDefaultTime();
+    // 加载数据
+    this.getList();
+  },
+  methods: {
+    // 初始化默认时间 - 当月1号 00:00:00 至 当前时间 yyyy-MM-dd HH:mm:ss
+    initDefaultTime() {
+      const now = new Date();
+      // 当月第一天
+      const monthFirst = new Date(now.getFullYear(), now.getMonth(), 1);
+      const startTime = this.formatDateTime(monthFirst);
+      const endTime = this.formatDateTime(now);
+      this.dateRange = [startTime, endTime];
+      // this.queryParams.startTime = startTime;
+      // this.queryParams.endTime = endTime;
+    },
+
+    // 时间格式化：yyyy-MM-dd HH:mm:ss
+    formatDateTime(date) {
+      const y = date.getFullYear();
+      const m = (date.getMonth() + 1).toString().padStart(2, '0');
+      const d = date.getDate().toString().padStart(2, '0');
+      const h = date.getHours().toString().padStart(2, '0');
+      const mm = date.getMinutes().toString().padStart(2, '0');
+      const s = date.getSeconds().toString().padStart(2, '0');
+      return `${y}-${m}-${d}`;
+    },
+
+    // 查询按钮事件
+    handleQuery() {
+      if (this.dateRange && this.dateRange.length === 2) {
+        // this.queryParams.startTime = this.dateRange[0];
+        // this.queryParams.endTime = this.dateRange[1];
+      }
+      this.getList();
+    },
+
+    // 重置按钮事件
+    resetQuery() {
+      this.dateRange = [];
+      this.initDefaultTime();
+      this.getList();
+    },
+
+    // 调取接口获取数据
+    getList() {
+      this.loading = true;
+      listLeaveRequest(this.queryParams).then(res => {
+        this.leaveRequestList = res.rows || [];
+        // 提取所有请假人ID
+        this.leaveIds = this.leaveRequestList.map(item => item.leaveId).join(',');
+        // 核心：数据处理，为图表和表格格式化数据
+        this.formatAllData();
+        this.loading = false;
+      }).catch(() => {
+        this.loading = false;
+      });
+    },
+
+    handleExport() {
+      // 导出逻辑
+      if (!this.leaveIds) {
+        this.$message.warning('请先查询数据');
+        return;
+      }
+      this.download('/wms/leaveRequest/export', {
+        leaveIds: this.leaveIds
+      }, '请假记录.xlsx');
+    },
+
+    // 格式化所有图表+表格数据
+    formatAllData() {
+      const list = this.leaveRequestList;
+      // ========== 1. 处理【按时间汇总】折线图数据 ==========
+      const timeObj = {};
+      list.forEach(item => {
+        const day = item.startTime?.split(' ')[0]; // 按日期聚合
+        if (!day) return;
+        if (!timeObj[day]) {
+          timeObj[day] = { count: 0, days: 0 };
+        }
+        timeObj[day].count += 1; // 记录数+1
+        timeObj[day].days += Number(item.leaveDays) || 0; // 请假天数累加
+      });
+      this.trendChartData.xAxis = Object.keys(timeObj).sort(); // 日期排序
+      this.trendChartData.countData = this.trendChartData.xAxis.map(k => timeObj[k].count);
+      this.trendChartData.dayData = this.trendChartData.xAxis.map(k => timeObj[k].days);
+
+      // ========== 2. 处理【按部门汇总】柱状图数据 ==========
+      const deptObj = {};
+      list.forEach(item => {
+        const dept = item.applicantDeptName || '未知部门';
+        if (!deptObj[dept]) {
+          deptObj[dept] = { count: 0, days: 0 };
+        }
+        deptObj[dept].count += 1;
+        deptObj[dept].days += Number(item.leaveDays) || 0;
+      });
+      this.deptChartData.xAxis = Object.keys(deptObj);
+      this.deptChartData.countData = this.deptChartData.xAxis.map(k => deptObj[k].count);
+      this.deptChartData.dayData = this.deptChartData.xAxis.map(k => deptObj[k].days);
+
+      // ========== 3. 处理【按请假类型汇总】饼图数据 ==========
+      const typeObj = {};
+      list.forEach(item => {
+        const type = item.leaveType || '未知类型';
+        if (!typeObj[type]) {
+          typeObj[type] = { count: 0, days: 0 };
+        }
+        typeObj[type].count += 1;
+        typeObj[type].days += Number(item.leaveDays) || 0;
+      });
+      this.typeChartData.countPie = Object.keys(typeObj).map(k => ({ name: k, value: typeObj[k].count }));
+      this.typeChartData.dayPie = Object.keys(typeObj).map(k => ({ name: k, value: typeObj[k].days }));
+
+      console.log(this.tableGroupData, '按请假人分组表格数据');
+      // ========== 4. 处理【按请假人分组】表格折叠数据 ==========
+      const userObj = {};
+      list.forEach(item => {
+        const userName = item.applicantName || '未知人员';
+        if (!userObj[userName]) {
+          userObj[userName] = [];
+        }
+        userObj[userName].push({
+          ...item,
+          leaveTime: `${item.startTime} ~ ${item.endTime}`, // 拼接请假时间段
+          leaveDays: parseInt(item.leaveDays || 0) // 转换为整数
+        });
+      });
+      this.tableGroupData = Object.keys(userObj).map(user => ({
+        leaveId: user,
+        userName: user,
+        leaveCount: userObj[user].length || 0, // 请假次数
+        leaveDays: parseInt(userObj[user].reduce((sum, item) => sum + item.leaveDays, 0)), // 请假总时长（整数）
+        children: userObj[user] // 折叠子数据
+      }));
+      console.log(this.tableGroupData, '按请假人分组表格数据');
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.leave-statistics-container {
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.search-form {
+  margin-bottom: 20px;
+}
+
+.chart-box {
+  display: flex;
+  gap: 15px;
+  margin-bottom: 20px;
+  height: 320px;
+
+  .chart-item {
+    flex: 1;
+    border: 1px solid #ebeef5;
+    border-radius: 4px;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+}
+
+.table-box {
+  width: 100%;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 10px;
+  box-sizing: border-box;
+}
+</style>

klp-ui/src/views/wms/hrm/leaveRequest.vue

@@ -46,9 +46,7 @@
     </el-row>
 
     <el-table v-loading="loading" :data="leaveRequestList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="主键ID" align="center" prop="leaveId" v-if="false" />
-      <el-table-column label="请假原因" align="center" prop="leaveTitle" />
+      
       <el-table-column label="请假类型" align="center" prop="leaveType">
         <template slot-scope="scope">
           <dict-tag :options="dict.type.hrm_leave_type" :value="scope.row.leaveType" />
@@ -64,6 +62,7 @@
           <dict-tag :options="dict.type.hrm_department" :value="scope.row.applicantDeptName" />
         </template>
       </el-table-column>
+      <el-table-column label="请假标题" align="center" prop="leaveTitle" show-overflow-tooltip />
       <el-table-column label="开始时间" align="center" prop="startTime" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
@@ -79,6 +78,7 @@
           <dict-tag :options="dict.type.hrm_leave_shift" :value="scope.row.leaveShift" />
         </template>
       </el-table-column>
+      <el-table-column label="具体原因" align="center" prop="leaveReason" show-overflow-tooltip />
       <el-table-column label="请假天数" align="center" prop="leaveDays" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -94,9 +94,6 @@
     <!-- 添加或修改员工请假申请对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="请假原因" prop="leaveTitle">
-          <el-input v-model="form.leaveTitle" placeholder="请输入请假标题" />
-        </el-form-item>
         <el-form-item label="请假类型" prop="leaveType">
           <el-select v-model="form.leaveType" placeholder="请选择请假类型">
             <el-option v-for="dict in dict.type.hrm_leave_type" :key="dict.value" :label="dict.label"
@@ -128,9 +125,12 @@
         <el-form-item label="请假天数" prop="leaveDays">
           <el-input v-model="form.leaveDays" placeholder="选择时间后自动计算，也可手动修改" />
         </el-form-item>
-        <el-form-item label="具体原因" prop="leaveReason">
+        <el-form-item label="请假原因" prop="leaveReason">
           <el-input v-model="form.leaveReason" type="textarea" placeholder="请输入内容" />
         </el-form-item>
+        <!-- <el-form-item label="请假标题" prop="leaveTitle">
+          <el-input v-model="form.leaveTitle" placeholder="请输入请假标题" />
+        </el-form-item> -->
         <el-form-item label="附件" prop="attachmentUrls">
           <FileUpload v-model="form.attachmentUrls" :max-count="1" :show-file-list="true" />
         </el-form-item>
@@ -193,16 +193,16 @@ export default {
       form: {},
       // 表单校验规则【核心新增：完整必填校验】
       rules: {
-        leaveTitle: [ { required: true, message: '请假原因不能为空', trigger: ['blur', 'change'] } ],
-        leaveType: [ { required: true, message: '请假类型不能为空', trigger: 'change' } ],
-        applicantName: [ { required: true, message: '请假人姓名不能为空', trigger: 'change' } ],
-        startTime: [ { required: true, message: '开始时间不能为空', trigger: 'change' } ],
-        endTime: [ { required: true, message: '结束时间不能为空', trigger: 'change' } ],
-        leaveShift: [ { required: true, message: '请假班次不能为空', trigger: 'change' } ],
-        leaveDays: [ 
+        leaveTitle: [{ required: true, message: '请假原因不能为空', trigger: ['blur', 'change'] }],
+        leaveType: [{ required: true, message: '请假类型不能为空', trigger: 'change' }],
+        applicantName: [{ required: true, message: '请假人姓名不能为空', trigger: 'change' }],
+        startTime: [{ required: true, message: '开始时间不能为空', trigger: 'change' }],
+        endTime: [{ required: true, message: '结束时间不能为空', trigger: 'change' }],
+        leaveShift: [{ required: true, message: '请假班次不能为空', trigger: 'change' }],
+        leaveDays: [
           { required: true, message: '请假天数不能为空', trigger: ['blur', 'change'] },
         ],
-        leaveReason: [ 
+        leaveReason: [
           { required: true, message: '具体原因不能为空', trigger: ['blur', 'change'] },
         ]
       }
@@ -221,7 +221,7 @@ export default {
         this.calculateLeaveDays()
       },
       immediate: false
-    }
+    },
   },
   created() {
     this.getList();
@@ -300,6 +300,7 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
+      this.form.leaveTitle = `${this.form.applicantName}-${this.form.leaveType}-${this.form.startTime}-${this.form.leaveReason}`
       this.$refs["form"].validate(valid => {
         if (valid) {
           this.buttonLoading = true;

klp-ui/src/views/wms/hrm/mealReport.vue

@@ -80,6 +80,11 @@
         <template slot-scope="scope">
           <dict-tag :options="dict.type.hrm_leave_employee" :value="scope.row.reportUserName"/>
         </template>
+      </el-table-column>
+       <el-table-column label="报餐时间" align="center" prop="createTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+        </template>
       </el-table-column>
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">

klp-ui/src/views/wms/hrm/report.vue

@@ -387,7 +387,7 @@ export default {
   font-weight: 500;
   color: #666;
   background-color: #fff;
-  margin-bottom: 10px;
+  margin-top: 10px;
   text-align: center;
 }