Skip to content

B
bigDataSystem
Commit cea2999c authored by baiyinhao's avatar baiyinhao
Browse files
Options

修改菜单-新增菜单类型标记

parent b361c818
Hide whitespace changes
Inline Side-by-side
Showing with 115 additions and 81 deletions
src/views/system/menu/MenuDrawer.vue
View file @ cea2999c
......@@ -15,9 +15,8 @@
import { BasicForm, useForm } from '@/components/Form';
import { formSchema } from './menu.data';
import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
import { menuDetailApi,menuUpdataApi,getMenuList,addMenuApi } from "@/api/system/menu/menu";
import {useMessage} from "@/hooks/web/useMessage";
import { menuDetailApi, menuUpdataApi, getMenuList, addMenuApi } from '@/api/system/menu/menu';
import { useMessage } from '@/hooks/web/useMessage';
defineOptions({ name: 'MenuDrawer' });
const emit = defineEmits(['success', 'register']);
......@@ -41,30 +40,30 @@
// 获取行数据的菜单id
menuId.value = data.record.businessId;
// 通过id获取菜单详情信息
menuDetailApi(menuId.value).then(res => {
const form = res.data
menuDetailApi(menuId.value).then((res) => {
const form = res.data;
// 塞值
setFieldsValue({
...form,
});
})
});
}
if (unref(isAdd)){
if (unref(isAdd)) {
// 通过id获取菜单详情信息
const id = data.record.businessId
const id = data.record.businessId;
const params = {
parentId: id,
}
};
// 塞值
setFieldsValue({
...params,
});
}
var treeData = []
var treeData = [];
const res = await getMenuList();
const menu = { businessId: 0,parentId: 0 ,menuName: '主类目', children: [] }
menu.children = handleTree(res.data, 'businessId',undefined,undefined,undefined)
treeData.push(menu)
const menu = { businessId: 0, parentId: 0, menuName: '主类目', children: [] };
menu.children = handleTree(res.data, 'businessId', undefined, undefined, undefined);
treeData.push(menu);
updateSchema({
field: 'parentId',
componentProps: { treeData },
......@@ -77,15 +76,18 @@
const formData = await validate();
setDrawerProps({ confirmLoading: true });
// 编辑
if(unref(isUpdate)) {
formData.businessId = menuId.value
menuUpdataApi(formData).then(res => {
if(res.code === 200){
if (unref(isUpdate)) {
formData.businessId = menuId.value;
menuUpdataApi(formData).then((res) => {
if (res.code === 200) {
createMessage.success('编辑成功');
closeDrawer();
emit('success', { isUpdate: unref(isUpdate), values: { ...formData, businessId: menuId.value } });
emit('success', {
isUpdate: unref(isUpdate),
values: { ...formData, businessId: menuId.value },
});
}
})
});
} else {
//新增
const paramsAdd = {
......@@ -102,14 +104,18 @@
path: formData.path,
perms: formData.perms,
component: formData.component,
}
addMenuApi(paramsAdd).then(res => {
if(res.code === 200){
remarks: formData.remarks,
};
addMenuApi(paramsAdd).then((res) => {
if (res.code === 200) {
createMessage.success('新增成功');
closeDrawer();
emit('success', { isUpdate: unref(isUpdate), values: { ...formData, businessId: menuId.value } });
emit('success', {
isUpdate: unref(isUpdate),
values: { ...formData, businessId: menuId.value },
});
}
})
});
}
} finally {
setDrawerProps({ confirmLoading: false });
......@@ -118,22 +124,30 @@
/**结构转换方法*/
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
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 cloneData = JSON.parse(JSON.stringify(data));
// 循环所有项
const treeData = cloneData.filter(father => {
const branchArr = cloneData.filter(child => {
const treeData = cloneData.filter((father) => {
const branchArr = cloneData.filter((child) => {
// 返回每一项的子级数组
return father[id] === child[parentId]
})
branchArr.length > 0 ? father.children = branchArr : ''
return father[id] === child[parentId];
});
branchArr.length > 0 ? (father.children = branchArr) : '';
// 返回第一层
return father[parentId] === rootId
})
return treeData !== '' ? treeData : data
return father[parentId] === rootId;
});
return treeData !== '' ? treeData : data;
}
</script>
src/views/system/menu/index.vue
View file @ cea2999c
......@@ -9,17 +9,17 @@
<TableAction
:actions="[
{
label:'新增',
label: '新增',
onClick: handleAdd.bind(null, record),
},
{
// icon: 'clarity:note-edit-line',
label:'修改',
label: '修改',
onClick: handleEdit.bind(null, record),
},
{
// icon: 'ant-design:delete-outlined',
label:'删除',
label: '删除',
color: 'error',
popConfirm: {
title: '是否确认删除',
......@@ -40,12 +40,12 @@
import { useDrawer } from '@/components/Drawer';
import MenuDrawer from './MenuDrawer.vue';
import { columns, searchFormSchema } from './menu.data';
import { deleteById,getMenuListByPage } from "@/api/system/menu/menu";
import { useMessage } from "@/hooks/web/useMessage";
import { ref,reactive,unref,onDeactivated,onMounted,nextTick } from 'vue';
import { useRoute,onBeforeRouteLeave } from 'vue-router';
import { deleteById, getMenuListByPage } from '@/api/system/menu/menu';
import { useMessage } from '@/hooks/web/useMessage';
import { ref, reactive, unref, onDeactivated, onMounted, nextTick } from 'vue';
import { useRoute, onBeforeRouteLeave } from 'vue-router';
import { useFilterStore } from '@/store/modules/filterData';
import { useUserStore } from "@/store/modules/user";
import { useUserStore } from '@/store/modules/user';
defineOptions({ name: 'MenuManagement' });
const filterStore = useFilterStore();
......@@ -53,7 +53,7 @@
const { createMessage } = useMessage();
const [registerDrawer, { openDrawer }] = useDrawer();
const treeData = ref();
const [registerTable, { reload, expandAll,getForm }] = useTable({
const [registerTable, { reload, expandAll, getForm }] = useTable({
title: '菜单列表',
api: async (params) => {
const response = await getMenuListByPage(params);
......@@ -85,29 +85,37 @@
/**改变列表结构 列表->树*/
function transformData(data) {
treeData.value = handleTree(data, 'businessId',undefined,undefined,undefined)
return treeData.value
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
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 cloneData = JSON.parse(JSON.stringify(data));
// 循环所有项
const treeData = cloneData.filter(father => {
const branchArr = cloneData.filter(child => {
const treeData = cloneData.filter((father) => {
const branchArr = cloneData.filter((child) => {
// 返回每一项的子级数组
return father[id] === child[parentId]
})
branchArr.length > 0 ? father.children = branchArr : ''
return father[id] === child[parentId];
});
branchArr.length > 0 ? (father.children = branchArr) : '';
// 返回第一层
return father[parentId] === rootId
})
return treeData !== '' ? treeData : data
return father[parentId] === rootId;
});
return treeData !== '' ? treeData : data;
}
/**新增*/
......@@ -152,31 +160,29 @@
/**进入页面的初始化方法*/
onMounted(() => {
const path = route.path
if(filterStore.getSearchParams[path]) {
if(JSON.parse(filterStore.getSearchParams[path] !== {})){
const params = JSON.parse(filterStore.getSearchParams[path])
const path = route.path;
if (filterStore.getSearchParams[path]) {
if (JSON.parse(filterStore.getSearchParams[path] !== {})) {
const params = JSON.parse(filterStore.getSearchParams[path]);
getForm().setFieldsValue({
page: params.page,
pageSize: params.pageSize,
menuName: params.menuName,
flag: params.flag,
})
});
}
}
});
/**离开路由前调用的钩子函数*/
onBeforeRouteLeave((to, from, next) => {
const params = Object.assign({},getForm().getFieldsValue());
filterStore.setSearchParams(
{
path: from.path,
param: {
...params
}
}
)
const params = Object.assign({}, getForm().getFieldsValue());
filterStore.setSearchParams({
path: from.path,
param: {
...params,
},
});
next(); // 允许导航
});
</script>
src/views/system/menu/menu.data.ts
View file @ cea2999c
import { BasicColumn, FormSchema } from '@/components/Table';
import { h } from 'vue';
import {Switch, Tag} from 'ant-design-vue';
import { Switch, Tag } from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue';
import {useMessage} from "@/hooks/web/useMessage";
import {setMenuStatus} from "@/api/system/menu/menu";
import { useMessage } from '@/hooks/web/useMessage';
import { setMenuStatus } from '@/api/system/menu/menu';
export const columns: BasicColumn[] = [
{
......@@ -65,12 +65,12 @@ export const columns: BasicColumn[] = [
path: record.path,
perms: record.perms,
component: record.component,
}
};
setMenuStatus(params)
.then(() => {
record.flag = newStatus;
const text = record.flag === '1' ? '启用' : '停用'
createMessage.success( text + `成功`);
const text = record.flag === '1' ? '启用' : '停用';
createMessage.success(text + `成功`);
})
.catch(() => {
// createMessage.error('操作失败');
......@@ -260,4 +260,18 @@ export const formSchema: FormSchema[] = [
],
ifShow: ({ values }) => !isButton(values.menuType),
},
{
field: 'remarks',
label: '菜单类型标记',
component: 'Select',
componentProps: {
placeholder: '请选择菜单类型',
options: [
{ label: '第一模块', value: '1' },
{ label: '第二模块', value: '2' },
{ label: '第三模块', value: '3' },
{ label: '第四模块', value: '4' },
],
},
},
];
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