修改题目预处理为题目编辑

src/api/questionPre.ts

@@ -0,0 +1,44 @@
+import axios from 'axios'
+import {IQuestionData } from '@/api/types'
+export const defaultQuestionData: IQuestionData = {
+  option: [],
+  answer: '', attachment: '', parts: [], stars: 0, status: 0, type: 0,
+  id: '',
+  title: '',
+  tags: []
+}
+/**
+ * 随机获取一个未处理的题目
+ * @return {Promise<void>}
+ */
+export async function randomOne() {
+  let url = ''
+  return axios.get(url, {})
+    .then(res => {
+      return res.data
+    })
+}
+
+/**
+ * 更新一条记录
+ * @param data
+ * @return {Promise<void>}
+ */
+export async function updateOne(data: any) {
+  let url = ''
+  return axios.post(url, data)
+    .then(res => {
+      return res.data
+    })
+}
+
+/**
+ * 获取一个相关的列表
+ */
+export async function queryList(str: string) {
+  let url = ''
+  return axios.post(url, {key: str})
+    .then(res => {
+      return res.data
+    })
+}

src/api/types.d.ts

@@ -13,3 +13,30 @@ export interface IArticleData {
   type: string
   attachments: []
 }
+
+export interface IQuestionData {
+  id: string,
+  title: string,
+  /**
+   * 自动拆分的分词
+   */
+  parts?: string[],
+  tags: string[],
+  answer: string,
+  /**
+   * 混淆的答案
+   */
+  option: string[],
+  /**
+   * 题目类型
+   * 0: 文字题
+   * 1: 图文
+   */
+  type: number,
+  attachment?: string,
+  /**
+   * 评分
+   */
+  stars: number,
+  status: number,
+}

src/lang/en.ts

@@ -72,6 +72,8 @@ export default {
     marketing_points: 'Points Setting',
     question: 'Question Set',
     question_list: 'Question List',
+    question_prepare: 'Question Edit',
+    createQuestion: 'Create Question',
     shop: 'Shop Setting',
     game_setting: 'Game Setting'
   },

src/lang/zh.ts

@@ -71,7 +71,9 @@ export default {
     marketing_promo: '优惠码设置',
     marketing_points: '积分设置',
     question: '题库管理',
-    question_list: '列表',
+    question_list: '题目列表',
+    question_prepare: '题目编辑',
+    createQuestion: '创建题目',
     shop: '店铺设置',
     game_setting: '游戏设置'
   },

src/router/modules/question.ts

@@ -10,6 +10,26 @@ const questionRoutes: RouteConfig = {
     alwaysShow: true
   },
   children: [
+    {
+      path: 'create',
+      component: () => import(/* webpackChunkName: "example-create" */ '@/views/question/editor.vue'),
+      name: 'CreateQuestion',
+      meta: {
+        title: 'createQuestion',
+        icon: 'edit'
+      }
+    },
+    {
+      path: 'edit/:id(\\d+)',
+      component: () => import('@/views/question/editor.vue'),
+      name: 'QuestionEditor',
+      meta: {
+        title: 'question_prepare',
+        permissions: ['question:read'],
+        elicon: 'el-icon-arrow-right',
+        hidden: true
+      }
+    },
     {
       path: 'list',
       component: () => import('@/views/question/list.vue'),
@@ -17,7 +37,7 @@ const questionRoutes: RouteConfig = {
       meta: {
         title: 'question_list',
         permissions: ['question:read'],
-        elicon: 'el-icon-arrow-right'
+        elicon: 'el-icon-arrow-right',
       }
     },
   ]

src/settings.ts

@@ -12,7 +12,7 @@ interface ISettings {
 
 // You can customize below settings :)
 const settings: ISettings = {
-  title: 'Vue Typescript Admin',
+  title: '管理后台',
   showSettings: true,
   showTagsView: true,
   fixedHeader: false,

src/views/question/editor.vue

@@ -0,0 +1,287 @@
+<template>
+  <div class="createPost-container">
+    <el-form
+        ref="postForm"
+        :model="postForm"
+        :rules="rules"
+        class="form-container"
+    >
+      <sticky
+          :z-index="10"
+          :class-name="'sub-navbar '+postForm.status"
+      >
+        <el-button
+            v-loading="loading"
+            style="margin-left: 10px;"
+            type="success"
+            @click="submitForm"
+        >
+          Publish
+        </el-button>
+        <el-button
+            v-loading="loading"
+            type="warning"
+            @click="draftForm"
+        >
+          Draft
+        </el-button>
+      </sticky>
+
+      <div class="createPost-main-container">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item
+                style="margin-bottom: 40px;"
+                prop="title"
+            >
+              <material-input
+                  v-model="postForm.title"
+                  :maxlength="100"
+                  name="name"
+                  required
+              >
+                题目
+              </material-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="6">
+            <el-form-item
+                style="margin-bottom: 40px;"
+                label-width="100px"
+                label="答案:"
+            >
+              <el-input
+                  v-model="postForm.answer"
+                  :rows="1"
+                  placeholder="输入答案"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item
+                label-width="90px"
+                label="评分:"
+                class="postInfo-container-item"
+            >
+              <el-rate
+                  v-model="postForm.stars"
+                  :max="5"
+                  :colors="['#99A9BF', '#F7BA2A', '#ff5900']"
+                  :low-threshold="1"
+                  :high-threshold="5"
+                  style="display:inline-block"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="6">
+            <el-form-item
+                style="margin-bottom: 40px;"
+                label-width="100px"
+                label="混淆答案1:"
+            >
+              <el-input
+                  v-model="postForm.answer"
+                  :rows="1"
+                  placeholder="输入答案"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item
+                style="margin-bottom: 40px;"
+                label-width="100px"
+                label="混淆答案2:"
+            >
+              <el-input
+                  v-model="postForm.answer"
+                  :rows="1"
+                  placeholder="输入答案"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item
+                style="margin-bottom: 40px;"
+                label-width="100px"
+                label="混淆答案3:"
+            >
+              <el-input
+                  v-model="postForm.answer"
+                  :rows="1"
+                  placeholder="输入答案"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import { getArticle } from '@/api/articles'
+import { AppModule } from '@/store/modules/app'
+import { TagsViewModule, ITagView } 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 } from '@/api/questionPre'
+
+@Component({
+  name: 'QuestionPrepare',
+  components: {
+    MaterialInput,
+    Sticky,
+    Tinymce,
+    UploadImage
+  }
+})
+export default class extends Vue {
+  @Prop({ default: false }) private isEdit!: boolean
+
+  private validateRequire = (rule: any, value: string, callback: Function) => {
+    if (value === '') {
+      if (rule.field === 'imageURL') {
+        this.$message({
+          message: 'Upload cover image is required',
+          type: 'error'
+        })
+      } else {
+        this.$message({
+          message: rule.field + ' 是必填的',
+          type: 'error'
+        })
+      }
+      callback(new Error(rule.field + ' 是必填的'))
+    } else {
+      callback()
+    }
+  }
+
+
+  private postForm = Object.assign({}, defaultQuestionData)
+  private loading = false
+  private rules = {
+    title: [{ validator: this.validateRequire }],
+  }
+
+  private tempTagView?: ITagView
+
+
+  get lang() {
+    return AppModule.language
+  }
+
+
+  created() {
+    if (this.isEdit) {
+      const id = this.$route.params && this.$route.params.id
+      this.fetchData(parseInt(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)
+  }
+
+  deactivated() {
+  }
+
+  activated() {
+  }
+
+  private async fetchData(id: number) {
+    try {
+      const { data } = await getArticle(id, { /* Your params here */ })
+      this.postForm = data.article
+      // Just for test
+      this.postForm.title += `   Article Id:${this.postForm.id}`
+      const title = this.lang === 'zh' ? '编辑文章' : 'Edit Article'
+      // Set tagsview title
+      this.setTagsViewTitle(title)
+      // Set page title
+      this.setPageTitle(title)
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  private setTagsViewTitle(title: string) {
+    const tagView = this.tempTagView
+    if (tagView) {
+      tagView.title = `${title}-${this.postForm.id}`
+      TagsViewModule.updateVisitedView(tagView)
+    }
+  }
+
+  private setPageTitle(title: string) {
+    document.title = `${title} - ${this.postForm.id}`
+  }
+
+  private submitForm() {
+    (this.$refs.postForm as Form).validate(valid => {
+      if (valid) {
+        this.loading = true
+        this.$notify({
+          title: 'Success',
+          message: 'The post published successfully',
+          type: 'success',
+          duration: 2000
+        })
+        // Just to simulate the time of the request
+        setTimeout(() => {
+          this.loading = false
+        }, 0.5 * 1000)
+      } else {
+        console.error('Submit Error!')
+        return false
+      }
+    })
+  }
+
+  private draftForm() {
+    this.$message({
+      message: 'The draft saved successfully',
+      type: 'success',
+      showClose: true,
+      duration: 1000
+    })
+  }
+
+}
+</script>
+
+
+<style lang="scss" scoped>
+.createPost-container {
+  position: relative;
+
+  .createPost-main-container {
+    padding: 40px 45px 20px 50px;
+
+    .postInfo-container {
+      position: relative;
+      @include clearfix;
+      margin-bottom: 10px;
+
+      .postInfo-container-item {
+        float: left;
+      }
+    }
+  }
+
+  .word-counter {
+    width: 40px;
+    position: absolute;
+    right: 10px;
+    top: 0px;
+  }
+}
+</style>

src/views/question/list.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="app-container">
+    <router-link to="/question/create">
+      <el-button
+          type="primary"
+          icon="el-icon-edit"
+      >
+        添加
+      </el-button>
+    </router-link>
+    <el-table
+        v-loading="listLoading"
+        :data="list"
+        border
+        fit
+        highlight-current-row
+        style="width: 100%;margin-top:30px;"
+    >
+
+      <el-table-column
+          width="180px"
+          align="center"
+          label="时间"
+      >
+        <template slot-scope="{row}">
+          <span>{{ row.displayTime | parseTime }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+          width="180px"
+          label="类型"
+      >
+        <template slot-scope="{row}">
+          <span>{{ row.type }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+          min-width="300px"
+          label="标题"
+      >
+        <template slot-scope="{row}">
+          <router-link
+              :to="'/question/edit/'+row._id"
+              class="link-type"
+          >
+            <span>{{ row.title }}</span>
+          </router-link>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+          align="center"
+          label="操作"
+          width="120"
+      >
+        <template slot-scope="{row}">
+          <router-link :to="'/question/edit/'+row.id">
+            <el-button
+                type="primary"
+                size="small"
+                icon="el-icon-edit"
+            >
+             编辑
+            </el-button>
+          </router-link>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="listQuery.page"
+        :limit.sync="listQuery.limit"
+        @pagination="getList"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { getArticles } from '@/api/articles'
+import { IArticleData } from '@/api/types'
+import Pagination from '@/components/Pagination/index.vue'
+
+@Component({
+  name: 'QuestionList',
+  components: {
+    Pagination
+  },
+  filters: {
+    parseTime: (timestamp: string) => {
+      return new Date(timestamp).toISOString()
+    }
+  }
+})
+
+export default class extends Vue {
+  private total = 0
+  private list: IArticleData[] = []
+  private listLoading = true
+  private listQuery = {
+    page: 1,
+    limit: 20
+  }
+
+  created() {
+    this.getList()
+  }
+
+  private async getList() {
+    this.listLoading = true
+    const { data } = await getArticles(this.listQuery)
+    this.list = data.items
+    this.total = data.total
+    // Just to simulate the time of the request
+    setTimeout(() => {
+      this.listLoading = false
+    }, 0.5 * 1000)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.edit-input {
+  padding-right: 100px;
+}
+
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+
+</style>