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

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

@@ -1,385 +0,0 @@
-// @ts-nocheck
-import { Tree, Button, Modal, Form, Row, Col, message, Input, Menu, Dropdown, Space } from 'antd';
-import React from 'react';
-import type { FormInstance } from 'antd/es/form';
-import {
-  EllipsisOutlined,
-  FolderOutlined,
-} from '@ant-design/icons';
-import './index.less';
-
-const { TreeNode } = Tree;
-
-class rightTree extends React.Component<any> {
-  formRef = React.createRef<FormInstance>();
-  constructor(props: any) {
-    super(props)
-  }
-  state = {
-    // treeData: [],
-    expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],
-    checkedKeys: [],
-    modalInfo: {
-      modalVisible: false,
-      type: 'create',
-      title: '',
-      callBack: null,
-    },
-  };
-
-  onDragEnter = info => {
-    // console.log(info);
-  };
-
-  onDrop = info => {
-    const dropKey = info.node.path;
-    const dragKey = info.dragNode.path;
-    const dropPos = info.node.pos.split('-');
-    const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
-
-    let dragObj;
-    let finalDropItem;
-    const loop = (data, path, callback) => {
-      for (let i = 0; i < data.length; i++) {
-        if (data[i].path === path) {
-          return callback(data[i], i, data);
-        }
-        if (data[i].children) {
-          loop(data[i].children, path, callback);
-        }
-      }
-    };
-    const data = JSON.parse(JSON.stringify(this.props.customerMenuData));
-
-    loop(data, dragKey, (item, index, arr) => {
-      arr.splice(index, 1);
-      dragObj = item;
-    });
-
-    if (!info.dropToGap) {
-      // Drop on the content
-      loop(data, dropKey, item => {
-        item.children = item.children || [];
-        item.children.unshift(dragObj);
-        finalDropItem = {
-          ...item
-        };
-      });
-    } else if (
-      (info.node.props.children || []).length > 0 && // Has children
-      info.node.props.expanded && // Is expanded
-      dropPosition === 1 // On the bottom gap
-    ) {
-      loop(data, dropKey, item => {
-        item.children = item.children || [];
-        item.children.unshift(dragObj);
-        finalDropItem = {
-          ...item
-        };
-      });
-    } else {
-      let ar;
-      let i;
-      loop(data, dropKey, (item, index, arr) => {
-        ar = arr;
-        i = index;
-      });
-      if (dropPosition === -1) {
-        ar.splice(i, 0, dragObj);
-      } else {
-        ar.splice(i + 1, 0, dragObj);
-      }
-    }
-    if (finalDropItem && finalDropItem.component) {
-      message.warning('页面菜单不可存放其他其他菜单。');
-      return;
-    }
-    this.props.setCustomerMenuData([...data]);
-  };
-
-  handleSubmit = () => {
-
-    const {
-      modalInfo: { callBack },
-    } = this.state;
-    this.formRef?.current?.validateFields()
-      .then(values => {
-        callBack && callBack(values.name);
-      });
-
-  }
-
-  handleModalClose = () => {
-    this.setState({
-      modalInfo: {
-        modalVisible: false
-      }
-    })
-  }
-
-  handleEditTreeNode = (e, item) => {
-    const { modalInfo } = this.state;
-    const { customerMenuData } = this.props;
-    this.setState({
-      modalInfo: {
-        ...modalInfo,
-        modalVisible: true,
-        title: '编辑名称',
-        callBack: (newName: string) => {
-          let oldTreeData = JSON.parse(JSON.stringify(customerMenuData));
-          const editTreeDataName = (oldTreeData: Array<any>) => {
-            oldTreeData.forEach(treeItem => {
-              if (treeItem.path === item.path) {
-                treeItem.name = newName;
-              }
-              if (treeItem.children) {
-                editTreeDataName(treeItem.children);
-              }
-            })
-          }
-          editTreeDataName(oldTreeData);
-          this.props.setCustomerMenuData([...oldTreeData]);
-          this.setState({
-            modalInfo: {
-              modalVisible: false
-            }
-          })
-        }
-      }
-    })
-  }
-
-
-  deleteNode = (oldTreeData: any[], path: string) => {
-    oldTreeData.forEach((node, index) => {
-      if (node.path === path) {
-        oldTreeData.splice(index, 1);
-      }
-      if (node.children) {
-        this.deleteNode(node.children, path)
-      }
-    })
-  }
-
-  handleDeleteTreeNode = (e, item) => {
-    const { customerMenuData } = this.props;
-    let oldTreeData = JSON.parse(JSON.stringify(customerMenuData));
-    this.deleteNode(oldTreeData, item.path);
-    this.props.setCustomerMenuData([...oldTreeData]);
-  }
-
-
-  handleBatchDelete = () => {
-    const { checkedKeys } = this.state;
-    const { customerMenuData } = this.props;
-    let oldTreeData = JSON.parse(JSON.stringify(customerMenuData));
-    checkedKeys.forEach(key => {
-      this.deleteNode(oldTreeData, key);
-    })
-    this.props.setCustomerMenuData([...oldTreeData]);
-  }
-
-  handleAddTreeNode = (e, item) => {
-    const { modalInfo } = this.state;
-    const { customerMenuData } = this.props;
-    this.setState({
-      modalInfo: {
-        ...modalInfo,
-        modalVisible: true,
-        title: '新增子目录',
-        callBack: (newName: string) => {
-          let oldTreeData = JSON.parse(JSON.stringify(customerMenuData));
-          const addChildFolder = (oldTreeData: Array<any>) => {
-            oldTreeData.forEach(treeItem => {
-              if (treeItem.path === item.path) {
-                treeItem.children ? 
-                treeItem.children.push({
-                  path: Math.random() + 'folder',
-                  name: newName,
-                }) :
-                treeItem.children = [{
-                  path: Math.random() + 'folder',
-                  name: newName,
-                }]
-              }
-              if (treeItem.children) {
-                addChildFolder(treeItem.children);
-              }
-            })
-          }
-          addChildFolder(oldTreeData);
-          this.props.setCustomerMenuData([...oldTreeData]);
-          this.setState({
-            modalInfo: {
-              modalVisible: false
-            }
-          })
-        }
-      }
-    })
-  }
-
-  onCheck = (checkedKeysValue: React.Key[]) => {
-    this.setState({
-      checkedKeys: checkedKeysValue
-    })
-  };
-
-  getChildMenu = (item: any) => {
-
-    let items = [
-      {
-        label: <Button type='link' onClick={(e) => { this.handleAddTreeNode(e, item) }} >新建文件夹</Button>,
-        key: '0',
-      },
-      {
-        label: <Button type='link' onClick={(e) => { this.handleEditTreeNode(e, item) }} >重命名</Button>,
-        key: '1',
-      },
-      {
-        label: <Button type='link' onClick={(e) => { this.handleDeleteTreeNode(e, item) }} >删除</Button>,
-        key: '2',
-      },
-    ];
-    if (item && item.component) {
-      items.shift();
-    }
-    return (
-      <Menu
-        items={items}
-      />
-    );
-  }
-  render() {
-    const { modalInfo, checkedKeys } = this.state;
-    const loop = data =>
-      data.map(item => {
-        if (item.children && item.children.length) {
-          return (
-            <TreeNode 
-              path={item.path}
-              icon={<FolderOutlined />}
-              name={<>
-                <span>{item.name}</span>
-                <span className={'tree_node_title'}>
-                  <Dropdown overlay={this.getChildMenu(item)} trigger={['click']}>
-                    <a onClick={e => { e.preventDefault(); e.stopPropagation();}}>
-                      <Space>
-                        <EllipsisOutlined />
-                      </Space>
-                    </a>
-                  </Dropdown>
-                </span>
-              </>}
-            >
-              {loop(item.children)}
-            </TreeNode>
-          );
-        }
-        return <TreeNode
-          path={item.path}
-          name={<>
-            <span>{item.name}</span>
-            <span className={'tree_node_title'}>
-              <Dropdown overlay={this.getChildMenu(item)} trigger={['click']}>
-                <a onClick={e => { e.preventDefault(); e.stopPropagation();}}>
-                  <Space>
-                    <EllipsisOutlined />
-                  </Space>
-                </a>
-              </Dropdown>
-            </span>
-          </>}
-        />;
-      });
-
-    return (
-      <div>
-        <div className={'tree_title'}>
-          <div>已设置自定义菜单(可拖动排序)</div>
-          <div style={{ overflow: 'hidden' }}>
-            <Button
-              disabled={checkedKeys.length ? false : true}
-              onClick={this.handleBatchDelete} 
-              style={{ float: 'right', marginLeft: '10px' }}
-              >删除</Button>
-            <Button
-              type='primary'
-              ghost
-              style={{ float: 'right' }}
-              onClick={() => {
-                this.setState({
-                  modalInfo: {
-                    modalVisible: true,
-                    type: 'create',
-                    title: '新增一级目录',
-                    callBack: (name: string) => {
-                      const { modalInfo } = this.state;
-                      const { customerMenuData } = this.props;
-                      let newMenu = {
-                        path: Math.random() + 'folder',
-                        name: name,
-                      };
-                      this.props.setCustomerMenuData([...customerMenuData, newMenu]);
-                      this.setState({
-                        modalInfo: {
-                          ...modalInfo,
-                          modalVisible: false
-                        }
-                      })
-                    }
-                  }
-                })
-              }}
-            >
-              新建
-            </Button>
-          </div>
-        </div>
-        <div className={`${'tree_content'} ${'right_tree_content'}`}>
-          <Tree
-            className="draggable-tree"
-            showIcon
-            showLine={true}
-            defaultExpandedKeys={this.state.expandedKeys}
-            draggable
-            blockNode
-            onDragEnter={this.onDragEnter}
-            checkable
-            onCheck={this.onCheck}
-            checkedKeys={checkedKeys}
-            fieldNames={{
-              title: 'name',
-              key: 'path',
-              children: 'children'
-            }}
-            onDrop={this.onDrop}
-          >
-            {loop(this.props.customerMenuData)}
-          </Tree>
-        </div>
-        <Modal
-          width={600}
-          bodyStyle={{ paddingTop: '32px', backgroundColor: '#F7F7F7' }}
-          destroyOnClose
-          title={modalInfo.title || ''}
-          visible={modalInfo.modalVisible}
-          onOk={this.handleSubmit}
-          onCancel={this.handleModalClose}
-        >
-          <Form ref={this.formRef}>
-            <Row>
-              <Col span={24}>
-                <Form.Item name='name' label="名称">
-                  <Input style={{ width: '200px' }} />
-                </Form.Item>
-              </Col>
-            </Row>
-          </Form>
-        </Modal>
-      </div>
-    );
-  }
-}
-
-export default rightTree;

package/src/components/Business/BsLayouts/Components/CustomerMenu/globalMenu/DrawContent.tsx

@@ -1,286 +0,0 @@
-// @ts-nocheck
-import React, { useEffect, useState, useLayoutEffect, useImperativeHandle } from 'react';
-import { List, Tooltip, Input, Button } from 'antd';
-import { Link, formatMessage, history } from 'umi';
-import classNames from 'classnames';
-import { debounce } from 'lodash';
-import {
-  setMenuTreeData,
-  searchMenuData,
-} from '../../../utils';
-import { memoizeOneFormatter } from '@/utils/utils';
-import { SearchOutlined, CaretDownOutlined  } from '@ant-design/icons';
-import './drawContent.less';
-import right from '../../../../../../assets/right.png';
-import closeicon from '../../../../../../assets/closeicon.png';
-
-
-const DrawContent = ({onClose, originRoutes=[], itemPath}: any) => {
-  const [homepageData, sethomepageData]: any[] = useState([]);
-  const [routesData, setroutesData]: any[] = useState([]);
-  const [authorityMenu, setAuthorityMenu]: any[] = useState([]);
-
-  const [currentOneLevel, setCurrentOneLevel] = useState<string>('');
-  const [SearhData, setSearchMenuData] = useState<any[]>([]);
-  const [rightMenuHeight, setHeight] = useState<number>(600);
-  const [drawHeight, setDrawHeight] = useState<number>(900);
-
-  const [moreBtnShow, setMoreBtnShow] = useState(false);
-  const [showScroll, setShowScroll] = useState(false);
-
-  useEffect(() => {
-    getMenuContentHeight();
-    const homepageDataList: any[] = []; //不含子集的菜单
-    const routesDataList: any[] = []; //含子集的菜单
-    const authorityMenuList: any[] = []; //当前权限可以看到的所有菜单
-
-    const showMenu = originRoutes.find(item => item.path === '/')?.routes || [];
-    let routesData = JSON.parse(JSON.stringify(memoizeOneFormatter(showMenu, '')));
-    setMenuTreeData(routesData);
-
-    routesData.forEach(item => {
-      if (item.children) {
-        routesDataList.push(item);
-        authorityMenuList.push(item)
-      } else {
-        homepageDataList.push(item);
-        authorityMenuList.push(item)
-      }
-    })
-    sethomepageData(homepageDataList)
-    setroutesData(routesDataList)
-    setAuthorityMenu(authorityMenuList)
-
-    window.onresize = () => {
-      getMenuContentHeight();
-    };
-  }, []);
-
-  useLayoutEffect(() => {
-    setTimeout(() => {
-      let drawContentHeight=document.getElementById("drawContent").scrollHeight;
-      if (drawContentHeight > rightMenuHeight) {
-        setMoreBtnShow(true);
-      }
-    }, 0)
-  }, [])
-
-  const getMenuContentHeight = () => {
-    let clientHeight = document.body.clientHeight;
-    setHeight(clientHeight - 190);
-    setDrawHeight(clientHeight - 70)
-  }
-
-
-  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={(e) => {onMenuClick(e, child);}}>
-            <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>
-      );
-    }
-  }
-
-  const onMenuClick = (e, item) => {
-    e.stopPropagation();
-    e.preventDefault();
-    let searchHistory = JSON.parse(localStorage.getItem(`${itemPath}_search_history`) || '[]');
-    if (searchHistory.every(hisItem => item.path !== hisItem.padth)) {
-      if (searchHistory.length < 10 ) {
-        searchHistory.push({
-          name: item.name,
-          path: item.path
-        })
-      } else {
-        searchHistory.pop();
-        searchHistory.unshift({
-          name: item.name,
-          path: item.path
-        })
-      }
-    }
-    localStorage.setItem(`${itemPath}_search_history`, JSON.stringify(searchHistory))
-    history.push({
-      pathname: item.path
-    })
-    onClose();
-  };
-
-
-  let searchHistoryList = JSON.parse(localStorage.getItem(`${itemPath}_search_history`) || '[]');
-  return (
-    <div style={{height: `${drawHeight}px`}} className={'global_menu_draw_content'}>
-      <div className={'drawerWarp_left'}>
-        <div className={'left_item_title'} >一级菜单</div>
-        {
-          authorityMenu.map(item => (
-            <div
-              className={'left_item'}
-              style={{
-                borderLeft: currentOneLevel === item.path ? '2px solid #1890ff' : 'none',
-                color: currentOneLevel === item.path ? '#1890ff' : '#000000'
-              }}
-              onClick={(e) => {
-                e.stopPropagation();
-                e.preventDefault()
-                if (item.component) {
-                  history.push({
-                    pathname: item.path
-                  })
-                  onClose();
-                } else {
-                  setCurrentOneLevel(item.path);
-                  let currentDom = document.getElementById(item.path);
-                  currentDom && currentDom.scrollIntoView();
-                }
-              }}
-            >
-              {item.name}
-            </div>))
-        }
-      </div>
-      <div style={{flexGrow: 1, position: 'relative'}}>
-        <img
-          onClick={() => {onClose()}} 
-          style={{position: 'absolute', right: '15px', top: '17px', cursor: 'pointer'}} width={24} src={closeicon} />
-        
-        <div style={{ padding: '10px', marginBottom: '10px', width: '100%', }}>
-          <Input
-            style={{ height: '36px', borderRadius: '4px', width: '830px' }}
-            placeholder="请输入关键词"
-            allowClear
-            prefix={<SearchOutlined />}
-            onChange={debounce((e: any) => {
-              searchMenuData(authorityMenu, e.target.value, setSearchMenuData);
-            }, 600)}
-          />
-          <div style={{marginTop: '10px'}}>
-            <span style={{ color: '#8c8c8c', opacity: '0.6' }}>最近访问:&nbsp;&nbsp;&nbsp;</span>
-            {
-              searchHistoryList.map(item => {
-                return ( 
-                  <Link style={{color: '#000000', marginRight: '10px'}} to={item.path} onClick={(e) => {onMenuClick(e, item);}}>
-                  {item.name}
-                </Link>)
-              })
-            }
-          </div>
-        </div>
-        {
-          !!SearhData.length ?
-            (<div className={'search_menu_content'}>
-              {
-                SearhData.map((item: any) => (
-                  <div onClick={(e) => {
-                    onMenuClick(e, item);
-                  }} key={item.path}>{item.name}</div>
-                ))
-              }
-            </div>) : (
-              <div>
-                <div 
-                style={{
-                  height: `${rightMenuHeight}px`, 
-                  overflowY: 'scroll',
-                  position: 'relative',
-                  width: '100%'
-                }}
-                >
-                <div id='drawContent'  className={'drawerWarp_right'}>
-                  {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={(e) => {onMenuClick(e, child);}}>
-                                  {formatMessage({ id: `${child.name}` })}
-                                  <img className="allFuncOnMouseroverImg" src={right}></img>
-                                </Link>
-                              </List.Item>
-                            </div>
-                          );
-                        }
-                      }}
-                    />
-                  )}
-                  {routesData.map((item, index) => {
-                    return (
-                      <List
-                        // className={classNames('allFunsList', 'allFunsListWarp', )}
-                        className={`allFunsList allFunsListWarp ${currentOneLevel === item.path ? 'choosedStyle' : ''}`}
-                        id={item.path}
-                        style={{
-                          color: currentOneLevel === item.path ? '#fff' : '#005CFF',
-                        }}
-                        header={<b>{formatMessage({ id: `${item.name}` })}</b>}
-                        bordered
-                        dataSource={item.children}
-                        renderItem={(child: any) => {
-                          return renderChildItem(child)
-                        }}
-                      />
-                    );
-                  })}
-                </div>
-                <div style={{
-                    display: moreBtnShow ? 'block' : 'none',
-                    // position: 'absolute', 
-                    textAlign: 'center', 
-                    bottom: 0, 
-                    background: '#ffffff', 
-                    width: '100%', 
-                    height: '30px'
-                    }}>
-                  <span
-                    onClick={() => {
-                      setShowScroll(true);
-                      setMoreBtnShow(false);
-                    }}
-                    style={{color: '#8c8c8c'}}
-                    >
-                    <CaretDownOutlined />
-                      下滑加载更多
-                  </span>
-                </div>
-              </div>
-              </div>
-            )
-
-        }
-      </div>
-    </div>
-  )
-
-}
-
-export default DrawContent;