message api

src/api/message/message.js

@@ -1,38 +1,34 @@
-// 后端接口版本
 import request from '@/utils/request'
 
-// 获取消息列表
-// export function getMessage() {
-//   return request({
-//     url: '/messageList/messageList',
-//     method: 'get'
-//   })
-// }
-
+// 查询消息列表
 export function getMessage(params) {
   return request({
-    url: '/api/message/getMessage',
+    url: 'http://localhost:80/dev-api/system/news/list',
     params
   })
 }
 
+// 按标题时间搜索消息
 export function searchMessage(params) {
+  console.log(params);
   return request({
-    url: '/api/message/searchData',
+    url: 'http://localhost:80/dev-api/system/news/queryNews',
     params
   })
 }
 
-export function detailMessage(params) {
+// 删除消息
+export function deleteMessage(id) {
   return request({
-    url: '/api/message/detailMessage',
-    params
+    url: 'http://localhost:80/dev-api/system/news/remove/' + id,
+    method: 'delete',
   })
 }
 
-export function deleteMessage(data) {
+// 新增消息
+export function addMessage(data) {
   return request({
-    url: '/api/message/del',
+    url: 'http://localhost:80/dev-api/system/news/add',
     method: 'post',
     data
   })

src/views/message/addMessage.vue

@@ -1,109 +1,77 @@
 <template>
   <div class="message-add">
-
-    <!-- <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-form-item label="消息标题:" prop="title">
+          <el-input v-model="message.title" placeholder="请输入消息标题"></el-input>
         </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="messageContent">
-          <quill-editor 
-            class="ql-editor"
-            v-model="content" 
-            ref="myQuillEditor" 
-            :options="editorOption" 
-            >
-          </quill-editor>
+        <el-form-item label="消息内容:" prop="content">
+          <editor v-model="message.content"></editor>
         </el-form-item>
-
-        <!-- <el-form-item>
-          <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
-        </el-form-item> -->
       </el-form>
-    </div>     
+      <el-form style="margin-left: 100px;">
+        <el-button type="primary" @click="submit">创建</el-button>
+        <el-button @click="reset">重置</el-button>
+      </el-form>
+    </div>
   </div>
 </template>
 
 <script>
-import Quill from 'quill' // 引入编辑器
-// 自定义字体大小
-const Size = Quill.import('attributors/style/size')
-Size.whitelist = ['10px', '12px', '16px', '18px', '20px', '30px', '32px']
-Quill.register(Size, true)
-
-// 自定义字体类型
-var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'sans-serif']
-var Font = Quill.import('formats/font')
-Font.whitelist = fonts
-Quill.register(Font, true)
-
- export default {
-    data() {
-      return {
-        message: {
-          messageTitle: '',
-          dateTime: '',
-          receivedUsers: '',
-          messageContent: '',
-        },
-        rules: {
-          messageTitle: [
-            { required: true, message: '请输入消息标题', trigger: 'blur' }
-          ],
-          dateTime: [
-            { type: 'date', required: true, message: '选择时间', trigger: 'change' }
-          ],
-          receivedUsers: [
-            { required: true, message: '请导入用户', trigger: 'blur' }
-          ],
-          messageContent: [
-            { required: true, trigger: 'blur' }
-          ]
-        },
-        content: `<p>这是 vue-quill-editor 的内容！</p>`, //双向数据绑定数据
-        // 富文本编辑器配置
-        editorOption: {
-          modules: {
-              toolbar: [
-                ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
-                ['blockquote', 'code-block'], // 引用  代码块
-                  [{ header: 1 }, { header: 2 }], // 1、2 级标题
-                  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
-                  [{ script: 'sub' }, { script: 'super' }], // 上标/下标
-                  [{ indent: '-1' }, { indent: '+1' }], // 缩进
-                  [{ direction: 'rtl' }], // 文本方向
-                  [{ size: ['12px', false, '16px', '18px', '20px', '30px'] }], // 字体大小
-                  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
-                  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
-                  [{ font: [false, 'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字体种类
-                  [{ align: [] }], // 对齐方式
-                  ['clean'], // 清除文本格式
-                  ['link', 'image', 'video'] // 链接、图片、视频
-          ],
-            placeholder: '请输入正文'
-          }
+import { addMessage } from '../../api/message/message'
+export default {
+  data() {
+    return {
+      message: {
+        title: '',
+        content: '',
+      },
+      rules: {
+        title: [
+          { required: true, message: '请输入消息标题', trigger: 'blur' }
+        ],
+        content: [
+          { required: true, message: '请输入消息内容', trigger: 'blur' }
+        ]
+      },
+      content: ''
+    }
+  },
+  methods: {
+    submit() {
+      if (this.message.title && this.message.content) {
+        let news = {
+          newsTitle: this.message.title,
+          newsContent: this.message.content
+        }
+        addMessage(news).then((res) => {
+          this.message.title = '';
+          this.message.content = '';
+        })
+        this.$notify({
+          title: '成功',
+          message: '创建消息成功',
+          type: 'success'
+        });
+        this.$router.push("./messageList");
+      } else {
+        this.$notify({
+          title: '警告',
+          message: '请填写内容',
+          type: 'warning'
+        });
       }
+    },
+    reset() {
+      this.message.title = '';
+      this.message.content = '';
     }
   }
 }
 </script>
 
 <style>
-.message-add{
+.message-add {
   width: 700px;
   height: 100%;
   position: absolute;
@@ -114,20 +82,22 @@ Quill.register(Font, true)
   margin: auto;
   border: 1px solid #ccc;
 }
-.message-add-box{
+
+.message-add-box {
   padding: 40px;
 }
+
 /* .users-input-box{
   color:aqua;
 } */
 
 .quill-editor /deep/ .ql-container {
-    min-height: 220px;
-  }
+  min-height: 220px;
+}
 
-  .ql-container {
-    min-height: 230px;
-  }
+.ql-container {
+  min-height: 230px;
+}
 
 .ql-toolbar.ql-snow {
   border: 1px solid #ccc;
@@ -137,8 +107,9 @@ Quill.register(Font, true)
   padding: 8px;
   width: 450px;
 }
-.ql-toolbar.ql-snow + .ql-container.ql-snow {
-    border-top: 0px;
-    width: 450px;
+
+.ql-toolbar.ql-snow+.ql-container.ql-snow {
+  border-top: 0px;
+  width: 450px;
 }
 </style>

src/views/message/messageDetails.vue

@@ -3,12 +3,9 @@
     <el-button id="returnBtn" @click="returnBtn">返回</el-button>
     <div class="noticeDetails">
       <div class="title">消息详情</div>
-      <h3 id="noticeTitle">数字邮局正式上线，创世版首发!</h3>
-      <!-- <div class="noticeTitle">数字邮局正式上线，创世版首发!</div> -->
-      <h4 id="noticeTime">2023-01-13 11:46:38</h4>
-      <div id="noticeContent">
-        邮贝数字邮局，是由中国邮政集团有限公司北京市公司设立，同时使用人民日报全国党媒联盟链进行数字邮品和数字产品的登记、认证与确权，服务广大集邮用户和数字收藏爱好者的邮政官方数字邮品和数字产品发行平台。邮贝数字邮局由北京游贝数字科技有限公司负责运营。
-      </div>
+      <h3 id="noticeTitle"></h3>
+      <h4 id="noticeTime"></h4>
+      <div id="noticeContent"></div>
     </div>
   </div>
 </template>

src/views/message/messageList.vue

@@ -10,11 +10,11 @@
       </div>
       <div class="left-up">
         <div class="up-input-title">
-          消息标题:<el-input v-model="input" class="up-input" placeholder="请输入内容"></el-input>
+          消息标题:<el-input v-model="input.value1" class="up-input" placeholder="请输入内容"></el-input>
         </div>
         <div class="up-input-title-right">
           <span class="demonstration">发布时间:</span>
-          <el-date-picker v-model="value2" type="datetimerange" class="up-input-right" range-separator="至"
+          <el-date-picker v-model="input.value2" type="datetimerange" class="up-input-right" range-separator="至"
             start-placeholder="开始日期" end-placeholder="结束日期" align="right">
           </el-date-picker>
         </div>
@@ -29,13 +29,11 @@
       </div>
       <div class="down-table">
         <el-table :data="tableData" order style="width: 100%" class="messagetable">
-          <el-table-column type="index" label="ID" align="center">
+          <el-table-column prop="newsId" label="ID" align="center">
           </el-table-column>
-          <el-table-column :formatter="stateFormat" prop="messageTitle" label="消息标题" align="center">
+          <el-table-column :formatter="stateFormat" prop="newsTitle" label="消息标题" align="center">
           </el-table-column>
-          <el-table-column prop="phoneNumber" label="手机号" align="center">
-          </el-table-column>
-          <el-table-column prop="publishTime" label="发布时间" align="center">
+          <el-table-column prop="createTime" label="发布时间" align="center">
           </el-table-column>
           <el-table-column prop="operate" label="操作" align="center">
             <template slot-scope="scope">
@@ -49,11 +47,6 @@
         </el-table>
       </div>
     </div>
-    <div class="bottom">
-      <el-pagination @current-change="handleCurrentChange" background layout="total, prev, pager, next" :total="total"
-        id="page">
-      </el-pagination>
-    </div>
   </div>
 </template>
 <script>
@@ -61,78 +54,76 @@ import { getMessage, searchMessage, deleteMessage } from '../../api/message/mess
 export default {
   data() {
     return {
-      tableData: [],
-      pageData: {
-        page: 1,
-        limit: 10
-      },
-      total: 1,
-      input: "",
-      value2: ""
+      tableData: [],  // 数据内容
+      total: 1, // 数据个数
+      input: {
+        value1: '', // 搜索姓名
+        value2: ''  // 搜索时间
+      }
     }
   },
   mounted() {
-    this.getMockMessageList();
-  },
-  beforeDestroy() {
+    this.getMessageList();
   },
   methods: {
-    getMockMessageList() {
-      getMessage(this.pageData).then((res) => {
-        this.tableData = res.list
-        this.total = res.count;
+    // 获取消息列表
+    getMessageList() {
+      getMessage().then((res) => {
+        this.tableData = res.rows;
+        this.total = res.total;
       })
     },
-    handleCurrentChange(newPage) {
-      this.pageData.page = newPage;
-      this.getMockMessageList();
-    },
-    /**搜索按钮 */
+    // 搜索消息
     check() {
-      if (this.input) {
-        let con = {
-          name: this.input
+      if (this.input.value1 || this.input.value2) {
+        let searchCon = {
+          title: this.input.value1,
+          // createTime: this.input.value2
         }
-        searchMessage(con).then((data) => {
-          this.tableData = data.list;
-          this.total = data.count;
+        searchMessage(searchCon).then((res) => {
+          this.tableData = res.rows;
+          this.total = res.total;
         })
       } else {
-        this.getMockMessageList();
+        this.getMessageList();
       }
     },
+    // 重置搜索
     empty() {
-      this.input = "";
-      this.getMockMessageList();
+      this.input.value1 = "";
+      this.input.value2 = "";
+      this.getMessageList();
     },
-    stateFormat(row, column, cellValue) {
-      if (!cellValue) return ''
-      if (cellValue.length > 15) {       //最长固定显示10个字符
-        return cellValue.slice(0, 15) + '...'
-      }
-      return cellValue
-    },
-    //删除列表
+    //  删除列表
     deleteM(row) {
-      deleteMessage({ id: row.id }).then(() => {
-        this.getMockMessageList();
+      deleteMessage(row.newsId).then(() => {
+        this.getMessageList();
       })
     },
-    //查看详情
+    // 查看详情
     viewDetails(row) {
+      console.log(row);
       this.$router.push({
         name: "messageDetails",
         query: {
-          publishTime: row.publishTime,
-          title: row.messageTitle,
-          content: row.content
+          publishTime: row.createTime,
+          title: row.newsTitle,
+          content: row.newsContent
         }
       });
     },
     //添加跳转
     addNoticce() {
       this.$router.push("/messageList/addMessage");
-    }
+    },
+    // 标题省略
+    stateFormat(row, column, cellValue) {
+      if (!cellValue) return ''
+      if (cellValue.length > 15) {       //最长固定显示10个字符
+        return cellValue.slice(0, 15) + '...'
+      }
+      return cellValue
+    },
   }
 }
 </script>