1 |
|
2 | import React, {Component, PropTypes} from 'react'
|
3 | import {render} from 'react-dom'
|
4 | import debounce from '@beisen/es6-promise-debounce'
|
5 | import ConfigureStore from './app/configureStore';
|
6 | import { Provider, connect } from 'react-redux';
|
7 | import usReducers from './app/modules/BaseTree';
|
8 | import * as usActions from './app/modules/BaseTree';
|
9 | import Immutable from 'immutable';
|
10 | import { toJS } from 'immutable';
|
11 |
|
12 | const store = ConfigureStore(usReducers) ;
|
13 |
|
14 |
|
15 | import AutoTree from './src/index.js';
|
16 | @connect(
|
17 | state => state.toJS(),
|
18 | {...usActions}
|
19 | )
|
20 | class Demo extends Component{
|
21 | constructor(props){
|
22 | super(props);
|
23 | this.state = {
|
24 |
|
25 | popShow:true,
|
26 | target: "",
|
27 | defaultDropValue: '132321321',
|
28 | defaultValue: '1,2,3',
|
29 | treeMaxheight: '',
|
30 | isFetching: true
|
31 | }
|
32 | this.popClose = this.popClose.bind(this);
|
33 | this.removeComponent = this.removeComponent.bind(this);
|
34 | }
|
35 | popClose() {
|
36 | let self = this;
|
37 | this.setState({
|
38 | popShow: !this.state.popShow
|
39 | })
|
40 | }
|
41 | removeComponent() {
|
42 | this.setState({
|
43 | popShow: false
|
44 | })
|
45 | }
|
46 | resizeMaxheight = () => {
|
47 |
|
48 | let treeMaxheight = parseInt(document.documentElement.clientHeight * 0.8 - 150) + 'px';
|
49 | this.setState({treeMaxheight:treeMaxheight});
|
50 | }
|
51 | componentDidMount() {
|
52 | if(this.refs.dirButton!=undefined){
|
53 | let target = this.refs.dirButton.getBoundingClientRect();
|
54 | this.state.target = target;
|
55 | this.setState(this.state);
|
56 | }
|
57 | let self = this;
|
58 | setTimeout(function() {
|
59 |
|
60 | self.setState({isFetching:false})
|
61 | },500)
|
62 |
|
63 | this.resizeMaxheight();
|
64 | window.addEventListener('resize',debounce(function(){
|
65 | self.resizeMaxheight();
|
66 | },200),false)
|
67 |
|
68 | }
|
69 | clearAutoTreeData() {
|
70 | this.props.clearAutoTreeData();
|
71 | }
|
72 |
|
73 |
|
74 |
|
75 |
|
76 |
|
77 | test = () => {
|
78 | this.setState({defaultValue:""})
|
79 | }
|
80 |
|
81 |
|
82 |
|
83 |
|
84 |
|
85 |
|
86 |
|
87 |
|
88 |
|
89 |
|
90 |
|
91 |
|
92 |
|
93 |
|
94 |
|
95 |
|
96 |
|
97 |
|
98 |
|
99 |
|
100 |
|
101 |
|
102 |
|
103 |
|
104 |
|
105 |
|
106 |
|
107 |
|
108 |
|
109 |
|
110 |
|
111 |
|
112 |
|
113 |
|
114 |
|
115 |
|
116 |
|
117 |
|
118 |
|
119 |
|
120 |
|
121 |
|
122 |
|
123 |
|
124 |
|
125 |
|
126 |
|
127 |
|
128 |
|
129 |
|
130 |
|
131 | render () {
|
132 | let self = this;
|
133 | const options = {
|
134 | required: true,
|
135 | disabled: false,
|
136 | sync: false,
|
137 | status: 'edit',
|
138 | single: false,
|
139 | isFetching: this.state.isFetching,
|
140 | isSearchAutoTreeEdit:false,
|
141 | hiddenTip: false,
|
142 | sideTip: false,
|
143 | showDropDown: true,
|
144 | totalCount: 100,
|
145 | helpMsg: 'aaaaaa',
|
146 | autoTreeData: [
|
147 | {
|
148 | id:'0',
|
149 | name:'100990ajksdhfoiqhwieofhsdhfajshdfjahsdjkfhaksdhfajsdhfquwehfkjasdhfkajshdfjasbdvasnbkjsdfbksjhdf',
|
150 | pname:'我是爸爸'
|
151 | },{
|
152 | id:'1',
|
153 | name:'100990',
|
154 | pname:'我是爸爸'
|
155 | },{
|
156 | id:'2',
|
157 | name:'123123123123'
|
158 | },{
|
159 | id:'3',
|
160 | name:'1qweqweqwe'
|
161 | },{
|
162 | id:'4',
|
163 | name:'1asdfasdf'
|
164 | },{
|
165 | id:'5',
|
166 | name:'23123123'
|
167 | },{
|
168 | id:'6',
|
169 | name:'1asdadssdasdasd'
|
170 | },{
|
171 | id:'7',
|
172 | name:'10dsfgergsdfgsdfg0'
|
173 | },{
|
174 | id:'8',
|
175 | name:'1435467867543'
|
176 | },{
|
177 | id:'9',
|
178 | name:'sdfgwer1fasdfasdf'
|
179 | },{
|
180 | id:'10',
|
181 | name:'23434534534511435345'
|
182 | },{
|
183 | id:'11',
|
184 | name:'sdfsdfgsdfgsdfg111'
|
185 | },{
|
186 | id:'12',
|
187 | name:'sdvsdfgsfgweger11222'
|
188 | },{
|
189 | id:'13',
|
190 | name:'dfgrgw2211'
|
191 | }
|
192 | ],
|
193 | defaultValue: '',
|
194 | defaultStatus: false,
|
195 | componentId:"1",
|
196 | errorStatus: false,
|
197 | errorMsg:"出错了~~~!",
|
198 |
|
199 | labelText: '选择部门',
|
200 |
|
201 | lablePos: true,
|
202 | lableTxt: false,
|
203 | autoTreeSearchCallBack: (val,filters) => {this.setState({defaultDropValue:filters})},
|
204 | keyUpCallBack: (event, value) => {},
|
205 | itemCallBack: (data) => {
|
206 |
|
207 | },
|
208 | focusCallBack: (value) => {
|
209 |
|
210 |
|
211 |
|
212 | console.log('点击了')
|
213 | let self = this;
|
214 | setTimeout(function() {
|
215 |
|
216 | },500)
|
217 | },
|
218 | blurCallBack: (event) => {},
|
219 | changeCallBack: (event,value,inputValue) => {},
|
220 | clearCallback: () => {},
|
221 | showPopCallback: () =>{},
|
222 | unmountCallBack: () => {},
|
223 | searchSubmitCallBack: (value) =>{console.log(value)},
|
224 | submitCallBack: (data) =>{console.log(data)},
|
225 | onCloseCallback:(value)=>this.clearAutoTreeData(),
|
226 | setSessionCallBack:() => {},
|
227 | itemCloseCallBack: (data) => {console.log(data)}
|
228 | }
|
229 | const options1 = {
|
230 | required: true,
|
231 | disabled: false,
|
232 | sync: false,
|
233 | status: 'edit',
|
234 | showDropDown: true,
|
235 | hiddenTip: false,
|
236 | sideTip: false,
|
237 | single: false,
|
238 | isSearchAutoTreeEdit:true,
|
239 | autoTreeData: [{
|
240 | id:'0',
|
241 | name:'100990'
|
242 | },
|
243 | {
|
244 | id:'1',
|
245 | name:'asdfasdf'
|
246 | }],
|
247 | componentId:"2",
|
248 | errorStatus: false,
|
249 | errorMsg:"出错了~~~!",
|
250 | labelText: '选择部门1',
|
251 | showText:'请输入正确信息',
|
252 | placeholder: '输入部门名称1',
|
253 | lablePos: false,
|
254 | lableTxt: false,
|
255 | autoTreeSearchCallBack: (val) => console.log(val),
|
256 | findAllSearch: (val) => console.log(val),
|
257 | keyUpCallBack: (event, value) => console.log(event, value),
|
258 | itemCallBack: (data) => {
|
259 |
|
260 | },
|
261 | focusCallBack: (value) => {
|
262 | let self = this;
|
263 | console.log('2focusCallBack')
|
264 |
|
265 |
|
266 |
|
267 | },
|
268 | blurCallBack: (event) => console.log(event),
|
269 | changeCallBack: (event,value,inputValue) => {console.log(event, value,inputValue)},
|
270 | clearCallback: ()=>{console.log('clearCallback')},
|
271 | searchSubmitCallBack: (value) =>{console.log(value)},
|
272 | setSessionCallBack:() => {}
|
273 | }
|
274 | const options2 = {
|
275 | required: true,
|
276 | disabled: false,
|
277 | readOnly: false,
|
278 | sync: false,
|
279 | status: 'edit',
|
280 | defaultValue: "321321,321321,321321",
|
281 | showDropDown: true,
|
282 | hiddenTip: false,
|
283 | sideTip: false,
|
284 | single: true,
|
285 | selectDate: [
|
286 | {
|
287 | name:"12321321"
|
288 | }
|
289 | ],
|
290 | isFetching: false,
|
291 | isSearchAutoTreeEdit:true,
|
292 | defaultValueObj:{
|
293 | id:"0"
|
294 | ,name:"100990"
|
295 | },
|
296 | autoTreeData: [{
|
297 | id:'0',
|
298 | name:'100990'
|
299 | },
|
300 | {
|
301 | id:'1',
|
302 | name:'asdfasdf'
|
303 | }],
|
304 | treeData:[{
|
305 | "id": "32025",
|
306 | "name": "技术体系阿斯顿发送到发送到发送到发送到发送到发送到发送到发送的方式打发当时发生的发生的",
|
307 | "path": "32025.",
|
308 | "pid": "0",
|
309 | "level": "1",
|
310 | "has_child":false,
|
311 | "clickable":false
|
312 | }],
|
313 | componentId:"3",
|
314 | errorStatus: true,
|
315 | errorMsg:"出错了~~~!",
|
316 | helpMsg:"dsadas",
|
317 | labelText: '选择部门11',
|
318 | showText:'请输入正确信1息',
|
319 | placeholder: '输入部门2名称1',
|
320 | lablePos: true,
|
321 | lableTxt: false,
|
322 | autoTreeSearchCallBack: (val) => console.log(val),
|
323 | keyUpCallBack: (event, value) => console.log(event, value),
|
324 | itemCallBack: (data) => {
|
325 | console.log(data)
|
326 |
|
327 | },
|
328 | focusCallBack: (value) => {
|
329 | let self = this;
|
330 | setTimeout(function() {
|
331 | self.setState({isFetching:false})
|
332 | },500)
|
333 |
|
334 |
|
335 |
|
336 |
|
337 | },
|
338 | blurCallBack: (event) => console.log(event),
|
339 | changeCallBack: (event,value,inputValue) => {console.log(event, value,inputValue)},
|
340 | clearCallback: ()=>{console.log('clearCallback')},
|
341 | searchSubmitCallBack: (value) =>{console.log(value)},
|
342 | setSessionCallBack:() => {}
|
343 | }
|
344 |
|
345 | const options3 = {
|
346 | required: true,
|
347 | disabled: false,
|
348 | sync: false,
|
349 | status: 'search',
|
350 | showDropDown: true,
|
351 | hiddenTip: false,
|
352 | sideTip: false,
|
353 | isSearchAutoTreeEdit:true,
|
354 | single: true,
|
355 | autoTreeData: [{
|
356 | id:'0',
|
357 | name:'100990'
|
358 | },
|
359 | {
|
360 | id:'1',
|
361 | name:'asdfasdf'
|
362 | }],
|
363 | componentId:"3",
|
364 | errorStatus: false,
|
365 | errorMsg:"出错3了~~~!",
|
366 | labelText: '选择部22门11',
|
367 | showText:'请输入正2确信1息',
|
368 | placeholder: '2输入部门2名称1',
|
369 | autoTreeSearchCallBack: (val) => console.log(val),
|
370 | keyUpCallBack: (event, value) => console.log(event, value),
|
371 | itemCallBack: (data) => {
|
372 | console.log(data)
|
373 |
|
374 | },
|
375 | focusCallBack: (value) => {
|
376 | let self = this;
|
377 | console.log(value)
|
378 | console.log('3focusCallBack')
|
379 | setTimeout(function() {
|
380 | self.props.getAutoTreeData(self.props.getAutoTreeDataAPI,'','');
|
381 | },500)
|
382 | },
|
383 | blurCallBack: (event) => console.log(event),
|
384 | changeCallBack: (event,value,inputValue) => {console.log(event, value,inputValue)},
|
385 | clearCallback: ()=>{console.log('clearCallback')},
|
386 | searchSubmitCallBack: (value) =>{console.log(value)},
|
387 | setSessionCallBack:() => {}
|
388 | }
|
389 | const treeData = {
|
390 | toggle: true,
|
391 | treeData: this.props.treeData,
|
392 | async: 1,
|
393 | id:1,
|
394 | sidebarScene:false,
|
395 |
|
396 | initGetData:true,
|
397 | postData:[],
|
398 | methodType:'GET',
|
399 | isFetching:this.state.isFetching,
|
400 | getTreeData:function(id,treeAsync,getUrl,postData,methodType) {
|
401 | console.log(id,treeAsync,getUrl,postData,methodType)
|
402 | self.props.getTreeData(getUrl,id);
|
403 | },
|
404 | getTreeDataAPI: '' || 'http://localhost:3001/getTreeData'
|
405 | ,style:{
|
406 | "maxHeight":this.state.treeMaxheight
|
407 | }
|
408 | ,clearTreeData:function() {console.log('clearTreeData')}
|
409 | }
|
410 | const DropDownData = {
|
411 | "title":""
|
412 | ,"placeholder":"搜索"
|
413 | ,"defaultValue": this.state.defaultDropValue
|
414 | ,"openListView":false
|
415 | ,"errorStatus":true
|
416 | ,"errorMsg":"出错了~~~!"
|
417 | ,multiple: false
|
418 | ,"children":[
|
419 | {
|
420 | "value":0
|
421 | ,"text":"本级别及所有下级"
|
422 | ,"isActive":false
|
423 | ,"isChecked":false
|
424 | }
|
425 | ,{
|
426 | "value":1
|
427 | ,"text":"本级别"
|
428 | ,"isActive":false
|
429 | ,"isChecked":false
|
430 | }
|
431 | ,{
|
432 | "value":2
|
433 | ,"text":"本本级别及直接下级"
|
434 | ,"isActive":false
|
435 | ,"isChecked":false
|
436 | }
|
437 | ,{
|
438 | "value":3
|
439 | ,"text":"直接下级"
|
440 | ,"isActive":false
|
441 | ,"isChecked":false
|
442 | }
|
443 | ,{
|
444 | "value":4
|
445 | ,"text":"全部下级"
|
446 | ,"isActive":false
|
447 | ,"isChecked":false
|
448 | }
|
449 | ]
|
450 | ,"hidden":false
|
451 | ,"disabled":false
|
452 | ,"required":false
|
453 | ,"iconName":"pc-sys-arrowdown-nomal-svg"
|
454 | ,"onClick":function(event, target, val){}
|
455 | ,"onBlur":function(event, val){}
|
456 | ,"onFocus":function(event, val){}
|
457 | }
|
458 | let popTree = this.state.popShow?<AutoTree {...options} {...this.props} {...this.state} popClose={this.popClose} DropDownData={DropDownData} treeData={treeData} removeComponent={this.removeComponent} />:"";
|
459 | let popTree1 = this.state.popShow?<AutoTree {...options1} {...this.props} {...this.state} popClose={this.popClose} DropDownData={DropDownData} treeData={treeData} removeComponent={this.removeComponent} />:"";
|
460 | let popTree2 = this.state.popShow?<AutoTree {...options2} {...this.props} {...this.state} popClose={this.popClose} DropDownData={DropDownData} treeData={treeData} removeComponent={this.removeComponent} />:"";
|
461 | let popTree3 = this.state.popShow?<AutoTree {...options3} {...this.props} {...this.state} popClose={this.popClose} DropDownData={DropDownData} treeData={treeData} removeComponent={this.removeComponent} />:"";
|
462 |
|
463 | return (
|
464 | <div style={{marginTop:'50px',height:"700px"}}>
|
465 | <button onClick={this.test}>重置value</button>
|
466 | <div>
|
467 | {popTree2}
|
468 | </div>
|
469 | <div style={{marginLeft: '500px'}}>
|
470 | {popTree1}
|
471 | </div>
|
472 | <div style={{marginTop: '700px'}}>
|
473 | {/*popTree2*/}
|
474 | </div>
|
475 | <div>
|
476 | </div>
|
477 | </div>
|
478 | )
|
479 | }
|
480 | }
|
481 |
|
482 | /*
|
483 |
|
484 |
|
485 |
|
486 | */
|
487 |
|
488 |
|
489 | // {options.status=='search'?<button className="btn" ref="dirButton" style={{'marginTop':'50px','marginLeft':'100px'}} onClick = {this.popClose} >天天向上</button>:''}
|
490 |
|
491 | render(
|
492 | <Provider store={store}>
|
493 | <Demo />
|
494 | </Provider>,
|
495 | document.getElementById('content')
|
496 | );
|