Commit ff3406c4 authored by liwei's avatar liwei

修改了菜单管理的bug

parent e5db6eb5
...@@ -19,13 +19,15 @@ enum Api { ...@@ -19,13 +19,15 @@ enum Api {
menuDetail = '/system/menu/detail/', menuDetail = '/system/menu/detail/',
addMenu = '/system/menu/add', addMenu = '/system/menu/add',
updataMenu = '/system/menu/update/', updataMenu = '/system/menu/update/',
menuList = '/system/menu/list' menuList = '/system/menu/list',
menuSelectList = '/system/menu/treeSelect',
roleMenuSelected = '/system/menu/roleMenuTreeSelect/',
} }
/** 删除菜单*/ /** 删除菜单*/
export const deleteById = (params?: any) => export const deleteById = (params?: any) =>
defHttp.delete<any>({ url: Api.deleteById+params }); defHttp.delete<any>({ url: Api.deleteById + params });
/** 获取菜单详情信息*/ /** 获取菜单详情信息*/
export const menuDetailApi = (params: any) => export const menuDetailApi = (params: any) =>
...@@ -53,3 +55,11 @@ export const menuUpdataApi = (params: any) => ...@@ -53,3 +55,11 @@ export const menuUpdataApi = (params: any) =>
/** 获取菜单列表信息*/ /** 获取菜单列表信息*/
export const getMenuList = (params?: any) => export const getMenuList = (params?: any) =>
defHttp.get<any>({ url: Api.menuList, params }); defHttp.get<any>({ url: Api.menuList, params });
/** 获取菜单列表信息*/
export const getMenuSelect = (params?: any) =>
defHttp.get<any>({ url: Api.menuSelectList });
/** 获取角色已选择的菜单*/
export const getRoleMenuSelected = (params?: any) =>
defHttp.get<any>({ url: Api.roleMenuSelected + params.businessId });
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
const emit = defineEmits(['success', 'register']); const emit = defineEmits(['success', 'register']);
const menuId = ref(''); const menuId = ref('');
const isUpdate = ref(true); const isUpdate = ref(true);
const isAdd = ref(true);
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({ const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
labelWidth: 100, labelWidth: 100,
...@@ -35,6 +36,7 @@ ...@@ -35,6 +36,7 @@
resetFields(); resetFields();
setDrawerProps({ confirmLoading: false }); setDrawerProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate; isUpdate.value = !!data?.isUpdate;
isAdd.value = !!data?.isAdd;
if (unref(isUpdate)) { if (unref(isUpdate)) {
// 获取行数据的菜单id // 获取行数据的菜单id
menuId.value = data.record.businessId; menuId.value = data.record.businessId;
...@@ -47,10 +49,24 @@ ...@@ -47,10 +49,24 @@
}); });
}) })
} }
const menuData = await getMenuList(); if (unref(isAdd)){
// 通过id获取菜单详情信息
console.log('data:',data)
const id = data.record.businessId
const params = {
parentId: id,
}
console.log('params:',params)
// 塞值
setFieldsValue({
...params,
});
}
const res = await getMenuList();
const treeData = handleTree(res.data, 'businessId',undefined,undefined,undefined)
updateSchema({ updateSchema({
field: 'parentMenu', field: 'parentId',
componentProps: {menuData}, componentProps: { treeData },
}); });
}); });
...@@ -58,6 +74,7 @@ ...@@ -58,6 +74,7 @@
async function handleSubmit() { async function handleSubmit() {
try { try {
const formData = await validate(); const formData = await validate();
console.log('formData:',formData)
setDrawerProps({ confirmLoading: true }); setDrawerProps({ confirmLoading: true });
// 编辑 // 编辑
if(unref(isUpdate)) { if(unref(isUpdate)) {
...@@ -98,4 +115,25 @@ ...@@ -98,4 +115,25 @@
setDrawerProps({ confirmLoading: false }); setDrawerProps({ confirmLoading: false });
} }
} }
/**结构转换方法*/
function handleTree(data, id, parentId, children, rootId) {
id = id || 'id'
parentId = parentId || 'parentId'
children = children || 'children'
rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
// 对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data))
// 循环所有项
const treeData = cloneData.filter(father => {
const branchArr = cloneData.filter(child => {
// 返回每一项的子级数组
return father[id] === child[parentId]
})
branchArr.length > 0 ? father.children = branchArr : ''
// 返回第一层
return father[parentId] === rootId
})
return treeData !== '' ? treeData : data
}
</script> </script>
...@@ -8,6 +8,10 @@ ...@@ -8,6 +8,10 @@
<template v-if="column.key === 'action'"> <template v-if="column.key === 'action'">
<TableAction <TableAction
:actions="[ :actions="[
{
label:'新增',
onClick: handleAdd.bind(null, record),
},
{ {
// icon: 'clarity:note-edit-line', // icon: 'clarity:note-edit-line',
label:'修改', label:'修改',
...@@ -35,27 +39,32 @@ ...@@ -35,27 +39,32 @@
import { nextTick } from 'vue'; import { nextTick } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table'; import { BasicTable, useTable, TableAction } from '@/components/Table';
// import { getMenuList } from '@/api/demo/system';
import { getMenuListByPage } from '@/api/system/menu/menu'; import { getMenuListByPage } from '@/api/system/menu/menu';
import { useDrawer } from '@/components/Drawer'; import { useDrawer } from '@/components/Drawer';
import MenuDrawer from './MenuDrawer.vue'; import MenuDrawer from './MenuDrawer.vue';
import { getMenuList } from '@/api/demo/system';
import { columns, searchFormSchema } from './menu.data'; import { columns, searchFormSchema } from './menu.data';
import { deleteById } from "@/api/system/menu/menu"; import { deleteById } from "@/api/system/menu/menu";
import { useMessage } from "@/hooks/web/useMessage"; import { useMessage } from "@/hooks/web/useMessage";
import { ref } from 'vue';
defineOptions({ name: 'MenuManagement' }); defineOptions({ name: 'MenuManagement' });
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const [registerDrawer, { openDrawer }] = useDrawer(); const [registerDrawer, { openDrawer }] = useDrawer();
const treeData = ref();
const [registerTable, { reload, expandAll }] = useTable({ const [registerTable, { reload, expandAll }] = useTable({
title: '菜单列表', title: '菜单列表',
api: getMenuListByPage, api: async (params) => {
const response = await getMenuListByPage(params);
//进行处理数据
const transformedData = transformData(response.data); // 定义一个函数transformData来做你需要的数据转换
return { ...response, data: transformedData };
},
columns, columns,
formConfig: { formConfig: {
labelWidth: 120, labelWidth: 120,
schemas: searchFormSchema, schemas: searchFormSchema,
}, },
isTreeTable: true, isTreeTable: false,
pagination: false, pagination: false,
striped: false, striped: false,
useSearchForm: true, useSearchForm: true,
...@@ -72,12 +81,50 @@ ...@@ -72,12 +81,50 @@
}, },
}); });
/**改变列表结构 列表->树*/
function transformData(data) {
treeData.value = handleTree(data, 'businessId',undefined,undefined,undefined)
return treeData.value
}
/**结构转换方法*/
function handleTree(data, id, parentId, children, rootId) {
id = id || 'id'
parentId = parentId || 'parentId'
children = children || 'children'
rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
// 对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data))
// 循环所有项
const treeData = cloneData.filter(father => {
const branchArr = cloneData.filter(child => {
// 返回每一项的子级数组
return father[id] === child[parentId]
})
branchArr.length > 0 ? father.children = branchArr : ''
// 返回第一层
return father[parentId] === rootId
})
return treeData !== '' ? treeData : data
}
/**新增*/
function handleCreate() { function handleCreate() {
openDrawer(true, { openDrawer(true, {
isUpdate: false, isUpdate: false,
}); });
} }
/**在列表里新增菜单*/
function handleAdd(record: Recordable) {
openDrawer(true, {
isAdd: true,
isUpdate: false,
record,
});
}
/**编辑*/
function handleEdit(record: Recordable) { function handleEdit(record: Recordable) {
openDrawer(true, { openDrawer(true, {
record, record,
...@@ -85,6 +132,7 @@ ...@@ -85,6 +132,7 @@
}); });
} }
/**删除*/
async function handleDelete(record: Recordable) { async function handleDelete(record: Recordable) {
await deleteById(record.businessId); await deleteById(record.businessId);
createMessage.success('删除成功!'); createMessage.success('删除成功!');
......
...@@ -121,7 +121,6 @@ export const formSchema: FormSchema[] = [ ...@@ -121,7 +121,6 @@ export const formSchema: FormSchema[] = [
field: 'jumpType', field: 'jumpType',
label: '跳转类型', label: '跳转类型',
component: 'RadioButtonGroup', component: 'RadioButtonGroup',
defaultValue: 'R',
componentProps: { componentProps: {
options: [ options: [
{ label: '正常路由跳转', value: 'R' }, { label: '正常路由跳转', value: 'R' },
...@@ -139,7 +138,7 @@ export const formSchema: FormSchema[] = [ ...@@ -139,7 +138,7 @@ export const formSchema: FormSchema[] = [
required: true, required: true,
}, },
{ {
field: 'parentMenu', field: 'parentId',
label: '上级菜单', label: '上级菜单',
component: 'TreeSelect', component: 'TreeSelect',
componentProps: { componentProps: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment