105 lines
2.3 KiB
Vue
105 lines
2.3 KiB
Vue
|
<template>
|
||
|
<div class="page">
|
||
|
<div class="page__container">
|
||
|
<el-card class="page__container-body">
|
||
|
<item-options :option-list="optionList" :type="formModel.type" @modify="doModify" />
|
||
|
</el-card>
|
||
|
</div>
|
||
|
<div class="page__container-footer">
|
||
|
<el-button @click="back">返 回</el-button>
|
||
|
</div>
|
||
|
<dialog-modify-rich ref="rich" @update="update" />
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import ItemOptions from './item-options';
|
||
|
import DialogModifyRich from './dialog-modify-rich';
|
||
|
import { getQuestionInfo, getOptionsByQuestionId, updateOption } from '@/api/questionBank.js';
|
||
|
|
||
|
export default {
|
||
|
components: {
|
||
|
ItemOptions,
|
||
|
DialogModifyRich
|
||
|
},
|
||
|
data() {
|
||
|
return {
|
||
|
formModel: {
|
||
|
id: '',
|
||
|
topic: '',
|
||
|
type: '',
|
||
|
answer: 0
|
||
|
},
|
||
|
optionList: []
|
||
|
};
|
||
|
},
|
||
|
computed: {
|
||
|
questionId() {
|
||
|
return this.$route.params.questionId;
|
||
|
}
|
||
|
},
|
||
|
watch: {
|
||
|
'$router': function() {
|
||
|
this.loadInitData();
|
||
|
}
|
||
|
},
|
||
|
created() {
|
||
|
this.loadInitData();
|
||
|
},
|
||
|
methods: {
|
||
|
loadInitData() {
|
||
|
getQuestionInfo(this.questionId).then(resp => {
|
||
|
this.formModel = resp.data;
|
||
|
getOptionsByQuestionId(this.questionId).then(resp => {
|
||
|
this.optionList = resp.data;
|
||
|
});
|
||
|
});
|
||
|
},
|
||
|
doBack() {
|
||
|
this.$router.go(-1);
|
||
|
},
|
||
|
doModify(node) {
|
||
|
this.$refs.rich.doShow(node);
|
||
|
},
|
||
|
update(data) {
|
||
|
updateOption(data.id, data).then(resp => {
|
||
|
}).catch(error => {
|
||
|
this.$message.error(`更新选项失败: ${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>
|