+ {helper(
+ "菜单名称",
+ "menuName",
+ [{ max: 20, message: '长度不能超过20个字符' },{required: true, message: "菜单名称不能为空"}],
+
+ )}
+ {helper(
+ "上级菜单",
+ "parentKey",
+ [],
+ setTreeSelectValue(value)}
+ />,
+ )}
+ {helper(
+ "路由",
+ "location",
+ [{ max: 100, message: '长度不能超过100个字符' }],
+
+ )}
+ {helper(
+ "前端图标",
+ "icon",
+ [{ max: 100, message: '长度不能超过100个字符' }],
+
+ )}
+ {helper(
+ "是否显示",
+ "hidden",
+ [],
+
+ 是
+ 否
+ ,
+ )}
+ {helper(
+ "环境",
+ "urlType",
+ [],
+ ,
+ )}
+
+ )
+
+ //菜单是否启用
+ function changeMenuStatus(checked, MenuId){
+ updateMenuStatus(MenuId, checked ? 1: 0).then(response=>{
+ if(response && response.message=='success'){
+ message.success("状态更新成功");
+ setReload(Math.random());
+ }else{
+ message.error('状态更新失败');
+ }
+ })
+ }
+
+ function addMenu(){
+ validateFields((error, values) => {
+ if(!error){
+ // 获取用户输入的内容
+ const params = {
+ name: values.menuName,
+ title: values.menuName,
+ parentKey: parseInt(values.parentKey || 0),
+ location: values.location,
+ icon: values.icon,
+ hidden: values.hidden,
+ level: parseInt(values.parentKey)+1,
+ urlType:values.urlType,
+ }
+ createMenu(params).then(response=>{
+ if(response && response.message=='success'){
+ message.success("菜单新建成功");
+ setReload(Math.random());
+ setMenuDetailModal(false);
+ }
+ })
+ }
+ })
+ }
+
+ //删除菜单
+ function deleteMenuById(menuId){
+ // 获取用户输入的内容
+ deleteMenu(menuId).then(response=>{
+ if(response && response.message=='success'){
+ message.success("菜单删除成功");
+ setReload(Math.random());
+ }else{
+ message.error('菜单删除失败');
+ }
+ })
+ }
+
+ //编辑菜单
+ function editMenuDetail(roleDetail){
+ setEditMenuId(roleDetail.key);
+ setFieldsValue({
+ menuName: roleDetail.name,
+ parentKey: roleDetail.parentKey.toString(),
+ location: roleDetail.location,
+ icon: roleDetail.icon,
+ hidden: roleDetail.hidden,
+ urlType: roleDetail.urlType
+ });
+ setEditMenuModal(true);
+ }
+
+ // 编辑菜单信息
+ function editMenu(){
+ validateFields((error, values) => {
+ if(!error){
+ // 获取用户输入的内容
+ const params = {
+ ...values,
+ title: values.menuName,
+ name: values.menuName,
+ }
+ updateMenu(editMenuId, params).then(response=>{
+ if(response && response.message=='success'){
+ setReload(Math.random());
+ setEditMenuModal(false);
+ message.success("菜单更新成功");
+ }else{
+ message.error('菜单更新失败');
+ }
+ })
+ }
+ })
+ }
+
+ // 遍历数组，对象新增value属性，新增或者修改菜单 选择上级菜单需要使用
+ function valueFun(menus) {
+ const treeList = menus.slice(0, menus.length);
+ treeList.map(item=>{
+ item.value = item.key;
+ if (Array.isArray(item.children) && item.children.length > 0) {
+ valueFun(item.children);
+ }
+ })
+ treeList.unshift({key:'0', value: '0', title: "无上级菜单"});
+ setTreeNode(treeList);
+ }
+
+ useEffect(()=>{
+ setLoading(true);
+ treeList().then(response=>{
+ if(response && response.message=='success'){
+ setDataList(response.data);
+ valueFun(response.data);
+ }
+ }).finally(()=>{
+ setLoading(false);
+ })
+ },[reload])
+
+ return (
+ changeRoleStatus(checked, record.id)}/>
+ // }
+ // },
+ {
+ title: '操作',
+ key: 'action',
+ dataIndex: 'id',
+ align: 'center',
+ render: (text, record) => {
+ return(
+
+
+
+ deleteRoleById(text)}>
+
+
+
+ )},
+ },
+ ]
+ }, [curPage]);
+
+ const roleDetail =(
+
+ {helper(
+ "角色名称",
+ "name",
+ [{ max: 20, message: '长度不能超过20个字符'},
+ { required: true, message: "角色名称不能为空"},
+ { validator: (rule, value, callback)=>{
+ // 角色名称是否存在 要过滤掉编辑菜单项的初始值
+ const filter = dataList.filter(item=>{ return item.id !== editRoleId && item.name === value});
+ filter.length>0 ? callback('此角色名称已存在'):callback();
+ }}],
+
+ )}
+ {helper(
+ "描述",
+ "description",
+ [{ max: 500, message: '长度不能超过500个字符'}],
+