gdy_pc_8/src/newPerformance/components/PublicComp/ShowHandler.vue

<template>
    <div class="show-data-box">

        <div v-if="showData.enable">
            <div class="data-box" style="display: flex; align-items: center; justify-content: center;">
                <div v-if="taskStatusList.completedTaskList.length > 0" class="data-complated green-color"
                    style="margin-right: 5px;" @click="openDialog('completed')">
                    <el-tooltip :content="'已完成：' + taskStatusList.completedTaskList.length + '人'" effect="dark"
                        placement="right">
                        <div>
                            <i class="el-icon-check"></i> {{ taskStatusList.completedTaskList.length }}人
                        </div>
                    </el-tooltip>
                </div>
                <div v-if="taskStatusList.createdTaskList.length > 0" class="orange-color"
                    @click="openDialog('created')">
                    <el-tooltip :content="'进行中：' + taskStatusList.createdTaskList.length + '人'" effect="dark"
                        placement="right">
                        <div>
                            <i class="el-icon-reading"></i> {{ taskStatusList.createdTaskList.length }}人
                        </div>
                    </el-tooltip>
                </div>
                <div v-if="!taskStatusList.completedTaskList.length > 0 && !taskStatusList.createdTaskList.length > 0"
                    class="gray-color">
                    未开始
                </div>
            </div>
        </div>
        <el-tooltip v-else content="未开启" effect="dark" placement="right">
            <el-switch v-model="showData.enable" disabled></el-switch>
        </el-tooltip>
        <ShowHanderDialog v-if="dialogVisible" v-model="dialogVisible" :dialogTitle="dialogTitle" :showData="showData" :status="status" />
    </div>
</template>

<script>
import ShowHanderDialog from "./ShowHanderDialog.vue"
export default {
    components: {
        ShowHanderDialog
    },
    props: {
        showData: {
            type: Object,
            default: () => { }
        }
    },
    watch: {
        showData(v) {
        }
    },
    data() {
        return {
            dialogVisible: false,
            dialogTitle: "已完成",
            status: "completed"
        }
    },
    computed: {
        taskStatusList() {
            let completedTaskList = [], createdTaskList = [];
            if (this.showData.children && this.showData.children.length > 0) {
                this.showData.children.forEach(child => {
                    if (child.tasks && child.tasks.length > 0) {
                        child.tasks.forEach(task => {
                            if (task.state === 'completed') {
                                completedTaskList.push(task)
                            } else {
                                createdTaskList.push(task)
                            }
                        })
                    }
                })
            }
            else {
                let { tasks } = this.showData
                if (tasks && tasks.length > 0) {
                    tasks.forEach(task => {
                        if (task.state === 'completed') {
                            completedTaskList.push(task)
                        } else {
                            createdTaskList.push(task)
                        }
                    })
                }
            }
            return {
                completedTaskList,
                createdTaskList
            }
        },
        handleShowData() {
            if (this.showData.children && this.showData.children.length > 0) {
                this.showData.children.forEach(children => {
                    // 指定人员
                    if (children.assigneeType === 'user') {
                        let tasks = children.tasks;
                        let assigneeIds = children.assigneeIds;
                        let diff = []; // 找出未处理的指定人
                        if (assigneeIds && assigneeIds.length > 0) {
                            if (tasks && tasks.length > 0) {
                                assigneeIds.forEach(assigneeId => {
                                    tasks.forEach(task => {
                                        if (assigneeId !== task.assignee) {
                                            diff.push(assigneeId)
                                        }
                                    })
                                })
                            }
                            return diff
                        } else {
                            return diff
                        }

                    }
                })
            }
            else {

            }
        }
    },
    filters: {
    },
    methods: {
        openDialog(status) {
            if (status === 'created') {
                this.status = 'created'
                this.dialogTitle = '进行中'
            } else {
                this.status = 'completed'
                this.dialogTitle = '已完成'
            }
            this.dialogVisible = true
        }
    }
}
</script>

<style scoped lang="scss">
.green-color {
    color: #67c23a;
}

.orange-color {
    color: #e6a23c;
}

.gray-color {
    color: #ccc;
}

.show-data-box {

    // width: 100%;
    // height: 100%;
    .item-list {
        .item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .value-box {
                margin-bottom: 5px;
                display: flex;

                span {
                    padding: 3px 6px;
                    border-radius: 20px;
                    white-space: nowrap;
                    box-sizing: border-box;
                }
            }
        }
    }

}
</style>