huangguo_admin/src/views/atlas/atlasTopic/components/AddOrEdit.vue

<template>
  <el-dialog
:title="title"
:visible.sync="Visible"
width="1100px"
center
class="ac-dialog"
:close-on-click-modal="false"
    @close="close">
    <el-form
:inline="true"
:model="form"
:rules="rules"
ref="ruleForm"
class="demo-form-inline"
label-width="100px"
      label-position="right">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="封面图">
            <UploadImg @changeImgUrl="changeCoverImgUrl" :img="form.coverImg"></UploadImg>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="主题名称">
            <el-input v-model="form.name" placeholder="请输入主题名称" style="width: 180px" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="排序">
            <el-input v-model.number="form.rank" placeholder="请输入排序" style="width: 180px" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="主题所属分类">
            <el-select placeholder="请选择主题所属分类" v-model="form.categoryId" filterable allow-create default-first-option>
              <el-option :key="item.value" :label="item.name" :value="item.id" v-for="item in categoryList" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="展示方式">
            <el-select placeholder="请选择展示方式" v-model="form.showType">
              <el-option :key="item.value" :label="item.name" :value="item.value" v-for="item in showTypeList" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="虚拟图片数量">
            <el-input v-model.number="form.photoCount" placeholder="请输入虚拟图片数量" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="虚拟观看次数">
            <el-input v-model.number="form.watchTimes" placeholder="请输入虚拟观看次数" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="状态">
            <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="主题描述">
            <el-input v-model="form.desc" placeholder="请输入主题描述" style="width: 400px" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
      <TagSelectV2 type="atlas"  @selectTags="selectTags" :formTags="form.tagIds" :mediatagCategory="[]"  :allTags="tagList" />
    </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 { photoTopicAdd, photoTopicUpdate } from '@/api/atlas/index.js'
import UploadImg from '@/components/UploadImg/index'
import TagSelectV2 from '@/components/TagSelectV2/index'
export default {
  name: 'AddOrEdit',
  props: ['data', 'categoryList', 'showTypeList', 'tagList'],
  components: { UploadImg, TagSelectV2 },
  data() {
    return {
      Visible: true,
      title: '',
      // 表单数据
      form: {
        categoryId: undefined, // 分类ID
        coverImg: undefined, // 封面
        desc: undefined, // 描述
        name: undefined, // 专题名称
        photoCount: undefined, // 图片数量
        rank: undefined, // 排序
        showType: undefined, // 展示方式
        status: undefined, // 是否启用
        watchTimes: undefined, // 观看次数
        tagIds: []
      },
      rules: {}
    }
  },

  mounted() {
    this.title = this.data.title
    if (this.title === '编辑') {
      this.form = { ...this.data.data }
    }
  },
  methods: {
    selectTags(tags) {
      this.form.tagIds = tags
    },
    add(data) {
      photoTopicAdd(data).then((res) => {
        if (res.code === 200) {
          this.$message.success('新增成功')
          this.Visible = false
        } else {
          this.$message.error('新增失败')
        }
      })
    },
    update(data) {
      photoTopicUpdate(data).then((res) => {
        if (res.code === 200) {
          this.$message.success('更新成功')
          this.Visible = false
        } else {
          this.$message.error('更新失败')
        }
      })
    },
    // 提交按钮
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.title === '新增') {
            this.add(this.form)
          } else if (this.title === '编辑') {
            this.update(this.form)
          }
        } else {
          return false
        }
      })
    },
    changeCoverImgUrl(data) {
      this.form.coverImg = data
    },

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