rt-sim-training-client/src/views/competitionManage/bankList/preImport.vue

<template>
  <div style="text-align: center;padding: 10px;">
    <div style="text-align: right;margin-top: 10px;margin-bottom: 10px;">
      <el-button
        size="mini"
        type="primary"
        @click="doSave"
      >保存</el-button>
      <el-button
        size="mini"
        type="danger"
        @click="doCancel"
      >取消</el-button>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="topic"
        label="题目"
      />
      <el-table-column prop="type" label="类型" width="100">
        <template slot-scope="scope">
          <el-tag
            type="primary"
            disable-transitions
          >{{ $ConstSelect.translate(scope.row.type, 'QuestionTypeList') }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="answer"
        label="答案"
      >
        <template slot-scope="scope">
          <el-tag v-for="(answer, index) in answerTags(scope.row)" :key="index" type="primary" style="margin-right: 10px;">{{ answer }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="edit(scope.$index, scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="doDelete(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page.sync="currentPage"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[10, 20, 30, 50]"
      :total="totalNum"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { UrlConfig } from '@/scripts/ConstDic';
import { importQuestionBand } from '@/api/race';

export default {
    data() {
        return {
            currentPage: 1,
            tableData: [],
            pageSize: 10
        };
    },
    computed: {
        userId() {
            return this.$store.state.user.id;
        },
        totalNum() {
            return this.$store.state.race.preTheoryData.length;
        }
    },
    mounted() {
        this.handlePreDataPaging();
    },
    methods: {
        edit(index, row) {
            this.$router.push({path: `${UrlConfig.bank.questionUpdate}/${index}`, query:{ draft: true }});
        },
        handlePreDataPaging() {
            const preData = this.$store.state.race.preTheoryData;
            const list = [];
            preData.forEach((item, index) => {
                if (index >= this.pageSize * (this.currentPage - 1) && index < this.pageSize * this.currentPage) {
                    list.push(item);
                }
            });
            this.tableData = list;
        },
        doDelete(index, row) {
            this.$confirm('删除试题，是否继续？', '提 示', {
                confirmButtonText: '确 定',
                cancelButtonText: '取 消',
                type: 'warning'
            }).then(() => {
                this.$store.state.race.preTheoryData.splice(index, 1);
                this.handlePreDataPaging();
            }).catch( () => { });
        },
        answerTags(row) {
            const answer = [];
            row.optionList.forEach((el, i) => {
                switch (row.type) {
                case 'select':
                    if (el.correct) {
                        answer.push(this.$asc2chart(i + 65));
                    }
                    break;
                case 'judge':
                    if (el.correct) {
                        answer.push(el.content);
                    }
                    break;
                case 'multi':
                    if (el.correct) {
                        answer.push(this.$asc2chart(i + 65));
                    }
                    break;
                case 'fill':
                    answer.push(el.content);
                    break;
                case 'answer':
                    answer.push(el.content);
                    break;
                }
            });
            return answer;
        },
        reloadTable() {
            this.queryList.reload();
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.handlePreDataPaging();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.handlePreDataPaging();
        },
        doSave() {
            importQuestionBand(this.$store.state.race.preTheoryData).then(resp => {
                this.$store.dispatch('race/setPreTheoryData', []);
                this.$message.success('导入题库成功!');
                this.$router.go(-1);
            }).catch(()=>{
                this.$message.error('导入题库失败！');
            });
        },
        doCancel() {
            this.$store.dispatch('race/setPreTheoryData', []);
            this.$router.go(-1);
        }
    }
};
</script>