项目管理页面开发

src/data/https.js

+import axios from "axios";
+import { ElMessage } from "element-plus";
+axios.interceptors.request.use(function (config) {
+    let token = "8681f75e775447f7903708c55a35634e";
+    if (token) {
+        config.headers.Authorization = token;
+    }
+    return config;
+}, (err) => {
+    return Promise.reject(err);
+});
+axios.interceptors.response.use(response => {
+    return response.data;
+}, err => {
+    if (err && err.response) {
+        switch (err.response.status) {
+        case 401:
+            err.msg = "请先登录";
+            break;
+        }
+    } else {
+        err.msg = "网络连接错误";
+    }
+    return Promise.reject(err);
+});
+let baseUrl = "http://10.40.8.9:3000"
+
+export function $get ({ url, params = {}, callback }) {
+    return axios({
+        method: "get",
+        url: baseUrl + url,
+        params
+    }).then(response => {
+        callback && callback(response.data);
+        return response;
+    }).catch((err) => {
+        ElMessage.error(err);
+    });
+};
+
+export function $post ({ url, data = {}, callback }) {
+    return axios.post(baseUrl + url, data).then((response) => {
+        if (response.code === 0) {
+            callback && callback(response.data);
+        } else {
+            ElMessage.error(response.message);
+        }
+        return response;
+    }).catch((err) => {
+        console.log(err);
+        ElMessage.error(err.msg || "操作失败");
+        if (err && err.response && err.response.status === 401) {
+            store.commit("clearUserInfo");
+            router.replace("/login");
+        }
+    });
+};

src/layouts/MainLayout.vue

@@ -72,7 +72,7 @@ const router = useRouter();
 // 计算菜单路由
 const menuRoutes = computed(() => {
   const mainRoute = router.options.routes.find((route) => route.path === "/");
-  return mainRoute?.children || [];
+  return mainRoute?.children && mainRoute?.children.filter(route => !route.meta || route.meta.showInMenu !== false ) || [];
 });
 
 // 处理退出登录
@@ -92,6 +92,10 @@ const handleLogout = () => {
 }
 
 /* 选中菜单项样式 */
+.el-menu-item{
+  color: #666;
+  background-color: #fff;
+}
 .el-menu-item.is-active {
   background-color: #ecf3fd;
   color: #3d84ee;

src/main.js

@@ -7,8 +7,11 @@ import * as ElIcons from '@element-plus/icons'
 import router from './router'
 import "./assets/fonts/font.less"; // 字体样式
 import "../public/iconFont/iconfont.css"; // 图标字体样式
+import { $get, $post } from "@/data/https.js";
 
 const app = createApp(App)
+app.config.globalProperties.$get = $get;
+app.config.globalProperties.$post = $post;
 for (const [key, component] of Object.entries(ElIcons)) {
   app.component(key, component)
 }

src/router/index.js

@@ -22,6 +22,23 @@ const routes = [
         component: () => import('@/views/homePage/index.vue'),
         meta: { menuName: '数据大屏', icon: 'home' }
       },
+      {
+        path: '/projectManage',
+        name: '项目管理',
+        title: 'projectManage',
+        component: () => import('@/views/managePage/projectManage.vue'),
+        meta: { menuName: '项目管理', icon: 'Management' }
+      },
+      {
+        path: '/addProject',
+        name: '新增项目',
+        title: 'addProject',
+        component: () => import('@/views/managePage/addProject.vue'),
+        meta: {
+          menuName: '新增项目',
+          showInMenu: false // 不在菜单中显示
+        }
+      }
     ]
   }
 ]

src/views/managePage/projectManage.vue

+<template>
+    <div class="project-manage-container">
+        <div class="project-manage-header">
+            <div class="header-left"></div>
+            <div class="header-right">
+                <el-button type="primary" @click="addProject">新增</el-button>
+            </div>
+        </div>
+        <div class="project-manage-content">
+            <div class="table-wrap">
+                <el-table :data="tableData" style="width: 100%"
+                    empty-text="暂无数据" height="100%"
+                >
+                    <el-table-column type="index" width="50" />
+                    <el-table-column prop="projectName" label="项目名称" />
+                    <el-table-column prop="projectCode" label="项目编号" />
+                    <el-table-column fixed="right" label="操作" min-width="120">
+                        <template #default="scope">
+                            <el-button link type="primary" size="small">查看</el-button>
+                            <el-button link type="primary" size="small">编辑</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+            <div class="page-wrap">
+                <el-pagination background layout="prev, pager, next" :total="1000" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import { reactive, ref, onMounted, getCurrentInstance } from "vue";
+    import { useRouter } from "vue-router";
+    const router = useRouter();
+    const { proxy } = getCurrentInstance();
+
+    const tableData = ref([]);
+    const getProjectData = () => {
+        proxy.$post({
+            url: "/api/project/listProject",
+            data: {
+                page: 1,
+                pagesize: 10,
+                attributes: []
+            },
+            callback: (data) => {
+                tableData.value = data.rows;
+            }
+        })
+    };
+    const addProject = () => {
+        router.push("/addProject");
+    };
+    onMounted(() => {
+        getProjectData();
+    })
+</script>
+
+<style scoped lang="less">
+    .project-manage{
+        &-container{
+            width: 100%;
+            height: 100%;
+            padding: 20px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            .tab-content{
+                padding: 10px 15px;
+            }
+        }
+        &-header{
+            display: flex;
+            justify-content: space-between;
+        }
+        &-content{
+            flex: 1;
+            height: 0;
+            display: flex;
+            flex-direction: column;
+            .table-wrap{
+                margin: 15px 0;
+                flex: 1;
+                height: 0;
+            }
+            .page-wrap{
+                display: flex;
+                justify-content: flex-end;
+            }
+        }
+    }
+</style>