pc-admin/src/pages/staff/Organization/index.jsx

// import React, { useState } from "react";
// import { Tree, Icon, Card } from "antd";
// import { nanoid } from "nanoid";//生成唯一id
// import { duration } from "moment";
// import TreeTitle from './TreeTitle'

// const { TreeNode } = Tree;
// //树形数据
// const treeData = [
//   {
//     value: "0",
//     defaultValue: "0",
//     key: "0",
//     parentKey: '0',
//     isEditable: false,
//     children: [
//       {
//         value: "0",
//         key: "0-1",
//         defaultValue: "0-1",
//         isEditable: false,
//       },
//     ],
//   },

// ];

// const expandedKeyArr = ["0"];
// export default function TreeDemo() {
//   const [data, setData] = useState(treeData);//获取值，及时更新被修改的值。变量
//   const [expandedKeys, setExpandedKeys] = useState(expandedKeyArr);//状态
//   // const onExpand = (expandedKeys) => {
//   //   //记录折叠的key值
//   //   setExpandedKeys(expandedKeys);
//   // };
//   //开始渲染树形节点 data拿到数据
//   const renderTreeNodes = (data) => {
//     //遍历项目
//     let nodeArr = data.map((item) => {

//       const Title = (
//         <TreeTitle
//           value={item.value}
//           isDelete={item.parentKey !== "0"}
//           onAdd={() => onAdd(item.key)}
//           onDelete={() => onDelete(item.key)}
//           onChange={(val) => onChange(val, item.key)}
//         />
//       );
//       if (item.children) {
//         return (
//           <TreeNode title={Title} key={item.key} dataRef={item}>
//             {/* 渲染 */}
//             {renderTreeNodes(item.children)}
//           </TreeNode>
//         );
//       }
//       //返回他的标题，和key值
//       return <TreeNode title={Title} key={item.key} />;
//     });
//     //返回节点
//     return nodeArr;
//   }
//   //新增
//   const onAdd = (key) => {
//     if (expandedKeys.indexOf(key) === -1) {
//       expandedKeyArr.push(key);
//     }
//     setExpandedKeys(expandedKeyArr.slice());
//     addNode(key, treeData);//添加节点 树形
//     //useState里数据务必为immutable （不可赋值的对象），所以必须加上slice()返回一个新的数组对象
//     setData(treeData.slice());//添加子项
//   };
//   //编辑
//   //拿到key treeData数据--setData设置数据---slice删除数据中已返回的元素  [aa,bb,cc,dd,ee]--slice(2)输出[cc,dd,ee]
//   const onEdit = (key) => {
//     editNode(key, treeData);
//     setData(treeData.slice());
//   };
//   const editNode = (key, data) =>
//     data.forEach((item) => {
//       if (item.key === key) {
//         //编辑状态 true

//         item.isEditable = true;
//       } else {

//         //编辑状态 false
//         item.isEditable = false;
//       }
//       item.value = item.defaultValue; // 当某节点处于编辑状态，并改变数据，点击编辑其他节点时，此节点变成不可编辑状态，value 需要回退到 defaultvalue
//       //当某子项处于编辑状态，改变数据，点击其他时候，此项变成不可编辑
//       if (item.children) {
//         editNode(key, item.children);
//         //编辑子节点
//       }
//     });

//   const addNode = (key, data) =>
//     data.forEach((item) => {
//       if (item.key === key) {//如果拿到的key相同则判断子项
//         if (item.children) {
//           item.children.push({
//             value: "default",//创建新的子项默认值
//             key: nanoid(), // 这个 key 应该是唯一的
//           });
//         } else {
//           item.children = [];
//           item.children.push({
//             value: "default",
//             key: nanoid(),
//           });
//         }
//         return;
//       }
//       if (item.children) {
//         addNode(key, item.children);
//       }
//     });

//   const onChange = (val, key) => {
//     changeNode(key, val, treeData);
//     setData(treeData.slice());
//   };

//   const changeNode = (key, value, data) =>
//     data.forEach((item) => {
//       if (item.key === key) {//新增子项内容赋值
//         item.value = value;
//       }
//       if (item.children) {
//         changeNode(key, value, item.children);//子项
//       }
//     });

//   //确认保存节点
//   const saveNode = (key, data) =>
//     data.forEach((item) => {
//       if (item.key === key) {
//         item.defaultValue = item.value;//item.value内容赋值给defaultValue
//       }
//       //子项保存不能编辑
//       if (item.children) {
//         saveNode(key, item.children);
//       }
//       //项目是否能编辑
//       item.isEditable = false;
//     });

//   //取消确认
//   const closeNode = (key, defaultValue, data) =>
//     data.forEach((item) => {
//       item.isEditable = false;
//       if (item.key === key) {
//         item.value = defaultValue;
//       }
//       if (item.children) {
//         closeNode(key, defaultValue, item.children);
//       }
//     });
//   // slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
//   const onDelete = (key) => {
//     deleteNode(key, treeData);
//     setData(treeData.slice());
//   };
//   //删除节点
//   const deleteNode = (key, data) =>
//     //拿到每个key数据， 如果要删除的key相同，则删除，并返回。如果不同判断子项
//     data.forEach((item, index) => {
//       if (item.key === key) {
//         data.splice(index, 1);//从某个位置开始删除元素
//         return;
//       } else {
//         if (item.children) {
//           deleteNode(key, item.children);
//         }
//       }
//     });

//   return (
//     <div>
//       <Card style={{ width: '90%' }}>
//         <Tree
//           switcherIcon={<Icon type="down-square" theme="filled" />}
//           expandedKeys={expandedKeys}
//         // onExpand={onExpand}
//         >
//           {renderTreeNodes(data)}
//         </Tree>
//       </Card>

//     </div>
//   );
// }



















import { Row, Col, Card, Tree, DatePicker, Form, Input, InputNumber, Radio, Button } from 'antd'
import { title } from 'echarts/lib/theme/dark';
import React, { useEffect, useState, useCallback,useRef } from 'react';
import TreedataFrom from './form';

const { TreeNode,DirectoryTree } = Tree;

// const [treeData, settreeData] = useState([])


const treeData = [
  {
    title: '分厂厂长管理',
    key: '0-0',
    children: [
        { title: '刘厂长', key: '0-0-0-1' },
        { title: '王副厂长', key: '0-0-0-2' },
    ],
  },
  {
      title: '分厂员工管理',
      key: '0-0-1',
      children: [
        { title: '王王王', key: '0-0-1-0' },
        { title: '张张张', key: '0-0-1-1' },
        { title: '刘刘刘', key: '0-0-1-2' },
      ],
  },
];

class Demo extends React.Component {

  state = {
    expandedKeys: ['0-0', '0-0-1'],
    autoExpandParent: false,
    checkedKeys: ['0-0-1'],
    selectedKeys: [],
  };

  onExpand = expandedKeys => {
    //自动展开
    console.log('onExpand', expandedKeys);
      // 如果没有将 autoExpandParent 设置为 false，如果子项展开，父项不能折叠。
     // 或者，您可以删除所有扩展的子键。
    this.setState({
      expandedKeys,
      autoExpandParent: false,
    });
  };

  onCheck = checkedKeys => {
    //单击复选框
    console.log('onCheck', checkedKeys);
    this.setState({ checkedKeys });
    
  };

  onSelect = (selectedKeys, info) => {
    //单击姓名
    for (let i = 0; i < selectedKeys.length; i++) {
      const element = selectedKeys[i];
      console.log(element);
  }
  
    console.log('onSelect',info);
    this.setState({ selectedKeys });
  };

  renderTreeNodes = data =>
    data.map(item => {
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key} dataRef={item}  >
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode key={item.key} {...item} />;
    });



  render() {
    return (
     <Card>
      <Row>
        <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 0 }}>
          <Card>
              <Tree 
                // checkable
                showLine={true}
                onExpand={this.onExpand}
                expandedKeys={this.state.expandedKeys}
                autoExpandParent={this.state.autoExpandParent}
                onCheck={this.onCheck}
                checkedKeys={this.state.checkedKeys}
                onSelect={this.onSelect}
                selectedKeys={this.state.selectedKeys}
              >
                {this.renderTreeNodes(treeData)}
              </Tree >
          </Card>
        </Col>
        <Col xs={{ span: 10, offset: 10 }} lg={{ span: 10, offset: 4 }}>
          <Card>
          <TreedataFrom />
          </Card>
        </Col>
      </Row>
     </Card> 
    );
  }
}

export default Demo