baozhangchao 3 years ago
parent
commit
a947872212
2 changed files with 285 additions and 142 deletions
  1. 205
    104
      src/pages/staff/Organization/form.jsx
  2. 80
    38
      src/pages/staff/Organization/index.jsx

+ 205
- 104
src/pages/staff/Organization/form.jsx View File

@@ -1,122 +1,223 @@
1
-import React from 'react'
2
-import { Row, Col, Card, Tree, DatePicker, Radio,Form, Select, Input,InputNumber, Button } from 'antd';
1
+// // import React from 'react'
2
+// import { Row, Col, Card, Tree, DatePicker, Radio,Form, Select, Input,InputNumber, Button } from 'antd';
3
+// import React, { useEffect, useState, useCallback } from 'react';
4
+
5
+
6
+// import ImageUpload from '@/components/XForm/ImageUpload';
7
+// const FormItem = Form.Item;
8
+// const {RangePicker}=DatePicker
9
+// const [loading, setLoading] = useState(false);
10
+
11
+// const formItemLayout = {
12
+//     labelCol: { span: 6 },
13
+//     wrapperCol: { span: 14 },
14
+// };
15
+
16
+// class TreedataFrom extends React.Component {
17
+  
18
+//   handleSubmit = e => {
19
+//     e.preventDefault();
20
+//     this.props.form.validateFields((err, values) => {
21
+//       if (!err) {
22
+//         return;
23
+//       }
24
+//       setLoading(true);
25
+
26
+//       if (eventKey) {
27
+//         //如果有这个id拿。没有就,拿返回的curriculumId
28
+//         updateCurriculumData({
29
+//           data: {
30
+//             ...values,
31
+//             eventKey
32
+//           },
33
+//           urlData: { id: eventKey }
34
+//         }).then(() => {
35
+//           setLoading(false);
36
+//           message.success('数据更新成功');
37
+//           goBack()
38
+//         }).catch((err) => {
39
+//           setLoading(false);//loading消失
40
+//           message.error(err.message || err);
41
+//         })
42
+//       } else {
43
+//         saveCurriculumData({ data: values }).then(() => {
44
+//           setLoading(false);
45
+//           message.success('数据保存成功');
46
+//           goBack()
47
+//         }).catch((err) => {
48
+//           setLoading(false);//loading消失
49
+//           message.error(err.message || err);
50
+//         })
51
+//       }
52
+
53
+//     });
54
+//   };
55
+
56
+//   render() {
57
+//     const { form,getFieldDecorator } = this.props.form;
58
+//     return (
59
+//       <Form {...formItemLayout} onSubmit={this.handleSubmit} >
60
+//         <FormItem label="照片" help="建议尺寸:750px*600px,比例5:4,格式:jpg,用于:列表和详情">
61
+//           {
62
+//             getFieldDecorator('curriculumImg', {
63
+//               rules: [
64
+//                 { required: true, message: '请上传照片' }
65
+//               ]
66
+//             })(
67
+//               <ImageUpload />
68
+//             )
69
+//           }
70
+//         </FormItem>
71
+//         <FormItem label="姓名">
72
+//           {getFieldDecorator('note', {
73
+//             rules: [{ required: true, message: '请输入姓名!' }],
74
+//           })(<Input style={{width:"200px"}} />)}
75
+//         </FormItem>
76
+//         <FormItem label="年龄" >
77
+//            {
78
+//             getFieldDecorator('weight', {
79
+//               rules: [{ required: true, message: '请输入年龄' }]
80
+//             })(
81
+//               <InputNumber min='18' />
82
+//             )
83
+//           }
84
+//         </FormItem>
85
+//         <FormItem label="性别">
86
+//           {
87
+//             getFieldDecorator('type', {
88
+//               rules: [
89
+//                 { required: true, message: '请选择性别' }
90
+//               ]
91
+//             })(
92
+//               <Radio.Group  style={{ width: '500px' }} initialValue={1}>
93
+//                 {/* onChange={e => setContentType(e.target.value)} */}
94
+//                 <Radio value={1}>男</Radio>
95
+//                 <Radio value={2}>女</Radio>
96
+//               </Radio.Group>
97
+//             )
98
+//           }
99
+//         </FormItem>
100
+//         <FormItem label="工作总时间" style={{ marginBottom: 0 }} help="如未离职,结束日期和开始日期一样即可">
101
+//           <FormItem style={{ display: 'inline-block' }} >
102
+//             <RangePicker style={{width: '255px'}}/>
103
+//           </FormItem>
104
+//         </FormItem>
105
+//         <FormItem wrapperCol={{ span: 12, offset: 5 }}>
106
+//           <Button type="primary" htmlType="submit">
107
+//             Submit
108
+//           </Button>
109
+//         </FormItem>
110
+//       </Form>
111
+//     );
112
+//   }
113
+// }
3 114
 
115
+// export default Form.create({})(TreedataFrom);
4 116
 
5
-import ImageUpload from '@/components/XForm/ImageUpload';
6 117
 
7
-const { Option } = Select;
118
+//  TreedataFrom = Form.create({})(TreedataFrom);
119
+//  export default TreedataFrom 
120
+
121
+
122
+import React, { useEffect, useState, useCallback } from 'react';
123
+import { Button, Form, Select, Input, InputNumber, Radio, message, Card,DatePicker, } from 'antd';
124
+import ImageUpload from '@/components/XForm/ImageUpload';
8 125
 const FormItem = Form.Item;
9 126
 const {RangePicker}=DatePicker
10 127
 
11
-const formItemLayout = {
128
+const TreedataFrom = React.forwardRef((props, ref) => {
129
+  const [treeData, setTreeData] = useState();
130
+  const [data, setData] = useState(treeData);
131
+  const { form, treeTitle } = props;
132
+  const { getFieldDecorator, setFieldsValue, validateFields } = form;
133
+
134
+  const formItemLayout = {
135
+    //布局
12 136
     labelCol: { span: 6 },
13 137
     wrapperCol: { span: 14 },
14
-};
15 138
 
16
-class TreedataFrom extends React.Component {
17
-  handleSubmit = e => {
18
-    e.preventDefault();
19
-    this.props.form.validateFields((err, values) => {
20
-      if (!err) {
21
-        console.log('Received values of form: ', values);
22
-      }
23
-    });
24 139
   };
140
+  const formRef = React.createRef();
25 141
 
26
-  handleSelectChange = value => {
27
-    console.log(value);
28
-    this.props.form.setFieldsValue({
29
-      note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
30
-    });
31
-  };
32
-
33
-  render() {
34
-    const { getFieldDecorator } = this.props.form;
35
-    return (
36
-      <Form {...formItemLayout} onSubmit={this.handleSubmit}>
37
-        <FormItem label="照片" help="建议尺寸:750px*600px,比例5:4,格式:jpg,用于:列表和详情">
38
-          {
39
-            getFieldDecorator('curriculumImg', {
40
-              rules: [
41
-                { required: true, message: '请上传照片' }
42
-              ]
43
-            })(
44
-              <ImageUpload />
45
-            )
46
-          }
47
-        </FormItem>
48
-        <FormItem label="姓名">
49
-          {getFieldDecorator('note', {
50
-            rules: [{ required: true, message: '请输入姓名!' }],
51
-          })(<Input />)}
52
-        </FormItem>
53
-        <FormItem label="年龄" >
54
-           {
55
-            getFieldDecorator('weight', {
56
-              rules: [{ required: true, message: '请输入年龄' }]
57
-            })(
58
-              <InputNumber min='18' />
59
-            )
60
-          }
61
-        </FormItem>
62
-        <FormItem label="性别">
63
-          {
64
-            getFieldDecorator('type', {
65
-              rules: [
66
-                { required: true, message: '请选择性别' }
67
-              ]
68
-            })(
69
-              <Radio.Group  style={{ width: '500px' }} defaultValue={1}>
70
-                {/* onChange={e => setContentType(e.target.value)} */}
71
-                <Radio value={1}>男</Radio>
72
-                <Radio value={2}>女</Radio>
73
-              </Radio.Group>
74
-            )
75
-          }
76
-        </FormItem>
77
-        <FormItem label="工作总时间" style={{ marginBottom: 0 }} help="如未离职,结束日期和开始日期一样即可">
78
-          <FormItem style={{ display: 'inline-block' }} >
79
-            <RangePicker style={{width: '255px'}}/>
80
-          </FormItem>
81
-        </FormItem>
82
-        <FormItem label="Gender">
83
-          {getFieldDecorator('gender', {
84
-            rules: [{ required: true, message: 'Please select your gender!' }],
85
-          })(
86
-            <Select
87
-              placeholder="Select a option and change input text above"
88
-              onChange={this.handleSelectChange}
89
-            >
90
-              <Option value="male">male</Option>
91
-              <Option value="female">female</Option>
92
-            </Select>,
93
-          )}
94
-        </FormItem>
95
-        <FormItem wrapperCol={{ span: 12, offset: 5 }}>
96
-          <Button type="primary" htmlType="submit">
97
-            Submit
98
-          </Button>
99
-        </FormItem>
100
-      </Form>
101
-    );
142
+  const onChange=(date, dateString)=> {
143
+    console.log(date, dateString);
102 144
   }
103
-}
104
-
105
-
106
-TreedataFrom = Form.create({})(TreedataFrom);
107
-
108
-export default TreedataFrom
109
-
110 145
 
111 146
 
147
+  const handleSubmit = (e) => {
148
+    e.preventDefault();
149
+    validateFields((err, values) => {
150
+      if (err) {
151
+        return;
152
+        //字符验证未填写---返回
153
+      }
154
+    });
155
+  }
112 156
 
113
-// import React from 'react'
114 157
 
115
-// class Hello extends React.Component{
116
-//     render(){
117
-//         return<h1>asdasdasdas</h1>
118
-//     }
119
-// }
158
+  return (
159
+    <Form {...formItemLayout}  ref={formRef} onSubmit={handleSubmit} >
160
+         <FormItem label="照片" help="建议尺寸:750px*600px,比例5:4,格式:jpg,用于:列表和详情">
161
+               {
162
+                getFieldDecorator('curriculumImg', {
163
+                  rules: [
164
+                    { required: true, message: '请上传照片' }
165
+                  ]
166
+                })(
167
+                  <ImageUpload />
168
+                )
169
+              }
170
+            </FormItem>
171
+            <FormItem label="姓名">
172
+              {getFieldDecorator('name', {
173
+                rules: [{ required: true, message: '请输入姓名!' }],
174
+              })(<Input style={{width:"200px"}} />)}
175
+            </FormItem>
176
+            <FormItem label="年龄" >
177
+               {
178
+                getFieldDecorator('age', {
179
+                  rules: [{ required: true, message: '请输入年龄' }]
180
+                })(
181
+                  <InputNumber min={18}  />
182
+                )
183
+              }
184
+            </FormItem>
185
+            <FormItem label="性别">
186
+              {
187
+                getFieldDecorator('sex', {
188
+                  rules: [
189
+                    { required: true, message: '请选择性别' }
190
+                  ]
191
+                })(
192
+                  <Radio.Group  style={{ width: '500px' }} initialValue={1}>
193
+                    {/* onChange={e => setContentType(e.target.value)} */}
194
+                    <Radio value={1}>男</Radio>
195
+                    <Radio value={2}>女</Radio>
196
+                  </Radio.Group>
197
+                )
198
+              }
199
+            </FormItem>
200
+            <FormItem label="工作总时间" style={{ marginBottom: 0 }} >
201
+              {
202
+                getFieldDecorator('day', {
203
+                  rules: [
204
+                    { required: true, message: '请选择日期' }
205
+                  ]
206
+                })(
207
+                // <RangePicker style={{width: '255px'}} />
208
+                <DatePicker onChange={onChange} />
209
+                )
210
+              }
211
+            </FormItem>
212
+            <FormItem wrapperCol={{ span: 12, offset: 5 }}>
213
+              <Button type="primary"  htmlType="submit" style={{marginLeft:'80px' , marginTop:'30px'}}>
214
+                修改
215
+              </Button>
216
+            </FormItem>
217
+          </Form>
218
+  )
219
+})
220
+
221
+export default Form.create({})(TreedataFrom);
120 222
 
121 223
 
122
-// export default Hello

+ 80
- 38
src/pages/staff/Organization/index.jsx View File

@@ -211,48 +211,66 @@
211 211
 
212 212
 
213 213
 
214
-import { Row, Col, Card, Tree, DatePicker, Form, Input, InputNumber, Radio, Button } from 'antd'
214
+import { Row, Col, Card, Tree, Form, TreeSelect, Input, InputNumber, Radio, Button } from 'antd'
215 215
 import { title } from 'echarts/lib/theme/dark';
216 216
 import React, { useEffect, useState, useCallback,useRef } from 'react';
217 217
 import TreedataFrom from './form';
218 218
 
219 219
 const { TreeNode,DirectoryTree } = Tree;
220
+const FormItem = Form.Item;
220 221
 
221
-// const [treeData, settreeData] = useState([])
222 222
 
223
+  const onAdd = (key) => {
224
+    if (expandedKeys.indexOf(key) === -1) {
225
+      expandedKeyArr.push(key);
226
+    }
227
+    setExpandedKeys(expandedKeyArr.slice());
228
+    addNode(key, treeData);//添加节点 树形
229
+    //useState里数据务必为immutable (不可赋值的对象),所以必须加上slice()返回一个新的数组对象
230
+    setData(treeData.slice());//添加子项
231
+  };
232
+// const [treeData, settreeData] = useState([])
223 233
 
224 234
 const treeData = [
225 235
   {
226 236
     title: '分厂厂长管理',
227
-    key: '0-0',
237
+    key: '0',
228 238
     children: [
229
-        { title: '刘厂长', key: '0-0-0-1' },
230
-        { title: '王副厂长', key: '0-0-0-2' },
239
+        { title: '刘厂长',age:48, sex:1, key: '0-0-0-1' },
240
+        { title: '王副厂长', age:28, sex:1,key: '0-0-0-2' ,},
231 241
     ],
232 242
   },
233 243
   {
234 244
       title: '分厂员工管理',
235 245
       key: '0-0-1',
236 246
       children: [
237
-        { title: '王王王', key: '0-0-1-0' },
238
-        { title: '张张张', key: '0-0-1-1' },
239
-        { title: '刘刘刘', key: '0-0-1-2' },
247
+        { title: '小王', age:20, sex:1,key: '0-0-1-0' },
248
+        { title: '小刘', age:23, sex:1,key: '0-0-1-1' },
249
+        { title: '小罗',age:34, sex:1, key: '0-0-1-2' },
240 250
       ],
241 251
   },
242 252
 ];
243 253
 
244
-class Demo extends React.Component {
254
+class TreeDemo extends React.Component {
255
+  formRef = React.createRef();
256
+  
257
+  
258
+  constructor(props){
259
+    super(props)  
260
+    this.state = {
261
+      expandedKeys: ['0-0-0', '0-0-1'],
262
+      autoExpandParent: false,
263
+      checkedKeys: ['0-0-0'],
264
+      selectedKeys: [],
265
+      treeTitle:[this.treeTitle]
266
+      
267
+    };
268
+  }
245 269
 
246
-  state = {
247
-    expandedKeys: ['0-0', '0-0-1'],
248
-    autoExpandParent: false,
249
-    checkedKeys: ['0-0-1'],
250
-    selectedKeys: [],
251
-  };
252 270
 
253 271
   onExpand = expandedKeys => {
254
-    //自动展开
255 272
     console.log('onExpand', expandedKeys);
273
+
256 274
       // 如果没有将 autoExpandParent 设置为 false,如果子项展开,父项不能折叠。
257 275
      // 或者,您可以删除所有扩展的子键。
258 276
     this.setState({
@@ -261,23 +279,20 @@ class Demo extends React.Component {
261 279
     });
262 280
   };
263 281
 
264
-  onCheck = checkedKeys => {
265
-    //单击复选框
266
-    console.log('onCheck', checkedKeys);
267
-    this.setState({ checkedKeys });
268
-    
269
-  };
270 282
 
271
-  onSelect = (selectedKeys, info) => {
272
-    //单击姓名
273
-    for (let i = 0; i < selectedKeys.length; i++) {
274
-      const element = selectedKeys[i];
275
-      console.log(element);
276
-  }
277
-  
278
-    console.log('onSelect',info);
279
-    this.setState({ selectedKeys });
280
-  };
283
+onSelect=(value,info)=>{
284
+  this.setState({value},()=>{
285
+    this.formRef.current.setFieldsValue({
286
+      name:info.node.props.title,
287
+      age:info.node.props.age,
288
+
289
+    })
290
+  })
291
+}
292
+
293
+
294
+
295
+
281 296
 
282 297
   renderTreeNodes = data =>
283 298
     data.map(item => {
@@ -285,6 +300,7 @@ class Demo extends React.Component {
285 300
         return (
286 301
           <TreeNode title={item.title} key={item.key} dataRef={item}  >
287 302
             {this.renderTreeNodes(item.children)}
303
+            
288 304
           </TreeNode>
289 305
         );
290 306
       }
@@ -294,13 +310,31 @@ class Demo extends React.Component {
294 310
 
295 311
 
296 312
   render() {
313
+
297 314
     return (
298 315
      <Card>
299
-      <Row>
316
+      <Row >
300 317
         <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 0 }}>
301 318
           <Card>
302
-              <Tree 
303
-                // checkable
319
+
320
+              <FormItem
321
+              label="管辖部门"
322
+            >
323
+              <Button type="primary" style={{marginRight:'20px'}} onClick={()=>onAdd} >
324
+                增加
325
+              </Button>
326
+              <Button type="danger">
327
+                删除
328
+              </Button> 
329
+               <Tree 
330
+                // showSearch
331
+                style={{ width: '100%' }}
332
+                value={this.state.value}
333
+                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
334
+                placeholder="Please select"
335
+                allowClear
336
+                treeDefaultExpandAll
337
+                treeData={this.state.treeData}
304 338
                 showLine={true}
305 339
                 onExpand={this.onExpand}
306 340
                 expandedKeys={this.state.expandedKeys}
@@ -311,12 +345,20 @@ class Demo extends React.Component {
311 345
                 selectedKeys={this.state.selectedKeys}
312 346
               >
313 347
                 {this.renderTreeNodes(treeData)}
314
-              </Tree >
348
+              </Tree > 
349
+
350
+            </FormItem>
315 351
           </Card>
316 352
         </Col>
317 353
         <Col xs={{ span: 10, offset: 10 }} lg={{ span: 10, offset: 4 }}>
318 354
           <Card>
319
-          <TreedataFrom />
355
+          <TreedataFrom 
356
+          // treeTitle={this.state.treeTitle}
357
+          ref={this.formRef} 
358
+          // onFinish={this.state.onFinish}
359
+
360
+          
361
+          />
320 362
           </Card>
321 363
         </Col>
322 364
       </Row>
@@ -325,4 +367,4 @@ class Demo extends React.Component {
325 367
   }
326 368
 }
327 369
 
328
-export default Demo 
370
+export default TreeDemo