create taoxi

src/views/collection/addCollection.vue

@@ -1,141 +1,203 @@
 <template>
-  <div class="right" :style="{ height: height, width: width }">
-    1
+  <div class="message-add" :style="{height:height,width:width}"  >
+    
+    <!-- <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-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">
+          <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>
-
-
 
+<script>
+import {submitMessage} from '../../api/message/message.js'
+
+ export default {
+  
+    data() {
+      return {
+        
+        message: {
+          messageTitle: '',
+          // dateTime: '',
+          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 scoped>
-.up {
-  width: 96%;
-  height: 170px;
-  margin-top: 20px;
-  margin-left: 2%;
+<style>
+.message-add-box{
+  width: 60%;
+  height: 100%;
+  margin: 50px auto;
   border: 1px solid #ccc;
-  border-radius: 4px;
-
-}
-
-.up-title {
-  font-size: 20px;
-  width: 20%;
-  margin-left: 20px;
-  margin-top: 20px;
-  float: left;
-}
-
-.btn {
-  float: right;
-  padding-right: 3%;
-  margin-top: 2.5%;
-}
-
-.up-input {
-  width: 250px;
-  margin-left: 15px;
-}
-
-.up-input-title {
-
-  margin-left: 40px;
-
-  float: left;
-}
-
-.up-input-right {
-  margin-left: 15px;
-  width: 500px;
-}
-
-.up-input-title-right {
-  width: 800px;
-  margin-left: 450px;
-
-
-}
-
-.left-up {
-  width: 80%;
-  float: left;
-  height: 37px;
-  margin-top: 50px;
+  padding-top: 40px;
+  padding-left: 100px;
+  padding-right: 30px;
 }
 
-.right-up {
-  width: 16%;
-  margin-top: 2%;
-  float: right;
-
-}
+/* .users-input-box{
+  color:aqua;
+} */
 
-.anniu {
-  padding-right: 5%;
-}
+.quill-editor /deep/ .ql-container {
+    min-height: 220px;
+  }
 
-.down {
-  margin-top: 40px;
-}
+  .ql-container {
+    min-height: 230px;
+  }
 
-.down-add {
-  padding: 10px;
-  margin: 0 27px;
+.ql-toolbar.ql-snow {
   border: 1px solid #ccc;
-  border-radius: 2px
-}
-
-.down-title {
-  padding-top: 10px;
-  color: #303133;
-}
-
-.down-table {
-  margin-top: 15px;
-  text-align: center;
-  margin: 35px 27px;
-}
-
-.el-table .el-table__header-wrapper th,
-.el-table .el-table__fixed-header-wrapper th {
-  word-break: break-word;
-  /* background-color: #f8f8f9; */
-  color: #515a6e;
-  height: 40px;
-  font-size: 13px;
-  text-align: center;
-}
-
-.bottom-number {
-  padding-top: 5px;
-  color: #303133;
-  float: right;
-}
-
-.bottom-page {
-  float: right;
-}
-
-.el-icon-search {
-  padding-right: 10px;
-}
-
-.btn-delete {
-  margin-left: 20px;
-}
-
-/**
-自适应
-*/
-/* .demonstration{
-  width: 50%;
-} */
-.right {
-  float: none;
-  width: 100%;
-  height: 100%;
-  /* background-color: #9dc3e6; */
+  -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>