pc-admin/src/components/Question/drawer.vue

<template>
  <div>
    <el-drawer
      ref="drawer"
      :title="answerId ?'编辑答案' : '添加答案'"
      :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-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
              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 size="mini" @click="handleClose">取 消</el-button>
            <el-button type="primary" size="mini" @click="onSubmit">确 定</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,
    gameId: String
  },
  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: '错'
        }
      ]
    }
  },
  computed: {
    wordList() {
      return this.$store.state.game.wordList
    }
  },
  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
          }
        })
      }
    }
  },
  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('请添加选项和内容')
      }
    },
    handleClose() {
      this.$emit('handleCloseDrawer', true)
      this.form = {
        option: undefined,
        content: undefined,
        characterList: []
      }
    }
  }
}
</script>
<style>
</style>