公告管理

src/components/admin/notification.vue

@@ -1,6 +1,70 @@
 <template>
+  <el-row class="row-bg" justify="center">
+    <el-col :span="20">
+      <el-button link type="primary" @click="dialogTableVisible = true"
+      >添加公告</el-button>
+      <el-dialog v-model="dialogTableVisible" title="Shipping address">
+        <h1>特色</h1>
+      </el-dialog>
 
+
+      <el-table :data="data" style="width: 100%">
+        <el-table-column label="标题" prop="title"/>
+        <el-table-column label="内容" prop="content"/>
+        <el-table-column label="时间" prop="created_at"/>
+        <el-table-column fixed="right" label="Operations" width="120">
+        <template #default="scope">
+          <el-button link type="primary" size="small" @click="handleClick(scope.row)"
+          >删除</el-button>
+        </template>
+        </el-table-column>
+
+      </el-table>
+    </el-col>
+  </el-row>
 </template>
 
+
 <script>
+import axios from "axios";
+import * as dayjs from 'dayjs';
+import {ElNotification} from "element-plus";
+import { reactive, ref } from 'vue'
+
+export default {
+  data(){
+    return{
+      data:[],
+      dialogTableVisible:false,
+    }
+  },
+
+  mounted() {
+
+    axios.get('/api/v1/notice').then(res => {
+      if (res.data.code === 200) {
+        console.log(res.data.data);
+        this.data = res.data.data;
+        this.data.forEach(function(item,index){
+          item.created_at = dayjs(item.created_at).format('YYYY-MM-DD HH:mm:ss');
+        })
+        this.data.reverse();
+      }
+    })
+  },
+  methods:{
+    handleClick(row){
+      axios.delete('/api/v1/admin/notice/'+row.id).then(res => {
+        if (res.data.code === 200) {
+          this.data.splice(this.data.indexOf(row),1);
+          ElNotification.success({
+            title: '成功',
+            message: '删除成功',
+            duration: 2000
+          });
+        }
+      })
+    }
+  }
+}
 </script>

src/views/admin/AdminNotice.vue

@@ -1,11 +1,11 @@
 <template>
-  <AdminNavbar></AdminNavbar>
-  <notification></notification>
+  <AdminNotification></AdminNotification>
 </template>
 <script>
-import AdminNavbar from "../../components/admin/admin-Navbar.vue";
-import Notification from "../../components/admin/notification.vue";
+
+import AdminNotification from "../../components/admin/notification.vue";
+
 export default {
-  components: {Notification,AdminNavbar}
+  components: {AdminNotification},
 }
 </script>

src/views/admin/index.vue

@@ -1,5 +1,7 @@
 <template>
+
   <admin-navbar></admin-navbar>
+  <router-view/>
 </template>
 
 <script>