Skip to content

Commit

Permalink
新增-系统设置-菜单权限-角色权限页面
Browse files Browse the repository at this point in the history
  • Loading branch information
@jekip
jekip committed Jul 20, 2021
1 parent 9542345 commit 54e68db
Show file tree
Hide file tree
Showing 7 changed files with 527 additions and 2 deletions.
39 changes: 39 additions & 0 deletions mock/system/role.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { resultSuccess, doCustomTimes } from '../_util'

const roleList = ((pageSize) => {
const result:any[] = []
doCustomTimes(pageSize,()=> {
result.push({
id: '@integer(10,100)',
name: '@cname()',
explain:'@cname()',
isDefault:'@boolean()',
create_date: `@date('yyyy-MM-dd')`,
'status|1': ['normal', 'enable', 'disable'],
});
})
return result
});


export default [
//表格数据列表
{
url: '/api/role/list',
timeout: 1000,
method: 'get',
response: ({ query }) => {
const { page = 1, pageSize = 10 } = query;
const list = roleList(Number(pageSize))
return resultSuccess({
page:Number(page),
pageSize:Number(pageSize),
pageCount: 60,
list
}
);
},
}
]


11 changes: 11 additions & 0 deletions src/api/system/role.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import http from '@/utils/http/axios'

/**
* @description: 角色列表
*/
export function getRoleList() {
return http.request({
url: '/role/list',
method: 'GET'
})
}
6 changes: 4 additions & 2 deletions src/plugins/naive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,8 @@ import {
NInputNumber,
NLoadingBarProvider,
NModal,
NUpload
NUpload,
NTree
} from 'naive-ui'

const naive = create({
Expand Down Expand Up @@ -124,7 +125,8 @@ const naive = create({
NInputNumber,
NLoadingBarProvider,
NModal,
NUpload
NUpload,
NTree
]
})

Expand Down
50 changes: 50 additions & 0 deletions src/router/modules/system.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import { RouteRecordRaw } from 'vue-router'
import { Layout } from '@/router/constant';
import { ToolOutlined } from '@vicons/antd'
import { OptionsSharp } from '@vicons/ionicons5'
import { renderIcon } from '@/utils/index'

/**
* @param name 路由名称, 必须设置,且不能重名
* @param meta 路由元信息（路由附带扩展信息）
* @param redirect 重定向地址, 访问这个路由时,自定进行重定向
* @param meta.disabled 禁用整个菜单
* @param meta.title 菜单名称
* @param meta.icon 菜单图标
* @param meta.keepAlive 缓存该路由
* @param meta.sort 排序越小越排前
*
* */
const routes: Array<RouteRecordRaw> = [
{
path: '/system',
name: 'System',
redirect: '/system/menu',
component: Layout,
meta: {
title: '系统设置',
icon: renderIcon(OptionsSharp),
sort: 1
},
children: [
{
path: 'menu',
name: 'system_menu',
meta: {
title: '菜单权限管理',
},
component: () => import('@/views/system/menu/menu.vue')
},
{
path: 'role',
name: 'system_role',
meta: {
title: '角色权限管理',
},
component: () => import('@/views/system/role/role.vue')
}
],
}
]

export default routes
196 changes: 196 additions & 0 deletions src/views/system/menu/menu.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@
<template>
<div>
<div class="n-layout-page-header">
<n-card :bordered="false" title="菜单权限管理">
页面数据为 Mock 示例数据，非真实数据。
</n-card>
</div>

<n-grid class="mt-4" cols="1 s:1 m:1 l:3 xl:3 2xl:3" responsive="screen" :x-gap="12">
<n-gi span="1">
<n-card :segmented="{ content: 'hard' }" :bordered="false" size="small">
<template #header>
<n-space>
<n-dropdown trigger="hover" :options="addMenuOptions">
<n-button type="info" ghost icon-placement="right">
添加菜单
<template #icon>
<div class="flex items-center">
<n-icon size="14">
<DownOutlined/>
</n-icon>
</div>
</template>
</n-button>
</n-dropdown>
<n-button type="info" ghost icon-placement="left">
全部收起
<template #icon>
<div class="flex items-center">
<n-icon size="14">
<AlignLeftOutlined/>
</n-icon>
</div>
</template>
</n-button>
</n-space>
</template>

<div class="w-full menu">
<n-input type="input" placeholder="输入菜单名称搜索">
<template #suffix>
<n-icon size="18" class="cursor-pointer">
<SearchOutlined/>
</n-icon>
</template>
</n-input>
<div class="py-3 menu-list">
<n-tree
block-line
cascade
checkable
:data="treeData"
:default-expanded-keys="defaultExpandedKeys"
/>
</div>
</div>

</n-card>
</n-gi>
<n-gi span="2">
<n-card :segmented="{ content: 'hard' }" :bordered="false" size="small">
<template #header>
<n-space>
<n-icon size="18">
<EditOutlined />
</n-icon>
编辑菜单
</n-space>
</template>
<n-alert type="info" closable>
从菜单列表选择一项后，进行编辑
</n-alert>
<n-form
:model="formParams"
:rules="rules"
ref="formRef"
label-placement="left"
:label-width="100"
>
<n-form-item label="类型" path="type">
<span>{{formParams.type}}</span>
</n-form-item>
<n-form-item label="标题" path="title">
<n-input placeholder="请输入标题" v-model:value="formParams.title" />
</n-form-item>
<n-form-item label="副标题" path="subTitle">
<n-input placeholder="请输入副标题" v-model:value="formParams.subTitle" />
</n-form-item>
<n-form-item label="路径" path="path">
<n-input placeholder="请输入路径" v-model:value="formParams.path" />
</n-form-item>
<n-form-item label="打开方式" path="openType">
<n-radio-group v-model:value="formParams.openType" name="openType">
<n-space>
<n-radio :value="1">当前窗口</n-radio>
<n-radio :value="2">新窗口</n-radio>
</n-space>
</n-radio-group>
</n-form-item>
<n-form-item label="菜单权限" path="auth">
<n-input placeholder="请输入权限，多个权限用，分割" v-model:value="formParams.auth" />
</n-form-item>
<n-form-item path="auth" style="margin-left: 100px">
<n-space>
<n-button type="primary">保存修改</n-button>
<n-button>重置</n-button>
</n-space>
</n-form-item>
</n-form>
</n-card>
</n-gi>
</n-grid>

</div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, } from 'vue'
import { useMessage } from 'naive-ui'
import { DownOutlined, AlignLeftOutlined, SearchOutlined, EditOutlined } from '@vicons/antd'
const rules = {
}
export default defineComponent({
components: { DownOutlined, AlignLeftOutlined, SearchOutlined, EditOutlined },
setup() {
const message = useMessage()
const state = reactive({
addMenuOptions: [
{
label: '添加顶级菜单',
key: 'home',
disabled: false
},
{
label: '添加子菜单',
key: 'son',
disabled: false
},
],
treeData: [
{
label: 'Dashboard',
key: 'dashboard',
children: [
{
label: '主控台',
key: 'console',
},
{
label: '工作台',
key: 'workplace',
}
]
},
{
label: '表单管理',
key: 'form',
children: [
{
label: '基础表单',
key: 'basic-form',
},
{
label: '分步表单',
key: 'step-form',
},
{
label: '表单详情',
key: 'detail',
}
]
}
],
defaultExpandedKeys: ref(['home', 'dashboard']),
formParams: {
type: '侧边栏菜单',
title: '工作台',
subTitle:'',
path:'/dashboard/workplace',
openType:1
},
})
return {
...toRefs(state),
rules
}
}
})
</script>
66 changes: 66 additions & 0 deletions src/views/system/role/columns.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import { h } from 'vue'
import { NTag, NButton } from 'naive-ui'

export const columns = [
{
title: 'id',
key: 'id'
},
{
title: '角色名称',
key: 'name'
},
{
title: '说明',
key: 'explain'
},
{
title: '是否默认角色',
key: 'isDefault',
render(row) {
return h(
NTag,
{
type: row.isDefault ? 'success' : 'error'
},
{
default: () => row.isDefault ? '是' : '否'
}
)
}
},
{
title: '创建时间',
key: 'create_date'
},
{
title: '操作',
key: 'actions',
width: 150,
//简单写一下例子，不建议这么写，过段时间，这里封二次封装
render() {
return [
h(
NButton,
{
size: 'small',
type: 'error',
style: 'margin-right:10px',
onClick: () => {
}
},
{ default: () => '删除' }
),
h(
NButton,
{
size: 'small',
onClick: () => {
}
},
{ default: () => '编辑' }
)
]
}
}
]
Loading

0 comments on commit 54e68db

Please sign in to comment.