message

src/mock/index.js

@@ -30,3 +30,42 @@ let data = Mock.mock({
 Mock.mock(/goods\/goodAll/, 'post', () => { //三个参数。第一个：路径，第二个：请求方式post/get，第三个：回调，返回值
     return data
 })
+
+// list 分页接口()
+
+Mock.mock('http://localhost:8080/api/list', 'post', (params) => {
+
+  var info = JSON.parse(params.body)
+
+  var [index, size, total] = [info.pageIndex, info.pageSize, dataList.length]
+
+  var len = total / size
+
+  var totalPages = len - parseInt(len) > 0 ? parseInt(len) + 1 : len
+
+  var newDataList = dataList.slice(index * size, (index + 1) * size)
+
+  return {
+
+    'code': '0',
+
+    'message': 'success',
+
+    'data': {
+
+      'pageIndex': index,
+
+      'pageSize': size,
+
+      'rows': newDataList,
+
+      'total': total,
+
+      'totalPages': totalPages
+
+    }
+
+  }
+
+})
+

src/views/announcement/add/index.vue

@@ -4,7 +4,7 @@
       <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"></el-input>
+            <el-input v-model="ruleForm.name" placeholder="请输入公告名称"></el-input>
           </el-form-item>
           <el-form-item label="活动时间" required>
             <el-col :span="11">
@@ -13,11 +13,6 @@
                   style="width: 100%;"></el-date-picker>
               </el-form-item>
             </el-col>
-            <el-col :span="11">
-              <el-form-item prop="date2">
-                <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-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">
@@ -55,7 +50,6 @@ export default {
       ruleForm: {
         name: '',
         date1: '',
-        date2: '',
         delivery: false,
         desc: ''
       },

src/views/announcement/list/index.vue

@@ -1,271 +1,247 @@
 <template>
-    <div class="app-container">
-      <!-- 筛选 -->
-      <div class="select-box">
-        <div class="search-icon">
-          <i class="el-icon-search"></i>
-          <span>  筛选搜查</span>
-          <div class="search-button">
-            <el-button  @click="resetQuery">重置</el-button>
-            <el-button type="primary"  @click="handleQuery">查询搜索</el-button>
-          </div>
+  <div class="app-container">
+    <!-- 筛选 -->
+    <div class="select-box">
+      <div class="search-icon">
+        <i class="el-icon-search"></i>
+        <span> 筛选搜查</span>
+        <div class="search-button">
+          <el-button @click="resetQuery">重置</el-button>
+          <el-button type="primary" @click="handleQuery">查询搜索</el-button>
         </div>
-        <el-form  :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
-          <el-form-item class="inline" label="公告标题:  " prop="noticeTitle" >
-            <el-input
-              v-model="queryParams.noticeTitle"
-              placeholder="筛选公告标题"
-              clearable
-              @keyup.enter.native="handleQuery"
-            />
-          </el-form-item>
-          <el-form-item class="inline" label="发布时间:  " prop="createTime">
-            <el-date-picker
-              v-model="queryParams.createTime"
-              type="daterange"
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              placeholder="选择时间范围"
-              @keyup.enter.native="handleQuery"
-              unlink-panels  >
-            </el-date-picker>
-          </el-form-item>
-        </el-form>
       </div>
-      
-  
-      <!-- 标题 -->
-      <el-row>
-        <div class="list-title">
-          <div class="title">
-            <span class="el-icon-tickets"></span>
-            <span class="title-font">公告列表</span>
-          </div>
-          <div class="btn-add">
-            <el-button size="small" type="primary" plain @click="handleAdd()">添加</el-button>
-          </div>
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
+        <el-form-item class="inline" label="公告标题:  " prop="noticeTitle">
+          <el-input v-model="queryParams.noticeTitle" placeholder="筛选公告标题" clearable
+            @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item class="inline" label="发布时间:  " prop="createTime">
+          <el-date-picker v-model="queryParams.createTime" type="daterange" range-separator="至" start-placeholder="开始日期"
+            end-placeholder="结束日期" placeholder="选择时间范围" @keyup.enter.native="handleQuery" unlink-panels>
+          </el-date-picker>
+        </el-form-item>
+      </el-form>
+    </div>
+
+
+    <!-- 标题 -->
+    <el-row>
+      <div class="list-title">
+        <div class="title">
+          <span class="el-icon-tickets"></span>
+          <span class="title-font">公告列表</span>
         </div>
-      </el-row>
-  
-      <!-- 列表 -->
-      <el-table v-loading="loading" :data="noticeList">
-        <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="createTime" width="170">
-          <template slot-scope="scope">
-            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
-          </template>
-        </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"
-              icon="el-icon-edit"
-              @click="handleUpdate(scope.row)"
-              v-hasPermi="['system:notice:edit']"
-            >修改</el-button>
-            <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-delete"
-              @click="handleDelete(scope.row)"
-              v-hasPermi="['system:notice:remove']"
-            >删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <!-- 分页 -->
-      <pagination
-        v-show="total>0"
-        :total="total"
-        :page.sync="queryParams.pageNum"
-        :limit.sync="queryParams.pageSize"
-        @pagination="getList"
-      />
-  
-      <!-- 添加或修改公告对话框 -->
-      <el-dialog title="修改公告" :visible.sync="open" width="780px" append-to-body>
-        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-          <el-row>
-            <el-col :span="12">
-              <el-form-item label="公告标题" prop="noticeTitle">
-                <el-input v-model="form.noticeTitle" placeholder="请输入公告标题" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="24">
-              <el-form-item label="内容">
-                <editor v-model="form.noticeContent" :min-height="192"/>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
+        <div class="btn-add">
+          <el-button size="small" type="primary" plain @click="handleAdd()">添加</el-button>
         </div>
-      </el-dialog>
-    </div>
-  </template>
-  
-  <script>
-  import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice";
-  
-  export default {
-    name: "Notice",
-    data() {
-      return {
-        // 遮罩层
-        loading: true,
-        // 显示搜索条件
-        showSearch: true,
-        // 总条数
-        total: 0,
-        // 公告表格数据
-        noticeList: [],
-        // 是否显示弹出层
-        open: false,
-        // 查询参数
-        queryParams: {
-          pageNum: 1,
-          pageSize: 10,
-          noticeTitle: undefined,
-          createBy: undefined,
-          status: undefined
-        },
-        // 表单参数
-        form: {},
-        // 表单校验
-        rules: {
-          noticeTitle: [
-            { required: true, message: "公告标题不能为空", trigger: "blur" }
-          ]
-        }
+      </div>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="noticeList">
+      <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="createTime" width="170">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+        </template>
+      </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" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:notice:edit']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+            v-hasPermi="['system:notice:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      @pagination="getList" />
+
+    <!-- 添加或修改公告对话框 -->
+    <el-dialog title="修改公告" :visible.sync="open" width="780px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="公告标题" prop="noticeTitle">
+              <el-input v-model="form.noticeTitle" placeholder="请输入公告标题" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="内容">
+              <editor v-model="form.noticeContent" :min-height="192" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice";
+
+export default {
+  name: "Notice",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 公告表格数据
+      noticeList: [],
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        noticeTitle: undefined,
+        createBy: undefined,
+        status: undefined
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        noticeTitle: [
+          { required: true, message: "公告标题不能为空", trigger: "blur" }
+        ]
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询公告列表 */
+    getList() {
+      this.loading = true;
+      listNotice(this.queryParams).then(response => {
+        this.noticeList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        noticeId: undefined,
+        noticeTitle: undefined,
+        noticeType: undefined,
+        noticeContent: undefined,
+        status: "0"
       };
+      this.resetForm("form");
     },
-    created() {
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
       this.getList();
     },
-    methods: {
-      /** 查询公告列表 */
-      getList() {
-        this.loading = true;
-        listNotice(this.queryParams).then(response => {
-          this.noticeList = response.rows;
-          this.total = response.total;
-          this.loading = false;
-        });
-      },
-      // 取消按钮
-      cancel() {
-        this.open = false;
-        this.reset();
-      },
-      // 表单重置
-      reset() {
-        this.form = {
-          noticeId: undefined,
-          noticeTitle: undefined,
-          noticeType: undefined,
-          noticeContent: undefined,
-          status: "0"
-        };
-        this.resetForm("form");
-      },
-      /** 搜索按钮操作 */
-      handleQuery() {
-        this.queryParams.pageNum = 1;
-        this.getList();
-      },
-      /** 重置按钮操作 */
-      resetQuery() {
-        this.resetForm("queryForm");
-        this.handleQuery();
-      },
-      /** 新增按钮操作 */
-      handleAdd() {
-        // 路由跳转
-      },
-      /** 修改按钮操作 */
-      handleUpdate(row) {
-        this.reset();
-        const noticeId = row.noticeId;
-        getNotice(noticeId).then(response => {
-          this.form = response.data;
-          this.open = true;
-          this.title = "修改公告";
-        });
-      },
-      /** 提交按钮 */
-      submitForm: function() {
-        this.$refs["form"].validate(valid => {
-          if (valid) {
-            if (this.form.noticeId != undefined) {
-              updateNotice(this.form).then(response => {
-                this.$modal.msgSuccess("修改成功");
-                this.open = false;
-                this.getList();
-              });
-            }
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.$router.push({
+        path: '/announcement/announcementAdd'
+      })
+      // 路由跳转
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const noticeId = row.noticeId;
+      getNotice(noticeId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改公告";
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.noticeId != undefined) {
+            updateNotice(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
           }
-        });
-      },
-      /** 删除按钮操作 */
-      handleDelete(row) {
-        const noticeIds = row.noticeId;
-        this.$modal.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项？').then(function() {
-          return delNotice(noticeIds);
-        }).then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
-        }).catch(() => {});
-      }
-    }
-  };
-  </script>
-  
-  <style lang="scss" scoped>
-  .el-row {
-    margin-bottom: 20px;
-  }
-  .list-title {
-    height: 50px;
-    width: 100%;
-    border: solid 1px #DCDFE6;
-  
-    .title {
-      margin: 14px;
-      float: left;
-    }
-  
-    .title-font {
-      margin-left: 5px;
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const noticeIds = row.noticeId;
+      this.$modal.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项？').then(function () {
+        return delNotice(noticeIds);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => { });
     }
   }
-  
-  .btn-add {
-    margin: 10px;
-    float: right;
-  }
-  .select-box{
-    border: 1px solid rgb(0, 0, 0,0.1);
-    margin-bottom:20px;
-    padding: 20px;
-  }
-  .inline{
-    margin-right: 30px;
-  }
-  .search-icon{
-    padding-bottom: 20px
+};
+</script>
+
+<style lang="scss" scoped>
+.el-row {
+  margin-bottom: 20px;
+}
+
+.list-title {
+  height: 50px;
+  width: 100%;
+  border: solid 1px #DCDFE6;
+
+  .title {
+    margin: 14px;
+    float: left;
   }
-  .search-button{
-    float: right;
+
+  .title-font {
+    margin-left: 5px;
   }
-  </style>
-  
+}
+
+.btn-add {
+  margin: 10px;
+  float: right;
+}
+
+.select-box {
+  border: 1px solid rgb(0, 0, 0, 0.1);
+  margin-bottom: 20px;
+  padding: 20px;
+}
+
+.inline {
+  margin-right: 30px;
+}
+
+.search-icon {
+  padding-bottom: 20px
+}
+
+.search-button {
+  float: right;
+}
+</style>

src/views/message/messageCreate/index.vue

@@ -1,5 +1,105 @@
 <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>
+              <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>
+  </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'
+  
+  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;
+          }
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      }
+    }
+  }
+  </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>

src/views/message/messageList/index.vue

@@ -2,25 +2,26 @@
   <div>
     <el-card style="height: 160px;width: 1200px; margin: 30px 0 20px 30px;">
       <el-form :inline="true" :model="formInline" class="demo-form-inline">
-        <div>
+        <div class="searchContainer">
           <i class="el-icon-search search">筛选搜索</i>
-          <el-form-item>
+          <el-form-item class="searchButton">
             <el-button type="primary" @click="onSubmit">查询搜索</el-button>
-            <el-button @click="resetForm('ruleForm')">重置</el-button>
+            <el-button @click="resetForm()">重置</el-button>
           </el-form-item>
         </div>
-        <el-form-item label="消息标题">
-          <el-input v-model="formInline.messageTitle" placeholder="筛选消息标题"></el-input>
+        <el-form-item label="消息标题:">
+          <el-input v-model="formInline.messageTitle" placeholder="筛选消息标题" @keyup.enter.native="onSubmit"></el-input>
+        </el-form-item>
+        <el-form-item class="inline" label="发布时间:  " prop="createTime">
+          <el-date-picker v-model="value" type="daterange" range-separator="至" start-placeholder="开始日期"
+            end-placeholder="结束日期" placeholder="选择时间范围" @keyup.enter.native="handleQuery" unlink-panels>
+          </el-date-picker>
         </el-form-item>
-        <span class="demonstration">发布时间</span>
-        <el-date-picker type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
-          :default-time="['12:00:00']">
-        </el-date-picker>
       </el-form>
     </el-card>
     <el-card class="addContainer">
       <i class="el-icon-tickets">消息列表</i>
-      <el-button disabled class="addButton">添加</el-button>
+      <el-button class="addButton" type="primary" @click="handleAdd()">添加</el-button>
     </el-card>
     <el-card style="height: 300px;width: 1200px; margin-left: 30px;">
       <el-table :data="tableData" border height="250" style="width: 100%">
@@ -34,13 +35,16 @@
         </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 type="primy" size="small">编辑</el-button>
+            <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>
           </template>
         </el-table-column>
       </el-table>
-      <el-pagination background layout="prev, pager, next" :total="1000">
+      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+        :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>
@@ -53,38 +57,115 @@ export default {
       formInline: {
         messageTitle: '',
       },
-      //消息列表
-      tableData: []
+      tableData: [],//所有数据
+      tableDataRst: [],// 搜索筛选之后的所有数据
+      value: "",
+      currentPage: 1,
+      pagesize: 5,
+      setShow: false,
+      setShowMsg: '更多查询条件',
+      styleArrow: true,
+      setContent: '',
+      setTitle: ''
+
     }
   },
   methods: {
+    //搜索功能
     onSubmit() {
-      console.log('submit!');
+      // 若未输入值，则展示所有数据
+      if(null === this.formInline.messageTitle || undefined === this.formInline.messageTitle){
+        this.tableDataRst = this.tableData;
+      } else {
+        this.tableDataRst = []; // 结果列表置空
+        let regStr =  '';
+        // 初始化正则表达式
+        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++){
+          let name = this.tableData[i].name; //按照名字匹配
+          let regMatch = name.match(reg);
+          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)
     },
-    a() {
+    //分页功能
+    handleSizeChange(size) {
+      this.pagesize = size;
+      console.log(`每页 ${size} 条`);
+    },
+    handleCurrentChange(currentPage) {
+      this.currentPage = currentPage;
+      console.log(`当前页: ${currentPage}`);
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.$router.push({
+        path: 'messageCreate'
+      })
+      // 路由跳转
+    },
+    //获取消息列表
+    getMessageList() {
       axios.post("http://localhost:8080/goods/goodAll").then((res) => {
-        console.log(res)
         this.tableData = res.data.data
       }).catch(error => {
 
       })
     },
   },
+
   mounted() {
-    this.a();
-  }
+    this.getMessageList();
+  },
 }
 
 </script>
 
-<style>
+<style lang="scss" scoped>
 /* 消息列表行 */
-.addContainer{
+.addContainer {
   height: 70px;
-  width: 1200px; 
+  width: 1200px;
   margin: 0 0 20px 30px;
 }
-.addButton{    
+
+.addButton {
   margin-left: 990px;
 }
+
+.searchContainer {
+  display: flow-root;
+
+}
+
+.searchContainer i {
+  float: left;
+  margin-top: 15px;
+  font-weight: bold;
+}
+
+.searchButton {
+  float: right;
+}
 </style>