完成部分后台管理页面

src/assets/css/common.css

@@ -31,6 +31,7 @@
 
 /* 面板 */
 .admin-content {
+    width: 100%;
     display: flex;
     flex-direction: column;     /* 纵向排列 */
     margin: 0 2vw 2vw;
@@ -48,7 +49,7 @@
 }
 
 .card-admin {
-    width: 83vw;
+    width: 100%;
     background-color: white;
     box-shadow: 0px 4px 10px 0 rgba(0,0,0,0.15);
     margin-bottom: 3vw;

src/components/AdminHeader.vue

@@ -28,7 +28,10 @@
           <i class="el-icon-user-solid"></i>
           <span slot="title">用户权限管理</span>
         </el-menu-item>
-
+      <el-menu-item index="compManage">
+        <i class="el-icon-tickets"></i>
+        <span slot="title">竞赛管理</span>
+      </el-menu-item>
 <!--      </el-submenu>-->
     </el-menu>
   </div>
@@ -61,6 +64,9 @@ export default {
         case "userManage":
           pageUtils.openPage(this.$router,"/admin/userManage")
           break;
+        case "compManage":
+          pageUtils.openPage(this.$router,"/admin/compManage")
+          break;
       }
     },
 
@@ -82,6 +88,7 @@ export default {
 
 <style>
 .el-menu-item {
+
   margin: 10px 0;
   font-size: 0.9rem !important;
 }

src/components/compTable.vue

@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <el-table
+        :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)"
+        :row-style="{height:'100px'}"
+        style="height: auto"
+       >
+      <el-table-column
+          fixed
+          prop="compNum"
+          label="序号"
+          min-width="20px">
+      </el-table-column>
+      <el-table-column
+          prop="compId"
+          label="竞赛ID"
+          min-width="70px">
+      </el-table-column>
+      <el-table-column
+          prop="compName"
+          label="竞赛名称"
+          min-width="150px">
+      </el-table-column>
+
+      <el-table-column
+          prop="online"
+          label="是否上线"
+          min-width="50px"
+          :filters="[{ text: '已上线', value: true }, { text: '未上线', value: false }]"
+          :filter-method="filterTag"
+          filter-placement="bottom-end">
+        <template slot-scope="scope">
+          <el-tag
+              :type="scope.row.online === true ? 'success' : 'warning'"
+              disable-transitions>{{scope.row.online === true ? '已上线' : '未上线'}}</el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <el-button
+              size="mini"
+              @click="handleEdit(scope.row.compId, scope.row)">编辑</el-button>
+          <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.row.compId, scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+
+    </el-table>
+
+    <el-pagination @size-change="handleSizeChange"
+                   @current-change="handleCurrentChange"
+                   :current-page="currentPage"
+                   :page-sizes="pageSizes"
+                   :page-size="PageSize" layout="prev, pager, next"
+                   background
+                   :total="totalCount"
+                    style="margin-top: 10px">
+    </el-pagination>
+
+
+  </div>
+</template>
+
+<script>
+import {Message} from "element-ui";
+
+export default {
+  name: "compTable",
+  data(){
+    return{
+      tableData:"",
+      // 默认显示第几页
+      currentPage:1,
+      // 总条数，根据接口获取数据长度(注意：这里不能为空)
+      totalCount:1,
+      // 个数选择器（可修改）
+      pageSizes:[1,2,3,4],
+      // 默认每页显示的条数（可修改）
+      PageSize:10
+    }
+  },
+  methods:{
+    filterTag(value, row) {
+      return row.online === value;
+    },
+
+    handleEdit(index, row) {
+      console.log(index, row);
+    },
+    handleDelete(index, row) {
+      console.log(index, row);
+    },
+
+    initPage(){
+      this.$api.getAllComp().then((res)=>{
+        console.log(res)
+        if (res.status == 0) {
+          //成功
+          this.tableData = res.data
+        }else if (res.status == 10){
+          Message.warning("系统查询错误")
+        }else {
+          Message.warning("权限不足或其他错误")
+        }
+      })
+    },
+
+
+    // 分页
+    // 每页显示的条数
+    handleSizeChange(val) {
+      // 改变每页显示的条数
+      this.PageSize=val
+      // 注意：在改变每页显示的条数时，要将页码显示到第一页
+      this.currentPage=1
+    },
+    // 显示第几页
+    handleCurrentChange(val) {
+      // 改变默认的页数
+      this.currentPage=val
+    },
+  },
+  mounted() {
+    this.initPage()
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/pages/Admin/CompManage.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="admin-content">
+    <el-breadcrumb class="breadcrumb-admin" separator="/">
+      <el-breadcrumb-item>后台管理</el-breadcrumb-item>
+      <el-breadcrumb-item>竞赛管理</el-breadcrumb-item>
+    </el-breadcrumb>
+
+    <div class="card-admin">
+      <comp-table style="margin: 20px;">
+      </comp-table>
+    </div>
+
+
+  </div>
+</template>
+
+<script>
+import CompTable from "@/components/compTable";
+export default {
+  name: "CompManage",
+  components: {CompTable}
+}
+</script>
+<style src="@/assets/css/common.css" scoped/>
+
+<style scoped>
+
+</style>

src/router/index.js

@@ -160,6 +160,14 @@ let routes = [
 				meta: {
 					title: '红山开源社区'
 				},
+			},
+			{
+				// 竞赛管理
+				path: "compManage",
+				component: () => import("@/pages/Admin/CompManage"),
+				meta: {
+					title: '红山开源社区'
+				},
 			}
 		]
 	},

src/utils/http/interface.js

@@ -89,6 +89,16 @@ export const homeContentUpdate = data => {
         data
     })
 };
+
+export const getAllComp = () => {
+    return axios({
+        headers:{
+            "Authorization": localStorage.getItem("systemToken")
+        },
+        url: '/admin/getAllComp',
+        method: 'get'
+    })
+};
 // 默认全部倒出
 // 根据需要进行
 export default {
@@ -100,5 +110,6 @@ export default {
     register,
     chatContentUpdate,
     homeContentUpdate,
-    getUserDataByUserId
+    getUserDataByUserId,
+    getAllComp
 }