。

src/api/answer.js

@@ -0,0 +1,46 @@
+import request from '@/utils/request'
+
+/**
+* 保存答案
+* @param {*} data
+* @returns
+*/
+export const saveAnswer = (data) => request({
+  url: '/admin/answer',
+  method: 'post',
+  data
+})
+
+/**
+ * 答案列表
+ * @param {*} params
+ * @returns
+ */
+export const getAnswerList = (params) => request({
+  url: '/admin/answer', params
+})
+
+/**
+ * 删除答案
+ * @param {*} data
+ * @returns
+ */
+export const deleteAnswer = (id) => request({
+  url: `/admin/answer/${id}`, method: 'delete'
+})
+/**
+ * 更新答案
+ * @param {*} data
+ * @returns
+ */
+export const UpdateAnswer = (data, id) => request({
+  url: `/admin/answer/${id}`, method: 'put', data
+})
+/**
+ * 查询答案详情
+ * @param {*} params
+ * @returns
+ */
+export const getAnswerDetail = (id) => request({
+  url: `/admin/answer/${id}`
+})

src/api/appApi.js

@@ -2,8 +2,8 @@ import request from '@/utils/request'
 
 /**
 * 保存应用
-* @param {*} data 
-* @returns 
+* @param {*} data
+* @returns
 */
 export const saveApp = (data) => request({
   url: '/admin/App',
@@ -13,8 +13,8 @@ export const saveApp = (data) => request({
 
 /**
  * 应用列表
- * @param {*} params 
- * @returns 
+ * @param {*} params
+ * @returns
  */
 export const getAppList = (params) => request({
   url: '/admin/App', params
@@ -22,25 +22,25 @@ export const getAppList = (params) => request({
 
 /**
  * 删除应用
- * @param {*} data 
- * @returns 
+ * @param {*} data
+ * @returns
  */
 export const deleteApp = (id) => request({
   url: `/admin/App/${id}`, method: 'delete'
 })
 /**
  * 更新应用
- * @param {*} data 
- * @returns 
+ * @param {*} data
+ * @returns
  */
 export const UpdateApp = (data, id) => request({
   url: `/admin/App/${id}`, method: 'put', data
 })
 /**
  * 查询应用详情
- * @param {*} params 
- * @returns 
+ * @param {*} params
+ * @returns
  */
 export const getAppDetail = (id) => request({
   url: `/admin/App/${id}`
-})
+})

src/components/AddAnswerMatching/index.vue

@@ -1,111 +0,0 @@
-<template>
-  <div class="answer">
-    <el-row :gutter="20">
-      <el-col :span="5">
-        <el-select
-          v-model="value.option"
-          filterable
-          allow-create
-          default-first-option
-          placeholder="请选择"
-        >
-          <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </el-col>
-      <el-col :span="17">
-        <el-input v-model="value.content" />
-      </el-col>
-    </el-row>
-    <el-row>
-      <el-col :span="20">
-        <el-select
-          v-model="nowlist"
-          filterable
-          multiple
-          default-first-option
-          placeholder="请选择特征词"
-        >
-          <el-option
-            v-for="item in wordList"
-            :key="item.wordId"
-            :label="item.wordId"
-            :value="item.word"
-          />
-        </el-select>
-      </el-col>
-      <el-col :span="1">
-        <el-button type="danger" @click="handleDelete">X</el-button>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-<script>
-export default {
-  name: 'Answer',
-  props: {
-    characterId: String,
-    value: {
-      type: Object,
-      default: () => ({})
-    },
-    wordList: Array
-  },
-  data() {
-    return {
-      options: [
-        {
-          value: 'A',
-          label: 'A'
-        },
-        {
-          value: 'B',
-          label: 'B'
-        },
-        {
-          value: 'C',
-          label: 'C'
-        },
-        {
-          value: 'D',
-          label: 'D'
-        },
-        {
-          value: '对',
-          label: '对'
-        },
-        {
-          value: '错',
-          label: '错'
-        }
-      ],
-      nowlist: []
-    }
-  },
-  watch: {
-    value() {
-      this.value.characterWordList.map(item => {
-        this.nowlist.push(item.wordId)
-      })
-    },
-    nowlist() {
-      this.$emit('handleWordListChange', this.value, this.nowlist)
-    }
-  },
-  methods: {
-    handleDelete() {
-      this.$emit('handleDelete', this.value)
-    }
-  }
-}
-</script>
-<style>
-.answer {
-  margin: 10px 0;
-  width: 500px;
-}
-</style>

src/components/GameCharacter/index.vue

@@ -59,10 +59,13 @@ export default {
     }
   },
   watch: {
-    gameId() {
-      if (this.gameId) {
-        this.onSearch()
-      }
+    gameId: {
+      handler(val) {
+        if (this.gameId) {
+          this.onSearch()
+        }
+      },
+      immediate: true // 页面加载时就启动
     }
   },
   methods: {

src/components/Question/drawer.vue

@@ -2,7 +2,7 @@
   <div>
     <el-drawer
       ref="drawer"
-      title="添加答案"
+      :title="answerId ?'编辑答案' : '添加答案'"
       :before-close="handleClose"
       :visible.sync="dialog"
       direction="ltr"
@@ -11,27 +11,21 @@
       <div class="demo-drawer__content">
         <el-form :model="form" style="margin:20px">
           <el-form-item label="选项：" :label-width="formLabelWidth">
-            <el-select
-              v-model="form.option"
-              filterable
-              allow-create
-              default-first-option
-              placeholder="请选择选项"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="内容详情" :label-width="formLabelWidth">
-            <el-input v-model="form.content" autocomplete="off" />
+            <el-input v-model="form.content" size="mini" placeholder="请输入答案（必填）">
+              <el-select slot="prepend" v-model="form.option" filterable allow-create default-first-option size="mini" 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 label="匹配特征：" :label-width="formLabelWidth">
             <el-select
               v-model="form.characterList"
+              size="mini"
               multiple
               filterable
               default-first-option
@@ -47,8 +41,8 @@
             </el-select>
           </el-form-item>
           <el-form-item style="text-align:center">
-            <el-button @click="cancelForm" size="mini">取 消</el-button>
-            <el-button type="primary" size="mini" @click="$refs.drawer.closeDrawer()">确 定</el-button>
+            <el-button size="mini" @click="handleClose">取 消</el-button>
+            <el-button type="primary" size="mini" @click="onSubmit">确 定</el-button>
           </el-form-item>
         </el-form>
       </div>
@@ -56,9 +50,13 @@
   </div>
 </template>
 <script>
+import { getAnswerDetail, saveAnswer, UpdateAnswer } from '@/api/answer'
 export default {
   props: {
-    dialog: Boolean
+    dialog: Boolean,
+    questionId: String,
+    answerId: String,
+    gameId: String
   },
   data() {
     return {
@@ -101,22 +99,60 @@ export default {
       return this.$store.state.game.wordList
     }
   },
-  methods: {
-    handleClose(done) {
-      this.$confirm('确定要添加这条答案吗？')
-        .then(_ => {
-          const list = this.wordList.filter(item => this.form.characterList.includes(item.characterId))
-          this.form.characterList = list
-          this.$emit('handleEditDrawer', this.form)
-          this.form = {
-            option: undefined,
-            content: undefined,
-            characterList: []
+  watch: {
+    answerId() {
+      if (this.answerId) {
+        getAnswerDetail(this.answerId).then((res) => {
+          this.form = res.data
+          if (res.data.characterList) {
+            const list = []
+            res.data.characterList.map(item => {
+              list.push(item.characterId)
+            })
+            this.form.characterList = list
           }
         })
-        .catch(_ => {})
+      }
+    }
+  },
+  methods: {
+    onSubmit() {
+      if (this.form.option && this.form.content) {
+        const list = this.wordList.filter(item => this.form.characterList.includes(item.characterId))
+        const data = { ...this.form }
+        if (list) {
+          list.map(item => {
+            item.gameId = this.gameId
+          })
+          data.characterList = list
+        }
+        data.questionId = this.questionId
+        if (this.answerId) {
+          UpdateAnswer(data, this.answerId).then((res) => {
+            this.$message('修改成功')
+            this.$emit('handleEditDrawer', true)
+            this.form = {
+              option: undefined,
+              content: undefined,
+              characterList: []
+            }
+          })
+        } else {
+          saveAnswer(data).then((res) => {
+            this.$message('添加成功')
+            this.$emit('handleEditDrawer', true)
+            this.form = {
+              option: undefined,
+              content: undefined,
+              characterList: []
+            }
+          })
+        }
+      } else {
+        this.$message('请添加选项和内容')
+      }
     },
-    cancelForm() {
+    handleClose() {
       this.$emit('handleCloseDrawer', true)
       this.form = {
         option: undefined,

src/components/Question/edit.vue

@@ -3,42 +3,17 @@
     <h2 style="text-align: center">
       游戏题目{{ questionId ? "编辑" : "添加" }}
     </h2>
-    <el-form ref="form" :model="form" label-width="150px" size="mini">
+    <el-form ref="form" :model="form" label-width="90px" size="mini">
       <el-form-item label="题目：">
-        <el-input
-          v-model="form.title"
-          placeholder="请输入实例名（必填）"
-          type="textarea"
-        />
+        <el-input v-model="form.title" placeholder="请输入实例名（必填）">
+          <el-select slot="prepend" v-model="form.optType" style="width:100px" placeholder="请选择">
+            <el-option label="单选题" value="1" />
+            <el-option label="多选题" value="2" />
+            <el-option label="判断题" value="3" />
+          </el-select>
+        </el-input>
       </el-form-item>
-      <el-form-item label="题目类型：">
-        <el-select v-model="form.optType" placeholder="请选择">
-          <el-option label="单选题" value="1" />
-          <el-option label="多选题" value="2" />
-          <el-option label="判断题" value="3" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="答案：">
-        <el-button type="primary" @click="onAddAnswer">添加答案</el-button>
-
-        <div v-for="(answer, index) in form.answerList" :key="index">
-          <el-row :gutter="20" style="padding-top: 20px">
-            <el-col :span="1">
-              {{ answer.option }}
-            </el-col>
-            <el-col :span="10">{{ answer.content }}</el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="20">
-              {{ handleToString(answer.characterList) }}
-            </el-col>
-            <el-col :span="1">
-              <el-button type="danger" @click="()=>handleDelete(index)">X</el-button>
-            </el-col>
-          </el-row>
-        </div>
-      </el-form-item>
-      <el-form-item label="正确选项：">
+      <el-form-item v-if="questionId!==undefined" label="正确选项：">
         <!-- <el-input v-model="form.option"></el-input> -->
         <!-- filterable可搜索 multiple可多选 default-first-option回车可选-->
         <el-select
@@ -56,17 +31,39 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item>
+      <el-form-item style="text-align:center">
         <el-button type="primary" @click="onSubmit">确定</el-button>
         <el-button @click="$router.go(-1)">返回</el-button>
       </el-form-item>
+      <el-form-item v-if="questionId!==undefined" label="答案：">
+        <el-button type="primary" @click="onAddAnswer">添加答案</el-button>
+      </el-form-item>
     </el-form>
-    <QuestionDrawer :dialog="dialog" @handleCloseDrawer="handleCloseDrawer" @handleEditDrawer="handleEditDrawer" />
+
+    <ul style="list-style-type: none;margin:10px 0 10px -2px">
+      <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:15px"
+          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>
+    <QuestionDrawer :dialog="dialog" :question-id="questionId" :answer-id="answerId" :game-id="gameId" @handleCloseDrawer="handleCloseDrawer" @handleEditDrawer="handleEditDrawer" />
   </div>
 </template>
 <script>
 
-import { saveQuestion, updateQuestion, getQuestionDetail } from '@/api/question'
+import { saveQuestion, UpdateQuestion, getQuestionDetail } from '@/api/question'
+import { getAnswerList, deleteAnswer } from '@/api/answer'
 import QuestionDrawer from '@/components/Question/drawer.vue'
 
 export default {
@@ -84,69 +81,88 @@ export default {
         optType: undefined,
         rightAnswer: undefined,
         gameId: undefined,
-        questionId: undefined,
-        // 答案列表（包括选项 内容 特征词列表）
-        answerList: []
+        questionId: undefined
       },
+      // 答案列表（包括选项 内容 特征词列表）
+      answerList: [],
+      answerId: undefined,
       // 正确答案数据源
       rightList: [],
-      dialog: false,
-      isChange: 0
+      dialog: false
     }
   },
   watch: {
     // 用于点击左边改变右边的页面
     questionId: function() {
+      if (this.gameId) {
+        this.form.gameId = this.gameId
+      }
       if (this.questionId) {
         this.rightList = []
         getQuestionDetail(this.questionId).then((res) => {
           this.form = res.data
-          this.form.rightAnswer = res.data.rightAnswer.split(',')
+          this.form.rightAnswer = res.data.rightAnswer?.split(',')
         })
+        this.handleAnswerList()
       } else {
         this.form = {
           title: undefined,
           optType: undefined,
           gameId: undefined,
           rightAnswer: undefined,
-          questionId: undefined,
-          answerList: []
+          questionId: undefined
         }
+        this.answerList = []
         this.rightList = []
       }
-      if (this.gameId) {
-        this.form.gameId = this.gameId
-      }
     },
     gameId() {
       if (this.gameId) {
         this.form.gameId = this.gameId
       }
-    },
-    isChange() {
-      const list = []
-      this.form.answerList.map(item => {
-        list.push(item.option)
-      })
-      this.rightList = list
     }
   },
   methods: {
+    // 添加答案
     onAddAnswer() {
       this.dialog = true
+      this.answerId = undefined
+    },
+    // 编辑答案
+    handleEdit(val) {
+      this.dialog = true
+      this.answerId = val.answerId
+    },
+    // 删除答案
+    handleDelete(val) {
+      deleteAnswer(val.answerId).then((res) => {
+        this.$message('删除答案成功')
+        this.handleAnswerList()
+      })
     },
+    // 关闭答案抽屉
     handleCloseDrawer() {
       this.dialog = false
+      this.answerId = undefined
     },
+    // 编辑答案抽屉成功重新查询列表
     handleEditDrawer(val) {
-      this.isChange++
-      this.form.answerList.push(val)
       this.handleCloseDrawer()
+      this.handleAnswerList()
     },
-    handleDelete(index) {
-      this.isChange--
-      this.form.answerList.splice(index, 1)
+    // 查询当前问题答案列表
+    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
+      })
     },
+    // 转换特征数组数据格式
     handleToString(list) {
       const nameList = []
       list?.map(item => {
@@ -155,13 +171,17 @@ export default {
       return nameList.toString()
     },
     onSubmit() {
-      if (this.form.title) {
-        this.form.rightAnswer = this.form.rightAnswer.toString()
+      if (this.form.title && this.form.optType) {
+        this.form.gameId = this.gameId
         if (this.questionId) {
-          updateQuestion(this.form, this.questionId).then((res) => {
+          if (this.form.rightAnswer) {
+            this.form.rightAnswer = this.form.rightAnswer.toString()
+          }
+          UpdateQuestion(this.form, this.questionId).then((res) => {
             this.$message('修改问题成功')
             // 告诉父页面实例表需要刷新并且关闭当前组件
             this.$emit('handleRefreshQuestion', true)
+            this.form.rightAnswer = res.data.rightAnswer?.split(',')
           })
         } else {
           saveQuestion(this.form).then((res) => {
@@ -172,11 +192,27 @@ export default {
           })
         }
       } else {
-        this.$message('请输入问题名称')
+        this.$message('请输入问题名称和题型')
       }
     }
   }
 }
 </script>
-<style>
+<style lang="scss">
+.answerli {
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  line-height:40px;
+  background-color: white;
+  .deleteQuestion{
+    display: none;
+  }
+}
+.answerli:hover {
+  background-color: rgb(230, 247, 255);
+}
+.answerli:hover .deleteQuestion{
+    display: block
+  }
 </style>

src/components/Question/index.vue

@@ -1,52 +1,25 @@
 <template>
   <div class="body">
-    <div class="noshadowCard">
-      <el-card class="box-card">
-        问题名称：<el-input
-          v-model="title"
-          size="mini"
-          style="width: 150px; margin-right: 20px"
-        />
-        创建时间：
-        <el-date-picker
-          v-model="daterange"
-          size="mini"
-          type="daterange"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          value-format="yyyy-MM-dd"
-          style="width:220px; margin-right: 20px"
-          @change="dateChange"
-        />
-
-        <el-button type="primary" size="mini" @click="onSearch">查询</el-button>
-        <el-button size="mini" @click="onReset">重置</el-button>
-        <el-button type="primary" size="mini" @click="handleAdd">添加问题</el-button>
-      </el-card>
+    <div style="line-height:30px; height:30px">
+      题库列表
+      <el-button type="primary" size="mini" style="float: right; margin-bottom: 20px;" @click="handleAdd">添加问题</el-button>
     </div>
-    <el-table stripe :data="tableData" border style="width: 100%">
-      <el-table-column prop="title" label="问题名称" />
-      <el-table-column prop="optType" 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-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
-          <el-popconfirm
-            icon="el-icon-info"
-            icon-color="red"
-            title="确定删除这个问题吗？"
-            @onConfirm="handleDelete(scope.row)"
-          >
-            <el-button slot="reference" type="text">删除</el-button>
-          </el-popconfirm>
-        </template>
-      </el-table-column>
-    </el-table>
+    <ul style="list-style-type: none;margin:10px 0 10px -40px">
+      <li v-for="item,index in tableData" :key="index" class="questionli" @click="handleEdit(item)">
+        <span style="width:45px">第{{ index+1 }}题</span>
+        <span style="width:45px">{{ item.optType === '1'?'单选题':item.optType==='2'?'多选题':'判断题' }}</span>
+        <span style="flex:1">{{ item.title }}</span>
+        <el-popconfirm
+          style="width:15px"
+          icon="el-icon-info"
+          icon-color="red"
+          title="确定删除这个问题吗？"
+          @onConfirm="handleDelete(item)"
+        >
+          <el-button slot="reference" type="text" class="deleteQuestion" style="color:red">×</el-button>
+        </el-popconfirm>
+      </li>
+    </ul>
     <el-pagination
       v-show="questionTotal!==0"
       style="float:right; margin:20px 0"
@@ -68,22 +41,20 @@ export default {
   },
   data() {
     return {
-      // 问题名称
-      title: undefined,
-      daterange: '',
       tableData: [],
-      endDate: undefined,
-      startDate: undefined,
-      pageSize: 10,
+      pageSize: 20,
       currentPage: 1,
       questionTotal: 0// 条目总数
     }
   },
   watch: {
-    gameId() {
-      if (this.gameId) {
-        this.onSearch()
-      }
+    gameId: {
+      handler(val) {
+        if (this.gameId) {
+          this.onSearch()
+        }
+      },
+      immediate: true // 页面加载时就启动
     }
   },
   methods: {
@@ -96,7 +67,7 @@ export default {
       this.changePagination()
     },
     changePagination() {
-      getQuestionList({ gameId: this.gameId, title: this.title, startDate: this.startDate, endDate: this.endDate, pageSize: this.pageSize, pageNum: this.currentPage }).then(
+      getQuestionList({ gameId: this.gameId, pageSize: this.pageSize, pageNum: this.currentPage }).then(
         (res) => {
           this.tableData = res.data.records
         }
@@ -119,32 +90,32 @@ export default {
       })
     },
     onSearch() {
-      getQuestionList({ gameId: this.gameId, title: this.title, startDate: this.startDate, endDate: this.endDate, pageSize: this.pageSize }).then(
+      getQuestionList({ gameId: this.gameId, endDate: this.endDate, pageSize: this.pageSize }).then(
         (res) => {
           this.tableData = res.data.records
           this.questionTotal = res.data.total
           this.pageSize = res.data.size
         }
       )
-    },
-    onReset() {
-      this.title = ''
-      this.daterange = ''
-      this.startDate = ''
-      this.endDate = ''
-      this.pageSize = 10
-      this.pageNum = 1
-      this.onSearch()
-    },
-    dateChange(val) {
-      this.startDate = this.daterange[0]
-      this.endDate = this.daterange[1]
     }
   }
 }
 </script>
-<style>
-.noshadowCard > .box-card {
-  box-shadow: none;
+<style lang="scss">
+.questionli {
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  line-height:40px;
+  background-color: white;
+  .deleteQuestion{
+    display: none;
+  }
 }
+.questionli:hover {
+  background-color: rgb(230, 247, 255);
+}
+.questionli:hover .deleteQuestion{
+    display: block
+  }
 </style>

src/views/gameManage/edit.vue

@@ -38,7 +38,7 @@
         :disabled="gameId ? false : true"
       >
         <el-row :gutter="20" style="padding-top: 20px">
-          <el-col :span="13">
+          <el-col :span="12">
             <GameCharacter
               ref="GameCharacter"
               :gameId='gameId'
@@ -47,7 +47,7 @@
               @handleEditGameCharacter='handleEditGameCharacter'
             />
           </el-col>
-          <el-col :span="11">
+          <el-col :span="12">
             <GameCharacterEdit :characterId='characterId' :gameId='gameId' @handleRefreshGameCharacter='handleRefreshGameCharacter' @handleEditGameCharacter='handleEditGameCharacter' />
           </el-col>
         </el-row>
@@ -58,7 +58,7 @@
         :disabled="gameId ? false : true"
       >
         <el-row :gutter="20" style="padding-top: 20px">
-          <el-col :span="13">
+          <el-col :span="12">
             <Question
               ref="Question"
               :gameId='gameId'
@@ -67,7 +67,7 @@
               @handleEditQuestion='handleEditQuestion'
             />
           </el-col>
-          <el-col :span="11">
+          <el-col :span="12">
             <QuestionEdit ref="QuestionEdit" :questionId='questionId' :gameId='gameId' @handleRefreshQuestion='handleRefreshQuestion' @handleEditQuestion='handleEditQuestion' />
           </el-col>
         </el-row>
@@ -116,14 +116,14 @@ export default {
   watch: {
     '$route.query.id': {
       handler(val) {
-        if (val) {
+        if (val) { // 有值代表是编辑状态 查询详情  没有值就是新增
           this.gameId = val
           getGameDetail(val).then((res) => {
             this.gameForm = res.data
           })
         }
       },
-      immediate: true
+      immediate: true // 页面加载时就启动
     }
   },
   methods: {