@bit-sun/business-component 1.2.4-alpha.1 → 1.2.4

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

@@ -1,112 +0,0 @@
-// @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

@@ -1,153 +0,0 @@
-
-
-.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

@@ -1,70 +0,0 @@
-
-// @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

@@ -1,90 +0,0 @@
-.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

@@ -1,38 +0,0 @@
-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

@@ -1,243 +0,0 @@
-// @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;