xinyin025/hotgo
1
0
Fork 0
mirror of https://github.com/bufanyun/hotgo.git synced 2025-11-16 22:23:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

v2.0

Browse Source
This commit is contained in:
孟帅
2022-11-24 23:37:34 +08:00
parent 4ffe54b6ac
commit 29bda0dcdd
1487 changed files with 97869 additions and 96539 deletions
Download Patch File Download Diff File Expand all files Collapse all files

427
web/src/views/permission/menu/CreateDrawer.vue Normal file
View File

@@ -0,0 +1,427 @@
<template>
<n-drawer v-model:show="isDrawer" :width="width" :placement="placement">
<n-drawer-content :title="title" closable>
<n-form
:model="formParams"
:rules="rules"
ref="formRef"
label-placement="left"
:label-width="100"
>
<n-divider title-placement="left">基本设置</n-divider>
<n-form-item label="类型" path="type">
<n-radio-group v-model:value="formParams.type" name="type">
<n-radio-button
v-for="menuType in menuTypes"
:key="menuType.value"
:value="menuType.value"
:label="menuType.label"
/>
</n-radio-group>
</n-form-item>
<n-form-item
:label="
formParams.type === 1 ? '上级目录' : formParams.type === 2 ? '上级菜单' : '上级按钮'
"
path="pid"
>
<n-tree-select
:options="optionTreeData"
default-value="0"
@update:value="handleUpdateValue"
/>
</n-form-item>
<n-form-item
:label="
formParams.type === 1 ? '目录名称' : formParams.type === 2 ? '菜单名称' : '按钮名称'
"
path="title"
>
<n-input
:placeholder="
formParams.type === 1 ? '目录名称' : formParams.type === 2 ? '菜单名称' : '按钮名称'
"
v-model:value="formParams.title"
/>
</n-form-item>
<n-form-item label="" path="icon">
<div style="width: 120px">
<span>
<n-tooltip trigger="hover">
<template #trigger>
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
</template>
请填写图标编码，可以参考图标库，也可以不填使用默认图标
</n-tooltip>
<span>&nbsp;&nbsp;图标 </span>
</span>
</div>
<n-input placeholder="图标映射路径" v-model:value="formParams.icon" />
</n-form-item>
<n-form-item label="" path="path">
<div style="width: 120px">
<span>
<n-tooltip trigger="hover">
<template #trigger>
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
</template>
路由地址，如：user
</n-tooltip>
<span>&nbsp;&nbsp;路由地址 </span>
</span>
</div>
<n-input placeholder="路由地址" v-model:value="formParams.path" />
</n-form-item>
<n-form-item label="" path="name">
<div style="width: 120px">
<span>
<n-tooltip trigger="hover">
<template #trigger>
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
</template>
对应路由配置文件中 `name` 只能是唯一性，配置 `http(s)://` 开头地址 则会新窗口打开
</n-tooltip>
<span>&nbsp;&nbsp;路由别名 </span>
</span>
</div>
<n-input placeholder="路由别名" v-model:value="formParams.name" />
</n-form-item>
<n-form-item label="" path="component">
<div style="width: 120px">
<span>
<n-tooltip trigger="hover">
<template #trigger>
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
</template>
访问的组件路径，如：`/system/menu/menu`，默认在`views`目录下，默认 `LAYOUT`
如果是多级菜单 `ParentLayout`
</n-tooltip>
<span>&nbsp;&nbsp;组件路径 </span>
</span>
</div>
<n-input placeholder="组件路径" v-model:value="formParams.component" />
</n-form-item>
<n-form-item label="" path="redirect" v-show="formParams.type === 1">
<div style="width: 120px">
<span>
<n-tooltip trigger="hover">
<template #trigger>
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
</template>
默认跳转路由地址，如：`/system/menu/menu` 多级路由情况下适用
</n-tooltip>
<span>&nbsp;&nbsp;默认跳转 </span>
</span>
</div>
<n-input placeholder="默认路由跳转地址" v-model:value="formParams.redirect" />
</n-form-item>
<n-divider title-placement="left">功能设置</n-divider>
<n-form-item label="API权限" path="permissions">
<n-input
placeholder="请输入API权限，多个权限用,分割"
v-model:value="formParams.permissions"
/>
</n-form-item>
<!-- <n-form-item label="权限名称" path="permissionName">-->
<!-- <n-input placeholder="权限名称" v-model:value="formParams.permissionName" />-->
<!-- </n-form-item>-->
<n-form-item label="高亮路由" path="activeMenu">
<n-input placeholder="高亮路由" v-model:value="formParams.activeMenu" />
</n-form-item>
<n-form-item label="排序" path="sort">
<n-input-number v-model:value="formParams.sort" clearable />
</n-form-item>
<n-grid x-gap="24" :cols="2">
<n-gi>
<n-form-item label="根路由" path="isRoot">
<n-radio-group v-model:value="formParams.isRoot" name="isRoot">
<n-radio-button
v-for="switchStatus in switchStatusMap"
:key="switchStatus.value"
:value="switchStatus.value"
:label="switchStatus.label"
/>
</n-radio-group>
</n-form-item>
</n-gi>
<n-gi>
<n-form-item label="简化路由" path="alwaysShow">
<n-radio-group v-model:value="formParams.alwaysShow" name="alwaysShow">
<n-radio-button
v-for="switchStatus in switchStatusMap"
:key="switchStatus.value"
:value="switchStatus.value"
:label="switchStatus.label"
/>
</n-radio-group>
</n-form-item>
</n-gi>
</n-grid>
<n-grid x-gap="24" :cols="2">
<n-gi>
<n-form-item label="缓存路由" path="keepAlive">
<n-radio-group v-model:value="formParams.keepAlive" name="keepAlive">
<n-radio-button
v-for="switchStatus in switchStatusMap"
:key="switchStatus.value"
:value="switchStatus.value"
:label="switchStatus.label"
/>
</n-radio-group>
</n-form-item>
</n-gi>
<n-gi>
<n-form-item label="是否隐藏" path="hidden">
<n-radio-group v-model:value="formParams.hidden" name="hidden">
<n-radio-button
v-for="hidden in hiddenMap"
:key="hidden.value"
:value="hidden.value"
:label="hidden.label"
/>
</n-radio-group>
</n-form-item>
</n-gi>
</n-grid>
<n-grid x-gap="24" :cols="2">
<n-gi>
<n-form-item label="是否外链" path="isFrame">
<n-radio-group v-model:value="formParams.isFrame" name="isFrame">
<n-radio-button
v-for="switchStatus in switchStatusMap"
:key="switchStatus.value"
:value="switchStatus.value"
:label="switchStatus.label"
/>
</n-radio-group>
</n-form-item>
</n-gi>
<n-gi>
<n-form-item label="状态" path="status">
<n-radio-group v-model:value="formParams.status" name="status">
<n-radio-button
v-for="status in statusMap"
:key="status.value"
:value="status.value"
:label="status.label"
/>
</n-radio-group>
</n-form-item>
</n-gi>
</n-grid>
<n-grid x-gap="24" :cols="2">
<n-gi>
<n-form-item label="外部地址" path="frameSrc" v-show="formParams.isFrame === true">
<n-input placeholder="内联外部地址" v-model:value="formParams.frameSrc" />
</n-form-item>
</n-gi>
<n-gi />
</n-grid>
</n-form>
<template #footer>
<n-space>
<n-button type="primary" :loading="subLoading" @click="formSubmit">提交</n-button>
<n-button @click="handleReset">重置</n-button>
</n-space>
</template>
</n-drawer-content>
</n-drawer>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
import { TreeSelectOption, useMessage } from 'naive-ui';
import { QuestionCircleOutlined } from '@vicons/antd';
import { EditMenu } from '@/api/system/menu';
const menuTypes = [
{
value: 1,
label: '目录',
},
{
value: 2,
label: '菜单',
},
{
value: 3,
label: '按钮',
},
].map((s) => {
return s;
});
const switchStatusMap = [
{
value: 0,
label: '关闭',
},
{
value: 1,
label: '开启',
},
].map((s) => {
return s;
});
const statusMap = [
{
value: 0,
label: '禁用',
},
{
value: 1,
label: '启用',
},
].map((s) => {
return s;
});
const hiddenMap = [
{
value: 0,
label: '否',
},
{
value: 1,
label: '是',
},
].map((s) => {
return s;
});
const rules = {
label: {
required: true,
message: '请输入标题',
trigger: 'blur',
},
path: {
required: true,
message: '请输入路径',
trigger: 'blur',
},
};
export default defineComponent({
name: 'CreateDrawer',
components: {},
props: {
title: {
type: String,
default: '添加顶级菜单',
},
optionTreeData: {
type: Object,
// eslint-disable-next-line vue/require-valid-default-prop
default: [],
},
},
emits: ['loadData'],
setup(_props, context) {
const message = useMessage();
const formRef: any = ref(null);
const defaultValueRef = () => ({
id: 0,
pid: 0,
title: '',
name: '',
path: '',
label: '',
icon: '',
type: 1,
redirect: '',
permissions: '',
permissionName: '',
component: '',
alwaysShow: 1,
activeMenu: '',
isRoot: 0,
isFrame: 0,
frameSrc: '',
keepAlive: 0,
hidden: 0,
affix: 0,
status: 1,
sort: 10,
});
const state = reactive({
width: 700,
isDrawer: false,
subLoading: false,
formParams: defaultValueRef(),
placement: 'right',
icon: '',
alertText:
'该功能主要实时预览各种布局效果，更多完整配置在 projectSetting.ts 中设置，建议在生产环境关闭该布局预览功能。',
});
function openDrawer() {
if (document.body.clientWidth < 700) {
state.width = document.body.clientWidth;
}
state.isDrawer = true;
}
function closeDrawer() {
state.isDrawer = false;
}
function formSubmit() {
formRef.value.validate((errors) => {
if (!errors) {
console.log('state.formParams:' + JSON.stringify(state.formParams));
EditMenu({ ...state.formParams })
.then(async (_res) => {
console.log('_res:' + JSON.stringify(_res));
message.success('操作成功');
handleReset();
await context.emit('loadData');
closeDrawer();
})
.catch((e: Error) => {
message.error(e.message ?? '操作失败');
});
} else {
message.error('请填写完整信息');
}
});
}
function handleReset() {
formRef.value.restoreValidation();
state.formParams = Object.assign(state.formParams, defaultValueRef());
}
// 处理选项更新
function handleUpdateValue(
value: string | number | Array<string | number> | null,
option: TreeSelectOption | null | Array<TreeSelectOption | null>
) {
console.log(value, option);
state.formParams.pid = value;
}
return {
...toRefs(state),
formRef,
rules,
formSubmit,
handleReset,
openDrawer,
closeDrawer,
menuTypes,
switchStatusMap,
statusMap,
hiddenMap,
handleUpdateValue,
QuestionCircleOutlined,
};
},
});
</script>

619
web/src/views/permission/menu/menu.vue Normal file
View File

@@ -0,0 +1,619 @@
<template>
<div>
<div class="n-layout-page-header">
<n-card :bordered="false" title="菜单管理"> 在这里可以管理编辑系统下的所有菜单导航</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: true }" :bordered="false" size="small">
<template #header>
<n-space>
<!-- <n-dropdown trigger="hover" @select="selectAddMenu" :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" @click="openCreateDrawer">
<template #icon>
<div class="flex items-center">
<n-icon size="14">
<PlusOutlined />
</n-icon>
</div>
</template>
添加菜单
</n-button>
<n-button type="info" ghost icon-placement="left" @click="packHandle">
全部{{ expandedKeys.length ? '收起' : '展开' }}
<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" v-model:value="pattern" placeholder="输入菜单名称搜索">
<template #suffix>
<n-icon size="18" class="cursor-pointer">
<SearchOutlined />
</n-icon>
</template>
</n-input>
<div class="py-3 menu-list">
<template v-if="loading">
<div class="flex items-center justify-center py-4">
<n-spin size="medium" />
</div>
</template>
<template v-else>
<n-tree
block-line
cascade
checkable
:virtual-scroll="true"
:pattern="pattern"
:data="treeData"
:expandedKeys="expandedKeys"
style="max-height: 650px; overflow: hidden"
@update:selected-keys="selectedTree"
@update:expanded-keys="onExpandedKeys"
/>
</template>
</div>
</div>
</n-card>
</n-gi>
<n-gi span="2">
<n-card :segmented="{ content: true }" :bordered="false" size="small">
<template #header>
<n-space>
<n-icon size="18">
<FormOutlined />
</n-icon>
<span>编辑菜单{{ treeItemTitle ? `：${treeItemTitle}` : '' }}</span>
<span style="font-size: 14px">{{
treeItemTitle ? '' : '从菜单列表选择一项后，进行编辑'
}}</span>
</n-space>
</template>
<!-- <n-alert type="info" closable> 从菜单列表选择一项后，进行编辑</n-alert>-->
<n-form
:model="formParams"
:rules="rules"
ref="formRef"
label-placement="left"
:label-width="100"
v-if="isEditMenu"
class="py-4"
>
<n-divider title-placement="left">基本设置</n-divider>
<n-grid x-gap="24" :cols="2">
<n-gi>
<n-form-item label="类型" path="type">
<n-radio-group v-model:value="formParams.type" name="type">
<n-radio-button
v-for="menuType in menuTypes"
:key="menuType.value"
:value="menuType.value"
:label="menuType.label"
/>
</n-radio-group>
</n-form-item>
</n-gi>
<n-gi>
<n-form-item
:label="
formParams.type === 1
? '上级目录'
: formParams.type === 2
? '上级菜单'
: '上级按钮'
"
path="pid"
>
<n-tree-select
:options="optionTreeData"
:value="formParams.pid"
@update:value="handleUpdateValue"
/>
</n-form-item>
</n-gi>
</n-grid>
<n-grid x-gap="24" :cols="2">
<n-gi>
<n-form-item
:label="
formParams.type === 1
? '目录名称'
: formParams.type === 2
? '菜单名称'
: '按钮名称'
"
path="title"
>
<n-input
:placeholder="
formParams.type === 1
? '目录名称'
: formParams.type === 2
? '菜单名称'
: '按钮名称'
"
v-model:value="formParams.title"
/>
</n-form-item>
</n-gi>
<n-gi>
<n-form-item label="" path="icon">
<div style="width: 120px">
<span>
<n-tooltip trigger="hover">
<template #trigger>
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
</template>
请填写图标编码，可以参考图标库，也可以不填使用默认图标
</n-tooltip>
<span>&nbsp;&nbsp;图标 </span>
</span>
</div>
<n-input placeholder="图标映射路径" v-model:value="formParams.icon" />
</n-form-item>
</n-gi>
</n-grid>
<n-grid x-gap="24" :cols="2">
<n-gi>
<n-form-item label="" path="path">
<div style="width: 120px">
<span>
<n-tooltip trigger="hover">
<template #trigger>
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
</template>
路由地址，如：user
</n-tooltip>
<span>&nbsp;&nbsp;路由地址 </span>
</span>
</div>
<n-input placeholder="路由地址" v-model:value="formParams.path" />
</n-form-item>
</n-gi>
<n-gi>
<n-form-item label="" path="name">
<div style="width: 120px">
<span>
<n-tooltip trigger="hover">
<template #trigger>
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
</template>
对应路由配置文件中 `name` 只能是唯一性，配置 `http(s)://` 开头地址
则会新窗口打开
</n-tooltip>
<span>&nbsp;&nbsp;路由别名 </span>
</span>
</div>
<n-input placeholder="路由别名" v-model:value="formParams.name" />
</n-form-item>
</n-gi>
</n-grid>
<n-grid x-gap="24" :cols="2">
<n-gi>
<n-form-item label="" path="component">
<div style="width: 120px">
<span>
<n-tooltip trigger="hover">
<template #trigger>
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
</template>
访问的组件路径，如：`/system/menu/menu`，默认在`views`目录下，默认 `LAYOUT`
如果是多级菜单 `ParentLayout`
</n-tooltip>
<span>&nbsp;&nbsp;组件路径 </span>
</span>
</div>
<n-input placeholder="组件路径" v-model:value="formParams.component" />
</n-form-item>
</n-gi>
<n-gi>
<n-form-item label="" path="redirect">
<div style="width: 120px">
<span>
<n-tooltip trigger="hover">
<template #trigger>
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
</template>
默认跳转路由地址，如：`/system/menu/menu` 多级路由情况下适用
</n-tooltip>
<span>&nbsp;&nbsp;默认跳转 </span>
</span>
</div>
<n-input placeholder="默认路由跳转地址" v-model:value="formParams.redirect" />
</n-form-item>
</n-gi>
</n-grid>
<n-divider title-placement="left">功能设置</n-divider>
<n-form-item label="排序" path="sort">
<n-input-number v-model:value="formParams.sort" clearable />
</n-form-item>
<n-grid x-gap="24" :cols="2">
<n-gi>
<n-form-item label="API权限" path="permissions">
<n-input
placeholder="请输入API权限，多个权限用,分割"
v-model:value="formParams.permissions"
/>
</n-form-item>
</n-gi>
<n-gi>
<!-- <n-form-item label="权限名称" path="permissionName">-->
<!-- <n-input placeholder="权限名称" v-model:value="formParams.permissionName" />-->
<!-- </n-form-item>-->
<n-form-item label="高亮路由" path="activeMenu">
<n-input placeholder="高亮路由" v-model:value="formParams.activeMenu" />
</n-form-item>
</n-gi>
</n-grid>
<n-grid x-gap="24" :cols="4">
<n-gi>
<n-form-item label="根路由" path="isRoot">
<n-radio-group v-model:value="formParams.isRoot" name="isRoot">
<n-radio-button
v-for="switchStatus in switchStatusMap"
:key="switchStatus.value"
:value="switchStatus.value"
:label="switchStatus.label"
/>
</n-radio-group>
</n-form-item>
</n-gi>
<n-gi>
<n-form-item label="简化路由" path="alwaysShow">
<n-radio-group v-model:value="formParams.alwaysShow" name="alwaysShow">
<n-radio-button
v-for="switchStatus in switchStatusMap"
:key="switchStatus.value"
:value="switchStatus.value"
:label="switchStatus.label"
/>
</n-radio-group>
</n-form-item>
</n-gi>
<n-gi>
<n-form-item label="缓存路由" path="keepAlive">
<n-radio-group v-model:value="formParams.keepAlive" name="keepAlive">
<n-radio-button
v-for="switchStatus in switchStatusMap"
:key="switchStatus.value"
:value="switchStatus.value"
:label="switchStatus.label"
/>
</n-radio-group>
</n-form-item>
</n-gi>
<n-gi>
<n-form-item label="是否隐藏" path="hidden">
<n-radio-group v-model:value="formParams.hidden" name="hidden">
<n-radio-button
v-for="hidden in hiddenMap"
:key="hidden.value"
:value="hidden.value"
:label="hidden.label"
/>
</n-radio-group>
</n-form-item>
</n-gi>
</n-grid>
<n-grid x-gap="24" :cols="4">
<n-gi>
<n-form-item label="是否外链" path="isFrame">
<n-radio-group v-model:value="formParams.isFrame" name="isFrame">
<n-radio-button
v-for="switchStatus in switchStatusMap"
:key="switchStatus.value"
:value="switchStatus.value"
:label="switchStatus.label"
/>
</n-radio-group>
</n-form-item>
</n-gi>
<n-gi>
<n-form-item label="状态" path="status">
<n-radio-group v-model:value="formParams.status" name="status">
<n-radio-button
v-for="status in statusMap"
:key="status.value"
:value="status.value"
:label="status.label"
/>
</n-radio-group>
</n-form-item>
</n-gi>
<n-gi>
<n-form-item label="外部地址" path="frameSrc" v-show="formParams.isFrame === true">
<n-input placeholder="内联外部地址" v-model:value="formParams.frameSrc" />
</n-form-item>
</n-gi>
</n-grid>
<n-form-item path="auth" style="margin-left: 100px">
<n-space>
<n-button type="primary" :loading="subLoading" @click="formSubmit"
>保存修改
</n-button>
<n-button @click="handleReset">重置</n-button>
<n-button @click="handleDel">删除</n-button>
</n-space>
</n-form-item>
</n-form>
</n-card>
</n-gi>
</n-grid>
<CreateDrawer
ref="createDrawerRef"
:title="drawerTitle"
:optionTreeData="optionTreeData"
@loadData="loadData"
/>
</div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, unref } from 'vue';
import { TreeSelectOption, useDialog, useMessage } from 'naive-ui';
import {
AlignLeftOutlined,
FormOutlined,
PlusOutlined,
QuestionCircleOutlined,
SearchOutlined,
} from '@vicons/antd';
import { DeleteMenu, EditMenu, getMenuList } from '@/api/system/menu';
import { getTreeItem } from '@/utils';
import CreateDrawer from './CreateDrawer.vue';
const menuTypes = [
{
value: 1,
label: '目录',
},
{
value: 2,
label: '菜单',
},
{
value: 3,
label: '按钮',
},
].map((s) => {
return s;
});
const switchStatusMap = [
{
value: 0,
label: '关闭',
},
{
value: 1,
label: '开启',
},
].map((s) => {
return s;
});
const statusMap = [
{
value: 0,
label: '禁用',
},
{
value: 1,
label: '启用',
},
].map((s) => {
return s;
});
const hiddenMap = [
{
value: 0,
label: '否',
},
{
value: 1,
label: '是',
},
].map((s) => {
return s;
});
const rules = {
label: {
required: true,
message: '请输入标题',
trigger: 'blur',
},
path: {
required: true,
message: '请输入路径',
trigger: 'blur',
},
};
const formRef: any = ref(null);
const createDrawerRef = ref();
const message = useMessage();
const dialog = useDialog();
let treeItemKey = ref([]);
let expandedKeys = ref([]);
const treeData = ref([]);
const loading = ref(true);
const subLoading = ref(false);
const isEditMenu = ref(false);
const treeItemTitle = ref('');
const pattern = ref('');
const drawerTitle = ref('');
const optionTreeData = ref([
{
id: 0,
key: 0,
label: '根目录',
pid: 0,
title: '根目录',
type: 1,
},
]);
const formParams = reactive({
id: 0,
pid: 0,
title: '',
name: '',
path: '',
label: '',
icon: '',
type: 1,
redirect: '',
permissions: '',
permissionName: '',
component: '',
alwaysShow: 1,
activeMenu: '',
isRoot: 0,
isFrame: 0,
frameSrc: '',
keepAlive: 0,
hidden: 0,
affix: 0,
status: 1,
sort: 10,
});
function openCreateDrawer() {
drawerTitle.value = '添加菜单';
const { openDrawer } = createDrawerRef.value;
openDrawer();
}
function selectedTree(keys) {
if (keys.length) {
const treeItem = getTreeItem(unref(treeData), keys[0]);
treeItemKey.value = keys;
treeItemTitle.value = treeItem.label;
Object.assign(formParams, treeItem);
isEditMenu.value = true;
} else {
isEditMenu.value = false;
treeItemKey.value = [];
treeItemTitle.value = '';
}
}
function handleDel() {
dialog.info({
title: '提示',
content: `您确定想删除此权限吗?`,
positiveText: '确定',
negativeText: '取消',
onPositiveClick: () => {
console.log('DeleteMenu formParams:' + JSON.stringify(formParams));
DeleteMenu({ ...formParams })
.then(async (_res) => {
console.log('_res:' + JSON.stringify(_res));
message.success('操作成功');
// handleReset();
await loadData();
})
.catch((e: Error) => {
message.error(e.message ?? '操作失败');
});
},
onNegativeClick: () => {
message.error('已取消');
},
});
}
function handleReset() {
const treeItem = getTreeItem(unref(treeData), treeItemKey.value[0]);
Object.assign(formParams, treeItem);
}
function formSubmit() {
formRef.value.validate((errors: boolean) => {
if (!errors) {
console.log('formParams:' + JSON.stringify(formParams));
// message.error('抱歉，您没有该权限');
EditMenu({ ...formParams })
.then(async (_res) => {
console.log('_res:' + JSON.stringify(_res));
message.success('操作成功');
// handleReset();
await loadData();
})
.catch((e: Error) => {
message.error(e.message ?? '操作失败');
});
} else {
message.error('请填写完整信息');
}
});
}
function packHandle() {
if (expandedKeys.value.length) {
expandedKeys.value = [];
} else {
expandedKeys.value = unref(treeData).map((item: any) => item.key as string) as [];
}
}
// 处理选项更新
function handleUpdateValue(
value: string | number | Array<string | number> | null,
option: TreeSelectOption | null | Array<TreeSelectOption | null>
) {
formParams.pid = value;
console.log(value, option);
}
onMounted(async () => {
await loadData();
});
async function loadData() {
const treeMenuList = await getMenuList();
const keys = treeMenuList.list.map((item) => item.key);
Object.assign(formParams, keys);
treeData.value = [];
optionTreeData.value = [];
treeData.value = treeMenuList.list;
optionTreeData.value = optionTreeData.value.concat(treeMenuList.list);
loading.value = false;
}
function onExpandedKeys(keys) {
expandedKeys.value = keys;
}
const editConfirm = (val) => {
console.log(val);
};
</script>

36
web/src/views/permission/role/columns.ts Normal file
View File

@@ -0,0 +1,36 @@
import { h } from 'vue';
import { NTag } from 'naive-ui';
export const columns = [
{
title: 'id',
key: 'id',
},
{
title: '角色名称',
key: 'name',
},
{
title: '说明',
key: 'remark',
},
{
title: '是否默认角色',
key: 'isDefault',
render(row) {
return h(
NTag,
{
type: row.id == 1 ? 'success' : 'error',
},
{
default: () => (row.id == 1 ? '是' : '否'),
}
);
},
},
{
title: '创建时间',
key: 'createdAt',
},
];

355
web/src/views/permission/role/role.vue Normal file
View File

@@ -0,0 +1,355 @@
<template>
<div>
<div class="n-layout-page-header">
<n-card :bordered="false" title="角色管理"> 在这里可以管理你权限下的角色权限</n-card>
</div>
<n-card :bordered="false" class="mt-4 proCard">
<BasicTable
:columns="columns"
:request="loadDataTable"
:row-key="(row) => row.id"
ref="actionRef"
:actionColumn="actionColumn"
@update:checked-row-keys="onCheckedRow"
>
<template #tableTitle>
<n-button type="primary" @click="addTable">
<template #icon>
<n-icon>
<PlusOutlined />
</n-icon>
</template>
添加角色
</n-button>
</template>
<template #action>
<TableAction />
</template>
</BasicTable>
</n-card>
<n-modal v-model:show="showModal" :show-icon="false" preset="dialog" :title="editRoleTitle">
<div class="py-3 menu-list">
<n-tree
block-line
cascade
checkable
:virtual-scroll="true"
:data="treeData"
:expandedKeys="expandedKeys"
:checked-keys="checkedKeys"
style="max-height: 950px; overflow: hidden"
@update:checked-keys="checkedTree"
@update:expanded-keys="onExpandedKeys"
/>
</div>
<template #action>
<n-space>
<n-button type="info" ghost icon-placement="left" @click="packHandle">
全部{{ expandedKeys.length ? '收起' : '展开' }}
</n-button>
<n-button type="info" ghost icon-placement="left" @click="checkedAllHandle">
全部{{ checkedAll ? '取消' : '选择' }}
</n-button>
<n-button type="primary" :loading="formBtnLoading" @click="confirmForm">提交</n-button>
</n-space>
</template>
</n-modal>
<n-modal v-model:show="showModal2" :show-icon="false" preset="dialog" title="添加角色">
<n-form
:model="formParams"
:rules="rules"
ref="formRef"
label-placement="left"
:label-width="80"
class="py-4"
>
<n-form-item label="角色名称" path="name">
<n-input placeholder="请输入名称" v-model:value="formParams.name" />
</n-form-item>
<n-form-item label="权限编码" path="key">
<n-input placeholder="请输入" v-model:value="formParams.key" />
</n-form-item>
<n-form-item label="排序" path="sort">
<n-input-number v-model:value="formParams.sort" clearable />
</n-form-item>
<n-form-item label="状态" path="status">
<n-radio-group v-model:value="formParams.status" name="status">
<n-radio-button
v-for="status in statusOptions"
:key="status.value"
:value="status.value"
:label="status.label"
/>
</n-radio-group>
</n-form-item>
<n-form-item label="备注" path="remark">
<n-input type="textarea" placeholder="请输入" v-model:value="formParams.remark" />
</n-form-item>
</n-form>
<template #action>
<n-space>
<n-button @click="() => (showModal2 = false)">取消</n-button>
<n-button type="info" :loading="formBtnLoading2" @click="confirmForm2">确定</n-button>
</n-space>
</template>
</n-modal>
</div>
</template>
<script lang="ts" setup>
import { h, onMounted, reactive, ref, unref } from 'vue';
import { useDialog, useMessage } from 'naive-ui';
import { BasicTable, TableAction } from '@/components/Table';
import { Delete, Edit, GetPermissions, getRoleList, UpdatePermissions } from '@/api/system/role';
import { getMenuList } from '@/api/system/menu';
import { columns } from './columns';
import { PlusOutlined } from '@vicons/antd';
import { getTreeAll } from '@/utils';
import { useRouter } from 'vue-router';
import { statusOptions } from '@/enums/optionsiEnum';
import { copyObj } from '@/utils/array';
const router = useRouter();
const formRef: any = ref(null);
const message = useMessage();
const actionRef = ref();
const dialog = useDialog();
const showModal2 = ref(false);
const showModal = ref(false);
const formBtnLoading = ref(false);
const formBtnLoading2 = ref(false);
const checkedAll = ref(false);
const editRoleTitle = ref('');
const treeData = ref([]);
const expandedKeys = ref([]);
const checkedKeys = ref([]);
const updatePermissionsParams = ref({});
const rules = {
name: {
required: true,
trigger: ['blur', 'input'],
message: '请输入名称',
},
address: {
required: true,
trigger: ['blur', 'input'],
message: '请输入地址',
},
date: {
type: 'number',
required: true,
trigger: ['blur', 'change'],
message: '请选择日期',
},
};
let formParams = reactive({
id: 0,
name: '',
key: '',
remark: null,
status: 1,
sort: 0,
dataScope: 0,
deptCheckStrictly: 0,
menuCheckStrictly: 0,
});
const params = reactive({
pageSize: 5,
name: 'xiaoMa',
});
const actionColumn = reactive({
width: 250,
title: '操作',
key: 'action',
fixed: 'right',
render(record) {
return h(TableAction, {
style: 'button',
actions: [
{
label: '菜单权限',
onClick: handleMenuAuth.bind(null, record),
// 根据业务控制是否显示 isShow 和 auth 是并且关系
ifShow: () => {
// console.log('ifShow record:'+JSON.stringify(record))
return record.key !== 'super';
},
// 根据权限控制是否显示: 有权限，会显示，支持多个
// auth: ['basic_list'],
},
{
label: '编辑',
onClick: handleEdit.bind(null, record),
ifShow: () => {
return record.key !== 'super';
},
// auth: ['basic_list'],
},
{
label: '删除',
// icon: 'ic:outline-delete-outline',
onClick: handleDelete.bind(null, record),
// 根据业务控制是否显示 isShow 和 auth 是并且关系
ifShow: () => {
return record.key !== 'super';
},
// 根据权限控制是否显示: 有权限，会显示，支持多个
// auth: ['basic_list'],
},
],
});
},
});
const loadDataTable = async (res: any) => {
let _params = {
...unref(params),
...res,
};
return await getRoleList(_params);
};
function onCheckedRow(rowKeys: any[]) {
console.log(rowKeys);
}
function reloadTable() {
actionRef.value.reload();
}
function confirmForm(e: any) {
console.log('checkedKeys.value:' + JSON.stringify(checkedKeys.value));
console.log('updatePermissionsParams.value:' + JSON.stringify(updatePermissionsParams.value));
e.preventDefault();
formBtnLoading.value = true;
UpdatePermissions({
...{
id: updatePermissionsParams.value.id,
menuIds:
checkedKeys.value === undefined || checkedKeys.value == null ? [] : checkedKeys.value,
},
})
.then((_res) => {
console.log('_res:' + JSON.stringify(_res));
message.success('操作成功');
reloadTable();
showModal.value = false;
formBtnLoading.value = false;
})
.catch((e: Error) => {
message.error(e.message ?? '操作失败');
});
}
function confirmForm2(e) {
e.preventDefault();
formBtnLoading2.value = true;
formRef.value.validate((errors) => {
if (!errors) {
console.log('formParams:' + JSON.stringify(formParams));
Edit(formParams)
.then((_res) => {
console.log('_res:' + JSON.stringify(_res));
message.success('操作成功');
setTimeout(() => {
showModal2.value = false;
reloadTable();
});
})
.catch((e: Error) => {
message.error(e.message ?? '操作失败');
});
} else {
message.error('请填写完整信息');
}
formBtnLoading2.value = false;
});
}
function addTable() {
showModal2.value = true;
}
function handleEdit(record: Recordable) {
console.log('点击了编辑', record);
showModal2.value = true;
formParams = copyObj(formParams, record);
}
function handleDelete(record: Recordable) {
console.log('点击了删除', record);
dialog.warning({
title: '警告',
content: '你确定要删除？',
positiveText: '确定',
negativeText: '不确定',
onPositiveClick: () => {
Delete(record)
.then((_res) => {
console.log('_res:' + JSON.stringify(_res));
message.success('操作成功');
reloadTable();
})
.catch((e: Error) => {
message.error(e.message ?? '操作失败');
});
},
onNegativeClick: () => {
// message.error('不确定');
},
});
}
async function handleMenuAuth(record: Recordable) {
editRoleTitle.value = `分配 ${record.name} 的菜单权限`;
const data = await GetPermissions({ ...{ id: record.id } });
console.log('data:' + JSON.stringify(data));
checkedKeys.value = data.menuIds; //record.menu_keys;
updatePermissionsParams.value.id = record.id;
showModal.value = true;
}
function checkedTree(keys) {
checkedKeys.value = keys;
}
function onExpandedKeys(keys) {
expandedKeys.value = keys;
}
function packHandle() {
if (expandedKeys.value.length) {
expandedKeys.value = [];
} else {
expandedKeys.value = treeData.value.map((item: any) => item.key) as [];
}
}
function checkedAllHandle() {
if (!checkedAll.value) {
checkedKeys.value = getTreeAll(treeData.value);
checkedAll.value = true;
} else {
checkedKeys.value = [];
checkedAll.value = false;
}
}
onMounted(async () => {
const treeMenuList = await getMenuList();
expandedKeys.value = treeMenuList.list.map((item) => item.key);
treeData.value = treeMenuList.list;
});
</script>
<style lang="less" scoped></style>