admin-draw-lots/src/components/Question/drawer.vue

<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 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="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,
    gameId: String
  },
  data() {
    return {
      rules: {
        content: [{ required: true, message: '请输入答案内容', trigger: 'blur' }]
      },
      form: {
        option: undefined,
        content: undefined,
        characterList: [],
        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: '错'
        }
      ]
    }
  },
  computed: {
    wordList() {
      return this.$store.state.game.wordList
    }
  },
  watch: {
    answerId() {
      if (this.answerId) {
        getAnswerDetail(this.answerId, { gameId: this.gameId }).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(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (this.form.option) {
            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
            }
            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,
                  characterList: []
                }
              })
            } else {
              data.questionId = this.questionId
              saveAnswer(data).then((res) => {
                this.$message('添加成功')
                this.$emit('handleEditDrawer', true)
                this.form = {
                  option: undefined,
                  content: undefined,
                  characterList: []
                }
              })
            }
          } else {
            this.$message('请在灰色下来菜单中添加选项')
          }
        } else {
          return false
        }
      })
    },
    handleClose() {
      this.$emit('handleCloseDrawer', true)
      this.form = {
        option: undefined,
        content: undefined,
        characterList: []
      }
    }
  }
}
</script>
<style>
</style>