supply-front/src/views/setting/noticebar.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 type="primary" @click="submitMainForm">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getNotice, addNotice, editNotice } from '@/api/setting'

export default {
  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: {
    // 查询按钮权限
    checkBtnRole(value) {
      // let btnRole = this.$route.meta.roles;
      // if(!btnRole) {return true}
      // let index = btnRole.indexOf(value);
      // return index >= 0 ? true : false;
      return true;
    },

    // 获取详情
    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">
  .page-footer {
    height: 70px;
  }
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    background: #fff;
    padding: 15px 40px;
    box-sizing: border-box;
    transition: all 0.28s;
    text-align: right;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 50%), 0 2px 5px 0 rgb(0 0 0 / 10%);
    &.hideSidebar {
      margin-left: 54px;
      width: calc(100vw - 54px);
    }
    &.openSidebar {
      margin-left: 210px;
      width: calc(100vw - 210px);
    }
    .tips {
      font-size: 12px;
      color: red;
      margin-top: 10px;
    }
  }
</style>