TreeForm

src/pages/staff/Organization/form.jsx

@@ -1,122 +1,223 @@
-import React from 'react'
-import { Row, Col, Card, Tree, DatePicker, Radio,Form, Select, Input,InputNumber, Button } from 'antd';
+// // import React from 'react'
+// import { Row, Col, Card, Tree, DatePicker, Radio,Form, Select, Input,InputNumber, Button } from 'antd';
+// import React, { useEffect, useState, useCallback } from 'react';
+
+
+// import ImageUpload from '@/components/XForm/ImageUpload';
+// const FormItem = Form.Item;
+// const {RangePicker}=DatePicker
+// const [loading, setLoading] = useState(false);
+
+// const formItemLayout = {
+//     labelCol: { span: 6 },
+//     wrapperCol: { span: 14 },
+// };
+
+// class TreedataFrom extends React.Component {
+  
+//   handleSubmit = e => {
+//     e.preventDefault();
+//     this.props.form.validateFields((err, values) => {
+//       if (!err) {
+//         return;
+//       }
+//       setLoading(true);
+
+//       if (eventKey) {
+//         //如果有这个id拿。没有就，拿返回的curriculumId
+//         updateCurriculumData({
+//           data: {
+//             ...values,
+//             eventKey
+//           },
+//           urlData: { id: eventKey }
+//         }).then(() => {
+//           setLoading(false);
+//           message.success('数据更新成功');
+//           goBack()
+//         }).catch((err) => {
+//           setLoading(false);//loading消失
+//           message.error(err.message || err);
+//         })
+//       } else {
+//         saveCurriculumData({ data: values }).then(() => {
+//           setLoading(false);
+//           message.success('数据保存成功');
+//           goBack()
+//         }).catch((err) => {
+//           setLoading(false);//loading消失
+//           message.error(err.message || err);
+//         })
+//       }
+
+//     });
+//   };
+
+//   render() {
+//     const { form,getFieldDecorator } = this.props.form;
+//     return (
+//       <Form {...formItemLayout} onSubmit={this.handleSubmit} >
+//         <FormItem label="照片" help="建议尺寸：750px*600px，比例5:4，格式：jpg，用于：列表和详情">
+//           {
+//             getFieldDecorator('curriculumImg', {
+//               rules: [
+//                 { required: true, message: '请上传照片' }
+//               ]
+//             })(
+//               <ImageUpload />
+//             )
+//           }
+//         </FormItem>
+//         <FormItem label="姓名">
+//           {getFieldDecorator('note', {
+//             rules: [{ required: true, message: '请输入姓名!' }],
+//           })(<Input style={{width:"200px"}} />)}
+//         </FormItem>
+//         <FormItem label="年龄" >
+//            {
+//             getFieldDecorator('weight', {
+//               rules: [{ required: true, message: '请输入年龄' }]
+//             })(
+//               <InputNumber min='18' />
+//             )
+//           }
+//         </FormItem>
+//         <FormItem label="性别">
+//           {
+//             getFieldDecorator('type', {
+//               rules: [
+//                 { required: true, message: '请选择性别' }
+//               ]
+//             })(
+//               <Radio.Group  style={{ width: '500px' }} initialValue={1}>
+//                 {/* onChange={e => setContentType(e.target.value)} */}
+//                 <Radio value={1}>男</Radio>
+//                 <Radio value={2}>女</Radio>
+//               </Radio.Group>
+//             )
+//           }
+//         </FormItem>
+//         <FormItem label="工作总时间" style={{ marginBottom: 0 }} help="如未离职,结束日期和开始日期一样即可">
+//           <FormItem style={{ display: 'inline-block' }} >
+//             <RangePicker style={{width: '255px'}}/>
+//           </FormItem>
+//         </FormItem>
+//         <FormItem wrapperCol={{ span: 12, offset: 5 }}>
+//           <Button type="primary" htmlType="submit">
+//             Submit
+//           </Button>
+//         </FormItem>
+//       </Form>
+//     );
+//   }
+// }
 
+// export default Form.create({})(TreedataFrom);
 
-import ImageUpload from '@/components/XForm/ImageUpload';
 
-const { Option } = Select;
+//  TreedataFrom = Form.create({})(TreedataFrom);
+//  export default TreedataFrom 
+
+
+import React, { useEffect, useState, useCallback } from 'react';
+import { Button, Form, Select, Input, InputNumber, Radio, message, Card,DatePicker, } from 'antd';
+import ImageUpload from '@/components/XForm/ImageUpload';
 const FormItem = Form.Item;
 const {RangePicker}=DatePicker
 
-const formItemLayout = {
+const TreedataFrom = React.forwardRef((props, ref) => {
+  const [treeData, setTreeData] = useState();
+  const [data, setData] = useState(treeData);
+  const { form, treeTitle } = props;
+  const { getFieldDecorator, setFieldsValue, validateFields } = form;
+
+  const formItemLayout = {
+    //布局
     labelCol: { span: 6 },
     wrapperCol: { span: 14 },
-};
 
-class TreedataFrom extends React.Component {
-  handleSubmit = e => {
-    e.preventDefault();
-    this.props.form.validateFields((err, values) => {
-      if (!err) {
-        console.log('Received values of form: ', values);
-      }
-    });
   };
+  const formRef = React.createRef();
 
-  handleSelectChange = value => {
-    console.log(value);
-    this.props.form.setFieldsValue({
-      note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
-    });
-  };
-
-  render() {
-    const { getFieldDecorator } = this.props.form;
-    return (
-      <Form {...formItemLayout} onSubmit={this.handleSubmit}>
-        <FormItem label="照片" help="建议尺寸：750px*600px，比例5:4，格式：jpg，用于：列表和详情">
-          {
-            getFieldDecorator('curriculumImg', {
-              rules: [
-                { required: true, message: '请上传照片' }
-              ]
-            })(
-              <ImageUpload />
-            )
-          }
-        </FormItem>
-        <FormItem label="姓名">
-          {getFieldDecorator('note', {
-            rules: [{ required: true, message: '请输入姓名!' }],
-          })(<Input />)}
-        </FormItem>
-        <FormItem label="年龄" >
-           {
-            getFieldDecorator('weight', {
-              rules: [{ required: true, message: '请输入年龄' }]
-            })(
-              <InputNumber min='18' />
-            )
-          }
-        </FormItem>
-        <FormItem label="性别">
-          {
-            getFieldDecorator('type', {
-              rules: [
-                { required: true, message: '请选择性别' }
-              ]
-            })(
-              <Radio.Group  style={{ width: '500px' }} defaultValue={1}>
-                {/* onChange={e => setContentType(e.target.value)} */}
-                <Radio value={1}>男</Radio>
-                <Radio value={2}>女</Radio>
-              </Radio.Group>
-            )
-          }
-        </FormItem>
-        <FormItem label="工作总时间" style={{ marginBottom: 0 }} help="如未离职,结束日期和开始日期一样即可">
-          <FormItem style={{ display: 'inline-block' }} >
-            <RangePicker style={{width: '255px'}}/>
-          </FormItem>
-        </FormItem>
-        <FormItem label="Gender">
-          {getFieldDecorator('gender', {
-            rules: [{ required: true, message: 'Please select your gender!' }],
-          })(
-            <Select
-              placeholder="Select a option and change input text above"
-              onChange={this.handleSelectChange}
-            >
-              <Option value="male">male</Option>
-              <Option value="female">female</Option>
-            </Select>,
-          )}
-        </FormItem>
-        <FormItem wrapperCol={{ span: 12, offset: 5 }}>
-          <Button type="primary" htmlType="submit">
-            Submit
-          </Button>
-        </FormItem>
-      </Form>
-    );
+  const onChange=(date, dateString)=> {
+    console.log(date, dateString);
   }
-}
-
-
-TreedataFrom = Form.create({})(TreedataFrom);
-
-export default TreedataFrom
-
 
 
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    validateFields((err, values) => {
+      if (err) {
+        return;
+        //字符验证未填写---返回
+      }
+    });
+  }
 
-// import React from 'react'
 
-// class Hello extends React.Component{
-//     render(){
-//         return<h1>asdasdasdas</h1>
-//     }
-// }
+  return (
+    <Form {...formItemLayout}  ref={formRef} onSubmit={handleSubmit} >
+         <FormItem label="照片" help="建议尺寸：750px*600px，比例5:4，格式：jpg，用于：列表和详情">
+               {
+                getFieldDecorator('curriculumImg', {
+                  rules: [
+                    { required: true, message: '请上传照片' }
+                  ]
+                })(
+                  <ImageUpload />
+                )
+              }
+            </FormItem>
+            <FormItem label="姓名">
+              {getFieldDecorator('name', {
+                rules: [{ required: true, message: '请输入姓名!' }],
+              })(<Input style={{width:"200px"}} />)}
+            </FormItem>
+            <FormItem label="年龄" >
+               {
+                getFieldDecorator('age', {
+                  rules: [{ required: true, message: '请输入年龄' }]
+                })(
+                  <InputNumber min={18}  />
+                )
+              }
+            </FormItem>
+            <FormItem label="性别">
+              {
+                getFieldDecorator('sex', {
+                  rules: [
+                    { required: true, message: '请选择性别' }
+                  ]
+                })(
+                  <Radio.Group  style={{ width: '500px' }} initialValue={1}>
+                    {/* onChange={e => setContentType(e.target.value)} */}
+                    <Radio value={1}>男</Radio>
+                    <Radio value={2}>女</Radio>
+                  </Radio.Group>
+                )
+              }
+            </FormItem>
+            <FormItem label="工作总时间" style={{ marginBottom: 0 }} >
+              {
+                getFieldDecorator('day', {
+                  rules: [
+                    { required: true, message: '请选择日期' }
+                  ]
+                })(
+                // <RangePicker style={{width: '255px'}} />
+                <DatePicker onChange={onChange} />
+                )
+              }
+            </FormItem>
+            <FormItem wrapperCol={{ span: 12, offset: 5 }}>
+              <Button type="primary"  htmlType="submit" style={{marginLeft:'80px' , marginTop:'30px'}}>
+                修改
+              </Button>
+            </FormItem>
+          </Form>
+  )
+})
+
+export default Form.create({})(TreedataFrom);
 
 
-// export default Hello

src/pages/staff/Organization/index.jsx

@@ -211,48 +211,66 @@
 
 
 
-import { Row, Col, Card, Tree, DatePicker, Form, Input, InputNumber, Radio, Button } from 'antd'
+import { Row, Col, Card, Tree, Form, TreeSelect, 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 FormItem = Form.Item;
 
-// const [treeData, settreeData] = useState([])
 
+  const onAdd = (key) => {
+    if (expandedKeys.indexOf(key) === -1) {
+      expandedKeyArr.push(key);
+    }
+    setExpandedKeys(expandedKeyArr.slice());
+    addNode(key, treeData);//添加节点 树形
+    //useState里数据务必为immutable （不可赋值的对象），所以必须加上slice()返回一个新的数组对象
+    setData(treeData.slice());//添加子项
+  };
+// const [treeData, settreeData] = useState([])
 
 const treeData = [
   {
     title: '分厂厂长管理',
-    key: '0-0',
+    key: '0',
     children: [
-        { title: '刘厂长', key: '0-0-0-1' },
-        { title: '王副厂长', key: '0-0-0-2' },
+        { title: '刘厂长',age:48, sex:1, key: '0-0-0-1' },
+        { title: '王副厂长', age:28, sex:1,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' },
+        { title: '小王', age:20, sex:1,key: '0-0-1-0' },
+        { title: '小刘', age:23, sex:1,key: '0-0-1-1' },
+        { title: '小罗',age:34, sex:1, key: '0-0-1-2' },
       ],
   },
 ];
 
-class Demo extends React.Component {
+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:[this.treeTitle]
+      
+    };
+  }
 
-  state = {
-    expandedKeys: ['0-0', '0-0-1'],
-    autoExpandParent: false,
-    checkedKeys: ['0-0-1'],
-    selectedKeys: [],
-  };
 
   onExpand = expandedKeys => {
-    //自动展开
     console.log('onExpand', expandedKeys);
+
       // 如果没有将 autoExpandParent 设置为 false，如果子项展开，父项不能折叠。
      // 或者，您可以删除所有扩展的子键。
     this.setState({
@@ -261,23 +279,20 @@ class Demo extends React.Component {
     });
   };
 
-  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 });
-  };
+onSelect=(value,info)=>{
+  this.setState({value},()=>{
+    this.formRef.current.setFieldsValue({
+      name:info.node.props.title,
+      age:info.node.props.age,
+
+    })
+  })
+}
+
+
+
+
 
   renderTreeNodes = data =>
     data.map(item => {
@@ -285,6 +300,7 @@ class Demo extends React.Component {
         return (
           <TreeNode title={item.title} key={item.key} dataRef={item}  >
             {this.renderTreeNodes(item.children)}
+            
           </TreeNode>
         );
       }
@@ -294,13 +310,31 @@ class Demo extends React.Component {
 
 
   render() {
+
     return (
      <Card>
-      <Row>
+      <Row >
         <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 0 }}>
           <Card>
-              <Tree 
-                // checkable
+
+              <FormItem
+              label="管辖部门"
+            >
+              <Button type="primary" style={{marginRight:'20px'}} onClick={()=>onAdd} >
+                增加
+              </Button>
+              <Button type="danger">
+                删除
+              </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}
@@ -311,12 +345,20 @@ class Demo extends React.Component {
                 selectedKeys={this.state.selectedKeys}
               >
                 {this.renderTreeNodes(treeData)}
-              </Tree >
+              </Tree > 
+
+            </FormItem>
           </Card>
         </Col>
         <Col xs={{ span: 10, offset: 10 }} lg={{ span: 10, offset: 4 }}>
           <Card>
-          <TreedataFrom />
+          <TreedataFrom 
+          // treeTitle={this.state.treeTitle}
+          ref={this.formRef} 
+          // onFinish={this.state.onFinish}
+
+          
+          />
           </Card>
         </Col>
       </Row>
@@ -325,4 +367,4 @@ class Demo extends React.Component {
   }
 }
 
-export default Demo 
+export default TreeDemo