修改顶端组件实现方式，现支持左中右分区NavBar
This commit is contained in:
parent
53d599c2f0
commit
4150e939a9
22
index.html
22
index.html
|
|
@ -5,31 +5,9 @@
|
|||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title><%= title %></title>
|
||||
<style>
|
||||
.app-navs-frame {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 50px;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#app-navs > * {
|
||||
margin: 0 12px;
|
||||
}
|
||||
#app-navs .el-form-item{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<div class="app-navs-frame">
|
||||
<div id="app-navs"></div>
|
||||
<div id="app-navs-system"></div>
|
||||
</div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
82
src/components/AppPage.vue
Normal file
82
src/components/AppPage.vue
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
<template>
|
||||
<div>
|
||||
<slot/>
|
||||
<slot v-if="false" name="left"/>
|
||||
<slot v-if="false" name="center"/>
|
||||
<slot v-if="false" name="right"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
import type { VNode } from 'vue'
|
||||
import { useBasicStore } from '@/store/basic'
|
||||
export default defineComponent({
|
||||
name: 'AppPage',
|
||||
data() {
|
||||
return {
|
||||
left: [] as VNode[],
|
||||
right: [] as VNode[],
|
||||
center: [] as VNode[],
|
||||
default: [] as VNode[]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.onShowing()
|
||||
},
|
||||
activated() {
|
||||
this.onShowing()
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.onHide()
|
||||
},
|
||||
deactivated() {
|
||||
this.onHide()
|
||||
},
|
||||
created() {
|
||||
const { navbar } = useBasicStore()
|
||||
const { left, right, center, default: d } = this.$slots
|
||||
this.left = left?.() ?? []
|
||||
this.right = right?.() ?? []
|
||||
this.center = center?.() ?? []
|
||||
this.default = d?.() ?? []
|
||||
navbar.left.push(...this.left)
|
||||
navbar.right.push(...this.right)
|
||||
navbar.center.push(...this.center)
|
||||
},
|
||||
methods: {
|
||||
onShowing() {
|
||||
const { left, right, center } = useBasicStore().navbar
|
||||
const pair = [
|
||||
[left, this.left],
|
||||
[right, this.right],
|
||||
[center, this.center]
|
||||
]
|
||||
for (const [s, l] of pair) {
|
||||
for (const item of s) {
|
||||
if (!l.includes(item)) l.push(item)
|
||||
}
|
||||
}
|
||||
},
|
||||
onHide() {
|
||||
const { left, right, center } = useBasicStore().navbar
|
||||
const pair = [
|
||||
[left, this.left],
|
||||
[right, this.right],
|
||||
[center, this.center]
|
||||
]
|
||||
for (const [s, l] of pair) {
|
||||
for (const item of l) {
|
||||
const index = s.indexOf(item)
|
||||
if (index > -1) s.splice(index, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
|
@ -12,10 +12,10 @@ defineProps({
|
|||
default: false
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['toggleClick'])
|
||||
const emit = defineEmits(['toggle-click'])
|
||||
//切换左侧栏关闭和隐藏
|
||||
const toggleClick = () => {
|
||||
emit('toggleClick')
|
||||
emit('toggle-click')
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,96 +1,144 @@
|
|||
<template>
|
||||
<div class="navbar rowBC reset-el-dropdown">
|
||||
<div class="navbar reset-el-dropdown">
|
||||
<div class="navbar-left">
|
||||
<div class="rowSC">
|
||||
<!-- 切换sidebar按钮 -->
|
||||
<hamburger
|
||||
v-if="settings.showHamburger"
|
||||
:is-active="sidebar.opened"
|
||||
class="hamburger-container"
|
||||
@toggleClick="toggleSideBar"
|
||||
@toggle-click="toggleSideBar"
|
||||
/>
|
||||
<!-- 面包屑导航 -->
|
||||
<breadcrumb class="breadcrumb-container" />
|
||||
</div>
|
||||
<component :is="item" v-for="(item, i) of navbar.left" :key="i"/>
|
||||
</div>
|
||||
<div class="navbar-center">
|
||||
<!--导航标题-->
|
||||
<div v-if="settings.showNavbarTitle" class="heardCenterTitle">{{ settings.title }}</div>
|
||||
<component :is="item" v-for="(item, i) of navbar.center" :key="i"/>
|
||||
</div>
|
||||
<div class="navbar-right">
|
||||
<component :is="item" v-for="(item, i) of navbar.right" :key="i"/>
|
||||
<!-- 下拉操作菜单 -->
|
||||
<teleport to="#app-navs-system">
|
||||
<div v-if="settings.ShowDropDown" class="right-menu rowSC">
|
||||
<!-- <ScreenFull />-->
|
||||
<!-- <ScreenLock />-->
|
||||
<!-- <ThemeSelect />-->
|
||||
<!-- <SizeSelect />-->
|
||||
<!-- <LangSelect />-->
|
||||
<!-- <ScreenFull />-->
|
||||
<!-- <ScreenLock />-->
|
||||
<!-- <ThemeSelect />-->
|
||||
<!-- <SizeSelect />-->
|
||||
<!-- <LangSelect />-->
|
||||
<el-dropdown trigger="click" size="medium">
|
||||
<div class="avatar-wrapper">
|
||||
<img src="https://github.jzfai.top/file/images/nav-right-logo.gif" class="user-avatar" />
|
||||
<!-- <CaretBottom style="width: 1em; height: 1em; margin-left: 4px" />-->
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<router-link to="/">
|
||||
<el-dropdown-item>{{ langTitle('Home') }}</el-dropdown-item>
|
||||
<el-dropdown-item>{{ langTitle("Home") }}</el-dropdown-item>
|
||||
</router-link>
|
||||
<a target="_blank" href="https://github.com/jzfai/vue3-admin-plus">
|
||||
<el-dropdown-item>{{ langTitle('Github') }}</el-dropdown-item>
|
||||
<el-dropdown-item>{{ langTitle("Github") }}</el-dropdown-item>
|
||||
</a>
|
||||
<a target="_blank" href="https://github.jzfai.top/low-code-platform">
|
||||
<el-dropdown-item>{{ langTitle('LowCodePlatFrom') }}</el-dropdown-item>
|
||||
<el-dropdown-item>{{ langTitle("LowCodePlatFrom") }}</el-dropdown-item>
|
||||
</a>
|
||||
<!--<el-dropdown-item>修改密码</el-dropdown-item>-->
|
||||
<el-dropdown-item divided @click="loginOut">{{ langTitle('login out') }}</el-dropdown-item>
|
||||
<el-dropdown-item divided @click="loginOut">{{ langTitle("login out") }}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</teleport>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { nextTick } from 'vue'
|
||||
import { CaretBottom } from '@element-plus/icons-vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import Breadcrumb from './Breadcrumb.vue'
|
||||
import Hamburger from './Hamburger.vue'
|
||||
import LangSelect from './component/LangSelect.vue'
|
||||
import ScreenFull from './component/ScreenFull.vue'
|
||||
import SizeSelect from './component/SizeSelect.vue'
|
||||
import ThemeSelect from './component/ThemeSelect.vue'
|
||||
import ScreenLock from './component/ScreenLock.vue'
|
||||
import { resetState } from '@/hooks/use-permission'
|
||||
import { elMessage } from '@/hooks/use-element'
|
||||
import { useBasicStore } from '@/store/basic'
|
||||
import { langTitle } from '@/hooks/use-common'
|
||||
import { nextTick } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import Breadcrumb from "./Breadcrumb.vue";
|
||||
import Hamburger from "./Hamburger.vue";
|
||||
import LangSelect from "./component/LangSelect.vue";
|
||||
import ScreenFull from "./component/ScreenFull.vue";
|
||||
import SizeSelect from "./component/SizeSelect.vue";
|
||||
import ThemeSelect from "./component/ThemeSelect.vue";
|
||||
import ScreenLock from "./component/ScreenLock.vue";
|
||||
import { resetState } from "@/hooks/use-permission";
|
||||
import { elMessage } from "@/hooks/use-element";
|
||||
import { useBasicStore } from "@/store/basic";
|
||||
import { langTitle } from "@/hooks/use-common";
|
||||
|
||||
const basicStore = useBasicStore();
|
||||
const { settings, sidebar, setToggleSideBar, navbar } = basicStore;
|
||||
|
||||
const basicStore = useBasicStore()
|
||||
const { settings, sidebar, setToggleSideBar } = basicStore
|
||||
const toggleSideBar = () => {
|
||||
setToggleSideBar()
|
||||
}
|
||||
setToggleSideBar();
|
||||
};
|
||||
//退出登录
|
||||
const router = useRouter()
|
||||
const router = useRouter();
|
||||
const loginOut = () => {
|
||||
elMessage('退出登录成功')
|
||||
router.push(`/login?redirect=/`)
|
||||
elMessage("退出登录成功");
|
||||
router.push(`/login?redirect=/`);
|
||||
nextTick(() => {
|
||||
resetState()
|
||||
})
|
||||
}
|
||||
resetState();
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navbar {
|
||||
height: var(--nav-bar-height);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: var(--nav-bar-background);
|
||||
box-shadow: var(--nav-bar-box-shadow);
|
||||
z-index: 1;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.navbar-left{
|
||||
flex: 1 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> * {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
.navbar-center{
|
||||
flex: 1 1 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
> * {
|
||||
margin: 0.5em;
|
||||
}
|
||||
}
|
||||
.navbar-right{
|
||||
flex: 1 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
> *{
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
//logo
|
||||
.avatar-wrapper {
|
||||
//center-title
|
||||
.heardCenterTitle {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 46%;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
//drop-down
|
||||
.right-menu {
|
||||
cursor: pointer;
|
||||
margin-right: 16px;
|
||||
background-color: var(--nav-bar-right-menu-background);
|
||||
|
||||
//logo
|
||||
.avatar-wrapper {
|
||||
margin-top: 5px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
|
@ -109,23 +157,8 @@ const loginOut = () => {
|
|||
top: 25px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//center-title
|
||||
.heardCenterTitle {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 46%;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
//drop-down
|
||||
.right-menu {
|
||||
cursor: pointer;
|
||||
margin-right: 16px;
|
||||
background-color: var(--nav-bar-right-menu-background);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import type { VNode } from 'vue'
|
||||
import { nextTick } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
import type { RouterTypes } from '~/basic'
|
||||
|
|
@ -22,7 +23,12 @@ export const useBasicStore = defineStore('basic', {
|
|||
sidebar: { opened: true },
|
||||
//axios req collection
|
||||
axiosPromiseArr: [] as Array<ObjKeys>,
|
||||
settings: defaultSettings
|
||||
settings: defaultSettings,
|
||||
navbar: {
|
||||
left: [] as VNode[],
|
||||
right: [] as VNode[],
|
||||
center: [] as VNode[]
|
||||
}
|
||||
}
|
||||
},
|
||||
persist: {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="menuManagement-container">
|
||||
<app-page class="menuManagement-container">
|
||||
<!-- <vab-query-form>-->
|
||||
<!-- <vab-query-form-left-panel :span="4">-->
|
||||
<!-- <last-breadcrumb class="page-breadcrumb"/>-->
|
||||
|
|
@ -7,13 +7,12 @@
|
|||
<!-- <vab-query-form-right-panel :span="20">-->
|
||||
<!-- </vab-query-form-right-panel>-->
|
||||
<!-- </vab-query-form>-->
|
||||
<teleport to="#app-navs">
|
||||
<template #right>
|
||||
<el-button type="primary" @click="handleEdit()">添加</el-button>
|
||||
</teleport>
|
||||
</template>
|
||||
<div class="container-inner">
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
:height="height"
|
||||
:data="list"
|
||||
:element-loading-text="elementLoadingText"
|
||||
row-key="path"
|
||||
|
|
@ -79,15 +78,16 @@
|
|||
</el-table>
|
||||
<edit ref="edit" :menu-data="menuData" @fetch-data="fetchData"/>
|
||||
</div>
|
||||
</div>
|
||||
</app-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { doDelete, getTree } from '@/api/menuManagement'
|
||||
import Edit from './components/MenuManagementEdit.vue'
|
||||
import AppPage from "@/components/AppPage.vue";
|
||||
export default {
|
||||
name: 'MenuManagement',
|
||||
components: { Edit },
|
||||
components: { Edit, AppPage },
|
||||
data() {
|
||||
return {
|
||||
data: [],
|
||||
|
|
@ -101,9 +101,6 @@
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
height() {
|
||||
return 'auto'
|
||||
},
|
||||
menuData() {
|
||||
return this.list
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="roleManagement-container">
|
||||
<teleport to="#app-navs">
|
||||
<app-page class="roleManagement-container">
|
||||
<template #right>
|
||||
<el-form :inline="true" :model="queryForm" class="nav" @submit.prevent>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
<!-- </el-button>-->
|
||||
<!-- </el-form-item>-->
|
||||
</el-form>
|
||||
</teleport>
|
||||
</template>
|
||||
<div class="container-inner">
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
|
|
@ -38,7 +38,6 @@
|
|||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
:header-cell-style="{ background: '#F7F9FB', textAlign: 'center' }"
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
:height="height"
|
||||
@selection-change="setSelectRows"
|
||||
>
|
||||
<!-- <el-table-column show-overflow-tooltip type="selection"></el-table-column>-->
|
||||
|
|
@ -68,10 +67,10 @@
|
|||
<el-table-column label="操作" width="200">
|
||||
<template #default="{ row }">
|
||||
<el-button class="icon" type="primary" link @click="handleEdit(row)">
|
||||
<i class="bi bi-pencil-square"/>
|
||||
<i class="bi bi-pencil-square" />
|
||||
</el-button>
|
||||
<el-button class="icon" type="primary" link @click="handleDestroy(row)">
|
||||
<i class="bi bi-trash"/>
|
||||
<i class="bi bi-trash" />
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
|
@ -86,50 +85,46 @@
|
|||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
<edit ref="edit" @fetch-data="fetchData"/>
|
||||
</div>
|
||||
<edit ref="edit" @fetch-data="fetchData" />
|
||||
</div>
|
||||
</app-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { doDelete, getList } from '@/api/roleManagement'
|
||||
import Edit from './components/RoleManagementEdit.vue'
|
||||
import { doDelete, getList } from "@/api/roleManagement";
|
||||
import Edit from "./components/RoleManagementEdit.vue";
|
||||
import AppPage from "@/components/AppPage.vue";
|
||||
|
||||
export default {
|
||||
name: 'RoleManagement',
|
||||
components: { Edit },
|
||||
export default {
|
||||
name: "RoleManagement",
|
||||
components: { Edit, AppPage },
|
||||
data() {
|
||||
return {
|
||||
list: null,
|
||||
listLoading: true,
|
||||
layout: 'total, sizes, prev, pager, next, jumper',
|
||||
layout: "total, sizes, prev, pager, next, jumper",
|
||||
total: 0,
|
||||
selectRows: '',
|
||||
elementLoadingText: '正在加载...',
|
||||
selectRows: "",
|
||||
elementLoadingText: "正在加载...",
|
||||
queryForm: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
roleName: '',
|
||||
},
|
||||
roleName: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
height() {
|
||||
return 'auto'
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetchData()
|
||||
this.fetchData();
|
||||
},
|
||||
methods: {
|
||||
setSelectRows(val) {
|
||||
this.selectRows = val
|
||||
this.selectRows = val;
|
||||
},
|
||||
handleEdit(row) {
|
||||
if (row.id) {
|
||||
this.$refs['edit'].showEdit(row)
|
||||
this.$refs["edit"].showEdit(row);
|
||||
} else {
|
||||
this.$refs['edit'].showEdit()
|
||||
this.$refs["edit"].showEdit();
|
||||
}
|
||||
},
|
||||
async handleDestroy(row) {
|
||||
|
|
@ -152,41 +147,50 @@
|
|||
// return false
|
||||
// }
|
||||
// }
|
||||
const rs = await elConfirmNoCancelBtn(null, '你确定要删除当前项吗');
|
||||
const rs = await elConfirmNoCancelBtn(null, "你确定要删除当前项吗");
|
||||
if (rs !== "confirm") return;
|
||||
const { msg } = await doDelete({
|
||||
id: row.id,
|
||||
})
|
||||
elMessage(msg, 'success')
|
||||
this.fetchData()
|
||||
id: row.id
|
||||
});
|
||||
elMessage(msg, "success");
|
||||
this.fetchData();
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.queryForm.pageSize = val
|
||||
this.fetchData()
|
||||
this.queryForm.pageSize = val;
|
||||
this.fetchData();
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.queryForm.pageNo = val
|
||||
this.fetchData()
|
||||
this.queryForm.pageNo = val;
|
||||
this.fetchData();
|
||||
},
|
||||
queryData() {
|
||||
this.queryForm.pageNo = 1
|
||||
this.fetchData()
|
||||
this.queryForm.pageNo = 1;
|
||||
this.fetchData();
|
||||
},
|
||||
async fetchData() {
|
||||
this.listLoading = true
|
||||
const { data } = await getList(this.queryForm)
|
||||
this.list = data.rows
|
||||
this.total = data.total
|
||||
this.listLoading = true;
|
||||
const { data } = await getList(this.queryForm);
|
||||
this.list = data.rows;
|
||||
this.total = data.total;
|
||||
setTimeout(() => {
|
||||
this.listLoading = false
|
||||
}, 300)
|
||||
},
|
||||
},
|
||||
this.listLoading = false;
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.icon{
|
||||
.nav > * {
|
||||
margin-bottom: 0;
|
||||
margin-right: 1em;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 1.5em !important;
|
||||
padding: 5px !important;
|
||||
}
|
||||
|
|
|
|||
2
typings/components.d.ts
vendored
2
typings/components.d.ts
vendored
|
|
@ -7,6 +7,8 @@ export {}
|
|||
|
||||
declare module '@vue/runtime-core' {
|
||||
export interface GlobalComponents {
|
||||
AppPage: typeof import('./../src/components/AppPage.vue')['default']
|
||||
Container: typeof import('@/components/AppPage.vue')['default']
|
||||
ElSvgIcon: typeof import('./../src/components/ElSvgIcon.vue')['default']
|
||||
IconSelector: typeof import('./../src/components/IconSelector.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user