post-ui/src/views/notice/addNotice.vue

<template>
  <div>
    <div class="body">
      <div class="s-body">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="公告名称: " prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="发布时间: " required>
            <el-date-picker v-model="ruleForm.date" type="date" placeholder="选择日期">
            </el-date-picker>
            <el-time-picker placeholder="选择时间" v-model="ruleForm.time"></el-time-picker>
          </el-form-item>
          <el-form-item label="公告内容:  " prop="name">
            <mavon-editor ref="md" v-model="notice.noticeContent" style="height: calc(100vh - 400px)" />
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="confirmGG" style="float: right">发布公告</el-button>
          </el-form-item>
        </el-form>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="20%" :before-close="handleClose">
          <span>确认发布公告吗？</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { addNotice } from '../../api/notice/notice'
export default {
  name: "Addnotice",
  data() {
    return {
      ruleForm: {
        name: '',
        date: '',
        time: '',
      },
      notice: {
        noticeContent: "",
      },
      rules: {
        name: [
          { required: true, message: '请输入公告名称', trigger: 'blur' },
        ],
        date: [
          { required: true, type: 'date', message: '请选择日期', trigger: 'change' }
        ],
        time: [
          { required: true, type: 'date', message: '请选择时间', trigger: 'change' }
        ]
      },
      dialogVisible: false,
    };
  },

  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let nyr = this.$formatDate(this.ruleForm.date, 'yyyy-MM-dd');
          let sfm = this.$formatDate(this.ruleForm.time, 'hh:mm:ss');
          let notice = {
            noticeTitle: this.ruleForm.name,
            noticeContent: this.notice.noticeContent,
            createTime: nyr + ' ' + sfm
          }
          addNotice(notice).then(() => {
            this.ruleForm.name = '';
            this.ruleForm.date = '';
            this.ruleForm.time = '';
            this.notice.noticeContent = '';
          })
          this.$notify({
            title: '成功',
            message: '创建消息成功',
            type: 'success'
          });
          this.$router.push("./noticeList");
        } else {
          this.$notify({
            title: '警告',
            message: '请填写内容',
            type: 'warning'
          });
        }
      });
      this.dialogVisible = false
    },
    cancel() {
      this.dialogVisible = false
    },
    confirmGG() {
      this.dialogVisible = true
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },
  },
};
</script>

<style lang="scss" scoped>
.body {
  margin: auto;
  width: 80%;
  border: solid 2px rgb(239, 231, 231);
  margin-top: 16px;
  border-radius: 10px;
}

.s-body {
  margin: 0 auto;
  width: 70%;
  padding-top: 40px;
}
</style>