gdy_pc_8/src/newPerformance/components/ExamineRecord.vue

<template>
    <div class="record-container">
        <ResultAnalysis  />
    </div>
</template>


<script>
let that;
import { mapGetters } from 'vuex';
import moment from 'moment';
import ResultAnalysis from "./ResultAnalysis" // 考核详情组件

export default {
    components: {
        ResultAnalysis
    },
    data() {
        return {
            reviewPackageId: 0,
            detailInfo: null,
            year: '2025',
            headValue: [],
            options: [{ value: '0', label: '未定义', leaf: false, children: [] },
                { value: '1', label: '年度', leaf: false, children: [] },
                { value: '2', label: '半年度', leaf: false, children: [] },
                { value: '3', label: '季度', leaf: false, children: [] },
                { value: '4', label: '月度', leaf: false, children: [] },
            ], //
            props: {
                value: 'value',
                label: 'label',
                children: 'children',
                lazy: true,
                lazyLoad(node, resolve) {
                    that.getAssessTree(node, resolve);
                }
            },
            total: 0,
            loading: false,
            tableData: [],
            deptList: [], // 部门列表 - 树形结构
            dept_list: [], // 部门列表
            selected_dept_ids: [], // 选择的部门列表
            placeholder: "",
            chooseChildren: [],
            noDataText: '暂无数据'
        }
    },
    watch: {
        year(val) {
            this.getRecords()
        },
        headValue(val) {
            if (this.chooseChildren && this.chooseChildren.length > 0) {
                let obj = this.chooseChildren.find(child => child.value == this.headValue[1])
                if (obj) { 
                    let value = ''
                    if (this.headValue[0] && this.headValue[0] == '0') value = "未定义 / "
                    if (this.headValue[0] && this.headValue[0] == '1') value = "年度 / "
                    if (this.headValue[0] && this.headValue[0] == '2') value = "半年度 / "
                    if (this.headValue[0] && this.headValue[0] == '3') value = "季度 / "
                    if (this.headValue[0] && this.headValue[0] == '4') value = "月度 / "
                    this.placeholder = obj.label || ''
                } 
            }
            this.getResultAnalyze()
        },
    },

    created() {
        // that = this;
        // this.getRecords('4'); // 优先获取当月最新考核数据 递归周期类型，获取考核数据，优先按月，季，半年度，年度来调用 
    },
    
    computed: {
        ...mapGetters(['user_info']),
    },

    filters: {
        formatDate(val) {
            if (val) return moment(val).format('YYYY-MM-DD')
            else return "--"
        },
        filterProgress(list) {
            if (list && list.length > 0) {
                let sum = 0;
                list.forEach(item => {
                    if (item.status == 1) sum += 1 // 完成的个数
                })
                return Number(sum / list.length) * 100
            }
        }
    },
    methods: {
        getAssessTree(node, resolve) {
            if (this.options.length == 0) {
                return
            }
            const { value } = node;
            
            this.chooseChildren = node.children // 用来回显选择的文本
            node.children = []
            let url = `/performance/statistics/cycle/info/${this.user_info.site_id}/${value}`
            this.$axiosUser("get", url, {}).then(res => {
                let { data: { data: { items, cycleType } } } = res
                if (items && items.length > 0) {
                    items.forEach(item => {
                        item.leaf = true;
                        item.label = item.remark
                    })
                    resolve(items)
                } else {
                    resolve([])
                }
                
                
            }).finally(() => {
                // this.tableDataLoad = false;
            });
        },
        getRecords(cycle) {
            if (cycle < 0) {
                cycle = 0
                return
            }
            this.loading = true
            // 周期种类 0-未定义 1-年度 2-半年度 3-季度 4-月度
            let url = `/performance/statistics/cycle/info/${this.user_info.site_id}/${cycle}`
            this.$axiosUser("get", url, {}).then(res => {
                this.loading = false;
                let { data: { data: { items, cycleType } } } = res
                if (items && items.length > 0) {
                    items.forEach(item => {
                        item.leaf = true
                        item.label = item.remark
                    })
                    this.options[parseInt(cycle)].children = items
                    
                    this.headValue = [cycle + '', this.options[parseInt(cycle)].children[[0]].value]
                    // if (this.headValue[1]) this.placeholder = this.options[parseInt(cycle)].children[[0]].label || ''
                } else {
                    this.getRecords(parseInt(cycle) - 1) // 递归周期类型，获取考核数据，优先按月，季，半年度，年度来调用
                }
            })
        },

        getResultAnalyze() {
            this.reviewPackageId = 0
            let url = `/performance/statistics/cycle/${this.user_info.site_id}/${this.headValue[0]}`
            if (!this.headValue[1]) return
            this.$axiosUser("get", url, { value: this.headValue[1]}).then(res => {
                this.detailInfo = res.data.data
                this.reviewPackageId = 1
            })
        },


    }
};
</script>

<style lang="scss">
.record-container {
    .el-cascader .el-input__inner::placeholder {
        color: #606266;
        /* 设置为你想要的颜色 */
    }
}

</style>

<style scoped="scoped" lang="scss">
// .el-cascader .el-input{
//     cursor: pointer;
//     // #606266
// }


.record-container {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    .title-container {
        display: flex;
        align-items: center;

        .searchBox {
            width: 300px;

            .search-title {
                border-bottom: 1px solid #f1f1f1;
                font-size: 16px;
                font-weight: 700;
                padding: 0 10px;
                padding-bottom: 10px;
            }
        }


        .title {
            font-weight: 700;
            font-size: 16px;
        }
    }

    .search-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 50px;
        padding: 0 10px;
        box-sizing: border-box;

        .btn-box {
            padding: 7px 5px;
            border: 1px solid #DCDFE6;
            border-radius: 4px;

            &:hover {
                cursor: pointer;
            }
        }
    }

    .line {
        width: 100%;
        height: 1px;
        background: #f1f1f1;
        margin-bottom: 10px;
    }


    .main-content {
        width: 100%;
        flex: 1;
        overflow-y: auto;
        /* 设置滚动条的宽度和背景色 */
        &::-webkit-scrollbar {
            width: 6px;
            height: 6px;
            background-color: #f9f9f9;
        }
    
        /* 设置滚动条滑块的样式 */
        &::-webkit-scrollbar-thumb {
            border-radius: 6px;
            background-color: #c1c1c1;
        }
    
        /* 设置滚动条滑块hover样式 */
        &::-webkit-scrollbar-thumb:hover {
            background-color: #a8a8a8;
        }
    
        /* 设置滚动条轨道的样式 */
        &::-webkit-scrollbar-track {
            box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
            border-radius: 6px;
            background: #ededed;
        }
    }


    .no-data-box {
        width: 100%;
        height: 100%;
        padding: 26px 35px;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 4px;

        img {
            width: 200px;
            height: 200px;
            margin-bottom: 10px;
        }
    }
}
</style>