评阅中心前端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

331 lines
10 KiB

<template>
<div class="page">
<h6 class="page-name">筛选</h6>
<div class="tool">
<ul class="filter">
<li>
<label>评阅时间</label>
<el-radio-group v-model="filter.month">
<el-radio v-for="(item, index) in dateList" :key="index" :label="item.id" border>{{ item.name
}}</el-radio>
</el-radio-group>
<el-date-picker class="m-l-10" v-model="date" align="right" unlink-panels type="daterange"
start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
clearable></el-date-picker>
</li>
<li>
<label>评阅阶段</label>
<el-select v-model="filter.reviewStage" clearable placeholder="请选择评阅阶段" @change="initData">
<el-option v-for="(item, i) in reviewStage" :key="i" :label="item.name" :value="item.id"></el-option>
</el-select>
</li>
<li>
<label>评阅情况</label>
<el-select v-model="filter.reviewStatus" clearable placeholder="请选择评阅情况" @change="initData">
<el-option v-for="(item, i) in reviewStatus" :key="i" :label="item.name" :value="item.id"></el-option>
</el-select>
</li>
<li>
<label>任务分配情况</label>
<el-select v-model="filter.taskAllocationStatus" clearable placeholder="请选择任务分配情况" @change="initData">
<el-option v-for="(item, i) in taskAllocationStatus" :key="i" :label="item.name"
:value="item.id"></el-option>
</el-select>
</li>
<li>
<label>搜索</label>
<el-input style="width: 300px;" placeholder="请输入大赛名称、阶段赛名称、比赛内容" prefix-icon="el-icon-search"
v-model="filter.keyWord" clearable />
</li>
</ul>
</div>
<el-table :data="list" :loading="loading" class="table" ref="table" stripe header-align="center" row-key="stageId">
<el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
<el-table-column prop="competitionName" label="大赛名称" align="center" min-width="120"
show-overflow-tooltip></el-table-column>
<el-table-column prop="stageName" label="阶段赛名称" align="center" min-width="100"></el-table-column>
<el-table-column prop="competitionContent" label="比赛内容" align="center" min-width="100"></el-table-column>
<el-table-column prop="totalAnswer" label="总答卷数" align="center" width="90"></el-table-column>
<el-table-column prop="unReviewedAnswer" label="待评答卷数" align="center" width="90"></el-table-column>
<el-table-column prop="reviewedAnswer" label="已评答卷数" align="center" width="90"></el-table-column>
<el-table-column prop="time" label="评阅时间" align="center" width="160" />
<el-table-column prop="stage" label="评阅阶段" align="center" width="90"></el-table-column>
<el-table-column prop="reviewStatus" label="评阅情况" align="center" width="90"></el-table-column>
<el-table-column prop="taskAllocationStatus" label="任务分配情况" align="center" width="100"></el-table-column>
<el-table-column label="操作" align="center" width="220" fixed="right">
<template slot-scope="scope">
<template v-if="scope.row.evaluationId && (scope.row.hasManualScoreType || scope.row.allowManualGrading)">
<el-button type="text" @click="toProgress(scope.row)">评阅进度</el-button>
<el-button type="text" @click="toSetup(scope.row)">修改评阅设置</el-button>
<el-button type="text" @click="toTask(scope.row)">任务分配</el-button>
</template>
<el-button v-else type="text" @click="toSetup(scope.row)">评阅设置</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination background :page-sizes="[10, 30, 50, 100, 200]" @current-change="currentChange"
@size-change="sizeChange" :current-page="page" layout="total, prev, pager, next, sizes"
:total="total"></el-pagination>
</div>
<Setup :row.sync="curRow" :visible.sync="setupVisible" />
<Progress :visible.sync="progressVisible" />
</div>
</template>
<script>
import Setup from './setup'
import Progress from './progress'
import Util from '@/libs/util'
import Setting from '@/setting'
import Const from '@/const/ques'
import Qs from 'qs'
import dayjs from 'dayjs'
export default {
components: { Setup, Progress },
data () {
return {
loading: false,
dateList: [
{
id: '',
name: '全部'
},
{
id: 0,
name: '不限时'
},
{
id: 1,
name: '近一个月'
},
{
id: 3,
name: '近三个月'
},
{
id: 6,
name: '近六个月'
}
],
reviewStage: [
{
id: 0,
name: '未开始'
},
{
id: 1,
name: '进行中'
},
{
id: 2,
name: '已完成'
},
],
reviewStatus: [
{
id: 0,
name: '未完成'
},
{
id: 1,
name: '已完成'
},
],
taskAllocationStatus: [
{
id: 0,
name: '未完成'
},
{
id: 1,
name: '已完成'
},
],
date: [],
filter: {
month: '',
startTime: '',
endTime: '',
reviewStage: '',
reviewStatus: '',
taskAllocationStatus: '',
keyWord: '',
},
now: '',
timer: null,
list: [],
page: +this.$route.query.page || 1,
pageSize: +this.$route.query.pageSize || 10,
total: 0,
setupVisible: false,
curRow: {},
progressVisible: false,
};
},
watch: {
'filter.month': function (val) {
if (val) {
let unit = 24 * 60 * 60 * 1000
this.date = [dayjs(new Date(Date.now() - unit * 30 * val)).format('YYYY-MM-DD'), dayjs(new Date(Date.now() + unit)).format('YYYY-MM-DD')]
} else {
this.date = []
}
},
date: function (val) {
if (val) {
this.filter.startTime = val[0]
this.filter.endTime = val[1]
} else {
this.filter.startTime = ''
this.filter.endTime = ''
}
this.initData()
},
'filter.keyWord': function () {
clearTimeout(this.searchTimer)
this.searchTimer = setTimeout(this.initData, 500)
},
},
mounted () {
this.$once('hook:beforeDestroy', function () {
clearInterval(this.timer)
})
const { query } = this.$route
if (query.page) {
const { month, startTime, endTime, reviewStage, reviewStatus, taskAllocationStatus, keyWord } = query
this.filter = {
month: !startTime && month ? +month : '',
reviewStage: reviewStage ? +reviewStage : '',
reviewStatus: reviewStatus ? +reviewStatus : '',
taskAllocationStatus: taskAllocationStatus ? +taskAllocationStatus : '',
keyWord: keyWord || '',
}
if (startTime) this.date = [startTime, endTime]
this.$router.push(`/allocationReview`).catch(() => { })
}
this.getList()
},
methods: {
async getList () {
try {
this.loading = true
const { pageList } = await this.$post(this.api.reviewSettingsList, {
...this.filter,
pageNum: this.page,
pageSize: this.pageSize,
platformSource: 0,
})
const list = pageList.records
list.forEach(e => {
// e.reviewStageName = this.reviewStage.find(n => n.id === e.reviewStage).name
// if (e.reviewStatus !== null) e.reviewStatusName = this.reviewStatus.find(n => n.id === e.reviewStatus).name
// e.reviewStageName = this.reviewStage.find(n => n.id === e.reviewStage).name
e.stage = '-'
e.time = e.evaluationId && e.hasManualScoreType ?
e.isTimed ?
e.startTime + ' ~ ' + e.endTime :
'不限时' :
'-'
})
this.list = list
this.getNow()
this.handleStage()
this.total = pageList.total
} finally {
this.loading = false
}
},
// 切换页码
currentChange (val) {
this.page = val
this.getList()
},
sizeChange (val) {
this.pageSize = val
this.initData()
},
initData () {
this.$refs.table.clearSelection()
this.page = 1
this.getList()
},
// 处理评阅阶段的显示
async handleStage () {
this.list.forEach(e => {
let stage = '-'
if (e.evaluationId && e.hasManualScoreType) {
if (e.isTimed) {
if (e.startTime && e.endTime) {
const startTime = new Date(e.startTime)
const endTime = new Date(e.endTime)
stage = this.now < startTime ?
'未开始' :
this.now > endTime ?
'已结束' :
'进行中'
}
} else {
stage = '进行中'
}
}
e.stage = stage
})
},
// 获取最新时间自动计算
async getNow () {
this.now = await Util.getNow()
clearInterval(this.timer)
this.timer = setInterval(() => {
this.now = new Date(this.now.setSeconds(this.now.getSeconds() + 1))
this.handleStage()
}, 1000)
},
// 评阅进度
toProgress (row) {
this.progressVisible = true
},
// 设置
toSetup (row) {
this.curRow = row
this.setupVisible = true
},
// 任务分配
toTask (row) {
this.$store.commit('user/setReferrer', {
i: 1,
url: `${this.$route.path}?${Qs.stringify(this.filter)}&page=${this.page}&pageSize=${this.pageSize}`
})
localStorage.setItem('reviewRow', JSON.stringify(row))
this.$router.push(`records?competitionId=${row.id}&stageId=${row.stageId}`)
},
}
};
</script>
<style lang="scss" scoped>
.tool {
margin-bottom: 0;
.filter {
flex-wrap: wrap;
li {
margin-bottom: 15px;
}
/deep/.el-radio {
margin-right: 0;
}
}
}
</style>