issuerList

src/api/announce/list.js

@@ -1,3 +1,7 @@
+//mock
+import axios from "axios"
+import '@/mock/index'
+//后端接口
 import request from '@/utils/request'
 
 // 获取公告列表

src/api/collection/seriesList.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+//获取套系列表
+export function getSeriesList(){
+    return request({
+        url:'/sytem/system/list',
+        method:'get'
+    })
+}

src/api/message/index.js

@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+//获取消息列表
+export function getMessageList(list){
+    return request({
+        url:'system/infos/list',
+        method:'get'
+    })
+}
+//搜索消息功能
+
+//删除消息
+export const messageDel = (id) =>{
+    return request({
+        url:'/system/infos/' + id,
+        method: 'delete'
+    })
+}
+//新增消息
+export function addMesage(param){
+    return request({
+        url:'/system/infos',
+        method:'post',
+        data:param
+    }) 
+}

src/router/index.js

@@ -104,7 +104,7 @@ export const constantRoutes = [
   {
     path: '/collection',
     component: Layout,
-    
+
     meta: { title: '藏品管理', icon: 'collection' },
     children: [
       {
@@ -119,9 +119,16 @@ export const constantRoutes = [
         name: 'createseries',
         meta: { title: '创建套系', icon: 'createseries' }
       },
+      {
+        path: '/deatil',
+        hidden: true,
+        component: () => import('@/views/collection/detail/index'),
+        name: 'deatil',
+        meta: { title: '套系详情' }
+      }
     ]
   },
-  
+
   //app用户列表
   {
     path: '',
@@ -172,10 +179,10 @@ export const constantRoutes = [
         component: () => import('@/views/announcement/add/index'),
         name: 'announcementAdd',
         meta: { title: '创建公告', icon: 'createseries' }
-      }, 
+      },
       {
         path: 'announcementDetail',
-        hidden:true,
+        hidden: true,
         component: () => import('@/views/announcement/detail/index'),
         name: 'announcementDetail',
         meta: { title: '公告详情' }
@@ -199,7 +206,13 @@ export const constantRoutes = [
         component: () => import('@/views/message/messageCreate/index'),
         name: 'messageCreate',
         meta: { title: '创建消息', icon: 'createseries' }
-      },
+      }, {
+        path: 'messageDetail',
+        hidden: true,
+        component: () => import('@/views/message/detail/index'),
+        name: 'messageDetail',
+        meta: { title: '消息详情' }
+      }
     ]
   },
   //兑换列表

src/views/announcement/add/index.vue

@@ -20,9 +20,9 @@
           </el-form-item>
           <div class="button">
             <el-form-item>
-            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
-            <el-button @click="resetForm('ruleForm')">重置</el-button>
-          </el-form-item>
+              <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
+              <el-button @click="resetForm('ruleForm')">重置</el-button>
+            </el-form-item>
           </div>
         </el-form>
       </div>
@@ -36,6 +36,7 @@ import {
 import 'quill/dist/quill.core.css'
 import 'quill/dist/quill.snow.css'
 import 'quill/dist/quill.bubble.css'
+import { addAnnouncement } from '../../../api/announce/list'
 
 export default {
   name: 'FuncFormsEdit',
@@ -93,12 +94,14 @@ export default {
   margin-top: 40px;
   margin-left: 300px;
 }
-.content{
+
+.content {
   margin-top: 20px;
   margin-right: 30px;
   position: relative;
 }
-.button{
+
+.button {
   position: absolute;
   margin-top: 70px;
 }

src/views/announcement/list/index.vue

@@ -4,37 +4,25 @@
     <div class="select-box">
       <div class="search-icon">
         <i class="el-icon-search"></i>
-        <span>  筛选搜查</span>
+        <span> 筛选搜查</span>
         <div class="search-button">
-          <el-button  @click="resetQuery">重置</el-button>
-          <el-button type="primary"  @click="handleQuery">查询搜索</el-button>
+          <el-button @click="resetQuery">重置</el-button>
+          <el-button type="primary" @click="handleQuery">查询搜索</el-button>
         </div>
       </div>
-      <el-form  :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
-        <el-form-item class="inline" label="公告标题:  " prop="title" >
-          <el-input
-            v-model="queryParams.title"
-            placeholder="筛选公告标题"
-            clearable
-            @keyup.enter.native="handleQuery"
-          />
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
+        <el-form-item class="inline" label="公告标题:  " prop="title">
+          <el-input v-model="queryParams.title" placeholder="筛选公告标题" clearable @keyup.enter.native="handleQuery" />
         </el-form-item>
         <el-form-item class="inline" label="发布时间:  " prop="dateRange">
-          <el-date-picker
-            v-model="dateRange"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            placeholder="选择时间范围"
-            value-format="yyyy-MM-dd"
-            @keyup.enter.native="handleQuery"
-            unlink-panels  >
+          <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
+            end-placeholder="结束日期" placeholder="选择时间范围" value-format="yyyy-MM-dd" @keyup.enter.native="handleQuery"
+            unlink-panels>
           </el-date-picker>
         </el-form-item>
       </el-form>
     </div>
-    
+
 
     <!-- 标题 -->
     <el-row>
@@ -52,12 +40,7 @@
     <!-- 列表 -->
     <el-table v-loading="loading" :data="noticeList" border>
       <el-table-column label="ID" align="center" prop="noticeId" width="100" />
-      <el-table-column
-        label="公告标题"
-        align="center"
-        prop="noticeTitle"
-        :show-overflow-tooltip="true"
-      />
+      <el-table-column label="公告标题" align="center" prop="noticeTitle" :show-overflow-tooltip="true" />
       <el-table-column label="发布时间" align="center" prop="createTime" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
@@ -65,36 +48,21 @@
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="170">
         <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            @click="handleDetail(scope.row)"
-          >查看详情</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            @click="handleDelete(scope.row)"
-          >删除</el-button>
+          <el-button size="mini" type="text" @click="handleDetail(scope.row)">查看详情</el-button>
+          <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
     <!-- 分页 -->
-    <el-pagination
-      background
-      :current-page="pagination.current"
-      :page-size="pagination.pageSize"
-      layout="total, prev, pager, next"
-      :total="pagination.total"
-      @pagination="getList"
-      @current-change="onPageChange"
-      class="paper"
-    >
+    <el-pagination background :current-page="pagination.current" :page-size="pagination.pageSize"
+      layout="total, prev, pager, next" :total="pagination.total" @pagination="getList" @current-change="onPageChange"
+      class="paper">
     </el-pagination>
   </div>
 </template>
 
 <script>
-import { getNoticeList, deleteNotice,queryNotice } from '@/api/announce/list';
+import { getNoticeList, deleteNotice, queryNotice } from '@/api/announce/list';
 
 export default {
   name: "Notice",
@@ -105,18 +73,18 @@ export default {
       // 公告表格数据
       noticeList: [],
       // 查询的时间参数
-      dateRange:[],
+      dateRange: [],
       // 查询参数
       queryParams: {
         title: undefined,
-        noticeTimeLeft:undefined,
-        noticeTimeRight:undefined
+        noticeTimeLeft: undefined,
+        noticeTimeRight: undefined
       },
       // 分页参数
-      pagination:{
-        total:0,
-        current:1,
-        pageSize:10,
+      pagination: {
+        total: 0,
+        current: 1,
+        pageSize: 10,
       },
     };
   },
@@ -127,7 +95,7 @@ export default {
     /** 查询公告列表 */
     getList() {
       this.loading = true;
-      getNoticeList().then( res =>{
+      getNoticeList().then(res => {
         console.log(res);
         this.noticeList = res.rows;
         this.pagination.total = res.total;
@@ -138,10 +106,10 @@ export default {
     /** 搜索按钮操作 */
     handleQuery() {
       this.pagination.current = 1;
-      this.queryParams.noticeTimeLeft = this.dateRange ? this.dateRange[0] :undefined;
-      this.queryParams.noticeTimeRight = this.dateRange ? this.dateRange[1] :undefined;
+      this.queryParams.noticeTimeLeft = this.dateRange ? this.dateRange[0] : undefined;
+      this.queryParams.noticeTimeRight = this.dateRange ? this.dateRange[1] : undefined;
       this.loading = true;
-      queryNotice({...this.queryParams}).then(res =>{
+      queryNotice({ ...this.queryParams }).then(res => {
         //console.log(res);
         this.noticeList = res.rows;
         this.pagination.total = res.total;
@@ -150,21 +118,22 @@ export default {
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.dateRange=[]
+      this.dateRange = []
       this.resetForm("queryForm");
       this.getList();
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.$router.push({name:"announcementAdd"});
+      this.$router.push({ name: "announcementAdd" });
     },
     // 查看详情
     handleDetail(row) {
-      this.$router.push({name:"announcementDetail",params:{row}});
+      this.$router.push({ name: "announcementDetail", params: { row } });
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      this.$confirm('是否确认删除公告编号为"' + row.noticeId + '"的数据项？','提示').then(function() {
+      console.log(row);
+      this.$confirm('是否确认删除公告编号为"' + row.noticeId + '"的数据项？', '提示').then(function () {
         return deleteNotice(row.noticeId);
       }).then(() => {
         this.$message({
@@ -172,11 +141,11 @@ export default {
           message: '删除成功!'
         });
         this.getList();
-      }).catch(()=>{});
+      }).catch(() => { });
     },
     // 页号发生变化
-    onPageChange(number){
-      this.pagination.current=number;
+    onPageChange(number) {
+      this.pagination.current = number;
       this.getList();
     }
   }
@@ -187,6 +156,7 @@ export default {
 .el-row {
   margin-bottom: 20px;
 }
+
 .list-title {
   height: 50px;
   width: 100%;
@@ -206,21 +176,26 @@ export default {
   margin: 10px;
   float: right;
 }
-.select-box{
-  border: 1px solid rgb(0, 0, 0,0.1);
-  margin-bottom:20px;
+
+.select-box {
+  border: 1px solid rgb(0, 0, 0, 0.1);
+  margin-bottom: 20px;
   padding: 20px;
 }
-.inline{
+
+.inline {
   margin-right: 30px;
 }
-.search-icon{
+
+.search-icon {
   padding-bottom: 20px
 }
-.search-button{
+
+.search-button {
   float: right;
 }
-.paper{
+
+.paper {
   float: right;
   margin-top: 10px;
 }

src/views/collection/detail/index.vue

@@ -0,0 +1,3 @@
+<template>
+    <div>detail</div>
+</template>

src/views/collection/serieslist/index.vue

@@ -8,38 +8,19 @@
             筛选搜索
           </span>
           <el-button type="primary" size="small">查询搜索</el-button>
-          <el-button @click="resetForm('ruleForm')" size="small"
-            >重置</el-button
-          >
+          <el-button @click="resetForm('ruleForm')" size="small">重置</el-button>
         </el-form-item>
 
         <el-form-item required>
           <el-col :span="10">
-            <el-form-item
-              label="藏品名称（套）："
-              label-width="140px"
-              prop="name"
-            >
-              <el-input
-                v-model="formInline.name"
-                placeholder="请输入藏品名称"
-                size="small"
-              ></el-input>
+            <el-form-item label="藏品名称（套）：" label-width="140px" prop="name">
+              <el-input v-model="formInline.name" placeholder="请输入藏品名称" size="small"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="11">
             <el-form-item label="创建时间：" label-width="160px" prop="date">
-              <el-date-picker
-                v-model="formInline.date"
-                type="daterange"
-                align="right"
-                unlink-panels
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-                :picker-options="pickerOptions"
-                size="small"
-              >
+              <el-date-picker v-model="formInline.date" type="daterange" align="right" unlink-panels range-separator="至"
+                start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" size="small">
               </el-date-picker>
             </el-form-item>
           </el-col>
@@ -48,8 +29,7 @@
     </div>
     <div class="total">
       <i class="el-icon-tickets" style="margin-right: 5px"></i>套系列表
-      共有<span style="color: #1890ff">{{ mockData.length }}</span
-      >条数据
+      共有<span style="color: #1890ff">{{ mockData.length }}</span>条数据
     </div>
     <div class="list">
       <el-radio-group v-model="tabPosition">
@@ -57,14 +37,9 @@
         <el-radio-button label="预售">预售</el-radio-button>
         <el-radio-button label="已过期">已过期</el-radio-button>
       </el-radio-group>
-      <el-table
-        :data="
-          mockData.slice((currentPage - 1) * pageSize, pageSize * currentPage)
-        "
-        border
-        style="width: 100%"
-        :header-cell-style="{ background: '#ffffff', color: '#919398' }"
-      >
+      <el-table :data="
+        mockData.slice((currentPage - 1) * pageSize, pageSize * currentPage)
+      " border style="width: 100%" :header-cell-style="{ background: '#ffffff', color: '#919398' }">
         <el-table-column prop="id" label="ID" width="100px" align="center">
         </el-table-column>
         <el-table-column prop="name" label="藏品名称（套）" align="center">
@@ -76,27 +51,29 @@
         <el-table-column prop="amount" label="藏品数量" align="center">
         </el-table-column>
         <el-table-column prop="state" label="状态" align="center">
+          <el-button type="success" plain v-show="shelves">已上架</el-button>
+          <el-button type="info" plain v-show="!shelves">未上链</el-button>
         </el-table-column>
         <el-table-column prop="operate" label="操作" align="center">
+          <template slot-scope="scope">
+          <el-button type="text" @click="handleDetail(scope.row)">商品列表</el-button>
+          <el-button type="text">修改</el-button>
+        </template>
         </el-table-column>
       </el-table>
     </div>
     <div>
-      <el-pagination
-        :current-page="currentPage"
-        background
-        layout="total,prev, pager, next"
-        :total="mockData.length"
-        style="margin-right: 10px"
-        :page-size.sync="pageSize"
-        @current-change="handleCurrentChange"
-      >
+      <el-pagination :current-page="currentPage" background layout="total,prev, pager, next" :total="mockData.length"
+        style="margin-right: 10px" :page-size.sync="pageSize" @current-change="handleCurrentChange">
       </el-pagination>
     </div>
   </div>
 </template>
 <script>
+// mock
 import { reqMockData } from "../../../mockjs/reqMock.js";
+//后端接口
+// import { getSeriesList } from "../../../api/collection/seriesList"
 export default {
   mounted() {
     reqMockData().then((res) => {
@@ -104,9 +81,12 @@ export default {
       // console.log(res);
       this.mockData = res.data;
     });
+    // this.getSeries()
   },
   data() {
     return {
+      //上架
+      shelves:true,
       currentPage: 1,
       pageSize: 10,
       formInline: { name: "", date: "" },
@@ -154,6 +134,16 @@ export default {
       // console.log(`当前页: ${val}`);
       this.currentPage = val;
     },
+    //获取套系列表
+    // getSeries(){
+    //   getSeriesList().then((res)=>{
+    //     console.log(res);
+    //   }) 
+    // }
+    //商品列表
+    handleDetail(row){
+      this.$router.push({name:"deatil",prams:{row}});
+    }
   },
 };
 </script>
@@ -167,20 +157,24 @@ export default {
   .text {
     font-size: medium;
   }
+
   button {
     float: right;
     margin-left: 15px;
   }
 }
+
 .total {
   border: 1px solid #ebebeb;
   margin: 20px 15px 20px 20px;
   padding: 20px;
   border-radius: 4px;
 }
+
 .list {
   margin: 20px 10px 20px 20px;
 }
+
 .el-pagination {
   float: right;
 }
@@ -189,14 +183,17 @@ export default {
 label.el-form-item__label {
   font-weight: 500;
 }
+
 .list .el-radio-button__inner {
   border-bottom-left-radius: 0;
   border-bottom: none;
   font-weight: 600;
 }
+
 .el-radio-button:first-child .el-radio-button__inner {
   border-radius: 4px 0 0 0;
 }
+
 .el-radio-button:last-child .el-radio-button__inner {
   border-radius: 0 4px 0 0;
 }
@@ -227,14 +224,17 @@ label.el-form-item__label {
 label.el-form-item__label {
   font-weight: 500;
 }
+
 .list .el-radio-button__inner {
   border-bottom-left-radius: 0;
   border-bottom: none;
   font-weight: 600;
 }
+
 .el-radio-button:first-child .el-radio-button__inner {
   border-radius: 4px 0 0 0;
 }
+
 .el-radio-button:last-child .el-radio-button__inner {
   border-radius: 0 4px 0 0;
 }

src/views/message/detail/index.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="app-container">
+      <div class="detail-box">
+        <el-row class="detail-title">消息详情</el-row>
+        <el-row class="notice-box">
+          <el-col >
+            <span class="notice-title">{{ message.title }}</span>
+          </el-col>
+          <el-col>
+            <span>{{ message.sendTime }}</span>
+          </el-col>
+          <el-col>
+            <div class="notice-content">
+              {{ message.detail }}
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </template>
+  <script>
+  export default{
+    name:"messageDetail",
+    data(){
+      return {
+        // 消息
+        message:{},
+      }
+    },
+    created(){
+      this.getMessage();
+    },
+    methods:{
+      getMessage(){
+        this.message=this.$route.params.row;
+        console.log(this.$route.params.row);
+        console.log("公告",this.message);
+      }
+    }
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  .app-container{
+    text-align: center;
+  }
+  .detail-box{
+    width: 80%;
+    border: solid 1px #DCDFE6;
+    padding: 30px;
+    display: inline-block;
+    .el-col{
+      margin-bottom: 10px;
+    }
+    .detail-title{
+      font-weight: bold;
+      font-size: 25px;
+      margin-bottom: 20px;
+    }
+  }
+  .notice-title{
+    font-weight: bold;
+    font-size: 20px;
+  }
+  
+  .notice-content{
+    text-indent: 30px;
+    line-height: 23px;
+  }
+  .notice-box{
+    text-align: left;
+  }
+  </style>

src/views/message/messageCreate/index.vue

@@ -1,105 +1,128 @@
 <template>
-    <div>
-      <el-card class="announcementBox" style="height: 700px;width: 700px;">
-        <div class="content">
-          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
-            <el-form-item label="消息标题" prop="name">
-              <el-input v-model="ruleForm.name" 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="ruleForm.date1"
-                    style="width: 100%;"></el-date-picker>
-                </el-form-item>
-              </el-col>
-            </el-form-item>
-            <el-form-item label="消息内容" prop="desc">
-              <quill-editor v-model="ruleForm.desc" ref="myQuillEditor" style="height: 370px;" :options="editorOption">
-              </quill-editor>
-            </el-form-item>
-            <div class="button">
-              <el-form-item>
+  <div>
+    <el-card class="announcementBox" style="height: 700px;width: 700px;">
+      <div class="content">
+        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+          <el-form-item label="消息标题" prop="name">
+            <el-input v-model="ruleForm.name" 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="ruleForm.date1"
+                  style="width: 100%;"></el-date-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="ruleForm.receivedUsers"></el-input>
+          </el-form-item>
+          <el-form-item label="消息内容" prop="desc">
+            <quill-editor v-model="ruleForm.desc" ref="myQuillEditor" style="height: 320px;" :options="editorOption">
+            </quill-editor>
+          </el-form-item>
+          <div class="button">
+            <el-form-item>
               <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
               <el-button @click="resetForm('ruleForm')">重置</el-button>
             </el-form-item>
-            </div>
-          </el-form>
-        </div>
-      </el-card>
-    </div>
-  </template>
-  <script>
-  import {
+          </div>
+        </el-form>
+      </div>
+    </el-card>
+  </div>
+</template>
+<script>
+import {
+  quillEditor
+} from 'vue-quill-editor'
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
+import { addMesage } from '../../../api/message'
+
+export default {
+  name: 'FuncFormsEdit',
+  components: {
     quillEditor
-  } from 'vue-quill-editor'
-  import 'quill/dist/quill.core.css'
-  import 'quill/dist/quill.snow.css'
-  import 'quill/dist/quill.bubble.css'
-  
-  export default {
-    name: 'FuncFormsEdit',
-    components: {
-      quillEditor
-    },
-    data() {
-      return {
-        //富文本
-        editorOption: {},
-  
-        ruleForm: {
-          name: '',
-          date1: '',
-          delivery: false,
-          desc: ''
-        },
-        rules: {
-          name: [
-            { required: true, message: '请输入公告名称', trigger: 'blur' },
-            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
-          ],
-          date1: [
-            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
-          ],
-          date2: [
-            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
-          ],
-          desc: [
-            { required: true, message: '请填写公告内容', trigger: 'blur' }
-          ]
-        }
-      };
-    },
-    methods: {
-      submitForm(formName) {
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            alert('submit!');
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
-        });
+  },
+  data() {
+    return {
+      //富文本
+      editorOption: {},
+
+      ruleForm: {
+        name: '',
+        date1: '',
+        delivery: false,
+        desc: '',
+        receivedUsers: '',
       },
-      resetForm(formName) {
-        this.$refs[formName].resetFields();
+      rules: {
+        name: [
+          { required: true, message: '请输入公告名称', trigger: 'blur' },
+          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+        ],
+        date1: [
+          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
+        ],
+        date2: [
+          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
+        ],
+        receivedUsers: [
+          { required: true, message: '请导入接受用户', trigger: 'blur' }
+        ],
+        desc: [
+          { required: true, message: '请填写公告内容', trigger: 'blur' }
+        ]
       }
+    };
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          addMesage({
+            addName:this.ruleForm.name,
+            addDate:this.ruleForm.date1,
+            addReceivedUsers:this.ruleForm.receivedUsers,
+            addDesc:this.ruleForm.desc
+          }).then((res)=>{
+            this.$message({
+              message:'添加成功',
+              type:'success'
+            })
+            console.log(res);
+            this.resetForm()
+            this.$router.push({name:"messageList"});
+          })
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
     }
   }
-  </script>
+}
+</script>
   
-  <style>
-  .announcementBox {
-    margin-top: 40px;
-    margin-left: 300px;
-  }
-  .content{
-    margin-top: 20px;
-    margin-right: 30px;
-    position: relative;
-  }
-  .button{
-    position: absolute;
-    margin-top: 70px;
-  }
-  </style>
+<style>
+.announcementBox {
+  margin-top: 40px;
+  margin-left: 300px;
+}
+
+.content {
+  margin-top: 20px;
+  margin-right: 30px;
+  position: relative;
+}
+
+.button {
+  position: absolute;
+  margin-top: 70px;
+}
+</style>

src/views/message/messageList/index.vue

@@ -5,7 +5,7 @@
         <div class="searchContainer">
           <i class="el-icon-search search">筛选搜索</i>
           <el-form-item class="searchButton">
-            <el-button type="primary" @click="onSubmit">查询搜索</el-button>
+            <el-button type="primary" @click="searchMessage">查询搜索</el-button>
             <el-button @click="resetForm()">重置</el-button>
           </el-form-item>
         </div>
@@ -25,18 +25,18 @@
     </el-card>
     <el-card style="height: 300px;width: 1200px; margin-left: 30px;">
       <el-table :data="tableData" border height="250" style="width: 100%">
-        <el-table-column fixed prop="messageID" label="ID" align="center" width="250">
+        <el-table-column fixed prop="id" label="ID" align="center" width="250">
         </el-table-column>
-        <el-table-column prop="messageTitle" label="消息标题" align="center" width="220">
+        <el-table-column prop="title" label="消息标题" align="center" width="220">
         </el-table-column>
         <el-table-column prop="messageTel" label="手机号" align="center" width="220">
         </el-table-column>
-        <el-table-column prop="messageData" label="发布时间" align="center" width="220">
+        <el-table-column prop="sendTime" label="发布时间" align="center" width="220">
         </el-table-column>
         <el-table-column fixed="right" label="操作" align="center" width="200">
           <template slot-scope="scope">
             <el-button @click="handleClick(scope.row)" type="primary" size="small">查看详情</el-button>
-            <el-button @click="messageDel(scope.$index, scope.column)" type="danger" size="small">删除</el-button>
+            <el-button @click="handleDelete(scope.row)" type="danger" size="small">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -44,70 +44,68 @@
         :current-page="currentPage" :page-sizes="[5, 10, 20, 50]" :page-size="pagesize"
         layout="total, sizes, prev, pager, next, jumper" prev-text="上一页" next-text="下一页" :total="this.tableData.length">
       </el-pagination>
-
     </el-card>
   </div>
 </template>
 
 <script>
-import axios from "axios"
+import { getMessageList, messageDel } from "../../../api/message";
+
 export default {
   data() {
     return {
+      //搜索
       formInline: {
         messageTitle: '',
       },
       tableData: [],//所有数据
-      tableDataRst: [],// 搜索筛选之后的所有数据
-      value: "",
       currentPage: 1,
       pagesize: 5,
       setShow: false,
       setShowMsg: '更多查询条件',
+      value: '',
       styleArrow: true,
       setContent: '',
       setTitle: ''
-
     }
   },
   methods: {
     //搜索功能
-    onSubmit() {
+    searchMessage() {
       // 若未输入值，则展示所有数据
-      if(null === this.formInline.messageTitle || undefined === this.formInline.messageTitle){
+      if (null === this.formInline.messageTitle || undefined === this.formInline.messageTitle) {
         this.tableDataRst = this.tableData;
       } else {
         this.tableDataRst = []; // 结果列表置空
-        let regStr =  '';
+        let regStr = '';
         // 初始化正则表达式
-        for(let i=0; i<this.formInline.messageTitle.length; i++){
+        for (let i = 0; i < this.formInline.messageTitle.length; i++) {
           regStr = regStr + '(' + this.formInline.messageTitle[i] + ')([\\s]*)'; //跨字匹配
         }
         let reg = new RegExp(regStr);
         console.log(reg);
-        for(let i=0; i<this.tableData.length; i++){
+        for (let i = 0; i < this.tableData.length; i++) {
           let name = this.tableData[i].name; //按照名字匹配
           let regMatch = name.match(reg);
-          if(null !== regMatch) {//将匹配的数据放入结果列表中
-             this.tableDataRst.push(this.tableData[i]);
+          if (null !== regMatch) {//将匹配的数据放入结果列表中
+            this.tableDataRst.push(this.tableData[i]);
           }
         }
       }
     },
-    //重置功能
-    resetForm() {
-      this.$options.data();
-      // // 重置数据
-      // this.$data = this.$options.data();
-      //  有报错Avoid replacing instance root $data. Use nested data properties instead.
-      // Object.assign(this.$data, this.$options.data())
-      this.formInline.messageTitle = "";
-      this.value = ""
-    },
     //消息删除
-    messageDel(row, column) {
-      console.log(column);
-      this.tableDataRst = this.tableData.splice(this.tableData[row], 1)
+    handleDelete(row) {
+      console.log(row);
+      return messageDel(row.id).then((res) => {
+        console.log(res);
+        this.$message({
+          type: 'error',
+          message: '成功删除'
+        })
+        this.getMessage()
+      }).catch((err) => {
+        console.log(err);
+      })
     },
     //分页功能
     handleSizeChange(size) {
@@ -122,21 +120,34 @@ export default {
     handleAdd() {
       this.$router.push({
         path: 'messageCreate'
-      })
-      // 路由跳转
+      }) // 路由跳转
+    },
+    //重置功能
+    resetForm() {
+      this.$options.data();
+      // // 重置数据
+      // this.$data = this.$options.data();
+      //  有报错Avoid replacing instance root $data. Use nested data properties instead.
+      // Object.assign(this.$data, this.$options.data())
+      this.formInline.messageTitle = "";
+      this.value = ""
+    },
+    //查看消息详情
+    handleClick(row) {
+      console.log(row.id);
+      this.$router.push({ name: "messageDetail", params: { row } });
     },
     //获取消息列表
-    getMessageList() {
-      axios.post("http://localhost:8080/goods/goodAll").then((res) => {
-        this.tableData = res.data.data
-      }).catch(error => {
-
+    getMessage() {
+      getMessageList().then((res) => {
+        this.tableData = res.rows
+        console.log(res);
       })
     },
   },
 
   mounted() {
-    this.getMessageList();
+    this.getMessage();
   },
 }
 
@@ -169,8 +180,3 @@ export default {
   float: right;
 }
 </style>
-
-.searchButton {
-  float: right;
-}
-</style>