huangguo_admin/src/views/activity/announcement/components/AddOrEdit.vue

<template>
  <el-dialog
:title="title"
:visible.sync="Visible"
width="900px"
center
class="ac-dialog"
:close-on-click-modal="false"
    @close="close"
top="2%">
    <el-form
:inline="true"
:rules="rules"
:model="form"
ref="ruleForm"
class="demo-form-inline"
label-width="80px"
      label-position="right">
      <el-row :gutter="24">
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="公告标题">
            <el-input placeholder="请输入公告标题" v-model="form.title" style="width: 180px" />
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="是否开启">
            <el-switch v-model="form.status" active-color="#13ce66" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="跳转地址">
            <el-input placeholder="请输入跳转地址" v-model="form.jumpUrl" style="width: 350px" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24">
          <el-form-item label="封面">
            <UploadImg @changeImgUrl="changeCoverUrl" :img="form.cover"></UploadImg>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24">
          <el-form-item label="系统类型">
            <el-select placeholder="请选择系统类型" clearable v-model="form.sysType" style="width: 180px">
              <el-option label="app" value="app" />
              <el-option label="h5app" value="h5app" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24">
          <el-form-item label="开始时间">
            <el-date-picker
v-model="form.start"
type="datetime"
placeholder="开始时间"
style="width: 180px"
              value-format="yyyy-MM-ddTHH:mm:ss+08:00"> </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24">
          <el-form-item label="结束时间">
            <el-date-picker
v-model="form.end"
type="datetime"
placeholder="结束时间"
style="width: 180px"
              value-format="yyyy-MM-ddTHH:mm:ss+08:00"> </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="内容" prop="content">
            <el-input placeholder="请输入内容" :rows="10" style="width: 500px" v-model="form.content" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-col :xs="24">
        <el-form-item label="富文本" class="post-details">
          <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
            <el-form-item class="text-post">
              <QuillEditor :textNode="form.textNode" ref="QuillEditor" height="1000"></QuillEditor>
            </el-form-item>
          </el-col>
        </el-form-item>
      </el-col>
    </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 moment from 'moment'
import { announcementAdd, announcementUpdate } from '@/api/activity/announcement'
import UploadImg from '@/components/UploadImg/index'
import QuillEditor from '@/components/QuillEditor/index'
export default {
  name: 'AddOrEdit',
  props: ['data'],
  components: {
    UploadImg,
    QuillEditor
  },
  data() {
    return {
      Visible: true,
      title: '',
      // 表单数据
      form: {
        content: undefined, // "string",内容
        cover: undefined, // "string",封面
        end: undefined, // "string",结束时间
        jumpUrl: undefined, // "string",跳转地址
        start: undefined, // "string",开始时间
        status: false, // true,是否开启
        title: undefined, // "string",标题
        textNode: undefined,
        sysType: 'app'
      },
      rules: {
        content: [{ required: true, message: '必填', trigger: 'blur' }]
        //   rank: [{ required: true, message: '必填', trigger: 'blur' }],
      }
    }
  },

  mounted() {
    this.title = this.data.title
    if (this.title === '编辑') {
      this.form = { ...this.data.data }
      this.form.start =
        moment(this.data.data.start)
          .utcOffset(480)
          .format('YYYY-MM-DDTHH:mm:ss') + '+08:00'
      this.form.end =
        moment(this.data.data.end)
          .utcOffset(480)
          .format('YYYY-MM-DDTHH:mm:ss') + '+08:00'
    }
  },
  methods: {
    // TODO:新增公告列表数据
    add(data) {
      announcementAdd(data).then(res => {
        if (res.code === 200) {
          this.$message.success('新增成功')
          this.close()
        } else {
          this.$message.error('新增失败')
        }
      })
    },
    // TODO:编辑公告列表数据
    update(data) {
      announcementUpdate(data).then(res => {
        if (res.code === 200) {
          this.$message.success('更新成功')
          this.close()
        } else {
          this.$message.error('更新失败')
        }
      })
    },
    // 更换封面
    changeCoverUrl(data) {
      this.form.cover = data
    },
    // 提交按钮
    submit(formName) {
      const data = JSON.parse(JSON.stringify(this.form))
      data.textNode = this.$refs['QuillEditor'].getdata()
      this.$refs[formName].validate(valid => {
        if (valid) {
          // const data = { ...this.form }
          if (this.title === '新增') {
            this.add(data)
          } else if (this.title === '编辑') {
            this.update(data)
          }
        } else {
          return false
        }
      })
    },

    // 关闭编辑
    close() {
      this.$emit('close')
    }
  }
}
</script>
<style lang="scss">
.quill-editor {
  height: 490px;

  .ql-container {
    height: 380px;
  }
}
</style>