rt-sim-training-client/src/views/competitionManage/bankList/question-update-page.vue

<template>
  <div class="page">
    <div class="page__container">
      <el-card class="page__container-body">
        <question-form ref="info" :option="formModel" :remove="true" :update="true" @modify="doModify" />
      </el-card>
    </div>
    <div class="page__container-footer">
      <el-button type="primary" :is-create="true" @click="update">更 新</el-button>
      <el-button @click="back">返 回</el-button>
    </div>
    <dialog-modify-rich ref="rich" />
  </div>
</template>

<script>
import QuestionForm from './question-form.vue';
import DialogModifyRich from './dialog-modify-rich';
import { getQuestionInfo, updateOption } from '@/api/questionBank.js';

export default {
    components: {
        QuestionForm,
        DialogModifyRich
    },
    data() {
        return {
            formModel: {
                id: '',
                topic: '',
                type: 'select',
                answer: 0,
                optionList: []
            },
            optionList: []
        };
    },
    computed: {
        questionId() {
            return this.$route.params.questionId;
        }
    },
    watch: {
        '$router': function() {
            this.loadInitData();
        }
    },
    created() {
        this.loadInitData();
    },
    methods: {
        loadInitData() {
            if (this.$route.query.draft) {
                this.formModel = this.$store.state.race.preTheoryData[this.questionId];
                this.formModel.answer = this.formModel.optionList.findIndex(ele => ele.correct);
            } else {
                getQuestionInfo(this.questionId).then(resp => {
                    this.formModel = resp.data;
                    this.formModel.answer = this.formModel.optionList.findIndex(ele => ele.correct);
                });
            }
        },
        doBack() {
            this.$router.go(-1);
        },
        doModify(node) {
            this.$refs.rich.doShow(node);
        },
        update() {
            this.$refs.info.validate().then(valid => {
                if (this.$route.query.draft && valid) {
                    this.$store.state.race.preTheoryData[this.questionId] = this.formModel;
                    this.doBack();
                } else if (valid) {
                    updateOption(this.formModel).then(resp => {
                        this.doBack();
                    }).catch(error => {
                        this.$message.error(`创建试题失败: ${error.message}`);
                    });
                }
            }).catch(error => { this.$message.warning(error.message); });
        },
        back() {
            this.$router.go(-1);
        }
    }
};
</script>
<style lang="scss" scoped>
	.page {
		width: 100%;
		&__container {
			width: 55%;
			margin: auto;
			&-header {
				margin-bottom: 10px;
				.step-group {
                    margin: 10px 0;
					.box {
						display: flex;
						justify-content: flex-end;
					}
                }
			}

			&-body {
				padding: 40px;
			}

			&-footer {
				margin-top: 20px;
				display: flex;
				justify-content: center;
			}
		}
	}
</style>