Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

角色列表添加

Browse Source
This commit is contained in:
仲么了
2024-01-19 14:08:07 +08:00
parent 343bda8c70
commit 9b75f5b38c
19 changed files with 515 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/user-boot/function.ts
View File

@@ -31,3 +31,12 @@ export function deleteMenu(id: string) {
method: 'delete', method: 'delete',
}) })
} }
// 更新角色菜单
export function updateRoleMenu(data:any) {
return createAxios({
url: '/user-boot/function/assignFunctionByRoleIndexes',
method: 'post',
data: data
})
}

25
src/api/user-boot/role.ts Normal file
View File

@@ -0,0 +1,25 @@
import createAxios from '@/utils/request'
export function add(data: any) {
return createAxios({
url: '/user-boot/role/add',
method: 'post',
data: data
})
}
export function update(data: any) {
return createAxios({
url: '/user-boot/role/update',
method: 'post',
data: data
})
}
export function del(data: any) {
return createAxios({
url: '/user-boot/role/delete',
method: 'post',
data: data
})
}

21
src/api/user-boot/roleFuction.ts Normal file
View File

@@ -0,0 +1,21 @@
import createAxios from '@/utils/request'
export function getFunctionsByRoleIndex(data) {
return createAxios({
url: '/user-boot/roleFunction/getFunctionsByRoleIndex',
method: 'post',
params: data
})
}
export function updateRoleMenu(data:any) {
return createAxios({
url: '/user-boot/function/assignFunctionByRoleIndexes',
method: 'post',
data: data
// params: roleIndex,functionIndexList
// data:{
// roleIndex,functionIndexList
// }
})
}

3
src/components/tree/index.vue
View File

@@ -26,13 +26,13 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ElTree } from 'element-plus';
import { ref, watch } from 'vue' import { ref, watch } from 'vue'
defineOptions({ defineOptions({
name: 'govern/tree' name: 'govern/tree'
}) })
const filterText = ref('') const filterText = ref('')
const treeRef = ref()
const defaultProps = { const defaultProps = {
label: 'name', label: 'name',
value: 'id' value: 'id'
@@ -44,6 +44,7 @@ const filterNode = (value: string, data: any) => {
if (!value) return true if (!value) return true
return data.name.includes(value) return data.name.includes(value)
} }
const treeRef = ref<InstanceType<typeof ElTree>>()
defineExpose({ treeRef }) defineExpose({ treeRef })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

464
src/layouts/admin/index.vue
View File

@@ -58,235 +58,234 @@ const init = async () => {
* 后台初始化请求，获取站点配置，动态路由等信息 * 后台初始化请求，获取站点配置，动态路由等信息
*/ */
getRouteMenu().then((res: any) => { getRouteMenu().then((res: any) => {
const arr = [ // const arr = [
{ // {
id: 1, // id: 1,
pid: 0, // pid: 0,
type: 'menu', // type: 'menu',
title: '控制台', // title: '控制台',
name: 'dashboard', // name: 'dashboard',
path: 'dashboard', // path: 'dashboard',
icon: 'fa fa-dashboard', // icon: 'fa fa-dashboard',
menu_type: 'tab', // menu_type: 'tab',
url: '', // url: '',
component: '/src/views/govern/log/debug.vue', // component: '/src/views/govern/log/debug.vue',
keepalive: 'dashboard', // keepalive: 'dashboard',
extend: 'none', // extend: 'none',
children: [] // children: []
}, // },
{ // {
id: 3, // id: 3,
pid: 0, // pid: 0,
type: 'menu', // type: 'menu',
title: '审计管理', // title: '审计管理',
name: 'test', // name: 'test',
path: 'test', // path: 'test',
icon: 'el-icon-List', // icon: 'el-icon-List',
menu_type: 'tab', // menu_type: 'tab',
url: '', // url: '',
component: '/src/views/govern/setting/app/index.vue', // component: '/src/views/govern/setting/app/index.vue',
keepalive: 'test', // keepalive: 'test',
extend: 'none', // extend: 'none',
children: [ // children: [
{ // {
id: 1, // id: 1,
pid: 3, // pid: 3,
type: 'menu', // type: 'menu',
title: '图表1', // title: '图表1',
name: 'comptroller/list1', // name: 'comptroller/list1',
path: 'comptroller/list1', // path: 'comptroller/list1',
icon: 'el-icon-List', // icon: 'el-icon-List',
menu_type: 'tab', // menu_type: 'tab',
url: '', // url: '',
component: '/src/views/govern/user/roleCode/index.vue', // component: '/src/views/govern/user/roleCode/index.vue',
keepalive: 'auth/role', // keepalive: 'auth/role',
extend: 'none', // extend: 'none',
children: [] // children: []
} // }
] // ]
}, // },
{ // {
id: 3, // id: 3,
pid: 0, // pid: 0,
type: 'menu_dir', // type: 'menu_dir',
title: '电压暂降', // title: '电压暂降',
name: 'voltage/sags', // name: 'voltage/sags',
path: 'voltage/sags', // path: 'voltage/sags',
icon: 'el-icon-BellFilled', // icon: 'el-icon-BellFilled',
menu_type: 'tab', // menu_type: 'tab',
url: '', // url: '',
extend: 'none', // extend: 'none',
children: [ // children: [
{ // {
id: 1, // id: 1,
pid: 3, // pid: 3,
type: 'menu_dir', // type: 'menu_dir',
title: '运行管理', // title: '运行管理',
name: 'voltage/sags/operationsManagement', // name: 'voltage/sags/operationsManagement',
path: 'voltage/sags/operationsManagement', // path: 'voltage/sags/operationsManagement',
icon: 'fa-solid fa-bars-progress', // icon: 'fa-solid fa-bars-progress',
menu_type: 'tab', // menu_type: 'tab',
url: '', // url: '',
extend: 'none', // extend: 'none',
children: [ // children: [
{ // {
id: 1, // id: 1,
pid: 3, // pid: 3,
type: 'menu', // type: 'menu',
title: '终端运行管理', // title: '终端运行管理',
name: 'voltage/sags/operationsManagement/index', // name: 'voltage/sags/operationsManagement/index',
path: 'voltage/sags/operationsManagement/index', // path: 'voltage/sags/operationsManagement/index',
icon: 'fa-solid fa-recycle', // icon: 'fa-solid fa-recycle',
menu_type: 'tab', // menu_type: 'tab',
url: '', // url: '',
component: '/src/views/voltage/sags/operationsManagement/index.vue', // component: '/src/views/voltage/sags/operationsManagement/index.vue',
keepalive: 'voltage/sags/operationsManagement/index', // keepalive: 'voltage/sags/operationsManagement/index',
extend: 'none', // extend: 'none',
children: [] // children: []
}, // },
{ // {
id: 1, // id: 1,
pid: 3, // pid: 3,
type: 'menu', // type: 'menu',
title: '终端运行统计', // title: '终端运行统计',
name: 'voltage/sags/operationsManagement/statistics', // name: 'voltage/sags/operationsManagement/statistics',
path: 'voltage/sags/operationsManagement/statistics', // path: 'voltage/sags/operationsManagement/statistics',
icon: 'fa-solid fa-chart-column', // icon: 'fa-solid fa-chart-column',
menu_type: 'tab', // menu_type: 'tab',
url: '', // url: '',
component: '/src/views/voltage/sags/operationsManagement/statistics.vue', // component: '/src/views/voltage/sags/operationsManagement/statistics.vue',
keepalive: 'voltage/sags/operationsManagement/statistics', // keepalive: 'voltage/sags/operationsManagement/statistics',
extend: 'none', // extend: 'none',
children: [] // children: []
}, // },
{ // {
id: 1, // id: 1,
pid: 3, // pid: 3,
type: 'menu', // type: 'menu',
title: '监测点台账信息', // title: '监测点台账信息',
name: 'voltage/sags/operationsManagement/point', // name: 'voltage/sags/operationsManagement/point',
path: 'voltage/sags/operationsManagement/point', // path: 'voltage/sags/operationsManagement/point',
icon: 'fa-brands fa-square-pinterest', // icon: 'fa-brands fa-square-pinterest',
menu_type: 'tab', // menu_type: 'tab',
url: '', // url: '',
component: '/src/views/voltage/sags/operationsManagement/point.vue', // component: '/src/views/voltage/sags/operationsManagement/point.vue',
keepalive: 'voltage/sags/operationsManagement/point', // keepalive: 'voltage/sags/operationsManagement/point',
extend: 'none', // extend: 'none',
children: [] // children: []
} // }
] // ]
}, // },
{ // {
id: 2, // id: 2,
pid: 3, // pid: 3,
type: 'menu', // type: 'menu',
title: '区域', // title: '区域',
name: 'Event-boot/Region/distribution', // name: 'Event-boot/Region/distribution',
path: 'Event-boot/Region/distribution', // path: 'Event-boot/Region/distribution',
icon: 'el-icon-Management', // icon: 'el-icon-Management',
menu_type: 'tab', // menu_type: 'tab',
url: '', // url: '',
component: '/src/views/Event-boot/Region/distribution.vue', // component: '/src/views/Event-boot/Region/distribution.vue',
keepalive: 'Event-boot/Region/distribution', // keepalive: 'Event-boot/Region/distribution',
extend: 'none', // extend: 'none',
children: [ // children: [
{ // {
id: 2, // id: 2,
pid: 3, // pid: 3,
type: 'menu', // type: 'menu',
title: '区域概览', // title: '区域概览',
name: 'Region/overview', // name: 'Region/overview',
path: 'Region/overview', // path: 'Region/overview',
icon: 'el-icon-Promotion', // icon: 'el-icon-Promotion',
menu_type: 'tab', // menu_type: 'tab',
url: '', // url: '',
component: '/src/views/Event-boot/Region/overview.vue', // component: '/src/views/Event-boot/Region/overview.vue',
keepalive: 'Region/overview', // keepalive: 'Region/overview',
extend: 'none', // extend: 'none',
children: [] // children: []
}, // },
{ // {
id: 2, // id: 2,
pid: 3, // pid: 3,
type: 'menu', // type: 'menu',
title: '区域统计', // title: '区域统计',
name: 'Region/statistics', // name: 'Region/statistics',
path: 'Region/statistics', // path: 'Region/statistics',
icon: 'el-icon-Promotion', // icon: 'el-icon-Promotion',
menu_type: 'tab', // menu_type: 'tab',
url: '', // url: '',
component: '/src/views/Event-boot/Region/statistics.vue', // component: '/src/views/Event-boot/Region/statistics.vue',
keepalive: 'Region/statistics', // keepalive: 'Region/statistics',
extend: 'none', // extend: 'none',
children: [] // children: []
}, // },
{ // {
id: 1, // id: 1,
pid: 3, // pid: 3,
type: 'menu', // type: 'menu',
title: '监测网分布', // title: '监测网分布',
name: 'Region/distribution', // name: 'Region/distribution',
path: 'Region/distribution', // path: 'Region/distribution',
icon: 'el-icon-Share', // icon: 'el-icon-Share',
menu_type: 'tab', // menu_type: 'tab',
url: '', // url: '',
component: '/src/views/Event-boot/Region/distribution.vue', // component: '/src/views/Event-boot/Region/distribution.vue',
keepalive: 'Region/distribution', // keepalive: 'Region/distribution',
extend: 'none', // extend: 'none',
children: [] // children: []
} // }
] // ]
} // }
] // ]
}, // },
{ // {
id: 2, // id: 2,
pid: 0, // pid: 0,
type: 'menu_dir', // type: 'menu_dir',
title: '权限管理', // title: '权限管理',
name: 'auth', // name: 'auth',
path: 'auth', // path: 'auth',
icon: 'fa-solid fa-layer-group', // icon: 'fa-solid fa-layer-group',
menu_type: null, // menu_type: null,
url: '', // url: '',
component: '', // component: '',
keepalive: 0, // keepalive: 0,
extend: 'none', // extend: 'none',
children: [ // children: [
{ // {
id: 3, // id: 3,
pid: 2, // pid: 2,
type: 'menu', // type: 'menu',
title: '角色管理', // title: '角色管理',
name: 'auth/role', // name: 'auth/role',
path: 'auth/role', // path: 'auth/role',
icon: 'el-icon-Avatar', // icon: 'el-icon-Avatar',
menu_type: 'tab', // menu_type: 'tab',
url: '', // url: '',
component: '/src/views/auth/role/index.vue', // component: '/src/views/auth/role/index.vue',
keepalive: 'auth/role', // keepalive: 'auth/role',
extend: 'none', // extend: 'none',
children: [] // children: []
}, // },
{ // {
id: 13, // id: 13,
pid: 2, // pid: 2,
type: 'menu', // type: 'menu',
title: '菜单规则管理', // title: '菜单规则管理',
name: 'auth/menu', // name: 'auth/menu',
path: 'auth/menu', // path: 'auth/menu',
icon: 'el-icon-Menu', // icon: 'el-icon-Menu',
menu_type: 'tab', // menu_type: 'tab',
url: '', // url: '',
component: '/src/views/auth/menu/index.vue', // component: '/src/views/auth/menu/index.vue',
keepalive: 'auth/menu', // keepalive: 'auth/menu',
extend: 'none', // extend: 'none',
children: [] // children: []
} // }
] // ]
} // }
] // ]
const handlerMenu = (data: any) => { const handlerMenu = (data: any) => {
data.forEach((item: any) => { data.forEach((item: any) => {
item.path = item.routePath item.path = item.routePath
@@ -301,10 +300,7 @@ const init = async () => {
}) })
} }
handlerMenu(res.data) handlerMenu(res.data)
// handleAdminRoute(arr) handleAdminRoute(res.data)
// handleAdminRoute(res.data)
handleAdminRoute([...arr, ...res.data])
// 预跳转到上次路径 // 预跳转到上次路径
if (route.params.to) { if (route.params.to) {
const lastRoute = JSON.parse(route.params.to as string) const lastRoute = JSON.parse(route.params.to as string)
@@ -316,9 +312,7 @@ const init = async () => {
} }
// 跳转到第一个菜单 // 跳转到第一个菜单
console.log(navTabs.state.tabsViewRoutes)
let firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes) let firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
console.log(firstRoute)
if (firstRoute) routePush(firstRoute.path) if (firstRoute) routePush(firstRoute.path)
}) })
} }

30
src/layouts/admin/router-view/main.vue
View File

@@ -1,25 +1,22 @@
<template> <template>
<el-main class='layout-main'> <el-main class="layout-main" :style="mainHeight()">
<el-scrollbar class='layout-main-scrollbar' :style='layoutMainScrollbarStyle()' ref='mainScrollbarRef'> <router-view v-slot="{ Component }">
<router-view v-slot='{ Component }'> <transition :name="config.layout.mainAnimation" mode="out-in">
<transition :name='config.layout.mainAnimation' mode='out-in'> <keep-alive :include="state.keepAliveComponentNameList">
<keep-alive :include='state.keepAliveComponentNameList'> <component :is="Component" :key="state.componentKey" />
<component :is='Component' :key='state.componentKey' />
</keep-alive> </keep-alive>
</transition> </transition>
</router-view> </router-view>
</el-scrollbar>
</el-main> </el-main>
</template> </template>
<script setup lang='ts'> <script setup lang="ts">
import { ref, reactive, onMounted, watch, onBeforeMount, onUnmounted, nextTick, provide } from 'vue' import { ref, reactive, onMounted, watch, onBeforeMount, onUnmounted, nextTick, provide } from 'vue'
import { useRoute, type RouteLocationNormalized } from 'vue-router' import { useRoute, type RouteLocationNormalized } from 'vue-router'
import { mainHeight as layoutMainScrollbarStyle } from '@/utils/layout' import { mainHeight } from '@/utils/layout'
import useCurrentInstance from '@/utils/useCurrentInstance' import useCurrentInstance from '@/utils/useCurrentInstance'
import { useConfig } from '@/stores/config' import { useConfig } from '@/stores/config'
import { useNavTabs } from '@/stores/navTabs' import { useNavTabs } from '@/stores/navTabs'
import type { ScrollbarInstance } from 'element-plus'
defineOptions({ defineOptions({
name: 'layout/main' name: 'layout/main'
@@ -30,7 +27,6 @@ const { proxy } = useCurrentInstance()
const route = useRoute() const route = useRoute()
const config = useConfig() const config = useConfig()
const navTabs = useNavTabs() const navTabs = useNavTabs()
const mainScrollbarRef = ref<ScrollbarInstance>()
const state: { const state: {
componentKey: string componentKey: string
@@ -52,7 +48,9 @@ const addKeepAliveComponentName = function(keepAliveName: string | undefined) {
onBeforeMount(() => { onBeforeMount(() => {
proxy.eventBus.on('onTabViewRefresh', (menu: RouteLocationNormalized) => { proxy.eventBus.on('onTabViewRefresh', (menu: RouteLocationNormalized) => {
state.keepAliveComponentNameList = state.keepAliveComponentNameList.filter((name: string) => menu.meta.keepalive !== name) state.keepAliveComponentNameList = state.keepAliveComponentNameList.filter(
(name: string) => menu.meta.keepalive !== name
)
state.componentKey = '' state.componentKey = ''
nextTick(() => { nextTick(() => {
state.componentKey = menu.path state.componentKey = menu.path
@@ -60,7 +58,9 @@ onBeforeMount(() => {
}) })
}) })
proxy.eventBus.on('onTabViewClose', (menu: RouteLocationNormalized) => { proxy.eventBus.on('onTabViewClose', (menu: RouteLocationNormalized) => {
state.keepAliveComponentNameList = state.keepAliveComponentNameList.filter((name: string) => menu.meta.keepalive !== name) state.keepAliveComponentNameList = state.keepAliveComponentNameList.filter(
(name: string) => menu.meta.keepalive !== name
)
}) })
}) })
@@ -74,7 +74,6 @@ onMounted(() => {
if (typeof navTabs.state.activeRoute?.meta.keepalive == 'string') { if (typeof navTabs.state.activeRoute?.meta.keepalive == 'string') {
addKeepAliveComponentName(navTabs.state.activeRoute?.meta.keepalive) addKeepAliveComponentName(navTabs.state.activeRoute?.meta.keepalive)
} }
console.log(state.keepAliveComponentNameList)
}) })
watch( watch(
@@ -87,10 +86,9 @@ watch(
} }
) )
provide('mainScrollbarRef', mainScrollbarRef)
</script> </script>
<style scoped lang='scss'> <style scoped lang="scss">
.layout-container .layout-main { .layout-container .layout-main {
padding: 0 !important; padding: 0 !important;
overflow: hidden; overflow: hidden;

1
src/router/index.ts
View File

@@ -17,7 +17,6 @@ router.beforeEach((to, from, next) => {
loading.show() loading.show()
window.existLoading = true window.existLoading = true
} }
console.log(to)
if (to.path == '/login' || to.path == '/404') { if (to.path == '/login' || to.path == '/404') {
// 登录或者注册才可以往下进行 // 登录或者注册才可以往下进行
next() next()

22
src/stores/adminInfo.ts
View File

@@ -5,14 +5,18 @@ import type { AdminInfo } from '@/stores/interface'
export const useAdminInfo = defineStore('adminInfo', { export const useAdminInfo = defineStore('adminInfo', {
state: (): AdminInfo => { state: (): AdminInfo => {
return { return {
id: 0, access_token: '',
username: '', token_type: '',
nickname: '',
avatar: '',
last_login_time: '',
token: '',
refresh_token: '', refresh_token: '',
super: false expires_in: 0,
scope: '',
nickname: '',
userType: 1,
deptIndex: '',
userIndex: '',
client_id: '',
headSculpture: '',
jti: ''
} }
}, },
actions: { actions: {
@@ -20,7 +24,7 @@ export const useAdminInfo = defineStore('adminInfo', {
this.$state = { ...this.$state, ...state } this.$state = { ...this.$state, ...state }
}, },
removeToken() { removeToken() {
this.token = '' this.access_token = ''
this.refresh_token = '' this.refresh_token = ''
}, },
setToken(token: string, type: 'auth' | 'refresh') { setToken(token: string, type: 'auth' | 'refresh') {
@@ -28,7 +32,7 @@ export const useAdminInfo = defineStore('adminInfo', {
this[field] = token this[field] = token
}, },
getToken(type: 'auth' | 'refresh' = 'auth') { getToken(type: 'auth' | 'refresh' = 'auth') {
return type === 'auth' ? this.token : this.refresh_token return type === 'auth' ? this.token_type + ' ' + this.access_token : this.refresh_token
} }
}, },
persist: { persist: {

18
src/stores/interface/index.ts
View File

@@ -35,14 +35,18 @@ export interface NavTabs {
} }
export interface AdminInfo { export interface AdminInfo {
id: number access_token: string
username: string token_type: string
nickname: string
avatar: string
last_login_time: string
token: string
refresh_token: string refresh_token: string
super: boolean expires_in: number
scope: string
nickname: string
userType: number
deptIndex: string
userIndex: string
client_id: string
headSculpture: string
jti: string
} }
export interface DictData { export interface DictData {

11
src/styles/app.scss
View File

@@ -23,6 +23,17 @@ body,
position: relative; position: relative;
} }
::-webkit-scrollbar {
width: 8px;
height: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
height: 3px;
background-color: var(--el-color-primary) !important;
border-radius: 30px !important;
}
// 阿里 iconfont Symbol引用css // 阿里 iconfont Symbol引用css
.iconfont-icon { .iconfont-icon {
width: 1em; width: 1em;

27
src/styles/vxeTable.scss
View File

@@ -1,16 +1,16 @@
.vxe-table--body-wrapper, // .vxe-table--body-wrapper,
.boxbx { // .boxbx {
&::-webkit-scrollbar { // &::-webkit-scrollbar {
width: 10px; // width: 10px;
height: 10px; // height: 10px;
} // }
&::-webkit-scrollbar-thumb { // &::-webkit-scrollbar-thumb {
border-radius: 5px; // border-radius: 5px;
height: 3px; // height: 3px;
background-color: var(--el-color-primary) !important; // background-color: var(--el-color-primary) !important;
border-radius: 30px !important; // border-radius: 30px !important;
} // }
} // }
// .vxe-table--body-wrapper::-webkit-scrollbar-thumb { // .vxe-table--body-wrapper::-webkit-scrollbar-thumb {
// border-radius: 5px; // border-radius: 5px;
@@ -23,3 +23,4 @@
background: var(--el-color-primary); background: var(--el-color-primary);
color: var(--el-color-white); color: var(--el-color-white);
} }

2
src/utils/layout.ts
View File

@@ -11,7 +11,7 @@ export function mainHeight(extra = 0,divided =1): CSSProperties {
let height = extra let height = extra
const adminLayoutMainExtraHeight: anyObj = { const adminLayoutMainExtraHeight: anyObj = {
Default: 60, Default: 60,
Classic: 102, Classic: 105,
Streamline: 60 Streamline: 60
} }
const config = useConfig() const config = useConfig()

4
src/utils/request.ts
View File

@@ -17,8 +17,7 @@ const loadingInstance: LoadingInstance = {
* 根据运行环境获取基础请求URL * 根据运行环境获取基础请求URL
*/ */
export const getUrl = (): string => { export const getUrl = (): string => {
if (import.meta.env.MODE == 'development' || location.hostname === 'localhost') return '/api' return '/api'
return window.location.protocol + '//' + window.location.host
} }
/** /**
@@ -224,6 +223,7 @@ interface LoadingInstance {
target: any target: any
count: number count: number
} }
interface Options { interface Options {
// 是否开启取消重复请求, 默认为 true // 是否开启取消重复请求, 默认为 true
CancelDuplicateRequest?: boolean CancelDuplicateRequest?: boolean

2
src/views/auth/menu/menu.vue
View File

@@ -116,7 +116,7 @@ provide('tableStore', tableStore)
const addMenu = () => { const addMenu = () => {
console.log(popupRef) console.log(popupRef)
popupRef.value.open('新增菜单') popupRef.value.open('新增菜单',{})
} }
const currentChange = (newValue: any) => { const currentChange = (newValue: any) => {
emits('select', newValue.row.id) emits('select', newValue.row.id)

54
src/views/auth/menu/popupMenu.vue
View File

@@ -1,45 +1,45 @@
<template> <template>
<el-dialog class='cn-operate-dialog' v-model='dialogVisible' :title='title'> <el-dialog class="cn-operate-dialog" v-model="dialogVisible" :title="title">
<el-scrollbar> <el-scrollbar>
<el-form :inline='false' :model='form' label-width='120px'> <el-form :inline="false" :model="form" label-width="120px">
<el-form-item label='上级菜单'> <el-form-item label="上级菜单">
<el-cascader <el-cascader
v-model='form.pid' v-model="form.pid"
:options='tableStore.table.data' :options="tableStore.table.data"
:props='cascaderProps' :props="cascaderProps"
style='width: 100%' style="width: 100%"
/> />
</el-form-item> </el-form-item>
<el-form-item label='菜单名称'> <el-form-item label="菜单名称">
<el-input v-model='form.name' placeholder='请输入菜单名称' /> <el-input v-model="form.name" placeholder="请输入菜单名称" />
</el-form-item> </el-form-item>
<el-form-item label='图标'> <el-form-item label="图标">
<IconSelector v-model='form.icon' placeholder='请选择图标' /> <IconSelector v-model="form.icon" placeholder="请选择图标" />
</el-form-item> </el-form-item>
<el-form-item label='菜单路由'> <el-form-item label="菜单路由">
<el-input v-model='form.path' placeholder='请输入菜单名称' /> <el-input v-model="form.path" placeholder="请输入菜单名称" />
</el-form-item> </el-form-item>
<el-form-item label='组件路径'> <el-form-item label="组件路径">
<el-input v-model='form.routeName' placeholder='请输入组件路径，如/src/views/dashboard/index.vue' /> <el-input v-model="form.routeName" placeholder="请输入组件路径，如/src/views/dashboard/index.vue" />
</el-form-item> </el-form-item>
<el-form-item label='排序'> <el-form-item label="排序">
<el-input-number v-model='form.sort' :min='0' /> <el-input-number v-model="form.sort" :min="0" />
</el-form-item> </el-form-item>
<el-form-item label='菜单描述'> <el-form-item label="菜单描述">
<el-input v-model='form.remark' :rows='2' type='textarea' placeholder='请输入描述' /> <el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" />
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-scrollbar> </el-scrollbar>
<template #footer> <template #footer>
<span class='dialog-footer'> <span class="dialog-footer">
<el-button @click='dialogVisible = false'>取消</el-button> <el-button @click="dialogVisible = false">取消</el-button>
<el-button type='primary' @click='submit'>确认</el-button> <el-button type="primary" @click="submit">确认</el-button>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script lang='ts' setup> <script lang="ts" setup>
import { ref, inject } from 'vue' import { ref, inject } from 'vue'
import { reactive } from 'vue' import { reactive } from 'vue'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
@@ -74,20 +74,20 @@ const form: any = reactive({
const dialogVisible = ref(false) const dialogVisible = ref(false)
const title = ref('新增菜单') const title = ref('新增菜单')
const open = (text: string, data?: anyObj) => { const open = (text: string, data: anyObj) => {
console.log(data) console.log(data)
title.value = text title.value = text
// 重置表单 // 重置表单
for (let key in form) { for (let key in form) {
form[key] = '' form[key] = ''
} }
form.pid = '0' form.pid = data.pid || '0'
form.sort = 0 form.sort = 0
form.type = 0 form.type = 0
if (data) { if (data.id) {
for (let key in form) { for (let key in form) {
form[key] = data[key] || '' form[key] = data[key] ? data[key] : data[key] === 0 ? 0 : ''
} }
form.path = data.routePath || '' form.path = data.routePath || ''
form.name = data.title || '' form.name = data.title || ''

101
src/views/auth/role/index.vue
View File

@@ -1,11 +1,23 @@
<template> <template>
<div class="default-main"> <div class="default-main" style="display: flex" :style="{ height: height }">
<TableHeader> <div style="width: calc(100% - 280px)">
<template v-slot:operation> <div class="menu-index-header">
<el-button :icon="Plus" type="primary" @click="addMenu">添加</el-button> <div style="flex: 1; font-weight: 700">角色列表</div>
</template> <el-button :icon="Plus" type="primary" @click="addRole" class="ml10">新增</el-button>
</TableHeader> </div>
<Table ref="tableRef" /> <Table ref="tableRef" @currentChange="currentChange" />
</div>
<div style="height: 100%; flex: 1">
<Tree
v-if="menuListId"
ref="treeRef"
show-checkbox
:data="menuTree"
:checkStrictly="checkStrictly"
@check-change="checkChange"
></Tree>
<el-empty style="width: 100%; padding-top: 300px; box-sizing: border-box" description="请选择角色" v-else />
</div>
<popupForm ref="popupRef"></popupForm> <popupForm ref="popupRef"></popupForm>
</div> </div>
</template> </template>
@@ -15,13 +27,28 @@ import { ref, onMounted, provide } from 'vue'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue' import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import Tree from '@/components/tree/index.vue'
import { functionTree } from '@/api/user-boot/function'
import { getFunctionsByRoleIndex, updateRoleMenu } from '@/api/user-boot/roleFuction'
import { mainHeight } from '@/utils/layout'
import { del } from '@/api/user-boot/role'
import { ElMessage } from 'element-plus'
import popupForm from './popupForm.vue'
import { useAdminInfo } from '@/stores/adminInfo'
const adminInfo = useAdminInfo()
defineOptions({ defineOptions({
name: 'auth/role' name: 'auth/role'
}) })
const height = mainHeight(20).height
const treeRef = ref()
const menuTree = ref<treeData[]>([])
const popupRef = ref() const popupRef = ref()
const checkStrictly = ref(true)
const menuListId = ref('')
const tableStore = new TableStore({ const tableStore = new TableStore({
url: '/user-boot/role/selectRoleDetail?id=1', showPage: false,
url: '/user-boot/role/selectRoleDetail?id=' + adminInfo.$state.userType,
method: 'POST', method: 'POST',
column: [ column: [
{ title: '角色名称', field: 'name', align: 'center' }, { title: '角色名称', field: 'name', align: 'center' },
@@ -56,16 +83,68 @@ const tableStore = new TableStore({
confirmButtonType: 'danger', confirmButtonType: 'danger',
title: '确定删除该角色吗？' title: '确定删除该角色吗？'
}, },
click: row => {} click: row => {
del([row.id]).then(() => {
ElMessage.success('删除成功')
tableStore.index()
})
}
} }
] ]
} }
] ]
}) })
provide('tableStore', tableStore)
tableStore.table.params.searchValue = '' tableStore.table.params.searchValue = ''
provide('tableStore', tableStore)
const filterData = (arr: any[]) => {
return arr.filter((item: any) => {
item.name = item.title
if (item.children.length) {
item.children = filterData(item.children)
}
return item.type === 0
})
}
functionTree().then((res: any) => {
menuTree.value = filterData(res.data)
})
const currentChange = (data: any) => {
checkStrictly.value = true
menuListId.value = data.row.id
getFunctionsByRoleIndex({ id: data.row.id }).then((res: any) => {
treeRef.value.treeRef.setCheckedKeys(res.data.map((item: any) => item.id))
})
}
const timeout = ref<NodeJS.Timeout>()
const checkChange = (data: any) => {
if (checkStrictly.value) {
checkStrictly.value = false
return
}
if (timeout.value) {
clearTimeout(timeout.value)
}
timeout.value = setTimeout(() => {
updateRoleMenu({
id: menuListId.value,
idList: treeRef.value.treeRef.getCheckedNodes(false, true).map(node => node.id)
})
}, 1000)
}
onMounted(() => { onMounted(() => {
tableStore.index() tableStore.index()
}) })
const addMenu = () => {} const addRole = () => {
popupRef.value.open('新增角色')
}
</script> </script>
<style lang="scss">
.menu-index-header {
display: flex;
padding: 13px 15px;
align-items: center;
}
</style>

74
src/views/auth/role/popupForm.vue
View File

@@ -1,31 +1,14 @@
<template> <template>
<el-dialog class="cn-operate-dialog" v-model="dialogVisible" :title="title"> <el-dialog class="cn-operate-dialog" v-model="dialogVisible" :title="title">
<el-scrollbar> <el-scrollbar>
<el-form :inline="false" :model="form" label-width="120px"> <el-form :inline="false" :model="form" label-width="120px" :rules="rules">
<el-form-item label="上级菜单"> <el-form-item label="角色名称">
<el-cascader
v-model="form.pid"
:options="tableStore.table.data"
:props="cascaderProps"
style="width: 100%"
/>
</el-form-item>
<el-form-item label="菜单名称">
<el-input v-model="form.name" placeholder="请输入菜单名称" /> <el-input v-model="form.name" placeholder="请输入菜单名称" />
</el-form-item> </el-form-item>
<el-form-item label="图标"> <el-form-item label="角色编码">
<IconSelector v-model="form.icon" placeholder="请选择图标" /> <el-input v-model="form.code" placeholder="请输入菜单名称" />
</el-form-item> </el-form-item>
<el-form-item label="菜单路由"> <el-form-item label="角色描述">
<el-input v-model="form.path" placeholder="请输入菜单名称" />
</el-form-item>
<el-form-item label="组件路径">
<el-input v-model="form.routeName" placeholder="请输入组件路径，如/src/views/dashboard/index.vue" />
</el-form-item>
<el-form-item label="排序">
<el-input-number v-model="form.sort" :min="0" />
</el-form-item>
<el-form-item label="菜单描述">
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" /> <el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" />
</el-form-item> </el-form-item>
</el-form> </el-form>
@@ -43,33 +26,48 @@
import { ref, inject } from 'vue' import { ref, inject } from 'vue'
import { reactive } from 'vue' import { reactive } from 'vue'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
import IconSelector from '@/components/baInput/components/iconSelector.vue' import { ElMessage } from 'element-plus'
import { add, update } from '@/api/user-boot/role'
import { useAdminInfo } from '@/stores/adminInfo'
const adminInfo = useAdminInfo()
const tableStore = inject('tableStore') as TableStore const tableStore = inject('tableStore') as TableStore
const cascaderProps = {
label: 'title',
value: 'id'
}
// do not use same name with ref // do not use same name with ref
const form = reactive({ const form = reactive({
code: 'menu', code: '',
icon: '设备月保_设备日保', name: '',
id: '88c61dfd02fbdab02e3bf0753d487444', remark: '',
name: '系统配置', id: '',
path: '/app/setting',
pid: 'f517484e241c2fdd7f11a9c3fcaaa109',
remark: '系统配置',
routeName: null,
sort: 0,
type: 0 type: 0
}) })
const rules = {
name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
code: [{ required: true, message: '角色编码不能为空', trigger: 'blur' }]
}
const dialogVisible = ref(false) const dialogVisible = ref(false)
const title = ref('新增菜单') const title = ref('新增菜单')
const open = (text: string, data?: anyObj) => { const open = (text: string, data?: anyObj) => {
title.value = text title.value = text
dialogVisible.value = true dialogVisible.value = true
if (data) {
for (let key in form) {
form[key] = data[key]
} }
const submit = () => { } else {
for (let key in form) {
form[key] = ''
}
}
}
const submit = async () => {
if (form.id) {
await update(form)
} else {
form.type = adminInfo.$state.userType + 1
await add(form)
}
ElMessage.success('保存成功')
tableStore.index()
dialogVisible.value = false dialogVisible.value = false
} }

3
src/views/govern/manage/factory.vue
View File

@@ -145,6 +145,7 @@ import {
resetEquipmentDelivery resetEquipmentDelivery
} from '@/api/cs-system-boot/device' } from '@/api/cs-system-boot/device'
import html2canvas from 'html2canvas' import html2canvas from 'html2canvas'
import { fullUrl } from '@/utils/common'
defineOptions({ defineOptions({
name: 'govern/log/debug' name: 'govern/log/debug'
}) })
@@ -283,7 +284,7 @@ const tableStore = new TableStore({
click: row => { click: row => {
deivce.value = row deivce.value = row
deivce.value.qrPath = localStorage.getItem('STATIC_URL') + deivce.value.qrPath deivce.value.qrPath = fullUrl(deivce.value.qrPath)
setTimeout(() => { setTimeout(() => {
html2canvas(document.querySelector('.qrcode-label'), { html2canvas(document.querySelector('.qrcode-label'), {
useCORS: true useCORS: true

12
src/views/user/login.vue
View File

@@ -137,20 +137,12 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
imageCode: '', imageCode: '',
verifyCode: 0 verifyCode: 0
}).then(res => { }).then(res => {
// console.log('🚀 ~ file: login.vue:134 ~ gongkey ~ res:', res) userInfo.dataFill(res.data)
let DOMIN = window.location.origin
let STATIC_URL = DOMIN + '/api/system-boot/image/toStream?bgImage='
localStorage.setItem('STATIC_URL', STATIC_URL)
userInfo.setToken(res.data.token_type + ' ' + res.data.access_token, 'auth')
state.submitLoading = false state.submitLoading = false
router.push({ router.push({
path: 'admin/dashboard' path: '/'
}) })
}) })
// .catch(err => {
// state.submitLoading = false
// })
// state.submitLoading = false
}) })
setTimeout(() => { setTimeout(() => {
state.submitLoading = false state.submitLoading = false