zfire-newmall-admin/src/views/mallManagement/configCenter/annunciationConfig/index.vue

<template>
  <div class="app-container">
    <div class="setting_title">通告管理</div>
    <el-divider></el-divider>
    <div style="margin-top: 20px;">
      <el-form label-position="left" label-width="80px">
        <el-form-item label="通告内容">
          <el-input type="textarea" :rows="6" placeholder="请输入通告内容" v-model="mainData.noticeContent">
          </el-input>
        </el-form-item>
        <el-form-item label="通告状态">
          <el-switch v-model="mainData.status" active-text="启用" inactive-text="禁用">
          </el-switch>
        </el-form-item>
      </el-form>
    </div>
    <div class="page-footer">
      <div class="footer" :class="classObj">
        <el-button v-if="$restrict('save')" type="primary" @click="submitMainForm">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getNotice, addNotice, editNotice } from '@/api/setting'
import operation_mixin from '@/components/template/operation_mixin.js'

export default {
	mixins: [operation_mixin],
  data() {
    return {
      mainData: {
        noticeContent: '',
        status: false,
      },
      canClickSave: true,
    }
  },
  computed: {
    ...mapGetters([
      'userid'
    ]),
    sidebar() {
      return this.$store.state.app.sidebar
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened
      }
    },
  },
  created() {
    this.getNotice();
  },
  methods: {
    // 获取详情
    getNotice() {
      getNotice().then(res => {
        this.mainData = res.data && res.data.length > 0 ? res.data[0] : {
          noticeContent: '',
          status: false,
        };
      })
    },

    // 提交表单
    submitMainForm() {
      if (this.mainData.status && !this.mainData.noticeContent) {
        return this.$errorMsg('启用状态时，内容不能为空');
      }

      // 编辑
      if (this.mainData.noticeId) {
        editNotice({
          noticeId: this.mainData.noticeId,
          noticeContent: this.mainData.noticeContent,
          status: this.mainData.status,
        }).then(res => {
          this.getNotice();
          this.$successMsg();
        })
      }
      // 新增
      else {
        addNotice({
          noticeContent: this.mainData.noticeContent,
          status: this.mainData.status,
        }).then(res => {
          this.getNotice();
          this.$successMsg();
        })
      }
    },
  }
}
</script>

<style scoped lang="scss"></style>