|
|
@@ -0,0 +1,166 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container" v-loading="loading">
|
|
|
+ <el-card>
|
|
|
+ <mx-condition :query-params="queryParams" :require-fields="requireFields" @query="handleQuery"
|
|
|
+ @invalid="handleInvalid" label-width="80px"></mx-condition>
|
|
|
+ </el-card>
|
|
|
+ <evaluation-empty v-if="emptyTitle" :title="emptyTitle" class="mt20"></evaluation-empty>
|
|
|
+ <el-card v-else class="mt20">
|
|
|
+ <template #header>
|
|
|
+ <div class="fx-row fx-sta-cen">
|
|
|
+ <el-button circle class="el-icon-refresh" @click="handleQuery"></el-button>
|
|
|
+ <div>
|
|
|
+ <span class="ml30">班级人数：{{ studentCount }}人</span>
|
|
|
+ <span class="ml20">已录取：{{ enrolledCount }}人</span>
|
|
|
+ <span class="ml20">未录取：{{ disenrollCount }}人</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <dynamic-table :columns="tableData.columns" :rows="tableData.rows">
|
|
|
+ <template #history="{row}">
|
|
|
+ <el-button type="text" @click="handleLogView(row)">查看</el-button>
|
|
|
+ </template>
|
|
|
+ </dynamic-table>
|
|
|
+ </el-card>
|
|
|
+ <el-dialog :title="'选科流程明细 - '+logDetail.studentName" v-if="logVisible"
|
|
|
+ :visible.sync="logVisible" :width="logDialogWidth">
|
|
|
+ <elective-generation-flow-log :groups="roundGroups" :histories="logDetail.histories"/>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import MxCondition from '@/components/MxCondition/mx-condition'
|
|
|
+import { getStudentSelected } from '@/api/webApi/elective/selected-subject'
|
|
|
+import config from '@/common/mx-config'
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+import DynamicTable from '@/components/dynamic-table/index'
|
|
|
+import { getClassGenerationDetails } from '@/api/webApi/elective/generation'
|
|
|
+import ElectiveGenerationFlowLog from '@/views/elective/generation/components/elective-generation-flow-log'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'ElectiveReleaseList',
|
|
|
+ components: { ElectiveGenerationFlowLog, DynamicTable, MxCondition },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ // query params
|
|
|
+ queryParams: {
|
|
|
+ year: '',
|
|
|
+ roundId: '',
|
|
|
+ releaseGeneration: '',
|
|
|
+ releaseQueryCode: ''
|
|
|
+ },
|
|
|
+ requireFields: ['year', 'roundId', 'releaseGeneration', 'releaseQueryCode'],
|
|
|
+ // status & results
|
|
|
+ electiveStatus: null,
|
|
|
+ releaseSummary: null,
|
|
|
+ // log
|
|
|
+ logVisible: false,
|
|
|
+ logDetail: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['currentUser']),
|
|
|
+ mappedParams() {
|
|
|
+ return {
|
|
|
+ year: this.queryParams.year,
|
|
|
+ roundId: this.queryParams.roundId,
|
|
|
+ generation: this.queryParams.releaseGeneration,
|
|
|
+ queryCode: this.queryParams.releaseQueryCode
|
|
|
+ }
|
|
|
+ },
|
|
|
+ currentOpt() {
|
|
|
+ return Object.values(config.electiveGenerationOptions).find(opt => opt.value == this.electiveStatus?.currentGeneration)
|
|
|
+ },
|
|
|
+ releaseOpt() {
|
|
|
+ return Object.values(config.electiveGenerationOptions).find(opt => opt.value == this.queryParams.releaseGeneration)
|
|
|
+ },
|
|
|
+ queryCodeOpt() {
|
|
|
+ return config.studentReleaseQueryCodes.find(opt => opt.id == this.queryParams.releaseQueryCode)
|
|
|
+ },
|
|
|
+ emptyTitle() {
|
|
|
+ if (!this.electiveStatus) return '暂无数据'
|
|
|
+ if (this.electiveStatus.currentGeneration <= config.electiveGenerationOptions.init.value) return '选科未开启'
|
|
|
+ if (this.queryParams.releaseGeneration > this.electiveStatus.currentGeneration) return '选科还未进行至' + this.releaseOpt.title
|
|
|
+ return ''
|
|
|
+ },
|
|
|
+ roundName() {
|
|
|
+ return this.electiveStatus?.selectResult?.name || ''
|
|
|
+ },
|
|
|
+ studentCount() {
|
|
|
+ return this.releaseSummary?.studentCount || 0
|
|
|
+ },
|
|
|
+ enrolledCount() {
|
|
|
+ return this.releaseSummary?.enrolledCount || 0
|
|
|
+ },
|
|
|
+ disenrollCount() {
|
|
|
+ return this.studentCount - this.enrolledCount
|
|
|
+ },
|
|
|
+ tableData() {
|
|
|
+ const rows = this.releaseSummary?.details || []
|
|
|
+ const columns = [
|
|
|
+ { prop: 'localRoundName', label: '选科次数' },
|
|
|
+ { prop: 'className', label: '班级' },
|
|
|
+ { prop: 'studentName', label: '姓名' },
|
|
|
+ { prop: 'localApplyGroupNames', label: '报名组合', hidden: this.queryCodeOpt.isEnroll },
|
|
|
+ { prop: 'rankInAppliedGroup', label: '报名排名', hidden: this.queryCodeOpt.isEnroll },
|
|
|
+ { prop: 'enrollGroupName', label: '录取组合', hidden: !this.queryCodeOpt.isEnroll },
|
|
|
+ { prop: 'rankInEnrolledGroup', label: '录取排名', hidden: !this.queryCodeOpt.isEnroll },
|
|
|
+ { prop: 'localEnrollGeneration', label: '录取情况' },
|
|
|
+ { prop: 'action', label: '操作', slotBody: 'history' }
|
|
|
+ ]
|
|
|
+ rows.forEach(row => {
|
|
|
+ row.localRoundName = this.roundName
|
|
|
+ if (this.queryCodeOpt.isEnroll) {
|
|
|
+ const enrollGenOpt = Object.values(config.electiveGenerationOptions).find(opt => opt.value == row['enrollGeneration'])
|
|
|
+ row.localEnrollGeneration = enrollGenOpt.enrollName
|
|
|
+ } else {
|
|
|
+ row.localApplyGroupNames = Array.isArray(row['applyGroupNames'])
|
|
|
+ ? row['applyGroupNames'].join('/')
|
|
|
+ : row['applyGroupNames']
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return {
|
|
|
+ rows,
|
|
|
+ columns
|
|
|
+ }
|
|
|
+ },
|
|
|
+ roundGroups() {
|
|
|
+ return this.electiveStatus?.selectResult?.groupList || []
|
|
|
+ },
|
|
|
+ logDialogWidth() {
|
|
|
+ const expectedWidth = (this.roundGroups.length + 3) * 160 // 假定elective-generation-flow-log 单格宽160
|
|
|
+ const finalWidth = Math.min(expectedWidth, window.innerWidth * 0.8)
|
|
|
+ return finalWidth + 'px'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async handleQuery() {
|
|
|
+ this.loading = true
|
|
|
+ try {
|
|
|
+ if (this.queryParams.roundId != this.electiveStatus?.selectResult?.roundId) {
|
|
|
+ const resStatus = await getStudentSelected(this.mappedParams)
|
|
|
+ this.electiveStatus = resStatus.data
|
|
|
+ }
|
|
|
+ const resSummary = await getClassGenerationDetails(this.mappedParams)
|
|
|
+ this.releaseSummary = resSummary.data
|
|
|
+ } finally {
|
|
|
+ this.loading = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleInvalid() {
|
|
|
+ this.electiveStatus = null
|
|
|
+ this.releaseSummary = null
|
|
|
+ },
|
|
|
+ handleLogView(row) {
|
|
|
+ this.logDetail = row
|
|
|
+ this.logVisible = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|
shilipojs