新建消息

src/api/message/message.js

@@ -46,3 +46,13 @@ export function addMessage() {
   })
 }
 
+// 创建消息页面
+// 提交消息
+export function submitMessage(data) {
+  return request({
+    url: '/post/news/add',
+    method: 'post',
+    data
+  })
+}
+

src/views/message/addMessage.vue

@@ -4,16 +4,28 @@
     <!-- <el-page-header @back="goBack" content="创建消息"></el-page-header> -->
     <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-col :span="11">
             <el-form-item prop="dateTime">
               <el-time-picker placeholder="选择时间" v-model="message.dateTime" style="width: 100%;"></el-time-picker>
             </el-form-item>
+          </el-col> -->
+          <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">
@@ -30,16 +42,20 @@
           </quill-editor>
         </el-form-item>
 
-        <!-- <el-form-item>
-          <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
-        </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 Quill from 'quill' // 引入编辑器
+import { submitMessage } from '../../api/message/message.js'
 // 自定义字体大小
 const Size = Quill.import('attributors/style/size')
 Size.whitelist = ['10px', '12px', '16px', '18px', '20px', '30px', '32px']
@@ -56,7 +72,9 @@ Quill.register(Font, true)
       return {
         message: {
           messageTitle: '',
-          dateTime: '',
+          // dateTime: '',
+          date1:'',
+          date2:'',
           receivedUsers: '',
           messageContent: '',
         },
@@ -64,14 +82,20 @@ Quill.register(Font, true)
           messageTitle: [
             { required: true, message: '请输入消息标题', trigger: 'blur' }
           ],
-          dateTime: [
-            { type: 'date', required: true, message: '选择时间', trigger: 'change' }
+          // 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' }
+            { required: true, message: '请导入接受用户', trigger: 'blur' }
           ],
           messageContent: [
-            { required: true, trigger: 'blur' }
+            { required: false, message: '请导入内容' , trigger: 'blur' }
           ]
         },
         content: `<p>这是 vue-quill-editor 的内容！</p>`, //双向数据绑定数据
@@ -98,25 +122,56 @@ Quill.register(Font, true)
           }
       }
     }
-  }
+  },
+  methods: {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            // alert('submit!');
+            submitMessage({
+              messageTitle:this.message.messageTitle
+            })
+              .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{
-  width: 700px;
+.message-add-box{
+  width: 60%;
   height: 100%;
-  position: absolute;
-  top: 30px;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: auto;
+  margin: 50px auto;
   border: 1px solid #ccc;
+  padding-top: 40px;
+  padding-left: 100px;
+  padding-right: 30px;
 }
-.message-add-box{
-  padding: 40px;
-}
+
 /* .users-input-box{
   color:aqua;
 } */