😎调整菜单页面
This commit is contained in:
zuohuaijun
parent
c42e10e605
commit
a6482222d3
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="sys-menu-container">
|
||||
<el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="700px">
|
||||
<el-dialog v-model="state.isShowDialog" draggable overflow destroy-on-close width="700px">
|
||||
<template #header>
|
||||
<div style="color: #fff">
|
||||
<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
|
||||
@ -8,7 +8,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto">
|
||||
<el-row :gutter="35">
|
||||
<el-row :gutter="10">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item label="上级菜单">
|
||||
<el-cascader
|
||||
@ -149,9 +149,9 @@
|
||||
<script lang="ts" setup name="sysEditMenu">
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
import IconSelector from '/@/components/iconSelector/index.vue';
|
||||
import other from '/@/utils/other';
|
||||
|
||||
import { getAPI } from '/@/utils/axios-utils';
|
||||
import other from '/@/utils/other';
|
||||
import { SysMenuApi } from '/@/api-services/api';
|
||||
import { SysMenu, UpdateMenuInput } from '/@/api-services/models';
|
||||
|
||||
|
||||
@ -1,103 +1,146 @@
|
||||
<template>
|
||||
<div class="sys-menu-container">
|
||||
<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
|
||||
<el-form :model="state.queryParams" ref="queryForm" :inline="true">
|
||||
<el-form-item label="菜单名称">
|
||||
<el-input v-model="state.queryParams.title" placeholder="菜单名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型">
|
||||
<el-select v-model="state.queryParams.type" placeholder="类型" clearable>
|
||||
<el-option label="目录" :value="1" />
|
||||
<el-option label="菜单" :value="2" />
|
||||
<el-option label="按钮" :value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysMenu:list'"> 查询 </el-button>
|
||||
<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
|
||||
</el-button-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="ele-Plus" @click="openAddMenu" v-auth="'sysMenu:add'"> 新增 </el-button>
|
||||
</el-form-item>
|
||||
<div class="sys-menu-container" v-loading="options.loading">
|
||||
<el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
|
||||
<el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" :label-width="'60px'" style="flex: 1 1 0%">
|
||||
<el-row :gutter="10">
|
||||
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
||||
<el-form-item label="菜单名称" prop="title">
|
||||
<el-input v-model="state.queryParams.title" placeholder="菜单名称" clearable @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="state.queryParams.type" placeholder="类型" clearable @clear="state.queryParams.type = undefined">
|
||||
<el-option label="目录" :value="1" />
|
||||
<el-option label="菜单" :value="2" />
|
||||
<el-option label="按钮" :value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<el-divider style="height: calc(100% - 5px); margin: 0 10px" direction="vertical" />
|
||||
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysMenu:page'" :loading="options.loading"> 查询 </el-button>
|
||||
<el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
|
||||
</el-button-group>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
|
||||
<el-table :data="state.menuData" v-loading="state.loading" row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" border>
|
||||
<el-table-column label="菜单名称" header-align="center" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<SvgIcon :name="scope.row.icon" />
|
||||
<span class="ml10">{{ $t(scope.row.title) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类型" width="70" align="center" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag type="warning" v-if="scope.row.type === 1">目录</el-tag>
|
||||
<el-tag v-else-if="scope.row.type === 2">菜单</el-tag>
|
||||
<el-tag type="info" v-else>按钮</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="path" label="路由路径" header-align="center" show-overflow-tooltip />
|
||||
<el-table-column prop="component" label="组件路径" align="center" show-overflow-tooltip />
|
||||
<el-table-column prop="permission" label="权限标识" align="center" show-overflow-tooltip />
|
||||
<el-table-column prop="orderNo" label="排序" width="70" align="center" show-overflow-tooltip />
|
||||
<el-table-column label="状态" width="80" align="center" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.status === 1">启用</el-tag>
|
||||
<el-tag type="danger" v-else>禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="修改记录" width="100" align="center" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<ModifyRecord :data="scope.row" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="140" fixed="right" align="center" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-button icon="ele-Edit" size="small" text type="primary" @click="openEditMenu(scope.row)" v-auth="'sysMenu:update'"> 编辑 </el-button>
|
||||
<el-button icon="ele-Delete" size="small" text type="danger" @click="delMenu(scope.row)" v-auth="'sysMenu:delete'"> 删除 </el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" :tree-config="{}">
|
||||
<template #toolbar_buttons>
|
||||
<el-button type="primary" icon="ele-Plus" @click="handleAdd" v-auth="'sysMenu:add'"> 新增 </el-button>
|
||||
<el-button-group style="padding-left: 12px">
|
||||
<el-button type="primary" icon="ele-Expand" @click="handleExpand"> 全部展开 </el-button>
|
||||
<el-button type="primary" icon="ele-Fold" @click="handleFold"> 全部折叠 </el-button>
|
||||
</el-button-group>
|
||||
</template>
|
||||
<template #toolbar_tools> </template>
|
||||
<template #empty>
|
||||
<el-empty :image-size="200" />
|
||||
</template>
|
||||
<template #row_title="{ row }">
|
||||
<SvgIcon :name="row.icon" />
|
||||
<span class="ml10">{{ $t(row.title) }}</span>
|
||||
</template>
|
||||
<template #row_type="{ row }">
|
||||
<el-tag type="warning" v-if="row.type === 1">目录</el-tag>
|
||||
<el-tag v-else-if="row.type === 2">菜单</el-tag>
|
||||
<el-tag type="info" v-else>按钮</el-tag>
|
||||
</template>
|
||||
<template #row_status="{ row }">
|
||||
<el-tag v-if="row.status === 1" type="success">启用</el-tag>
|
||||
<el-tag v-else type="danger">禁用</el-tag>
|
||||
</template>
|
||||
<template #row_buttons="{ row }">
|
||||
<el-tooltip content="编辑" placement="top">
|
||||
<el-button icon="ele-Edit" text type="primary" v-auth="'sysMenu:update'" @click="handleEdit(row)"> </el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button icon="ele-Delete" text type="danger" v-auth="'sysMenu:delete'" @click="handleDelete(row)"> </el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</vxe-grid>
|
||||
</el-card>
|
||||
|
||||
<EditMenu ref="editMenuRef" :title="state.editMenuTitle" :menuData="state.menuData" @handleQuery="handleQuery" />
|
||||
<EditMenu ref="editMenuRef" :title="state.title" :menuData="state.menuData" @handleQuery="handleQuery" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="sysMenu">
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
import { auth } from '/@/utils/authFunction';
|
||||
import { VxeGridInstance } from 'vxe-table';
|
||||
import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
|
||||
import SvgIcon from '/@/components/svgIcon/index.vue';
|
||||
|
||||
import EditMenu from '/@/views/system/menu/component/editMenu.vue';
|
||||
import ModifyRecord from '/@/components/table/modifyRecord.vue';
|
||||
|
||||
import { getAPI } from '/@/utils/axios-utils';
|
||||
import { SysMenuApi } from '/@/api-services/api';
|
||||
import { SysMenu } from '/@/api-services/models';
|
||||
|
||||
const xGrid = ref<VxeGridInstance>();
|
||||
const editMenuRef = ref<InstanceType<typeof EditMenu>>();
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
menuData: [] as Array<SysMenu>,
|
||||
queryParams: {
|
||||
title: undefined,
|
||||
type: undefined,
|
||||
},
|
||||
editMenuTitle: '',
|
||||
title: '',
|
||||
});
|
||||
|
||||
// 表格参数配置
|
||||
const options = useVxeTable<SysMenu>(
|
||||
{
|
||||
id: 'sysMenu',
|
||||
name: '菜单信息',
|
||||
columns: [
|
||||
// { type: 'checkbox', width: 40, fixed: 'left' },
|
||||
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
|
||||
{ field: 'title', title: '菜单名称', minWidth: 180, showOverflow: 'tooltip', treeNode: true, slots: { default: 'row_title' } },
|
||||
{ field: 'type', title: '菜单类型', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_type' } },
|
||||
{ field: 'path', title: '路由路径', minWidth: 150, showOverflow: 'tooltip' },
|
||||
{ field: 'component', title: '组件路径', minWidth: 150, showOverflow: 'tooltip' },
|
||||
{ field: 'permission', title: '权限标识', minWidth: 160, showOverflow: 'tooltip' },
|
||||
{ field: 'orderNo', title: '排序', minWidth: 80, showOverflow: 'tooltip' },
|
||||
{ field: 'status', title: '状态', minWidth: 100, showOverflow: 'tooltip', slots: { default: 'row_status' } },
|
||||
{ field: 'createTime', title: '修改时间', minWidth: 150, showOverflow: 'tooltip' },
|
||||
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
|
||||
],
|
||||
enableExport: auth('sysMenu:export'),
|
||||
searchCallback: () => handleQuery(),
|
||||
queryAllCallback: () => fetchData({ pageSize: 99999 }),
|
||||
},
|
||||
{ stripe: false, checkboxConfig: { range: false } }
|
||||
);
|
||||
|
||||
// 页面初始化
|
||||
onMounted(async () => {
|
||||
handleQuery();
|
||||
await handleQuery();
|
||||
});
|
||||
|
||||
// 查询操作
|
||||
const handleQuery = async () => {
|
||||
state.loading = true;
|
||||
var res = await getAPI(SysMenuApi).apiSysMenuListGet(state.queryParams.title, state.queryParams.type);
|
||||
options.loading = true;
|
||||
var res = await fetchData(null);
|
||||
xGrid.value?.loadData(res.data.result ?? []);
|
||||
state.menuData = res.data.result ?? [];
|
||||
state.loading = false;
|
||||
options.loading = false;
|
||||
};
|
||||
|
||||
// 获取数据
|
||||
const fetchData = async (tableParams: any) => {
|
||||
let params = Object.assign(state.queryParams, tableParams);
|
||||
return getAPI(SysMenuApi).apiSysMenuListGet(params.title, params.type);
|
||||
};
|
||||
|
||||
// 重置操作
|
||||
@ -108,19 +151,19 @@ const resetQuery = () => {
|
||||
};
|
||||
|
||||
// 打开新增页面
|
||||
const openAddMenu = () => {
|
||||
state.editMenuTitle = '添加菜单';
|
||||
const handleAdd = () => {
|
||||
state.title = '添加菜单';
|
||||
editMenuRef.value?.openDialog({ type: 2, isHide: false, isKeepAlive: true, isAffix: false, isIframe: false, status: 1, orderNo: 100 });
|
||||
};
|
||||
|
||||
// 打开编辑页面
|
||||
const openEditMenu = (row: any) => {
|
||||
state.editMenuTitle = '编辑菜单';
|
||||
const handleEdit = (row: any) => {
|
||||
state.title = '编辑菜单';
|
||||
editMenuRef.value?.openDialog(row);
|
||||
};
|
||||
|
||||
// 删除当前行
|
||||
const delMenu = (row: any) => {
|
||||
const handleDelete = (row: any) => {
|
||||
ElMessageBox.confirm(`确定删除菜单：【${row.title}】?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
@ -128,9 +171,19 @@ const delMenu = (row: any) => {
|
||||
})
|
||||
.then(async () => {
|
||||
await getAPI(SysMenuApi).apiSysMenuDeletePost({ id: row.id });
|
||||
handleQuery();
|
||||
ElMessage.success('删除成功');
|
||||
await handleQuery();
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
// 全部展开
|
||||
const handleExpand = () => {
|
||||
xGrid.value?.setAllTreeExpand(true);
|
||||
};
|
||||
|
||||
// 全部折叠
|
||||
const handleFold = () => {
|
||||
xGrid.value?.clearTreeExpand();
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user