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

<template>
    <el-dialog title="指标审批详情" center :visible.sync="showHandlerDialogVisible" width="600px"
        :before-close="handleCloseDialog" append-to-body :close-on-press-escape="true">
        <div class="dialog-box">
            <el-link type="primary" @click="getLogDetails()">操作日志</el-link>
            <ol class="steps scroll-bar" style="width: 100%; height: 500px; overflow-y: auto;">
                <template v-for="node in showData.nodes">
                    <template v-if="node.type === 'targetConfirms'">
                        <template v-if="node.enable">
                            <li class="title" :class="showData.businessStatus === 'target_confirm' ? 'active' : ''">
                                1.确认目标{{ showData.businessStatus === 'target_confirm' ? '(进行中)' : '' }}
                            </li>
                            <li class="info-box">
                                <div class="line"></div>
                                <div class="content" v-if="node.children && node.children.length > 0">
                                    <div class="content-info" v-for="child in node.children" :key="child.id">
                                        <div class="user-type" v-if="child.tasks && child.tasks.length > 0">
                                            {{ child.assigneeType | filterType }}
                                        </div>
                                        <div class="task-info" v-if="child.tasks && child.tasks.length > 0">
                                            <div class="info" v-for="task in child.tasks" :key="task.taskId">
                                                <div class="info-left">
                                                    <span
                                                        :class="task.state === 'created' ? 'orange-color' : 'green-color'">
                                                        {{ task.state === 'created' ? '进行中' : '已完成' }}，
                                                    </span>
                                                    {{ task.assigneeName }}
                                                </div>
                                                <div class="info-right" v-if="task.comment">
                                                    <el-tooltip effect="dark" placement="right">
                                                        <div v-html="task.comment" slot="content"
                                                            style="max-width: 300px">
                                                        </div>
                                                        <div class="oneLine">意见：{{ task.comment || '暂无意见' }}</div>
                                                    </el-tooltip>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="content" v-else>
                                    未开始
                                </div>
                            </li>
                        </template>

                        <template v-if="!node.enable">
                            <li class="title">1.确认目标</li>
                            <li class="info-box">
                                <div class="line"></div>
                                <div class="content">
                                    未启用
                                </div>
                            </li>
                        </template>
                    </template>

                    <template v-if="node.type === 'resultInput'">
                        <template v-if="node.enable">
                            <li class="title" :class="showData.businessStatus === 'result_input' ? 'active' : ''">
                                2.录入结果{{ showData.businessStatus === 'result_input' ? '(进行中)' : '' }}
                            </li>
                            <li class="info-box">
                                <div class="line"></div>
                                <div class="content" v-if="node.tasks && node.tasks.length > 0">
                                    <div class="content-info">
                                        <div class="user-type">
                                            {{ node.assigneeType | filterType }}
                                        </div>
                                        <div class="task-info" v-for="task in node.tasks" :key="task.taskId">
                                            <div class="info">
                                                <div class="info-left">
                                                    <span
                                                        :class="task.state === 'created' ? 'orange-color' : 'green-color'">
                                                        {{ task.state === 'created' ? '进行中' : '已完成' }}，
                                                    </span>
                                                    {{ task.assigneeName }}，结果值：{{ task.result || '--'}}
                                                </div>
                                                <div class="info-right" v-if="task.comment">
                                                    <el-tooltip effect="dark" placement="right">
                                                        <div v-html="task.comment" slot="content"
                                                            style="max-width: 300px">
                                                        </div>
                                                        <div class="oneLine">意见：{{ task.comment || '暂无意见' }}</div>
                                                    </el-tooltip>
                                                </div>
                                            </div>

                                            <div class="files" v-if="task.files && task.files.length > 0">
                                                <div class="file-title">附件列表</div>
                                                <div class="file-list">
                                                    <div class="file-item" v-for="file in task.files"
                                                        @click="openFileReview2(file)">
                                                        {{ file | filterFileName }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                </div>
                                <div v-else class="content">
                                    未开始
                                </div>
                            </li>
                        </template>
                        <template v-if="!node.enable">
                            <li class="title">2.录入结果</li>
                            <li class="info-box">
                                <div class="line"></div>
                                <div class="content">
                                    未启用
                                </div>
                            </li>
                        </template>

                    </template>

                    <template v-if="node.type === 'scoreSelf'">
                        <template v-if="node.enable">
                            <li class="title" :class="showData.businessStatus === 'score_self' ? 'active' : ''">
                                3.自评{{ showData.businessStatus === 'score_self' ? '(进行中)' : '' }}
                            </li>
                            <li class="info-box">
                                <div class="line"></div>
                                <div class="content" v-if="node.tasks && node.tasks.length > 0">
                                    <div class="content-info">
                                        <div class="user-type">
                                            {{ node.assigneeType | filterType }}
                                        </div>
                                        <div class="task-info" v-for="task in node.tasks" :key="task.taskId">
                                            <div class="info">
                                                <div class="info-left">
                                                    <span
                                                        :class="task.state === 'created' ? 'orange-color' : 'green-color'">
                                                        {{ task.state === 'created' ? '进行中' : '已完成' }}，
                                                    </span>
                                                    {{ task.assigneeName }}，评分：{{ task.score || '--' }}
                                                </div>
                                                <div class="info-right" v-if="task.comment">
                                                    <el-tooltip effect="dark" placement="right">
                                                        <div v-html="task.comment" slot="content"
                                                            style="max-width: 300px">
                                                        </div>
                                                        <div class="oneLine">意见：{{ task.comment || '暂无意见' }}</div>
                                                    </el-tooltip>
                                                </div>
                                            </div>

                                            <div class="files" v-if="task.files && task.files.length > 0">
                                                <div class="file-title">附件列表</div>
                                                <div class="file-list">
                                                    <div class="file-item" v-for="file in task.files"
                                                        @click="openFileReview2(file)">
                                                        {{ file | filterFileName }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div v-else class="content">
                                    未开始
                                </div>
                            </li>
                        </template>
                        <template v-if="!node.enable">
                            <li class="title">3.自评</li>
                            <li class="info-box">
                                <div class="line"></div>
                                <div class="content">
                                    未启用
                                </div>
                            </li>
                        </template>

                    </template>

                    <template v-if="node.type === 'scoreEachOther'">
                        <template v-if="node.enable">
                            <li class="title" :class="showData.businessStatus === 'score_each_other' ? 'active' : ''">
                                4.互评{{ showData.businessStatus === 'score_each_other' ? '(进行中)' : '' }}
                            </li>
                            <li class="info-box">
                                <div class="line"></div>
                                <div class="content" v-if="node.tasks && node.tasks.length > 0">
                                    <div class="content-info">
                                        <div class="user-type">
                                            {{ node.assigneeType | filterType }}
                                        </div>
                                        <div class="task-info" v-for="task in node.tasks" :key="task.taskId">
                                            <div class="info">
                                                <div class="info-left">
                                                    <span
                                                        :class="task.state === 'created' ? 'orange-color' : 'green-color'">
                                                        {{ task.state === 'created' ? '进行中' : '已完成' }}，
                                                    </span>
                                                    {{ task.assigneeName }}，评分：{{ task.score || '--' }}
                                                </div>
                                                <div class="info-right" v-if="task.comment">
                                                    <el-tooltip effect="dark" placement="right">
                                                        <div v-html="task.comment" slot="content"
                                                            style="max-width: 300px">
                                                        </div>
                                                        <div class="oneLine">意见：{{ task.comment || '暂无意见' }}</div>
                                                    </el-tooltip>
                                                </div>
                                            </div>

                                            <div class="files" v-if="task.files && task.files.length > 0">
                                                <div class="file-title">附件列表</div>
                                                <div class="file-list">
                                                    <div class="file-item" v-for="file in task.files"
                                                        @click="openFileReview2(file)">
                                                        {{ file | filterFileName }}
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div v-else class="content">
                                    未开始
                                </div>
                            </li>
                        </template>
                        <template v-if="!node.enable">
                            <li class="title">4.互评</li>
                            <li class="info-box">
                                <div class="line"></div>
                                <div class="content">
                                    未启用
                                </div>
                            </li>
                        </template>

                    </template>

                    <template v-if="node.type === 'scores'">
                        <template v-if="node.enable">
                            <li class="title" :class="showData.businessStatus === 'score' ? 'active' : ''">
                                5.评分{{ showData.businessStatus === 'score' ? '(进行中)' : '' }}
                            </li>
                            <li class="info-box">
                                <div class="line"></div>
                                <div class="content" v-if="node.children && node.children.length > 0">
                                    <div class="content-info" v-for="child in node.children" :key="child.id">
                                        <div class="user-type" v-if="child.tasks && child.tasks.length > 0">
                                            {{ child.assigneeType | filterType }}
                                        </div>
                                        <div class="task-info" v-if="child.tasks && child.tasks.length > 0">
                                            <template v-for="task in child.tasks">
                                                <div class="info" :key="task.taskId">
                                                    <div class="info-left">
                                                        <span
                                                            :class="task.state === 'created' ? 'orange-color' : 'green-color'">
                                                            {{ task.state === 'created' ? '进行中' : '已完成' }}，
                                                        </span>
                                                        {{ task.assigneeName }}，评分：{{ task.score }}
                                                    </div>
                                                    <div class="info-right" v-if="task.comment">
                                                        <el-tooltip effect="dark" placement="right">
                                                            <div v-html="task.comment" slot="content"
                                                                style="max-width: 300px">
                                                            </div>
                                                            <div class="oneLine">意见：{{ task.comment || '暂无意见' }}</div>
                                                        </el-tooltip>
                                                    </div>
                                                </div>

                                                <div class="files" v-if="task.files && task.files.length > 0">
                                                    <div class="file-title">附件列表</div>
                                                    <div class="file-list">
                                                        <div class="file-item" v-for="file in task.files"
                                                            @click="openFileReview2(file)">
                                                            {{ file | filterFileName }}
                                                        </div>
                                                    </div>
                                                </div>
                                            </template>
                                        </div>
                                        <div v-else>
                                            未开始
                                        </div>
                                    </div>

                                </div>

                            </li>
                        </template>
                        <template v-if="!node.enable">
                            <li class="title">5.评分</li>
                            <li class="info-box">
                                <div class="line"></div>
                                <div class="content">
                                    未启用
                                </div>
                            </li>
                        </template>

                    </template>

                    <template v-if="node.type === 'reviews'">
                        <template v-if="node.enable">
                            <li class="title" :class="showData.businessStatus === 'review' ? 'active' : ''">
                                6.审批{{ showData.businessStatus === 'review' ? '(进行中)' : '' }}
                            </li>
                            <li class="info-box">
                                <div class="line"></div>
                                <div class="content" v-if="node.children && node.children.length > 0">

                                    <div class="content-info" v-for="child in node.children" :key="child.id">
                                        <div class="user-type" v-if="child.tasks && child.tasks.length > 0">
                                            {{ child.assigneeType | filterType }}
                                        </div>
                                        <div class="task-info" v-if="child.tasks && child.tasks.length > 0">

                                            <template v-for="task in child.tasks">
                                                <div class="info" :key="task.taskId">
                                                    <div class="info-left">
                                                        <span
                                                            :class="task.state === 'created' ? 'orange-color' : 'green-color'">
                                                            {{ task.state === 'created' ? '进行中' : '已完成' }}，
                                                        </span>
                                                        {{ task.assigneeName }}，评分：{{ task.score }}
                                                    </div>
                                                    <div class="info-right" v-if="task.comment">
                                                        <el-tooltip effect="dark" placement="right">
                                                            <div v-html="task.comment" slot="content"
                                                                style="max-width: 300px">
                                                            </div>
                                                            <div class="oneLine">意见：{{ task.comment || '暂无意见' }}</div>
                                                        </el-tooltip>
                                                    </div>
                                                </div>

                                                <div class="files" v-if="task.files && task.files.length > 0">
                                                    <div class="file-title">附件列表</div>
                                                    <div class="file-list">
                                                        <div class="file-item" v-for="file in task.files"
                                                            @click="openFileReview2(file)">
                                                            {{ file | filterFileName }}
                                                        </div>
                                                    </div>
                                                </div>
                                            </template>


                                        </div>
                                        <div v-else>
                                            未开始
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </template>
                        <template v-if="!node.enable">
                            <li class="title">6.审批</li>
                            <li class="info-box">
                                <div class="line"></div>
                                <div class="content">
                                    未启用
                                </div>
                            </li>
                        </template>

                    </template>

                    <!-- <template v-if="node.type === 'cc'">
                        <template v-if="node.enable">
                            <li class="title" :class="showData.businessStatus === 'cc' ? 'active' : ''">
                                7.抄送{{ showData.businessStatus === 'cc' ? '(进行中)' : '' }}
                            </li>
                            <li class="info-box">
                                <div class="line"></div>
                                <div class="content" v-if="node.tasks && node.tasks.length > 0">
                                    <div class="content-info">
                                        <div class="user-type">
                                            {{ node.assigneeType | filterType }}
                                        </div>
                                        <div class="task-info" v-for="task in node.tasks" :key="task.taskId">
                                            <div class="info">
                                                <div class="info-left">
                                                    <span
                                                        :class="task.state === 'created' ? 'orange-color' : 'green-color'">
                                                        {{ task.state === 'created' ? '进行中' : '已完成' }}，
                                                    </span>
                                                    {{ task.assigneeName }}
                                                </div>
                                                <div class="info-right" v-if="task.comment">
                                                    <el-tooltip effect="dark" placement="right">
                                                        <div v-html="task.comment" slot="content"
                                                            style="max-width: 300px">
                                                        </div>
                                                        <div class="oneLine">意见：{{ task.comment || '暂无意见' }}</div>
                                                    </el-tooltip>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="content" v-else>
                                    未开始
                                </div>
                            </li>
                        </template>
                        <template v-if="!node.enable">
                            <li class="title">7.抄送</li>
                            <li class="info-box">
                                <div class="line"></div>
                                <div class="content">
                                    未启用
                                </div>
                            </li>
                        </template>


                    </template> -->


                </template>


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

        <ExamineLogDialog v-if="examineLogDialogVisible" v-model="examineLogDialogVisible" :reviewId="reviewId"
            :reviewIndicatorId="reviewIndicatorId">
        </ExamineLogDialog>

    </el-dialog>
</template>

<script>
import ExamineLogDialog from '@/newPerformance/components/MyPerformance/ExamineLog'; // 考核日志
export default {
    components: {
        ExamineLogDialog
    },
    model: {
        prop: 'showHandlerDialogVisible',
        event: 'close-dialog'
    },
    props: {
        showHandlerDialogVisible: {
            type: Boolean,
            default: false
        },
        dialogTitle: {
            type: String,
            default: ''
        },
        status: {
            type: String,
            default: 'completed'
        },
        showData: {
            type: [],
            default: () => []
        }
    },

    data() {
        return {
            imgUrl: "",
            examineLogDialogVisible: false,
            reviewIndicatorId: "",
            reviewId: ""
        }
    },
    
    filters: {
        filterType(v) {
            if (v == 'leader') return v = "管理员"
            if (v == 'self') return v = "被考核人"
            if (v == 'post') return v = "岗位"
            if (v == 'user') return v = "指定人员"
            if (v == 'deptLeader') return v = "部门"
        },

        filterFileName(str) {
            if (str) {
                let lastIndex = str.lastIndexOf("/")
                return str.substr(lastIndex + 1, str.length - 1);
            }
        }
    },

    
    methods: {
        handleCloseDialog() {
            this.$emit('close-dialog', false)
        },

        // 文件预览
        openFileReview2(url) {
            let file = {
                url
            }
            let imgFiles = ['BMP', 'GIF', 'PNG', 'JPEG', 'JPG', 'bmp', 'gif', 'png', 'jpeg', 'jpg'];
            let lastIndex = file.url && file.url.lastIndexOf("/") || -1
            let suffix; //文件后缀名

            if (lastIndex > 0) {
                suffix = file.url.substr(lastIndex + 1, file.url.length - 1).split(".")[1];
                if (imgFiles.includes(suffix)) {
                    this.imgUrl = ''
                    this.imgUrl = file.url;
                    this.$viewerApi({
                        images: [this.imgUrl]
                    })
                } else {
                    window.open(file.url, '_blank');
                }
            }
        },


        getLogDetails() {
            this.reviewIndicatorId = this.showData.reviewIndicatorId
            this.reviewId = this.showData.reviewId
            this.examineLogDialogVisible = true
        },
    }
}

</script>

<style scoped lang="scss">
.oneLine {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.green-color {
    color: #67c23a;
}

.orange-color {
    color: #e6a23c;
}

.gray-color {
    color: rgb(144, 147, 153);
    background: rgb(244, 244, 245);
    border-color: rgb(144, 147, 153);
}

.dialog-box {
    position: relative;
}

.el-link {
    position: absolute;
    top: -60px;
    left: 0px;
}

.show-data-box {

    .item-list {
        .item {

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

                .content {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    &-left {
                        display: flex;
                        align-items: center;

                        &-status {}
                    }
                }
            }
        }
    }
}

.steps {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    .title {
        width: 100%;
        height: 30px;
        font-weight: 600;
        color: #000;
    }
    .info-box {
        display: flex;
        margin: 10px 0;

        .line {
            margin: 0 20px;
            width: 1px;
            border: 1px dashed #ccc;
        }

        .content {
            width: 90%;
            background-color: #f7f7f7;
            padding: 10px;
            box-sizing: border-box;
            color: #999;
            &-info {
                display: flex;
                flex-direction: column;
                .user-type {
                    width: 100px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 30px;
                    border: 1px solid;
                    height: 30px;
                    color: #409eff;
                    background: #ecf5ff;
                    border-color: #b3d8ff;
                }
                .task-info {
                    margin: 5px;
                    color: #999;
                    .info {
                        width: 100%;
                        height: 30px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .info-right {
                            width: 120px;
                        }
                    }
                }
            }
        }
    }

}

.active {
    color: #409eff !important;
}


.files {
    display: flex;
    flex-direction: column;
    border-radius: 6px;

    .file-title {
        color: #999;
        font-weight: 600;
    }

    .file-item {
        color: #999;
        transition: 0.2s;
        padding-left: 10px;
        &:hover {
            text-decoration: underline;
            cursor: pointer;
        }
    }
}

</style>