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

import useUrlState from "@ahooksjs/use-url-state";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Button, Form, message, Modal, Space, Tabs, Tag } from "antd";
import { useEffect, 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: "按钮" },
];
const MENU_ATTRIBUTION_ENUM = [
  { bianma: "gwjapp", name: "港务局app" },
];

function Menu(props) {
  const [currentId, setCurrentId] = useState("");
  const [currentSort, setCurrentSort] = useState(0);
  const [addModalVisible, setAddModalVisible] = useState(false);
  const [parentId, setParentId] = useState(0);
  const [parentName, setParentName] = useState("");

  const [urlState, setUrlState] = useUrlState({
    menuAttribution: MENU_ATTRIBUTION_ENUM[0].bianma,
  }, {
    navigateMode: "replace",
  });
  const { tableProps, getData } = useTable(props["appMenuListTree"], {
    params: { eqMenuAttribution: urlState.menuAttribution },
    usePagination: false,
  });

  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>
            <Button
              type="primary"
              icon={(<AddIcon />)}
              onClick={() => {
                setAddModalVisible(true);
                setParentId(0);
                setParentName("");
                setCurrentSort(tableProps.dataSource.length + 1);
              }}
            >
              新增一级菜单
            </Button>
          </Space>
        )}
        headerTitle={(
          <Tabs
            activeKey={urlState.menuAttribution}
            items={MENU_ATTRIBUTION_ENUM.map(item => ({ key: item.bianma, label: item.name }))}
            onChange={(event) => {
              setUrlState({ menuAttribution: event });
              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 + 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}
          />
        )
      }
    </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: "menuName", label: "名称" },
          { name: "menuUrl", label: "路径" },
          { name: "menuPerms", label: "标识" },
          { name: "menuType", label: "类型", render: FORM_ITEM_RENDER_ENUM.RADIO, items: MENU_TYPE_ENUM },
          {
            name: "sort",
            label: "排序",
            render: FORM_ITEM_RENDER_ENUM.NUMBER,
            rules: [{ pattern: /^\d*$/, message: "请输入整数" }],
          },
        ]}
      />
    </Modal>
  );
};

const AddModal = Connect([NS_APP_MENU], true)(AddModalComponent);

export default Connect([NS_APP_MENU], true)(Menu);