twh_eastasia/pure-admin-thin
1
0
Fork 0
mirror of https://github.com/pure-admin/pure-admin-thin.git synced 2025-04-25 07:57:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 新增菜单功能

Browse Source
This commit is contained in:
valarchie 2023-07-22 17:16:51 +08:00
parent 5ae73339c0
commit 6719fd8290
11 changed files with 700 additions and 287 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/api/system/dept.ts
View File

@ -1,6 +1,7 @@
import { http } from "@/utils/http";
export interface DeptQuery extends BaseQuery {
// TODO 目前不需要这个参数
deptId?: number;
parentId?: number;
}

117
src/api/system/menu.ts Normal file
View File

@ -0,0 +1,117 @@
import { http } from "@/utils/http";
export interface MenuQuery {
isButton: boolean;
}
/**
* MenuDTO
*/
export interface MenuDTO {
createTime?: Date;
isButton?: number;
id?: number;
menuName?: string;
parentId?: number;
menuType: number;
menuTypeStr: string;
path?: string;
permission?: string;
routerName?: string;
status?: number;
statusStr?: string;
}
/**
* MenuDetailDTO
*/
export interface MenuDetailDTO extends MenuDTO {
meta: MetaDTO;
permission?: string;
}
/**
* AddMenuCommand
*/
export interface MenuRequest {
id: number;
parentId: number;
menuName: string;
routerName?: string;
path?: string;
permission?: string;
status: number;
isButton: boolean;
menuType: number;
meta: MetaDTO;
}
/**
* MetaDTO
*/
export interface MetaDTO {
auths?: string[];
dynamicLevel?: number;
extraIcon?: ExtraIconDTO;
frameLoading?: boolean;
frameSrc?: string;
hiddenTag?: boolean;
icon?: string;
isFrameSrcInternal?: boolean;
keepAlive?: boolean;
rank?: number;
roles?: string[];
showLink?: boolean;
showParent?: boolean;
title?: string;
transition?: TransitionDTO;
}
/**
* ExtraIconDTO
*/
export interface ExtraIconDTO {
name?: string;
svg?: boolean;
}
/**
* TransitionDTO
*/
export interface TransitionDTO {
enterTransition?: string;
leaveTransition?: string;
name?: string;
}
/** 获取菜单列表 */
export const getMenuListApi = (params: MenuQuery) => {
return http.request<ResponseData<Array<MenuDTO>>>("get", "/system/menus", {
params
});
};
/** 添加菜单 */
export const addMenuApi = (data: MenuRequest) => {
return http.request<ResponseData<void>>("post", "/system/menus", { data });
};
/** 修改菜单 */
export const updateMenuApi = (menuId: string, data: MenuRequest) => {
return http.request<ResponseData<void>>("put", `/system/menus/${menuId}`, {
data
});
};
/** 删除菜单 */
export const deleteMenuApi = (menuId: string) => {
return http.request<ResponseData<void>>("delete", `/system/menus/${menuId}`);
};
/** 菜单详情 */
export const getMenuInfoApi = (menuId: string) => {
return http.request<ResponseData<MenuDetailDTO>>(
"get",
`/system/menus/${menuId}`
);
};

10
src/utils/common.ts
View File

@ -2,6 +2,7 @@ import { PaginationProps, TableColumn } from "@pureadmin/table";
import { Sort } from "element-plus";
import { utils, writeFile } from "xlsx";
import { message } from "./message";
import { pinyin } from "pinyin-pro";
export class CommonUtils {
static getBeginTimeSafely(timeRange: string[]): string {
@ -126,6 +127,15 @@ export class CommonUtils {
return paginatedList;
}
static toPinyin(chineseStr: string): string {
if (chineseStr == null || chineseStr === undefined || chineseStr === "") {
return chineseStr;
}
const pinyinStr = pinyin(chineseStr, { toneType: "none" });
return pinyinStr.replace(/\s/g, "");
}
// 私有构造函数，防止类被实例化
private constructor() {}
}

19
src/utils/tree.ts
View File

@ -126,6 +126,25 @@ export const appendFieldByUniqueId = (
return tree;
};
/**
* 根据返回数据的status字段值判断追加是否禁用disabled字段，返回处理后的树结构，用于上级部门级联选择器的展示
*（实际开发中也是如此，不可能前端需要的每个字段后端都会返回，这时需要前端自行根据后端返回的某些字段做逻辑处理）
* 这个是pure作者留下的例子， 也可以通过设置disabled 对应的字段来实现 比如disabled: 'status' (需要后端的字段为true/false)
* @param treeList
* @param field 根据哪个字段来设置disabled
* @returns
*/
export function setDisabledForTreeOptions(treeList, field) {
if (!treeList || !treeList.length) return;
const newTreeList = [];
for (let i = 0; i < treeList.length; i++) {
treeList[i].disabled = treeList[i][field] === 0 ? true : false;
setDisabledForTreeOptions(treeList[i].children, field);
newTreeList.push(treeList[i]);
}
return newTreeList;
}
/**
* @description 构造树型结构数据
* @param data 数据源

3
src/views/monitor/server/index.vue
View File

@ -1,6 +1,7 @@
<template>
<!-- v-loading指令 可以直接调用Loading动画 -->
<div class="main" v-loading="loading">
<!-- 注意template和div之间 不要加注释 会导致后续的页面渲染空白 -->
<!-- v-loading指令 可以直接调用Loading动画 -->
<el-row :gutter="30">
<el-col :span="12" class="card-box">
<el-card>

26
src/views/system/dept/utils/hook.tsx
View File

@ -1,6 +1,6 @@
import dayjs from "dayjs";
import editForm from "../form.vue";
import { handleTree } from "@/utils/tree";
import { setDisabledForTreeOptions, handleTree } from "@/utils/tree";
import { message } from "@/utils/message";
import {
DeptDTO,
@ -29,14 +29,14 @@ export function useHook() {
let filterDataList = [...originalDataList.value];
if (!isAllEmpty(searchFormParams.deptName)) {
// 前端搜索部门名称
filterDataList = filterDataList.filter(item =>
filterDataList = filterDataList.filter((item: DeptDTO) =>
item.deptName.includes(searchFormParams.deptName)
);
}
if (!isAllEmpty(searchFormParams.status)) {
// 前端搜索状态
filterDataList = filterDataList.filter(
item => item.status === searchFormParams.status
(item: DeptDTO) => item.status === searchFormParams.status
);
}
// 处理成树结构
@ -109,24 +109,6 @@ export function useHook() {
originalDataList.value = data;
}
/**
* 根据返回数据的status字段值判断追加是否禁用disabled字段，返回处理后的树结构，用于上级部门级联选择器的展示
*（实际开发中也是如此，不可能前端需要的每个字段后端都会返回，这时需要前端自行根据后端返回的某些字段做逻辑处理）
* 这个是作者留下的例子， 也可以通过设置disabled 对应的字段来实现 比如disabled: 'status' (需要后端的字段为true/false)
* @param treeList
* @returns
*/
function setDisabledForTreeOptions(treeList) {
if (!treeList || !treeList.length) return;
const newTreeList = [];
for (let i = 0; i < treeList.length; i++) {
treeList[i].disabled = treeList[i].status === 0 ? true : false;
setDisabledForTreeOptions(treeList[i].children);
newTreeList.push(treeList[i]);
}
return newTreeList;
}
async function handleAdd(row, done) {
await addDeptApi(row).then(() => {
message(`您新增了部门:${row.deptName}`, {
@ -153,7 +135,7 @@ export function useHook() {
async function openDialog(title = "新增", row?: DeptDTO) {
const { data } = await getDeptListApi();
const treeList = setDisabledForTreeOptions(handleTree(data));
const treeList = setDisabledForTreeOptions(handleTree(data), "status");
if (title === "编辑") {
row = (await getDeptInfoApi(row.id + "")).data;

215
src/views/system/menu/form.vue Normal file
View File

@ -0,0 +1,215 @@
<script setup lang="ts">
import { ref, computed } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
import { usePublicHooks } from "../hooks";
import { MenuRequest } from "@/api/system/menu";
interface FormProps {
formInline: MenuRequest;
higherMenuOptions: any[];
}
// TODO 为什么这里设置的rank: 1是不生效的,而hook那边定义的才能生效 到底需不需要 这个withDefaults
const props = withDefaults(defineProps<FormProps>(), {
formInline: () => ({
id: 0,
parentId: 0,
menuName: "",
routerName: "",
path: "",
status: 1,
isButton: undefined,
permission: "",
menuType: undefined,
meta: {}
}),
higherMenuOptions: () => []
});
const ruleFormRef = ref();
const { switchStyle } = usePublicHooks();
const newFormInline = ref(props.formInline);
const deptOptions = ref(props.higherMenuOptions);
const typeName = computed(() => {
return newFormInline.value.isButton ? "按钮" : "菜单";
});
function getRef() {
return ruleFormRef.value;
}
defineExpose({ getRef });
</script>
<template>
<el-form
ref="ruleFormRef"
:model="newFormInline"
:rules="formRules"
label-width="82px"
>
<el-row :gutter="30">
<re-col>
<el-form-item label="父菜单">
<el-cascader
class="w-full"
v-model="newFormInline.parentId"
:options="deptOptions"
:props="{
value: 'id',
label: 'menuName',
emitPath: false,
checkStrictly: true
}"
clearable
placeholder="请选择父菜单（不选则为根目录菜单）"
/>
<!-- 这种写法可以自定义选项的内容 比如括号后面加上子节点的数字 -->
<!-- <template #default="{ node, data }">
<span>{{ data.deptName }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template> -->
<!-- </el-cascader> -->
</el-form-item>
</re-col>
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="类型">
<el-radio-group
v-model="newFormInline.isButton"
:disabled="newFormInline.id !== 0"
>
<el-radio :label="false">菜单</el-radio>
<el-radio :label="true">按钮</el-radio>
</el-radio-group>
</el-form-item>
</re-col>
<template v-if="newFormInline.isButton === false">
<re-col :value="24">
<el-form-item label="菜单类型">
<el-radio-group
v-model="newFormInline.menuType"
:disabled="newFormInline.id !== 0"
>
<el-radio :label="1">页面</el-radio>
<el-radio :label="2">目录</el-radio>
<el-radio :label="3">内嵌Iframe</el-radio>
<el-radio :label="4">外链跳转</el-radio>
</el-radio-group>
</el-form-item>
</re-col>
</template>
</el-row>
<el-row :gutter="30">
<re-col :value="12" :xs="24" :sm="24">
<el-form-item :label="`${typeName}名称`" prop="menuName">
<el-input
v-model="newFormInline.menuName"
clearable
:placeholder="`请输入${typeName}名称`"
/>
</el-form-item>
</re-col>
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="权限标识" prop="permission">
<template v-slot:label>
<el-tooltip content="这是权限标识" placement="top">
<span>权限标识</span>
</el-tooltip>
</template>
<el-input
v-model="newFormInline.permission"
clearable
placeholder="请输入权限标识"
/>
</el-form-item>
</re-col>
</el-row>
<el-row v-if="newFormInline.isButton === false" :gutter="30">
<template v-if="newFormInline.menuType == 1">
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="页面路径" prop="path">
<el-input
v-model="newFormInline.path"
clearable
placeholder="请输入前端项目views文件内的页面路径"
/>
</el-form-item>
</re-col>
<re-col :value="12">
<el-form-item label="组件名">
<el-input
v-model="newFormInline.routerName"
clearable
placeholder="请输入组件定义的name，defineOptions中的name"
/>
</el-form-item>
</re-col>
</template>
<template v-else-if="newFormInline.menuType == 2">
<re-col :value="24" :xs="24" :sm="24">
<el-form-item label="路由地址" prop="path">
<el-input
v-model="newFormInline.path"
clearable
placeholder="请输入目录的路由地址以/开头"
/>
</el-form-item>
</re-col>
</template>
<template v-else-if="newFormInline.menuType == 3">
<re-col :value="24" :xs="24" :sm="24">
<el-form-item label="网站地址" prop="meta.frameSrc">
<el-input
v-model="newFormInline.meta.frameSrc"
clearable
placeholder="请输入外部网站地址或者内部网站相对地址"
/>
</el-form-item>
</re-col>
</template>
<template v-else-if="newFormInline.menuType == 4">
<re-col :value="24" :xs="24" :sm="24">
<el-form-item label="网站地址" prop="routerName">
<!-- 这里需要做拦截处理 -->
<el-input
v-model="newFormInline.routerName"
clearable
placeholder="请输入外部网站地址，必须以https://或者http://开头"
/>
</el-form-item>
</re-col>
</template>
</el-row>
<el-row>
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="排序">
<el-input-number
v-model="newFormInline.meta.rank"
:min="0"
:max="999"
controls-position="right"
/>
</el-form-item>
</re-col>
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="状态">
<el-switch
v-model="newFormInline.status"
inline-prompt
:active-value="1"
:inactive-value="0"
active-text="启用"
inactive-text="停用"
:style="switchStyle"
/>
</el-form-item>
</re-col>
</el-row>
</el-form>
</template>

136
src/views/system/menu/index.vue
View File

@ -1,71 +1,49 @@
<script setup lang="ts">
import { ref } from "vue";
import { useLoginLogHook } from "./utils/hook";
import { useHook } from "./utils/hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";
import { useUserStoreHook } from "@/store/modules/user";
// TODO 这个导入声明好长 看看如何优化
import { CommonUtils } from "@/utils/common";
import AddFill from "@iconify-icons/ri/add-circle-line";
/** 组件name最好和菜单表中的router_name一致 */
defineOptions({
name: "SystemOperationLog"
name: "SystemMenu"
});
const loginLogStatusList =
useUserStoreHook().dictionaryList["sysLoginLog.status"];
const formRef = ref();
const tableRef = ref();
const searchFormRef = ref();
const {
searchFormParams,
pageLoading,
loading,
columns,
dataList,
pagination,
timeRange,
defaultSort,
multipleSelection,
onSearch,
resetForm,
exportAllExcel,
getLoginLogList,
handleDelete,
handleBulkDelete
} = useLoginLogHook();
openDialog,
handleDelete
} = useHook();
</script>
<template>
<div class="main">
<!-- 搜索栏 -->
<el-form
ref="searchFormRef"
ref="formRef"
:inline="true"
:model="searchFormParams"
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
>
<el-form-item label="登录IP：" prop="ipAddress">
<el-form-item label="菜单名称：" prop="menuName">
<el-input
v-model="searchFormParams.ipAddress"
placeholder="请输入IP地址"
v-model="searchFormParams.menuName"
placeholder="请输入菜单名称"
clearable
class="!w-[200px]"
/>
</el-form-item>
<el-form-item label="用户名：" prop="username">
<el-input
v-model="searchFormParams.username"
placeholder="请选择用户名称"
clearable
class="!w-[200px]"
/>
</el-form-item>
<el-form-item label="状态：" prop="status">
<el-select
v-model="searchFormParams.status"
@ -73,94 +51,72 @@ const {
clearable
class="!w-[180px]"
>
<el-option
v-for="dict in loginLogStatusList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
<el-option label="启用" :value="1" />
<el-option label="停用" :value="0" />
</el-select>
</el-form-item>
<el-form-item>
<label class="el-form-item__label is-required font-bold"
>登录时间：</label
>
<!-- TODO 如何消除这个v-model的warning -->
<el-date-picker
class="!w-[240px]"
v-model="timeRange"
value-format="YYYY-MM-DD"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
:icon="useRenderIcon(Search)"
:loading="pageLoading"
:loading="loading"
@click="onSearch"
>
搜索
</el-button>
<el-button
:icon="useRenderIcon(Refresh)"
@click="resetForm(searchFormRef, tableRef)"
>
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
重置
</el-button>
</el-form-item>
</el-form>
<!-- table bar 包裹 table -->
<PureTableBar title="登录日志列表" :columns="columns" @refresh="onSearch">
<!-- 表格操作栏 -->
<PureTableBar
title="菜单列表"
:columns="columns"
:tableRef="tableRef?.getTableRef()"
@refresh="onSearch"
>
<template #buttons>
<el-button
type="danger"
:icon="useRenderIcon(Delete)"
@click="handleBulkDelete(tableRef)"
>
批量删除
</el-button>
<el-button
type="primary"
@click="CommonUtils.exportExcel(columns, dataList, '登录日志列表')"
>单页导出</el-button
:icon="useRenderIcon(AddFill)"
@click="openDialog()"
>
<el-button type="primary" @click="exportAllExcel">全部导出</el-button>
新增菜单
</el-button>
</template>
<template v-slot="{ size, dynamicColumns }">
<pure-table
border
ref="tableRef"
adaptive
:adaptiveConfig="{ offsetBottom: 32 }"
align-whole="center"
row-key="id"
showOverflowTooltip
table-layout="auto"
:loading="pageLoading"
:loading="loading"
:size="size"
adaptive
:data="dataList"
:columns="dynamicColumns"
:default-sort="defaultSort"
:pagination="pagination"
:paginationSmall="size === 'small' ? true : false"
:header-cell-style="{
background: 'var(--el-table-row-hover-bg-color)',
color: 'var(--el-text-color-primary)'
}"
@page-size-change="getLoginLogList"
@page-current-change="getLoginLogList"
@sort-change="getLoginLogList"
@selection-change="
rows => (multipleSelection = rows.map(item => item.logId))
"
>
<template #operation="{ row }">
<el-button
class="reset-margin"
link
type="primary"
:size="size"
:icon="useRenderIcon(EditPen)"
@click="openDialog('编辑', row)"
>
编辑
</el-button>
<el-popconfirm
:title="`是否确认删除编号为${row.logId}的这条日志`"
:title="`是否确认删除菜单名称为${row.menuName}的这条数据`"
@confirm="handleDelete(row)"
>
<template #reference>
@ -182,11 +138,7 @@ const {
</div>
</template>
<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
margin: 0;
}
<style lang="scss" scoped>
.search-form {
:deep(.el-form-item) {
margin-bottom: 12px;

361
src/views/system/menu/utils/hook.tsx
View File

@ -1,234 +1,251 @@
import dayjs from "dayjs";
import editForm from "../form.vue";
import { handleTree, setDisabledForTreeOptions } from "@/utils/tree";
import { message } from "@/utils/message";
import { ElMessageBox, Sort } from "element-plus";
import { transferToStandardRouterData } from "./menuLogic";
import {
getLoginLogListApi,
deleteLoginLogApi,
exportLoginLogExcelApi,
LoginLogQuery
} from "@/api/system/log";
import { reactive, ref, onMounted, toRaw } from "vue";
import { useUserStoreHook } from "@/store/modules/user";
import { CommonUtils } from "@/utils/common";
import { PaginationProps } from "@pureadmin/table";
MenuDTO,
MenuRequest,
getMenuListApi,
addMenuApi,
deleteMenuApi,
getMenuInfoApi,
updateMenuApi,
MenuDetailDTO
} from "@/api/system/menu";
import { usePublicHooks } from "../../hooks";
import { addDialog } from "@/components/ReDialog";
import { reactive, ref, onMounted, h, computed } from "vue";
import { isAllEmpty } from "@pureadmin/utils";
const loginLogStatusMap =
useUserStoreHook().dictionaryMap["sysLoginLog.status"];
export function useLoginLogHook() {
const defaultSort: Sort = {
prop: "loginTime",
order: "descending"
};
const pagination: PaginationProps = {
total: 0,
pageSize: 10,
currentPage: 1,
background: true
};
const timeRange = ref([]);
const searchFormParams = reactive<LoginLogQuery>({
ipAddress: undefined,
username: undefined,
status: undefined,
beginTime: undefined,
endTime: undefined,
timeRangeColumn: defaultSort.prop
export function useHook() {
const searchFormParams = reactive({
menuName: "",
status: null
});
const dataList = ref([]);
const pageLoading = ref(true);
const multipleSelection = ref([]);
const formRef = ref();
const originalDataList = ref([]);
const dataList = computed(() => {
let filterDataList = [...originalDataList.value];
if (!isAllEmpty(searchFormParams.menuName)) {
// 前端搜索菜单名称
filterDataList = filterDataList.filter((item: MenuDTO) =>
item.menuName.includes(searchFormParams.menuName)
);
}
if (!isAllEmpty(searchFormParams.status)) {
// 前端搜索状态
filterDataList = filterDataList.filter(
(item: MenuDTO) => item.status === searchFormParams.status
);
}
// 处理成树结构
return [...handleTree(filterDataList)];
});
const loading = ref(true);
const { tagStyle } = usePublicHooks();
const columns: TableColumnList = [
{
type: "selection",
label: "菜单名称",
prop: "menuName",
width: 200,
align: "left"
},
{
label: "日志编号",
prop: "logId",
minWidth: 100
label: "页面路径",
prop: "path",
minWidth: 170
},
{
label: "用户名",
prop: "username",
minWidth: 120,
sortable: "custom"
},
{
label: "IP地址",
prop: "ipAddress",
minWidth: 120
},
{
label: "登录地点",
prop: "loginLocation",
minWidth: 120
},
{
label: "操作系统",
prop: "operationSystem",
minWidth: 120
},
{
label: "浏览器",
prop: "browser",
minWidth: 120
label: "路由名称",
prop: "routerName",
width: 160,
align: "center"
},
{
label: "状态",
prop: "status",
minWidth: 120,
minWidth: 100,
cellRenderer: ({ row, props }) => (
<el-tag
size={props.size}
type={loginLogStatusMap[row.status].cssTag}
effect="plain"
>
{loginLogStatusMap[row.status].label}
<el-tag size={props.size} style={tagStyle.value(row.status)}>
{row.status === 1 ? "启用" : "停用"}
</el-tag>
)
},
{
label: "状态名",
prop: "statusStr",
minWidth: 120,
hide: true
label: "类型",
prop: "isButton",
minWidth: 100,
formatter: ({ isButton }) => (isButton ? "按钮" : "菜单")
},
{
label: "登录时间",
minWidth: 160,
prop: "loginTime",
sortable: "custom",
formatter: ({ loginTime }) =>
dayjs(loginTime).format("YYYY-MM-DD HH:mm:ss")
label: "子类型",
prop: "menuTypeStr",
minWidth: 100
},
{
label: "排序",
prop: "rank",
minWidth: 70
},
{
label: "创建时间",
minWidth: 200,
prop: "createTime",
formatter: ({ createTime }) =>
dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
},
{
label: "操作",
fixed: "right",
width: 140,
width: 240,
slot: "operation"
}
];
async function onSearch() {
// 点击搜索的时候 需要重置分页
pagination.currentPage = 1;
getLoginLogList();
}
function resetForm(formEl, tableRef) {
function resetForm(formEl) {
if (!formEl) return;
// 清空查询参数
formEl.resetFields();
// 清空排序
searchFormParams.orderColumn = undefined;
searchFormParams.orderDirection = undefined;
// 清空时间查询 TODO 这块有点繁琐 有可以优化的地方吗？
// Form组件的resetFields方法无法清除datepicker里面的数据。
timeRange.value = [];
searchFormParams.beginTime = undefined;
searchFormParams.endTime = undefined;
tableRef.getTableRef().clearSort();
// 重置分页并查询
onSearch();
}
async function getLoginLogList(sort: Sort = defaultSort) {
pageLoading.value = true;
if (sort != null) {
CommonUtils.fillSortParams(searchFormParams, sort);
}
CommonUtils.fillPaginationParams(searchFormParams, pagination);
CommonUtils.fillTimeRangeParams(searchFormParams, timeRange.value);
const { data } = await getLoginLogListApi(toRaw(searchFormParams)).finally(
() => {
pageLoading.value = false;
}
);
dataList.value = data.rows;
pagination.total = data.total;
async function onSearch() {
loading.value = true;
// 这里是返回一维数组结构，前端自行处理成树结构，返回格式要求：唯一id加父节点parentId，parentId取父节点id
const { data } = await getMenuListApi({ isButton: null }).finally(() => {
loading.value = false;
});
originalDataList.value = data;
}
async function exportAllExcel(sort: Sort = defaultSort) {
if (sort != null) {
CommonUtils.fillSortParams(searchFormParams, sort);
}
CommonUtils.fillPaginationParams(searchFormParams, pagination);
CommonUtils.fillTimeRangeParams(searchFormParams, timeRange.value);
exportLoginLogExcelApi(toRaw(searchFormParams), "登录日志.xls");
}
async function handleDelete(row) {
await deleteLoginLogApi([row.logId]).then(() => {
message(`您删除了操作编号为${row.logId}的这条数据`, {
/**
* 测试用例
* 1.添加外链跳转菜单
* 2.添加iframe菜单 外链+内链
* 3.添加目录
* 4.添加一级菜单
* 5.添加按钮
* 6.iframe和外链跳转不允许添加按钮
* 7.只允许目录添加子菜单
* 8.基于目录 测试以上1~5的步骤
* @param row dialog表单数据
* @param done
*/
async function handleAdd(row, done) {
await addMenuApi(row).then(() => {
message(`您新增了菜单:${row.menuName}`, {
type: "success"
});
// 关闭弹框
done();
// 刷新列表
getLoginLogList();
onSearch();
});
}
async function handleBulkDelete(tableRef) {
if (multipleSelection.value.length === 0) {
message("请选择需要删除的数据", { type: "warning" });
return;
/**
* 测试用例
* 1.编辑页面/目录/iframe/外链/按钮的数据
* 2.更换父级菜单
* 3.不允许改变类型(会导致逻辑变复杂，比如改变类型需要考虑子节点)
* @param row
* @param done
*/
async function handleUpdate(row, done) {
await updateMenuApi(row.id, row).then(() => {
message(`您更新了菜单:${row.menuName}`, {
type: "success"
});
// 关闭弹框
done();
// 刷新列表
onSearch();
});
}
async function openDialog(title = "新增", row?: MenuDTO) {
// 下拉选项需要排除掉按钮
const { data } = await getMenuListApi({ isButton: false });
const optionTree = setDisabledForTreeOptions(handleTree(data), "status");
let meta = undefined;
if (title === "编辑") {
row = (await getMenuInfoApi(row.id + "")).data;
meta = (row as MenuDetailDTO).meta;
}
ElMessageBox.confirm(
`确认要<strong>删除</strong>编号为<strong style='color:var(--el-color-primary)'>[ ${multipleSelection.value} ]</strong>的日志吗?`,
"系统提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
dangerouslyUseHTMLString: true,
draggable: true
console.log(row);
// TODO 为什么声明一个formInline变量,把变量填充进去， 再给props.formInline 结果就不生效
addDialog({
title: `${title}菜单`,
props: {
formInline: {
id: row?.id ?? 0,
parentId: row?.parentId ?? 0,
menuName: row?.menuName ?? "",
routerName: row?.routerName ?? "",
path: row?.path ?? "",
isButton: row?.isButton,
permission: row?.permission ?? "",
menuType: row?.menuType ?? undefined,
status: row?.status ?? 1,
meta: meta ?? { rank: 0 }
},
higherMenuOptions: [...optionTree]
},
width: "60%",
draggable: true,
fullscreenIcon: true,
closeOnClickModal: false,
contentRenderer: () => h(editForm, { ref: formRef }),
beforeSure: (done, { options }) => {
const FormRef = formRef.value.getRef();
const curData = options.props.formInline as MenuRequest;
// 将菜单的数据转换为标准的路由数据
transferToStandardRouterData(curData, optionTree);
console.log(curData);
FormRef.validate(valid => {
if (valid) {
// 表单规则校验通过
if (title === "新增") {
handleAdd(curData, done);
} else {
// 实际开发先调用编辑接口，再进行下面操作
handleUpdate(curData, done);
}
}
});
}
)
.then(async () => {
await deleteLoginLogApi(multipleSelection.value).then(() => {
message(`您删除了日志编号为[ ${multipleSelection.value} ]的数据`, {
type: "success"
});
// 刷新列表
getLoginLogList();
});
})
.catch(() => {
message("取消删除", {
type: "info"
});
// 清空checkbox选择的数据
tableRef.getTableRef().clearSelection();
});
});
}
async function handleDelete(row) {
await deleteMenuApi(row.id).then(() => {
message(`您删除了${row.menuName}`, { type: "success" });
// 刷新列表
onSearch();
});
}
onMounted(() => {
getLoginLogList();
onSearch();
});
return {
searchFormParams,
pageLoading,
loading,
columns,
dataList,
pagination,
defaultSort,
timeRange,
multipleSelection,
onSearch,
exportAllExcel,
// exportExcel,
getLoginLogList,
resetForm,
handleDelete,
handleBulkDelete
openDialog,
handleDelete
};
}

62
src/views/system/menu/utils/menuLogic.ts Normal file
View File

@ -0,0 +1,62 @@
import { isUrl } from "@pureadmin/utils";
import { MenuRequest } from "@/api/system/menu";
import { getNodeByUniqueId } from "@/utils/tree";
import { CommonUtils } from "@/utils/common";
/**
* 因为动态路由的逻辑基本上完全依赖前端
* 所以需要将菜单的数据转换为标准的路由数据
* @param data
* @param menuTree
*/
export function transferToStandardRouterData(data: MenuRequest, menuTree: any) {
// 将菜单名称赋值给meta.title
if (data.menuName && data.meta) {
data.meta.title = data.menuName;
}
// 如果是页面和目录的话 path如果没有/开头 就自动加上
if (data.menuType == 1 || data.menuType == 2) {
if (data.path && !data.path.startsWith("/")) {
data.path = `/${data.path}`;
}
}
// 如果当前菜单是父菜单的唯一节点 记得将当前菜单的showParent=true
const parentMenu = getNodeByUniqueId(menuTree, data.parentId);
// 按钮不需要显示父菜单
if (parentMenu && !data.isButton) {
if (!parentMenu.children || parentMenu.children.length === 0) {
data.meta.showParent = true;
}
}
// 如果是内嵌iframe的话
if (data.menuType == 3) {
//检测meta.frameSrc是否是以Http/Https开头的 如果不是的话自动补全
if (data.menuType == 3 && data.meta && data.meta.frameSrc) {
if (!isUrl(data.meta.frameSrc)) {
// 如果链接是/开头 则认为是内部链接, 打上内部链接标记即可
if (data.meta.frameSrc.startsWith("/")) {
data.meta.isFrameSrcInternal = true;
} else {
data.meta.frameSrc = `http://${data.meta.frameSrc}`;
}
}
}
const pinyinStr = CommonUtils.toPinyin(data.menuName);
data.path = `/${pinyinStr}IframeLink`;
data.routerName = `${pinyinStr}IframeRouter`;
}
// 如果是外链跳转的话 需要自动设置他的path 按照外链跳转的规则 必须设置成/external
// 详见https://github.com/pure-admin/vue-pure-admin/issues/664
// 这里我们直接以菜单名转拼音的方式生成
if (data.meta && data.menuType == 4) {
if (!isUrl(data.routerName)) {
data.routerName = `http://${data.routerName}`;
}
data.path = `/external`;
}
}

37
src/views/system/menu/utils/rule.ts Normal file
View File

@ -0,0 +1,37 @@
import { reactive } from "vue";
import type { FormRules } from "element-plus";
import { isPhone, isEmail } from "@pureadmin/utils";
/** 自定义表单规则校验 */
export const formRules = reactive(<FormRules>{
name: [{ required: true, message: "部门名称为必填项", trigger: "blur" }],
phone: [
{
validator: (rule, value, callback) => {
if (value === "") {
callback();
} else if (!isPhone(value)) {
callback(new Error("请输入正确的手机号码格式"));
} else {
callback();
}
},
trigger: "blur"
// trigger: "click" // 如果想在点击确定按钮时触发这个校验，trigger 设置成 click 即可
}
],
email: [
{
validator: (rule, value, callback) => {
if (value === "") {
callback();
} else if (!isEmail(value)) {
callback(new Error("请输入正确的邮箱格式"));
} else {
callback();
}
},
trigger: "blur"
}
]
});