front/src/views/system/user/profile/components/round-history.vue

<template>
  <div>
    <el-button @click="historyVisible=true" size="small" icon="el-icon-alarm-clock">打开选科历史</el-button>
    <el-drawer :visible.sync="historyVisible" title="选科历史" size="60%">
      <mx-condition :query-params="queryParams" :require-fields="requireFields" @query="handleQuery"
                    @invalid="handleInvalidQuery"></mx-condition>
      <div class="mt20 pl20 pr20">
        <mx-table-dynamic :local-data="tableData"></mx-table-dynamic>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import MxCondition from '@/components/MxCondition/mx-condition'
import MxTableDynamic from '@/components/MxTableDynamic/index'
import { getSelectHistory } from '@/api/webApi/selection'
import { mapGetters } from 'vuex'

export default {
  name: 'round-history',
  components: { MxTableDynamic, MxCondition },
  data() {
    return {
      historyVisible: false,
      requireFields: ['year', 'roundId'],
      queryParams: {
        year: '',
        roundId: ''
      },
      tableData: {
        columns: [],
        rows: []
      }
    }
  },
  computed: {
    ...mapGetters(['isFrontMaster'])
  },
  beforeMount() {
    if (this.isFrontMaster) {
      this.queryParams = {
        ...this.queryParams,
        classGradeId: '',
        classId: ''
      }
    }
  },
  methods: {
    handleInvalidQuery() {
      this.tableData = {
        ...this.tableData,
        rows: []
      }
    },
    handleQuery(model) {
      getSelectHistory({
        year: model.year,
        roundId: model.roundId,
        gradeIds: model.classGradeId,
        classIds: model.classId
      }).then(res => {
        this.tableData = res.data
      })
    }
  }
}
</script>

<style scoped>

</style>