明树Git Lab

Commit 37c7b72f authored by chenron's avatar chenron

用户管理页面开发

parent 9d98e887
This diff is collapsed.
This diff is collapsed.
...@@ -11,11 +11,12 @@ ...@@ -11,11 +11,12 @@
<div class="table-container"> <div class="table-container">
<el-table <el-table
style="width: 100%"
:data="tableData" :data="tableData"
:height="height" :height="tableHeight"
:max-height="maxHeight" :max-height="maxHeight"
:stripe="stripe" :stripe="stripe"
:border="border" border
:size="size" :size="size"
:fit="fit" :fit="fit"
:show-header="showTableHeader" :show-header="showTableHeader"
...@@ -165,7 +166,10 @@ const props = defineProps({ ...@@ -165,7 +166,10 @@ const props = defineProps({
default: true, default: true,
}, },
// 表格高度 // 表格高度
height: [String, Number], tableHeight: {
type: [String, Number],
default: "auto",
},
// 表格最大高度 // 表格最大高度
maxHeight: [String, Number], maxHeight: [String, Number],
// 是否为斑马纹表格 // 是否为斑马纹表格
...@@ -516,32 +520,7 @@ const handleNextClick = (val) => { ...@@ -516,32 +520,7 @@ const handleNextClick = (val) => {
} }
} }
// 响应式设计
@media (max-width: 768px) {
.common-table {
padding: 12px;
.table-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.table-footer {
justify-content: center;
.el-pagination {
justify-content: center;
}
}
}
}
:deep(.el-table) { :deep(.el-table) {
th.el-table__cell {
// background-color: var(--el-table-header-bg-color);
// background-color: #e8ebf0;
background-color: #f2f6fd;
}
thead { thead {
color: var(--el-table-header-text-color); color: var(--el-table-header-text-color);
} }
...@@ -556,14 +535,10 @@ const handleNextClick = (val) => { ...@@ -556,14 +535,10 @@ const handleNextClick = (val) => {
.el-pagination.is-background { .el-pagination.is-background {
.el-pager li { .el-pager li {
border: 1px solid #e7e9ee; border: 1px solid #e7e9ee;
// background-color: #fff;
font-weight: 400; font-weight: 400;
// color: #333;
} }
.el-pager li:not(.disabled).is-active { .el-pager li:not(.disabled).is-active {
// background: rgba(91, 183, 59, 0.1);
border: none; border: none;
// color: var(--el-color-primary);
font-weight: 400; font-weight: 400;
} }
.btn-prev, .btn-prev,
...@@ -571,48 +546,23 @@ const handleNextClick = (val) => { ...@@ -571,48 +546,23 @@ const handleNextClick = (val) => {
background-color: var(--el-disabled-bg-color); background-color: var(--el-disabled-bg-color);
} }
} }
.el-table__fixed-right-patch { }
top: 0; :deep(.el-table) {
border: 1px solid #fff;
}
th.el-table__cell { th.el-table__cell {
border-right: 1px solid #ebeef5; background: #f5f7fa;
height: 50px;
text-align: center;
} }
.el-table__fixed-right { .el-table__body {
top: -1px; td.el-table__cell {
height: 45px;
line-height: 45px;
} }
.el-table--border,
.el-table--group {
border: 0px;
} }
.el-table__cell { .el-table__cell {
border-right: 0; .cell {
} text-align: center;
&::before {
width: 0px;
} }
&::after {
width: 0px;
} }
.el-table__border-left-patch {
width: 0;
}
}
:deep(.el-table__header .cell) {
display: flex;
align-items: center;
}
:deep(.el-table) {
background-color: rgba(255, 255, 255, 0.5);
}
.common-table {
background: rgb(157 188 218 / 40%);
}
:deep(.el-table th.el-table__cell) {
background: rgba(4, 66, 126, 0.4);
color: #fff;
}
:deep(.el-table tr) {
background: rgb(157 188 218 / 40%);
} }
</style> </style>
...@@ -33,23 +33,32 @@ ...@@ -33,23 +33,32 @@
router router
> >
<template v-for="route in menuRoutes" :key="route.path"> <template v-for="route in menuRoutes" :key="route.path">
<el-menu-item v-if="!route.meta?.parent" :index="route.path"> <!-- 无子菜单的项目 -->
<el-menu-item
v-if="!route.children || route.children.length === 0"
:index="route.path"
>
<el-icon><component :is="route.meta?.icon || 'menu'" /></el-icon> <el-icon><component :is="route.meta?.icon || 'menu'" /></el-icon>
<span>{{ route.meta?.menuName || route.name }}</span> <span>{{ route.meta?.menuName || route.name }}</span>
</el-menu-item> </el-menu-item>
<el-sub-menu v-else :index="route.meta.parent">
<!-- 有子菜单的项目 -->
<el-sub-menu v-else :index="route.path">
<template #title> <template #title>
<el-icon <el-icon
><component :is="route.meta?.icon || 'menu'" ><component :is="route.meta?.icon || 'menu'"
/></el-icon> /></el-icon>
<span>{{ route.meta.parent }}</span> <span>{{ route.meta?.menuName || route.name }}</span>
</template> </template>
<template v-for="child in route.children" :key="child.path">
<el-menu-item <el-menu-item
:index="route.path" :index="child.path"
style="padding-left: 70px !important" style="padding-left: 20px !important"
> >
{{ route.meta.menuName }} <el-icon><component :is="child.meta?.icon || ''" /></el-icon>
<span>{{ child.meta?.menuName || child.name }}</span>
</el-menu-item> </el-menu-item>
</template>
</el-sub-menu> </el-sub-menu>
</template> </template>
</el-menu> </el-menu>
...@@ -64,7 +73,7 @@ ...@@ -64,7 +73,7 @@
</template> </template>
<script setup> <script setup>
import { computed } from "vue"; import { computed, h, resolveComponent } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
const router = useRouter(); const router = useRouter();
...@@ -72,7 +81,11 @@ const router = useRouter(); ...@@ -72,7 +81,11 @@ const router = useRouter();
// 计算菜单路由 // 计算菜单路由
const menuRoutes = computed(() => { const menuRoutes = computed(() => {
const mainRoute = router.options.routes.find((route) => route.path === "/"); const mainRoute = router.options.routes.find((route) => route.path === "/");
return mainRoute?.children && mainRoute?.children.filter(route => !route.meta || route.meta.showInMenu !== false ) || []; if (!mainRoute?.children) return [];
return mainRoute.children.filter(
(route) => !route.meta || route.meta.showInMenu !== false
);
}); });
// 处理退出登录 // 处理退出登录
...@@ -92,7 +105,7 @@ const handleLogout = () => { ...@@ -92,7 +105,7 @@ const handleLogout = () => {
} }
/* 选中菜单项样式 */ /* 选中菜单项样式 */
.el-menu-item{ .el-menu-item {
color: #666; color: #666;
background-color: #fff; background-color: #fff;
} }
...@@ -102,6 +115,12 @@ const handleLogout = () => { ...@@ -102,6 +115,12 @@ const handleLogout = () => {
border-right: 4px solid #3d84ee; border-right: 4px solid #3d84ee;
} }
/* 完全去掉系统管理子菜单的背景色 */
:deep(.el-sub-menu__title) {
color: #666;
background-color: #fff !important;
}
.city-header { .city-header {
width: 100%; width: 100%;
height: 64px; height: 64px;
......
...@@ -20,7 +20,7 @@ const routes = [ ...@@ -20,7 +20,7 @@ const routes = [
name: '数据大屏', name: '数据大屏',
title: 'dataSummary', title: 'dataSummary',
component: () => import('@/views/homePage/index.vue'), component: () => import('@/views/homePage/index.vue'),
meta: { menuName: '数据大屏', icon: 'home' } meta: { menuName: '数据大屏', icon: 'platform' }
}, },
{ {
path: '/projectManage', path: '/projectManage',
...@@ -38,8 +38,24 @@ const routes = [ ...@@ -38,8 +38,24 @@ const routes = [
menuName: '新增项目', menuName: '新增项目',
showInMenu: false // 不在菜单中显示 showInMenu: false // 不在菜单中显示
} }
},
{
path: '/systemManage',
name: '系统管理',
title: 'systemManage',
// component: () => import('@/views/systemManage/index.vue'),
meta: { menuName: '系统管理', icon: 'tools' },
children: [
{
path: '/systemManage/userManage',
name: '用户管理',
title: 'userManage',
component: () => import('@/views/systemManage/userManage.vue'),
meta: { menuName: '用户管理',}
} }
] ]
},
]
} }
] ]
......
全局样式重置和滚动条控制 /* 全局样式重置和滚动条控制 */
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
...@@ -18,6 +18,7 @@ html, body { ...@@ -18,6 +18,7 @@ html, body {
#app { #app {
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
background: #f5f5f5;
overflow: hidden; /* 确保应用容器不产生滚动条 */ overflow: hidden; /* 确保应用容器不产生滚动条 */
} }
......
This diff is collapsed.
...@@ -147,7 +147,7 @@ const recycleList = reactive([ ...@@ -147,7 +147,7 @@ const recycleList = reactive([
.vw(left,65); .vw(left,65);
height: 30%; height: 30%;
max-width: 83%; max-width: 83%;
background-image: url(/src/assets/images/baseRateRel.png); background-image: url(/src/assets/images/progress.png);
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
......
...@@ -71,9 +71,9 @@ ...@@ -71,9 +71,9 @@
</template> </template>
<script setup> <script setup>
import Construct from "../components/Construct.vue"; import Construct from "./components/Construct.vue";
import ProjectApproval from "../components/ProjectApproval.vue"; import ProjectApproval from "./components/ProjectApproval.vue";
import Operation from "../components/Operation.vue"; import Operation from "./components/Operation.vue";
import { reactive, ref } from "vue"; import { reactive, ref } from "vue";
const selectedLeftBtn = ref("equity"); const selectedLeftBtn = ref("equity");
......
<template>
<div>系统管理 setting</div>
</template>
<script setup></script>
<style scoped lang="less"></style>
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment