FE_kd_client/src/components/page/Assessment.vue

<template>
    <div class="pd20">
        <el-row :gutter="20">
            <el-col :span="24">
                <el-card shadow="hover" class="mgb20">
                    <div>
                        <div class="flex-center mgb20">
                            <p class="hr_tag"></p>
                            <span>筛选</span>
                        </div>
                        <div>
                            <el-form label-width="80px">
                                <el-form-item label="实验班级" class="userRadio">
                                    <el-radio-group v-model="form.classId" @change="initData">
                                        <el-radio label="" border>不限</el-radio>
                                        <el-radio v-for="(item,index) in classList" :key="index" :label="item.classId" border>{{item.className}}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <div class="flex-between no-mb">
                                    <el-form-item label="考核状态">
                                        <el-select v-model="form.status" clearable placeholder="请选择实验状态" @change="initData">
                                            <el-option v-for="(item,index) in statusList" :key="index" :label="item.name" :value="item.value"></el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item>
                                        <el-input placeholder="请输入考核名称" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input>
                                    </el-form-item>
                                </div>
                            </el-form>
                        </div>
                    </div>  
                </el-card>
            </el-col> 

            <el-col :span="24">
                <el-card shadow="hover" class="mgb20">
                    <div class="flex-between mgb20">
                        <div class="flex-center">
                            <p class="hr_tag"></p>
                            <span>考核管理</span>
                        </div>
                    </div>
                    <el-table :data="listData" class="table" stripe header-align="center" :row-key="getRowKeys">
                        <el-table-column type="index" width="100" label="序号" align="center">
                            <template slot-scope="scope">
                                {{scope.$index + (pageNo - 1) * pageSize + 1}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="experimentalName" label="考核名称" align="center"></el-table-column>
                        <el-table-column prop="className" label="考核班级" align="center">
                        </el-table-column>
                        <el-table-column prop="experimentalNumber" label="考核人数" align="center"></el-table-column>
                        <el-table-column prop="experimentDuration" label="考核时长" align="center">
                        </el-table-column>
                        <el-table-column prop="creationTime" label="创建时间" align="center">
                        </el-table-column>
                        <el-table-column prop="startTime" label="起始时间" align="center">
                        </el-table-column>
                        <el-table-column prop="stopTime" label="结束时间" align="center">
                        </el-table-column>
                        <el-table-column label="倒计时" align="center">
                            <template slot-scope="scope">
                                <span v-if="scope.row.surplusTime == '838:00:00'">>30天</span>
                                <span v-else-if="scope.row.status == 2">{{scope.row.surplusTime}}</span>
                                <span v-else>00:00:00</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="实验状态" align="center">
                            <template slot-scope="scope">
                                <span class="ellipsis">{{status[scope.row.status]}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <!-- <el-button v-if="scope.row.status != 3" type="text" @click="entry(scope.row)" :disabled="scope.row.status != 2">进入</el-button>
                                <el-button v-else type="text" @click="show(scope.row)">查看成绩</el-button> -->
                                
                                <el-button v-if="scope.row.status == 3 && !scope.row.reportId" type="text" disabled>未参加</el-button>
                                <el-button v-if="scope.row.status != 3 && !scope.row.reportId" type="text" @click="entry(scope.row)" :disabled="scope.row.status != 2">进入</el-button>
                                <el-button v-if="scope.row.status == 2 && scope.row.reportId" type="text" disabled>已提交</el-button>
                                <el-button v-if="scope.row.status == 3 && scope.row.reportId" type="text" @click="show(scope.row)">查看成绩</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination">
                        <el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="pageNo">
                        </el-pagination>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'project',
    data() {
        return {
            userId: this.$store.state.userId,
            roleId: this.$store.state.accountRole,
            name: sessionStorage.getItem('ms_username'),
            status: ['','待开始','进行中','已完成'],
            statusList: [{
                name:'不限',
                value: 0
            },{
                name:'待开始',
                value: 1
            },{
                name:'进行中',
                value: 2
            },{
                name:'已完成',
                value: 3
            }],
            listData: [],
            listDataAll: [],
            date: [],
            form: {
                classId: '',
                startTime: '',
                endTime: '',
                status: 0,
            },
            keyword: '',
            classList: [],
            pageNo: 1,
            pageSize: 10,
            totals: 0,
            icVisible: false,
            invitationCode: '',
            searchTimer: null,
            timer: null,
            curClassName: '',
        };
    },
    watch: {
        keyword: function(val) {
            clearTimeout(this.searchTimer)
            this.searchTimer = setTimeout(() => {
                this.initData()
            },500)
        }
    },
    mounted() {
        this.getClass()
        this.getData()
        this.timer = setInterval(this.getData,1000)
        this.$once('hook:beforeDestroy',() => {
            clearInterval(this.timer)
        })
    },
    methods: {
        getData() {
            let data = {
                classId: this.form.classId,
                role: this.roleId,
                type: '',
                userId: this.userId,
                startTime: this.form.startTime,
                stopTime: this.form.endTime,
                searchContent: this.core.encodeString(this.keyword),
                status: this.form.status,
                pageNum: 1,
                pageSize: 10000,
            }
            this.$post(this.api.stuAssessmentByScreen,data).then(res => {
                let list = res.list.list
                let result = []
                let classId = this.form.classId
                let classList = this.classList.map(n => n.classId)
                list.map(n => {
                    let classIds = n.classId.split(',')
                    let className = n.className.split(',')
                    if(classIds.length > 1){
                        classIds.map((e,i) => {
                            let item = JSON.parse(JSON.stringify(n))
                            item.classId = e
                            item.className = className[i]
                            if(classList.includes(Number(e))){
                                if(!classId || classId == e) result.push(item)
                            }
                        })
                    }else{
                        result.push(n)
                    }
                })
                this.listDataAll = result
                this.totals = result.length
                this.getRecord()
            }).catch(res => {})
        },
        getRecord(){
            this.$post(this.api.fictitiousRecord, { 
                classId: '',
                userId: this.userId,
                page: 1,
                size: 1000,
                searchContent: '',
                source: 2,
                systemId: 3
            }).then(res => {
                let list = this.listDataAll
                let recordList = res.data.list
                list.map(n => {
                    let same = recordList.find(e => e.className == n.className && e.experimentalName == n.experimentalName)
                    if(same){
                        n.reportId = same.reportId
                    }
                })
                this.listDataAll = list
                this.handlePage()
            }).catch(err => {})
        },
        initData(){
            this.pageNo = 1
            this.getData()
        },
        handlePage(){
            let list = this.listDataAll
            this.listData = list.slice((this.pageNo - 1) * this.pageSize,this.pageNo * this.pageSize)
        },
        getClass(){ 
            this.$get(`${this.api.mineClass}?userId=${this.userId}`).then(res => {
                this.classList = res.list
            }).catch(res => {});
        },
        getRowKeys(row) {
            return row.customerId;
        },
        handleCurrentChange(val) {
            this.pageNo = val
            this.handlePage()
        },
        entry(row) {
            if(row.status == 1){
                return this.$message.warning('该实验尚未开始')
            }else if(row.status == 3){
                return this.$message.warning('该实验已经结束')
            }else{
                this.core.toSubSystem(row.className,row.id,row.classId)
            }
        },
        show(row) {
            this.$router.push(`/showExperiment?id=${row.reportId}`)
        },
        goback() {
            this.$router.back()
        },
    }
};
</script>

<style scoped>
.mag{
    margin-right: 20px;
}
/deep/.el-tabs__nav-wrap::after{
    display: none;
}
.no-mb /deep/.el-form-item{
    margin-bottom: 0;
}
</style>