init

src/api/appMenu/index.js

@@ -21,6 +21,10 @@ export const appMenuInfo = declareRequest(
   `Get > /appmenu/appMenu/{id}`,
 );
 export const appMenuPermsGroupsList = declareRequest(
+  "appMenuDistributionMenuLoading",
+  `Get > /appmenu/menuRoleRelational/list`,
+);
+export const systemPermsGroupsList = declareRequest(
   "appMenuDistributionMenuLoading",
   `Get > /system/operation/perms-groups`,
 );
@@ -32,3 +36,31 @@ export const appMenuGetAlreadyDistributionMenu = declareRequest(
   "appMenuDistributionMenuLoading",
   `Get > /appmenu/roleMenu/listAllByRoleIdByPc`,
 );
+export const appMenuGetAppTenant = declareRequest(
+  "appMenuDistributionMenuLoading",
+  `Get > /appmenu/tenantAppRelational/getAppTenant`,
+);
+export const systemTenantsList = declareRequest(
+  "appMenuDistributionMenuLoading",
+  `Get > /system/tenants`,
+);
+export const appMenuGetTenantAppByMenuAttribution = declareRequest(
+  "appMenuDistributionMenuLoading",
+  `Get > /appmenu/tenantAppRelational/getTenantAppByMenuAttribution/{menuAttribution}`,
+);
+export const appMenuTenantAppRelationalSave = declareRequest(
+  "appMenuDistributionMenuLoading",
+  `Post > @/appmenu/tenantAppRelational/tenantAppRelationalSave`,
+);
+export const appMenuGetMenuAppByTenantId = declareRequest(
+  "appMenuDistributionMenuLoading",
+  `Get > /appmenu/tenantAppRelational/getMenuAppByTenantId`,
+);
+export const appMenuGetMenuRoleByMenuAttribution = declareRequest(
+  "appMenuDistributionMenuLoading",
+  `Get > /appmenu/menuRoleRelational/getMenuRoleByMenuAttribution/{menuAttribution}`,
+);
+export const appMenuGetMenuRoleByMenuAttributionSave = declareRequest(
+  "appMenuDistributionMenuLoading",
+  `Post > @/appmenu/menuRoleRelational/menuRoleRelationalSave`,
+);

src/pages/Container/AppMenu/App/index.js

@@ -0,0 +1,142 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Button, message, Modal } from "antd";
+import { useEffect, useRef, useState } from "react";
+import Page from "zy-react-library/components/Page";
+import Table from "zy-react-library/components/Table";
+import useDictionary from "zy-react-library/hooks/useDictionary";
+import useTable from "zy-react-library/hooks/useTable";
+import { NS_APP_MENU } from "~/enumerate/namespace";
+
+function App(props) {
+  const [list, setList] = useState([]);
+  const [configModalVisible, setConfigModalVisible] = useState(false);
+  const [currentInfo, setCurrentInfo] = useState({});
+
+  const { getDictionary } = useDictionary();
+
+  const getData = async () => {
+    const dictionary = await getDictionary({ dictValue: "APP_TYPE_ZC" });
+    const { data } = await props["appMenuGetAppTenant"]();
+
+    const corpMap = data.reduce((map, item) => {
+      map[item.menuAttribution] = item.corpList;
+      return map;
+    }, {});
+
+    const updatedDictionary = dictionary.map(item => ({
+      ...item,
+      tenantName: corpMap[item.dictValue]?.map(item => item.corpName)?.join(",") || null,
+    }));
+
+    setList(updatedDictionary);
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return (
+    <Page isShowAllAction={false}>
+      <Table
+        columns={[
+          { title: "APP名称", dataIndex: "dictLabel" },
+          { title: "所属租户", dataIndex: "tenantName" },
+          {
+            title: "操作",
+            width: 100,
+            fixed: "right",
+            render: (_, record) => (
+              <Button
+                type="link"
+                onClick={() => {
+                  setCurrentInfo(record);
+                  setConfigModalVisible(true);
+                }}
+              >
+                租户配置
+              </Button>
+            ),
+          },
+        ]}
+        dataSource={list}
+        pagination={false}
+      />
+      {
+        configModalVisible && (
+          <ConfigModal
+            onCancel={() => {
+              setConfigModalVisible(false);
+              setCurrentInfo({});
+            }}
+            info={currentInfo}
+            getData={getData}
+          />
+        )
+      }
+    </Page>
+  );
+}
+
+const ConfigModalComponent = (props) => {
+  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+
+  const selectedRowsRef = useRef([]);
+
+  const { tableProps } = useTable(props["systemTenantsList"], {
+    useStorageQueryCriteria: false,
+  });
+
+  const getTenantAppByMenuAttribution = async () => {
+    const { data } = await props["appMenuGetTenantAppByMenuAttribution"]({ menuAttribution: props.info.dictValue });
+    setSelectedRowKeys(data.map(item => item.corpId));
+    selectedRowsRef.current = data.map(item => ({ id: item.corpId, tenantName: item.corpName }));
+  };
+
+  useEffect(() => {
+    getTenantAppByMenuAttribution();
+  }, []);
+
+  const onSubmit = async () => {
+    const { success } = await props["appMenuTenantAppRelationalSave"]({
+      menuAttribution: props.info.dictValue,
+      menuAttributionName: props.info.dictLabel,
+      corpList: selectedRowsRef.current.map(item => ({ corpId: item.id, corpName: item.tenantName })),
+    });
+    if (success) {
+      message.success("保存成功");
+      props.onCancel();
+      props.getData();
+    }
+  };
+
+  return (
+    <Modal
+      open
+      title="租户配置"
+      maskClosable={false}
+      onCancel={props.onCancel}
+      onOk={onSubmit}
+      width={800}
+      confirmLoading={props.appMenu.appMenuDistributionMenuLoading}
+    >
+      <Table
+        headerTitle={<span style={{ color: "red", fontSize: 14 }}>注：取消勾选会清空租户下已有角色的APP使用权限，请谨慎操作！</span>}
+        rowSelection={{
+          selectedRowKeys,
+          onChange: (selectedRowKeys, selectedRows) => {
+            setSelectedRowKeys(selectedRowKeys);
+            selectedRowsRef.current = selectedRows;
+          },
+        }}
+        options={false}
+        disabledResizer={true}
+        columns={[{ title: "租户名称", dataIndex: "tenantName" }]}
+        {...tableProps}
+      />
+    </Modal>
+  );
+};
+
+const ConfigModal = Connect([NS_APP_MENU], true)(ConfigModalComponent);
+
+export default Connect([NS_APP_MENU], true)(App);

src/pages/Container/AppMenu/DistributionMenu/index.js

@@ -1,24 +1,36 @@
 import { Connect } from "@cqsjjb/jjb-dva-runtime";
-import { Button, message, Modal, Space, Tree } from "antd";
+import { Button, Form, message, Modal, Space, Tree } from "antd";
 import { useEffect, useRef, useState } from "react";
 import Page from "zy-react-library/components/Page";
+import Search from "zy-react-library/components/Search";
 import Table from "zy-react-library/components/Table";
 import useTable from "zy-react-library/hooks/useTable";
 import { NS_APP_MENU } from "~/enumerate/namespace";
 
 function DistributionMenu(props) {
-  const [currentId, setCurrentId] = useState("");
+  const [currentInfo, setCurrentInfo] = useState({});
   const [distributionMenuModalVisible, setDistributionMenuModalVisible] = useState(false);
 
-  const { tableProps, getData } = useTable(props["appMenuPermsGroupsList"]);
+  const [form] = Form.useForm();
+
+  const { tableProps, getData } = useTable(props["appMenuPermsGroupsList"], {
+    form,
+  });
 
   return (
     <Page isShowAllAction={false}>
+      <Search
+        labelCol={{ span: 7 }}
+        options={[
+          { name: "likeRoleName", label: "角色名称（权限组）" },
+        ]}
+        form={form}
+        onFinish={getData}
+      />
       <Table
         columns={[
-          { title: "权限组名称", dataIndex: "permsGroupName" },
+          { title: "角色名称（权限组）", dataIndex: "roleName" },
-          { title: "权限类型", dataIndex: ["groupTypeEnum", "label"] },
+          { title: "所属APP", dataIndex: "menuAttributionName" },
-          { title: "启用状态", dataIndex: ["statusEnum", "label"] },
           {
             title: "操作",
             width: 200,
@@ -28,11 +40,11 @@ function DistributionMenu(props) {
                 <Button
                   type="link"
                   onClick={() => {
-                    setCurrentId(record.id);
+                    setCurrentInfo(record);
                     setDistributionMenuModalVisible(true);
                   }}
                 >
-                  分配菜单
+                  权限配置
                 </Button>
               </Space>
             ),
@@ -43,10 +55,10 @@ function DistributionMenu(props) {
       {
         distributionMenuModalVisible && (
           <DistributionMenuModal
-            id={currentId}
+            info={currentInfo}
             onCancel={() => {
               setDistributionMenuModalVisible(false);
-              setCurrentId("");
+              setCurrentInfo({});
             }}
             getData={getData}
           />
@@ -65,10 +77,10 @@ const DistributionMenuModalComponent = (props) => {
   const halfCheckedKeys = useRef([]);
 
   const getData = async () => {
-    const { data: menuListTree } = await props["appMenuListTree"]({ eqMenuAttribution: "gwjapp" });
+    const { data: menuListTree } = await props["appMenuListTree"]({ eqMenuAttribution: props.info.menuAttribution });
     setMenuListTree(menuListTree);
 
-    const { data } = await props["appMenuGetAlreadyDistributionMenu"]({ roleId: props.id });
+    const { data } = await props["appMenuGetAlreadyDistributionMenu"]({ roleId: props.info.roleId });
     setCheckedKeys(data.map(item => item.menuId));
   };
 
@@ -78,7 +90,7 @@ const DistributionMenuModalComponent = (props) => {
 
   const onSubmit = async () => {
     const { success } = await props["appMenuDistributionMenu"]({
-      roleId: props.id,
+      roleId: props.info.roleId,
       menuIdList: checkedKeys,
       halfCheckMenuIdList: halfCheckedKeys.current,
     });

src/pages/Container/AppMenu/Menu/index.js

@@ -1,7 +1,8 @@
 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, useState } from "react";
+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";
@@ -15,27 +16,41 @@ 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 [roleBindingModalVisible, setRoleBindingModalVisible] = useState(false);
   const [parentId, setParentId] = useState(0);
   const [parentName, setParentName] = useState("");
+  const [menuAttribution, setMenuAttribution] = useState([]);
 
   const [urlState, setUrlState] = useUrlState({
-    menuAttribution: MENU_ATTRIBUTION_ENUM[0].bianma,
+    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: "删除",
@@ -58,26 +73,44 @@ function Menu(props) {
         showIndexColumn={false}
         toolBarRender={() => (
           <Space>
-            <Button
+            {urlState.menuAttribution
-              type="primary"
+              && (
-              icon={(<AddIcon />)}
+                <>
-              onClick={() => {
+                  <Button
-                setAddModalVisible(true);
+                    type="primary"
-                setParentId(0);
+                    icon={(<AddIcon />)}
-                setParentName("");
+                    onClick={() => {
-                setCurrentSort(tableProps.dataSource.length + 1);
+                      setAddModalVisible(true);
-              }}
+                      setParentId(0);
-            >
+                      setParentName("");
-              新增一级菜单
+                      setCurrentSort(tableProps.dataSource.length + 1);
-            </Button>
+                    }}
+                  >
+                    新增一级菜单
+                  </Button>
+                  <Button
+                    type="primary"
+                    ghost
+                    icon={(<ApiOutlined />)}
+                    onClick={() => {
+                      setRoleBindingModalVisible(true);
+                    }}
+                  >
+                    角色绑定
+                  </Button>
+                </>
+              )}
           </Space>
         )}
         headerTitle={(
           <Tabs
             activeKey={urlState.menuAttribution}
-            items={MENU_ATTRIBUTION_ENUM.map(item => ({ key: item.bianma, label: item.name }))}
+            items={menuAttribution.map(item => ({ key: item.menuAttribution, label: item.menuAttributionName }))}
             onChange={(event) => {
-              setUrlState({ menuAttribution: event });
+              setUrlState({
+                menuAttribution: event,
+                menuAttributionName: menuAttribution.find(item => item.menuAttribution === event)?.menuAttributionName,
+              });
               getData();
             }}
           />
@@ -105,7 +138,7 @@ function Menu(props) {
                     setAddModalVisible(true);
                     setParentId(record.id);
                     setParentName(record.menuName);
-                    setCurrentSort(record.children.length + 1);
+                    setCurrentSort((record.children?.length || 0) + 1);
                   }}
                 >
                   新增子级
@@ -155,6 +188,17 @@ function Menu(props) {
           />
         )
       }
+      {
+        roleBindingModalVisible && (
+          <RoleBindingModal
+            onCancel={() => {
+              setRoleBindingModalVisible(false);
+            }}
+            menuAttribution={urlState.menuAttribution}
+            menuAttributionName={urlState.menuAttributionName}
+          />
+        )
+      }
     </Page>
   );
 }
@@ -219,18 +263,74 @@ const AddModalComponent = (props) => {
           { name: "menuUrl", label: "路径" },
           { name: "menuPerms", label: "标识" },
           { name: "menuType", label: "类型", render: FORM_ITEM_RENDER_ENUM.RADIO, items: MENU_TYPE_ENUM },
-          {
+          { name: "sort", label: "排序", onlyForLabel: true },
-            name: "sort",
-            label: "排序",
-            render: FORM_ITEM_RENDER_ENUM.NUMBER,
-            rules: [{ pattern: /^\d*$/, message: "请输入整数" }],
-          },
         ]}
       />
     </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);