chongqing-app/src/pages/employeeDimensionDetails/index.vue

<template>
    <view class="dimension-page">
        <!-- 页面标题 -->
        <view class="page-header">
            <view class="header-title">员工维度评分明细</view>
        </view>

        <!-- 筛选栏 -->
        <view class="filter-bar">
            <scroll-view scroll-x class="time-scroll">
                <view class="time-tags">
                    <view v-for="(tag, index) in timeTags" :key="index"
                        :class="['time-tag', { active: selectedTimeTag === index }]" @click="onTimeTagClick(index)">
                        {{ tag }}
                    </view>
                </view>
            </scroll-view>
            <view class="date-range-picker">
                <picker mode="date" :value="beginTime" @change="onBeginTimeChange" class="date-picker-half">
                    <view class="date-input" :class="{ filled: beginTime }">
                        {{ beginTime || '开始日期' }}
                    </view>
                </picker>
                <text class="date-separator">至</text>
                <picker mode="date" :value="endTime" @change="onEndTimeChange" class="date-picker-half">
                    <view class="date-input" :class="{ filled: endTime }">
                        {{ endTime || '结束日期' }}
                    </view>
                </picker>
            </view>

            <view class="filter-row">
                <view class="filter-select" @click="showOrgPicker = true">
                    <text class="filter-select-text">{{ selectedOrgName || '组织架构/员工' }}</text>
                    <u-icon name="arrow-down" size="14" color="#999"></u-icon>
                </view>
                <view class="filter-select" @click="showDimPicker = true">
                    <text class="filter-select-text">{{ selectedDimName || '维度' }}</text>
                    <u-icon name="arrow-down" size="14" color="#999"></u-icon>
                </view>
            </view>

            <view class="filter-actions">
                <view class="btn-search" @click="handleSearch">
                    <u-icon name="search" size="16" color="#fff"></u-icon>
                    <text>搜索</text>
                </view>
                <view class="btn-reset" @click="handleReset">重置</view>
            </view>
        </view>

        <!-- 数据表格 -->
        <view class="section-area">
            <view class="section-header">
                <text class="section-title">员工维度评分明细</text>
                <text class="section-badge">评分依据：员工配分表</text>
            </view>

            <view class="table-wrapper">
                <statistic-table :columns="tableColumns" :data="tableData" />
                <view class="loading-mask" v-if="loading">
                    <u-loading-icon size="28"></u-loading-icon>
                    <text class="loading-text">加载中...</text>
                </view>
            </view>

            <view class="pagination-wrapper" v-if="total > 0">
                <uni-pagination :current="pageNum" :total="total" :page-size="pageSize" @change="onPageChange" />
            </view>
        </view>

        <!-- 组织架构选择弹窗 -->
        <u-popup :show="showOrgPicker" mode="bottom" :round="16" :mask-close-able="true"
            @close="showOrgPicker = false">
            <view class="picker-popup">
                <view class="picker-header">
                    <text class="picker-title">选择组织架构/员工</text>
                    <u-icon name="close" size="20" @click="showOrgPicker = false"></u-icon>
                </view>
                <view class="search-box">
                    <u-input v-model="orgSearchKeyword" placeholder="搜索" @input="onOrgSearch"></u-input>
                </view>
                <scroll-view v-if="!orgSearchKeyword.trim()" scroll-y class="tree-list">
                    <employee-tree-node v-for="(node, index) in deptTreeData" :key="node.id" :node="node" :expanded-ids="expandedDeptIds"
                        :selected-id="selectedOrgId" :selectable="true" @toggle="toggleDeptExpand" @select="onOrgSelect" />
                </scroll-view>
                <scroll-view v-else scroll-y class="org-list">
                    <view class="org-item" v-for="item in filteredOrgList" :key="item.userId"
                        @click="onOrgSelect(item)">
                        <text class="org-item-name">{{ item.nickName }}</text>
                        <u-icon v-if="item.userId === selectedOrgId" name="checkmark" color="#34D399"
                            size="18"></u-icon>
                    </view>
                </scroll-view>
            </view>
        </u-popup>

        <!-- 维度选择弹窗 -->
        <u-popup :show="showDimPicker" mode="bottom" :round="16" :mask-close-able="true"
            @close="showDimPicker = false">
            <view class="dim-popup">
                <view class="picker-header">
                    <text class="picker-title">选择维度</text>
                    <u-icon name="close" size="20" @click="showDimPicker = false"></u-icon>
                </view>
                <view class="dim-list">
                    <view class="dim-item" :class="{ active: selectedDimension === '' }" @click="selectDimension('')">
                        <text>全部</text>
                    </view>
                    <view class="dim-item" v-for="item in dimensionOptions" :key="item.value"
                        :class="{ active: selectedDimension === item.value }" @click="selectDimension(item.value)">
                        <text>{{ item.label }}</text>
                    </view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import StatisticTable from '@/components/statistic-table/statistic-table.vue'
import EmployeeTreeNode from '@/pages/components/EmployeeTreeNode.vue'
import { getEmployeeDimensionDetails, getDimensionAll } from '@/api/warningManage/index'
import { getDeptUserTree } from '@/api/system/user'

export default {
    name: 'EmployeeDimensionDetails',
    components: {
        StatisticTable,
        EmployeeTreeNode
    },
    data() {
        return {
            selectedTimeTag: 1,
            timeTags: ['近一周', '近一月', '近三月', '近一年'],
            beginTime: '',
            endTime: '',
            selectedOrgId: null,
            selectedOrgName: '',
            selectedDeptType: '',
            selectedDimension: '',
            selectedDimName: '全部',
            showOrgPicker: false,
            showDimPicker: false,
            orgSearchKeyword: '',
            deptTreeData: [],
            expandedDeptIds: [],
            orgList: [],
            dimensionOptions: [],
            tableColumns: [
                { props: 'userId', title: '员工ID' },
                { props: 'personName', title: '姓名' },
                { props: 'deptName', title: '部门' },
                { props: 'teamName', title: '班组' },
                { props: 'groupName', title: '小组' },
                { props: 'dimensionName', title: '维度名称' },
                { props: 'dimensionScore', title: '维度分值' }
            ],
            tableData: [],
            allTableData: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            loading: false
        }
    },
    computed: {
        filteredOrgList() {
            const keyword = this.orgSearchKeyword.trim().toLowerCase()
            if (!keyword) return this.orgList
            return this.orgList.filter(item =>
                (item.nickName || '').toLowerCase().includes(keyword)
            )
        }
    },
    mounted() {
        this.loadDeptTree()
        this.loadDimensionOptions()
        this.fetchData()
    },
    methods: {
        formatDate(date) {
            const y = date.getFullYear()
            const m = String(date.getMonth() + 1).padStart(2, '0')
            const d = String(date.getDate()).padStart(2, '0')
            return `${y}-${m}-${d}`
        },
        getDateRange() {
            const now = new Date()
            let start = new Date(now)
            switch (this.selectedTimeTag) {
                case 0: start.setDate(now.getDate() - 7); break
                case 1: start.setMonth(now.getMonth() - 1); break
                case 2: start.setMonth(now.getMonth() - 3); break
                case 3: start.setFullYear(now.getFullYear() - 1); break
                default: break
            }
            return { startDate: this.formatDate(start), endDate: this.formatDate(now) }
        },
        onTimeTagClick(index) {
            this.selectedTimeTag = index
        },
        onBeginTimeChange(e) {
            this.beginTime = e.detail.value
        },
        onEndTimeChange(e) {
            this.endTime = e.detail.value
        },
        flattenDeptTree(tree) {
            const result = []
            const traverse = (nodes) => {
                nodes.forEach(node => {
                    const hasChildren = node.children && node.children.length > 0
                    if (!hasChildren && node.nodeType !== 'dept') {
                        result.push({
                            nodeType: node.nodeType || '',
                            userId: node.userId || node.id,
                            nickName: node.nickName || node.label || node.userName || ''
                        })
                    }
                    if (hasChildren) {
                        traverse(node.children)
                    }
                })
            }
            traverse(tree)
            return result
        },
        expandAllDepts(nodes) {
            this.expandedDeptIds = []
            const traverse = (list) => {
                list.forEach(node => {
                    const hasChildren = node.children && node.children.length > 0
                    if (hasChildren || node.nodeType === 'dept') {
                        this.expandedDeptIds.push(node.id)
                        if (hasChildren) {
                            traverse(node.children)
                        }
                    }
                })
            }
            traverse(nodes)
        },
        loadDeptTree() {
            getDeptUserTree({}).then(res => {
                if (res.code === 200) {
                    this.deptTreeData = res.data || []
                    this.orgList = this.flattenDeptTree(this.deptTreeData).filter(u => u.nodeType === 'user')
                    this.expandAllDepts(this.deptTreeData)
                }
            }).catch(() => { })
        },
        toggleDeptExpand(id) {
            const index = this.expandedDeptIds.indexOf(id)
            if (index > -1) {
                this.expandedDeptIds.splice(index, 1)
            } else {
                this.expandedDeptIds.push(id)
            }
        },
        onOrgSelect(item) {
            this.selectedOrgId = item.userId
            this.selectedOrgName = item.nickName
            this.selectedDeptType = item.deptType || ''
            this.showOrgPicker = false
         
        },
        onOrgSearch() { },
        selectDimension(value) {
            this.selectedDimension = value
            const item = this.dimensionOptions.find(d => d.value === value)
            this.selectedDimName = value === '' ? '全部' : (item ? item.label : '')
            this.showDimPicker = false
        },
        handleSearch() {
            this.pageNum = 1
            this.fetchData()
        },
        handleReset() {
            this.selectedTimeTag = 1
            this.beginTime = ''
            this.endTime = ''
            this.selectedOrgId = null
            this.selectedOrgName = ''
            this.selectedDeptType = ''
            this.selectedDimension = ''
            this.selectedDimName = '全部'
            this.pageNum = 1
            this.loadDimensionOptions()
            this.fetchData()
        },
        onPageChange(e) {
            this.pageNum = e.current
            this.updatePagedData()
        },
        async fetchData() {
            this.loading = true
            let params = this.getQueryParams()
            try {
                const res = await getEmployeeDimensionDetails(params)
                if (res.code === 200 && res.data) {
                    const data = res.data
                    this.allTableData = data.list || data || []
                    this.pageNum = 1
                    this.updatePagedData()
                }
            } catch (e) { } finally {
                this.loading = false
            }
        },
        updatePagedData() {
            const data = this.allTableData
            this.total = data.length
            const start = (this.pageNum - 1) * this.pageSize
            const end = start + this.pageSize
            this.tableData = data.slice(start, end)
        },
        getQueryParams() {
            let params = {}
            if (this.beginTime && this.endTime) {
                params.startDate = this.beginTime
                params.endDate = this.endTime
            } else {
                const range = this.getDateRange()
                params.startDate = range.startDate
                params.endDate = range.endDate
            }
            if (this.selectedOrgId) {
                const key = this.getOrgParamKey()
                if (key){
                    params[key] = this.selectedOrgId
                }
            }
            if (this.selectedDimension) {
                params.dimensionId = this.selectedDimension
            }
            return params
        },
        getOrgParamKey() {
            const deptType = this.selectedDeptType
            if (deptType === 'BRIGADE') return 'deptId'
            if (deptType === 'MANAGER') return 'teamId'
            if (deptType === 'TEAMS') return 'groupId'
            if (deptType === 'user') return 'userId'
            return ''
        },
        async loadDimensionOptions() {
            try {
                
                const res = await getDimensionAll({ pageNum: 1, pageSize: 100, org: 4 })
                if (res.code === 200 && res.data) {
                    this.dimensionOptions = (res.data || []).map(item => ({
                        label: item.name || item.label || item.dimensionName || '',
                        value: item.id != null ? String(item.id) : (item.value || item.name || '')
                    }))
                }
            } catch (e) { }
        }
    }
}
</script>

<style lang="scss" scoped>
.dimension-page {
    min-height: 100vh;
    background: #f5f7fa;
    padding-bottom: 40rpx;
}

.page-header {
    background: #fff;
    padding: 24rpx 32rpx;
    border-bottom: 1rpx solid #eee;
}

.header-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #1e3c72;
}

.filter-bar {
    background: #fff;
    margin: 20rpx;
    border-radius: 16rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.time-scroll {
    width: 100%;
    margin-bottom: 16rpx;
}

.time-tags {
    display: flex;
    gap: 0;
    width: 100%;
}

.time-tag {
    flex: 1;
    text-align: center;
    padding: 12rpx 0;
    background: #f8fafc;
    border: 1rpx solid #e2e8f0;
    font-size: 24rpx;
    color: #333;

    &.active {
        background: #2563eb;
        border-color: #2563eb;
        color: #fff;
    }
}

.date-range-picker {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 16rpx;
    margin-bottom: 16rpx;
}

.date-picker-half {
    flex: 1;
}

.date-input {
    width: 100%;
    padding: 12rpx 16rpx;
    border-radius: 8rpx;
    background: #f5f5f5;
    font-size: 24rpx;
    color: #999;
    text-align: center;
    box-sizing: border-box;

    &.filled {
        color: #333;
    }
}

.date-separator {
    font-size: 24rpx;
    color: #999;
    flex-shrink: 0;
    padding: 0 12rpx;
}

.filter-row {
    display: flex;
    gap: 12rpx;
    margin-bottom: 16rpx;
}

.filter-select {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16rpx 20rpx;
    background: #f5f5f5;
    border-radius: 8rpx;
    border: 1rpx solid #e0e0e0;
}

.filter-select-text {
    font-size: 26rpx;
    color: #333;
}

.filter-actions {
    display: flex;
    gap: 16rpx;
}

.btn-search {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8rpx;
    padding: 16rpx;
    background: #2563eb;
    border-radius: 8rpx;
    color: #fff;
    font-size: 28rpx;
}

.btn-reset {
    padding: 16rpx 32rpx;
    background: #f5f5f5;
    border-radius: 8rpx;
    color: #666;
    font-size: 28rpx;
    text-align: center;
}

.section-area {
    margin: 0 20rpx;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 16rpx;
    margin-bottom: 16rpx;
}

.section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #dc2626;
}

.section-badge {
    font-size: 22rpx;
    background: #eef2ff;
    padding: 6rpx 20rpx;
    border-radius: 30rpx;
    color: #666;
}

.table-wrapper {
    background: #fff;
    border-radius: 16rpx;
    overflow-x: auto;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
    position: relative;
    min-height: 200rpx;
}

.loading-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16rpx;
    z-index: 10;
}

.loading-text {
    font-size: 24rpx;
    color: #999;
}

.pagination-wrapper {
    display: flex;
    justify-content: center;
    padding: 20rpx 0;
}

.picker-popup,
.dim-popup {
    background: #fff;
    border-radius: 16rpx 16rpx 0 0;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}

.picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 32rpx;
    border-bottom: 1rpx solid #eee;
}

.picker-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
}

.search-box {
    padding: 16rpx 32rpx;
}

.tree-list,
.org-list {
    flex: 1;
    padding: 0 32rpx;
    height: 0;
    overflow: hidden;
}

.org-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
}

.org-item-name {
    font-size: 28rpx;
    color: #333;
}

.dim-list {
    padding: 16rpx 32rpx;
}

.dim-item {
    padding: 24rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    font-size: 28rpx;
    color: #333;
    text-align: center;

    &.active {
        color: #2563eb;
        font-weight: 500;
    }
}
</style>