rt-sim-training-client/src/views/competitionManage/generatePaper.vue

<template>
  <div style="width: 100%;height: 100%;">
    <div style="margin-top: 10px;position: absolute; right: 50px;">
      <el-button size="small" type="primary" @click="exportPaper">导出试题</el-button>
      <el-button size="small" type="primary" @click="goBack">返回</el-button>
    </div>
    <el-card style="width: 45%;margin-left: 50px;margin-top: 60px;display: inline-block;height: calc(100% - 100px);">
      <div slot="header">
        <span>理论试题列表</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="addTheoryQuestion">添加试题</el-button>
        <el-button style="float: right; padding: 3px 0;margin-right: 5px" type="text" @click="theoryReview">预览</el-button>
      </div>
      <el-table
        :data="theoryQuestionList"
        style="width: 100%"
        height="100%"
        :summary-method="getSummaries"
        :show-summary="showSummary"
        :row-style="handleRowStyle"
      >
        <el-table-column prop="type" label="类型" width="100">
          <template slot-scope="scope">
            <el-tag type="primary" disable-transitions>{{ QuestionTypeMap[scope.row.type] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="topic" label="题目" show-overflow-tooltip="">
          <template slot-scope="scope">
            <span v-html="scope.row.topic" />
          </template>
        </el-table-column>
        <el-table-column prop="score" label="分值" width="100">
          <template slot-scope="scope">
            <span v-if="!scope.row.editScope" @click="editScope(scope.row)">{{ scope.row.score }}</span>
            <i v-if="!scope.row.editScope" class="el-icon-edit" @click="editScope(scope.row)" />
            <el-input-number v-if="scope.row.editScope" v-model="scope.row.score" v-focus="scope.row.editFocus" :controls="noControls" :min="0" size="mini" style="width: 90px" @blur="editScopeBlur(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column prop="operate" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="removeTheoryQuestion(scope.row)">移出</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card style="width: 45%;margin-left: calc(10% - 100px);margin-top: 60px;display: inline-block;height: calc(100% - 100px);">
      <div slot="header">
        <span>实操试题列表</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="addOperateQuestion">添加试题</el-button>
        <el-button style="float: right; padding: 3px 0;margin-right: 5px" type="text" @click="operateReview">预览</el-button>
      </div>
      <el-table
        :data="operateQuestionList"
        style="width: 100%"
        height="100%"
        :row-style="handleRowStyle"
        :summary-method="getSummaries"
        :show-summary="showSummary"
      >
        <el-table-column prop="name" label="实操名称" />
        <el-table-column prop="creatorName" label="创建人" />
        <el-table-column prop="score" label="分值">
          <template slot-scope="scope">
            <span v-if="!scope.row.editScope" @click="editScope(scope.row)">{{ scope.row.score }}</span>
            <i v-if="!scope.row.editScope" class="el-icon-edit" @click="editScope(scope.row)" />
            <el-input-number v-if="scope.row.editScope" v-model="scope.row.score" v-focus="scope.row.editFocus" :controls="noControls" :min="0" size="mini" @blur="editScopeBlur(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column prop="operate" label="操作">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="removeOperateQuestion(scope.row)">移出</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <set-exam-time ref="setExamTime" :theory-question-list="theoryQuestionList" :operate-question-list="operateQuestionList" />
    <theory-review ref="theoryReview" :theory-question-list="theoryQuestionList" />
    <theory-question ref="theoryQuestion" :theory-index-list="theoryIndexList" @addQuestion="addTheoryQuestionList" @removeQuestion="removeTheoryQuestion" />
    <operate-question ref="operateQuestion" :operate-index-list="operateIndexList" @addQuestion="addOperateQuestionList" @removeQuestion="removeOperateQuestion" />
  </div>
</template>

<script>
import TheoryReview from './theoryReview';
import TheoryQuestion from './theoryQuestion';
import OperateQuestion from './operateQuestion';
import SetExamTime from './setExamTime';
export default {
    name: 'GeneratPaper',
    components: {
        SetExamTime,
        TheoryReview,
        TheoryQuestion,
        OperateQuestion
    },
    data() {
        return {
            QuestionTypeMap: {
                select: '选择题',
                judge: '判断题'
            },
            showSummary: true,
            noControls: false,
            theoryQuestionList: [], // 理论试卷试题列表
            operateQuestionList: [], // 实操试卷试题列表
            theoryIndexList: [], // 理论试卷试题索引列表
            operateIndexList: []// 实操试卷试题索引列表
        };
    },
    methods: {
        removeOperateQuestion(row) {
            const index = this.operateIndexList.indexOf(row.id);
            this.operateIndexList.splice(index, 1);
            this.operateQuestionList.splice(index, 1);
        },
        removeTheoryQuestion(row) {
            const index = this.theoryIndexList.indexOf(row.id);
            this.theoryIndexList.splice(index, 1);
            this.theoryQuestionList.splice(index, 1);
        },
        addTheoryQuestionList(row) {
            if (this.theoryQuestionList.length) {
                this.theoryIndexList.push(row.id);
                this.theoryQuestionList.push(row);
            } else {
                this.theoryIndexList = [row.id];
                this.theoryQuestionList = [row];
            }
        },
        addOperateQuestionList(row) {
            if (this.operateQuestionList.length) {
                this.operateIndexList.push(row.id);
                this.operateQuestionList.push(row);
            } else {
                this.operateIndexList = [row.id];
                this.operateQuestionList = [row];
            }
        },
        addTheoryQuestion() {
            this.$refs.theoryQuestion.doShow();
        },
        addOperateQuestion() {
            this.$refs.operateQuestion.doShow();
        },
        goBack() {
            this.$router.go(-1);
        },
        theoryReview() {
            this.$refs.theoryReview.doShow();
        },
        operateReview() {
        },
        editScope(row) {
            this.$set(row, 'editScope', true);
            this.$nextTick(() => {
                this.$set(row, 'editFocus', true);
            });
        },
        editScopeBlur(row) {
            this.$set(row, 'editScope', false);
            this.$set(row, 'editFocus', true);
            if (row.score > 0) {
                this.$set(row, 'isError', false);
            }
            this.showSummary = false;

            this.$nextTick(() => {
                this.getSummaries({data: this.theoryQuestionList});
            });
        },
        handleRowStyle({row, rowIndex}) {
            return row.isError ? {background: '#F00'} : {background: '#FFF'};
        },
        getSummaries(param) {
            const { data } = param;
            const sums = [];
            sums[0] = '总分';
            const values = data.map(item => Number(item.score));
            if (!values.every(value => isNaN(value))) {
                sums[2] = values.reduce((prev, curr) => {
                    const value = Number(curr);
                    if (!isNaN(value)) {
                        return prev + curr;
                    } else {
                        return prev;
                    }
                }, 0);
                sums[2] += ' 分';
            }
            this.showSummary = true;
            return sums;
        },
        exportPaper() {
            let flag = false;
            this.theoryQuestionList.forEach((item) => {
                if (item.score <= 0) {
                    flag = true;
                    this.$set(item, 'isError', true);
                }
            });
            this.operateQuestionList.forEach((item) => {
                if (item.score <= 0) {
                    flag = true;
                    this.$set(item, 'isError', true);
                }
            });
            if (flag) {
                this.$message.error('试题分分值不得为0');
            } else {
                this.$refs.setExamTime.doShow();
            }
        }
    }
};
</script>

<style scoped>
/deep/
.el-card__body{
	height: calc(100% - 47px);
}
/deep/
.el-table__body-wrapper {
	height: calc(100% - 97px) !important;
}
</style>