@bit-sun/business-component 2.2.21 → 2.2.23

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

@@ -1,385 +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>
-    );
-  }
-}
-
+// @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;