zcloud-gbs-appmenu-react/src/pages/Container/AppMenu/Menu/index.js

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 } 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="#108ee9">{getLabelName({ list: MENU_TYPE_ENUM, status: record.menuType })}</Tag>
            ),
          },
          {
            title: "操作",
            width: 200,
            fixed: "right",
            render: (_, record) => (
              <Space>
                <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: 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, permsGroupName: 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.permsGroupName })),
    });
    if (success) {
      message.success("保存成功");
      props.onCancel();
    }
  };

  return (
    <Modal
      open
      title="角色绑定"
      maskClosable={false}
      width={800}
      onCancel={props.onCancel}
      onOk={onSubmit}
      confirmLoading={props.appMenu.appMenuLoading}
    >
      <Table
        rowSelection={{
          selectedRowKeys,
          onChange: (selectedRowKeys, selectedRows) => {
            setSelectedRowKeys(selectedRowKeys);
            selectedRowsRef.current = selectedRows;
          },
        }}
        options={false}
        disabledResizer={true}
        columns={[
          { title: "角色名称（权限组）", dataIndex: "permsGroupName" },
        ]}
        {...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);