gaoxing/UNIVPLMDataIntegration
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

😎调整菜单页面

Browse Source
This commit is contained in:
zuohuaijun 2024-07-01 11:42:05 +08:00
parent c42e10e605
commit a6482222d3
2 changed files with 128 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
Web/src/views/system/menu/component/editMenu.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="sys-menu-container"> <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> <template #header>
<div style="color: #fff"> <div style="color: #fff">
<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon> <el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
@ -8,7 +8,7 @@
</div> </div>
</template> </template>
<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto"> <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-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="上级菜单"> <el-form-item label="上级菜单">
<el-cascader <el-cascader
@ -149,9 +149,9 @@
<script lang="ts" setup name="sysEditMenu"> <script lang="ts" setup name="sysEditMenu">
import { computed, reactive, ref } from 'vue'; import { computed, reactive, ref } from 'vue';
import IconSelector from '/@/components/iconSelector/index.vue'; import IconSelector from '/@/components/iconSelector/index.vue';
import other from '/@/utils/other';
import { getAPI } from '/@/utils/axios-utils'; import { getAPI } from '/@/utils/axios-utils';
import other from '/@/utils/other';
import { SysMenuApi } from '/@/api-services/api'; import { SysMenuApi } from '/@/api-services/api';
import { SysMenu, UpdateMenuInput } from '/@/api-services/models'; import { SysMenu, UpdateMenuInput } from '/@/api-services/models';

175
Web/src/views/system/menu/index.vue
View File

@ -1,103 +1,146 @@
<template> <template>
<div class="sys-menu-container"> <div class="sys-menu-container" v-loading="options.loading">
<el-card shadow="hover" :body-style="{ paddingBottom: '0' }"> <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" :inline="true"> <el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" :label-width="'60px'" style="flex: 1 1 0%">
<el-form-item label="菜单名称"> <el-row :gutter="10">
<el-input v-model="state.queryParams.title" placeholder="菜单名称" clearable /> <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-form-item>
<el-form-item label="类型"> </el-col>
<el-select v-model="state.queryParams.type" placeholder="类型" clearable> <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="1" />
<el-option label="菜单" :value="2" /> <el-option label="菜单" :value="2" />
<el-option label="按钮" :value="3" /> <el-option label="按钮" :value="3" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> </el-col>
<el-button-group> </el-row>
<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>
</el-form> </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>
<el-card class="full-table" shadow="hover" style="margin-top: 5px"> <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> <vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" :tree-config="{}">
<el-table-column label="菜单名称" header-align="center" show-overflow-tooltip> <template #toolbar_buttons>
<template #default="scope"> <el-button type="primary" icon="ele-Plus" @click="handleAdd" v-auth="'sysMenu:add'"> 新增 </el-button>
<SvgIcon :name="scope.row.icon" /> <el-button-group style="padding-left: 12px">
<span class="ml10">{{ $t(scope.row.title) }}</span> <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>
</el-table-column> <template #toolbar_tools> </template>
<el-table-column label="类型" width="70" align="center" show-overflow-tooltip> <template #empty>
<template #default="scope"> <el-empty :image-size="200" />
<el-tag type="warning" v-if="scope.row.type === 1">目录</el-tag> </template>
<el-tag v-else-if="scope.row.type === 2">菜单</el-tag> <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> <el-tag type="info" v-else>按钮</el-tag>
</template> </template>
</el-table-column> <template #row_status="{ row }">
<el-table-column prop="path" label="路由路径" header-align="center" show-overflow-tooltip /> <el-tag v-if="row.status === 1" type="success">启用</el-tag>
<el-table-column prop="component" label="组件路径" align="center" show-overflow-tooltip /> <el-tag v-else type="danger">禁用</el-tag>
<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> </template>
</el-table-column> <template #row_buttons="{ row }">
<el-table-column label="修改记录" width="100" align="center" show-overflow-tooltip> <el-tooltip content="编辑" placement="top">
<template #default="scope"> <el-button icon="ele-Edit" text type="primary" v-auth="'sysMenu:update'" @click="handleEdit(row)"> </el-button>
<ModifyRecord :data="scope.row" /> </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> </template>
</el-table-column> </vxe-grid>
<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>
</el-card> </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> </div>
</template> </template>
<script lang="ts" setup name="sysMenu"> <script lang="ts" setup name="sysMenu">
import { onMounted, reactive, ref } from 'vue'; import { onMounted, reactive, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus'; 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 EditMenu from '/@/views/system/menu/component/editMenu.vue';
import ModifyRecord from '/@/components/table/modifyRecord.vue';
import { getAPI } from '/@/utils/axios-utils'; import { getAPI } from '/@/utils/axios-utils';
import { SysMenuApi } from '/@/api-services/api'; import { SysMenuApi } from '/@/api-services/api';
import { SysMenu } from '/@/api-services/models'; import { SysMenu } from '/@/api-services/models';
const xGrid = ref<VxeGridInstance>();
const editMenuRef = ref<InstanceType<typeof EditMenu>>(); const editMenuRef = ref<InstanceType<typeof EditMenu>>();
const state = reactive({ const state = reactive({
loading: false,
menuData: [] as Array<SysMenu>, menuData: [] as Array<SysMenu>,
queryParams: { queryParams: {
title: undefined, title: undefined,
type: 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 () => { onMounted(async () => {
handleQuery(); await handleQuery();
}); });
// 查询操作 // 查询操作
const handleQuery = async () => { const handleQuery = async () => {
state.loading = true; options.loading = true;
var res = await getAPI(SysMenuApi).apiSysMenuListGet(state.queryParams.title, state.queryParams.type); var res = await fetchData(null);
xGrid.value?.loadData(res.data.result ?? []);
state.menuData = 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 = () => { const handleAdd = () => {
state.editMenuTitle = '添加菜单'; state.title = '添加菜单';
editMenuRef.value?.openDialog({ type: 2, isHide: false, isKeepAlive: true, isAffix: false, isIframe: false, status: 1, orderNo: 100 }); editMenuRef.value?.openDialog({ type: 2, isHide: false, isKeepAlive: true, isAffix: false, isIframe: false, status: 1, orderNo: 100 });
}; };
// 打开编辑页面 // 打开编辑页面
const openEditMenu = (row: any) => { const handleEdit = (row: any) => {
state.editMenuTitle = '编辑菜单'; state.title = '编辑菜单';
editMenuRef.value?.openDialog(row); editMenuRef.value?.openDialog(row);
}; };
// 删除当前行 // 删除当前行
const delMenu = (row: any) => { const handleDelete = (row: any) => {
ElMessageBox.confirm(`确定删除菜单：【${row.title}】?`, '提示', { ElMessageBox.confirm(`确定删除菜单：【${row.title}】?`, '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
@ -128,9 +171,19 @@ const delMenu = (row: any) => {
}) })
.then(async () => { .then(async () => {
await getAPI(SysMenuApi).apiSysMenuDeletePost({ id: row.id }); await getAPI(SysMenuApi).apiSysMenuDeletePost({ id: row.id });
handleQuery();
ElMessage.success('删除成功'); ElMessage.success('删除成功');
await handleQuery();
}) })
.catch(() => {}); .catch(() => {});
}; };
// 全部展开
const handleExpand = () => {
xGrid.value?.setAllTreeExpand(true);
};
// 全部折叠
const handleFold = () => {
xGrid.value?.clearTreeExpand();
};
</script> </script>