feat(warningManage): 新增员工维度评分明细页面

- 添加员工维度评分明细API接口封装
- 实现时间范围快速选择及自定义日期控件
- 支持组织架构/员工及维度筛选功能
- 展示分页表格，包含员工基本信息及维度分数
- 实现分页切换与页面大小调整功能
- 加载并转换组织架构树结构数据用于筛选
- 根据路由参数动态设置筛选条件与数据加载
- 增加页面布局和样式，提升用户体验

src/api/warningManage/employeeDimensionDetails.js

@@ -0,0 +1,6 @@
+import request from '@/utils/request'
+
+// 员工维度评分明细
+export function getEmployeeDimensionPageData(data) {
+    return request({ url: '/ledger/warning/employeeDimensionDetail', method: 'post', data })
+}

src/views/warningManage/employeeDimensionDetails/index.vue

@@ -0,0 +1,344 @@
+<template>
+    <div class="page-container">
+        <h1 class="page-title">员工维度评分明细</h1>
+
+        <div class="filter-bar">
+            <div class="filter-left">
+                <button class="time-btn" :class="{ active: activeRange === 'week' }"
+                    @click="setActiveRange('week')">近一周</button>
+                <button class="time-btn" :class="{ active: activeRange === 'month' }"
+                    @click="setActiveRange('month')">近一月</button>
+                <button class="time-btn" :class="{ active: activeRange === 'quarter' }"
+                    @click="setActiveRange('quarter')">近三月</button>
+                <button class="time-btn" :class="{ active: activeRange === 'year' }"
+                    @click="setActiveRange('year')">近一年</button>
+                <el-date-picker v-model="startDate" type="date" placeholder="开始日期" style="width: 150px;" />
+                <span style="margin: 0 8px;">至</span>
+                <el-date-picker v-model="endDate" type="date" placeholder="结束日期" style="width: 150px;" />
+                <el-tree-select v-model="selectedOrg" :data="cascadeOptions"
+                    :props="{ label: 'label', value: 'value', children: 'children' }" node-key="value"
+                    placeholder="组织架构/员工" clearable filterable check-strictly style="width: 200px;" />
+                <el-select v-model="selectedDimension" placeholder="维度" clearable style="width: 150px;">
+                    <el-option v-for="item in dimensionOptions" :key="item.value" :label="item.label"
+                        :value="item.value" />
+                </el-select>
+            </div>
+            <div class="filter-right">
+                <el-button type="primary" @click="handleSearch">搜索</el-button>
+                <el-button @click="handleReset">重置</el-button>
+            </div>
+        </div>
+
+        <div class="table-section">
+            <div class="section-title">
+                <span class="title-text">员工维度评分明细</span>
+                <span class="title-badge">评分依据: 员工配分表</span>
+            </div>
+            <el-table :data="tableData" style="width: 100%;" border stripe>
+                <el-table-column prop="userId" label="员工ID" />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="deptName" label="部门" />
+                <el-table-column prop="teamName" label="班组" />
+                <el-table-column prop="groupName" label="小组" />
+                <el-table-column prop="dimName" label="维度名称" />
+                <el-table-column prop="dimScore" label="维度分值" />
+            </el-table>
+            <el-pagination v-show="total > 0" :total="total" v-model:current-page="queryParams.pageNum"
+                v-model:page-size="queryParams.pageSize" :page-sizes="[10, 20, 50, 100]"
+                layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+                @current-change="handlePageChange" style="margin-top: 16px; justify-content: flex-end;" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { getDeptUserTree } from '@/api/item/items'
+import { getEmployeeDimensionPageData } from '@/api/warningManage/employeeDimensionDetails'
+
+const route = useRoute()
+
+const activeRange = ref('month')
+const startDate = ref(null)
+const endDate = ref(null)
+const selectedOrg = ref('')
+const selectedDimension = ref('')
+const cascadeOptions = ref([])
+
+const dimensionOptions = ref([
+    { label: '安全响应能力', value: '安全响应能力' },
+    { label: '服务响应能力', value: '服务响应能力' }
+])
+
+const tableData = ref([
+    { userId: 397, nickName: '胡婷婷', deptName: '旅检一部', teamName: '安平班组', groupName: '陈行小组', dimName: '安全响应能力', dimScore: 80.5 },
+    { userId: 437, nickName: '李璐', deptName: '旅检一部', teamName: '安平班组', groupName: '陈行小组', dimName: '服务响应能力', dimScore: 79.2 },
+    { userId: 564, nickName: '徐倩', deptName: '旅检一部', teamName: '安平班组', groupName: '陈行小组', dimName: '安全响应能力', dimScore: 81.3 },
+    { userId: 587, nickName: '余杭洋', deptName: '旅检一部', teamName: '安平班组', groupName: '陈行小组', dimName: '服务响应能力', dimScore: 78.6 },
+    { userId: 550, nickName: '肖垚', deptName: '旅检一部', teamName: '安平班组', groupName: '陈行小组', dimName: '安全响应能力', dimScore: 80.1 },
+    { userId: 107, nickName: '刘珊', deptName: '旅检三部', teamName: '安平班组', groupName: '陈行小组', dimName: '服务响应能力', dimScore: 79.8 },
+    { userId: 191, nickName: '王佐朝', deptName: '旅检三部', teamName: '安平班组', groupName: '陈行小组', dimName: '安全响应能力', dimScore: 82.0 },
+    { userId: 250, nickName: '张元媛', deptName: '旅检三部', teamName: '安平班组', groupName: '陈行小组', dimName: '服务响应能力', dimScore: 78.9 },
+    { userId: 293, nickName: '陈凯琳', deptName: '旅检三部', teamName: '安平班组', groupName: '陈行小组', dimName: '安全响应能力', dimScore: 80.7 },
+    { userId: 603, nickName: '张霞', deptName: '旅检一部', teamName: '安平班组', groupName: '陈行小组', dimName: '服务响应能力', dimScore: 79.5 }
+])
+const total = ref(972)
+const queryParams = reactive({
+    pageNum: 1,
+    pageSize: 10
+})
+
+const transformCascadeData = (nodes) => {
+    if (!nodes) return []
+    return nodes.map(node => {
+        const deptType = node.deptType || node.nodeType
+        const label = deptType === 'user'
+            ? (node.nickName || node.label)
+            : (node.deptName || node.name || node.label)
+
+        let value;
+        if (deptType === 'STATION') value = `station_${node.id}`;
+        else if (deptType === 'BRIGADE') value = `dept_${node.id}`
+        else if (deptType === 'MANAGER') value = `team_${node.id}`
+        else if (deptType === 'TEAMS') value = `group_${node.id}`
+        else value = `user_${node.id}`
+
+        const children = node.children && node.children.length > 0 ? transformCascadeData(node.children) : undefined
+
+        return { label, value, deptType, children }
+    })
+}
+
+const getSelectedInfo = (selectedValue) => {
+    if (!selectedValue) return null
+    const findNodeByValue = (nodes, value) => {
+        for (const node of nodes) {
+            if (node.value === value) return node
+            if (node.children) {
+                const found = findNodeByValue(node.children, value)
+                if (found) return found
+            }
+        }
+        return null
+    }
+    return findNodeByValue(cascadeOptions.value, selectedValue)
+}
+
+const formatDate = (d) => {
+    if (!d) return ''
+    const date = new Date(d)
+    const y = date.getFullYear()
+    const m = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+    return `${y}-${m}-${day}`
+}
+
+const getDateRangeFromActive = () => {
+    const now = new Date()
+    let start = new Date(now)
+    if (activeRange.value === 'week') start.setDate(now.getDate() - 7)
+    else if (activeRange.value === 'month') start.setMonth(now.getMonth() - 1)
+    else if (activeRange.value === 'quarter') start.setMonth(now.getMonth() - 3)
+    else start.setFullYear(now.getFullYear() - 1)
+    return { startDate: formatDate(start), endDate: formatDate(now) }
+}
+
+const setActiveRange = (range) => {
+    activeRange.value = range
+    if (range !== 'custom') {
+        startDate.value = null
+        endDate.value = null
+    }
+}
+
+const fetchDimensionData = async () => {
+    // TODO: 接入真实接口
+    // let params = {
+    //     pageNum: queryParams.pageNum,
+    //     pageSize: queryParams.pageSize
+    // }
+    // if (startDate.value && endDate.value) {
+    //     params.startDate = formatDate(startDate.value)
+    //     params.endDate = formatDate(endDate.value)
+    // } else {
+    //     const range = getDateRangeFromActive()
+    //     params.startDate = range.startDate
+    //     params.endDate = range.endDate
+    // }
+    // const selectedInfo = getSelectedInfo(selectedOrg.value)
+    // if (selectedInfo) {
+    //     const rawId = Number(selectedInfo.value.split('_')[1])
+    //     if (selectedInfo.deptType === 'BRIGADE') params.deptId = rawId
+    //     else if (selectedInfo.deptType === 'MANAGER') params.teamId = rawId
+    //     else if (selectedInfo.deptType === 'TEAMS') params.groupId = rawId
+    //     else if (selectedInfo.deptType === 'user') params.userId = rawId
+    // }
+    // if (selectedDimension.value) {
+    //     params.dimName = selectedDimension.value
+    // }
+    // try {
+    //     const res = await getEmployeeDimensionPageData(params)
+    //     if (res.data) {
+    //         tableData.value = res.data.rows || res.data || []
+    //         total.value = res.total || res.data?.total || 0
+    //     }
+    // } catch (error) {
+    //     console.error('获取员工维度评分明细失败:', error)
+    // }
+}
+
+const handleSearch = () => {
+    queryParams.pageNum = 1
+    fetchDimensionData()
+}
+
+const handleReset = () => {
+    startDate.value = null
+    endDate.value = null
+    activeRange.value = 'month'
+    selectedOrg.value = ''
+    selectedDimension.value = ''
+    queryParams.pageNum = 1
+    fetchDimensionData()
+}
+
+const handlePageChange = (newPage) => {
+    queryParams.pageNum = newPage
+    fetchDimensionData()
+}
+
+const handleSizeChange = (newSize) => {
+    queryParams.pageSize = newSize
+    queryParams.pageNum = 1
+    fetchDimensionData()
+}
+
+onMounted(async () => {
+    try {
+        const res = await getDeptUserTree()
+        if (res.data) {
+            cascadeOptions.value = transformCascadeData(res.data)
+        }
+    } catch (error) {
+        console.error('获取组织架构数据失败:', error)
+    }
+    fetchDimensionData()
+})
+
+watch(() => route.query, (query) => {
+    const { id, org, startDate: sd, endDate: ed, activeRange: ar, dimension } = query
+    if (id) {
+        selectedOrg.value = `user_${id}`
+    } else if (org) {
+        selectedOrg.value = org
+    } else {
+        selectedOrg.value = ''
+    }
+    if (sd && ed) {
+        startDate.value = sd
+        endDate.value = ed
+        activeRange.value = 'custom'
+    } else {
+        startDate.value = null
+        endDate.value = null
+        activeRange.value = ar || 'month'
+    }
+    if (dimension) {
+        selectedDimension.value = dimension
+    }
+    queryParams.pageNum = 1
+    fetchDimensionData()
+}, { immediate: true })
+</script>
+
+<style scoped>
+.page-container {
+    padding: 20px;
+    background: #f5f7fa;
+    min-height: calc(100vh - 90px);
+}
+
+.page-title {
+    font-size: 1.6rem;
+    font-weight: 700;
+    color: #1e3c72;
+    margin: 0 0 16px 0;
+}
+
+.filter-bar {
+    background: #fff;
+    border-radius: 12px;
+    padding: 12px 20px;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    flex-wrap: wrap;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+}
+
+.filter-left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.filter-right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.time-btn {
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    padding: 6px 18px;
+    border-radius: 6px;
+    font-size: 0.85rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    color: #1e293b;
+}
+
+.time-btn.active {
+    background: #2563eb;
+    border-color: #2563eb;
+    color: #fff;
+}
+
+.time-btn:hover:not(.active) {
+    background: #e2e8f0;
+}
+
+.table-section {
+    background: #fff;
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+}
+
+.section-title {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 16px;
+}
+
+.title-text {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: #dc2626;
+}
+
+.title-badge {
+    font-size: 0.75rem;
+    background: #eef2ff;
+    color: #475569;
+    padding: 3px 12px;
+    border-radius: 20px;
+}
+</style>