| | |
| | | <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; |
| | |
| | | title: '' |
| | | }); |
| | | |
| | | const queryFormRef = ref(ElForm); |
| | | const menuFormRef = ref(ElForm); |
| | | const queryFormRef = ref<ElFormInstance>(); |
| | | const menuFormRef = ref<ElFormInstance>(); |
| | | const initFormData = { |
| | | path: '', |
| | | menuId: undefined, |
| | |
| | | }, |
| | | }) |
| | | |
| | | const menuTableRef = ref(ElTable); |
| | | const menuTableRef = ref<ElTableInstance>(); |
| | | |
| | | const { queryParams, form, rules } = toRefs<PageData<MenuForm, MenuQuery>>(data) |
| | | /** 查询菜单列表 */ |
| | |
| | | /** 表单重置 */ |
| | | const reset = () => { |
| | | form.value = { ...initFormData }; |
| | | menuFormRef.value.resetFields(); |
| | | menuFormRef.value?.resetFields(); |
| | | } |
| | | |
| | | /** 搜索按钮操作 */ |
| | |
| | | } |
| | | /** 重置按钮操作 */ |
| | | const resetQuery = () => { |
| | | queryFormRef.value.resetFields(); |
| | | queryFormRef.value?.resetFields(); |
| | | handleQuery(); |
| | | } |
| | | /** 新增按钮操作 */ |
| | |
| | | /** 展开/折叠所有 */ |
| | | const toggleExpandAll = (data: MenuVO[], status: boolean) => { |
| | | data.forEach((item: MenuVO) => { |
| | | menuTableRef.value.toggleRowExpansion(item, status) |
| | | menuTableRef.value?.toggleRowExpansion(item, status) |
| | | if (item.children && item.children.length > 0) toggleExpandAll(item.children, status) |
| | | }) |
| | | } |
| | |
| | | } |
| | | /** 提交按钮 */ |
| | | const submitForm = () => { |
| | | menuFormRef.value.validate(async (valid: boolean) => { |
| | | 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(); |
| | | await getList(); |
| | | } |
| | | }) |
| | | } |
| | |
| | | const handleDelete = async (row: MenuVO) => { |
| | | await proxy?.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项?'); |
| | | await delMenu(row.menuId); |
| | | getList(); |
| | | await getList(); |
| | | proxy?.$modal.msgSuccess("删除成功"); |
| | | } |
| | | |