post-ui/src/views/message/addMessage.vue

<template>
  <div class="message-add" :style="{height:height,width:width}"  >
    
    <div class="message-add-box">
      <el-form :model="message" :rules="rules" ref="form" label-width="100px">
      
        <el-form-item label="消息标题:" prop="messageTitle">
          <el-input v-model="message.messageTitle" placeholder="请输入消息标题"></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="message.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="message.date2" style="width: 100%;"></el-time-picker>
            </el-form-item>
         </el-col>
        </el-form-item>

        <el-form-item label="接受用户:" prop="receivedUsers">
          <el-input type="textarea" :rows="2" placeholder="请导入用户" autosize v-model="message.receivedUsers"></el-input>
        </el-form-item>  

        <el-form-item label="消息内容:" prop="content">
          <editor v-model="message.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-button @click="importForm('form')">导入</el-button>
        </el-form-item>
      </el-form>

    </div>     
  </div>
</template>

<script>
import {submitMessage} from '../../api/message/message.js'

 export default {
  
  data() {
      return {
        message: {
          messageTitle: '',
          date1:'',
          date2:'',
          receivedUsers: '',
          content: '请输入内容',
          cnt : 1 
        },
        rules: {
          messageTitle: [
            { required: true, message: '请输入消息标题', trigger: 'blur' }
          ],
          // dateTime: [
          //   { type: 'date', required: true, message: '选择时间', trigger: 'change' }
          // ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          receivedUsers: [
            { required: true, message: '请导入接受用户', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '请导入内容' , trigger: 'blur' }
          ]
        },

    }
  },
  mounted() {
    console.log( "-****" , this.message.messageTitle);
    console.log( "-****" , this.message.date1);
    console.log( "-****" , this.message.date2);
    console.log( "-****" , this.message.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.message.messageTitle);
        console.log( "-****date1" , this.message.date1);
        console.log( "-****date2" , this.message.date2);
        console.log( "-****content" , this.message.content);
        // console.log( "lxzhen-****content" , this.content);
        var dateTime = this.message.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!');
            submitMessage({
              newsTitle:this.message.messageTitle,
              newsContent:this.message.content,
              userPhone :this.message.receivedUsers,
              createTime:'1994-12-01 12:22:33',
              updateTime:'1994-12-01 12:22:33',
            })
              .then((res) => {
                console.log(res);
                // 添加成功
                this.$message({
                  message:"消息添加成功！",
                  type:"success",
                });
                this.$refs[message].resetFields();//添加成功后清空
                this.$router.push('/message/messageList')//跳转
              })
              // 失败
              .catch((err) => {
                console.log(err);
              });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      // importForm(formName) {
        
      // }
    }
}
</script>

<style>
.message-add-box{
  width: 60%;
  height: 100%;
  margin: 50px auto;
  border: 1px solid #ccc;
  padding-top: 40px;
  padding-left: 100px;
  padding-right: 30px;
}

/* .users-input-box{
  color:aqua;
} */

.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>