|
|
@@ -0,0 +1,408 @@
|
|
|
+<template>
|
|
|
+
|
|
|
+<el-dialog :title="title" :visible.sync="localShowDialog" width="60%">
|
|
|
+ <div class="dialog_center padding_20 page_search">
|
|
|
+ <div class="search_content">
|
|
|
+ <div class="content_left">
|
|
|
+ <el-select v-model="enrollmentYear" @change="ChangeFilter" placeholder="入学年份" class="select_width">
|
|
|
+ <el-option label="全部学届" value=""></el-option>
|
|
|
+ <el-option
|
|
|
+ v-for="item in graduatesList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="levelCode" @change="ChangeFilter" placeholder="选择学段" class="select_width">
|
|
|
+ <el-option label="全部学段" value=""></el-option>
|
|
|
+ <el-option
|
|
|
+ v-for="item in levelsList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="gradeCode" @change="ChangeFilter" placeholder="选择年级" class="select_width" >
|
|
|
+ <el-option label="全部年级" value=""></el-option>
|
|
|
+ <el-option
|
|
|
+ v-for="item in gradeList"
|
|
|
+ :key="item.gradeCode"
|
|
|
+ :label="item.gradeName"
|
|
|
+ :value="item.gradeCode">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-input class="input_width" v-model="keyWord" @input="ChangeFilter" placeholder="考试编号、考试名称">
|
|
|
+ <el-button @click="ChangeFilter" slot="append" icon="el-icon-search"></el-button>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page_jg"></div>
|
|
|
+ <FiltersItem :filtersData="filtersData" @selectItem="ChangeFilters" />
|
|
|
+ <div class="page_jg"></div>
|
|
|
+ <div class="page_table table_row_42">
|
|
|
+ <el-table ref="multipleTable" :key="benchTaskSelectKey" :data="tableData" border stripe row-key="id" @row-click="HandleClickChange" @selection-change="HandleSelectionChange" @select="HandleSelection">
|
|
|
+ <el-table-column width="55" align="center" v-if="!isMultiple">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="table_row_checked" >
|
|
|
+ <div class="icon_checked" v-if="radioId == scope.row.id">
|
|
|
+ <div class="checked_bg"></div>
|
|
|
+ </div>
|
|
|
+ <div v-else class="icon_item"></div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column type="selection" reserve-selection align="center" width="55" v-if="isMultiple">
|
|
|
+
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" prop="examDate" width="120" label="考试日期" >
|
|
|
+
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" prop="examName" label="考试名称" show-overflow-tooltip>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" prop="gradeName" width="100" label="年级" >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" prop="examType" width="100" label="考试类型">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" prop="courseNames" min-width="100" label="科目" show-overflow-tooltip>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="page_pagination" v-if="pageInfo.total>10">
|
|
|
+ <el-pagination
|
|
|
+ @current-change="ChangePage"
|
|
|
+ background
|
|
|
+ layout="prev,pager,next"
|
|
|
+ :page-size="pageInfo.pageSize"
|
|
|
+ :current-page="pageInfo.pageNum"
|
|
|
+ :total="pageInfo.total">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="localShowDialog = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="EnterSubmit()">确 定</el-button>
|
|
|
+ </div>
|
|
|
+</el-dialog>
|
|
|
+
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import FiltersItem from "@/components/FiltersItem_ruoyan.vue";
|
|
|
+ export default {
|
|
|
+ components: { FiltersItem },
|
|
|
+ props: {
|
|
|
+ showDialog: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },//是否显示弹窗
|
|
|
+
|
|
|
+ title:{
|
|
|
+ type: String,
|
|
|
+ default: '对标任务选择',
|
|
|
+ },//标题
|
|
|
+
|
|
|
+ isMultiple:{
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },//是否多选
|
|
|
+ benchTaskSelectKey: {
|
|
|
+ type: Number,
|
|
|
+ default: 0,
|
|
|
+ },
|
|
|
+ before: {
|
|
|
+ type: Number,
|
|
|
+ default: undefined,
|
|
|
+ },// 是否添加before参数
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ showDialog(newVal) {
|
|
|
+ this.localShowDialog = newVal; // 监听外部传入的 showDialog 变化
|
|
|
+ if(newVal) {
|
|
|
+ this.enrollmentYear = this.reportExamItem.graduates.toString();//届
|
|
|
+ this.levelCode = this.reportExamItem.levelCode.toString();//学段
|
|
|
+ this.gradeCode = this.reportExamItem.gradeCode;//年级
|
|
|
+ this.selectList = this.$store.state.report.lastExamSelectIds;
|
|
|
+ this.GetLocalFilterData();//从本地读取筛选数据
|
|
|
+ this.GetPreviousExamPageList()//获取数据
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ localShowDialog(newVal) {
|
|
|
+ this.$emit('update:showDialog', newVal); // 通知父组件显示状态变化
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ localShowDialog: this.showDialog, // 使用本地数据来控制显示
|
|
|
+ enrollmentYear:'',//学届
|
|
|
+ levelCode:'',//学段
|
|
|
+ gradeCode:'',//年级
|
|
|
+ keyWord:'',//搜索关键字
|
|
|
+ examType:'',//考试类型
|
|
|
+ examTypeList:[],//考试类型list
|
|
|
+ graduatesList:[],//选择学届list
|
|
|
+ levelsList:[],//选择学段list
|
|
|
+ gradeList:[],//选择年级原数组list
|
|
|
+ gradeAllList:[],//选择年级所有list
|
|
|
+ filtersData:[
|
|
|
+ {
|
|
|
+ name: '考试类型',
|
|
|
+ value: '',
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ label: '全部',
|
|
|
+ value: "",
|
|
|
+ },
|
|
|
+
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],//筛选数据
|
|
|
+ tableData:[],//表格数据
|
|
|
+
|
|
|
+ pageInfo: {
|
|
|
+ pageSize: 10,
|
|
|
+ pageNum: 1,
|
|
|
+ total: 0,
|
|
|
+ },//分页数据
|
|
|
+
|
|
|
+ radioId:'',//单选的考生id
|
|
|
+ radioName:'',//单选的考生name
|
|
|
+ selectList:[],//多选的考试
|
|
|
+
|
|
|
+
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ reportExamItem() {
|
|
|
+ // let item = JSON.parse(localStorage.getItem('reportExamItem'));
|
|
|
+ return this.$store.state.report.examSelectItem;
|
|
|
+ },//分析报告公共参数变量
|
|
|
+ },
|
|
|
+
|
|
|
+ created() {
|
|
|
+ // this.enrollmentYear = this.reportExamItem.graduates.toString();//届
|
|
|
+ // this.levelCode = this.reportExamItem.levelCode.toString();//学段
|
|
|
+ // this.gradeCode = this.reportExamItem.gradeCode;//年级
|
|
|
+ this.selectList = this.$store.state.report.lastExamSelectIds;
|
|
|
+ console.log(this.selectList)
|
|
|
+ this.GetLocalFilterData();//从本地读取筛选数据
|
|
|
+ this.GetPreviousExamPageList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ //从本地读取数据
|
|
|
+ GetLocalFilterData() {
|
|
|
+ this.examType = ''
|
|
|
+ if(this.$store.state.report.filterDataObject != null) {
|
|
|
+ let filterDataObject = this.$store.state.report.filterDataObject;
|
|
|
+ //届别
|
|
|
+ this.graduatesList = filterDataObject.graduatesList;
|
|
|
+ console.log(this.graduatesList)
|
|
|
+ this.filtersData=[
|
|
|
+ {
|
|
|
+ name: '考试类型',
|
|
|
+ value: '',
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ label: '全部',
|
|
|
+ value: '',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ ];//筛选数据
|
|
|
+
|
|
|
+ //学段
|
|
|
+ this.levelsList = filterDataObject.levelsList;
|
|
|
+ console.log("打印学段列表",this.levelsList);
|
|
|
+ //年级list
|
|
|
+ this.gradeAllList = filterDataObject.gradeList;
|
|
|
+ console.log("this.gradeAllList",this.gradeAllList,this.levelCode);
|
|
|
+ this.gradeList = this.gradeAllList.filter(grade => grade.levelCode == this.levelCode);
|
|
|
+ //examTypeList考试类型
|
|
|
+ this.examTypeList = filterDataObject.examTypeList;
|
|
|
+ this.examTypeList.forEach(item => {
|
|
|
+ let obj = {
|
|
|
+ label: item.examName,
|
|
|
+ value: item.examType,
|
|
|
+ };
|
|
|
+ this.filtersData[0].list.push(obj);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //获取筛选的数据
|
|
|
+ ChangeFilters(e) {
|
|
|
+ // console.log('筛选切换事件', e);
|
|
|
+ this.filtersData[e.index].value = e.value;
|
|
|
+ this.examType = e.value;
|
|
|
+ this.ChangeFilter();
|
|
|
+ },
|
|
|
+ //多选选择行
|
|
|
+ HandleSelectionChange(val) {
|
|
|
+ // console.log("打印选择行",val);
|
|
|
+ // if(this.isMultiple) {
|
|
|
+ // this.selectList = val;
|
|
|
+ // }
|
|
|
+ // console.log("打印选择的selectList", this.selectList);
|
|
|
+ },
|
|
|
+ HandleSelection(e, row){
|
|
|
+ if(this.isMultiple) {
|
|
|
+ const index = this.selectList.indexOf(row.id);
|
|
|
+ if(index == -1){
|
|
|
+ this.selectList.push(row.id)
|
|
|
+ }else{
|
|
|
+ this.selectList.splice(index,1)
|
|
|
+ }
|
|
|
+ // this.$refs.multipleTable.toggleRowSelection(e);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //行选择事件
|
|
|
+ HandleClickChange(e) {
|
|
|
+ if(this.isMultiple) {
|
|
|
+ const index = this.selectList.indexOf(e.id);
|
|
|
+ if(index == -1){
|
|
|
+ this.selectList.push(e.id)
|
|
|
+ }else{
|
|
|
+ this.selectList.splice(index,1)
|
|
|
+ }
|
|
|
+ this.$refs.multipleTable.toggleRowSelection(e);
|
|
|
+ }else{
|
|
|
+ this.radioId = e.id;
|
|
|
+ this.radioName = e.examName;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //筛选
|
|
|
+ ChangeFilter() {
|
|
|
+ this.pageInfo.pageNum=1;
|
|
|
+ this.GetPreviousExamPageList();//分页获取历次考试列表
|
|
|
+ },
|
|
|
+ //分页
|
|
|
+ ChangePage(num) {
|
|
|
+ this.pageInfo.pageNum = num;
|
|
|
+ this.GetPreviousExamPageList();//分页获取历次考试列表
|
|
|
+ },
|
|
|
+
|
|
|
+ //分页获取历次考试列表
|
|
|
+ GetPreviousExamPageList() {
|
|
|
+ return
|
|
|
+ let params = {
|
|
|
+ examId: this.$store.state.report.examId, // 考试id
|
|
|
+ examLevel:this.$store.state.report.examLevel,
|
|
|
+ graduates: this.enrollmentYear, // 学届
|
|
|
+ levelCode: this.levelCode, // 学段
|
|
|
+ gradeCode: this.gradeCode, // 年级
|
|
|
+ word: this.keyWord, // 模糊查询
|
|
|
+ examType: this.examType, // 考试类型
|
|
|
+ courseCode: this.$store.state.report.filterObject.subjectCode, // 考试科目
|
|
|
+ examDate: '', // 考试日期
|
|
|
+ pageNum: this.pageInfo.pageNum,//页码
|
|
|
+ pageSize: this.pageInfo.pageSize,//每页内容
|
|
|
+ };
|
|
|
+
|
|
|
+ // 根据before属性动态添加或删除before参数
|
|
|
+ if (this.before !== undefined) {
|
|
|
+ params.before = this.before;
|
|
|
+ }
|
|
|
+ //获取历次考试列表
|
|
|
+ this.$api.reportSchool.selectPreviousAnalysisExamPageList(params).then(res => {
|
|
|
+ if(res.code==200 && res.data) {
|
|
|
+ this.tableData = res.data.records || [];
|
|
|
+ this.pageInfo.total = parseInt(res.data.total) || 0;//总条数
|
|
|
+ } else {
|
|
|
+ this.tableData = [];
|
|
|
+ this.pageInfo.total = 0
|
|
|
+ }
|
|
|
+
|
|
|
+ this.checkSelect()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ checkSelect() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if(this.isMultiple) {
|
|
|
+ let selectId = this.$store.state.report.lastExamSelectIds;
|
|
|
+ this.tableData.forEach(row => {
|
|
|
+ if (selectId.includes(row.id)) {
|
|
|
+ this.$refs.multipleTable && this.$refs.multipleTable.toggleRowSelection(row, true);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ this.radioId = this.$store.state.report.lastExamRadioId
|
|
|
+ this.radioName = this.$store.state.report.lastExamRadioName
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ //确定选择事件
|
|
|
+ EnterSubmit() {
|
|
|
+ console.log("确定选择事件",this.radioId);
|
|
|
+ console.log("确定选择事件",this.selectList);
|
|
|
+ let idList=[];
|
|
|
+ console.log(this.isMultiple);
|
|
|
+ if(this.isMultiple) {
|
|
|
+
|
|
|
+ //多选
|
|
|
+ // this.selectList.forEach(item=>{
|
|
|
+ // idList.push(item.id);
|
|
|
+ // });
|
|
|
+ if(this.selectList.length > 19) {
|
|
|
+ this.$message.warning('历次考试对比最多支持20场!');
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$store.commit("report/SetLastExamSelectIds", this.selectList)
|
|
|
+ } else {
|
|
|
+ //单选
|
|
|
+ idList.push(this.radioId);
|
|
|
+ this.$store.commit("report/SetLastExamRadioId", this.radioId)
|
|
|
+ this.$store.commit("report/SetLastExamRadioName", this.radioName ?? '')
|
|
|
+ }
|
|
|
+ this.$emit("GetSelectId");
|
|
|
+ this.localShowDialog = false;
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ };
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <style lang="scss" scoped>
|
|
|
+ :deep(.el-table__header) .el-checkbox {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .table_row_checked
|
|
|
+ {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .icon_checked
|
|
|
+ {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #fff;
|
|
|
+ border:1px solid #2E64FA;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .checked_bg
|
|
|
+ {
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #2E64FA;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon_item
|
|
|
+ {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 1px solid #00000020;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+
|