alert delett

src/pages/staff/Organization/form.jsx

@@ -1,16 +1,20 @@
 
 
 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 { Button, Form, Select, Input, InputNumber, Radio, message, Card, DatePicker, } from 'antd';
+// import ImageUpload from '@/components/XForm/ImageUpload';
+// import { ProFormDatePicker } from "@ant-design/pro-form";
+
 import { values } from 'lodash';
 const FormItem = Form.Item;
-const {RangePicker}=DatePicker
+const { RangePicker } = DatePicker
 const { Option } = Select;
 const TreedataFrom = React.forwardRef((props, ref) => {
-  const [treeData, setTreeData] = useState();
+  // const [treeData, onChangethis] = useState();
+  const [treeData, settreeData] = useState(0)
+  const OnchangeThis = (value) => { }
   const [data, setData] = useState(treeData);
-  const { form, treeTitle } = props;
+  const { form, treeTitle, onChangethis } = props;
   const { getFieldDecorator, setFieldsValue, validateFields } = form;
 
   const formItemLayout = {
@@ -21,132 +25,166 @@ const TreedataFrom = React.forwardRef((props, ref) => {
   };
   const formRef = React.createRef();
 
-  const onChange=(date, dateString)=> {
+  const onChange = (date, dateString) => {
+    // onChangethis(value)
     console.log(date, dateString);
   }
 
+  const handleSubmit = (value) => {
+    props.onChangethis(value)
+    console.log(value);
+
+    setFieldsValue(treeData)
+
+  }
+
+
 
 
- const handleChange=(value)=> {
-    console.log(`selected ${value}`);
+
+  const handleChange = (e, props) => {
+
+    // e.preventDefault();
+    let arr = []
+    arr = props.form.getFieldsValue()
+    // console.log(arr)
+    onChangethis(arr)
+
   }
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    validateFields((err, values) => {
-      if (err) {
-        return;
-        //字符验证未填写---返回
-      }
-    });
+  // const handleSubmit = (e) => {s
+  //   e.preventDefault();
+  //   validateFields((err, values) => {
+  //     if (err) {
+  //       return;
+  //       //字符验证未填写---返回
+  //     }
+  //   });
+  // }
+  //挂载 我先看看
+  const componentDidMount = () => {
+    console.log(this.props.FromValue)
+
+    this.props.triggerRef(this)
   }
 
 
   return (
 
-    <Form {...formItemLayout}  ref={formRef}  onChange={onChange}   onSubmit={handleSubmit} >
-            <FormItem label="姓名">
-              {getFieldDecorator('title', {
-                rules: [{ required: true, message: '请输入姓名!' }],
-              })(<Input/>)}
-            </FormItem>
-            <FormItem label="身份证号" >
-               {
-                getFieldDecorator('cardId', {
-                  rules: [{ required: true, message: '请输入身份证号' }]
-                })(
-                  <Input maxLength={19} />
-                )
-              }
-            </FormItem>
-            <FormItem label="性别">
-              {
-                getFieldDecorator('sex', {
-                  rules: [
-                    { required: true, message: '请选择性别' }
-                  ]
-                })(
-                  <Radio.Group  style={{ width: '500px' }} initialValue={1}>
-                    <Radio value={1}>男</Radio>
-                    <Radio value={2}>女</Radio>
-                  </Radio.Group>
-                )
-              }
-            </FormItem>
-            <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: '请选择出生日期' }
-                  ]
-                })(
-                // <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>
+    <Form   {...formItemLayout} ref={formRef}
+      // onChange={onChange}  onSubmit只有一个 随便写个不行吗onDelete
+      onSubmit={e => handleChange(e, props)}
+
+
+    >
+      <FormItem hidden >
+        {getFieldDecorator('key')(<Input />)}
+      </FormItem>
+      <FormItem label="姓名">
+        {getFieldDecorator('title', {
+          rules: [{ required: true, message: '请输入姓名!' }],
+        })(<Input />)}
+      </FormItem>
+      <FormItem label="身份证号" >
+        {
+          getFieldDecorator('cardId', {
+            rules: [{ required: true, message: '请输入身份证号' }]
+          })(
+            <Input maxLength={19} />
+          )
+        }
+      </FormItem>
+      <FormItem label="性别">
+        {
+          getFieldDecorator('sex', {
+            rules: [
+              { required: true, message: '请选择性别' }
+            ]
+          })(
+            <Radio.Group style={{ width: '500px' }} initialValue={1}>
+              <Radio value={1}>男</Radio>
+              <Radio value={2}>女</Radio>
+            </Radio.Group>
+          )
+        }
+      </FormItem>
+      <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: '请选择出生日期' }
+            ]
+          })(
+            // <RangePicker style={{width: '255px'}} 还是有点问题0.0为啥 />
+            <DatePicker onChange={onChange} />
+          )
+        }
+      </FormItem>
+      <FormItem wrapperCol={{ span: 12, offset: 5 }}>
+        <Button type="primary" htmlType="submit" style={{ marginLeft: '80px', marginTop: '30px' }}>
+          修改
+        </Button>
+        <Button type="danger">
+          删除
+        </Button>
+      </FormItem>
+    </Form>
   )
 })
 

src/pages/staff/Organization/index.jsx

@@ -1,36 +1,37 @@
 
 import { Row, Col, Card, Tree, Form, TreeSelect, Input, InputNumber, Modal, Button, message } from 'antd'
+import moment from 'moment';
 // import React, { useEffect, useState, useCallback,useRef } from 'react';
 import TreedataFrom from './form';
 
-const { TreeNode,DirectoryTree } = Tree;
+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 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')
-    }
+  if (data.key !== 0) {
+    Modal.confirm({
+      title: '确认删除吗？',
+      okText: '确认',
+      cancelText: '取消',
+      onOk() {
+        message.error('失败');
+
+      },
+    });
+  } else {
+    message.error('error')
+  }
 }
 
 
@@ -44,41 +45,51 @@ const confirm = data => {
 //   var uuid = s.join("");
 //   return uuid;
 // }
-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' ,},
-    ],
-  },
-  {
+// import moment from 'moment';
+
+
+const treeData =
+  [
+    {
+      title: '分厂厂长管理',
+      key: '0',
+      selectable: false,
+      children: [
+        { title: '郎岩', phone: '15920583224', remark: "", day: "1992-11-13", cardId: '511502199103223189', sex: 1, id: '0212', belon: 1, homeaddres: 1, key: '0-0-0-1' },//这个不行么 你写错了 你那是v4的写法在哪？刚刚那个啊。对
+        { title: '柯琼彦', phone: '13184013427', remark: "", day: "1991-11-22", cardId: '210203197503102721', sex: 2, id: '4242', belon: 2, homeaddres: 2, key: '0-0-0-2', },
+      ],
+    },
+    {
       title: '分厂员工管理',
       key: '0-0-1',
+      selectable: false,
       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' },
+        { title: '伏佳', phone: '18613523527', remark: "", day: "1992-10-11", cardId: '520323197806058856', sex: 1, id: '1124', belon: 4, homeaddres: 4, key: '0-0-1-0' },
+        { title: '舒宏', phone: '14736632088', remark: "", day: "1992-12-13", cardId: '610729197408202551', sex: 1, id: '4534', belon: 3, homeaddres: 2, key: '0-0-1-1' },
+        { title: '狄莉珍', phone: '17604898508', remark: "", day: "1993-10-11", cardId: '820000195008115837', sex: 1, id: '4242', belon: 1, homeaddres: 5, key: '0-0-1-2' },
       ],
-  },
-];
-// const item = this.info.node.key
+    },
+  ]
+
+
+
+
+// const item = this.info.node.key 不是！！！！
 
 class TreeDemo extends React.Component {
   formRef = React.createRef();
-  
-  
-  constructor(props){
-    super(props)  
+
+
+  constructor(props) {
+    super(props)
     this.state = {
       expandedKeys: ['0-0-0', '0-0-1'],
       autoExpandParent: false,
       checkedKeys: ['0-0-0'],
       selectedKeys: [],
-      treeTitle:[],
-      checked:true
-      
+      // treeTitle: [info.node.props],
+      checked: true,
+      treeData: treeData
     };
   }
 
@@ -86,8 +97,8 @@ class TreeDemo extends React.Component {
   onExpand = expandedKeys => {
     console.log('onExpand', expandedKeys);
 
-      // 如果没有将 autoExpandParent 设置为 false，如果子项展开，父项不能折叠。
-     // 或者，您可以删除所有扩展的子键。
+    // 如果没有将 autoExpandParent 设置为 false，如果子项展开，父项不能折叠。
+    // 或者，您可以删除所有扩展的子键。
     this.setState({
       expandedKeys,
       autoExpandParent: false,
@@ -102,36 +113,75 @@ class TreeDemo extends React.Component {
   };
 
 
+  onChangethis = (value) => {
 
+    const treeData = this.state.treeData
 
-  onSelect=(value,info)=>{
-    this.setState({value},()=>{
-        this.formRef.current.setFieldsValue({
-          ...info.node.props,
-        })
+    let Data1 = this.state.treeData
+    for (var i = 0; i < treeData.length; i++) {
+
+      for (var j = 0; j < treeData[i].children.length; j++) {
+        // console.log(Data1[i].children[j].key);
+        // console.log("---------")
+        // console.log(value);
+        if (treeData[i].children[j].key == value.key) {
+
+          Data1[i].children[j] = value
+          //qileguaile wo cao
+          console.log(Data1[i].children[j]);
+          // console.log(treeData[i].children[j].key)
+          break
+        }
+      }
+
+    }
+  }
+  //删除
+  onDelect = (value) => {
+    const treeData = this.state.treeData
+    let Data1 = this.state.treeData
+    for (var i = 0; i < treeData.length; i++) {
+      for (var j = 0; j < treeData[i].children.length; j++) {
+
+        if (treeData[i].children[j].key == value.key) {
+
+          delete Data1[i].children[j]
+          break
+        }
+      }
+
+    }
+    // console.log("----Data1-----")
+    // console.log(Data1)
+    this.setState({
+      treeData: Data1
+    }, () => {
+      message.success('shanchuchenggong')
     })
+
   }
 
 
 
-// onSelect=(value,info)=>{
-//   this.setState({value},()=>{
-//     this.$nextTick(()=>{
-//       setTimeout(()=>{
-//         this.formRef.current.setFieldsValue({
-//           ...info.node.props,
-//         })
-//       })
-//     })
+  onSelect = (values, info) => {
+    // this.FromValue(info.node)
+    console.log(this.state.treeData)
+    console.log(info)
+    this.setState({ values }, () => {
+      this.formRef.current.setFieldsValue({
+        ...info.node.props,
+        key: info.node.props.eventKey,//event
+        day: moment(info.node.props.day)
+      })
 
-//   console.log(this.state.info);
+      console.log(values, info)
 
-//   })
-// }
+      // moment(info.node.props.day).format('YYYY-MM-DD')
+    })
+  }
 
 
 
-;
 
   renderTreeNodes = data =>
     data.map(item => {
@@ -139,8 +189,7 @@ class TreeDemo extends React.Component {
         return (
           <TreeNode title={item.title} key={item.key} dataRef={item}  >
             {this.renderTreeNodes(item.children)}
-            
-          </TreeNode>
+          </TreeNode >
         );
       }
       return <TreeNode key={item.key} {...item} />;
@@ -151,50 +200,47 @@ class TreeDemo extends React.Component {
   render() {
 
     return (
-     <Card>
-      <Row >
-        <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 0 }}>
-          <Card>
+      <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>
-          {/* onDelete={() => onDelete(item.key)} */}
-              <Button type="danger" >
-                删除
-              </Button> 
-               <Tree 
-                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}
+                label="管辖部门"
               >
-                {this.renderTreeNodes(treeData)}
-              </Tree > 
-
-            </FormItem>
-          </Card>
-        </Col>
-        <Col xs={{ span: 10, offset: 10 }} lg={{ span: 10, offset: 4 }}>
-          <Card>
-          <TreedataFrom 
-          ref={this.formRef} 
-          />
-          </Card>
-        </Col>
-      </Row>
-     </Card> 
+                <Button type="primary" onClick={onAdd} >
+                  增加
+                </Button>
+
+                <Tree
+
+                  showLine
+                  // switcherIcon={<DownOutlined />}
+                  defaultExpandedKeys={['0-0-0']}
+                  onSelect={this.onSelect}
+                  treeData={this.state.treeData}
+                >
+                  {this.renderTreeNodes(this.state.treeData)}
+                  {/* 动态渲染 */}
+                </Tree >
+                {/* 不加入生命周期不会有更改a */}
+              </FormItem>
+            </Card>
+          </Col>
+          <Col xs={{ span: 10, offset: 10 }} lg={{ span: 10, offset: 4 }}>
+            <Card>
+              <TreedataFrom
+                ref={this.formRef}
+                triggerRef={this.bindRef}
+                onChangethis={this.onChangethis}
+                onSubmit={this.onChangethis}
+              />
+            </Card>
+          </Col>
+        </Row>
+      </Card>
     );
   }
+
 }
 
-export default TreeDemo 
+export default TreeDemo