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

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

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

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