增加题目编辑功能

src/api/question.ts

@@ -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',
+  })

src/views/question/editor.vue

@@ -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,
+  defaultQuestionData, deleteQuestion, getAllCategory,
-  getQuestion,
+  getAllTags,
-  getQuestions,
+  getQuestion, nextQuestion,
-  saveQuestion
+  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', {