Tree

src/pages/staff/Organization/form.jsx

@@ -1,130 +1,12 @@
-// // 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);
-
-
-//  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';
+import { values } from 'lodash';
 const FormItem = Form.Item;
 const {RangePicker}=DatePicker
-
+const { Option } = Select;
 const TreedataFrom = React.forwardRef((props, ref) => {
   const [treeData, setTreeData] = useState();
   const [data, setData] = useState(treeData);
@@ -144,6 +26,10 @@ const TreedataFrom = React.forwardRef((props, ref) => {
   }
 
 
+
+ const handleChange=(value)=> {
+    console.log(`selected ${value}`);
+  }
   const handleSubmit = (e) => {
     e.preventDefault();
     validateFields((err, values) => {
@@ -156,29 +42,19 @@ const TreedataFrom = React.forwardRef((props, ref) => {
 
 
   return (
-    <Form {...formItemLayout}  ref={formRef} onSubmit={handleSubmit} >
-         <FormItem label="照片" help="建议尺寸：750px*600px，比例5:4，格式：jpg，用于：列表和详情">
-               {
-                getFieldDecorator('curriculumImg', {
-                  rules: [
-                    { required: true, message: '请上传照片' }
-                  ]
-                })(
-                  <ImageUpload />
-                )
-              }
-            </FormItem>
+
+    <Form {...formItemLayout}  ref={formRef}  onChange={onChange}   onSubmit={handleSubmit} >
             <FormItem label="姓名">
               {getFieldDecorator('name', {
                 rules: [{ required: true, message: '请输入姓名!' }],
-              })(<Input style={{width:"200px"}} />)}
+              })(<Input/>)}
             </FormItem>
-            <FormItem label="年龄" >
+            <FormItem label="身份证号" >
                {
-                getFieldDecorator('age', {
-                  rules: [{ required: true, message: '请输入年龄' }]
+                getFieldDecorator('cardId', {
+                  rules: [{ required: true, message: '请输入身份证号' }]
                 })(
-                  <InputNumber min={18}  />
+                  <Input maxLength={19} />
                 )
               }
             </FormItem>
@@ -190,18 +66,74 @@ const TreedataFrom = React.forwardRef((props, ref) => {
                   ]
                 })(
                   <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 }} >
+            <FormItem label="联系方式" >
+               {
+                getFieldDecorator('phone', {
+                  rules: [{ required: true, message: '请输入联系方式' }]
+                })(
+                  <Input  maxLength={11}/>
+                )
+              }
+            </FormItem>
+            <FormItem label="员工卡号" >
+               {
+                getFieldDecorator('id', {
+                  rules: [{ required: true, message: '请输入员工卡号' }]
+                })(
+                  <Input />
+                )
+              }
+            </FormItem>
+            <FormItem label="归属部门" >
+               {
+                getFieldDecorator('belon', {
+                  rules: [{ required: true, message: '请选择归属部门' }]
+                })(
+                  <Select initialValue={1}  onChange={handleChange}>
+                  <Option value={1}>财务部</Option>
+                  <Option value={2}>宣传部</Option>
+                  <Option value={3}>研发部</Option>
+                  <Option value={4}>仓储物流部</Option>
+                </Select>
+                )
+              }
+            </FormItem>
+            <FormItem label="居住所在地" >
+               {
+                getFieldDecorator('homeaddres', {
+                  rules: [{ required: true, message: '请选择所在地' }]
+                })(
+                  <Select initialValue={1}  onChange={handleChange}>
+                  <Option value={1}>南京</Option>
+                  <Option value={2}>北京</Option>
+                  <Option value={3}>湖北</Option>
+                  <Option value={4}>湖南</Option>
+                  <Option value={5}>上海</Option>
+                  <Option value={6}>四川</Option>
+                </Select>
+                )
+              }
+            </FormItem>
+            <FormItem label="备注" >
+               {
+                getFieldDecorator('remark', {
+                  rules: [{ required: false, message: '请输入备注' }]
+                })(
+                  <Input />
+                )
+              }
+            </FormItem>
+            <FormItem label="出生日期" style={{ marginBottom: 0 }} >
               {
                 getFieldDecorator('day', {
                   rules: [
-                    { required: true, message: '请选择日期' }
+                    { required: true, message: '请选择出生日期' }
                   ]
                 })(
                 // <RangePicker style={{width: '255px'}} />

src/pages/staff/Organization/index.jsx

@@ -211,7 +211,7 @@
 
 
 
-import { Row, Col, Card, Tree, Form, TreeSelect, Input, InputNumber, Radio, Button } from 'antd'
+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';
@@ -219,16 +219,52 @@ import TreedataFrom from './form';
 const { TreeNode,DirectoryTree } = Tree;
 const FormItem = Form.Item;
 
-
+//-----------------------------------
   const onAdd = (key) => {
     if (expandedKeys.indexOf(key) === -1) {
       expandedKeyArr.push(key);
     }
-    setExpandedKeys(expandedKeyArr.slice());
+    expandedKeys(expandedKeyArr.slice());
     addNode(key, treeData);//添加节点 树形
-    //useState里数据务必为immutable （不可赋值的对象），所以必须加上slice()返回一个新的数组对象
     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 = [
@@ -236,17 +272,17 @@ const treeData = [
     title: '分厂厂长管理',
     key: '0',
     children: [
-        { title: '刘厂长',age:48, sex:1, key: '0-0-0-1' },
-        { title: '王副厂长', age:28, sex:1,key: '0-0-0-2' ,},
+        { 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: '小王', 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' },
+        { 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' },
       ],
   },
 ];
@@ -262,7 +298,8 @@ class TreeDemo extends React.Component {
       autoExpandParent: false,
       checkedKeys: ['0-0-0'],
       selectedKeys: [],
-      treeTitle:[this.treeTitle]
+      treeTitle:[this.treeTitle],
+      checked:true
       
     };
   }
@@ -279,17 +316,35 @@ class TreeDemo extends React.Component {
     });
   };
 
+  handelSex = e => {
+    this.setState({
+      sex: e.target.value
+    });
+    console.log(valeu);
+  };
 
 onSelect=(value,info)=>{
   this.setState({value},()=>{
     this.formRef.current.setFieldsValue({
       name:info.node.props.title,
-      age:info.node.props.age,
-
+      cardId:info.node.props.cardId,
+      id:info.node.props.id,
+      phone:info.node.props.phone,
+      sex:info.node.props.sex,
+      belon:info.node.props.belon,
+      homeaddres:info.node.props.homeaddres,
     })
+  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);
 
 
 
@@ -320,10 +375,10 @@ onSelect=(value,info)=>{
               <FormItem
               label="管辖部门"
             >
-              <Button type="primary" style={{marginRight:'20px'}} onClick={()=>onAdd} >
+              <Button type="primary" style={{marginRight:'20px'}} onClick={onAdd} >
                 增加
               </Button>
-              <Button type="danger">
+              <Button type="danger" onClick={confirm}>
                 删除
               </Button> 
                <Tree 
@@ -355,6 +410,7 @@ onSelect=(value,info)=>{
           <TreedataFrom 
           // treeTitle={this.state.treeTitle}
           ref={this.formRef} 
+          // handelSex={this.handelSex}
           // onFinish={this.state.onFinish}