| | |
| | | <template> |
| | | <div class="p-2"> |
| | | <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> |
| | | <div class="search" v-show="showSearch"> |
| | | <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px"> |
| | | <el-form-item label="菜单名称" prop="menuName"> |
| | | <el-input v-model="queryParams.menuName" placeholder="请输入菜单名称" clearable @keyup.enter="handleQuery" /> |
| | | </el-form-item> |
| | | <el-form-item label="状态" prop="status"> |
| | | <el-select v-model="queryParams.status" placeholder="菜单状态" clearable> |
| | | <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
| | | <el-button icon="Refresh" @click="resetQuery">重置</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div v-show="showSearch" class="mb-[10px]"> |
| | | <el-card shadow="hover"> |
| | | <el-form ref="queryFormRef" :model="queryParams" :inline="true"> |
| | | <el-form-item label="菜单名称" prop="menuName"> |
| | | <el-input v-model="queryParams.menuName" placeholder="请输入菜单名称" clearable @keyup.enter="handleQuery" /> |
| | | </el-form-item> |
| | | <el-form-item label="状态" prop="status"> |
| | | <el-select v-model="queryParams.status" placeholder="菜单状态" clearable> |
| | | <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
| | | <el-button icon="Refresh" @click="resetQuery">重置</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </el-card> |
| | | </div> |
| | | </transition> |
| | | |
| | | <el-card shadow="never"> |
| | | <el-card shadow="hover"> |
| | | <template #header> |
| | | <el-row :gutter="10"> |
| | | <el-col :span="1.5"> |
| | | <el-button type="primary" plain icon="Plus" @click="handleAdd()" v-hasPermi="['system:menu:add']">新增 </el-button> |
| | | <el-button v-hasPermi="['system:menu:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增 </el-button> |
| | | </el-col> |
| | | <el-col :span="1.5"> |
| | | <el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button> |
| | | </el-col> |
| | | <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> |
| | | <right-toolbar v-model:show-search="showSearch" @query-table="getList"></right-toolbar> |
| | | </el-row> |
| | | </template> |
| | | |
| | | <el-table |
| | | ref="menuTableRef" |
| | | v-loading="loading" |
| | | :data="menuList" |
| | | row-key="menuId" |
| | | :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" |
| | | border |
| | | ref="menuTableRef" |
| | | :default-expand-all="isExpandAll" |
| | | > |
| | | <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column> |
| | |
| | | <el-table-column fixed="right" label="操作" width="180"> |
| | | <template #default="scope"> |
| | | <el-tooltip content="修改" placement="top"> |
| | | <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']" /> |
| | | <el-button v-hasPermi="['system:menu:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)" /> |
| | | </el-tooltip> |
| | | <el-tooltip content="新增" placement="top"> |
| | | <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']" /> |
| | | <el-button v-hasPermi="['system:menu:add']" link type="primary" icon="Plus" @click="handleAdd(scope.row)" /> |
| | | </el-tooltip> |
| | | <el-tooltip content="删除" placement="top"> |
| | | <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']" /> |
| | | <el-button v-hasPermi="['system:menu:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)" /> |
| | | </el-tooltip> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-card> |
| | | |
| | | <el-dialog :title="dialog.title" v-model="dialog.visible" destroy-on-close append-to-bod width="750px"> |
| | | <el-dialog v-model="dialog.visible" :title="dialog.title" destroy-on-close append-to-bod width="750px"> |
| | | <el-form ref="menuFormRef" :model="form" :rules="rules" label-width="100px"> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | |
| | | <el-col :span="24"> |
| | | <el-form-item label="菜单类型" prop="menuType"> |
| | | <el-radio-group v-model="form.menuType"> |
| | | <el-radio label="M">目录</el-radio> |
| | | <el-radio label="C">菜单</el-radio> |
| | | <el-radio label="F">按钮</el-radio> |
| | | <el-radio value="M">目录</el-radio> |
| | | <el-radio value="C">菜单</el-radio> |
| | | <el-radio value="F">按钮</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="24" v-if="form.menuType !== 'F'"> |
| | | <el-col v-if="form.menuType !== 'F'" :span="24"> |
| | | <el-form-item label="菜单图标" prop="icon"> |
| | | <!-- 图标选择器 --> |
| | | <icon-select v-model="form.icon" /> |
| | |
| | | <el-input-number v-model="form.orderNum" controls-position="right" :min="0" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12" v-if="form.menuType !== 'F'"> |
| | | <el-col v-if="form.menuType !== 'F'" :span="12"> |
| | | <el-form-item> |
| | | <template #label> |
| | | <span> |
| | |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12" v-if="form.menuType !== 'F'"> |
| | | <el-col v-if="form.menuType !== 'F'" :span="12"> |
| | | <el-form-item prop="path"> |
| | | <template #label> |
| | | <span> |
| | |
| | | <el-input v-model="form.path" placeholder="请输入路由地址" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12" v-if="form.menuType === 'C'"> |
| | | <el-col v-if="form.menuType === 'C'" :span="12"> |
| | | <el-form-item prop="component"> |
| | | <template #label> |
| | | <span> |
| | |
| | | <el-input v-model="form.component" placeholder="请输入组件路径" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12" v-if="form.menuType !== 'M'"> |
| | | <el-col v-if="form.menuType !== 'M'" :span="12"> |
| | | <el-form-item> |
| | | <el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" /> |
| | | <template #label> |
| | | <span> |
| | | <el-tooltip content="控制器中定义的权限字符,如:@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top"> |
| | | <el-tooltip content="控制器中定义的权限字符,如:@SaCheckPermission('system:user:list')" placement="top"> |
| | | <el-icon> |
| | | <question-filled /> |
| | | </el-icon> |
| | |
| | | </template> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12" v-if="form.menuType === 'C'"> |
| | | <el-col v-if="form.menuType === 'C'" :span="12"> |
| | | <el-form-item> |
| | | <el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" /> |
| | | <el-input v-model="form.queryParam" placeholder="请输入路由参数" maxlength="255" /> |
| | | <template #label> |
| | | <span> |
| | | <el-tooltip content='访问路由的默认传递参数,如:`{"id": 1, "name": "ry"}`' placement="top"> |
| | |
| | | </template> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12" v-if="form.menuType === 'C'"> |
| | | <el-col v-if="form.menuType === 'C'" :span="12"> |
| | | <el-form-item> |
| | | <template #label> |
| | | <span> |
| | |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12" v-if="form.menuType !== 'F'"> |
| | | <el-col v-if="form.menuType !== 'F'" :span="12"> |
| | | <el-form-item> |
| | | <template #label> |
| | | <span> |
| | |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12" v-if="form.menuType !== 'F'"> |
| | | <el-col :span="12"> |
| | | <el-form-item> |
| | | <template #label> |
| | | <span> |
| | |
| | | <script setup name="Menu" lang="ts"> |
| | | import { addMenu, delMenu, getMenu, listMenu, updateMenu } from '@/api/system/menu'; |
| | | import { MenuForm, MenuQuery, MenuVO } from '@/api/system/menu/types'; |
| | | import { ComponentInternalInstance } from 'vue'; |
| | | import { MenuTypeEnum } from '@/enums/MenuTypeEnum'; |
| | | import { ElTable, ElForm } from 'element-plus'; |
| | | |
| | | interface MenuOptionsType { |
| | | menuId: number; |
| | | menuName: string; |
| | | children: MenuOptionsType[] | undefined; |
| | | menuId: number; |
| | | menuName: string; |
| | | children: MenuOptionsType[] | undefined; |
| | | } |
| | | |
| | | const { proxy } = getCurrentInstance() as ComponentInternalInstance |
| | | const { sys_show_hide, sys_normal_disable } = toRefs<any>(proxy?.useDict("sys_show_hide", "sys_normal_disable")); |
| | | const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
| | | const { sys_show_hide, sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_show_hide', 'sys_normal_disable')); |
| | | |
| | | const menuList = ref<MenuVO[]>([]) |
| | | const loading = ref(true) |
| | | const showSearch = ref(true) |
| | | const menuOptions = ref<MenuOptionsType[]>([]) |
| | | const isExpandAll = ref(false) |
| | | const menuList = ref<MenuVO[]>([]); |
| | | const loading = ref(true); |
| | | const showSearch = ref(true); |
| | | const menuOptions = ref<MenuOptionsType[]>([]); |
| | | const isExpandAll = ref(false); |
| | | |
| | | const dialog = reactive<DialogOption>({ |
| | | visible: false, |
| | | title: '' |
| | | visible: false, |
| | | title: '' |
| | | }); |
| | | |
| | | const queryFormRef = ref(ElForm); |
| | | const menuFormRef = ref(ElForm); |
| | | const queryFormRef = ref<ElFormInstance>(); |
| | | const menuFormRef = ref<ElFormInstance>(); |
| | | const initFormData = { |
| | | path: '', |
| | | menuId: undefined, |
| | | parentId: 0, |
| | | menuName: '', |
| | | icon: '', |
| | | menuType: MenuTypeEnum.M, |
| | | orderNum: 1, |
| | | isFrame: "1", |
| | | isCache: "0", |
| | | visible: "0", |
| | | status: "0" |
| | | } |
| | | path: '', |
| | | menuId: undefined, |
| | | parentId: 0, |
| | | menuName: '', |
| | | icon: '', |
| | | menuType: MenuTypeEnum.M, |
| | | orderNum: 1, |
| | | isFrame: '1', |
| | | isCache: '0', |
| | | visible: '0', |
| | | status: '0' |
| | | }; |
| | | const data = reactive<PageData<MenuForm, MenuQuery>>({ |
| | | form: { ...initFormData }, |
| | | queryParams: { |
| | | menuName: undefined, |
| | | status: undefined |
| | | }, |
| | | rules: { |
| | | menuName: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }], |
| | | orderNum: [{ required: true, message: "菜单顺序不能为空", trigger: "blur" }], |
| | | path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }] |
| | | }, |
| | | }) |
| | | form: { ...initFormData }, |
| | | queryParams: { |
| | | menuName: undefined, |
| | | status: undefined |
| | | }, |
| | | rules: { |
| | | menuName: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }], |
| | | orderNum: [{ required: true, message: '菜单顺序不能为空', trigger: 'blur' }], |
| | | path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }] |
| | | } |
| | | }); |
| | | |
| | | const menuTableRef = ref(ElTable); |
| | | const menuTableRef = ref<ElTableInstance>(); |
| | | |
| | | const { queryParams, form, rules } = toRefs<PageData<MenuForm, MenuQuery>>(data) |
| | | const { queryParams, form, rules } = toRefs<PageData<MenuForm, MenuQuery>>(data); |
| | | /** 查询菜单列表 */ |
| | | const getList = async () => { |
| | | loading.value = true |
| | | const res = await listMenu(queryParams.value); |
| | | const data = proxy?.handleTree<MenuVO>(res.data, "menuId") |
| | | if (data) { |
| | | menuList.value = data |
| | | } |
| | | loading.value = false |
| | | } |
| | | loading.value = true; |
| | | const res = await listMenu(queryParams.value); |
| | | const data = proxy?.handleTree<MenuVO>(res.data, 'menuId'); |
| | | if (data) { |
| | | menuList.value = data; |
| | | } |
| | | loading.value = false; |
| | | }; |
| | | /** 查询菜单下拉树结构 */ |
| | | const getTreeselect = async () => { |
| | | menuOptions.value = [] |
| | | const response = await listMenu(); |
| | | const menu: MenuOptionsType = { menuId: 0, menuName: "主类目", children: [] } |
| | | menu.children = proxy?.handleTree<MenuOptionsType>(response.data, "menuId") |
| | | menuOptions.value.push(menu) |
| | | } |
| | | menuOptions.value = []; |
| | | const response = await listMenu(); |
| | | const menu: MenuOptionsType = { menuId: 0, menuName: '主类目', children: [] }; |
| | | menu.children = proxy?.handleTree<MenuOptionsType>(response.data, 'menuId'); |
| | | menuOptions.value.push(menu); |
| | | }; |
| | | /** 取消按钮 */ |
| | | const cancel = () => { |
| | | reset() |
| | | dialog.visible = false |
| | | } |
| | | reset(); |
| | | dialog.visible = false; |
| | | }; |
| | | /** 表单重置 */ |
| | | const reset = () => { |
| | | form.value = { ...initFormData }; |
| | | menuFormRef.value.resetFields(); |
| | | } |
| | | form.value = { ...initFormData }; |
| | | menuFormRef.value?.resetFields(); |
| | | }; |
| | | |
| | | /** 搜索按钮操作 */ |
| | | const handleQuery = () => { |
| | | getList(); |
| | | } |
| | | getList(); |
| | | }; |
| | | /** 重置按钮操作 */ |
| | | const resetQuery = () => { |
| | | queryFormRef.value.resetFields(); |
| | | handleQuery(); |
| | | } |
| | | queryFormRef.value?.resetFields(); |
| | | handleQuery(); |
| | | }; |
| | | /** 新增按钮操作 */ |
| | | const handleAdd = (row?: MenuVO) => { |
| | | dialog.visible = true; |
| | | dialog.title = "添加菜单"; |
| | | getTreeselect(); |
| | | nextTick(() => { |
| | | reset(); |
| | | row && row.menuId ? form.value.parentId = row.menuId : form.value.parentId = 0; |
| | | }) |
| | | |
| | | } |
| | | reset(); |
| | | getTreeselect(); |
| | | row && row.menuId ? (form.value.parentId = row.menuId) : (form.value.parentId = 0); |
| | | dialog.visible = true; |
| | | dialog.title = '添加菜单'; |
| | | }; |
| | | /** 展开/折叠操作 */ |
| | | const handleToggleExpandAll = () => { |
| | | isExpandAll.value = !isExpandAll.value; |
| | | toggleExpandAll(menuList.value, isExpandAll.value) |
| | | } |
| | | isExpandAll.value = !isExpandAll.value; |
| | | toggleExpandAll(menuList.value, isExpandAll.value); |
| | | }; |
| | | /** 展开/折叠所有 */ |
| | | const toggleExpandAll = (data: MenuVO[], status: boolean) => { |
| | | data.forEach((item: MenuVO) => { |
| | | menuTableRef.value.toggleRowExpansion(item, status) |
| | | if (item.children && item.children.length > 0) toggleExpandAll(item.children, status) |
| | | }) |
| | | } |
| | | data.forEach((item: MenuVO) => { |
| | | menuTableRef.value?.toggleRowExpansion(item, status); |
| | | if (item.children && item.children.length > 0) toggleExpandAll(item.children, status); |
| | | }); |
| | | }; |
| | | /** 修改按钮操作 */ |
| | | const handleUpdate = async (row: MenuVO) => { |
| | | await getTreeselect(); |
| | | dialog.visible = true; |
| | | dialog.title = "修改菜单"; |
| | | await nextTick(async () => { |
| | | if (row.menuId) { |
| | | const { data } = await getMenu(row.menuId); |
| | | reset(); |
| | | form.value = data; |
| | | } |
| | | }) |
| | | |
| | | } |
| | | reset(); |
| | | await getTreeselect(); |
| | | if (row.menuId) { |
| | | const { data } = await getMenu(row.menuId); |
| | | form.value = data; |
| | | } |
| | | dialog.visible = true; |
| | | dialog.title = '修改菜单'; |
| | | }; |
| | | /** 提交按钮 */ |
| | | const submitForm = () => { |
| | | menuFormRef.value.validate(async (valid: boolean) => { |
| | | if (valid) { |
| | | form.value.menuId ? await updateMenu(form.value) : await addMenu(form.value); |
| | | proxy?.$modal.msgSuccess("操作成功"); |
| | | dialog.visible = false; |
| | | getList(); |
| | | } |
| | | }) |
| | | } |
| | | menuFormRef.value?.validate(async (valid: boolean) => { |
| | | if (valid) { |
| | | form.value.menuId ? await updateMenu(form.value) : await addMenu(form.value); |
| | | proxy?.$modal.msgSuccess('操作成功'); |
| | | dialog.visible = false; |
| | | await getList(); |
| | | } |
| | | }); |
| | | }; |
| | | /** 删除按钮操作 */ |
| | | const handleDelete = async (row: MenuVO) => { |
| | | await proxy?.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项?'); |
| | | await delMenu(row.menuId); |
| | | getList(); |
| | | proxy?.$modal.msgSuccess("删除成功"); |
| | | } |
| | | await proxy?.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项?'); |
| | | await delMenu(row.menuId); |
| | | await getList(); |
| | | proxy?.$modal.msgSuccess('删除成功'); |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | getList(); |
| | | getList(); |
| | | }); |
| | | </script> |