huangguo_admin/src/views/comicsManagement/ysmComicsTopic/components/editOrAdd.vue

<template>
  <el-dialog :title="title" :visible.sync="Visible" width="900px" center class="ac-dialog" :close-on-click-modal="false"
    @close="close">
    <el-form :inline="true" :model="form" ref="ruleForm" class="demo-form-inline" label-width="120px"
      label-position="right">
      <el-row :gutter="24">
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="漫画id">
            <el-input v-model.number="form.comicsId" placeholder="漫画id" />
          </el-form-item>
        </el-col>

        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="选集ID">
            <el-select placeholder="请选择选集ID" v-model="form.episode" clearable>
              <el-option :key="index" :label="item.name" :value="item.id" v-for="(item, index) in vComicsEplicodeList" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="背景图">
            <UploadImg @onRemove="onRemove('coverImg')" @changeImgUrl="changeCoverImg" :img="form.backGroupImage"
              style="border:1px dashed gray"></UploadImg>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="人物图">
            <UploadImg @onRemove="onRemove('coverImg')" @changeImgUrl="changeFigureImg" :img="form.figureImg"
              style="border:1px dashed gray"></UploadImg>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="展示顺序">
            <el-input v-model.number="form.rank" placeholder="请输入排序" />
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="启用状态" prop="status">
            <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="类型">
            <el-select placeholder="请选择类型" v-model="form.greatestType" filterable allow-create default-first-option
              style="width:163px">
              <el-option label="氪金NO.1" :value="1" />
              <el-option label="精选必读" :value="2" />
              <el-option label="万人追捧" :value="3" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-form-item label="虚拟观看次数">
            <el-input v-model.number="form.fake.watchTimes" style="width: 180px" />
          </el-form-item>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-form-item label="虚拟点赞次数">
            <el-input v-model.number="form.fake.likes" style="width: 180px" />
          </el-form-item>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-form-item label="虚拟评论数">
            <el-input v-model.number="form.fake.comments" style="width: 180px" />
          </el-form-item>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-form-item label="虚拟售卖数">
            <el-input v-model.number="form.fake.sells" style="width: 180px" />
          </el-form-item>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-form-item label="虚拟分享数">
            <el-input v-model.number="form.fake.shares" style="width: 180px" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="Visible = false"> 取 消 </el-button>
      <el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
    </div>
  </el-dialog>
</template>
<script>
import UploadImg from '@/components/UploadImg/index'

import {
  comicsmediaAdd,
  comicsmediaUpdate
  //   topicMediaTop,
} from '@/api/comicsManagement/comicsVideo.js'
export default {
  name: 'AddOrEdit',
  props: ['data', 'vComicsEplicodeList'],
  components: {
    UploadImg
  },
  data() {
    return {
      Visible: true,
      title: '',
      topicList: [], // 主题列表
      // 表单数据
      form: {
        name: undefined, // "string",
        rank: undefined, // 0,排序
        status: true, // true, 状态
        comicsId: undefined,
        comicstopicId: undefined,
        episode: undefined,
        backGroupImage: undefined,
        figureImg: undefined,
        greatestType: undefined,
        fake: {},

      }
    }
  },

  mounted() {
    this.title = this.data.title
    if (this.title === '编辑') {
      this.form = JSON.parse(JSON.stringify(this.data.data))
    }
  },
  methods: {



    // TODO:新增漫画主题列表数据
    add(data) {
      comicsmediaAdd(data).then((res) => {
        if (res.code === 200) {
          this.$message.success('新增成功')
          this.Visible = false
        } else {
          this.$message.error('新增失败')
        }
      })
    },
    // TODO:编辑漫画主题列表数据
    update(data) {
      comicsmediaUpdate(data).then((res) => {
        if (res.code === 200) {
          this.$message.success('更新成功')
          this.Visible = false
        } else {
          this.$message.error('更新失败')
        }
      })
    },
    changeCoverImg(data) {
      this.form.backGroupImage = data
    },
    changeFigureImg(data) {
      this.form.figureImg = data
    },
    onRemove(data) {
      this.form[data] = undefined
    },
    // 提交按钮
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const param = JSON.parse(JSON.stringify(this.form))

          if (this.title === '新增') {
            this.add(param)
          } else if (this.title === '编辑') {
            this.update(param)
          }
        } else {
          return false
        }
      })
    },


    // 关闭编辑
    close() {
      this.$emit('close')
    }
  }
}
</script>