考核结果查看详情

xieb

2025-01-21 d13cebe7fbadd396e91a989af331df8a8e7b40f8

 src/views/evaluate/components/secondRoundResult.vue

@@ -1,11 +1,57 @@
<template>
    <avue-crud v-model:page="page" :option="option" :table-loading="loading" :data="data" @current-change="currentChange"
        @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
    </avue-crud>
    <template v-if="!type()">
        <div class="export_xlsx">
            <el-button type="success" plain @click="handleExport">导出当前数据</el-button>
        </div>
        <ul class="type-list">
            <li class="type-item">
                <div class="title">奖项</div>
                <div class="introduction">认定标准</div>
                <div class="number">名额</div>
                <div class="tool">操作</div>
            </li>
            <li class="type-item" v-for="(item, index) in data" :key="index">
                <div class="title">{{ item.category?.categoryName || '' }}</div>
                <el-tooltip effect="dark" placement="top">
                    <template #content>
                        <p style="max-width: 500px;">{{ item.category?.standard || '' }}</p>
                    </template>
                    <div class="introduction">
                        {{ item.category?.standard || '' }}
                    </div>
                </el-tooltip>

                <div class="number">{{ item.category?.peopleNum || 0 }}人</div>
                <div class="tool">
                    <el-button type="primary" text icon="el-icon-view" @click="view(item)">查看最终结果</el-button>
                </div>
            </li>
        </ul>
        <el-dialog v-model="dialogParams.visible" :title="dialogParams.title" destroy-on-close>
            <avue-crud :option="dialogOption" :table-loading="dialogLoading" :data="dialogParams.data" @on-load="onLoad">
                <template #menu-row>
                    <el-button type="success" plain @click="handleExport">导出当前数据</el-button>
                </template>
            </avue-crud>
        </el-dialog>
    </template>
    <template v-else>
        <div class="export_xlsx">
            <el-button type="success" plain @click="handleExport">导出当前数据</el-button>
        </div>
        <avue-crud :option="option" :table-loading="loading" :data="data" v-model:page="page"
            @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
        </avue-crud>
    </template>
</template>

<script>
import { getFinallyResult } from '@/api/evaluate/evaluateTask'
import { getFinallyResult, getFinallyTypeResult } from '@/api/evaluate/evaluateTask'
import { exportBlob } from "@/api/common";
import { downloadXls } from "@/utils/util";
import { dateNow } from "@/utils/date";
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

export default {
    inject: ['type'],
@@ -22,6 +68,7 @@
    data() {
        return {
            loading: true,
            dialogLoading: true,
            query: {},
            page: {
                pageSize: 10,
@@ -45,42 +92,64 @@
                menuWidth: 150,
                menu: false,
                dialogClickModal: false,
                column: []
                column: [
                    {
                        label: '部门',
                        prop: 'dept_name',
                        type: 'input'
                    },
                    {
                        label: '票数',
                        prop: 'voteNum',
                        type: 'input'
                    }
                ]
            },
            defaultColumn: [
                {
                    label: '姓名',
                    prop: 'user_name',
                    type: 'input'
                },
                {
                    label: '部门',
                    prop: 'user_name',
                    type: 'input'
                },
                {
                    label: '职位',
                    prop: 'dept_name',
                    type: 'input'
                },
                {
                    label: '票数',
                    prop: 'voteNum',
                    type: 'input'
                },
            ],
            sectionColumn: [
                {
                    label: '部门',
                    prop: 'user_name',
                    type: 'input'
                },
                {
                    label: '票数',
                    prop: 'voteNum',
                    type: 'input'
                },
            ],
            dialogOption: {
                height: '400',
                calcHeight: 30,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                viewBtn: false,
                addBtn: false,
                editBtn: false,
                delBtn: false,
                viewBtn: false,
                header: false,
                menuWidth: 150,
                menu: false,
                dialogClickModal: false,
                column: [
                    {
                        label: '姓名',
                        prop: 'user_name',
                        type: 'input'
                    },
                    {
                        label: '部门',
                        prop: 'post_name',
                        type: 'input'
                    },
                    {
                        label: '职位',
                        prop: 'dept_name',
                        type: 'input'
                    },
                    {
                        label: '票数',
                        prop: 'voteNum',
                        type: 'input'
                    }
                ]
            },
            dialogParams: {
                visible: false,
                title: '',
                data: {}
            },
            data: []
        }
    },
@@ -106,19 +175,50 @@
                ...this.query,
                ...params
            };
            getFinallyResult(page.currentPage, page.pageSize, id).then(res => {
            !this.type() && getFinallyResult(page.currentPage, page.pageSize, id).then(res => {
                const data = res.data.data;
                this.page.total = data.total;
                this.data = data.records;
                this.data = data || [];
                this.loading = false;
            });
            this.type() && getFinallyTypeResult(page.currentPage, page.pageSize, { evaluateTaskId: id }).then(res => {
                const data = res.data.data;
                this.data = data.records || [];
                this.page.total = data.total
                this.loading = false;
            });
        },
        view(result) {
            const { category, resultList } = result
            this.dialogParams = {
                visible: true,
                title: `最终结果(${category.categoryName})`,
                data: resultList
            }
            this.dialogLoading = false
        },
        handleExport() {
            const { id } = this.params.data
            const downloadUrl = `/evaluate/evaluateCandidateResult/exportEmp/${id}`;
            const sectionDownloadUrl = `/evaluate/evaluateCandidateResult/exportDept/${id}`;
            this.$confirm("是否导出数据?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                NProgress.start();
                const url = this.type() ? sectionDownloadUrl : downloadUrl;
                const typeName = this.type() ? '部门' : '个人'
                exportBlob(url, {}).then(res => {
                    downloadXls(res.data, `${typeName}最终评优结果（${dateNow()}）.xlsx`);
                    NProgress.done();
                })
            });
        }
    },
    watch: {
        'params.data': {
            handler(value) {
                this.onLoad(this.page)
                this.option.column = (this.type() ? this.sectionColumn : this.defaultColumn)
            },
            deep: true
        }
@@ -126,4 +226,64 @@
}
</script>

<style lang="scss" scoped></style>
<style lang="scss" scoped>
$borderColor: var(--el-border-color);

.export_xlsx {
    margin-bottom: 10px;
}

.type-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 100%;
    border: 1px solid $borderColor;
    border-radius: var(--el-border-radius-base);
    box-sizing: border-box;

    .type-item {
        display: flex;
        height: 40px;
        line-height: 40px;
        text-align: center;

        div {
            border-bottom: 1px solid $borderColor;
            flex-shrink: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .title {
            flex: 2;
        }

        .introduction {
            flex: 5;
            flex-shrink: 0;

            border: {
                right: 1px solid $borderColor;
                left: 1px solid $borderColor;
            }
        }

        .number {
            flex: 1;
        }

        .tool {
            flex: 2;
            border-left: 1px solid $borderColor;
        }

        &:last-child {
            div {
                border-bottom: 0;
            }
        }
    }
}
</style>