manHourHousekeeper/fhKeeper/formulahousekeeper/course-pc/src/views/examinationManagement/examRegistrationReview.vue

<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" @submit.native.prevent>
                <el-form-item label="报名时间">
                    <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" size="small">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="nameKeyword" placeholder="请输入姓名" clearable size="small"></el-input>
                </el-form-item>
                <el-form-item label="课程">
                    <el-input v-model="courseKeyword" placeholder="请输入课程名称" clearable size="small"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchList" size="small">搜索</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="list" highlight-current-row v-loading="listLoading" :height="tableHeight" style="width: 100%;"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="parentCourseName" label="考试课程" min-width="240"></el-table-column>
            <el-table-column prop="name" label="姓名" width="100" align="center"></el-table-column>
            <el-table-column prop="sex" label="性别" width="80" align="center"></el-table-column>
            <el-table-column prop="school" label="工作单位" min-width="150" align="center"></el-table-column>
            <el-table-column prop="phone" label="手机号码" width="120" align="center"></el-table-column>
            <el-table-column prop="idType" label="证件类型" width="100" align="center"></el-table-column>
            <el-table-column prop="idNumber" label="证件号码" width="180" align="center"></el-table-column>
            <el-table-column prop="email" label="邮箱" width="180" align="center"></el-table-column>
            <el-table-column prop="invoiceType" label="发票类型" width="140" align="center"></el-table-column>
            <el-table-column prop="isIndivdual" label="开票主体" width="140" align="center"></el-table-column>
            <el-table-column prop="invoiceHeader" label="开票名称" width="140" align="center"></el-table-column>
            <el-table-column prop="invoiceDate" label="开票日期" width="120" align="center"></el-table-column>
            <el-table-column prop="taxCode" label="税号" width="150" align="center"></el-table-column>
            <el-table-column prop="address" label="联系地址" min-width="340"></el-table-column>
            <el-table-column label="证件照" width="120" align="center" fixed="right">
                <template slot-scope="scope">
                    <img v-if="scope.row.portraitUrl" :src="scope.row.portraitUrl" class="id-photo"
                        @click="previewImage(scope.row.portraitUrl)" />
                    <span v-else>无照片</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180" class-name="btns" header-align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button size="small" type="success" @click="approve(scope.row)">通过</el-button>
                    <el-button size="small" type="danger" @click="reject(scope.row)">驳回</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-button type="success" @click="batchApprove" :disabled="selectedIds.length === 0"
                size="small">全部通过</el-button>
            <el-button type="danger" @click="batchReject" :disabled="selectedIds.length === 0"
                size="small">全部驳回</el-button>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 50, 100]" :page-size="size" layout="total, sizes, prev, pager, next"
                :total="total" style="float:right;"></el-pagination>
        </el-col>

        <!-- 驳回弹窗 -->
        <el-dialog title="驳回原因" :visible.sync="rejectDialogVisible" width="30%">
            <el-form ref="rejectForm" :model="rejectData" label-width="0px">
                <el-form-item>
                    <el-input type="textarea" :rows="4" v-model="rejectData.reason" placeholder="请输入驳回原因"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="rejectDialogVisible = false">取 消</el-button>
                <el-button type="primary" :disabled="!rejectData.reason" @click="submitReject">确 定</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
import { post, checkAndAddUpload } from '../../api'
import { fixedDataGender, fixedDataCertificateType, fixedDataOrNot, fixedDataInvoiceSubject, fixedDatainvoiceType } from '../../common/js/fixedData'
export default {
    data() {
        return {
            // 搜索条件
            dateRange: [],
            nameKeyword: '',
            courseKeyword: '',

            // 表格相关
            tableHeight: 0,
            listLoading: false,
            total: 0,
            page: 1,
            size: 20,
            list: [],
            selectedIds: [],

            // 弹窗
            rejectDialogVisible: false,
            rejectData: {
                idString: '',
                reason: ''
            }
        }
    },
    methods: {
        // 搜索列表
        searchList() {
            this.page = 1;
            this.getList();
        },
        // 图片预览
        previewImage(url) {
            this.$viewerApi({
                images: [url],
                options: {
                    initialViewIndex: 0,
                    toolbar: {
                        zoomIn: 1,
                        zoomOut: 1,
                        oneToOne: 1,
                        reset: 1,
                        prev: 1,
                        next: 1,
                        rotateLeft: 1,
                        rotateRight: 1,
                        flipHorizontal: 1,
                        flipVertical: 1
                    }
                }
            })
        },
        // 获取列表
        getList() {
            this.listLoading = true;
            post(`/exam-check/getAuditList`, { pageSize: this.size, pageIndex: this.page }).then(res => {
                const { records = [], total = 0 } = res.data
                this.total = total
                this.list = records.map(item => {
                    const { courseId, courseName, id, examStatus, isOnlineCourse } = item
                    const { sex, idType, invoiceType, isIndivdual } = item.userExamInfo || {}
                    return {
                        ...item.userExamInfo,
                        parenCourseId: courseId,
                        parentCourseName: courseName,
                        parentId: id,
                        parentExamStatus: examStatus,
                        parentIsOnlineCourse: isOnlineCourse,
                        sex: fixedDataGender.find(val => val.value == (sex ? 1 : 0)).label,
                        idType: fixedDataCertificateType.find(val => val.value == idType).label,
                        invoiceType: fixedDatainvoiceType.find(val => val.value == invoiceType).label,
                        isIndivdual: fixedDataInvoiceSubject.find(val => val.value == (isIndivdual ? 1 : 0)).label,
                    }
                })
            }).finally(() => {
                this.listLoading = false;
            })
        },

        // 分页相关
        handleCurrentChange(val) {
            this.page = val;
            this.getList();
        },
        handleSizeChange(val) {
            this.page = 1;
            this.size = val;
            this.getList();
        },

        // 选择变化
        handleSelectionChange(val) {
            this.selectedIds = val.map(item => item.parentId);
        },

        // 通过单个
        approve(row) {
            this.$confirm('确认通过该报名申请?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                post('/exam-check/approve', { idString: row.parentId }).then(res => {
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    });
                    this.getList();
                })
            });
        },

        // 驳回单个
        reject(row) {
            console.log('row:', row);
            this.$confirm('确认驳回该报名申请?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.rejectData = {
                    idString: row.parentId,
                    reason: ''
                }
                this.rejectDialogVisible = true
            });
        },

        // 批量通过
        batchApprove() {
            if (this.selectedIds.length === 0) return;

            this.$confirm(`确认通过选中的${this.selectedIds.length}条报名申请?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                post('/exam-check/approve', { idString: this.selectedIds.join(',') }).then(res => {
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    });
                    this.getList();
                })
            });
        },

        // 批量驳回
        batchReject() {
            if (this.selectedIds.length === 0) return;

            this.$confirm(`确认驳回选中的${this.selectedIds.length}条报名申请?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.rejectData = {
                    idString: this.selectedIds.join(','),
                    reason: ''
                }
                this.rejectDialogVisible = true
            });
        },

        // 确定驳回
        submitReject() {
            post('/exam-check/deny', { ...this.rejectData }).then(res => { 
                this.$message({
                    message: '驳回成功',
                    type: 'success'
                });
                this.getList()
                this.rejectDialogVisible = false
            })
        }
    },

    created() {
        let height = window.innerHeight;
        this.tableHeight = height - 195;
        const that = this;
        window.onresize = function temp() {
            that.tableHeight = window.innerHeight - 195;
        };
    },

    mounted() {
        this.getList();
    }
}
</script>

<style lang="scss" scoped>
.toolbar {
    padding-bottom: 10px;
}

.btns .el-button {
    margin-left: 10px;
    margin-bottom: 5px;
}

.id-photo {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
}
</style>