增加题目编辑功能
This commit is contained in:
zhl
parent
7087c37764
commit
1ee2fe9060
@ -7,13 +7,16 @@ export interface IQuestionData {
|
||||
a2?: string,
|
||||
a3?: string,
|
||||
a4?: string,
|
||||
group?: string,
|
||||
groups?: string[],
|
||||
tag?: string,
|
||||
quality: number
|
||||
subtag?: string,
|
||||
quality: number,
|
||||
withNext: boolean
|
||||
}
|
||||
|
||||
|
||||
export const defaultQuestionData: IQuestionData = {
|
||||
withNext: false,
|
||||
quality: 3,
|
||||
a1: '', question: ''
|
||||
|
||||
@ -32,7 +35,12 @@ export const getQuestion = (id: string, params: any) =>
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
|
||||
export const nextQuestion = (id: string) =>
|
||||
request({
|
||||
url: `/nextpuzzle`,
|
||||
method: 'post',
|
||||
data: {id}
|
||||
})
|
||||
|
||||
export const saveQuestion = (data: any) =>
|
||||
request({
|
||||
@ -46,3 +54,22 @@ export const deleteQuestion = (id: string) =>
|
||||
url: `/puzzle/${id}/delete`,
|
||||
method: 'post'
|
||||
})
|
||||
|
||||
export const getAllTags = () =>
|
||||
request({
|
||||
url: `/tags`,
|
||||
method: 'get',
|
||||
})
|
||||
|
||||
export const saveTag = (name: string) =>
|
||||
request({
|
||||
url: `/tag/save`,
|
||||
method: 'post',
|
||||
data: {name}
|
||||
})
|
||||
|
||||
export const getAllCategory = () =>
|
||||
request({
|
||||
url: `/question/categorys`,
|
||||
method: 'get',
|
||||
})
|
||||
|
||||
@ -4,25 +4,9 @@
|
||||
ref="postForm"
|
||||
:model="postForm"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
class="form-container"
|
||||
>
|
||||
<sticky
|
||||
:z-index="10"
|
||||
class-name="sub-navbar"
|
||||
>
|
||||
<el-button @click="onCancel">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button
|
||||
v-loading="loading"
|
||||
style="margin-left: 10px;"
|
||||
type="success"
|
||||
@click="submitForm"
|
||||
>
|
||||
保存
|
||||
</el-button>
|
||||
|
||||
</sticky>
|
||||
|
||||
<div class="createPost-main-container">
|
||||
<el-row>
|
||||
@ -46,7 +30,6 @@
|
||||
<el-col :span="6">
|
||||
<el-form-item
|
||||
style="margin-bottom: 40px;"
|
||||
label-width="100px"
|
||||
label="答案:"
|
||||
>
|
||||
<el-input
|
||||
@ -59,7 +42,6 @@
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item
|
||||
label-width="90px"
|
||||
label="评分:"
|
||||
class="postInfo-container-item"
|
||||
>
|
||||
@ -78,7 +60,6 @@
|
||||
<el-col :span="6">
|
||||
<el-form-item
|
||||
style="margin-bottom: 40px;"
|
||||
label-width="100px"
|
||||
label="混淆答案1:"
|
||||
>
|
||||
<el-input
|
||||
@ -91,7 +72,6 @@
|
||||
<el-col :span="6">
|
||||
<el-form-item
|
||||
style="margin-bottom: 40px;"
|
||||
label-width="100px"
|
||||
label="混淆答案2:"
|
||||
>
|
||||
<el-input
|
||||
@ -104,7 +84,6 @@
|
||||
<el-col :span="6">
|
||||
<el-form-item
|
||||
style="margin-bottom: 40px;"
|
||||
label-width="100px"
|
||||
label="混淆答案3:"
|
||||
>
|
||||
<el-input
|
||||
@ -115,27 +94,98 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="分类:"
|
||||
>
|
||||
<el-cascader-panel
|
||||
:options="typeOptions"
|
||||
v-model="typeSelect"
|
||||
filterable
|
||||
size="medium"
|
||||
style="width: 50%"
|
||||
v-on:change="typechange">
|
||||
</el-cascader-panel>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="TAGS:"
|
||||
>
|
||||
<el-select
|
||||
v-model="postForm.groups"
|
||||
multiple
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
style="width: 50%"
|
||||
@change="tagChange"
|
||||
placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in tagOptions"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
v-loading="loading"
|
||||
@click="submitForm"
|
||||
>
|
||||
保存
|
||||
</el-button>
|
||||
<el-button
|
||||
v-loading="loading"
|
||||
style="margin-left: 10px;"
|
||||
type="warning"
|
||||
@click="saveNext"
|
||||
>
|
||||
保存&下一题
|
||||
</el-button>
|
||||
<el-button
|
||||
v-loading="loading"
|
||||
style="margin-left: 10px;"
|
||||
type="danger"
|
||||
@click="deleteRecord"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
<el-button @click="onCancel">
|
||||
取消
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { AppModule } from '@/store/modules/app'
|
||||
import { TagsViewModule, ITagView } from '@/store/modules/tags-view'
|
||||
import { ITagView, TagsViewModule } from '@/store/modules/tags-view'
|
||||
import MaterialInput from '@/components/MaterialInput/index.vue'
|
||||
import Sticky from '@/components/Sticky/index.vue'
|
||||
import Tinymce from '@/components/Tinymce/index.vue'
|
||||
import UploadImage from '@/components/UploadImage/index.vue'
|
||||
import { Form } from 'element-ui'
|
||||
import {
|
||||
defaultQuestionData,
|
||||
getQuestion,
|
||||
getQuestions,
|
||||
saveQuestion
|
||||
defaultQuestionData, deleteQuestion, getAllCategory,
|
||||
getAllTags,
|
||||
getQuestion, nextQuestion,
|
||||
saveQuestion, saveTag
|
||||
} from '@/api/question'
|
||||
import { saveCoupon } from '@/api/coupon'
|
||||
|
||||
@Component({
|
||||
name: 'QuestionPrepare',
|
||||
@ -173,6 +223,10 @@ export default class extends Vue {
|
||||
private rules = {
|
||||
title: [{ validator: this.validateRequire }],
|
||||
}
|
||||
private typeOptions: any[] = []
|
||||
private typeSelect: string[] = []
|
||||
private tagSet: Set<string> = new Set()
|
||||
private tagOptions: string[] = []
|
||||
|
||||
private tempTagView?: ITagView
|
||||
|
||||
@ -187,10 +241,9 @@ export default class extends Vue {
|
||||
if (id) {
|
||||
this.fetchData(id)
|
||||
}
|
||||
// Why need to make a copy of this.$route here?
|
||||
// Because if you enter this page and quickly switch tag, may be in the execution of this.setTagsViewTitle function, this.$route is no longer pointing to the current page
|
||||
// https://github.com/PanJiaChen/vue-element-admin/issues/1221
|
||||
this.tempTagView = Object.assign({}, this.$route)
|
||||
this.getRemoteTags()
|
||||
this.getRemoteCategory()
|
||||
}
|
||||
|
||||
deactivated() {
|
||||
@ -203,6 +256,7 @@ export default class extends Vue {
|
||||
try {
|
||||
const { data } = await getQuestion(id, { /* Your params here */ })
|
||||
this.postForm = data
|
||||
this.typeSelect = [this.postForm.tag || '', this.postForm.subtag || '']
|
||||
// Just for test
|
||||
const title = this.lang === 'zh' ? '编辑题目' : 'Edit Question'
|
||||
// Set tagsview title
|
||||
@ -226,11 +280,58 @@ export default class extends Vue {
|
||||
document.title = `${title} - ${this.postForm._id}`
|
||||
}
|
||||
|
||||
private typechange(val: string[]) {
|
||||
this.postForm.tag = this.typeSelect[0]
|
||||
this.postForm.subtag = this.typeSelect[1]
|
||||
}
|
||||
|
||||
private async tagChange(tags: string[]) {
|
||||
console.log(`tagchange: `, tags)
|
||||
for(let tag of tags) {
|
||||
if (!this.tagSet.has(tag)) {
|
||||
this.tagSet.add(tag)
|
||||
this.tagOptions.push(tag)
|
||||
await saveTag(tag)
|
||||
}
|
||||
}
|
||||
}
|
||||
private async getRemoteTags() {
|
||||
let { data } = await getAllTags()
|
||||
console.log(data)
|
||||
this.tagSet = new Set(data)
|
||||
this.tagOptions = data
|
||||
}
|
||||
|
||||
private async getRemoteCategory() {
|
||||
let {data} = await getAllCategory()
|
||||
for (let cat of data) {
|
||||
let subArr = []
|
||||
for (let s of cat.children) {
|
||||
subArr.push({
|
||||
value: s._id,
|
||||
label: s.name
|
||||
})
|
||||
}
|
||||
this.typeOptions.push({
|
||||
value: cat._id,
|
||||
label: cat.name,
|
||||
children: subArr
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
private async submitForm() {
|
||||
await this.saveRecord(false)
|
||||
}
|
||||
private async saveNext() {
|
||||
await this.saveRecord(true)
|
||||
}
|
||||
private async saveRecord(withNext: boolean) {
|
||||
const form = <Form>this.$refs.postForm
|
||||
try {
|
||||
await form.validate()
|
||||
this.loading = true
|
||||
this.postForm.withNext = withNext
|
||||
const {data} = await saveQuestion(this.postForm)
|
||||
this.postForm = data
|
||||
this.loading = false
|
||||
@ -242,9 +343,26 @@ export default class extends Vue {
|
||||
})
|
||||
} catch (err) {
|
||||
console.error('Submit Error!')
|
||||
this.loading = false
|
||||
return false
|
||||
}
|
||||
}
|
||||
private async deleteRecord() {
|
||||
try {
|
||||
this.loading = true
|
||||
await this.$confirm('确认删除当前记录?', 'Warning', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
await deleteQuestion(this.postForm._id!)
|
||||
const {data} = await nextQuestion(this.postForm._id!)
|
||||
this.postForm = data
|
||||
this.loading = false
|
||||
} catch(e) {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
private async onCancel() {
|
||||
try {
|
||||
await this.$confirm('确认不保存当前记录?', 'Warning', {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user