FE_exam_server/src/pages/assessment/review/index.vue

<template>
    <div>
        <el-card shadow="hover" class="m-b-20">
            <div class="p-title m-b-20">筛选</div>
            
            <div class="flex j-between">
                <el-form label-width="80px" inline>
                    <el-form-item class="no-mb" label="批阅状态">
                        <el-select v-model="state" clearable placeholder="请选择批阅状态" @change="getData">
                            <el-option label="不限" value=""></el-option>
                            <el-option v-for="(item,index) in reviewStatusList" :key="index" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div>
                    <el-input
                        placeholder="请输入真实姓名/学号"
                        prefix-icon="el-icon-search"
                        v-model="keyword"
                        clearable
                    ></el-input>
                </div>
            </div>
        </el-card>

        <el-card shadow="hover" class="m-b-20">
            <div class="p-title m-b-20">考试批阅</div>

            <el-table
                :data="listData"
                ref="table"
                row-key="id"
                class="table"
                stripe
                header-align="center"
            >
                <el-table-column type="index" width="100" label="序号" align="center">
                    <template
                        slot-scope="scope"
                    >{{scope.$index + (page - 1) * pageSize + 1}}</template>
                </el-table-column>
                <el-table-column prop="stuName" label="真实姓名" align="center"></el-table-column>
                <el-table-column prop="stuNo" label="学号" align="center"></el-table-column>
                <el-table-column prop="handPaperTime" label="交卷时间" align="center"></el-table-column>
                <el-table-column prop="timeSpent" label="答题用时（分钟）" align="center">
                    <template slot-scope="scope">
                        <p>{{scope.row.timeSpent | transferToMinutes}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="考试状态" align="center">
                    <template slot-scope="scope">
                        {{getExamStatusName(scope.row.examinationStatus)}}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="批阅状态" align="center">
                    <template slot-scope="scope">
                        {{getReviewStatusName(scope.row.reviewStatus)}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="review(scope.row,false)">查看</el-button>
                        <el-button type="text" @click="review(scope.row,true)" v-if="(scope.row.reviewStatus == 0 || scope.row.reviewStatus == 1) && scope.row.examinationStatus == 2">批阅</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-size="pageSize"
                    layout="total,prev, pager, next"
                    :total="total"
                ></el-pagination>
            </div>
        </el-card>
    </div>
</template>
<script>
import { mapState,mapGetters,mapActions } from 'vuex'
export default {
    data() {
        return {
            state: '',
            reviewStatusList: [
                {
                    id: 0,
                    name: '未批阅'
                },{
                    id: 1,
                    name: '批阅部分'
                },{
                    id: 2,
                    name: '已批阅'
                }
            ],
            keyword: '',
            listData: [],
            page: 1,
            pageSize: 10,
            total: 0,
            searchTimer: null,
        };
    },
    filters: {
        transferToMinutes(val){
            return isNaN(val) ? val : (val / 60).toFixed(2)
        }
    },
    computed: {
        ...mapState('user', [
            'userId','clientId'
        ]),
        ...mapState('assessment', [
            'id','examStatusList'
        ]),
        ...mapGetters('assessment', [
            'getReviewStatusName','getExamStatusName'
        ])
    },
    mounted() {
        this.getData()
    },
    watch: {
        keyword: function(val) {
            clearTimeout(this.searchTimer)
            this.searchTimer = setTimeout(() => {
                this.getData()
            },500)
        }
    },
    methods: {
        ...mapActions('assessment', [
            'setReviewInfo'
        ]),
        getData() {
            this.$post(`${this.api.reviewList}?pageNum=${this.page}&pageSize=${this.pageSize}&userId=${this.userId}&assessmentId=${this.id}&keyword=${this.keyword}&state=${this.state}`)
            .then(res => {
                this.listData = res.data.list.list
                this.total = res.data.list.totalCount
            })
            .catch(err => {})
        },
        handleCurrentChange(val) {
            this.page = val
            this.getData()
        },
        review(row,isReview){
            this.setReviewInfo({
                isReview,
                id: row.assessmentId,
                paperId: row.paperId,
                stuId: row.stuId,
                reviewStatus: row.reviewStatus
            })
            this.$router.push('/testPaper/doReview')
        },
    }
};
</script>

<style lang="scss" scoped>
    /deep/.no-mb.el-form-item{
        margin-bottom: 0;
    }
</style>