。

src/components/GameCharacter/edit.vue

@@ -61,7 +61,6 @@ export default {
       }
     },
     gameId: function() {
-      console.log(this.gameId)
       if (this.gameId) {
         this.form.gameId = this.gameId
       }

src/components/Question/drawer.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <el-drawer
+      ref="drawer"
+      title="添加答案"
+      :before-close="handleClose"
+      :visible.sync="dialog"
+      direction="ltr"
+      custom-class="demo-drawer"
+    >
+      <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-form-item>
+          <el-form-item label="匹配特征：" :label-width="formLabelWidth">
+            <el-select
+              v-model="form.characterList"
+              multiple
+              filterable
+              default-first-option
+              placeholder="请选择特征"
+              style="width:100%"
+            >
+              <el-option
+                v-for="item in wordList"
+                :key="item.characterId"
+                :label="item.name"
+                :value="item.characterId"
+              />
+            </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-form-item>
+        </el-form>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    wordList: Array,
+    dialog: Boolean
+  },
+  data() {
+    return {
+      form: {
+        option: undefined,
+        content: undefined,
+        characterList: []
+      },
+      formLabelWidth: '120px',
+      options: [
+        {
+          value: 'A',
+          label: 'A'
+        },
+        {
+          value: 'B',
+          label: 'B'
+        },
+        {
+          value: 'C',
+          label: 'C'
+        },
+        {
+          value: 'D',
+          label: 'D'
+        },
+        {
+          value: '对',
+          label: '对'
+        },
+        {
+          value: '错',
+          label: '错'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleClose(done) {
+      this.$confirm('确定要添加这条答案吗？')
+        .then(_ => {
+          const list = this.wordList.filter(item => {
+            this.form.characterList.some(v => v === item.characterId)
+          })
+          this.form.characterList = list
+          this.$emit('handleEditDrawer', this.form)
+          this.form = {
+            option: undefined,
+            content: undefined,
+            characterList: []
+          }
+        })
+        .catch(_ => {})
+    },
+    cancelForm() {
+      this.$emit('handleCloseDrawer', true)
+      this.form = {
+        option: undefined,
+        content: undefined,
+        characterList: []
+      }
+    }
+  }
+}
+</script>
+<style>
+</style>

src/components/Question/edit.vue

@@ -22,14 +22,14 @@
         <el-button type="primary" @click="onAddAnswer">添加答案</el-button>
 
         <div v-for="(answer, index) in form.answerList" :key="index">
-          <AddAnswerMatching
+          <!-- <AddAnswerMatching
             :characterId="characterId"
             :value="answer"
             :wordList="wordList"
             @change="handleChange"
             @handleDelete="() => handleDelete(answer)"
             @handleWordListChange="handleWordListChange"
-          />
+          /> -->
         </div>
       </el-form-item>
       <el-form-item label="正确选项：">
@@ -55,21 +55,26 @@
         <el-button @click="$router.go(-1)">返回</el-button>
       </el-form-item>
     </el-form>
+    <QuestionDrawer :dialog="dialog" :wordList='wordList' @handleCloseDrawer='handleCloseDrawer' @handleEditDrawer='handleEditDrawer' />
   </div>
 </template>
 <script>
 
 import { saveQuestion, updateQuestion, getQuestionDetail } from '@/api/question'
-import AddAnswerMatching from '@/components/AddAnswerMatching/index.vue'
-import { getCharacterLibDetail } from '@/api/characterLib'
+import { getGameCharacterList } from '@/api/gameCharacter'
+import QuestionDrawer from '@/components/Question/drawer.vue'
+
+// import AddAnswerMatching from '@/components/AddAnswerMatching/index.vue'
+// import { getCharacterLibDetail } from '@/api/characterLib'
 
 export default {
   components: {
-    AddAnswerMatching
+    QuestionDrawer
+    // AddAnswerMatching
   },
   props: {
     gameId: String,
-    characterId: String,
+    // characterId: String,
     questionId: String
   },
   data() {
@@ -85,8 +90,9 @@ export default {
       },
       // 正确答案数组
       rightList: [],
-      // 修饰词数据源
-      wordList: []
+      // 特征数据源
+      wordList: [],
+      dialog: false
     }
   },
   watch: {
@@ -115,20 +121,34 @@ export default {
     },
     gameId() {
       this.form.gameId = this.gameId
+      getGameCharacterList({ gameId: this.gameId }).then((res) => {
+        res.data.records.map(item => {
+          this.wordList.push({ characterId: item.characterId, name: item.name })
+        })
+        console.log(this.wordList)
+      })
     }
   },
   methods: {
     onAddAnswer() {
-      this.form.answerList.push({
-        answerId: undefined,
-        questionId: undefined,
-        contentType: undefined,
-        option: undefined,
-        content: undefined,
-        characterWordList: [],
-        word: undefined,
-        wordId: undefined
-      })
+      this.dialog = true
+      // this.form.answerList.push({
+      //   answerId: undefined,
+      //   questionId: undefined,
+      //   contentType: undefined,
+      //   option: undefined,
+      //   content: undefined,
+      //   characterWordList: [],
+      //   word: undefined,
+      //   wordId: undefined
+      // })
+    },
+    handleCloseDrawer() {
+      this.dialog = false
+    },
+    handleEditDrawer(val) {
+      console.log(val)
+      this.handleCloseDrawer()
     },
     onSubmit() {
       if (this.form.name) {
@@ -136,40 +156,41 @@ export default {
           updateQuestion(this.form, this.questionId).then((res) => {
             this.$message('修改问题成功')
             // 告诉父页面实例表需要刷新并且关闭当前组件
-            this.$emit('handleRefresh', true)
+            this.$emit('handleRefreshQuestion', true)
           })
         } else {
           saveQuestion(this.form).then((res) => {
             this.$message('添加问题成功')
             // 告诉父页面实例表需要刷新并且关闭当前组件
-            this.$emit('handleRefresh', true)
+            this.$emit('handleRefreshQuestion', true)
+            this.$emit('handleEditQuestion', res.data.questionId)
           })
         }
       } else {
         this.$message('请输入问题名称')
       }
-    },
-    handleChange(answer) {
-      const index = this.form.answerList.indexOf(answer)
-      this.$set(this.form.answerList, index, answer)
-    },
-
-    handleWordListChange(val, list) {
-      getCharacterLibDetail(this.characterId).then((res) => {
-        this.wordList = res.data.wordList
-      })
-      const index = this.form.answerList.indexOf(val)
-      val.characterWordList = this.wordList.filter((item) =>
-        list.some((v) => v === item.wordId)
-      )
-      val.characterWordList.map(item => {
-        item = { ...item, characterId: this.characterId }
-      })
-      this.$set(this.form.answerList, index, val)
-    },
-    handleDelete(answer) {
-      this.form.answerList.splice(this.form.answerList.indexOf(answer), 1)
     }
+    // handleChange(answer) {
+    //   const index = this.form.answerList.indexOf(answer)
+    //   this.$set(this.form.answerList, index, answer)
+    // },
+
+    // handleWordListChange(val, list) {
+    //   getCharacterLibDetail(this.characterId).then((res) => {
+    //     this.wordList = res.data.wordList
+    //   })
+    //   const index = this.form.answerList.indexOf(val)
+    //   val.characterWordList = this.wordList.filter((item) =>
+    //     list.some((v) => v === item.wordId)
+    //   )
+    //   val.characterWordList.map(item => {
+    //     item = { ...item, characterId: this.characterId }
+    //   })
+    //   this.$set(this.form.answerList, index, val)
+    // },
+    // handleDelete(answer) {
+    //   this.form.answerList.splice(this.form.answerList.indexOf(answer), 1)
+    // }
   }
 }
 </script>

src/components/Question/index.vue

@@ -27,6 +27,7 @@
     </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)
@@ -65,21 +66,28 @@ export default {
       startDate: undefined
     }
   },
+  watch: {
+    gameId() {
+      if (this.gameId) {
+        this.onSearch()
+      }
+    }
+  },
   methods: {
     // 添加问题
     handleAdd() {
-      this.$emit('handleAdd', true)
+      this.$emit('handleAddQuestion', true)
     },
     handleEdit(row) {
       // 向外传送数据row.questionId
-      this.$emit('handleEdit', row.questionId)
+      this.$emit('handleEditQuestion', row.questionId)
     },
     handleDelete(row) {
       deleteQuestion(row.questionId).then(() => {
         this.$message('删除问题成功')
         this.onSearch()
         // 关闭编辑问题页面防止编辑页面还没关闭就删除当前问题了
-        this.$emit('handleClose', true)
+        this.$emit('handleCloseQuestion', true)
       })
     },
     onSearch() {

src/views/gameManage/edit.vue

@@ -59,8 +59,16 @@
       >
         <el-row :gutter="20" style="padding-top: 20px">
           <el-col :span="13">
+            <Question
+              ref="Question"
+              :gameId='gameId'
+              @handleAddQuestion='questionId = undefined'
+              @handleCloseQuestion='questionId = undefined'
+              @handleEditQuestion='handleEditQuestion'
+            />
           </el-col>
           <el-col :span="11">
+            <QuestionEdit :questionId='questionId' :gameId='gameId' @handleRefreshQuestion='handleRefreshQuestion' @handleEditQuestion='handleEditQuestion' />
           </el-col>
         </el-row>
       </el-tab-pane>
@@ -72,11 +80,15 @@ import { saveGame, UpdateGame, getGameDetail } from '@/api/game'
 import UploadImage from '@/components/UploadImage/index.vue'
 import GameCharacter from '@/components/GameCharacter/index.vue'
 import GameCharacterEdit from '@/components/GameCharacter/edit.vue'
+import Question from '@/components/Question/index.vue'
+import QuestionEdit from '@/components/Question/edit.vue'
 export default {
   components: {
     UploadImage,
     GameCharacter,
-    GameCharacterEdit
+    GameCharacterEdit,
+    Question,
+    QuestionEdit
   },
   data() {
     return {
@@ -160,14 +172,11 @@ export default {
       this.$refs.GameCharacter.onSearch()
     },
 
-    handleEdit(val) {
+    handleEditQuestion(val) {
       this.questionId = val
     },
-    handleClose() {
-      this.questionId = undefined
-    },
-    handleRefresh() {
-      this.$refs.GameCharacter.onSearch()
+    handleRefreshQuestion() {
+      this.$refs.Question.onSearch()
     }
   }
 }