。

src/components/GameCharacter/edit.vue

@@ -59,6 +59,9 @@ export default {
           characterId: undefined
         }
       }
+      if (this.gameId) {
+        this.form.gameId = this.gameId
+      }
     },
     gameId: function() {
       if (this.gameId) {
@@ -84,6 +87,7 @@ export default {
             this.$message('添加实例成功')
             // 告诉父页面实例表需要刷新
             this.$emit('handleRefreshGameCharacter', true)
+            // 把当前页改为编辑页面
             this.$emit('handleEditGameCharacter', res.data.characterId)
           })
         }

src/components/GameCharacter/index.vue

@@ -73,6 +73,12 @@ export default {
         gameId: this.gameId
       }).then((res) => {
         this.tableData = res.data.records
+        // 讲特征列表写入store 供问题答案特征下拉使用
+        const list = []
+        this.tableData.map(item => {
+          list.push({ characterId: item.characterId, name: item.name })
+        })
+        this.$store.dispatch('game/setWordListValue', list).then(() => {})
       })
     },
     dateChange(val) {

src/components/Question/drawer.vue

@@ -58,7 +58,6 @@
 <script>
 export default {
   props: {
-    wordList: Array,
     dialog: Boolean
   },
   data() {
@@ -97,13 +96,16 @@ export default {
       ]
     }
   },
+  computed: {
+    wordList() {
+      return this.$store.state.game.wordList
+    }
+  },
   methods: {
     handleClose(done) {
       this.$confirm('确定要添加这条答案吗？')
         .then(_ => {
-          const list = this.wordList.filter(item => {
-            this.form.characterList.some(v => v === item.characterId)
-          })
+          const list = this.wordList.filter(item => this.form.characterList.includes(item.characterId))
           this.form.characterList = list
           this.$emit('handleEditDrawer', this.form)
           this.form = {

src/components/Question/edit.vue

@@ -22,31 +22,37 @@
         <el-button type="primary" @click="onAddAnswer">添加答案</el-button>
 
         <div v-for="(answer, index) in form.answerList" :key="index">
-          <!-- <AddAnswerMatching
-            :characterId="characterId"
-            :value="answer"
-            :wordList="wordList"
-            @change="handleChange"
-            @handleDelete="() => handleDelete(answer)"
-            @handleWordListChange="handleWordListChange"
-          /> -->
+          <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-input v-model="form.option"></el-input> -->
         <!-- filterable可搜索 multiple可多选 default-first-option回车可选-->
         <el-select
-          v-model="rightList"
+          v-model="form.rightAnswer"
           multiple
           filterable
           default-first-option
           placeholder="请选择"
         >
           <el-option
-            v-for="item in form.answerList"
-            :key="item.option"
-            :label="item.option"
-            :value="item.option"
+            v-for="item in rightList"
+            :key="item"
+            :label="item"
+            :value="item"
           />
         </el-select>
       </el-form-item>
@@ -55,26 +61,20 @@
         <el-button @click="$router.go(-1)">返回</el-button>
       </el-form-item>
     </el-form>
-    <QuestionDrawer :dialog="dialog" :wordList='wordList' @handleCloseDrawer='handleCloseDrawer' @handleEditDrawer='handleEditDrawer' />
+    <QuestionDrawer :dialog="dialog" @handleCloseDrawer="handleCloseDrawer" @handleEditDrawer="handleEditDrawer" />
   </div>
 </template>
 <script>
 
 import { saveQuestion, updateQuestion, getQuestionDetail } from '@/api/question'
-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: {
     QuestionDrawer
-    // AddAnswerMatching
   },
   props: {
     gameId: String,
-    // characterId: String,
     questionId: String
   },
   data() {
@@ -88,11 +88,10 @@ export default {
         // 答案列表（包括选项 内容 特征词列表）
         answerList: []
       },
-      // 正确答案数组
+      // 正确答案数据源
       rightList: [],
-      // 特征数据源
-      wordList: [],
-      dialog: false
+      dialog: false,
+      isChange: 0
     }
   },
   watch: {
@@ -102,10 +101,7 @@ export default {
         this.rightList = []
         getQuestionDetail(this.questionId).then((res) => {
           this.form = res.data
-          const list = res.data.answerList
-          list.map((item) => {
-            this.rightList.push(item.wordId)
-          })
+          this.form.rightAnswer = res.data.rightAnswer.split(',')
         })
       } else {
         this.form = {
@@ -118,40 +114,49 @@ export default {
         }
         this.rightList = []
       }
+      if (this.gameId) {
+        this.form.gameId = this.gameId
+      }
     },
     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)
+      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.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.isChange++
+      this.form.answerList.push(val)
       this.handleCloseDrawer()
     },
+    handleDelete(index) {
+      this.isChange--
+      this.form.answerList.splice(index, 1)
+    },
+    handleToString(list) {
+      const nameList = []
+      list?.map(item => {
+        nameList.push(item.name)
+      })
+      return nameList.toString()
+    },
     onSubmit() {
-      if (this.form.name) {
+      if (this.form.title) {
+        this.form.rightAnswer = this.form.rightAnswer.toString()
         if (this.questionId) {
           updateQuestion(this.form, this.questionId).then((res) => {
             this.$message('修改问题成功')
@@ -170,27 +175,6 @@ export default {
         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)
-    // }
   }
 }
 </script>

src/main.js

@@ -4,7 +4,7 @@ import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
-import locale from 'element-ui/lib/locale/lang/en' // lang i18n
+// import locale from 'element-ui/lib/locale/lang/en' // lang i18n
 
 import '@/styles/index.scss' // global css
 
@@ -25,7 +25,7 @@ import '@/permission' // permission control
  */
 // if (process.env.NODE_ENV === 'production') {
 //   const { mockXHR } = require('../mock')
-  // mockXHR()
+// mockXHR()
 // }
 
 // set ElementUI lang to EN
@@ -35,7 +35,7 @@ Vue.use(ElementUI)
 
 Vue.config.productionTip = false
 
-new Vue({  
+new Vue({
   el: '#app',
   router,
   store,

src/store/index.js

@@ -4,6 +4,7 @@ import getters from './getters'
 import app from './modules/app'
 import settings from './modules/settings'
 import user from './modules/user'
+import game from './modules/game'
 
 Vue.use(Vuex)
 
@@ -11,7 +12,8 @@ const store = new Vuex.Store({
   modules: {
     app,
     settings,
-    user
+    user,
+    game
   },
   getters
 })

src/store/modules/app.js

@@ -8,7 +8,7 @@ const state = {
   device: 'desktop'
 }
 
-//定义Mutations
+// 定义Mutations
 const mutations = {
   TOGGLE_SIDEBAR: state => {
     state.sidebar.opened = !state.sidebar.opened

src/store/modules/game.js

@@ -0,0 +1,30 @@
+const state = {
+  wordList: []// 设置初始特征列表
+}
+
+const getters = {
+  getwordList(state) {
+    return state.wordList // 返回当前特征列表
+  }
+}
+
+// 定义Mutations
+const mutations = {
+  setWordList(state, val) {
+    state.wordList = val // 改变当前特征列表
+  }
+}
+
+const actions = {
+  setWordListValue({ commit, state }, val) {
+    commit('setWordList', val)// 调用mutations方法
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions
+}

src/views/gameManage/edit.vue

@@ -68,7 +68,7 @@
             />
           </el-col>
           <el-col :span="11">
-            <QuestionEdit :questionId='questionId' :gameId='gameId' @handleRefreshQuestion='handleRefreshQuestion' @handleEditQuestion='handleEditQuestion' />
+            <QuestionEdit ref="QuestionEdit" :questionId='questionId' :gameId='gameId' @handleRefreshQuestion='handleRefreshQuestion' @handleEditQuestion='handleEditQuestion' />
           </el-col>
         </el-row>
       </el-tab-pane>
@@ -171,7 +171,6 @@ export default {
     handleRefreshGameCharacter() {
       this.$refs.GameCharacter.onSearch()
     },
-
     handleEditQuestion(val) {
       this.questionId = val
     },