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

<template>
    <div>
        <breadcrumb :data="'练习管理/批阅列表'"></breadcrumb>
        <div class="page">
            <div class="tabs">
                <a class="item active">批阅列表</a>
            </div>
            <div class="page-content">
                <div class="tool">
                    <ul class="filter">
                        <li>
                            <label>批阅状态：</label>
                            <el-select v-model="state" placeholder="请选择批阅状态" size="small" @change="initData">
                                <el-option label="不限" value="3"></el-option>
                                <el-option v-for="(item,index) in reviewStatusList" :key="index" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </li>
                        <li>
                            <label>搜索：</label>
                            <el-input placeholder="请输入学生姓名/学号" prefix-icon="el-icon-search" v-model="keyword" clearable size="small"></el-input>
                        </li>
                    </ul>
                </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="userName" label="姓名" align="center"></el-table-column>
                    <el-table-column prop="workNumber" label="学号" align="center"></el-table-column>
                    <el-table-column 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>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState,mapGetters,mapActions } from 'vuex'
import breadcrumb from '@/components/breadcrumb'
import util from '@/libs/util'
export default {
    data() {
        return {
            state: '3',
            reviewStatusList: [
                {
                    id: 0,
                    name: '未批阅'
                },{
                    id: 1,
                    name: '批阅部分'
                },{
                    id: 2,
                    name: '已批阅'
                }
            ],
            keyword: '',
            listData: [],
            listDataAll: [],
            page: 1,
            pageSize: 10,
            total: 0,
            searchTimer: null,
        };
    },
    components: {breadcrumb},
    computed: {
        ...mapState('user', [
            'userId','clientId'
        ]),
        ...mapState('practice', [
            'practiseId'
        ]),
        ...mapGetters('practice', [
            'getReviewStatusName'
        ])
    },
    mounted() {
        this.getData()
    },
    watch: {
        keyword: function(val) {
            clearTimeout(this.searchTimer)
            this.searchTimer = setTimeout(() => {
                this.initData()
            },500)
        }
    },
    methods: {
        ...mapActions('practice', [
            'setReviewByStudentInfo'
        ]),
        getData() {
            this.$post(`${this.api.practiceReviewList}?pageNum=${this.page}&pageSize=${10000}&practiseId=${this.practiseId}&keyword=${this.keyword}&state=${this.state}`).then(res => {
                let list = res.data.list.list
                let result = []
                list.map(n => {
                    if(!result.find(e => e.userId == n.userId) && (this.state == 3 || n.reviewStatus == this.state)){
                        result.push(n)
                    }
                })
                this.listDataAll = result
                this.total = result.length
                this.handlePage()
            }).catch(err => {})
        },
        initData(){
            this.page = 1
            this.getData()
        },
        handlePage(){
            let list = this.listDataAll
            this.listData = list.slice((this.page - 1) * this.pageSize,this.page * this.pageSize)
        },
        handleCurrentChange(val) {
            this.page = val
            this.handlePage()
        },
        review(row,isReview){
            this.setReviewByStudentInfo({
                userId: row.userId
            })
            this.$router.push('result')
        }
    }
};
</script>

<style lang="scss" scoped>
    
</style>