修改环境配置

.env.development

@@ -21,4 +21,5 @@ ENV = 'development'
 VUE_APP_BASE_API = 'http://103.150.181.107:8080/'
 
 # # 路由懒加载
-VUE_CLI_BABEL_TRANSPILE_MODULES = true
+VUE_CLI_BABEL_TRANSPILE_MODULES = true
+

README.md

@@ -1,6 +1,19 @@
 ## 开发
 
 HitSheep加油！！
+```
+
+////////////////////////////////////////////////////////////////////
+                        　／l、
+                        （ﾟ､ 。 ７
+                        　l、 ~ヽ
+                        　じしf_, )ノ
+
+////////////////////////////////////////////////////////////////////
+
+
+```
+
 
 ```bash
 # 克隆项目
@@ -22,15 +35,3 @@ npm install --registry=https://registry.npmmirror.com
 # 启动服务
 npm run dev
 ```
-
-浏览器访问 http://localhost:80
-
-<!-- ## 发布
-
-```bash
-# 构建测试环境
-npm run build:stage
-
-# 构建生产环境
-npm run build:prod
-``` -->

src/views/message/messageList.vue

@@ -5,8 +5,8 @@
         <div class="up-title"><i class="el-icon-search"></i>筛选搜索</div>
         <div class="btn">
           <el-button plain>重置</el-button>
-          <el-button type="primary" plain>查询列表</el-button> 
-        </div>       
+          <el-button type="primary" plain>查询列表</el-button>
+        </div>
       </div>
       <div class="left-up">
         <div class="up-input-title">
@@ -31,19 +31,26 @@
         <el-table :data="tableData" border style="width: 100%" class="messagetable">
           <el-table-column prop="id" label="ID">
           </el-table-column>
-          <el-table-column prop="messageTitle" label="消息标题">
+          <el-table-column :formatter="stateFormat" prop="messageTitle" label="消息标题">
           </el-table-column>
           <el-table-column prop="phoneNumber" label="手机号">
           </el-table-column>
           <el-table-column prop="publishTime" label="发布时间">
           </el-table-column>
           <el-table-column prop="operate" label="操作">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" icon="el-icon-edit">修改</el-button>
+              <el-popconfirm title="你确定删除本条消息吗？">
+                <el-button class="btn-delete" size="mini" type="text" icon="el-icon-delete"
+                  @click="deleteMessage(scope.$index)" slot="reference">删除</el-button>
+              </el-popconfirm>
+            </template>
           </el-table-column>
         </el-table>
       </div>
     </div>
     <div class="bottom">
-      <div class="bottom-page"><el-pagination background layout="prev, pager, next" :total="1"></el-pagination></div>
+      <div class="bottom-page"><el-pagination background layout="prev, pager, next" :total="1000"></el-pagination></div>
       <span class="bottom-number">共{{ 0 }}条 </span>
     </div>
   </div>
@@ -75,7 +82,8 @@ export default {
       var data = Mock.mock({
         'list|1-50': [{
           'id|+1': 1,
-          'messageTitle': '@cparagraph()',
+          // 'messageTitle': '@cparagraph()',
+          'messageTitle': '@cword(3, 5)',
           'phoneNumber': '158888888',
           'publishTime': '@date()',
         }]
@@ -84,6 +92,17 @@ export default {
     },
     getTableList() {
       this.tableData = this.mockMessageList.list
+    },
+    stateFormat(row, column, cellValue) {
+      if (!cellValue) return ''
+      if (cellValue.length > 15) {       //最长固定显示10个字符
+        return cellValue.slice(0, 15) + '...'
+      }
+      return cellValue
+    },
+    //删除列表
+    deleteMessage(row) {
+      console.log(row);
     }
   }
 }
@@ -109,18 +128,20 @@ export default {
   margin-top: 20px;
   float: left;
 }
-.btn{
+
+.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;
@@ -134,7 +155,7 @@ export default {
 .up-input-title-right {
   width: 800px;
   margin-left: 450px;
-  
+
 
 }
 
@@ -198,9 +219,14 @@ export default {
   float: right;
 }
 
-.el-icon-search{ 
+.el-icon-search {
   padding-right: 10px;
 }
+
+.btn-delete {
+  margin-left: 20px;
+}
+
 /**
 自适应
 */

src/views/notice/noticeList.vue

@@ -47,19 +47,31 @@
         <el-table-column prop="title" label="公告标题"> </el-table-column>
         <el-table-column prop="publishTime" label="发布时间"> </el-table-column>
         <el-table-column prop="operation" label="操作">
-          <el-button size="mini" type="text" icon="el-icon-edit"
-            >修改</el-button
-          >
-          <el-button size="mini" type="text" icon="el-icon-delete"
+          <template slot-scope="scope">
+            <el-button size="mini" type="text">查看详情</el-button>
+            <el-button
+              id="deleteBtn"
+              size="mini"
+              type="text"
+              @click="deleteBtn(scope.$index)"
+              >删除</el-button
+            >
+          </template>
+          <!-- <el-button size="mini" type="text" icon="el-icon-delete"
             >删除</el-button
-          >
+          > -->
         </el-table-column>
       </el-table>
     </div>
     <!-- 分页 -->
     <div class="pageMenu">
       <div id="dataNum">共0条</div>
-      <el-pagination background layout="prev, pager, next" :total="1" >
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="total"
+        :page-size="pageSize"
+      >
       </el-pagination>
     </div>
   </div>
@@ -153,6 +165,9 @@
   margin-top: 7px;
   margin-right: 5px;
 }
+#deleteBtn {
+  margin-left: 10px;
+}
 </style>
   
 
@@ -164,30 +179,49 @@ export default {
       value1: "",
       tableData: [],
       mockNoticeList: [],
+      total: 0,
+      pageSize: 5,
+      totalNum:"",
     };
   },
   mounted() {
+    //获取总条目的id
+    this.totalNum = document.querySelector('#dataNum');
     this.getMockNoticeList();
     this.getTableList();
+    
+    
   },
 
   methods: {
     getMockNoticeList() {
       var Mock = require("mockjs");
       var data = Mock.mock({
-        "list|1-10": [
+        "list|1-20": [
           {
             "id|+1": 1,
             title: "@cword(3, 5)",
-            publishTime: "@date()",
+            publishTime: "@datetime()",
             // 'operation|1-10': "★",
           },
         ],
       });
       this.mockNoticeList = data;
     },
+    //获取数据按钮
     getTableList() {
       this.tableData = this.mockNoticeList.list;
+      // console.log(this.tableData)
+
+      //获取数据总数
+      this.totalNum.innerHTML = `共：${this.tableData.length}条`;
+      this.total = this.tableData.length;
+      // console.log(this.total)
+    },
+    // 删除按钮
+    deleteBtn(row) {
+      this.tableData.splice(this.tableData[row],1)
+      // console.log(this.tableData[row].id)
     },
   },
 };