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, Form, TreeSelect, Input, InputNumber, Modal, Button, message } 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 FormItem = Form.Item;

//-----------------------------------
  const onAdd = (key) => {
    if (expandedKeys.indexOf(key) === -1) {
      expandedKeyArr.push(key);
    }
    expandedKeys(expandedKeyArr.slice());
    addNode(key, treeData);//添加节点 树形
    setData(treeData.slice());//添加子项
  };
//-----------------------------------
const confirm = data => {
  // {...data,isPublish}
    if (data.key !== 0) {
      Modal.confirm({
        title: '确认删除吗？',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          message.error('失败');

        },
      });
    }else{
      message.error('error')
    }
}







// function uuid() {
//   var s = [];
//   var hexDigits = "0123456789";
//   for (var i = 0; i < 18; i++) {
//       s[i] = hexDigits.substr(Math.floor(Math.random() * 1*10), 1);
//   }

//   var uuid = s.join("");
//   return uuid;
// }



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

const treeData = [
  {
    title: '分厂厂长管理',
    key: '0',
    children: [
        { title: '郎岩',phone:'15920583224', cardId:'511502199103223189',sex:1,id:'0212',belon:1,homeaddres:1, key: '0-0-0-1' },
        { title: '柯琼彦',phone:'13184013427', cardId:'210203197503102721', sex:2 ,id:'4242',belon:2,homeaddres:2, key: '0-0-0-2' ,},
    ],
  },
  {
      title: '分厂员工管理',
      key: '0-0-1',
      children: [
        { title: '伏佳', phone:'18613523527', cardId:'520323197806058856',sex:1  ,id:'1124', belon:4,homeaddres:4,key: '0-0-1-0' },
        { title: '舒宏', phone:'14736632088', cardId:'610729197408202551', sex:1 ,id:'4534', belon:3,homeaddres:2,key: '0-0-1-1' },
        { title: '狄莉珍',phone:'17604898508', cardId:'820000195008115837', sex:1 ,id:'4242',belon:1,homeaddres:5,  key: '0-0-1-2' },
      ],
  },
];

class TreeDemo extends React.Component {
  formRef = React.createRef();
  
  
  constructor(props){
    super(props)  
    this.state = {
      expandedKeys: ['0-0-0', '0-0-1'],
      autoExpandParent: false,
      checkedKeys: ['0-0-0'],
      selectedKeys: [],
      treeTitle:[],
      checked:true
      
    };
  }


  onExpand = expandedKeys => {
    console.log('onExpand', expandedKeys);

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

  handelSex = e => {
    this.setState({
      sex: e.target.value
    });
    console.log(valeu);
  };

onSelect=(value,info)=>{
  this.setState({value},()=>{
    this.formRef.current.setFieldsValue({
      ...info.node.props,

    })
  console.log(this.state.treeTitle);

  })
}
//   if(info.node.props.sex===0){
//     this.state.checked=true
//   }else{
//     this.state.checked=false
//   }

//   console.log(this.state.checked);




  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>

              <FormItem
              label="管辖部门"
            >
              <Button type="primary" style={{marginRight:'20px'}} onClick={onAdd} >
                增加
              </Button>
              <Button type="danger" onClick={confirm}>
                删除
              </Button> 
               <Tree 
                // showSearch
                style={{ width: '100%' }}
                value={this.state.value}
                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                placeholder="Please select"
                allowClear
                treeDefaultExpandAll
                treeData={this.state.treeData}
                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 > 

            </FormItem>
          </Card>
        </Col>
        <Col xs={{ span: 10, offset: 10 }} lg={{ span: 10, offset: 4 }}>
          <Card>
          <TreedataFrom 
          // treeTitle={this.state.treeTitle}
          ref={this.formRef} 
          // handelSex={this.handelSex}
          // onFinish={this.state.onFinish}

          
          />
          </Card>
        </Col>
      </Row>
     </Card> 
    );
  }
}

export default TreeDemo