aldehyde 0.2.479 → 0.2.481

package/src/aldehyde/welcome/components/user-menus.tsx

@@ -1,279 +1,279 @@
-import React, { useState, useEffect, useMemo, useContext } from "react";
-import { Button, theme, Drawer, Tree, Empty, Space, Flex, Row, Col, Divider } from "antd";
-import { RocketTwoTone, PlusOutlined } from "@ant-design/icons";
-import { useNavigate } from "react-router-dom";
-import "antd/dist/reset.css";
-import HcserviceV3 from "../../tmpl/hcservice-v3";
-import { Level2Menu, ThemeConfig } from "../../tmpl/interface";
-import IconFont from "../../icon/aliIcon";
-import { useLocale } from "../../locale/useLocale";
-import Units from "../../units";
-import { KeepAliveTabContext } from '../../layout2/tabs/tabs-context';
-import "./user-menus.less";
-
-const { useToken } = theme;
-
-/**
- * 我的
- * 我的菜单、用户页面自定义配置
- * 
- */
-
-// 查询指定节点
-const findNodeById = (tree, type, value) => {
-  for (const node of tree) {
-    if (node[type] === value) return node;
-    if (node.children?.length) {
-      const found = findNodeById(node.children, type, value);
-      if (found) return found;
-    }
-  }
-  return null;
-}
-
-interface MenuType extends Level2Menu {
-  url: string;
-  children?: MenuType[];
-}
-
-interface Props {
-  menus: MenuType[];
-  leafMenus: MenuType[];
-  themeConfig?: ThemeConfig;
-}
-
-interface DrawerProps {
-  open: boolean;
-  onClose: () => void;
-  menus: MenuType[];
-  selectMenus: string[];
-  onOk: (val: string[]) => void;
-  btnLoading: boolean;
-}
-
-interface PageConfig extends Level2Menu {
-  url?: string;
-  children?: { name: string, content: string, menuCode: string; recordCode: string }[];
-}
-
-const RenderDrawer = (props: DrawerProps) => {
-  const { open, onClose, menus, selectMenus, onOk, btnLoading } = props;
-  const [checkMenus, setCheckMenus] = useState<string[]>([]);
-  const [drawerSize, setDrawerSize] = useState<number | string>();
-  const { translate } = useLocale();
-
-  useEffect(() => {
-    setCheckMenus(selectMenus);
-  }, [selectMenus]);
-
-  const handleTreeData = (arr: MenuType[]) => {
-    return arr.map(item => {
-      const newItem = { ...item, key: item.id, title: translate("${" + item.title + "}") };
-      if (newItem.children && Array.isArray(newItem.children)) {
-        newItem.children = handleTreeData(newItem.children);
-      }
-      return newItem;
-    });
-  }
-
-  const treeData = useMemo(() => {
-    if (!menus?.length) {
-      return [];
-    }
-    const temMenus = handleTreeData(menus);
-    return temMenus;
-  }, [menus]);
-
-  const defaultExpandedKeys = useMemo(() => menus.map(r => r.id), menus);
-
-  return <Drawer
-    title={translate("我的菜单")}
-    onClose={onClose}
-    open={open}
-    size={drawerSize}
-    resizable={{ onResize: (newSize => setDrawerSize(newSize)) }}
-    styles={{ body: { minWidth: "280px" }, title: { whiteSpace: "nowrap" } }}
-    extra={
-      <Button loading={btnLoading} type="primary" disabled={!treeData?.length} onClick={() => onOk(checkMenus)}>{translate("${保存}")}</Button>
-    }
-  >
-    {treeData?.length ?
-      <Tree
-        checkStrictly
-        defaultExpandedKeys={defaultExpandedKeys}
-        checkable
-        multiple
-        checkedKeys={checkMenus}
-        selectedKeys={checkMenus}
-        onSelect={(val) => setCheckMenus(val as string[])}
-        onCheck={(val: any) => setCheckMenus(val.checked)}
-        treeData={treeData}
-      /> :
-      <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
-  </Drawer>;
-}
-
-const Index = (props: Props) => {
-  const { menus, leafMenus, themeConfig } = props;
-  const [quickMenu, setQuickMenu] = useState<MenuType[]>([]);
-  const [drawerOpen, setDrawerOpen] = useState<boolean>(false);
-  const [pageConfigs, setPageConfigs] = useState<PageConfig[]>([]);
-  const [loading, setLoading] = useState<boolean>(false);
-  const navigate = useNavigate();
-  const { translate } = useLocale();
-  const { token } = useToken();
-  const { closeTab } = useContext(KeepAliveTabContext);
-
-  const getQuickMenu = async () => {
-    let temData = await HcserviceV3.getQuickMenu();
-    const temMenu = temData?.map(item => {
-      const menuItem = findNodeById(menus, "id", item.menuCode);
-      return menuItem;
-    })?.filter(Boolean);
-    setQuickMenu(temMenu || []);
-  };
-
-  const selectMenuIds = useMemo(() => quickMenu?.map(r => r.id), [quickMenu]);
-
-  const getPageConfigCommon = async () => {
-    const pageConfig = await HcserviceV3.getPageConfigCommon();
-    if (!pageConfig) {
-      return;
-    }
-    const config = pageConfig.reduce((total, item) => {
-      if (total[item.menuCode]) {
-        total[item.menuCode].children.push(item);
-      } else {
-        const menu = leafMenus.find(r => r.id === item.menuCode);
-        if (!menu) {
-          return total;
-        }
-        total[item.menuCode] = { ...menu, children: [item] };
-      }
-      return total;
-    }, {});
-    const arr: PageConfig[] = Object.values(config);
-    setPageConfigs(arr);
-  }
-
-  useEffect(() => {
-    if (menus?.length && themeConfig?.allowUsermenu) {
-      getQuickMenu();
-    }
-  }, [menus, themeConfig]);
-
-  useEffect(() => {
-    if (themeConfig?.allowUserConfig && leafMenus?.length) {
-      getPageConfigCommon();
-    }
-  }, [leafMenus, themeConfig])
-
-  // 更新我的菜单
-  const onChangeQuickMenu = async (codes: string[]) => {
-    setLoading(true);
-    const status = await HcserviceV3.postQuickMenu(codes);
-    setLoading(false);
-    if (!status) {
-      return;
-    }
-    setDrawerOpen(false);
-    getQuickMenu();
-  }
-
-  // 我的菜单项渲染
-  const renderItem = (item: MenuType, type?: string) => {
-    const renderIcon = item.icon ? <IconFont type={item.icon} /> : type === "add" ? <PlusOutlined /> : <RocketTwoTone />;
-    const iconColor = item.themeColor || token.colorPrimary;
-    return <div className="user-menu-item" onClick={() => type === "add" ? setDrawerOpen(true) : navigate(`/${item.url}`)}>
-      <div className="user-menu-item-bg" style={{ background: ` ${iconColor}1A` }} />
-      <div className={`icon-wrapper`} style={{ color: iconColor, background: ` ${iconColor}1A` }}>
-        <div className="icon-animated">{renderIcon}</div>
-      </div>
-      <span className="menu-title">{translate("${" + item.title + "}")}</span>
-    </div>;
-  };
-
-  // 自定义菜单跳转
-  const onClickPageConfig = (val: { menuCode: string, content: string, url: string }) => {
-    if (!val.url) {
-      return;
-    }
-    const { criteriaData, ...content } = val.content ? JSON.parse(val.content) : {};
-    Units.setUserPageConfig(val.menuCode, content);
-    let serial_number = new Date().getTime();
-    const temUrl = val.url.split("?")[0];
-    // 关闭指定页面，清除缓存
-    closeTab(`/${temUrl}`);
-    if (criteriaData) {
-      const newfliter = Units.transQueryParamsToStr({ ...criteriaData, serial_number });
-      navigate(`/${temUrl}?${newfliter}`);
-    } else {
-      navigate(`/${val.url}`);
-    }
-  }
-
-  // 自定义菜单项渲染
-  const renderPageConfigItem = (item: PageConfig) => {
-    const renderIcon = item.icon ? <IconFont type={item.icon} /> : <RocketTwoTone />;
-    const iconColor = item.themeColor || token.colorPrimary;
-    const children = item.children || [];
-    return <div className="page-config-item-card" style={{ borderColor: `${token.colorBorder}CC`, backgroundColor: token.colorBgContainer }} onClick={() => navigate(`/${item.url}`)}>
-      <Space size={16} align="start" >
-        <div className="icon-wrapper" style={{ color: iconColor, background: `${iconColor}1A` }}>
-          <div className="icon-animated">{renderIcon}</div>
-        </div>
-        <div>
-          <h3 className="item-title" onClick={() => navigate(`/${item.url}`)}>{translate("${" + item.title + "}")}</h3>
-          <Flex gap="small" align="center" wrap>
-            {children.map((cItem) => (
-              <span
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onClickPageConfig({ ...cItem, url: item.url });
-                }}
-                key={cItem.recordCode} className="tag" style={{ color: iconColor, background: `${iconColor}1A` }}>
-                {translate("${" + cItem.name + "}")}
-              </span>
-            ))}
-          </Flex>
-        </div>
-      </Space>
-    </div>;
-  };
-
-  return <><div className="user-menus" style={{ borderColor: `${token.colorBorder}CC`, backgroundColor: token.colorBgContainer }}>
-    <div className="heard">
-      <div className="title">
-        <div className="line" style={{ background: token.colorPrimary }} />
-        <h3 className="text">{translate("${我的}")}</h3>
-      </div>
-      {themeConfig?.allowUsermenu ?
-        <div className="setting">
-          <Button type="link" icon={<IconFont type="icon-icon-test8" />} onClick={() => setDrawerOpen(true)}>{translate("${设置}")}</Button>
-        </div> : ""}
-    </div>
-    {themeConfig?.allowUsermenu ?
-      <div className="user-menus-items-grid">
-        {quickMenu.map((item) => renderItem(item))}
-        {renderItem({ title: translate("${添加}"), themeColor: token.colorPrimary } as MenuType, "add")}
-      </div> : ""}
-    {themeConfig?.allowUserConfig && themeConfig?.allowUsermenu && pageConfigs?.length ? <Divider /> : ""}
-    {themeConfig?.allowUserConfig && pageConfigs?.length ? <>
-      <div className="heard">
-        <div className="title">
-          <div className="line" style={{ background: token.colorPrimary }} />
-          <h3 className="text">{translate("${自定义菜单}")}</h3>
-        </div>
-      </div>
-      <div className="user-page-config">
-        <Row gutter={[16, 16]}>
-          {pageConfigs.map((item) => <Col span={8}>{renderPageConfigItem(item)}</Col>)}
-        </Row>
-      </div>
-    </> : ""}
-  </div>
-    {drawerOpen ? <RenderDrawer open={drawerOpen} onClose={() => setDrawerOpen(false)} onOk={onChangeQuickMenu} menus={menus} selectMenus={selectMenuIds} btnLoading={loading} /> : ""}
-  </>;
-}
-
-export default Index;
+import React, { useState, useEffect, useMemo, useContext } from "react";
+import { Button, theme, Drawer, Tree, Empty, Space, Flex, Row, Col, Divider } from "antd";
+import { RocketTwoTone, PlusOutlined } from "@ant-design/icons";
+import { useNavigate } from "react-router-dom";
+import "antd/dist/reset.css";
+import HcserviceV3 from "../../tmpl/hcservice-v3";
+import { Level2Menu, ThemeConfig } from "../../tmpl/interface";
+import IconFont from "../../icon/aliIcon";
+import { useLocale } from "../../locale/useLocale";
+import Units from "../../units";
+import { KeepAliveTabContext } from '../../layout2/tabs/tabs-context';
+import "./user-menus.less";
+
+const { useToken } = theme;
+
+/**
+ * 我的
+ * 我的菜单、用户页面自定义配置
+ * 
+ */
+
+// 查询指定节点
+const findNodeById = (tree, type, value) => {
+  for (const node of tree) {
+    if (node[type] === value) return node;
+    if (node.children?.length) {
+      const found = findNodeById(node.children, type, value);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+interface MenuType extends Level2Menu {
+  url: string;
+  children?: MenuType[];
+}
+
+interface Props {
+  menus: MenuType[];
+  leafMenus: MenuType[];
+  themeConfig?: ThemeConfig;
+}
+
+interface DrawerProps {
+  open: boolean;
+  onClose: () => void;
+  menus: MenuType[];
+  selectMenus: string[];
+  onOk: (val: string[]) => void;
+  btnLoading: boolean;
+}
+
+interface PageConfig extends Level2Menu {
+  url?: string;
+  children?: { name: string, content: string, menuCode: string; recordCode: string }[];
+}
+
+const RenderDrawer = (props: DrawerProps) => {
+  const { open, onClose, menus, selectMenus, onOk, btnLoading } = props;
+  const [checkMenus, setCheckMenus] = useState<string[]>([]);
+  const [drawerSize, setDrawerSize] = useState<number | string>();
+  const { translate } = useLocale();
+
+  useEffect(() => {
+    setCheckMenus(selectMenus);
+  }, [selectMenus]);
+
+  const handleTreeData = (arr: MenuType[]) => {
+    return arr.map(item => {
+      const newItem = { ...item, key: item.id, title: translate("${" + item.title + "}") };
+      if (newItem.children && Array.isArray(newItem.children)) {
+        newItem.children = handleTreeData(newItem.children);
+      }
+      return newItem;
+    });
+  }
+
+  const treeData = useMemo(() => {
+    if (!menus?.length) {
+      return [];
+    }
+    const temMenus = handleTreeData(menus);
+    return temMenus;
+  }, [menus]);
+
+  const defaultExpandedKeys = useMemo(() => menus.map(r => r.id), menus);
+
+  return <Drawer
+    title={translate("我的菜单")}
+    onClose={onClose}
+    open={open}
+    size={drawerSize}
+    resizable={{ onResize: (newSize => setDrawerSize(newSize)) }}
+    styles={{ body: { minWidth: "280px" }, title: { whiteSpace: "nowrap" } }}
+    extra={
+      <Button loading={btnLoading} type="primary" disabled={!treeData?.length} onClick={() => onOk(checkMenus)}>{translate("${保存}")}</Button>
+    }
+  >
+    {treeData?.length ?
+      <Tree
+        checkStrictly
+        defaultExpandedKeys={defaultExpandedKeys}
+        checkable
+        multiple
+        checkedKeys={checkMenus}
+        selectedKeys={checkMenus}
+        onSelect={(val) => setCheckMenus(val as string[])}
+        onCheck={(val: any) => setCheckMenus(val.checked)}
+        treeData={treeData}
+      /> :
+      <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
+  </Drawer>;
+}
+
+const Index = (props: Props) => {
+  const { menus, leafMenus, themeConfig } = props;
+  const [quickMenu, setQuickMenu] = useState<MenuType[]>([]);
+  const [drawerOpen, setDrawerOpen] = useState<boolean>(false);
+  const [pageConfigs, setPageConfigs] = useState<PageConfig[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const navigate = useNavigate();
+  const { translate } = useLocale();
+  const { token } = useToken();
+  const { closeTab } = useContext(KeepAliveTabContext);
+
+  const getQuickMenu = async () => {
+    let temData = await HcserviceV3.getQuickMenu();
+    const temMenu = temData?.map(item => {
+      const menuItem = findNodeById(menus, "id", item.menuCode);
+      return menuItem;
+    })?.filter(Boolean);
+    setQuickMenu(temMenu || []);
+  };
+
+  const selectMenuIds = useMemo(() => quickMenu?.map(r => r.id), [quickMenu]);
+
+  const getPageConfigCommon = async () => {
+    const pageConfig = await HcserviceV3.getPageConfigCommon();
+    if (!pageConfig) {
+      return;
+    }
+    const config = pageConfig.reduce((total, item) => {
+      if (total[item.menuCode]) {
+        total[item.menuCode].children.push(item);
+      } else {
+        const menu = leafMenus.find(r => r.id === item.menuCode);
+        if (!menu) {
+          return total;
+        }
+        total[item.menuCode] = { ...menu, children: [item] };
+      }
+      return total;
+    }, {});
+    const arr: PageConfig[] = Object.values(config);
+    setPageConfigs(arr);
+  }
+
+  useEffect(() => {
+    if (menus?.length && themeConfig?.allowUsermenu) {
+      getQuickMenu();
+    }
+  }, [menus, themeConfig]);
+
+  useEffect(() => {
+    if (themeConfig?.allowUserConfig && leafMenus?.length) {
+      getPageConfigCommon();
+    }
+  }, [leafMenus, themeConfig])
+
+  // 更新我的菜单
+  const onChangeQuickMenu = async (codes: string[]) => {
+    setLoading(true);
+    const status = await HcserviceV3.postQuickMenu(codes);
+    setLoading(false);
+    if (!status) {
+      return;
+    }
+    setDrawerOpen(false);
+    getQuickMenu();
+  }
+
+  // 我的菜单项渲染
+  const renderItem = (item: MenuType, type?: string) => {
+    const renderIcon = item.icon ? <IconFont type={item.icon} /> : type === "add" ? <PlusOutlined /> : <RocketTwoTone />;
+    const iconColor = item.themeColor || token.colorPrimary;
+    return <div className="user-menu-item" onClick={() => type === "add" ? setDrawerOpen(true) : navigate(`/${item.url}`)}>
+      <div className="user-menu-item-bg" style={{ background: ` ${iconColor}1A` }} />
+      <div className={`icon-wrapper`} style={{ color: iconColor, background: ` ${iconColor}1A` }}>
+        <div className="icon-animated">{renderIcon}</div>
+      </div>
+      <span className="menu-title">{translate("${" + item.title + "}")}</span>
+    </div>;
+  };
+
+  // 自定义菜单跳转
+  const onClickPageConfig = (val: { menuCode: string, content: string, url: string }) => {
+    if (!val.url) {
+      return;
+    }
+    const { criteriaData, ...content } = val.content ? JSON.parse(val.content) : {};
+    Units.setUserPageConfig(val.menuCode, content);
+    let serial_number = new Date().getTime();
+    const temUrl = val.url.split("?")[0];
+    // 关闭指定页面，清除缓存
+    closeTab(`/${temUrl}`);
+    if (criteriaData) {
+      const newfliter = Units.transQueryParamsToStr({ ...criteriaData, serial_number });
+      navigate(`/${temUrl}?${newfliter}`);
+    } else {
+      navigate(`/${val.url}`);
+    }
+  }
+
+  // 自定义菜单项渲染
+  const renderPageConfigItem = (item: PageConfig) => {
+    const renderIcon = item.icon ? <IconFont type={item.icon} /> : <RocketTwoTone />;
+    const iconColor = item.themeColor || token.colorPrimary;
+    const children = item.children || [];
+    return <div className="page-config-item-card" style={{ borderColor: `${token.colorBorder}CC`, backgroundColor: token.colorBgContainer }} onClick={() => navigate(`/${item.url}`)}>
+      <Space size={16} align="start" >
+        <div className="icon-wrapper" style={{ color: iconColor, background: `${iconColor}1A` }}>
+          <div className="icon-animated">{renderIcon}</div>
+        </div>
+        <div>
+          <h3 className="item-title" onClick={() => navigate(`/${item.url}`)}>{translate("${" + item.title + "}")}</h3>
+          <Flex gap="small" align="center" wrap>
+            {children.map((cItem) => (
+              <span
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onClickPageConfig({ ...cItem, url: item.url });
+                }}
+                key={cItem.recordCode} className="tag" style={{ color: iconColor, background: `${iconColor}1A` }}>
+                {translate("${" + cItem.name + "}")}
+              </span>
+            ))}
+          </Flex>
+        </div>
+      </Space>
+    </div>;
+  };
+
+  return <><div className="user-menus" style={{ borderColor: `${token.colorBorder}CC`, backgroundColor: token.colorBgContainer }}>
+    <div className="heard">
+      <div className="title">
+        <div className="line" style={{ background: token.colorPrimary }} />
+        <h3 className="text">{translate("${我的}")}</h3>
+      </div>
+      {themeConfig?.allowUsermenu ?
+        <div className="setting">
+          <Button type="link" icon={<IconFont type="icon-icon-test8" />} onClick={() => setDrawerOpen(true)}>{translate("${设置}")}</Button>
+        </div> : ""}
+    </div>
+    {themeConfig?.allowUsermenu ?
+      <div className="user-menus-items-grid">
+        {quickMenu.map((item) => renderItem(item))}
+        {renderItem({ title: translate("${添加}"), themeColor: token.colorPrimary } as MenuType, "add")}
+      </div> : ""}
+    {themeConfig?.allowUserConfig && themeConfig?.allowUsermenu && pageConfigs?.length ? <Divider /> : ""}
+    {themeConfig?.allowUserConfig && pageConfigs?.length ? <>
+      <div className="heard">
+        <div className="title">
+          <div className="line" style={{ background: token.colorPrimary }} />
+          <h3 className="text">{translate("${自定义菜单}")}</h3>
+        </div>
+      </div>
+      <div className="user-page-config">
+        <Row gutter={[16, 16]}>
+          {pageConfigs.map((item) => <Col span={8}>{renderPageConfigItem(item)}</Col>)}
+        </Row>
+      </div>
+    </> : ""}
+  </div>
+    {drawerOpen ? <RenderDrawer open={drawerOpen} onClose={() => setDrawerOpen(false)} onOk={onChangeQuickMenu} menus={menus} selectMenus={selectMenuIds} btnLoading={loading} /> : ""}
+  </>;
+}
+
+export default Index;