admin-draw-lots/src/views/gameManage/edit.vue

<template>
  <div class="body_edit">
    <el-tabs v-model="activeName">
      <el-tab-pane label="游戏详情" name="game">
        <h2 style="text-align: center">游戏{{ gameId ? "编辑" : "新增" }}</h2>
        <el-form ref="form" class="gameForm" :model="gameForm" label-width="150px" size="mini">
          <el-form-item label="游戏名称：">
            <el-input v-model="gameForm.title" />
          </el-form-item>
          <el-form-item label="游戏图标：">
            <UploadImage :icon="gameForm.gameImage" @handleChange="handleChange" @handleDeleteIcon="handleDeleteIcon" />
          </el-form-item>
          <el-form-item label="游戏类型：">
            <el-select
              v-model="gameForm.resultMode"
              filterable
              default-first-option
              placeholder="请选择"
              :disabled="gameId ? true : false"
            >
              <el-option
                v-for="item in resultList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item class="editBottomItem">
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="onCancel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane
        label="关联特征"
        name="game-character"
        :disabled="gameId ? false : true"
      >
        <el-row :gutter="20" style="padding-top: 20px">
          <el-col :span="12">
            <GameCharacter
              ref="GameCharacter"
              :gameId='gameId'
              @handleAddGameCharacter='characterId = undefined'
              @handleCloseGameCharacter='characterId = undefined'
              @handleEditGameCharacter='handleEditGameCharacter'
            />
          </el-col>
          <el-col :span="12">
            <GameCharacterEdit :characterId='characterId' :gameId='gameId' @handleRefreshGameCharacter='handleRefreshGameCharacter' @handleEditGameCharacter='handleEditGameCharacter' />
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane
        label="游戏题库"
        name="question"
        :disabled="gameId ? false : true"
      >
        <el-row :gutter="20" style="padding-top: 20px">
          <el-col :span="12">
            <Question
              ref="Question"
              :gameId='gameId'
              @handleAddQuestion='questionId = undefined'
              @handleCloseQuestion='questionId = undefined'
              @handleEditQuestion='handleEditQuestion'
            />
          </el-col>
          <el-col :span="12">
            <QuestionEdit ref="QuestionEdit" :questionId='questionId' :gameId='gameId' @handleRefreshQuestion='handleRefreshQuestion' @handleEditQuestion='handleEditQuestion' />
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
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,
    Question,
    QuestionEdit
  },
  data() {
    return {
      gameForm: {
        title: undefined,
        gameImage: undefined,
        resultMode: undefined
      },
      resultList: [
        {
          value: 'examination',
          label: '测试'
        },
        {
          value: 'character_matched',
          label: '匹配'
        }
      ],
      gameId: undefined,
      activeName: 'game',
      questionId: undefined,
      characterId: undefined
    }
  },
  watch: {
    '$route.query.id': {
      handler(val) {
        if (val) { // 有值代表是编辑状态 查询详情  没有值就是新增
          this.gameId = val
          getGameDetail(val).then((res) => {
            this.gameForm = res.data
          })
        }
      },
      immediate: true // 页面加载时就启动
    }
  },
  methods: {
    onCancel() {
      this.$router.go(-1)
    },
    onSubmit() {
      if (this.gameForm.title && this.gameForm.resultMode) {
        if (this.gameId) {
          const data = { ...this.gameForm }
          if (!data.gameImage) {
            data.gameImage = ''
          }
          UpdateGame(data, this.gameId).then((res) => {
            this.$message('修改成功')
            this.$router.go(-1)
          })
        } else {
          saveGame(this.gameForm).then((res) => {
            this.$message('保存成功')
            this.$router.replace({
              name: 'gameEdit',
              query: { id: res.data.gameId }
            })
          })
        }
      } else {
        this.$message('请输入游戏名称和游戏类型')
      }
    },
    handleChange(val) {
      this.gameForm.gameImage = val
    },
    handleDeleteIcon() {
      this.gameForm.gameImage = ''
    },

    // 特征页面方法
    // 改变编辑特征页面的初始值
    handleEditGameCharacter(val) {
      this.characterId = val
    },
    handleRefreshGameCharacter() {
      this.$refs.GameCharacter.onSearch()
    },
    handleEditQuestion(val) {
      this.questionId = val
    },
    handleRefreshQuestion() {
      this.$refs.Question.onSearch()
    }
  }
}
</script>
<style>
.gameForm{
  width: 700px;
  margin: auto;
}
.editBottomItem > div {
  margin: 0 !important;
  text-align: center;
}
</style>