@bit-sun/business-component 2.0.37 → 2.0.39-alpha.0

package/src/components/Business/BsLayouts/Components/AllFunc/drawContent.tsx

@@ -0,0 +1,112 @@
+// @ts-nocheck
+import { List, Tooltip } from 'antd';
+import React, { useEffect, useState, } from 'react';
+import { Link, formatMessage } from 'umi';
+import './index.less';
+import classNames from 'classnames';
+import right from '../../../../../assets/right.png';
+import ENUM from '@/utils/enumConfig';
+export type SiderTheme = 'light' | 'dark';
+
+const DrawContent = ({onClose, itemPath}: any) => {
+  const routes = JSON.parse(localStorage.getItem(`customerMenu_${itemPath}_front`) || '[]');
+  const btnAuth = JSON.parse(localStorage.getItem(ENUM.BROWSER_CACHE.MAIN_AUTH_CODES) || '[]');
+  const [homepageData, sethomepageData]: any = useState([]);
+  const [routesData, setroutesData]: any = useState([]);
+
+  useEffect(() => {
+    const homepageDataList: any[] = []; //不含子集的菜单
+    const routesDataList: any[] = []; //含子集的菜单
+    routes.forEach(item => {
+      if (btnAuth.find((d: any) => d === item.code)) {
+      }
+      if (item.children) {
+        routesDataList.push(item);
+      } else {
+        homepageDataList.push(item);
+      }
+    })
+    sethomepageData(homepageDataList)
+    setroutesData(routesDataList)
+  }, []);
+
+  const renderChildItem = (child) => {
+    if (!child.hideInMenu && child.children) {
+      return (
+        <>
+          <List.Item style={{color: '#000', fontWeight: 'bold' }}>
+            {formatMessage({ id: `${child.locale}` })}
+          </List.Item>
+          {child.children.map((menuItem: any) => {
+            return renderChildItem(menuItem)
+          })}
+        </>
+      );
+    } else if (!child.hideInMenu && child.path) {
+      return (
+        <List.Item style={{ fontSize: '12px' }} className="allFuncOnMouserover">
+          <Link to={child.path} onClick={onClose}>
+            <Tooltip
+              title={formatMessage({ id: `${child.locale}` })}
+            >
+              {formatMessage({ id: `${child.locale}` }).length > 10
+                ? `${formatMessage({
+                  id: `${child.name}`,
+                }).slice(0, 10)}...`
+                : formatMessage({ id: `${child.locale}` })}
+            </Tooltip>
+            <img className="allFuncOnMouseroverImg" src={right}></img>
+          </Link>
+        </List.Item>
+      );
+    }
+  }
+
+
+  return (
+    <div className='allfunc_drawcontent'>
+    <p className={'drawerWarp_p'}>您的当前权限可以使用以下功能：</p>
+    <div className={'drawerWarp'}>
+      {homepageData && homepageData.filter((d) => !d.hideInMenu).length > 0 && (
+        <List
+          className={classNames('allFunsList', 'allFunsListWarp')}
+          dataSource={homepageData}
+          renderItem={(child: any) => {
+            if (!child.hideInMenu && child.path) {
+              return (
+                <div className={classNames('allFunsListWarp')}>
+                  <List.Item
+                    className={classNames('allFuncOnMouserover')}
+                    style={{ padding: '12px 24px' }}
+                  >
+                    <Link to={child.path} onClick={onClose}>
+                      {formatMessage({ id: `${child.name}` })}
+                      <img className="allFuncOnMouseroverImg" src={right}></img>
+                    </Link>
+                  </List.Item>
+                </div>
+              );
+            }
+          }}
+        />
+      )}
+      {routesData.map((item, index) => {
+        return (
+          <List
+            className={classNames('allFunsList', 'allFunsListWarp')}
+            style={{color: '#005CFF'}}
+            header={<b>{formatMessage({ id: `${item.name}` })}</b>}
+            bordered
+            dataSource={item.children}
+            renderItem={(child: any) => {
+              return renderChildItem(child)
+            }}
+          />
+        );
+      })}
+    </div>
+  </div>
+  )
+}
+
+export default DrawContent;

package/src/components/Business/BsLayouts/Components/AllFunc/index.less

@@ -0,0 +1,153 @@
+
+
+.menu {
+  .anticon {
+    margin-right: 8px;
+  }
+  .ant-dropdown-menu-item {
+    min-width: 160px;
+  }
+}
+
+.right {
+  display: flex;
+  float: right;
+  height: 48px;
+  margin-left: auto;
+  overflow: hidden;
+  .action {
+    display: flex;
+    align-items: center;
+    height: 48px;
+    padding: 0 12px;
+    cursor: pointer;
+    transition: all 0.3s;
+    > span {
+      vertical-align: middle;
+    }
+    &:hover {
+      background: rgba(0, 0, 0, 0.025);
+    }
+    .opened {
+      background: rgba(0, 0, 0, 0.025);
+    }
+  }
+  .search {
+    padding: 0 12px;
+    &:hover {
+      background: transparent;
+    }
+  }
+  .account {
+    .avatar {
+      margin-right: 8px;
+      color: #1890ff;
+      vertical-align: top;
+      background: rgba(255, 255, 255, 0.85);
+    }
+  }
+}
+
+.dark {
+  .action {
+    &:hover {
+      background: #252a3d;
+    }
+    .opened {
+      background: #252a3d;
+    }
+  }
+}
+
+.warp_allfunc {
+  z-index: 100;
+  
+  
+  .drawerWarp {
+    column-count: 4;
+  }
+  
+  .drawer_header_warp {
+    .ant-list-header {
+      padding: 0 0 0 10px !important;
+      line-height: 40px;
+      border: 0px !important;
+      b {
+        width: 100%;
+        display: inline-block;
+        border-bottom: 1px solid #f0f0f0;
+      }
+    }
+    .ant-list-item {
+      padding: 0 0 0 10px !important;
+      line-height: 30px !important;
+    }
+  
+    .ant-drawer-close {
+      position: absolute;
+      right: 0;
+    }
+  }
+  
+  
+  
+  .p {
+    color: #b1bad4;
+    font-weight: 400;
+    font-size: 12px;
+    margin-bottom: 10px;
+    font-family: PingFangSC, PingFangSC-Regular;
+    line-height: 16px;
+    text-align: left;
+    opacity: 0.8;
+    user-select: none;
+    text-align: center;
+    margin-left: 8px;
+  }
+  
+  .btn {
+    display: flex;
+    align-items: center;
+    height: 44px;
+    color: #b1bad4;
+    background: #10234c;
+    border-radius: 8px;
+    width: 130px;
+    user-select: none;
+  }
+  .btn:hover,
+  .btnSpan1:hover,
+  .btnSpan2:hover {
+    cursor: pointer;
+    color: #b1bad4;
+  }
+
+  .btnSpan1 {
+    margin: 0 7px;
+  }
+}
+
+.allfunc_drawcontent {
+  .allFunsList {
+    margin-bottom: 10px;
+  }
+  
+  .allFunsListWarp {
+    width: 200px;
+    margin-right: 10px;
+    border-radius: 4px;
+  
+    break-inside: avoid;
+  }
+  
+  .drawerWarp_p {
+    color: #8c8c8c;
+    font-weight: 400;
+    font-size: 14px;
+    font-family: PingFangSC, PingFangSC-Regular;
+    line-height: 20px;
+    text-align: left;
+  }
+}
+
+

package/src/components/Business/BsLayouts/Components/AllFunc/index.tsx

@@ -0,0 +1,70 @@
+
+// @ts-nocheck
+import { Drawer } from 'antd';
+import React, { useEffect, useState, forwardRef, useImperativeHandle } from 'react';
+import './index.less';
+import allfunc from '../../../../../assets/allfunc.svg';
+import DrawContent from './drawContent';
+export type SiderTheme = 'light' | 'dark';
+
+const AllFunc: any = forwardRef(({ isCollapse, handleClose, itemPath }: any, ref) => {
+  const [isDrawer, setIsDrawer]: any = useState(false);
+  useImperativeHandle(ref, () => ({
+    close: () => {
+      setIsDrawer(false)
+    }
+  }));
+
+  useEffect(() => {
+    if (isCollapse) {
+      setIsDrawer(false);
+    }
+  }, [isCollapse]);
+  const showDrawer = (e) => {
+    if (isCollapse) {
+      return;
+    }
+    handleClose()
+    e.stopPropagation();
+    setIsDrawer(!isDrawer);
+  };
+  const onClose = () => {
+    setIsDrawer(!isDrawer);
+  };
+
+
+  return (
+    <div
+      className={'warp_allfunc'}
+      onClick={(e: any) => {
+        e.stopPropagation();
+      }}
+      style={{ opacity: isCollapse ? '0' : '1' }}
+    >
+      <p className={'p'}>没有找到想要的功能？</p>
+
+      <p className={'btn'} onClick={showDrawer}>
+        <span className={'btnSpan1'}>
+          <img style={{marginTop: '-2px'}} width={18} src={allfunc} />
+        </span>
+        <span className={'btnSpan2'}>查看全部功能</span>
+      </p>
+      {!isCollapse && (
+        <Drawer
+          style={{ left: isDrawer ? 140 : 0, top:50 }}
+          destroyOnClose
+          title={<span style={{ fontWeight: 'bold', fontSize: 18 }}>全部功能</span>}
+          zIndex={19}
+          width={850}
+          className={'drawer_header_warp'}
+          placement="left"
+          onClose={onClose}
+          visible={isDrawer}
+        >
+         <DrawContent itemPath={itemPath} onClose={onClose} />
+        </Drawer>
+      )}
+    </div>
+  );
+});
+export default AllFunc;

package/src/components/Business/BsLayouts/Components/CustomerMenu/MenuSetting/index.less

@@ -0,0 +1,90 @@
+.setting_content>div {
+  width: 50%;
+  box-sizing: border-box;
+  // float: left;
+  margin: 0 10px;
+}
+
+.setting_content {
+  display: flex;
+}
+
+
+.tree_title {
+  height: 50px;
+}
+
+.tree_content {
+  height: 400px;
+  overflow: auto;
+  border: 1px solid #d9d9d9;
+  padding: 5px;
+}
+
+.setting_content::after {
+  clear: both;
+  display: block;
+  content: '';
+}
+
+.choosed_label_color {
+  color: #f50;
+}
+
+.left_tree_content {
+  .ant-tree .ant-tree-node-content-wrapper {
+    flex-grow: 1;
+    .ant-tree-title {
+      width: 100%;
+    }
+  }
+  .ant-tree .ant-tree-treenode {
+    width: 100%;
+  }
+}
+
+.right_tree_content, .left_tree_content {
+  .ant-tree .ant-tree-node-content-wrapper {
+    display: flex;
+    margin-left: -3px;
+  }
+  .ant-tree-checkbox {
+      top: auto;
+      top: initial;
+      // margin: 4px 3px 0 0 !important;
+  }
+}
+
+.node_title_content:hover {
+  .right_arrow {
+    display: block !important;
+  }
+}
+
+.right_arrow {
+  float: right;
+  display: none;
+  color: #999999;
+  margin-right: 10px;
+}
+
+
+
+.right_tree_content {
+  .ant-tree-title {
+    width: 100%;
+    display: inline-block;
+    padding-right: 10px;
+  }
+  .ant-dropdown-trigger {
+    color: gray !important;
+  }
+  .tree_node_title {
+    font-size: 20px;
+    color: #d9d9d9;
+    float: right;
+    span {
+      margin-right: 5px;
+    }
+  }
+}

package/src/components/Business/BsLayouts/Components/CustomerMenu/MenuSetting/index.tsx

@@ -0,0 +1,38 @@
+import React, {
+  useState,
+  forwardRef,
+  useImperativeHandle
+} from "react";
+import './index.less';
+import LeftTree from "./leftTree";
+import RightTree from "./rightTree";
+ 
+const MenuSetting = forwardRef(({actionRef, originRoutes, itemPath}: any, ref) => {
+
+  const [customerMenuData, setCustomerMenuData] = useState(
+    JSON.parse( localStorage.getItem(`customerMenu_${itemPath}_front`) || '[]')
+  );
+
+  useImperativeHandle(ref, () => ({
+    saveMenuData: () => {
+      localStorage.setItem(`customerMenu_${itemPath}_front`, JSON.stringify(customerMenuData));
+      actionRef.current?.reload();
+    },
+  }));
+
+  return (
+    <div className={'setting_content'}>
+      <LeftTree
+        originRoutes={originRoutes}
+        customerMenuData={customerMenuData}
+        setCustomerMenuData={setCustomerMenuData}
+      />
+      <RightTree 
+        customerMenuData={customerMenuData}
+        setCustomerMenuData={setCustomerMenuData}
+      />
+    </div>
+  )
+})
+
+export default MenuSetting;

package/src/components/Business/BsLayouts/Components/CustomerMenu/MenuSetting/leftTree.tsx

@@ -0,0 +1,243 @@
+// @ts-nocheck
+import { Tree, Input, Tooltip, message } from 'antd';
+import React from 'react';
+import './index.less';
+import {
+  SearchOutlined,
+  FolderOutlined,
+} from '@ant-design/icons';
+import arrowRight from '../../../../../../assets/arrowRight.svg';
+import {
+  setMenuTreeData,
+} from '../../../utils';
+import { memoizeOneFormatter } from '@/utils/utils';
+
+
+const { TreeNode } = Tree;
+const { Search } = Input;
+
+const dataList: any[] = [];
+const generateList = data => {
+  for (let i = 0; i < data.length; i++) {
+    const node = data[i];
+    const { path, name } = node;
+    dataList.push({ path, name });
+    if (node.children) {
+      generateList(node.children);
+    }
+  }
+};
+
+
+const getParentKey = (path, tree) => {
+  let parentKey;
+  for (let i = 0; i < tree.length; i++) {
+    const node = tree[i];
+    if (node.children) {
+      if (node.children.some(item => item.path === path)) {
+        parentKey = node.path;
+      } else if (getParentKey(path, node.children)) {
+        parentKey = getParentKey(path, node.children);
+      }
+    }
+  }
+  return parentKey;
+};
+
+class LeftTree extends React.Component<any> {
+  state = {
+    treeData: [],
+    expandedKeys: [],
+    searchValue: '',
+    autoExpandParent: true,
+  };
+
+
+  componentDidMount() {
+    const {originRoutes = [] } = this.props;
+    const showMenu = originRoutes.find(item => item.path === '/')?.routes || [];
+    let routesData = JSON.parse(JSON.stringify(memoizeOneFormatter(showMenu, '')));
+    setMenuTreeData(routesData);
+    generateList(routesData);
+
+    this.setState({
+      treeData: routesData
+    })
+
+  }
+
+  onExpand = expandedKeys => {
+    this.setState({
+      expandedKeys,
+      autoExpandParent: false,
+    });
+  };
+
+  onChange = e => {
+    const { value } = e.target;
+    const { treeData } = this.state;
+    const expandedKeys = dataList
+      .map(item => {
+        if (item.name.indexOf(value) > -1) {
+          return getParentKey(item.path, treeData);
+        }
+        return null;
+      })
+      .filter((item, i, self) => item && self.indexOf(item) === i);
+    this.setState({
+      expandedKeys,
+      searchValue: value,
+      autoExpandParent: true,
+    });
+  };
+
+  getPathList = (originData: any): Array<any> => {
+    let pathList: Array<any> = [];
+    const getList = (data) => {
+      if (Array.isArray(data)) {
+        data.forEach(item => {
+          pathList.push(item.path);
+          if (item.children) {
+            getList(item.children)
+          }
+        })
+      } else {
+        pathList.push(data.path);
+        if (data.children) {
+          getList(data.children);
+        }
+      }
+    }
+    getList(originData);
+    return pathList;
+  }
+
+
+  handleAdd2Menu = (path: string) => {
+    const { treeData } = this.state;
+    const { customerMenuData, setCustomerMenuData } = this.props;
+    let filterItem;
+    const filterMenuItem = (menuData: Array<any>) => {
+      menuData.forEach(item => {
+        if (item.path === path) {
+          filterItem = { ...item };
+          return;
+        }
+        if (item.children) {
+          filterMenuItem(item.children);
+        }
+      })
+    }
+    filterMenuItem(treeData);
+    let addPathList = this.getPathList(filterItem);
+    let oldPathList = this.getPathList(customerMenuData);
+    let isRepet = false;
+    oldPathList.forEach(oldPath => {
+      if (addPathList.find(newPath => newPath === oldPath)) {
+        isRepet = true;
+      }
+    })
+    if (isRepet) {
+      message.warning('存在已经添加的菜单，请检查!');
+      return;
+    }
+    setCustomerMenuData([
+      ...customerMenuData,
+      filterItem
+    ])
+  }
+
+
+  render() {
+    const { searchValue, expandedKeys, autoExpandParent, treeData } = this.state;
+    const loop = data =>
+      data.map(item => {
+        const index = item.name.indexOf(searchValue);
+        const beforeStr = item.name.substr(0, index);
+        const afterStr = item.name.substr(index + searchValue.length);
+        const name =
+          index > -1 ? (
+            <span>
+              {beforeStr}
+              <span style={{ color: '#f50' }}>{searchValue}</span>
+              {afterStr}
+            </span>
+          ) : (
+            <span>{item.name}</span>
+          );
+        if (item.children && item.children.length) {
+          return (
+            <TreeNode
+              path={item.path}
+              icon={<FolderOutlined />}
+              name={<div className={'node_title_content'}>
+                <span>{name}</span>
+                <div
+                  className={'right_arrow'}
+                  onClick={() => {
+                    this.handleAdd2Menu(item.path);
+                  }}
+                >
+                  <Tooltip placement="topRight" title={'单击加入自定义菜单'}>
+                    <img style={{ marginTop: '-3px' }} width={18} src={arrowRight} />
+                  </Tooltip>
+                </div>
+              </div>}
+            >
+              {loop(item.children)}
+            </TreeNode>
+          );
+        }
+        return <TreeNode
+          path={item.path}
+          // icon={<FileOutlined />}
+          name={<div className={'node_title_content'}>
+            <span>{name}</span>
+            <div
+              className={'right_arrow'}
+              onClick={() => {
+                this.handleAdd2Menu(item.path);
+              }}
+            >
+              <Tooltip placement="topRight" title={'单击加入自定义菜单'}>
+                <img style={{ marginTop: '-3px' }} width={18} src={arrowRight} />
+              </Tooltip>
+            </div>
+          </div>}
+        />;
+      });
+    return (
+      <div className={'left_tree_content'}>
+        <div className={'tree_title'}>
+          <div>菜单列表(选中菜单，可快速设置)</div>
+          <Input
+            style={{ marginBottom: 8 }}
+            placeholder="请搜索"
+            allowClear
+
+            prefix={<SearchOutlined />}
+            onChange={this.onChange}
+          />
+        </div>
+        <div className={'tree_content'}>
+          <Tree
+            showIcon
+            showLine={true}
+            fieldNames={{
+              title: 'name',
+              key: 'path',
+              children: 'children'
+            }}
+            onExpand={this.onExpand}
+            expandedKeys={expandedKeys}
+            autoExpandParent={autoExpandParent}
+          >
+            {loop(treeData)}
+          </Tree>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default LeftTree;