351 lines
10 KiB
JavaScript
351 lines
10 KiB
JavaScript
import useUrlState from "@ahooksjs/use-url-state";
|
||
import { ApiOutlined } from "@ant-design/icons";
|
||
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
||
import { Button, Form, message, Modal, Space, Tabs, Tag } from "antd";
|
||
import { useEffect, useRef, useState } from "react";
|
||
import FormBuilder from "zy-react-library/components/FormBuilder";
|
||
import AddIcon from "zy-react-library/components/Icon/AddIcon";
|
||
import Page from "zy-react-library/components/Page";
|
||
import Table from "zy-react-library/components/Table";
|
||
import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
|
||
import useTable from "zy-react-library/hooks/useTable";
|
||
import { getLabelName, getMatchedItems } from "zy-react-library/utils";
|
||
import { NS_APP_MENU } from "~/enumerate/namespace";
|
||
|
||
const MENU_TYPE_ENUM = [
|
||
{ bianma: 1, name: "菜单" },
|
||
{ bianma: 2, name: "按钮" },
|
||
];
|
||
|
||
function Menu(props) {
|
||
const [currentId, setCurrentId] = useState("");
|
||
const [currentSort, setCurrentSort] = useState(0);
|
||
const [addModalVisible, setAddModalVisible] = useState(false);
|
||
const [roleBindingModalVisible, setRoleBindingModalVisible] = useState(false);
|
||
const [parentId, setParentId] = useState(0);
|
||
const [parentName, setParentName] = useState("");
|
||
const [menuAttribution, setMenuAttribution] = useState([]);
|
||
|
||
const [urlState, setUrlState] = useUrlState({
|
||
menuAttribution: "",
|
||
menuAttributionName: "",
|
||
}, {
|
||
navigateMode: "replace",
|
||
});
|
||
const { tableProps, getData } = useTable(props["appMenuListTree"], {
|
||
params: { eqMenuAttribution: urlState.menuAttribution },
|
||
usePagination: false,
|
||
manual: true,
|
||
});
|
||
|
||
const getMenuAppByTenantId = async () => {
|
||
const { data } = await props["appMenuGetMenuAppByTenantId"]();
|
||
setMenuAttribution(data);
|
||
const menuAttribution = data?.[0]?.menuAttribution;
|
||
const menuAttributionName = data?.[0]?.menuAttributionName;
|
||
setUrlState({ menuAttribution, menuAttributionName });
|
||
menuAttribution && getData();
|
||
};
|
||
|
||
useEffect(() => {
|
||
getMenuAppByTenantId();
|
||
}, []);
|
||
|
||
const onDelete = (id) => {
|
||
Modal.confirm({
|
||
title: "删除",
|
||
content: "确定要删除吗？",
|
||
okText: "确定",
|
||
cancelText: "取消",
|
||
onOk: async () => {
|
||
const { success } = await props["appMenuDelete"]({ id });
|
||
if (success) {
|
||
message.success("删除成功");
|
||
getData();
|
||
}
|
||
},
|
||
});
|
||
};
|
||
|
||
return (
|
||
<Page isShowAllAction={false}>
|
||
<Table
|
||
showIndexColumn={false}
|
||
toolBarRender={() => (
|
||
<Space>
|
||
{urlState.menuAttribution
|
||
&& (
|
||
<>
|
||
<Button
|
||
type="primary"
|
||
icon={(<AddIcon />)}
|
||
onClick={() => {
|
||
setAddModalVisible(true);
|
||
setParentId(0);
|
||
setParentName("");
|
||
setCurrentSort(tableProps.dataSource.length + 1);
|
||
}}
|
||
>
|
||
新增一级菜单
|
||
</Button>
|
||
<Button
|
||
type="primary"
|
||
ghost
|
||
icon={(<ApiOutlined />)}
|
||
onClick={() => {
|
||
setRoleBindingModalVisible(true);
|
||
}}
|
||
>
|
||
角色绑定
|
||
</Button>
|
||
</>
|
||
)}
|
||
</Space>
|
||
)}
|
||
headerTitle={(
|
||
<Tabs
|
||
activeKey={urlState.menuAttribution}
|
||
items={menuAttribution.map(item => ({ key: item.menuAttribution, label: item.menuAttributionName }))}
|
||
onChange={(event) => {
|
||
setUrlState({
|
||
menuAttribution: event,
|
||
menuAttributionName: menuAttribution.find(item => item.menuAttribution === event)?.menuAttributionName,
|
||
});
|
||
getData();
|
||
}}
|
||
/>
|
||
)}
|
||
columns={[
|
||
{ title: "名称", dataIndex: "menuName" },
|
||
{ title: "路径", dataIndex: "menuUrl" },
|
||
{ title: "标识", dataIndex: "menuPerms" },
|
||
{
|
||
title: "类型",
|
||
dataIndex: "menuType",
|
||
render: (_, record) => (
|
||
<Tag color={record.menuType === 1 ? "#108ee9" : "#8788ed"}>
|
||
{getLabelName({
|
||
list: MENU_TYPE_ENUM,
|
||
status: record.menuType,
|
||
})}
|
||
</Tag>
|
||
),
|
||
},
|
||
{
|
||
title: "操作",
|
||
width: 200,
|
||
fixed: "right",
|
||
render: (_, record) => (
|
||
<Space>
|
||
{record.menuType === 1 && (
|
||
<Button
|
||
type="link"
|
||
onClick={() => {
|
||
setAddModalVisible(true);
|
||
setParentId(record.id);
|
||
setParentName(record.menuName);
|
||
setCurrentSort((record.children?.length || 0) + 1);
|
||
}}
|
||
>
|
||
新增子级
|
||
</Button>
|
||
)}
|
||
<Button
|
||
type="link"
|
||
onClick={() => {
|
||
setAddModalVisible(true);
|
||
setParentId(record.id);
|
||
setCurrentId(record.id);
|
||
setParentName(record.menuName);
|
||
}}
|
||
>
|
||
修改
|
||
</Button>
|
||
<Button
|
||
type="link"
|
||
danger
|
||
onClick={() => {
|
||
onDelete(record.id);
|
||
}}
|
||
>
|
||
删除
|
||
</Button>
|
||
</Space>
|
||
),
|
||
},
|
||
]}
|
||
{...tableProps}
|
||
/>
|
||
{
|
||
addModalVisible && (
|
||
<AddModal
|
||
onCancel={() => {
|
||
setAddModalVisible(false);
|
||
setCurrentId("");
|
||
setParentId(0);
|
||
setParentName("");
|
||
setCurrentSort(0);
|
||
}}
|
||
getData={getData}
|
||
id={currentId}
|
||
parentId={parentId}
|
||
parentName={parentName}
|
||
sort={currentSort}
|
||
menuAttribution={urlState.menuAttribution}
|
||
/>
|
||
)
|
||
}
|
||
{
|
||
roleBindingModalVisible && (
|
||
<RoleBindingModal
|
||
onCancel={() => {
|
||
setRoleBindingModalVisible(false);
|
||
}}
|
||
menuAttribution={urlState.menuAttribution}
|
||
menuAttributionName={urlState.menuAttributionName}
|
||
/>
|
||
)
|
||
}
|
||
</Page>
|
||
);
|
||
}
|
||
|
||
const AddModalComponent = (props) => {
|
||
const [form] = Form.useForm();
|
||
|
||
const getData = async () => {
|
||
const { data } = await props["appMenuInfo"]({ id: props.id });
|
||
form.setFieldsValue(data);
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (props.id) {
|
||
getData();
|
||
}
|
||
}, [props.id]);
|
||
|
||
const onSubmit = async (values) => {
|
||
const { success } = await props[props.id ? "appMenuUpdate" : "appMenuAdd"]({
|
||
...values,
|
||
id: props.id,
|
||
parentId: props.parentId,
|
||
menuAttribution: props.menuAttribution,
|
||
});
|
||
if (success) {
|
||
message.success("保存成功");
|
||
props.onCancel();
|
||
props.getData();
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Modal
|
||
open
|
||
title={props.id ? "修改" : "新增"}
|
||
maskClosable={false}
|
||
width={600}
|
||
onCancel={props.onCancel}
|
||
onOk={form.submit}
|
||
confirmLoading={props.appMenu.appMenuLoading}
|
||
>
|
||
<FormBuilder
|
||
showActionButtons={false}
|
||
span={24}
|
||
labelCol={{ span: 6 }}
|
||
loading={props.appMenu.appMenuLoading}
|
||
form={form}
|
||
onFinish={onSubmit}
|
||
values={{
|
||
menuType: 1,
|
||
sort: props.sort,
|
||
}}
|
||
options={[
|
||
{
|
||
name: "parentName",
|
||
label: "父级",
|
||
required: false,
|
||
render: (<Tag color="#108ee9">{props.parentName || "无（此项为顶级）"}</Tag>),
|
||
},
|
||
{
|
||
name: "menuType",
|
||
label: "类型",
|
||
render: FORM_ITEM_RENDER_ENUM.RADIO,
|
||
items: props.parentId === 0 ? getMatchedItems({ list: MENU_TYPE_ENUM, value: [1] }) : MENU_TYPE_ENUM,
|
||
},
|
||
{ name: "menuName", label: "名称" },
|
||
{ name: "menuUrl", label: "路径", useConstraints: false },
|
||
{ name: "menuPerms", label: "标识", useConstraints: false },
|
||
{ name: "sort", label: "排序", onlyForLabel: true },
|
||
]}
|
||
/>
|
||
</Modal>
|
||
);
|
||
};
|
||
|
||
const RoleBindingModalComponent = (props) => {
|
||
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
|
||
|
||
const selectedRowsRef = useRef([]);
|
||
|
||
const { tableProps } = useTable(props["systemPermsGroupsList"], {
|
||
useStorageQueryCriteria: false,
|
||
});
|
||
|
||
const getData = async () => {
|
||
const { data } = await props["appMenuGetMenuRoleByMenuAttribution"]({ menuAttribution: props.menuAttribution });
|
||
setSelectedRowKeys(data.map(item => item.roleId));
|
||
selectedRowsRef.current = data.map(item => ({ id: item.roleId, roleName: item.roleName }));
|
||
};
|
||
|
||
useEffect(() => {
|
||
getData();
|
||
}, []);
|
||
|
||
const onSubmit = async () => {
|
||
const { success } = await props["appMenuGetMenuRoleByMenuAttributionSave"]({
|
||
menuAttribution: props.menuAttribution,
|
||
menuAttributionName: props.menuAttributionName,
|
||
roleList: selectedRowsRef.current.map(item => ({ roleId: item.id, roleName: item.roleName })),
|
||
});
|
||
if (success) {
|
||
message.success("保存成功");
|
||
props.onCancel();
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Modal
|
||
open
|
||
title="角色绑定"
|
||
maskClosable={false}
|
||
width={800}
|
||
onCancel={props.onCancel}
|
||
onOk={onSubmit}
|
||
confirmLoading={props.appMenu.appMenuLoading}
|
||
>
|
||
<div style={{ fontSize: 12, color: "red", marginBottom: 10 }}>注：取消勾选会清空角色的APP使用权限，请谨慎操作！</div>
|
||
<Table
|
||
rowSelection={{
|
||
preserveSelectedRowKeys: true,
|
||
selectedRowKeys,
|
||
onChange: (selectedRowKeys, selectedRows) => {
|
||
setSelectedRowKeys(selectedRowKeys);
|
||
selectedRowsRef.current = selectedRows;
|
||
},
|
||
}}
|
||
options={false}
|
||
disabledResizer={true}
|
||
columns={[
|
||
{ title: "角色名称（权限组）", dataIndex: "roleName" },
|
||
]}
|
||
{...tableProps}
|
||
/>
|
||
</Modal>
|
||
);
|
||
};
|
||
|
||
const AddModal = Connect([NS_APP_MENU], true)(AddModalComponent);
|
||
const RoleBindingModal = Connect([NS_APP_MENU], true)(RoleBindingModalComponent);
|
||
|
||
export default Connect([NS_APP_MENU], true)(Menu);
|