gdy_pc_8/src/newPerformance/components/ExamineContrast copy 2.vue

<template>
    <div class="contrast-container scroll-bar" style="padding-top: 10px;">

        <div class="flex-box-ce title-box" style="" v-if="selectExamineList && selectExamineList.length > 0">
            <div class="title">已选择的考核列表:</div>
            <el-button size="mini" @click="dialogVisible = true">查看更多</el-button>
        </div>


        <div v-if="selectExamineList && selectExamineList.length > 0" class="template-list"
            style="background: #f7f7f7; padding: 10px 10px 0 0; margin: 0 20px; border-radius: 4px;">
            <template size="small" v-for="(item, index) in selectExamineList">
                <el-tag :key="item.reviewPackageId" style="margin: 0 0 10px 10px;" closable
                    @close="handleTagDelete(index)">
                    {{ item.title }}
                </el-tag>
            </template>
        </div>

        <div v-else class="flex-box-ce" style="padding: 0 20px;">
            <el-button size="mini" @click="dialogVisible = true" style="margin-left: auto;">查看更多</el-button>
        </div>

        <el-tabs v-model="activeName" @tab-click="handleClick"
            style="width: 100%; padding: 0 20px; box-sizing: border-box;">
            <el-tab-pane label="表格" name="0">
                <el-table v-if="userList && userList.length > 0" ref="tableRef" custom-class="openAnimAbcd" id="mytable"
                    :data="userList" style="width: 100%; " border stripe :header-cell-style="{ background: '#f5f7fa' }"
                    v-loading="loading">
                    <el-table-column prop="employeeName" label="姓名" align="center">
                    </el-table-column>
                    <el-table-column :label="item.title" v-for="(item, index) in selectExamineList"
                        :key="item.reviewPackageId" align="center">
                        <template slot-scope="scope">
                            <div v-for="user in item.users">
                                <span v-if="user.employeeId == scope.row.employeeId">{{ user.score }}</span>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="地图" name="1" style="width: 100%;">
                <div v-if="treeData && JSON.stringify(treeData) !== '{}'" class="flex-box-ce scroll-bar"
                    style="width: 100%; justify-content: center; overflow-x: auto;">
                    <vue2-org-tree :data="treeData" style="width: 100%;" />
                </div>
            </el-tab-pane>
        </el-tabs>

        <el-dialog title="请选择需要对比的考核列表" center :visible.sync="dialogVisible" width="600px"
            :before-close="dialogBeforeClose">
            <div>
                <div class="search-box">
                    <el-select v-model="cycleType" placeholder="请选择周期类型" @change="changeCircle" style="width: 100px;"
                        size="mini">
                        <el-option v-for="item in cycleOptions" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>

                    <el-date-picker v-model="date" type="daterange" align="right" unlink-panels range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                        :picker-options="pickerOptions" @change="changeDate" style="width: 300px; margin: 0 10px;"
                        size="mini">
                    </el-date-picker>

                    <el-select v-model="status" placeholder="请选择" style="width: 100px;" @change="changeStatus"
                        size="mini">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>

                    <el-button plain round size="mini" style="margin-left: 10px;" @click="reset">重 置</el-button>
                </div>
                <div class="package-list">
                    <div class="template-list scroll-bar">
                        <template v-if="examineList && examineList.length > 0">
                            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                                @change="handleCheckAllChange" style="margin-bottom: 10px;">全选</el-checkbox>
                            <el-checkbox-group v-model="selectExamineIds" size="small" @change="changeSelectExamineIds">
                                <template v-for="item in examineList">
                                    <el-checkbox :key="item.reviewPackageId" :label="item.reviewPackageId" border>
                                        {{ item.title }}
                                    </el-checkbox>
                                </template>
                            </el-checkbox-group>
                        </template>
                        <template v-else>
                            <div class="flex-box-ce" style="justify-content: center;">
                                <noData content="暂无数据" imgW="120px" imgH="80px"></noData>
                            </div>
                        </template>
                    </div>
                    <div class="choose-template scroll-bar">
                        <el-button plain round size="mini" @click="clear">清 空</el-button>
                        <div class="line"></div>
                        <template v-for="(item, index) in chooseExamineList">
                            <div class="flex-box-ce choose-template-item" style="justify-content: space-between;">
                                <div>{{ item.title }}</div>
                                <i class="el-icon-close" @click="deleteItem(index)"></i>
                            </div>
                        </template>
                        <div ref="placeholder" style="height: 50px;"></div>
                    </div>
                </div>

            </div>
            <div slot="footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>

        <div style="height: 50px;"></div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import moment from 'moment';

export default {
    data() {
        return {
            checkAll: false,
            isIndeterminate: true,
            dialogVisible: false,
            activeName: "0",
            loading: false,
            treeData: {},
            // 周期类型 0-未定义 1-年度 2-半年度 3-季度 4-月度
            cycleType: '-1',
            cycleOptions: [
                { label: "全部", value: '-1' },
                { label: "未定义", value: '0' },
                { label: "年度", value: '1' },
                { label: "半年度", value: '2' },
                { label: "季度", value: '3' },
                { label: "月度", value: '4' },
            ],
            status: -1,
            options: [{
                value: -1,
                label: '全部'
            }, {
                value: '0',
                label: '未完成'
            }, {
                value: '1',
                label: '已完成'
            }],
            params: {
                startDate: '',
                endDate: '',
                status: -1, // 不传默认返回全部 0-未完成 1-已完成
            },

            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            date: [],
            examineList: [], // 考核表列表
            tableHeader: [],
            tableData: [],
            userList: [],
            selectExamineIds: [],
            selectExamineList: [],
            chooseExamineList: []
        }
    },
    // watch: {
    //     chooseExamineList(v) {
    //         this.selectExamineList = this.chooseExamineList
    //     }
    // },
    filters: {
        formatDate(val) {
            if (val) return moment(val).format('YYYY-MM-DD')
            else return "--"
        }
    },
    computed: {
        ...mapGetters(['user_info']),
        // selectExamineList() {
        //     return this.examineList.filter(item => this.selectExamineIds.includes(item.reviewPackageId))
        // }
    },
    created() {
        this.getRecords();
        this.dialogVisible = true;
    },
    methods: {
        deleteItem(index) {
            let chooseIndex = this.selectExamineIds.findIndex(select => select == this.chooseExamineList[index].reviewPackageId)
            this.selectExamineIds.splice(chooseIndex, 1)
            this.chooseExamineList.splice(index, 1)
        },

        changeSelectExamineIds(v) {
            console.log(this.selectExamineIds)
            if (v && v.length > 0) {
                this.examineList.forEach(examine => {
                    this.selectExamineIds.forEach(val => {
                        if (val == examine.reviewPackageId) this.chooseExamineList.push(examine)
                    })
                })
                this.chooseExamineList = Array.from(new Set(this.chooseExamineList.map(JSON.stringify))).map(JSON.parse);
            } else {
                // this.selectExamineIds = []
            }
            
        },
        handleCheckAllChange(v) {

            if (v) {
                this.examineList.forEach(examine => {
                    this.selectExamineIds.push(examine.reviewPackageId)
                })
                this.examineList.forEach(examine => {
                    this.selectExamineIds.forEach(val => {
                        if (val == examine.reviewPackageId) this.chooseExamineList.push(examine)
                    })
                })
                this.isIndeterminate = true;
                this.checkAll = true;
                this.$nextTick(() => {
                    if (this.$refs.placeholder) this.$refs.placeholder.scrollIntoView(false);
                })
            } else {
                this.selectExamineIds = [];
                this.isIndeterminate = false;
                this.checkAll = false;
                if (this.examineList && this.examineList.length > 0) {
                    let examineIds = this.examineList.map(item => item.reviewPackageId)
                    this.chooseExamineList = this.chooseExamineList.filter(choose => !examineIds.includes(choose.reviewPackageId))
                }

            }
        },

        chooseExamine(item) {
            if (this.selectExamineIds.includes(item.reviewPackageId)) {
                let index = this.selectExamineIds.findIndex(item => item.reviewPackageId);
                this.selectExamineIds.splice(index, 1)
            } else {
                this.selectExamineIds.push(item.reviewPackageId);
            }
            if (this.selectExamineIds.length === this.examineList.length) {
                this.isIndeterminate = true;
                this.checkAll = true;
            } else {
                this.isIndeterminate = false;
                this.checkAll = false;
            }
            if (this.activeName == '0') this.initTableData()
            if (this.activeName == '1') this.initTreeData()
        },

        handleTagDelete(index) {
            // 最后一个不能删除
            if (this.selectExamineList && this.selectExamineList.length > 1)
                this.selectExamineList.splice(index, 1)
        },
        getRecords() {
            this.loading = true;

            if (this.status === '-1') this.params.status = '' // 不传默认返回全部
            else this.params.status = this.status
            if (this.cycleType == '-1') this.params = { ...this.params }
            else {
                this.params = { ...this.params, cycleType: this.cycleType }
            }
            this.$axiosUser("get", `/performance/statistics/packages/${this.user_info.site_id}`, this.params).then(res => {
                this.loading = false;
                let { data: { data: { list, total }, code } } = res;
                this.examineList = list;
                if (this.examineList && this.examineList.length > 0) {
                    this.examineList.map(item => {
                        this.chooseExamineList.forEach(choose => {
                            if (item.reviewPackageId == choose.reviewPackageId)
                                this.selectExamineIds.push(item.reviewPackageId)
                        })
                    })
                }

                this.treeData = {
                    id: 0,
                    label: "考核对比",
                    children: []
                }
                // this.selectExamineIds = [];
            })
        },
        initTableData() {
            let userList = [];
            let selectExamineList = [];

            this.examineList && this.examineList.forEach(item => {
                this.selectExamineIds.forEach(selectExamineId => {
                    if (item.reviewPackageId == selectExamineId) {
                        selectExamineList.push(item)
                    }
                })

            })

            selectExamineList.forEach(item => {
                let { reviewPackageId, title, users } = item;
                if (users && users.length > 0) {
                    users.forEach(user => {
                        let { employeeName, employeeId } = user
                        userList.push({ employeeName, employeeId })
                    })
                }
            })
            this.userList = userList.reduce((acc, obj) => {
                // 检查当前对象是否已经存在于结果数组中
                if (!acc.find(item => item.employeeId === obj.employeeId)) { // 假设我们通过id来判断唯一性
                    acc.push(obj);
                }
                return acc;
            }, []);

        },
        initTreeData() {
            this.selectExamineList.forEach(item => {
                item.id = Date.now() + Math.floor(Math.random() * 10000);
                item.label = item.title;
                item.children = item.users;
                item.users.forEach(user => {
                    user.id = Date.now() + Math.floor(Math.random() * 10000);
                    user.label = user.employeeName + ", " + (user.score ? user.score : 0);
                })
            })
            this.treeData = {
                id: 0,
                label: "考核对比",
                children: this.selectExamineList
            }
        },
        handleClick(tab, event) {
            if (this.activeName == '0') this.initTableData()
            if (this.activeName == '1') this.initTreeData()
        },
        // 日期选择时间
        changeDate(v) {
            if (v && v.length > 0) {
                this.params.startDate = v[0] || ''
                this.params.endDate = v[1] || ''
                this.getRecords();
            }

        },
        //选择周期
        changeCircle(v) {
            this.getRecords();
        },
        // 选择状态
        changeStatus(v) {
            this.getRecords();
        },
        // 重置搜索条件
        reset() {
            this.cycleType = '-1'
            this.status = -1
            this.date = []
            this.params = {
                startDate: '',
                endDate: '',
                status: -1, // 不传默认返回全部 0-未完成 1-已完成
            }
            this.getRecords();
        },

        // 清空选择的考核列表
        clear() {
            this.selectExamineIds = [];
            this.chooseExamineList = [];
        },
        dialogBeforeClose() {
            this.dialogVisible = false;
        },
        confirm() {
            this.selectExamineList = this.chooseExamineList;
            if (this.activeName == '0') this.initTableData()
            if (this.activeName == '1') this.initTreeData()
            this.dialogVisible = false;
        }
    },

}

</script>



<style scoped="scoped" lang="scss">
.contrast-container {
    width: 100%;
    height: 100%;
    background-color: #fff;

    .el-icon-close {
        transition: all 0.2s;

        &:hover {
            font-size: 16px;
        }
    }

    .search-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
    }

    .title-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        padding: 0 20px;

        .title {
            color: #999;
            font-size: 14px;
            font-weight: bold;
        }
    }

    .package-list {
        width: 100%;
        height: 400px;
        display: flex;
        margin-top: 10px;
        border: 1px solid #f7f7f7;

        .template-list {
            width: 50%;
            height: 400px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            border-right: 1px solid #f7f7f7;
            padding: 10px;
            box-sizing: border-box;

            .el-checkbox-group {
                width: 100% !important;
                height: 100% !important;

                .el-checkbox {
                    margin: 0;
                    width: 200px;
                    margin-bottom: 10px;
                }

            }
        }

        .choose-template {
            width: 50%;
            height: 400px;
            overflow-y: auto;
            padding: 10px;
            box-sizing: border-box;

            .line {
                width: 90%;
                height: 1px;
                background-color: #f7f7f7;
                margin: 10px auto;
            }

            &-item {
                width: 90%;
                height: 30px;
                line-height: 30px;
                padding-left: 10px;
                border-bottom: 1px solid #f7f7f7;
                margin: 0 auto 10px auto;
                box-sizing: border-box;
            }
        }
    }


    .table-box {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }

    /* 设置滚动条的宽度和背景色 */
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        background-color: #f9f9f9;
    }

    /* 设置滚动条滑块的样式 */
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
        border-radius: 6px;
        background-color: #c1c1c1;
    }

    /* 设置滚动条滑块hover样式 */
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
        background-color: #a8a8a8;
    }

    /* 设置滚动条轨道的样式 */
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
        border-radius: 6px;
        background: #ededed;
    }


}
</style>