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

<template>
  <div>
    <div class="notice-add">
      <div class="notice-add-box">
        <el-form ref="form" :model="notice" :rules="rules" label-width="90px" id="selectForm">
          <el-form-item label="公告名称:" size="mini" prop="noticeTitle">
            <el-input v-model="notice.noticeTitle" placeholder="请输入公告名称" style="width: 510px"></el-input>
          </el-form-item>

          <el-form-item label="发布时间:" required>
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker type="date" placeholder="选择日期" v-model="notice.date1" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="1.5">-</el-col>
          <el-col :span="11">
            <el-form-item prop="date2">
              <el-time-picker placeholder="选择时间" v-model="notice.date2" style="width: 100%;"></el-time-picker>
            </el-form-item>
         </el-col>
        </el-form-item>

          <el-form-item label="公告内容:" prop="content">
            <editor v-model="notice.content" :min-height="192"/>
          </el-form-item>

          <el-form-item>
          <el-button type="primary" @click="submitForm('form')">提交</el-button>
          <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
  
<script>
import { submitNotice } from '../../api/notice/notice.js'
export default {
  data() {
    return {
      notice: {
        noticeTitle: '',
        date1:'',
        date2:'',
        content:"", 
        cnt:1
      },
      rules: {
        noticeTitle: [{ required: true, message: "请输入公告名称", trigger: "blur" }],
        date1: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],
        date2: [{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }],
        content: [{ required: true, message: "请输入公告内容", trigger: "blur" }],
      },
    }
  },
  mounted() {
    console.log( "-****" , this.notice.noticeTitle);
    console.log( "-****" , this.notice.date1);
    console.log( "-****" , this.notice.date2);
    console.log( "-****" , this.notice.content);
  },
  methods: {
      change(){
        console.log(1);
        this.cnt = this.cnt+ 1  
        console.log(this.cnt);
      },
      onEditorChange() {
      //内容改变事件
        this.$emit("input", this.content);
      },
      submitForm(formName) {
        console.log( "-****title" , this.notice.noticeTitle);
        console.log( "-****date1" , this.notice.date1);
        console.log( "-****date2" , this.notice.date2);
        console.log( "-****content" , this.notice.content);
        // console.log( "lxzhen-****content" , this.content);
        var dateTime = this.notice.date1;
          function add0(m){return m<10?'0'+m:m }
            function format(shijianchuo)
            {
                var time = new Date(shijianchuo);
                var y = time.getFullYear();
                var m = time.getMonth()+1;
                var d = time.getDate()+1;
                var h = time.getHours()+1;
                var mm = time.getMinutes()+1;
                var s = time.getSeconds()+1;
                return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
            }
           var date = format(dateTime);
        console.log(date);
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
            submitNotice({
              newsTitle:this.notice.noticeTitle,
              newsContent:this.notice.content,
              createTime:'1994-12-01 12:22:33',
              updateTime:'1994-12-01 12:22:33',
            })
              .then((res) => {
                console.log(res);
                // 添加成功
                this.$notice({
                  notice:"公告添加成功！",
                  type:"success",
                });
                this.$refs[notice].resetFields();//添加成功后清空
                this.$router.push('/notice/noticeList')//跳转
              })
              // 失败
              .catch((err) => {
                console.log(err);
              });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    }
};
</script>

<style scoped>
.notice-add {
  width: 750px;
  height: 100%;
  position: absolute;
  top: 75px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.notice-add-box {
  width: 100%;
  height: 100%;
  padding: 35px;
}
/* 调节form表单中label的字体大小 */
#selectForm >>> .el-form-item__label {
  font-size: 12px;
  color: #808080;
}
.quill-editor /deep/ .ql-container {
  min-height: 220px;
}

.ql-container {
  min-height: 230px;
}

.ql-toolbar.ql-snow {
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  padding: 8px;
  width: 450px;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  border-top: 0px;
  width: 450px;
}
</style>