Merge branch 'master' of http://git.ycjcjy.com/marketing/pc-admin into master

src/pages/staff/Organization/addForm.jsx

+
+
+import { Form, Icon, Input, Button, Card, message, Checkbox } from 'antd';
+const FormItem = Form.Item
+const formItemLayout = {
+    //布局
+    labelCol: { span: 6 },
+    wrapperCol: { span: 14 },
+
+};
+class AddForm extends React.Component {
+    handleSubmit = e => {
+        e.preventDefault();
+        this.props.form.validateFields((err, values) => {
+            if (!err) {
+                console.log('Received values of form: ', values);
+            }
+        });
+    };
+
+    render() {
+        const { getFieldDecorator } = this.props.form;
+        return (
+            <Form onSubmit={this.handleSubmit} className="login-form" {...formItemLayout}>
+                <FormItem label="名称">
+                    {getFieldDecorator('title', {
+                        rules: [
+                            { required: true, message: '请输入名称!' }
+                        ]
+                    })(
+                        <Input />
+                    )}
+                </FormItem>
+                <FormItem >
+                    <Button type="primary" htmlType="submit" style={{ marginLeft: '14em', marginTop: '30px' }}>
+                        新增
+                    </Button>
+                </FormItem>
+            </Form>
+        );
+    }
+}
+
+export default Form.create({})(AddForm);

src/pages/staff/Organization/form.jsx

 
 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 { ProFormDatePicker } from "@ant-design/pro-form";
+import router from 'umi/router';
+import { fetch, apis, request } from '@/utils/request';
+// import { values } from 'lodash';
 
-import { values } from 'lodash';
 const FormItem = Form.Item;
 const { RangePicker } = DatePicker
 const { Option } = Select;
+const updateTreeData = fetch(apis.Institution.instiAlert); //接口
+// const Treelist = fetch(apis.Institution.instIist)
+
 const TreedataFrom = React.forwardRef((props, ref) => {
   // const [treeData, onChangethis] = useState();
   const [treeData, settreeData] = useState(0)
-  const OnchangeThis = (value) => { }
-  const [data, setData] = useState(treeData);
-  const { form, treeTitle, onChangethis } = props;
+  const { onChangethis } = props//获取父组件的方法
+  // const [data, setData] = useState(treeData);
+  const { form, treeTitle, } = props;
   const { getFieldDecorator, setFieldsValue, validateFields } = form;
+  // const { institutionId } = history || {}
 
   const formItemLayout = {
     //布局
   const formRef = React.createRef();
 
   const onChange = (date, dateString) => {
-    // onChangethis(value)
-    console.log(date, dateString);
+    onChangethis(value)
+    console.log('fomr onChange---', date, dateString);
   }
+  //
 
-  const handleSubmit = (value) => {
-    props.onChangethis(value)
-    console.log(value);
+  const handleSubmitAdd = (value) => {
+    let arr = []
+    arr = props.form.getFieldsValue()//获取表单的值
+    console.log('---------------arr', arr.institutionId)
+    onChangethis(arr)//把表单值传入父组件的修改方法
+    return arr()
 
-    setFieldsValue(treeData)
+    // setFieldsValue(treeData) 
 
   }
 
 
+  const handleSubmit11 = (values) => {
 
+    updateTreeData({ urlData: { id: institutionId }, data: { ...values } }).then((data) => {
+    }).catch((err) => {
+      message.error(err.msg || err.message)
+    })
 
+  }
 
-  const handleChange = (e, props) => {
 
-    // e.preventDefault();
+  const handleSubmit = (e, values) => {
     let arr = []
     arr = props.form.getFieldsValue()
-    // console.log(arr)
-    onChangethis(arr)
-
+    e.preventDefault();//阻止默认提交
+    validateFields((err, value) => {
+      updateTreeData({
+        data: arr,
+        urlData: { id: value.institutionId }
+      }).then((data) => {
+        setData(treeData)
+        message.success('修改成功');
+      }).catch((err) => {
+        message.error(err.message || err);
+      })
+    });
   }
-  // const handleSubmit = (e) => {s
-  //   e.preventDefault();
-  //   validateFields((err, values) => {
-  //     if (err) {
-  //       return;
-  //       //字符验证未填写---返回
-  //     }
-  //   });
-  // }
+
+
   //挂载 
   const componentDidMount = () => {
-    console.log(this.props.FromValue)
+    console.log('6666666666form挂载', this.props.FromValue)
 
     this.props.triggerRef(this)
   }
 
     <Form   {...formItemLayout} ref={formRef}
       // onChange={onChange}  
-      onSubmit={e => handleChange(e, props)}
-
-
+      onSubmit={handleSubmit}
     >
       <FormItem hidden >
+        {getFieldDecorator('institutionId')(<Input />)}
+      </FormItem> <FormItem hidden >
         {getFieldDecorator('key')(<Input />)}
       </FormItem>
-      <FormItem label="姓名">
-        {getFieldDecorator('title', {
-          rules: [{ required: true, message: '请输入姓名!' }],
+      <FormItem label="名称">
+        {getFieldDecorator('institutionName', {
+          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>
         {/* <Button type="danger">
           删除
-        </Button> */}
+           </Button> */}
       </FormItem>
     </Form>
   )

src/pages/staff/Organization/index.jsx

 import apis from '@/services/apis';
 import moment from 'moment';
 import TreedataFrom from './form';
+import TreedataAdd from './addForm';
+import { values } from 'lodash';
 const { TreeNode, DirectoryTree } = Tree;
 const FormItem = Form.Item;
 const { Search } = Input;
 const { TabPane } = Tabs;
 
-const treeData =
-  [
-    {
-      title: 'institutionId',
-      name: 'institutionName',
-      key: '0-0-0',
-      selectable: false,
-      children: [
-        { name: 'institutionName', phone: '13184013427', remark: "", day: "1991-11-22", cardId: '210203197503102721', sex: 2, id: '4242', belon: 2, homeaddres: 2, key: '0-0-0-1', },
-        { 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', 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 treeData = []
+const updateTreeData = fetch(apis.Institution.instiAlert); //接口
 
 
 
   constructor(props) {
     super(props)
     this.state = {
-      expandedKeys: ['0-0-0', '0-0-1'],
-      autoExpandParent: false,
-      checkedKeys: ['0-0-0'],
-      searchValue: '',
-      selectedKeys: [],
+      // autoExpandParent: false,
       // treeTitle: [info.node.props],
+      // checkedKeys: ['0-0-0'],
+      expandedKeys: [],//展开的key
+      checkedKeys: [],//选中的key
+      autoExpandParent: true,
+      searchValue: '',
+      selectedKeys: [],//搜索得key
       checked: true,
       treeData: [],
       testarr: []
     };
   }
+
+
+  // onExpand = expandedKeys => {
+  //   this.setState({
+  //     expandedKeys,
+  //     autoExpandParent: false,
+  //   });
+  // };
+
+
+
   // --------标签页
   callback = (key) => {
     console.log(key);
   }
 
 
-
-
   onExpand = expandedKeys => {
     console.log('onExpand', expandedKeys);
 
     this.setState({
       sex: e.target.value
     });
-    console.log(valeu);
+    console.log(value);
   };
 
   //修改
-  onChangethis = (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++) {
-        // 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
-        }
-      }
-    }
-    this.setState({
-      treeData1: Data1
-    }, () => {
-      message.success('修改成功！')
-    })
-
-  }
-  //删除
-  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')
-    })
+  onChangethis = async (value) => {
+    //获取tree的修改前数据
+    const testarr = this.state.treeData
+    //把tree的修改前数据赋修改代存数据
+    // let Data1 = this.state.treeData
+    console.log('value*********>>', value)
+    // console.log('Data1------------>', Data1)
+    // urlData: { id: value.institutionId }
+    // //修改树的数据存在Data1 
+    // for (var i = 0; i < testarr.length; i++) {
+    //   // console.log('ID------------>', Data1[i].key);
+    //   if (testarr[i].key == value.institutionId) {
+    //     Data1[i] = value
+    //     const res = request(`/api/admin/institution/${Data1[i].institutionId}`, {
+    //       method: 'PUT',
+    //       data: value,
+    //     })
+    //     console.log('*************', value)
+    //     // console.log('*institutionName*****', institutionName)
+
+    //     if (res.success) {
+    //       message.success("成功")
+    //     } else {
+    //       message.error("失败")
+    //     }
+    //   }
+    // }
+    // this.setState({
+    //   treeData1: Data1
+    // }, () => {
+    //   message.success('修改成功！')
+    // })
 
   }
 
 
-
+  //单击赋值
   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)
+        // institutionId: info.node.props.institutionId,//event
+        // day: moment(info.node.props.day)
       })
-      console.log(this.getTreeData)
-
-      // moment(info.node.props.day).format('YYYY-MM-DD')
+      console.log(info.node.props);
     })
   }
 
-
-
-  // getTreeData = (e) => {
-  //   request({
-  //     url: "http://localhost:8000/api/admin/institution/list",
-  //     method: 'GET',
-
-  //     // params: {leveltype: 3, cityId},
-  //     action: "admin.institution.get",
-  //   }).then((treeData) => {
-  //     setData(treeData)
-  //     console.log(this.getTreeData)
-  //   })
-  // }
-
-
-
-
-
-
+  //首次加载
   async institutionTree(params) {
     let arr = []
-
     return request('/api/admin/institution/list', {
       method: 'GET',
       data: params,
     }).then((testarr2) => {
       this.setState({ testarr: testarr2 }, () => {
-        console.log("testarr2")
-        console.log(this.state.testarr)
+        // console.log("testarr2")
+        // console.log(this.state.testarr)
         // title: 'institutionId',
         // name: 'institutionName',
         // key: '0-0-0',
         const arr2 = this.state.testarr
         for (var i = 0; i < this.state.testarr.length; i++) {
           let list = {
-            title: 'institutionId',
-            name: 'institutionName',
-            key: '0-0-0'
+            title: '',
+            institutionName: 'institutionName',
+            // name: 'institutionId',
+            institutionId: 'institutionId',
+            key: '0-0-0',
           }
+          list.institutionName = arr2[i].institutionName
           list.title = arr2[i].institutionName
-          list.key = '0' + i.toString
+          list.institutionId = arr2[i].institutionId
+          list.key = arr2[i].institutionId
+          // '0' + i.toString
           arr.push(list)
-
         }
-
+        // console.log("arr")
+        // console.log(arr)
         this.setState({
           treeData: arr
         })
     })
   }
 
-  componentDidMount() {
-    // fetch(`http://localhost:8000/api/admin/institution/list`, {
-    //   headers: {
-    //     Authorization: "Bearer eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiIxIiwib3JnSWQiOiIxIiwiZXhwIjoxNjI3MDQ1MjQxfQ.7FhVDoI0dEECZinRUzMzcLl-kcobkamZSqoUzTxBTRo"
-    //   }
-    // }).then((res) => {
-    //   console.log(res)
-    // }),
-    // this.institutionTree()
-    this.institutionTree([])
-
-  }
-
 
 
 
+  UNSAFE_componentWillMount() {
+    this.institutionTree([])
 
+  }
 
 
   renderTreeNodes = data =>
-    data.map(item => {
+    (data || []).map(item => {//初始化data
       if (item.children) {
         return (
           <TreeNode title={item.title} key={item.key} dataRef={item}  >
       }
       return <TreeNode key={item.key} {...item} />;
     });
-  //搜索框 
-  // onChange = e => {
-  //   const { value } = e.target;
-  //   const expandedKeys = treeData
-  //     .map(item => {
-  //       if (item.title.indexOf(value) > -1) {
-  //         return getParentKey(item.key, gData);
-  //       }
-  //       return null;
-  //     })
-  //     .filter((item, i, self) => item && self.indexOf(item) === i);
-  //   this.setState({
-  //     expandedKeys,
-  //     searchValue: value,
-  //     autoExpandParent: true,
-  //   });
-  // };
+
 
 
 
 
   render() {
-    const { searchValue } = this.state;
+    const { searchValue, autoExpandParent, expandedKeys, checkedKeys } = this.state;
     return (
       <Card>
         <Row >
               <FormItem
                 label="管辖部门"
               >
-                {/* <Search style={{ marginBottom: 8 }} placeholder="Search" onChange={this.onChange} /> */}
+                <Search style={{ marginBottom: 8 }} placeholder="Search" onChange={this.onChange} />
                 <Tree
                   // api={apis.Institution.instIist}
+                  // checkable
+                  onExpand={this.onExpand}
+                  expandedKeys={expandedKeys}
+                  autoExpandParent={autoExpandParent}
+                  // checkedKeys={checkedKeys}
+
                   showLine
-                  defaultExpandedKeys={['0-0']}
+                  // defaultExpandedKeys={['0-0']}
                   onSelect={this.onSelect}
                   treeData={this.state.treeData}
+                // treeData={loop(gData)}
                 // api={apis.Institution.instIist} 
                 >
                   {this.renderTreeNodes(this.state.treeData)}
                 <TabPane tab='编辑' key='1'>
                   <TreedataFrom
                     ref={this.formRef}
+                    api={apis.Institution.instiAlert}
                     triggerRef={this.bindRef}
                     onChangethis={this.onChangethis}
                     onSubmit={this.onChangethis}
                   />
                 </TabPane>
-                <TabPane tab='新增' key='2'>
-                  <div>You cannot set a form field before rendering a field associated with the value. </div>
-                </TabPane>
+                {/* <TabPane tab='新增' key='2'>
+                  <TreedataAdd
+                  >
+                  </TreedataAdd>
+                </TabPane> */}
 
               </Tabs>
             </Card>

src/services/apis.js

       url: `${prefix}/video/:id`,
       action: 'admin.publish.id.put',
     },
-   
+
   },
 };