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

新增请假统计报表页面，包含趋势图、部门统计图、类型统计图和表格展示优化请假申请页面布局和字段展示添加多个图表组件用于数据可视化展示调整样式和表单验证规则
2026-01-19 13:28:45 +08:00
parent cd0f93f60f
commit f6000018d8
8 changed files with 493 additions and 17 deletions
--- a/klp-ui/src/views/wms/hrm/components/LeaveDeptChart.vue
+++ b/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>
--- a/klp-ui/src/views/wms/hrm/components/LeaveRecordTable.vue
+++ b/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>
--- a/klp-ui/src/views/wms/hrm/components/LeaveTrendChart.vue
+++ b/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>
--- a/klp-ui/src/views/wms/hrm/components/LeaveTypeChart.vue
+++ b/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>