xinyin025/hotgo
1
0
Fork 0
mirror of https://github.com/bufanyun/hotgo.git synced 2025-11-13 20:53:49 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

发布代码生成、更新20+表单组件，优化数据字典，gf版本更新到2.3.1

Browse Source
This commit is contained in:
孟帅
2023-01-18 16:23:39 +08:00
parent 50207ded90
commit 87c27a17a3
386 changed files with 27926 additions and 44297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

338
web/src/views/permission/menu/menu.vue
View File

@@ -1,27 +1,16 @@
<template>
<div>
<div class="n-layout-page-header">
<n-card :bordered="false" title="菜单管理"> 在这里可以管理编辑系统下的所有菜单导航</n-card>
<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">
<n-button type="info" icon-placement="left" @click="openCreateDrawer">
<template #icon>
<div class="flex items-center">
<n-icon size="14">
@@ -31,7 +20,7 @@
</template>
添加菜单
</n-button>
<n-button type="info" ghost icon-placement="left" @click="packHandle">
<n-button type="primary" icon-placement="left" @click="packHandle">
全部{{ expandedKeys.length ? '收起' : '展开' }}
<template #icon>
<div class="flex items-center">
@@ -88,7 +77,6 @@
}}</span>
</n-space>
</template>
<!-- <n-alert type="info" closable> 从菜单列表选择一项后，进行编辑</n-alert>-->
<n-form
:model="formParams"
:rules="rules"
@@ -100,7 +88,7 @@
>
<n-divider title-placement="left">基本设置</n-divider>
<n-grid x-gap="24" :cols="2">
<n-grid cols="2 300:1 600:2">
<n-gi>
<n-form-item label="类型" path="type">
<n-radio-group v-model:value="formParams.type" name="type">
@@ -114,16 +102,7 @@
</n-form-item>
</n-gi>
<n-gi>
<n-form-item
:label="
formParams.type === 1
? '上级目录'
: formParams.type === 2
? '上级菜单'
: '上级按钮'
"
path="pid"
>
<n-form-item label="上级目录" path="pid">
<n-tree-select
:options="optionTreeData"
:value="formParams.pid"
@@ -133,7 +112,7 @@
</n-gi>
</n-grid>
<n-grid x-gap="24" :cols="2">
<n-grid cols="2 300:1 600:2">
<n-gi>
<n-form-item
:label="
@@ -145,132 +124,119 @@
"
path="title"
>
<n-input
:placeholder="
formParams.type === 1
? '目录名称'
: formParams.type === 2
? '菜单名称'
: '按钮名称'
"
v-model:value="formParams.title"
/>
<n-input placeholder="请输入" 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-gi v-if="formParams.type !== 3">
<n-form-item path="icon">
<IconSelector style="width: 100%" v-model:value="formParams.icon" option="antd" />
<template #label>
<n-tooltip trigger="hover">
<template #trigger>
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
</template>
请填写图标编码，可以参考图标库，也可以不填使用默认图标
</n-tooltip>
菜单图标</template
>
</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-grid cols="2 300:1 600:2">
<n-gi v-if="formParams.type !== 3">
<n-form-item path="path">
<n-input placeholder="路由地址" v-model:value="formParams.path" />
<template #label>
<n-tooltip trigger="hover">
<template #trigger>
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
</template>
请路由地址，如：user
</n-tooltip>
路由地址</template
>
</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-form-item path="name">
<n-input placeholder="路由别名" v-model:value="formParams.name" />
<template #label>
<n-tooltip trigger="hover">
<template #trigger>
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
</template>
对应路由配置文件中 `name` 只能是唯一性，配置 `http(s)://` 开头地址
则会新窗口打开
</n-tooltip>
路由别名</template
>
</n-form-item>
</n-gi>
</n-grid>
<n-grid x-gap="24" :cols="2">
<n-grid cols="2 300:1 600:2" v-if="formParams.type !== 3">
<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-form-item label="组件路径" path="component">
<n-input placeholder="组件路径" v-model:value="formParams.component" />
<template #feedback>
主目录填 `LAYOUT`;多级父目录填
`ParentLayout`;页面填具体的组件路径，如：`/system/menu/menu`</template
>
</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-gi v-if="formParams.type === 1">
<n-form-item label="默认跳转" path="redirect">
<n-input placeholder="默认路由跳转地址" v-model:value="formParams.redirect" />
<template #feedback
>默认跳转路由地址，如：`/system/menu/menu` 多级路由情况下适用</template
>
</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-grid cols="1 ">
<n-gi>
<n-form-item label="API权限" path="permissions">
<n-form-item label="分配权限" path="permissions">
<n-input
placeholder="请输入API权限，多个权限用,分割"
placeholder="请输入分配权限，多个权限用,分割"
v-model:value="formParams.permissions"
/>
<template #label>
<n-tooltip trigger="hover">
<template #trigger>
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
</template>
请填写API路由地址，可同时作用于服务端和web端。多个权限用,分割
</n-tooltip>
分配权限</template
>
</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-gi>-->
<!-- <n-form-item label="权限名称" path="permissionName">-->
<!-- <n-input placeholder="权限名称" v-model:value="formParams.permissionName" />-->
<!-- <template #feedback>分配权限存在多个时，权限名称只绑定到第一个权限</template>-->
<!-- </n-form-item>-->
<!-- </n-gi>-->
</n-grid>
<n-grid cols="2 300:1 600:2">
<n-gi v-if="formParams.type !== 3">
<n-form-item label="高亮路由" path="activeMenu">
<n-input placeholder="高亮路由" v-model:value="formParams.activeMenu" />
</n-form-item>
</n-gi>
<n-gi>
<n-form-item label="菜单排序" path="sort">
<n-input-number style="width: 100%" v-model:value="formParams.sort" clearable />
</n-form-item>
</n-gi>
</n-grid>
<n-grid x-gap="24" :cols="4">
<n-grid cols="4 300:1 400:2 600:3 800:4" v-if="formParams.type !== 3">
<n-gi>
<n-form-item label="根路由" path="isRoot">
<n-radio-group v-model:value="formParams.isRoot" name="isRoot">
@@ -321,19 +287,7 @@
</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-grid cols="4 300:1 400:2 600:3 800:4">
<n-gi>
<n-form-item label="状态" path="status">
<n-radio-group v-model:value="formParams.status" name="status">
@@ -346,8 +300,20 @@
</n-radio-group>
</n-form-item>
</n-gi>
<n-gi>
<n-form-item label="外部地址" path="frameSrc" v-show="formParams.isFrame === true">
<n-gi v-if="formParams.type !== 3">
<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 v-if="formParams.type !== 3">
<n-form-item label="外部地址" path="frameSrc" v-show="formParams.isFrame === 1">
<n-input placeholder="内联外部地址" v-model:value="formParams.frameSrc" />
</n-form-item>
</n-gi>
@@ -376,7 +342,7 @@
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, unref } from 'vue';
import { TreeSelectOption, useDialog, useMessage } from 'naive-ui';
import { FormItemRule, TreeSelectOption, useDialog, useMessage } from 'naive-ui';
import {
AlignLeftOutlined,
FormOutlined,
@@ -387,6 +353,9 @@
import { DeleteMenu, EditMenu, getMenuList } from '@/api/system/menu';
import { getTreeItem } from '@/utils';
import CreateDrawer from './CreateDrawer.vue';
import IconSelector from '@/components/IconSelector/index.vue';
import { State, newState } from '@/views/permission/menu/model';
import { validate } from '@/utils/validateUtil';
const menuTypes = [
{
@@ -407,7 +376,7 @@
const switchStatusMap = [
{
value: 0,
value: 2,
label: '关闭',
},
{
@@ -445,15 +414,25 @@
});
const rules = {
title: {
required: true,
message: '请输入名称',
trigger: 'blur',
},
label: {
required: true,
message: '请输入标题',
trigger: 'blur',
},
path: {
required: true,
message: '请输入路径',
required: false,
message: '请输入路由地址',
trigger: 'blur',
validator: function (_rule: FormItemRule, value: any, callback: Function) {
if (formParams.type != 3 && !value) {
callback(new Error('请输入路由地址'));
}
},
},
};
@@ -470,41 +449,9 @@
const treeItemTitle = ref('');
const pattern = ref('');
const drawerTitle = ref('');
const optionTreeData = ref([
{
id: 0,
key: 0,
label: '根目录',
pid: 0,
title: '根目录',
type: 1,
},
]);
const optionTreeData = ref<any>([]);
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,
});
const formParams = reactive<State>(newState(null));
function openCreateDrawer() {
drawerTitle.value = '添加菜单';
@@ -527,23 +474,16 @@
}
function handleDel() {
dialog.info({
dialog.warning({
title: '提示',
content: `您确定想删除此权限吗?`,
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 ?? '操作失败');
});
DeleteMenu({ ...formParams }).then(async (_res) => {
message.success('操作成功');
await loadData();
});
},
onNegativeClick: () => {
message.error('已取消');
@@ -559,17 +499,15 @@
function formSubmit() {
formRef.value.validate((errors: boolean) => {
if (!errors) {
console.log('formParams:' + JSON.stringify(formParams));
// message.error('抱歉，您没有该权限');
subLoading.value = true;
EditMenu({ ...formParams })
.then(async (_res) => {
console.log('_res:' + JSON.stringify(_res));
subLoading.value = false;
message.success('操作成功');
// handleReset();
await loadData();
})
.catch((e: Error) => {
message.error(e.message ?? '操作失败');
.catch((_e: Error) => {
subLoading.value = false;
});
} else {
message.error('请填写完整信息');
@@ -588,10 +526,9 @@
// 处理选项更新
function handleUpdateValue(
value: string | number | Array<string | number> | null,
option: TreeSelectOption | null | Array<TreeSelectOption | null>
_option: TreeSelectOption | null | Array<TreeSelectOption | null>
) {
formParams.pid = value;
console.log(value, option);
formParams.pid = value as number;
}
onMounted(async () => {
@@ -603,8 +540,17 @@
const keys = treeMenuList.list.map((item) => item.key);
Object.assign(formParams, keys);
treeData.value = [];
optionTreeData.value = [];
treeData.value = treeMenuList.list;
optionTreeData.value = [
{
id: 0,
key: 0,
label: '根目录',
pid: 0,
title: '根目录',
type: 1,
},
];
optionTreeData.value = optionTreeData.value.concat(treeMenuList.list);
loading.value = false;
}
@@ -612,8 +558,4 @@
function onExpandedKeys(keys) {
expandedKeys.value = keys;
}
const editConfirm = (val) => {
console.log(val);
};
</script>