|
@@ -1,61 +1,23 @@
|
1
|
1
|
|
2
|
2
|
import { Row, Col, Card, Tree, Form, TreeSelect, Input, InputNumber, Modal, Button, message } from 'antd'
|
|
3
|
+import React, { useState, useEffect } from 'react';
|
|
4
|
+import request from '@/utils/request';
|
|
5
|
+import apis from '@/services/apis';
|
3
|
6
|
import moment from 'moment';
|
4
|
|
-// import React, { useEffect, useState, useCallback,useRef } from 'react';
|
5
|
7
|
import TreedataFrom from './form';
|
6
|
|
-
|
7
|
8
|
const { TreeNode, DirectoryTree } = Tree;
|
8
|
9
|
const FormItem = Form.Item;
|
9
|
|
-
|
10
|
|
-//-----------------------------------
|
11
|
|
-const onAdd = (key) => {
|
12
|
|
- if (expandedKeys.indexOf(key) === -1) {
|
13
|
|
- expandedKeyArr.push(key);
|
14
|
|
- }
|
15
|
|
- expandedKeys(expandedKeyArr.slice());
|
16
|
|
- addNode(key, treeData);//添加节点 树形
|
17
|
|
- setData(treeData.slice());//添加子项
|
18
|
|
-};
|
19
|
|
-//-----------------------------------
|
20
|
|
-const confirm = data => {
|
21
|
|
- // {...data,isPublish}
|
22
|
|
- if (data.key !== 0) {
|
23
|
|
- Modal.confirm({
|
24
|
|
- title: '确认删除吗?',
|
25
|
|
- okText: '确认',
|
26
|
|
- cancelText: '取消',
|
27
|
|
- onOk() {
|
28
|
|
- message.error('失败');
|
29
|
|
-
|
30
|
|
- },
|
31
|
|
- });
|
32
|
|
- } else {
|
33
|
|
- message.error('error')
|
34
|
|
- }
|
35
|
|
-}
|
36
|
|
-
|
37
|
|
-
|
38
|
|
-// function uuid() {
|
39
|
|
-// var s = [];
|
40
|
|
-// var hexDigits = "0123456789";
|
41
|
|
-// for (var i = 0; i < 18; i++) {
|
42
|
|
-// s[i] = hexDigits.substr(Math.floor(Math.random() * 1*10), 1);
|
43
|
|
-// }
|
44
|
|
-
|
45
|
|
-// var uuid = s.join("");
|
46
|
|
-// return uuid;
|
47
|
|
-// }
|
48
|
|
-// import moment from 'moment';
|
49
|
|
-
|
|
10
|
+const { Search } = Input;
|
50
|
11
|
|
51
|
12
|
const treeData =
|
52
|
13
|
[
|
53
|
14
|
{
|
54
|
|
- title: '分厂厂长管理',
|
55
|
|
- key: '0',
|
|
15
|
+ title: 'institutionId',
|
|
16
|
+ name: 'institutionName',
|
|
17
|
+ key: '0-0-0',
|
56
|
18
|
selectable: false,
|
57
|
19
|
children: [
|
58
|
|
- { title: '郎岩', phone: '15920583224', remark: "", day: "1992-11-13", cardId: '511502199103223189', sex: 1, id: '0212', belon: 1, homeaddres: 1, key: '0-0-0-1' },//这个不行么 你写错了 你那是v4的写法在哪?刚刚那个啊。对
|
|
20
|
+ { name: 'institutionName', phone: '13184013427', remark: "", day: "1991-11-22", cardId: '210203197503102721', sex: 2, id: '4242', belon: 2, homeaddres: 2, key: '0-0-0-1', },
|
59
|
21
|
{ title: '柯琼彦', phone: '13184013427', remark: "", day: "1991-11-22", cardId: '210203197503102721', sex: 2, id: '4242', belon: 2, homeaddres: 2, key: '0-0-0-2', },
|
60
|
22
|
],
|
61
|
23
|
},
|
|
@@ -74,22 +36,23 @@ const treeData =
|
74
|
36
|
|
75
|
37
|
|
76
|
38
|
|
77
|
|
-// const item = this.info.node.key 不是!!!!
|
|
39
|
+// const item = this.info.node.key
|
78
|
40
|
|
79
|
41
|
class TreeDemo extends React.Component {
|
80
|
42
|
formRef = React.createRef();
|
81
|
43
|
|
82
|
|
-
|
83
|
44
|
constructor(props) {
|
84
|
45
|
super(props)
|
85
|
46
|
this.state = {
|
86
|
47
|
expandedKeys: ['0-0-0', '0-0-1'],
|
87
|
48
|
autoExpandParent: false,
|
88
|
49
|
checkedKeys: ['0-0-0'],
|
|
50
|
+ searchValue: '',
|
89
|
51
|
selectedKeys: [],
|
90
|
52
|
// treeTitle: [info.node.props],
|
91
|
53
|
checked: true,
|
92
|
|
- treeData: treeData
|
|
54
|
+ treeData: [],
|
|
55
|
+ testarr: []
|
93
|
56
|
};
|
94
|
57
|
}
|
95
|
58
|
|
|
@@ -112,14 +75,12 @@ class TreeDemo extends React.Component {
|
112
|
75
|
console.log(valeu);
|
113
|
76
|
};
|
114
|
77
|
|
115
|
|
-
|
|
78
|
+ //修改
|
116
|
79
|
onChangethis = (value) => {
|
117
|
80
|
|
118
|
81
|
const treeData = this.state.treeData
|
119
|
|
-
|
120
|
82
|
let Data1 = this.state.treeData
|
121
|
83
|
for (var i = 0; i < treeData.length; i++) {
|
122
|
|
-
|
123
|
84
|
for (var j = 0; j < treeData[i].children.length; j++) {
|
124
|
85
|
// console.log(Data1[i].children[j].key);
|
125
|
86
|
// console.log("---------")
|
|
@@ -133,8 +94,13 @@ class TreeDemo extends React.Component {
|
133
|
94
|
break
|
134
|
95
|
}
|
135
|
96
|
}
|
136
|
|
-
|
137
|
97
|
}
|
|
98
|
+ this.setState({
|
|
99
|
+ treeData1: Data1
|
|
100
|
+ }, () => {
|
|
101
|
+ message.success('修改成功!')
|
|
102
|
+ })
|
|
103
|
+
|
138
|
104
|
}
|
139
|
105
|
//删除
|
140
|
106
|
onDelect = (value) => {
|
|
@@ -173,8 +139,7 @@ class TreeDemo extends React.Component {
|
173
|
139
|
key: info.node.props.eventKey,//event
|
174
|
140
|
day: moment(info.node.props.day)
|
175
|
141
|
})
|
176
|
|
-
|
177
|
|
- console.log(values, info)
|
|
142
|
+ console.log(this.getTreeData)
|
178
|
143
|
|
179
|
144
|
// moment(info.node.props.day).format('YYYY-MM-DD')
|
180
|
145
|
})
|
|
@@ -182,6 +147,77 @@ class TreeDemo extends React.Component {
|
182
|
147
|
|
183
|
148
|
|
184
|
149
|
|
|
150
|
+ // getTreeData = (e) => {
|
|
151
|
+ // request({
|
|
152
|
+ // url: "http://localhost:8000/api/admin/institution/list",
|
|
153
|
+ // method: 'GET',
|
|
154
|
+
|
|
155
|
+ // // params: {leveltype: 3, cityId},
|
|
156
|
+ // action: "admin.institution.get",
|
|
157
|
+ // }).then((treeData) => {
|
|
158
|
+ // setData(treeData)
|
|
159
|
+ // console.log(this.getTreeData)
|
|
160
|
+ // })
|
|
161
|
+ // }
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+ async institutionTree(params) {
|
|
169
|
+ let arr = []
|
|
170
|
+
|
|
171
|
+ return request('/api/admin/institution/list', {
|
|
172
|
+ method: 'GET',
|
|
173
|
+ data: params,
|
|
174
|
+ }).then((testarr2) => {
|
|
175
|
+ this.setState({ testarr: testarr2 }, () => {
|
|
176
|
+ console.log("testarr2")
|
|
177
|
+ console.log(this.state.testarr)
|
|
178
|
+ // title: 'institutionId',
|
|
179
|
+ // name: 'institutionName',
|
|
180
|
+ // key: '0-0-0',
|
|
181
|
+ const arr2 = this.state.testarr
|
|
182
|
+ for (var i = 0; i < this.state.testarr.length; i++) {
|
|
183
|
+ let list = {
|
|
184
|
+ title: 'institutionId',
|
|
185
|
+ name: 'institutionName',
|
|
186
|
+ key: '0-0-0'
|
|
187
|
+ }
|
|
188
|
+ list.title = arr2[i].institutionName
|
|
189
|
+ list.key = '0' + i.toString
|
|
190
|
+ arr.push(list)
|
|
191
|
+
|
|
192
|
+ }
|
|
193
|
+
|
|
194
|
+ this.setState({
|
|
195
|
+ treeData: arr
|
|
196
|
+ })
|
|
197
|
+
|
|
198
|
+ })
|
|
199
|
+ // console.log(this.getTreeData)
|
|
200
|
+ })
|
|
201
|
+ }
|
|
202
|
+
|
|
203
|
+ componentDidMount() {
|
|
204
|
+ // fetch(`http://localhost:8000/api/admin/institution/list`, {
|
|
205
|
+ // headers: {
|
|
206
|
+ // Authorization: "Bearer eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiIxIiwib3JnSWQiOiIxIiwiZXhwIjoxNjI3MDQ1MjQxfQ.7FhVDoI0dEECZinRUzMzcLl-kcobkamZSqoUzTxBTRo"
|
|
207
|
+ // }
|
|
208
|
+ // }).then((res) => {
|
|
209
|
+ // console.log(res)
|
|
210
|
+ // }),
|
|
211
|
+ // this.institutionTree()
|
|
212
|
+ this.institutionTree([])
|
|
213
|
+
|
|
214
|
+ }
|
|
215
|
+
|
|
216
|
+
|
|
217
|
+
|
|
218
|
+
|
|
219
|
+
|
|
220
|
+
|
185
|
221
|
|
186
|
222
|
renderTreeNodes = data =>
|
187
|
223
|
data.map(item => {
|
|
@@ -194,11 +230,29 @@ class TreeDemo extends React.Component {
|
194
|
230
|
}
|
195
|
231
|
return <TreeNode key={item.key} {...item} />;
|
196
|
232
|
});
|
|
233
|
+ //搜索框
|
|
234
|
+ // onChange = e => {
|
|
235
|
+ // const { value } = e.target;
|
|
236
|
+ // const expandedKeys = treeData
|
|
237
|
+ // .map(item => {
|
|
238
|
+ // if (item.title.indexOf(value) > -1) {
|
|
239
|
+ // return getParentKey(item.key, gData);
|
|
240
|
+ // }
|
|
241
|
+ // return null;
|
|
242
|
+ // })
|
|
243
|
+ // .filter((item, i, self) => item && self.indexOf(item) === i);
|
|
244
|
+ // this.setState({
|
|
245
|
+ // expandedKeys,
|
|
246
|
+ // searchValue: value,
|
|
247
|
+ // autoExpandParent: true,
|
|
248
|
+ // });
|
|
249
|
+ // };
|
197
|
250
|
|
198
|
251
|
|
199
|
252
|
|
200
|
|
- render() {
|
201
|
253
|
|
|
254
|
+ render() {
|
|
255
|
+ const { searchValue } = this.state;
|
202
|
256
|
return (
|
203
|
257
|
<Card>
|
204
|
258
|
<Row >
|
|
@@ -207,22 +261,18 @@ class TreeDemo extends React.Component {
|
207
|
261
|
<FormItem
|
208
|
262
|
label="管辖部门"
|
209
|
263
|
>
|
210
|
|
- <Button type="primary" onClick={onAdd} >
|
211
|
|
- 增加
|
212
|
|
- </Button>
|
213
|
|
-
|
|
264
|
+ {/* <Search style={{ marginBottom: 8 }} placeholder="Search" onChange={this.onChange} /> */}
|
214
|
265
|
<Tree
|
215
|
|
-
|
|
266
|
+ // api={apis.Institution.instIist}
|
216
|
267
|
showLine
|
217
|
|
- // switcherIcon={<DownOutlined />}
|
218
|
|
- defaultExpandedKeys={['0-0-0']}
|
|
268
|
+ defaultExpandedKeys={['0-0']}
|
219
|
269
|
onSelect={this.onSelect}
|
220
|
270
|
treeData={this.state.treeData}
|
|
271
|
+ // api={apis.Institution.instIist}
|
221
|
272
|
>
|
222
|
273
|
{this.renderTreeNodes(this.state.treeData)}
|
223
|
274
|
{/* 动态渲染 */}
|
224
|
275
|
</Tree >
|
225
|
|
- {/* 不加入生命周期不会有更改a */}
|
226
|
276
|
</FormItem>
|
227
|
277
|
</Card>
|
228
|
278
|
</Col>
|
|
@@ -233,6 +283,8 @@ class TreeDemo extends React.Component {
|
233
|
283
|
triggerRef={this.bindRef}
|
234
|
284
|
onChangethis={this.onChangethis}
|
235
|
285
|
onSubmit={this.onChangethis}
|
|
286
|
+
|
|
287
|
+
|
236
|
288
|
/>
|
237
|
289
|
</Card>
|
238
|
290
|
</Col>
|