游戏模块v1.8

src/api/answer.js

@@ -41,6 +41,6 @@ export const UpdateAnswer = (data, id) => request({
  * @param {*} params
  * @returns
  */
-export const getAnswerDetail = (id) => request({
-  url: `/admin/answer/${id}`
+export const getAnswerDetail = (id, params) => request({
+  url: `/admin/answer/${id}`, params
 })

src/api/gamelevelquestion.js

@@ -0,0 +1,38 @@
+import request from '@/utils/request'
+
+/**
+ * 删除关联
+ * @param {*} data
+ * @returns
+ */
+export const deleteGameLeverQuestion = (id) => request({
+  url: `/admin/game-level-question/${id}`, method: 'delete'
+})
+/**
+ * 更新测试游戏问题的分数
+ * @param {*} data
+ * @returns
+ */
+export const UpdateGameLeverQuestion = (data, id) => request({
+  url: `/admin/game-level-question/${id}`, method: 'put', data
+})
+
+/**
+* 添加关联游戏和题库的接口
+* @param {*} data
+* @returns
+*/
+export const saveGameLeverQuestion = (data) => request({
+  url: '/admin/game-level-question',
+  method: 'post',
+  data
+})
+
+/**
+ * 查询关联详情
+ * @param {*} params
+ * @returns
+ */
+export const getGameLeverQuestionDetail = (id, params) => request({
+  url: `/admin/game-level-question/${id}`, params
+})

src/api/question.js

@@ -41,6 +41,7 @@ export const UpdateQuestion = (data, id) => request({
  * @param {*} params
  * @returns
  */
-export const getQuestionDetail = (id) => request({
-  url: `/admin/question/${id}`
+export const getQuestionDetail = (id, params) => request({
+  url: `/admin/question/${id}`, params
 })
+

src/components/Question/drawer.vue

@@ -24,7 +24,7 @@
               </el-select>
             </el-input>
           </el-form-item>
-          <el-form-item v-if="resultMode === 'character_matched'" label="匹配特征：" :label-width="formLabelWidth">
+          <el-form-item label="匹配特征：" :label-width="formLabelWidth">
             <el-select
               v-model="form.characterList"
               multiple
@@ -57,8 +57,7 @@ export default {
     dialog: Boolean,
     questionId: String,
     answerId: String,
-    gameId: String,
-    resultMode: String
+    gameId: String
   },
   data() {
     return {
@@ -109,7 +108,7 @@ export default {
   watch: {
     answerId() {
       if (this.answerId) {
-        getAnswerDetail(this.answerId).then((res) => {
+        getAnswerDetail(this.answerId, { gameId: this.gameId }).then((res) => {
           this.form = res.data
           if (res.data.characterList) {
             const list = []
@@ -135,7 +134,6 @@ export default {
               })
               data.characterList = list
             }
-            data.questionId = this.questionId
             switch (data.option) {
               case 'A':data.sortNo = 1; break
               case 'B':data.sortNo = 2; break
@@ -143,8 +141,12 @@ export default {
               case 'D':data.sortNo = 4; break
               case 'E':data.sortNo = 5; break
               case 'F':data.sortNo = 6; break
-              case '对':data.sortNo = 1; break
-              case '错':data.sortNo = 2; break
+              case 'G':data.sortNo = 7; break
+              case 'H':data.sortNo = 8; break
+              case 'I':data.sortNo = 9; break
+              case 'J':data.sortNo = 10; break
+              case 'true':data.sortNo = 1; break
+              case 'false':data.sortNo = 2; break
               default:break
             }
             if (this.answerId) {
@@ -158,6 +160,7 @@ export default {
                 }
               })
             } else {
+              data.questionId = this.questionId
               saveAnswer(data).then((res) => {
                 this.$message('添加成功')
                 this.$emit('handleEditDrawer', true)

src/components/Question/edit.vue

@@ -1,22 +1,45 @@
 <template>
   <div style="padding: 20px">
     <h2 style="text-align: center">
-      游戏题目{{ questionId ? "编辑" : "添加" }}
+      游戏题目{{ gameQuestionMapId!==0 ? "编辑" : "添加" }}
     </h2>
-    <el-form ref="form" :rules="rules" :model="form" label-width="90px">
-      <el-form-item label="题目：" prop="title">
-        <el-input v-model="form.title" placeholder="请输入实例名（必填）">
+    <el-form ref="form" :model="form" label-width="90px">
+      <el-form-item label="题目：">
+        <el-input v-if="resultMode === 'character_matched'" v-model="form.title" placeholder="请输入实例名（必填）">
           <el-select slot="prepend" v-model="form.optType" style="width:100px" placeholder="请选择">
             <el-option label="单选题" value="single" />
             <el-option label="多选题" value="many" />
             <el-option label="判断题" value="judgment" />
           </el-select>
         </el-input>
+        <el-select
+          v-else
+          v-model="nowQuestionId"
+          filterable
+          default-first-option
+          style="width:100%"
+          placeholder="请选择"
+          :disabled="gameQuestionMapId!==0"
+        >
+          <el-option
+            v-for="item in questionList"
+            :key="item.questionId"
+            :label="item.title"
+            :value="item.questionId"
+          />
+        </el-select>
       </el-form-item>
-      <el-form-item v-if="questionId!==undefined && resultMode === 'examination'" label="正确选项：">
+      <el-form-item v-if="resultMode==='examination'" label="分数">
+        <el-input v-model="form.score" type="number" min="1" max="50" />
+      </el-form-item>
+      <el-form-item
+        v-if="gameQuestionMapId!==0 && resultMode === 'examination'"
+        label="正确选项："
+      >
         <!-- filterable可搜索 multiple可多选 default-first-option回车可选-->
         <el-select
           v-model="form.rightAnswer"
+          disabled
           style="width:100%"
           multiple
           filterable
@@ -32,14 +55,15 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="onSubmit('form')">确定</el-button>
+        <el-button type="primary" @click="onSubmit">确定</el-button>
         <el-button @click="$router.go(-1)">返回</el-button>
       </el-form-item>
     </el-form>
-    <el-card v-if="questionId!==undefined" shadow="never" body-style="padding:0" class="box-card">
+    <el-card v-if="gameQuestionMapId!==0" shadow="never" body-style="padding:0" class="box-card">
       <div slot="header" class="clearfix">
         <h3 style="float:left">答案列表</h3>
         <el-button
+          v-if=" resultMode !== 'examination'"
           type="primary"
           style="float: right"
           icon="el-icon-plus"
@@ -48,11 +72,12 @@
       </div>
       <ul style="list-style-type: none;margin:24px 0 24px -40px">
         <li v-for="answer in answerList" :key="answer.answerId" class="answerli">
-          <div style="flex:1;width: 100%;overflow: hidden;display: flex;" @click="handleEdit(answer)">
+          <div style="flex:1;width: 100%;overflow: hidden;display: flex;" @click="resultMode === 'examination'?'':handleEdit(answer)">
             <span style="width:45px">{{ answer.option }}</span>
             <span style="flex:1">{{ answer.content }}</span>
           </div>
           <el-popconfirm
+            v-if="resultMode !== 'examination'"
             style="width:30px"
             icon="el-icon-info"
             icon-color="red"
@@ -66,10 +91,9 @@
     </el-card>
     <QuestionDrawer
       :dialog="dialog"
-      :question-id="questionId"
+      :question-id="form.questionId"
       :answer-id="answerId"
       :game-id="gameId"
-      :result-mode="resultMode"
       @handleCloseDrawer="handleCloseDrawer"
       @handleEditDrawer="handleEditDrawer"
     />
@@ -77,8 +101,9 @@
 </template>
 <script>
 
-import { saveQuestion, UpdateQuestion, getQuestionDetail } from '@/api/question'
+import { getQuestionList } from '@/api/question'
 import { getAnswerList, deleteAnswer } from '@/api/answer'
+import { saveGameLeverQuestion, UpdateGameLeverQuestion, getGameLeverQuestionDetail } from '@/api/gamelevelquestion'
 import QuestionDrawer from '@/components/Question/drawer.vue'
 
 export default {
@@ -86,22 +111,29 @@ export default {
     QuestionDrawer
   },
   props: {
-    gameId: String,
-    questionId: String,
+    gameQuestionMapId: {
+      type: Number,
+      required: true
+    },
+    gameId: {
+      type: String,
+      required: true
+    },
     resultMode: String
   },
   data() {
     return {
-      rules: {
-        title: [{ required: true, message: '请输入游戏名称', trigger: 'blur' }]
-      },
       form: {
         title: undefined,
         optType: undefined,
         rightAnswer: undefined,
         gameId: undefined,
+        score: 0,
+        status: 1,
         questionId: undefined
       },
+      nowQuestionId: undefined, // 当前问题id用于获取答案列表 和匹配游戏模式传入答案编辑弹窗的questionId
+      questionList: [], // 用于存储测试模式下选择问题的下拉菜单的数据源
       // 答案列表（包括选项 内容 特征词列表）
       answerList: [],
       answerId: undefined,
@@ -112,37 +144,43 @@ export default {
   },
   watch: {
     // 用于点击左边改变右边的页面
-    questionId: function() {
-      if (this.questionId) {
-        this.rightList = []
-        getQuestionDetail(this.questionId).then((res) => {
+    gameQuestionMapId: function() {
+      if (this.gameQuestionMapId !== 0) {
+        getGameLeverQuestionDetail(this.gameQuestionMapId, { gameId: this.gameId }).then((res) => {
           this.form = res.data
           this.form.rightAnswer = res.data.rightAnswer?.split(',')
+          this.nowQuestionId = res.data.questionId
+          getAnswerList({ questionId: res.data.questionId }).then((res) => {
+            this.answerList = res.data.records
+          })
         })
-        this.handleAnswerList()
       } else {
         this.form = {
           title: undefined,
           optType: undefined,
+          score: 0,
+          status: 1,
           gameId: undefined,
           rightAnswer: undefined,
           questionId: undefined
         }
-        this.answerList = []
-        this.rightList = []
+        this.nowQuestionId = undefined
       }
     }
   },
+  mounted: function() {
+    getQuestionList({ pageSize: 999 }).then((res) => { this.questionList = res.data.records })
+  },
   methods: {
     // 添加答案
     onAddAnswer() {
-      this.dialog = true
       this.answerId = undefined
+      this.dialog = true
     },
     // 编辑答案
     handleEdit(val) {
-      this.dialog = true
       this.answerId = val.answerId
+      this.dialog = true
     },
     // 删除答案
     handleDelete(val) {
@@ -154,7 +192,6 @@ export default {
     // 关闭答案抽屉
     handleCloseDrawer() {
       this.dialog = false
-      this.answerId = undefined
     },
     // 编辑答案抽屉成功重新查询列表
     handleEditDrawer(val) {
@@ -163,14 +200,8 @@ export default {
     },
     // 查询当前问题答案列表
     handleAnswerList() {
-      getAnswerList({ questionId: this.questionId }).then((res) => {
+      getAnswerList({ questionId: this.nowQuestionId }).then((res) => {
         this.answerList = res.data.records
-        // 给正确答按下拉菜单数据源赋值
-        const list = []
-        this.answerList.map(item => {
-          list.push(item.option)
-        })
-        this.rightList = list
       })
     },
     // 转换特征数组数据格式
@@ -181,37 +212,50 @@ export default {
       })
       return nameList.toString()
     },
-    onSubmit(form) {
-      this.$refs[form].validate((valid) => {
-        if (valid) {
-          if (this.form.optType) {
-            const data = { ...this.form }
-            data.gameId = this.gameId
-            data.status = 1
-            if (this.questionId) {
-              if (data.rightAnswer) {
-                data.rightAnswer = data.rightAnswer.toString()
-              }
-              UpdateQuestion(data, this.questionId).then((res) => {
-                this.$message('修改问题成功')
-                // 告诉父页面问题表需要刷新并且关闭当前组件
-                this.$emit('handleRefreshQuestion', true)
-              })
-            } else {
-              saveQuestion(data).then((res) => {
-                this.$message('添加问题成功')
-                // 告诉父页面问题表需要刷新并且关闭当前组件
-                this.$emit('handleRefreshQuestion', true)
-                this.$emit('handleEditQuestion', res.data.questionId)
-              })
-            }
+    // 非空判断方法
+    handelNull() {
+      if (this.resultMode === 'examination') {
+        if (this.nowQuestionId) {
+          if (this.form.score && this.form.score !== 0) {
+            return true
           } else {
-            this.$message('请选择题型')
+            this.$message('请输入本题分数')
+            return false
           }
         } else {
+          this.$message('请选择题目')
           return false
         }
-      })
+      } else {
+        if (this.form.optType) {
+          if (this.form.title) {
+            return true
+          } else {
+            this.$message('请输入题目')
+            return false
+          }
+        } else {
+          this.$message('请选择题型')
+          return false
+        }
+      }
+    },
+    onSubmit() {
+      if (this.handelNull()) {
+        const data = { ...this.form }
+        if (this.gameQuestionMapId === 0) {
+          saveGameLeverQuestion({ ...data, gameId: this.gameId, questionId: this.nowQuestionId }).then((res) => {
+            this.$message('添加问题成功')
+            this.$emit('handleRefreshQuestion', true)
+            this.$emit('handleEditQuestion', res.data.gameQuestionMapId)
+          })
+        } else {
+          UpdateGameLeverQuestion({ ...data, gameId: this.gameId, questionId: this.nowQuestionId }, this.gameQuestionMapId).then((res) => {
+            this.$message('修改问题成功')
+            this.$emit('handleRefreshQuestion', true)
+          })
+        }
+      }
     }
   }
 }

src/components/Question/index.vue

@@ -3,6 +3,7 @@
     <el-card class="box-card" shadow="never" body-style="padding:0">
       <div slot="header" class="clearfix">
         <h3 style="float:left">题库列表</h3>
+        <h4 v-if="resultMode==='examination'" style="float:left;margin-left: 10px;">总分{{ totalScore }}</h4>
         <el-button
           type="primary"
           style="float: right"
@@ -40,24 +41,30 @@
   </div>
 </template>
 <script>
-import { getQuestionList, deleteQuestion } from '@/api/question'
+import { getQuestionList } from '@/api/question'
+import { deleteGameLeverQuestion } from '@/api/gamelevelquestion'
 
 export default {
   props: {
-    gameId: String
+    gameId: {
+      type: String,
+      required: true
+    },
+    resultMode: String
   },
   data() {
     return {
       tableData: [],
       pageSize: 20,
       currentPage: 1,
-      questionTotal: 0// 条目总数
+      questionTotal: 0, // 条目总数
+      totalScore: 0
     }
   },
   watch: {
     gameId: {
       handler(val) {
-        if (this.gameId) {
+        if (val) {
           this.onSearch()
         }
       },
@@ -85,11 +92,11 @@ export default {
       this.$emit('handleAddQuestion', true)
     },
     handleEdit(row) {
-      // 向外传送数据row.questionId
-      this.$emit('handleEditQuestion', row.questionId)
+      // 向外传送数据row.gameQuestionMapId
+      this.$emit('handleEditQuestion', row.gameQuestionMapId)
     },
     handleDelete(row) {
-      deleteQuestion(row.questionId).then(() => {
+      deleteGameLeverQuestion(row.gameQuestionMapId).then(() => {
         this.$message('删除问题成功')
         this.onSearch()
         // 关闭编辑问题页面防止编辑页面还没关闭就删除当前问题了
@@ -97,11 +104,15 @@ export default {
       })
     },
     onSearch() {
-      getQuestionList({ gameId: this.gameId, endDate: this.endDate, pageSize: this.pageSize }).then(
+      getQuestionList({ gameId: this.gameId, pageSize: this.pageSize }).then(
         (res) => {
           this.tableData = res.data.records
           this.questionTotal = res.data.total
           this.pageSize = res.data.size
+          this.totalScore = 0
+          res.data.records.map(item => {
+            this.totalScore += item.score
+          })
         }
       )
     }

src/icons/svg/question.svg

@@ -0,0 +1 @@
+<svg t="1641808834314" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3156" width="128" height="128"><path d="M687.510353 284.53208a58.008527 58.008527 0 0 1-58.622915-56.933347V35.90948a15.615711 15.615711 0 0 1 9.72782-13.823745 15.257318 15.257318 0 0 1 16.434896 3.27674l240.686747 233.877273a14.847725 14.847725 0 0 1 3.174341 16.383697 14.540531 14.540531 0 0 1-13.874943 8.908635h-197.525946z m0 56.933347h203.516235a29.74665 29.74665 0 0 1 21.350005 8.447844 30.565835 30.565835 0 0 1 9.21583 21.298806v538.818831a117.245831 117.245831 0 0 1-35.17375 81.560092 113.917893 113.917893 0 0 1-81.713688 32.357801H219.295015a113.764295 113.764295 0 0 1-81.713688-32.357801A117.245831 117.245831 0 0 1 102.407577 910.030908V113.988035A117.245831 117.245831 0 0 1 137.581327 32.427944 113.764295 113.764295 0 0 1 219.295015 0.070143h319.789284a31.231422 31.231422 0 0 1 31.538616 30.719431v196.809159c1.382374 64.152413 53.656607 115.095471 116.887438 113.866694m-409.592422 511.939329h468.164138a29.029863 29.029863 0 0 0 29.337058-28.466673 29.081062 29.081062 0 0 0-29.337058-28.517873H277.917931a29.081062 29.081062 0 0 0-29.337058 28.517873 29.029863 29.029863 0 0 0 29.337058 28.466673z m0-170.851239h468.164138a28.313076 28.313076 0 0 0 20.479622-8.038252 29.234659 29.234659 0 0 0 8.857436-20.428422 28.722669 28.722669 0 0 0-29.337058-28.159479H277.917931a28.722669 28.722669 0 0 0-29.337058 28.159479 29.439455 29.439455 0 0 0 8.806237 20.428422 28.517872 28.517872 0 0 0 20.530821 8.038252z m0-170.544045h292.704984a29.029863 29.029863 0 0 0 29.285859-28.466674 28.978664 28.978664 0 0 0-29.285859-28.466673H277.917931a28.978664 28.978664 0 0 0-29.337058 28.466673 29.029863 29.029863 0 0 0 29.337058 28.466674z" p-id="3157"></path></svg>

src/router/index.js

@@ -43,6 +43,27 @@ export const constantRoutes = [
     }]
   },
 
+  {
+    path: '/question',
+    component: Layout,
+    meta: { title: '测试题库管理', icon: 'form' },
+    children: [
+      {
+        path: 'question',
+        name: '题库列表',
+        component: () => import('@/views/question/index'),
+        meta: { title: '测试题库列表', icon: 'question' }
+      },
+      {
+        hidden: true,
+        path: 'question/deit',
+        name: 'questionEdit',
+        component: () => import('@/views/question/edit'),
+        meta: { title: '题目编辑', icon: 'question' }
+      }
+    ]
+  },
+
   {
     path: '/gameManage',
     component: Layout,

src/views/gameManage/edit.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="body_edit">
-    <!-- <h3 style="width:100%; margin:auto">游戏{{ gameId ? "编辑" : "新增" }}</h3> -->
     <el-tabs v-model="activeName">
       <el-tab-pane label="游戏详情" name="game">
         <el-form ref="form" :rules="rules" class="gameForm" :model="gameForm" label-width="100px">
@@ -64,15 +63,15 @@
             <Question
               ref="Question"
               :gameId="gameId"
-              @handleAddQuestion="questionId = undefined"
-              @handleCloseQuestion="questionId = undefined"
+              :resultMode="gameForm.resultMode"
+              @handleAddQuestion="gameQuestionMapId = 0"
+              @handleCloseQuestion="gameQuestionMapId = 0"
               @handleEditQuestion="handleEditQuestion"
             />
           </el-col>
           <el-col :span="12">
             <QuestionEdit
-              ref="QuestionEdit"
-              :questionId="questionId"
+              :gameQuestionMapId="gameQuestionMapId"
               :gameId="gameId"
               :resultMode="gameForm.resultMode"
               @handleRefreshQuestion="handleRefreshQuestion"
@@ -125,7 +124,7 @@ export default {
       ],
       gameId: undefined,
       activeName: 'game',
-      questionId: undefined,
+      gameQuestionMapId: 0,
       characterId: undefined
     }
   },
@@ -189,7 +188,7 @@ export default {
       this.$refs.GameCharacter.onSearch()
     },
     handleEditQuestion(val) {
-      this.questionId = val
+      this.gameQuestionMapId = val
     },
     handleRefreshQuestion() {
       this.$refs.Question.onSearch()

src/views/gameManage/index.vue

@@ -70,7 +70,6 @@ import { getGameList, deleteGame } from '@/api/game'
 export default {
   data() {
     return {
-      characterId: undefined,
       title: undefined,
       daterange: undefined,
       tableData: [],

src/views/question/drawer.vue

@@ -0,0 +1,153 @@
+<template>
+  <div>
+    <el-drawer
+      ref="drawer"
+      :show-close="false"
+      :wrapperClosable="false"
+      :title="answerId ?'编辑答案' : '添加答案'"
+      :before-close="handleClose"
+      :visible.sync="dialog"
+      direction="ltr"
+      custom-class="demo-drawer"
+    >
+      <div class="demo-drawer__content">
+        <el-form ref="form" :model="form" :rules="rules" style="margin:20px">
+          <el-form-item label="答案：" prop="content" :label-width="formLabelWidth">
+            <el-input v-model="form.content" placeholder="请输入答案（必填）">
+              <el-select slot="prepend" v-model="form.option" filterable allow-create default-first-option style="width:100px" placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-input>
+          </el-form-item>
+          <el-form-item style="text-align:center">
+            <el-button @click="handleClose">取 消</el-button>
+            <el-button type="primary" @click="onSubmit('form')">确 定</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+<script>
+import { getAnswerDetail, saveAnswer, UpdateAnswer } from '@/api/answer'
+export default {
+  props: {
+    dialog: Boolean,
+    questionId: String,
+    answerId: String
+  },
+  data() {
+    return {
+      rules: {
+        content: [{ required: true, message: '请输入答案内容', trigger: 'blur' }]
+      },
+      form: {
+        option: undefined,
+        content: undefined,
+        sortNo: 1,
+        status: 1
+      },
+      formLabelWidth: '120px',
+      options: [
+        {
+          value: 'A',
+          label: 'A'
+        },
+        {
+          value: 'B',
+          label: 'B'
+        },
+        {
+          value: 'C',
+          label: 'C'
+        },
+        {
+          value: 'D',
+          label: 'D'
+        },
+        {
+          value: 'true',
+          label: '对'
+        },
+        {
+          value: 'false',
+          label: '错'
+        }
+      ]
+    }
+  },
+  watch: {
+    answerId() {
+      if (this.answerId) {
+        getAnswerDetail(this.answerId).then((res) => {
+          this.form = res.data
+        })
+      }
+    }
+  },
+  methods: {
+    onSubmit(form) {
+      this.$refs[form].validate((valid) => {
+        if (valid) {
+          if (this.form.option) {
+            const data = { ...this.form }
+            switch (data.option) {
+              case 'A':data.sortNo = 1; break
+              case 'B':data.sortNo = 2; break
+              case 'C':data.sortNo = 3; break
+              case 'D':data.sortNo = 4; break
+              case 'E':data.sortNo = 5; break
+              case 'F':data.sortNo = 6; break
+              case 'G':data.sortNo = 7; break
+              case 'H':data.sortNo = 8; break
+              case 'I':data.sortNo = 9; break
+              case 'J':data.sortNo = 10; break
+              case 'true':data.sortNo = 1; break
+              case 'false':data.sortNo = 2; break
+              default:break
+            }
+            if (this.answerId) {
+              UpdateAnswer(data, this.answerId).then((res) => {
+                this.$message('修改成功')
+                this.$emit('handleEditDrawer', true)
+                this.form = {
+                  option: undefined,
+                  content: undefined
+                }
+              })
+            } else {
+              data.questionId = this.questionId
+              saveAnswer(data).then((res) => {
+                this.$message('添加成功')
+                this.$emit('handleEditDrawer', true)
+                this.form = {
+                  option: undefined,
+                  content: undefined
+                }
+              })
+            }
+          } else {
+            this.$message('请在灰色下拉菜单中添加选项')
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    handleClose() {
+      this.$emit('handleCloseDrawer', true)
+      this.form = {
+        option: undefined,
+        content: undefined
+      }
+    }
+  }
+}
+</script>
+<style>
+</style>

src/views/question/edit.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="body_edit">
+    <h2 style="text-align: center">
+      游戏题目{{ questionId ? "编辑" : "添加" }}
+    </h2>
+    <el-form ref="form" :rules="rules" :model="form" label-width="90px">
+      <el-form-item label="题目：" prop="title">
+        <el-input v-model="form.title" placeholder="请输入实例名（必填）">
+          <el-select slot="prepend" v-model="form.optType" style="width:100px" placeholder="请选择">
+            <el-option label="单选题" value="single" />
+            <el-option label="多选题" value="many" />
+            <el-option label="判断题" value="judgment" />
+          </el-select>
+        </el-input>
+      </el-form-item>
+      <el-form-item v-if="questionId!==undefined" label="正确选项：">
+        <!-- filterable可搜索 multiple可多选 default-first-option回车可选-->
+        <el-select
+          v-model="form.rightAnswer"
+          style="width:100%"
+          multiple
+          filterable
+          default-first-option
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in rightList"
+            :key="item"
+            :label="item"
+            :value="item"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">确定</el-button>
+        <el-button @click="$router.go(-1)">返回</el-button>
+      </el-form-item>
+    </el-form>
+    <el-card v-if="questionId!==undefined" shadow="never" body-style="padding:0" class="box-card">
+      <div slot="header" class="clearfix">
+        <h3 style="float:left">答案列表</h3>
+        <el-button
+          type="primary"
+          style="float: right"
+          icon="el-icon-plus"
+          @click="onAddAnswer"
+        >添加答案</el-button>
+      </div>
+      <ul style="list-style-type: none;margin:24px 0 24px -40px">
+        <li v-for="answer in answerList" :key="answer.answerId" class="answerli">
+          <div style="flex:1;width: 100%;overflow: hidden;display: flex;" @click="handleEdit(answer)">
+            <span style="width:45px">{{ answer.option }}</span>
+            <span style="flex:1">{{ answer.content }}</span>
+          </div>
+          <el-popconfirm
+            style="width:30px"
+            icon="el-icon-info"
+            icon-color="red"
+            title="确定删除这个答案吗？"
+            @onConfirm="handleDelete(answer)"
+          >
+            <el-button slot="reference" type="text" class="deleteQuestion" style="color:red">删除</el-button>
+          </el-popconfirm>
+        </li>
+      </ul>
+    </el-card>
+    <QuestionDrawer
+      :dialog="dialog"
+      :question-id="questionId"
+      :answer-id="answerId"
+      @handleCloseDrawer="handleCloseDrawer"
+      @handleEditDrawer="handleEditDrawer"
+    />
+  </div>
+</template>
+<script>
+
+import { saveQuestion, UpdateQuestion, getQuestionDetail } from '@/api/question'
+import { getAnswerList, deleteAnswer } from '@/api/answer'
+import QuestionDrawer from '@/views/question/drawer.vue'
+
+export default {
+  components: {
+    QuestionDrawer
+  },
+  data() {
+    return {
+      questionId: undefined,
+      rules: {
+        title: [{ required: true, message: '请输入游戏名称', trigger: 'blur' }]
+      },
+      form: {
+        title: undefined,
+        optType: undefined,
+        rightAnswer: undefined,
+        questionId: undefined
+      },
+      // 答案列表（包括选项 内容 特征词列表）
+      answerList: [],
+      answerId: undefined,
+      // 正确答案数据源
+      rightList: [],
+      dialog: false
+    }
+  },
+  watch: {
+    '$route.query.id': {
+      handler(val) {
+        if (val) {
+          this.questionId = val
+          getQuestionDetail(this.questionId).then((res) => {
+            this.form = res.data
+            this.form.rightAnswer = res.data.rightAnswer?.split(',')
+          })
+          this.handleAnswerList()
+        }
+      },
+      immediate: true // 页面加载时就启动
+    }
+  },
+  methods: {
+    // 添加答案
+    onAddAnswer() {
+      this.answerId = undefined
+      this.dialog = true
+    },
+    // 编辑答案
+    handleEdit(val) {
+      this.answerId = val.answerId
+      this.dialog = true
+    },
+    // 删除答案
+    handleDelete(val) {
+      deleteAnswer(val.answerId).then((res) => {
+        this.$message('删除答案成功')
+        this.handleAnswerList()
+      })
+    },
+    // 关闭答案抽屉
+    handleCloseDrawer() {
+      this.dialog = false
+    },
+    // 编辑答案抽屉成功重新查询列表
+    handleEditDrawer(val) {
+      this.handleCloseDrawer()
+      this.handleAnswerList()
+    },
+    // 查询当前问题答案列表
+    handleAnswerList() {
+      getAnswerList({ questionId: this.questionId }).then((res) => {
+        this.answerList = res.data.records
+        // 给正确答按下拉菜单数据源赋值
+        const list = []
+        this.answerList.map(item => {
+          list.push(item.option)
+        })
+        this.rightList = list
+      })
+    },
+    onSubmit(form) {
+      this.$refs[form].validate((valid) => {
+        if (valid) {
+          if (this.form.optType) {
+            const data = { ...this.form }
+            data.status = 1
+            if (this.questionId) {
+              if (data.rightAnswer) {
+                data.rightAnswer = data.rightAnswer.sort().toString()
+              }
+              UpdateQuestion(data, this.questionId).then((res) => {
+                this.$message('修改问题成功')
+              })
+            } else {
+              saveQuestion(data).then((res) => {
+                this.$message('添加问题成功')
+                this.$router.replace({
+                  name: 'questionEdit',
+                  query: { id: res.data.questionId }
+                })
+              })
+            }
+          } else {
+            this.$message('请选择题型')
+          }
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.answerli {
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  line-height:40px;
+  background-color: white;
+  padding:0 8px;
+  border: 1px solid #f0f2f5;
+}
+.answerli:hover {
+  background-color: rgb(230, 247, 255);
+}
+.answerli:nth-of-type(even) {
+  background: #f0f2f5;
+}
+</style>

src/views/question/index.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="body" style="font-size:14px">
+    <el-card class="box-card" shadow="never">
+      题库名称：
+      <el-input v-model="title" style="width: 200px; margin-right: 20px" />
+      <div style="float:right">
+        <el-button type="primary" @click="onSearch">查询</el-button>
+        <el-button @click="onReset">重置</el-button>
+        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">添加题目</el-button>
+      </div>
+    </el-card>
+    <el-table stripe :data="tableData" border style="width: 100%">
+      <el-table-column prop="title" label="题目名称" />
+      <el-table-column prop="createDate" label="创建时间">
+        <template slot-scope="scope">
+          {{
+            scope.row.createDate.substr(0, 10)
+          }}
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作">
+        <template slot-scope="scope">
+          <el-link :underline="false" style="margin-right:1em" type="primary">
+            <router-link
+              :to="{name: 'questionEdit', query: { id: scope.row.questionId }}"
+            >编辑</router-link>
+          </el-link>
+          <el-popconfirm
+            icon="el-icon-info"
+            icon-color="red"
+            title="确定删除这个问题吗？"
+            @onConfirm="handleDelete(scope.row)"
+          >
+            <el-button slot="reference" type="text" style="color:red">删除</el-button>
+          </el-popconfirm>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      v-show="gameTotal!==0"
+      style="float:right; margin:20px 0"
+      :total="gameTotal"
+      :current-page="currentPage"
+      :page-sizes="[4, 10, 20, 50]"
+      :page-size="pageSize"
+      layout="total, prev, pager, next, sizes"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+<script>
+import { getQuestionList, deleteQuestion } from '@/api/question'
+
+export default {
+  data() {
+    return {
+      title: undefined,
+      tableData: [],
+      //
+      pageSize: 10,
+      currentPage: 1,
+      gameTotal: 0 // 条目总数
+    }
+  },
+  mounted() {
+    this.onSearch()
+  },
+  methods: {
+    // 改变每页显示条数
+    handleSizeChange(val) {
+      this.pageSize = val
+      this.changePagination()
+    },
+    // 改变页码
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this.changePagination()
+    },
+    // 改变分页组件重新查询数据
+    changePagination() {
+      getQuestionList({
+        title: this.title,
+        pageNum: this.currentPage,
+        pageSize: this.pageSize
+      }).then((res) => {
+        this.tableData = res.data.records
+      })
+    },
+    handleAdd() {
+      this.$router.push({ name: 'questionEdit' })
+    },
+    handleDelete(row) {
+      deleteQuestion(row.questionId).then(() => {
+        this.onSearch()
+      })
+    },
+    onSearch() {
+      getQuestionList({
+        title: this.title,
+        pageSize: this.pageSize
+      }).then((res) => {
+        this.tableData = res.data.records
+        this.gameTotal = res.data.total
+        this.pageSize = res.data.size
+      })
+    },
+    onReset() {
+      this.title = undefined
+      this.currentPage = 1
+      this.pageSize = 10
+      this.onSearch()
+    }
+  }
+}
+</script>
+<style>
+</style>