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

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;

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;