xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完成用户管理、角色管理、菜单管理、部门管理

Browse Source
This commit is contained in:
橙子
2024-09-02 23:26:41 +08:00
parent bc83362b35
commit e886614641
17 changed files with 230 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

253
Yi.Pure.Vue3/src/views/system/menu/form.vue
View File

@@ -14,33 +14,25 @@ import {
keepAliveOptions,
hiddenTagOptions,
showParentOptions,
frameLoadingOptions
frameLoadingOptions,
isLinkOptions,
stateOptions
} from "./utils/enums";
const props = withDefaults(defineProps<FormProps>(), {
formInline: () => ({
menuType: 0,
higherMenuOptions: [],
parentId: 0,
parentId: "00000000-0000-0000-0000-000000000000",
menuName: "",
name: "",
router: "",
component: "",
orderNum: 99,
redirect: "",
orderNum: 0,
icon: "",
extraIcon: "",
enterTransition: "",
leaveTransition: "",
activePath: "",
permissionCode: "",
frameSrc: "",
frameLoading: true,
keepAlive: false,
hiddenTag: false,
fixedTag: false,
isShow: true,
showParent: false
isLink: false,
state: true
})
});
@@ -67,6 +59,7 @@ defineExpose({ getRef });
<Segmented
v-model="newFormInline.menuType"
:options="menuTypeOptions"
@change="changeSegmented"
/>
</el-form-item>
</re-col>
@@ -79,7 +72,7 @@ defineExpose({ getRef });
:options="newFormInline.higherMenuOptions"
:props="{
value: 'id',
label: 'title',
label: 'menuName',
emitPath: false,
checkStrictly: true
}"
@@ -94,9 +87,18 @@ defineExpose({ getRef });
</el-cascader>
</el-form-item>
</re-col>
<re-col
v-show="newFormInline.menuType !== 2"
:value="24"
:xs="24"
:sm="24"
>
<el-form-item label="菜单图标">
<IconSelect v-model="newFormInline.icon" class="w-full" />
</el-form-item>
</re-col>
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="菜单名称" prop="title">
<el-form-item label="菜单名称" prop="menuName">
<el-input
v-model="newFormInline.menuName"
clearable
@@ -104,27 +106,40 @@ defineExpose({ getRef });
/>
</el-form-item>
</re-col>
<re-col v-if="newFormInline.menuType !== 3" :value="12" :xs="24" :sm="24">
<el-form-item label="路由名称" prop="name">
<el-input
v-model="newFormInline.name"
clearable
placeholder="请输入路由名称"
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="菜单排序" prop="orderNum">
<el-input-number
v-model="newFormInline.orderNum"
class="!w-full"
:min="1"
:max="9999"
controls-position="right"
/>
</el-form-item>
</re-col>
<re-col v-if="newFormInline.menuType !== 3" :value="12" :xs="24" :sm="24">
<el-form-item label="路由路径" prop="router">
<el-input
v-model="newFormInline.router"
clearable
placeholder="请输入路由路径"
<re-col
v-show="newFormInline.menuType !== 2"
:value="12"
:xs="24"
:sm="24"
>
<el-form-item label="是否为外链">
<Segmented
:modelValue="newFormInline.isLink ? false : true"
:options="isLinkOptions"
@change="
({ option: { value } }) => {
newFormInline.isLink = value;
}
"
/>
</el-form-item>
</re-col>
<re-col
v-show="newFormInline.menuType === 0"
v-show="newFormInline.menuType === 1"
:value="12"
:xs="24"
:sm="24"
@@ -137,94 +152,21 @@ defineExpose({ getRef });
/>
</el-form-item>
</re-col>
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="菜单排序">
<el-input-number
v-model="newFormInline.rank"
class="!w-full"
:min="1"
:max="9999"
controls-position="right"
/>
</el-form-item>
</re-col>
<re-col
v-show="newFormInline.menuType === 0"
:value="12"
:xs="24"
:sm="24"
>
<el-form-item label="路由重定向">
<re-col v-if="newFormInline.menuType !== 2" :value="12" :xs="24" :sm="24">
<el-form-item label="路由路径" prop="router">
<el-input
v-model="newFormInline.redirect"
v-model="newFormInline.router"
clearable
placeholder="请输入默认跳转地址"
placeholder="请输入路由路径"
/>
</el-form-item>
</re-col>
<re-col
v-show="newFormInline.menuType !== 3"
:value="12"
:xs="24"
:sm="24"
>
<el-form-item label="菜单图标">
<IconSelect v-model="newFormInline.icon" class="w-full" />
</el-form-item>
</re-col>
<re-col
v-show="newFormInline.menuType !== 3"
:value="12"
:xs="24"
:sm="24"
>
<el-form-item label="右侧图标">
<el-input
v-model="newFormInline.extraIcon"
clearable
placeholder="菜单名称右侧的额外图标"
/>
</el-form-item>
</re-col>
<re-col v-show="newFormInline.menuType < 2" :value="12" :xs="24" :sm="24">
<el-form-item label="进场动画">
<ReAnimateSelector
v-model="newFormInline.enterTransition"
placeholder="请选择页面进场加载动画"
/>
</el-form-item>
</re-col>
<re-col v-show="newFormInline.menuType < 2" :value="12" :xs="24" :sm="24">
<el-form-item label="离场动画">
<ReAnimateSelector
v-model="newFormInline.leaveTransition"
placeholder="请选择页面离场加载动画"
/>
</el-form-item>
</re-col>
<re-col
v-show="newFormInline.menuType === 0"
:value="12"
:xs="24"
:sm="24"
>
<el-form-item label="菜单激活">
<el-input
v-model="newFormInline.activePath"
clearable
placeholder="请输入需要激活的菜单"
/>
</el-form-item>
</re-col>
<re-col v-if="newFormInline.menuType === 3" :value="12" :xs="24" :sm="24">
<re-col v-if="newFormInline.menuType !== 0" :value="12" :xs="24" :sm="24">
<!-- 按钮级别权限设置 -->
<el-form-item label="权限标识" prop="orderNum">
<el-form-item label="权限标识" prop="permissionCode">
<el-input
v-model="newFormInline.orderNum"
v-model="newFormInline.permissionCode"
clearable
placeholder="请输入权限标识"
/>
@@ -232,41 +174,12 @@ defineExpose({ getRef });
</re-col>
<re-col
v-show="newFormInline.menuType === 1"
v-show="newFormInline.menuType !== 'Component'"
:value="12"
:xs="24"
:sm="24"
>
<!-- iframe -->
<el-form-item label="链接地址">
<el-input
v-model="newFormInline.frameSrc"
clearable
placeholder="请输入 iframe 链接地址"
/>
</el-form-item>
</re-col>
<re-col v-if="newFormInline.menuType === 1" :value="12" :xs="24" :sm="24">
<el-form-item label="加载动画">
<Segmented
:modelValue="newFormInline.frameLoading ? 0 : 1"
:options="frameLoadingOptions"
@change="
({ option: { value } }) => {
newFormInline.frameLoading = value;
}
"
/>
</el-form-item>
</re-col>
<re-col
v-show="newFormInline.menuType !== 3"
:value="12"
:xs="24"
:sm="24"
>
<el-form-item label="菜单">
<el-form-item label="是否显示">
<Segmented
:modelValue="newFormInline.isShow ? false : true"
:options="showLinkOptions"
@@ -278,60 +191,14 @@ defineExpose({ getRef });
/>
</el-form-item>
</re-col>
<re-col
v-show="newFormInline.menuType !== 3"
:value="12"
:xs="24"
:sm="24"
>
<el-form-item label="父级菜单">
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="是否启用">
<Segmented
:modelValue="newFormInline.showParent ? 0 : 1"
:options="showParentOptions"
:modelValue="newFormInline.state ? false : true"
:options="stateOptions"
@change="
({ option: { value } }) => {
newFormInline.showParent = value;
}
"
/>
</el-form-item>
</re-col>
<re-col v-show="newFormInline.menuType < 2" :value="12" :xs="24" :sm="24">
<el-form-item label="缓存页面">
<Segmented
:modelValue="newFormInline.keepAlive ? 0 : 1"
:options="keepAliveOptions"
@change="
({ option: { value } }) => {
newFormInline.keepAlive = value;
}
"
/>
</el-form-item>
</re-col>
<re-col v-show="newFormInline.menuType < 2" :value="12" :xs="24" :sm="24">
<el-form-item label="标签页">
<Segmented
:modelValue="newFormInline.hiddenTag ? 1 : 0"
:options="hiddenTagOptions"
@change="
({ option: { value } }) => {
newFormInline.hiddenTag = value;
}
"
/>
</el-form-item>
</re-col>
<re-col v-show="newFormInline.menuType < 2" :value="12" :xs="24" :sm="24">
<el-form-item label="固定标签页">
<Segmented
:modelValue="newFormInline.fixedTag ? 0 : 1"
:options="fixedTagOptions"
@change="
({ option: { value } }) => {
newFormInline.fixedTag = value;
newFormInline.state = value;
}
"
/>

4
Yi.Pure.Vue3/src/views/system/menu/index.vue
View File

@@ -61,7 +61,7 @@ const {
</el-form>
<PureTableBar
title="菜单管理（仅演示，操作后不生效）"
title="菜单管理"
:columns="columns"
:isExpandAll="false"
:tableRef="tableRef?.getTableRef()"
@@ -118,7 +118,7 @@ const {
新增
</el-button>
<el-popconfirm
:title="`是否确认删除菜单名称为${transformI18n(row.title)}的这条数据${row?.children?.length > 0 ? '。注意下级菜单也会一并删除，请谨慎操作' : ''}`"
:title="`是否确认删除菜单名称为${transformI18n(row.menuName)}的这条数据${row?.children?.length > 0 ? '。注意下级菜单也会一并删除，请谨慎操作' : ''}`"
@confirm="handleDelete(row)"
>
<template #reference>

43
Yi.Pure.Vue3/src/views/system/menu/utils/enums.ts
View File

@@ -2,23 +2,42 @@ import type { OptionsType } from "@/components/ReSegmented";
const menuTypeOptions: Array<OptionsType> = [
{
label: "菜单",
value: 0
label: "目录",
value: "Catalogue"
},
{
label: "iframe",
value: 1
label: "菜单",
value: "Menu"
},
{
label: "组件",
value: "Component"
}
];
const stateOptions: Array<OptionsType> = [
{
label: "启用",
tip: "启用菜单",
value: true
},
{
label: "禁用",
tip: "禁用菜单",
value: false
}
];
const isLinkOptions: Array<OptionsType> = [
{
label: "非外链",
tip: "使用本地路由",
value: false
},
{
label: "外链",
value: 2
},
{
label: "按钮",
value: 3
tip: "链接到其他地址",
value: true
}
];
const showLinkOptions: Array<OptionsType> = [
{
label: "显示",
@@ -104,5 +123,7 @@ export {
keepAliveOptions,
hiddenTagOptions,
showParentOptions,
frameLoadingOptions
frameLoadingOptions,
isLinkOptions,
stateOptions
};

61
Yi.Pure.Vue3/src/views/system/menu/utils/hook.tsx
View File

@@ -1,13 +1,14 @@
import editForm from "../form.vue";
import { handleTree } from "@/utils/tree";
import { message } from "@/utils/message";
import { getListMenu } from "@/api/system/menu";
import { addMenu, delMenu, getListMenu, updateMenu } from "@/api/system/menu";
import { transformI18n } from "@/plugins/i18n";
import { addDialog } from "@/components/ReDialog";
import { reactive, ref, onMounted, h } from "vue";
import type { FormItemProps } from "../utils/types";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { cloneDeep, isAllEmpty, deviceDetection } from "@pureadmin/utils";
import { menuTypeOptions } from "@/views/system/menu/utils/enums";
export function useMenu() {
const form = reactive({
@@ -18,16 +19,14 @@ export function useMenu() {
const dataList = ref([]);
const loading = ref(true);
const getMenuType = (type, text = false) => {
const getMenuType = (type: string, text = false) => {
switch (type) {
case 0:
return text ? "菜单" : "primary";
case 1:
return text ? "iframe" : "warning";
case 2:
return text ? "外链" : "danger";
case 3:
return text ? "按钮" : "info";
case "Catalogue":
return text ? "目录" : "primary";
case "Menu":
return text ? "菜单" : "warning";
case "Component":
return text ? "组件" : "info";
}
};
@@ -129,33 +128,33 @@ export function useMenu() {
return newTreeList;
}
function openDialog(title = "新增", row?: FormItemProps) {
async function openDialog(title = "新增", row?: FormItemProps) {
// let data: any = null;
// if (title == "修改") {
// data = await getMenu(row.id);
// }
addDialog({
title: `${title}菜单`,
props: {
formInline: {
menuType: row?.menuType ?? 0,
menuName: row?.menuName ?? "",
menuType:
row?.menuType == undefined
? 0
: menuTypeOptions.findIndex(
option => option.value === row?.menuType
),
higherMenuOptions: formatHigherMenuOptions(cloneDeep(dataList.value)),
id: row?.id ?? "00000000-0000-0000-0000-000000000000",
parentId: row?.parentId ?? 0,
title: row?.menuName ?? "",
name: row?.name ?? "",
router: row?.router ?? "",
component: row?.component ?? "",
orderNum: row?.orderNum ?? 99,
redirect: row?.redirect ?? "",
orderNum: row?.orderNum ?? 0,
icon: row?.icon ?? "",
extraIcon: row?.extraIcon ?? "",
enterTransition: row?.enterTransition ?? "",
leaveTransition: row?.leaveTransition ?? "",
activePath: row?.activePath ?? "",
permissionCode: row?.permissionCode ?? "",
frameSrc: row?.frameSrc ?? "",
frameLoading: row?.frameLoading ?? true,
keepAlive: row?.keepAlive ?? false,
hiddenTag: row?.hiddenTag ?? false,
fixedTag: row?.fixedTag ?? false,
showLink: row?.isShow ?? true,
showParent: row?.showParent ?? false
isLink: row?.isLink ?? false,
state: row?.state ?? true
}
},
width: "45%",
@@ -177,15 +176,16 @@ export function useMenu() {
done(); // 关闭弹框
onSearch(); // 刷新表格数据
}
FormRef.validate(valid => {
FormRef.validate(async valid => {
if (valid) {
console.log("curData", curData);
// 表单规则校验通过
if (title === "新增") {
// 实际开发先调用新增接口，再进行下面操作
await addMenu(curData);
chores();
} else {
// 实际开发先调用修改接口，再进行下面操作
await updateMenu(row.id, curData);
chores();
}
}
@@ -194,8 +194,9 @@ export function useMenu() {
});
}
function handleDelete(row) {
message(`您删除了菜单名称为${transformI18n(row.title)}的这条数据`, {
async function handleDelete(row) {
await delMenu([row.id]);
message(`您删除了菜单名称为${transformI18n(row.menuName)}的这条数据`, {
type: "success"
});
onSearch();

1
Yi.Pure.Vue3/src/views/system/menu/utils/rule.ts
View File

@@ -6,6 +6,7 @@ export const formRules = reactive(<FormRules>{
menuName: [{ required: true, message: "菜单名称为必填项", trigger: "blur" }],
name: [{ required: true, message: "路由名称为必填项", trigger: "blur" }],
router: [{ required: true, message: "路由路径为必填项", trigger: "blur" }],
orderNum: [{ required: true, message: "菜单排序为必填项", trigger: "blur" }],
permissionCode: [
{ required: true, message: "权限标识为必填项", trigger: "blur" }
]

21
Yi.Pure.Vue3/src/views/system/menu/utils/types.ts
View File

@@ -1,27 +1,18 @@
interface FormItemProps {
/** 菜单类型（0代表菜单、1代表iframe、2代表外链、3代表按钮）*/
menuType: number;
/** 菜单类型（0目录、1代表菜单、2代表组件*/
id?: string;
menuType: number | string;
higherMenuOptions: Record<string, unknown>[];
parentId: number;
parentId: string;
menuName: string;
name: string;
router: string;
component: string;
orderNum: number;
redirect: string;
icon: string;
extraIcon: string;
enterTransition: string;
leaveTransition: string;
activePath: string;
permissionCode: string;
frameSrc: string;
frameLoading: boolean;
keepAlive: boolean;
hiddenTag: boolean;
fixedTag: boolean;
isShow: boolean;
showParent: boolean;
isLink: boolean;
state: boolean;
}
interface FormProps {
formInline: FormItemProps;