1 | import "core-js/modules/es6.regexp.split";
|
2 | import "core-js/modules/es6.object.assign";
|
3 | import "core-js/modules/es7.array.includes";
|
4 | import "core-js/modules/es6.string.includes";
|
5 | import _extends from "@babel/runtime/helpers/extends";
|
6 | import "core-js/modules/es6.function.name";
|
7 | import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
8 | import _createClass from "@babel/runtime/helpers/createClass";
|
9 | import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
10 | import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
11 | import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
|
12 | import _inherits from "@babel/runtime/helpers/inherits";
|
13 | import React, { Component } from 'react';
|
14 | import ReactDom, { findDOMNode } from 'react-dom';
|
15 | import './index.css';
|
16 | import Tree from '@beisen-platform/tree';
|
17 | import CommonMount from '@beisen-platform/common-mount';
|
18 | import debounce from '@beisen/es6-promise-debounce';
|
19 | import { getSearchData, getCommonInputData, getHightLightData, setRealNode, getSysVersion, setMaskStyle, renderAutoUl, pushLi, getElByClass, renderTree } from './constant';
|
20 | import SearchFilters from './search_Filters.js';
|
21 | import AutoFormInput from './autoForm_Input.js';
|
22 | import FindAllpop from './FindAll_pop.js';
|
23 | import Loading from '@beisen-platform/loading';
|
24 | import Search from '@beisen-platform/search';
|
25 | import Tip from "@beisen-platform/platform-tip";
|
26 | import CommonLabel from '@beisen-platform/common-label';
|
27 | var offset = {};
|
28 | window.autoId;
|
29 |
|
30 | var AutoTree =
|
31 |
|
32 | function (_Component) {
|
33 | _inherits(AutoTree, _Component);
|
34 |
|
35 | function AutoTree(props) {
|
36 | var _this;
|
37 |
|
38 | _classCallCheck(this, AutoTree);
|
39 |
|
40 | _this = _possibleConstructorReturn(this, _getPrototypeOf(AutoTree).call(this, props));
|
41 |
|
42 | _this.returnAutoLi = function (bool) {
|
43 | var _this$state = _this.state,
|
44 | index = _this$state.index,
|
45 | isFocus = _this$state.isFocus,
|
46 | inputValue = _this$state.inputValue,
|
47 | searchValue = _this$state.searchValue,
|
48 | showTree = _this$state.showTree,
|
49 | autoTreeItems = _this$state.autoTreeItems,
|
50 | hasClick = _this$state.hasClick;
|
51 | var _this$props = _this.props,
|
52 | autoTreeData = _this$props.autoTreeData,
|
53 | componentId = _this$props.componentId,
|
54 | sync = _this$props.sync,
|
55 | sideTip = _this$props.sideTip,
|
56 | hiddenTip = _this$props.hiddenTip,
|
57 | single = _this$props.single,
|
58 | status = _this$props.status;
|
59 |
|
60 | var sessionData = _this.getSessionData(componentId);
|
61 |
|
62 | var dataResult = sync ? autoTreeItems : autoTreeData;
|
63 |
|
64 | if (dataResult != undefined && dataResult.length != 0) {
|
65 | _this.renderParents_Node = dataResult[0].pname == undefined ? false : true;
|
66 | }
|
67 |
|
68 | var itemClass = _this.renderParents_Node ? "auto-tree__item " : "auto-tree__item_notShow ";
|
69 | var ifbool = dataResult == undefined || dataResult.length == 0 && isFocus == true && sessionData != null && sessionData.length > 0;
|
70 | var autoLi = [];
|
71 | if (bool) ifbool = (dataResult == undefined || dataResult.length == 0) && !single && isFocus == true && sessionData != null && sessionData.length > 0 && hasClick == true || inputValue == '' && isFocus == true && sessionData != null && !single && sessionData.length > 0 && hasClick == false;
|
72 |
|
73 | if (ifbool) {
|
74 | for (var i = 0; i < sessionData.length; i++) {
|
75 | var holdon_class = i == index ? 'li-hold-on' : '';
|
76 | pushLi(autoLi, itemClass, holdon_class, i, sessionData[i].id, sessionData[i].name, sideTip, hiddenTip, -1, {}, {}, {}, _this.renderParents_Node, sessionData[i].pname, _this.props, sessionData[i].path);
|
77 | }
|
78 | } else if (dataResult != undefined) {
|
79 |
|
80 | var searchInputValue = status == 'search' ? searchValue : single ? inputValue : showTree ? searchValue : inputValue;
|
81 |
|
82 | for (var _i = 0; _i < dataResult.length; _i++) {
|
83 | autoLi = getHightLightData(index, dataResult[_i], searchInputValue, autoLi, _i, _this.renderParents_Node, sideTip, hiddenTip, _this.props);
|
84 | }
|
85 | }
|
86 |
|
87 | _this.autoLi = autoLi;
|
88 | return autoLi;
|
89 | };
|
90 |
|
91 | _this.clearResultsData = function (index) {
|
92 | var _resultsData = _this.state.resultsData;
|
93 | var _hasCount = _this.state.hasCount;
|
94 | if (_hasCount == 0) return;
|
95 |
|
96 | if (index == undefined) {
|
97 | var _tempArr = _this._tempClosed.concat(_resultsData);
|
98 |
|
99 | _this._tempClosed = _tempArr;
|
100 | _resultsData.length = 0;
|
101 | _hasCount = 0;
|
102 | } else {
|
103 | _this._tempClosed.push(_resultsData[index]);
|
104 |
|
105 | _resultsData.splice(index, 1);
|
106 |
|
107 | _hasCount = _hasCount - 1;
|
108 | }
|
109 |
|
110 | _this.setState({
|
111 | resultsData: _resultsData,
|
112 | hasCount: _hasCount
|
113 | });
|
114 | };
|
115 |
|
116 | _this.handlerOver = function (event) {
|
117 | var dom = findDOMNode(_this.refs.autoForm_ref.refs.mouseIconClose);
|
118 |
|
119 | if (dom && dom.style.display == 'block' || _this.state.isFocus || !_this.state.inputValue || _this.props.disabled) {
|
120 | return;
|
121 | } else {
|
122 | _this.setState({
|
123 | isShowMouseOverIcon: true
|
124 | });
|
125 | }
|
126 | };
|
127 |
|
128 | _this.handlerOut = function (event) {
|
129 | var node = event.target;
|
130 |
|
131 | if (node && node.nodeName.toLowerCase() == 'span' || _this.props.disabled) {
|
132 | return;
|
133 | } else {
|
134 | _this.setState({
|
135 | isShowMouseOverIcon: false
|
136 | });
|
137 | }
|
138 | };
|
139 |
|
140 | _this.findAll_submit = function () {
|
141 | var _this$props2 = _this.props,
|
142 | treeData = _this$props2.treeData,
|
143 | submitCallBack = _this$props2.submitCallBack;
|
144 |
|
145 | _this.unmountMask();
|
146 |
|
147 | if (_this.state.resultsData.length === 0) {
|
148 | _this.setState({
|
149 | searchValue: '',
|
150 | defaultPlaceholder: '请选择'
|
151 | });
|
152 |
|
153 | } else {
|
154 | _this.setState({
|
155 | searchValue: '',
|
156 | defaultPlaceholder: ''
|
157 | });
|
158 |
|
159 | }
|
160 |
|
161 |
|
162 | _this._tempSeleted = [];
|
163 | _this._tempClosed = [];
|
164 | treeData.clearTreeData && treeData.clearTreeData();
|
165 | submitCallBack && submitCallBack(_this.state.resultsData);
|
166 | };
|
167 |
|
168 | _this.findAll_cancle = function () {
|
169 | var self = _assertThisInitialized(_this);
|
170 |
|
171 | var _this$props3 = _this.props,
|
172 | treeData = _this$props3.treeData,
|
173 | cancelCallBack = _this$props3.cancelCallBack;
|
174 | var resultsData = _this.state.resultsData;
|
175 | var _resultsData = [];
|
176 | var _temLength = self._tempSeleted.length;
|
177 | var _tempClosed = self._tempClosed;
|
178 |
|
179 | _this.unmountMask();
|
180 |
|
181 | _this.setState({
|
182 | searchValue: ''
|
183 | });
|
184 |
|
185 |
|
186 | var _tempArr = resultsData.concat(_tempClosed);
|
187 |
|
188 | resultsData = _tempArr;
|
189 | var _resLength = resultsData.length;
|
190 |
|
191 | for (var i = 0; i < _resLength; i++) {
|
192 | var flag = false;
|
193 | var it = resultsData[i];
|
194 |
|
195 | for (var j = 0; j < _temLength; j++) {
|
196 | var item = self._tempSeleted[j];
|
197 |
|
198 | if (it.id == item) {
|
199 | flag = true;
|
200 | }
|
201 | }
|
202 |
|
203 | if (!flag) _resultsData.push(it);
|
204 |
|
205 | if (_resultsData.length === 0) {
|
206 | _this.setState({
|
207 | defaultPlaceholder: '请选择'
|
208 | });
|
209 | }
|
210 | }
|
211 |
|
212 |
|
213 | self._tempClosed = [];
|
214 | treeData.clearTreeData && treeData.clearTreeData();
|
215 |
|
216 | _this.setState({
|
217 | resultsData: _resultsData,
|
218 | hasCount: _resultsData.length
|
219 | });
|
220 |
|
221 | cancelCallBack && cancelCallBack(_resultsData);
|
222 | };
|
223 |
|
224 | _this.renderMask = function () {
|
225 | var _this$state2 = _this.state,
|
226 | searchValue = _this$state2.searchValue,
|
227 | autoTreeItems = _this$state2.autoTreeItems,
|
228 | single = _this$state2.single;
|
229 | var _this$props4 = _this.props,
|
230 | treeData = _this$props4.treeData,
|
231 | autoTreeData = _this$props4.autoTreeData,
|
232 | sync = _this$props4.sync;
|
233 | var dataResult = sync ? autoTreeItems : autoTreeData;
|
234 |
|
235 | var autoLi = _this.returnAutoLi();
|
236 |
|
237 | var popResult_style = single ? {
|
238 | 'width': '100%'
|
239 | } : {};
|
240 |
|
241 | var _showTree = searchValue.length != 0 && dataResult != undefined && dataResult.length > 0;
|
242 |
|
243 | var popUl = _showTree ? React.createElement("ul", {
|
244 | className: "pop-auto-result",
|
245 | style: popResult_style,
|
246 | onClick: _this.itemClick
|
247 | }, autoLi) : React.createElement(Tree, _extends({}, treeData, {
|
248 | onClick: _this.treeItemClick
|
249 | }));
|
250 | var findAll_Data = {
|
251 | self: _assertThisInitialized(_this),
|
252 | popUl: popUl,
|
253 | findAll_cancle: _this.findAll_cancle,
|
254 | findAll_submit: _this.findAll_submit,
|
255 | single: single
|
256 | };
|
257 | var autoTreeMask = React.createElement("div", null, React.createElement(FindAllpop, findAll_Data), React.createElement("div", {
|
258 | className: "AutoTree-mask "
|
259 | }));
|
260 | ReactDom.render(React.createElement("div", null, autoTreeMask), document.getElementById('AutoTree_Mask'));
|
261 | };
|
262 |
|
263 | _this.addClass = function (event) {
|
264 |
|
265 | _this.findAll();
|
266 |
|
267 | var isIE11 = /Trident\/7\./.test(navigator.userAgent);
|
268 | var _this$props5 = _this.props,
|
269 | focusCallBack = _this$props5.focusCallBack,
|
270 | componentId = _this$props5.componentId,
|
271 | disabled = _this$props5.disabled;
|
272 | var single = _this.state.single;
|
273 | _this.clickScroll = true;
|
274 | if (disabled || _this.state.isFocus == true) return;
|
275 |
|
276 | var self = _assertThisInitialized(_this);
|
277 |
|
278 | self.tar = single ? self.refs.autoForm_ref.refs.autoTreeInput : self.refs.autoForm_ref.refs.autoTree_commonInput;
|
279 | window.autoId = componentId;
|
280 | if (!single) self.addAndRemoveListen(true, true);
|
281 | document.addEventListener('mousedown', self.handelOnMouseDown);
|
282 | self.setState({
|
283 | isActive: true,
|
284 | isFocus: isIE11 ? false : true,
|
285 | isShow: false,
|
286 | autoTreeItems: [],
|
287 | showPanel: false
|
288 | });
|
289 | self['domState' + componentId] = self.state.isFocus == false ? true : false;
|
290 | focusCallBack && focusCallBack(event);
|
291 | };
|
292 |
|
293 | _this.editInput_focus = function () {
|
294 | var edit_input = _this.props.single ? _this.refs.autoForm_ref.refs.autoTreeInput : _this.refs.autoForm_ref.refs.autoTree_commonInput;
|
295 | var isIE11 = /Trident\/7\./.test(navigator.userAgent);
|
296 |
|
297 | _this.setState({
|
298 | isFocus: isIE11 ? false : true
|
299 | });
|
300 |
|
301 | _this.addClass(edit_input);
|
302 | };
|
303 |
|
304 | _this.handelOnMouseDown = function (event) {
|
305 | var _this$props6 = _this.props,
|
306 | status = _this$props6.status,
|
307 | single = _this$props6.single,
|
308 | componentId = _this$props6.componentId,
|
309 | treeData = _this$props6.treeData,
|
310 | isSearchAutoTreeEdit = _this$props6.isSearchAutoTreeEdit;
|
311 |
|
312 | var self = _assertThisInitialized(_this);
|
313 |
|
314 | var result_ul = status == 'edit' ? single ? getElByClass('autotree__tree-panel') : getElByClass('auto-result-container') : getElByClass('auto-result-container-search');
|
315 | var inputDom = _this.refs.AutoTree;
|
316 | _this.clickScroll = result_ul && result_ul.contains(event.target) || inputDom && inputDom.contains(event.target) && !inputDom.querySelector(".form-item__title").contains(event.target) ? false : true;
|
317 |
|
318 | if (event.target.className.indexOf("icon-foldup") != -1) {
|
319 | setTimeout(function () {
|
320 | self['domState' + componentId] = true;
|
321 | }, 100);
|
322 | }
|
323 |
|
324 | if (status == 'edit' && single) {
|
325 | if (_this.clickScroll) {
|
326 | _this['domState' + componentId] = false;
|
327 |
|
328 | _this.unmountComponent(componentId);
|
329 |
|
330 | if (single && !isSearchAutoTreeEdit) {
|
331 | treeData.clearTreeData && treeData.clearTreeData();
|
332 | }
|
333 |
|
334 | document.removeEventListener('mousedown', _this.handelOnMouseDown);
|
335 | setTimeout(function () {
|
336 | self._tempCleared = false;
|
337 | self.setState({
|
338 | isActive: false,
|
339 | isFocus: false
|
340 | });
|
341 | }, 300);
|
342 | }
|
343 | }
|
344 | };
|
345 |
|
346 | _this.removeClass = function (event) {
|
347 | var self = _assertThisInitialized(_this);
|
348 |
|
349 | var _this$props7 = _this.props,
|
350 | componentId = _this$props7.componentId,
|
351 | blurCallBack = _this$props7.blurCallBack;
|
352 | var _this$state3 = _this.state,
|
353 | status = _this$state3.status,
|
354 | single = _this$state3.single;
|
355 | setTimeout(function () {
|
356 | if (self._tempCleared) return;
|
357 | var isShow_Value = single ? false : true;
|
358 | if (!single) self['domState' + componentId] = false;
|
359 | self.setState({
|
360 | isActive: false,
|
361 | isFocus: false,
|
362 | isShow: isShow_Value
|
363 | });
|
364 |
|
365 | if (single && window.autoId == componentId && self.clickScroll) {
|
366 | self.unmountComponent(componentId);
|
367 | document.removeEventListener('mousedown', self.handelOnMouseDown);
|
368 | }
|
369 |
|
370 | if (single && self.clickScroll) self.addAndRemoveListen(true, false);
|
371 | }, 300);
|
372 | if (status == 'edit' && single) _this['domState' + componentId] = false;
|
373 | blurCallBack && blurCallBack(event);
|
374 | };
|
375 |
|
376 | _this.addAndRemoveListen = function (remove, add) {
|
377 | if (remove) document.removeEventListener('click', _this.onClose);
|
378 | if (add) document.addEventListener('click', _this.onClose);
|
379 | };
|
380 |
|
381 | _this.filterData = function (filterCondition) {
|
382 | var autoTreeItems = _this.props.autoTreeData;
|
383 | var filterData = filterCondition == '' ? [] : autoTreeItems.filter(function (item) {
|
384 | return item.name.includes(filterCondition);
|
385 | });
|
386 | filterData.length > 0 ? _this.setState({
|
387 | autoTreeItems: filterData
|
388 | }) : _this.setState({
|
389 | autoTreeItems: []
|
390 | });
|
391 | };
|
392 |
|
393 | _this.handleChange = function (val) {
|
394 | var _this$props8 = _this.props,
|
395 | getAutoTreeDataAPI = _this$props8.getAutoTreeDataAPI,
|
396 | sync = _this$props8.sync,
|
397 | getAutoTreeData = _this$props8.getAutoTreeData,
|
398 | componentId = _this$props8.componentId,
|
399 | findAllSearch = _this$props8.findAllSearch;
|
400 | var filters = _this.state.filters;
|
401 |
|
402 | _this.setState({
|
403 | index: -1,
|
404 | showTreeResult: true,
|
405 | searchValue: val.value
|
406 | });
|
407 |
|
408 | findAllSearch && findAllSearch(val.value);
|
409 | if (val.value == '') return;
|
410 | _this['domState' + componentId] = true;
|
411 | };
|
412 |
|
413 | _this.changeFilter = function (event, target, val) {
|
414 | var _this$props9 = _this.props,
|
415 | autoTreeSearchCallBack = _this$props9.autoTreeSearchCallBack,
|
416 | componentId = _this$props9.componentId,
|
417 | defaultValueObj = _this$props9.defaultValueObj;
|
418 | var _this$state4 = _this.state,
|
419 | hasClick = _this$state4.hasClick,
|
420 | single = _this$state4.single,
|
421 | resultsData = _this$state4.resultsData;
|
422 | var temp_val = val == '' ? val : val.text;
|
423 |
|
424 | _this.setState({
|
425 | filters: temp_val
|
426 | });
|
427 |
|
428 | if (_this['val' + componentId] == null || hasClick == false) {
|
429 | _this['val' + componentId] = {
|
430 | id: defaultValueObj && defaultValueObj.id || '',
|
431 | name: defaultValueObj && defaultValueObj.name || '',
|
432 | path: defaultValueObj && defaultValueObj.path || '',
|
433 | level: defaultValueObj && defaultValueObj.level || '',
|
434 | filters: temp_val
|
435 | };
|
436 | } else if (hasClick == true) {
|
437 | _this['val' + componentId]['filters'] = temp_val;
|
438 | }
|
439 |
|
440 | if (!single && resultsData.length != 0) {
|
441 | for (var i = 0; i < resultsData.length; i++) {
|
442 | resultsData[i]['filters'] = temp_val;
|
443 | }
|
444 |
|
445 | _this.setState({
|
446 | resultsData: resultsData
|
447 | });
|
448 | }
|
449 |
|
450 | autoTreeSearchCallBack && autoTreeSearchCallBack(single ? _this['val' + componentId] : resultsData, temp_val);
|
451 | };
|
452 |
|
453 | _this.findAll = function () {
|
454 | var _this$props10 = _this.props,
|
455 | clearAutoTreeData = _this$props10.clearAutoTreeData,
|
456 | showPopCallback = _this$props10.showPopCallback,
|
457 | componentId = _this$props10.componentId;
|
458 | clearAutoTreeData();
|
459 | setMaskStyle();
|
460 | _this['domState' + componentId] = true;
|
461 |
|
462 | _this.setState({
|
463 | isShow: false,
|
464 | showTree: true
|
465 | });
|
466 |
|
467 | _this.renderMask();
|
468 |
|
469 | _this.unmountComponent(componentId);
|
470 |
|
471 | _this.addAndRemoveListen(true, false);
|
472 |
|
473 | showPopCallback && showPopCallback();
|
474 | };
|
475 |
|
476 | _this.setSessionData = function (self, componentId) {
|
477 | sessionStorage.setItem('search' + componentId, JSON.stringify(self['temp' + componentId]));
|
478 | _this.props.setSessionCallBack && _this.props.setSessionCallBack();
|
479 | };
|
480 |
|
481 | _this.getSessionData = function (componentId) {
|
482 | return JSON.parse(sessionStorage.getItem('search' + componentId));
|
483 | };
|
484 |
|
485 | _this.itemClick = function (event) {
|
486 | var _this$props11 = _this.props,
|
487 | componentId = _this$props11.componentId,
|
488 | autoTreeData = _this$props11.autoTreeData,
|
489 | itemCallBack = _this$props11.itemCallBack;
|
490 | var single = _this.state.single;
|
491 | var node = setRealNode(event);
|
492 |
|
493 | if (node) {
|
494 | var nodeId = node.getAttribute('data-index');
|
495 | var nodePath = node.getAttribute('data-path');
|
496 | if (!single) _this.renderDom();
|
497 |
|
498 | _this.commonClick_Callback(false, nodeId, componentId, autoTreeData, itemCallBack, nodePath);
|
499 | }
|
500 | };
|
501 |
|
502 | _this.handleKeyDown = function (e) {
|
503 | var _this$props12 = _this.props,
|
504 | componentId = _this$props12.componentId,
|
505 | autoTreeData = _this$props12.autoTreeData,
|
506 | itemCallBack = _this$props12.itemCallBack,
|
507 | sync = _this$props12.sync;
|
508 | var _this$state5 = _this.state,
|
509 | index = _this$state5.index,
|
510 | showTree = _this$state5.showTree,
|
511 | autoTreeItems = _this$state5.autoTreeItems,
|
512 | isFocus = _this$state5.isFocus,
|
513 | hasClick = _this$state5.hasClick,
|
514 | inputValue = _this$state5.inputValue;
|
515 | var trueIndex = index;
|
516 | var popAutoResult = getElByClass('pop-auto-result');
|
517 | var popAutoResult_ClientHeight, maxLength, tempLength, autoResult;
|
518 | var ItemHeight = _this.renderParents_Node ? 54 : 30;
|
519 |
|
520 | if (popAutoResult != undefined) {
|
521 | popAutoResult_ClientHeight = popAutoResult.offsetHeight - 10;
|
522 | maxLength = parseInt(popAutoResult_ClientHeight / ItemHeight);
|
523 | }
|
524 |
|
525 | tempLength = showTree ? maxLength : _this.renderParents_Node ? 5 : 8;
|
526 |
|
527 | var sessionData = _this.getSessionData(componentId);
|
528 |
|
529 | var dataResult = sync ? autoTreeItems : autoTreeData;
|
530 | var ifBool = (dataResult == undefined || dataResult.length == 0) && isFocus == true && sessionData != null && sessionData.length > 0 && hasClick == true || inputValue == '' && isFocus == true && sessionData != null && sessionData.length > 0 && hasClick == false;
|
531 | dataResult = ifBool ? sessionData : dataResult;
|
532 | autoResult = getElByClass('auto-result');
|
533 | autoResult = showTree == true && popAutoResult != undefined ? popAutoResult : autoResult;
|
534 |
|
535 | switch (e.keyCode) {
|
536 | case 38:
|
537 |
|
538 | if (_this.state.index <= 0) {
|
539 | return;
|
540 | } else {
|
541 | trueIndex = --_this.state.index % _this.autoLi.length;
|
542 | }
|
543 |
|
544 | if (trueIndex >= tempLength - 1) {
|
545 | autoResult.scrollTop = trueIndex == tempLength - 1 ? autoResult.scrollTop - ItemHeight : (trueIndex - (tempLength - 1)) * ItemHeight;
|
546 | }
|
547 |
|
548 | _this.setState({
|
549 | index: trueIndex
|
550 | });
|
551 |
|
552 | break;
|
553 |
|
554 | case 40:
|
555 |
|
556 | if (_this.state.index == dataResult.length - 1) return;
|
557 | trueIndex = index < 0 ? 0 : ++index % _this.autoLi.length;
|
558 |
|
559 | if (trueIndex >= tempLength) {
|
560 | autoResult.scrollTop = dataResult.length - 1 == trueIndex ? (trueIndex - (tempLength - 1)) * ItemHeight + 44 : (trueIndex - (tempLength - 1)) * ItemHeight;
|
561 | }
|
562 |
|
563 | _this.setState({
|
564 | index: trueIndex
|
565 | });
|
566 |
|
567 | break;
|
568 |
|
569 | case 13:
|
570 |
|
571 | if (index == -1) return;
|
572 | var nodeId = index;
|
573 |
|
574 | _this.commonClick_Callback(true, nodeId, componentId, dataResult, itemCallBack);
|
575 |
|
576 | if (_this.refs.autoForm_ref.refs.autoTreeInput) _this.refs.autoForm_ref.refs.autoTreeInput.blur();
|
577 | break;
|
578 |
|
579 | default:
|
580 | break;
|
581 | }
|
582 | };
|
583 |
|
584 | _this.clearDom = function () {
|
585 | var dom_1 = getElByClass('');
|
586 | var dom_2 = getElByClass('-arrow');
|
587 |
|
588 | if (dom_1 && dom_2) {
|
589 | var parNode = dom_1.parentNode;
|
590 | parNode.removeChild(dom_1);
|
591 | parNode.removeChild(dom_2);
|
592 | }
|
593 | };
|
594 |
|
595 | _this.commonClick_Callback = function (type, nodeId, componentId, dataResult, func, nodePath) {
|
596 |
|
597 | var self = _assertThisInitialized(_this);
|
598 |
|
599 | var _this$props13 = _this.props,
|
600 | isSearchAutoTreeEdit = _this$props13.isSearchAutoTreeEdit,
|
601 | single = _this$props13.single,
|
602 | status = _this$props13.status,
|
603 | showDropDown = _this$props13.showDropDown,
|
604 | removeComponent = _this$props13.removeComponent,
|
605 | totalCount = _this$props13.totalCount;
|
606 | _this['domState' + componentId] = true;
|
607 | var _resultsData = _this.state.resultsData;
|
608 | var currentDataLength = _resultsData.length;
|
609 |
|
610 | var sessionData = _this.getSessionData(componentId);
|
611 |
|
612 | var autoTreeList = dataResult != undefined && dataResult.length > 0 ? dataResult : sessionData;
|
613 |
|
614 | _this.clearDom();
|
615 |
|
616 | for (var i = 0; i < autoTreeList.length; i++) {
|
617 | var real_Id = type == true ? i : autoTreeList[i].id;
|
618 | if (real_Id == nodeId) _this['val' + componentId] = autoTreeList[i];
|
619 | }
|
620 |
|
621 | if ((!isSearchAutoTreeEdit || status == 'edit' && single) && !showDropDown) _this.unmountMask();
|
622 |
|
623 | _this.setClickData(_this['val' + componentId].name, Object.assign({}, _this['val' + componentId]), sessionData);
|
624 |
|
625 | _this['val' + componentId]['filters'] = _this.state.filters;
|
626 |
|
627 | var temp_resultsData = _resultsData.filter(function (child) {
|
628 | return _this['val' + componentId].id == child.id;
|
629 | });
|
630 |
|
631 | var real_resultsData = [];
|
632 | var deleteData = [];
|
633 |
|
634 | if (typeof nodePath === 'undefined') {
|
635 | if (temp_resultsData.length == 0 && _resultsData.length < totalCount) _resultsData.push(_this['val' + componentId]);
|
636 | real_resultsData = _resultsData;
|
637 | } else {
|
638 |
|
639 | if (currentDataLength === totalCount) {
|
640 | _this.setState({
|
641 | isShowSaveTips: true,
|
642 | tipsTitle: '最多只能选择' + totalCount + '项'
|
643 | });
|
644 | }
|
645 |
|
646 |
|
647 | var temp_falg = true;
|
648 |
|
649 | if (temp_resultsData.length == 0 && _resultsData.length < totalCount) {
|
650 | _resultsData.map(function (child) {
|
651 | var allChild = nodePath.split("/");
|
652 |
|
653 | var judge = allChild.every(function (i) {
|
654 | return !(i == child.id);
|
655 | });
|
656 |
|
657 | if (!judge) {
|
658 | temp_falg = false;
|
659 | }
|
660 |
|
661 |
|
662 |
|
663 | });
|
664 |
|
665 | if (temp_falg) {
|
666 | _resultsData.push(_this['val' + componentId]);
|
667 | } else {
|
668 | _this.setState({
|
669 | isShowSaveTips: true,
|
670 | tipsTitle: '需删除父级后,才可选择子级'
|
671 | });
|
672 | }
|
673 | }
|
674 |
|
675 |
|
676 | if (currentDataLength < totalCount) {
|
677 | real_resultsData = _resultsData.filter(function (child) {
|
678 |
|
679 | var allParent = child.path.split("/");
|
680 |
|
681 | if (allParent.length > 1) {
|
682 | allParent.pop();
|
683 | }
|
684 |
|
685 | return allParent.every(function (i) {
|
686 | return !(nodeId == i);
|
687 | });
|
688 |
|
689 | });
|
690 |
|
691 | deleteData = _resultsData.filter(function (child) {
|
692 |
|
693 | var parentpath = child.path.split("/");
|
694 |
|
695 | if (parentpath.length > 1) {
|
696 | parentpath.pop();
|
697 | }
|
698 |
|
699 | return parentpath.some(function (i) {
|
700 | return nodeId == i;
|
701 | });
|
702 | });
|
703 |
|
704 | if (deleteData.length > 0) {
|
705 | deleteData.map(function (child) {
|
706 | self._tempClosed.push(child);
|
707 | });
|
708 | }
|
709 | } else {
|
710 | real_resultsData = _resultsData;
|
711 | }
|
712 | }
|
713 |
|
714 | var _inputValue = _this.props.status == 'search' || _this.state.single ? _this['val' + componentId].name : '';
|
715 |
|
716 | _this.setState({
|
717 | inputValue: _inputValue,
|
718 |
|
719 | isFocus: false,
|
720 | itemId: nodeId,
|
721 | hasClick: true,
|
722 | resultsData: real_resultsData,
|
723 | hasCount: real_resultsData.length,
|
724 | showPanel: false,
|
725 | searchChange: false
|
726 | });
|
727 |
|
728 | if (!showDropDown) removeComponent && removeComponent();
|
729 | if (single) _this.setState({
|
730 | searchValue: _inputValue
|
731 | });
|
732 | if (_this.state.showTree) _this._tempSeleted.push(_this['val' + componentId].id);
|
733 | if (!_this.state.showTree && !_this.state.single || _this.state.single) func && func(_this.state.single ? _this['val' + componentId] : _resultsData);
|
734 | };
|
735 |
|
736 | _this.setClickData = function (name, value, sessionData) {
|
737 | var componentId = _this.props.componentId;
|
738 | var jsonFlag = false;
|
739 |
|
740 | if (sessionData != null) {
|
741 | for (var j = 0; j < sessionData.length; j++) {
|
742 | if (sessionData[j].name == name) jsonFlag = true;
|
743 | }
|
744 | }
|
745 |
|
746 | var tempSessionLength = sessionData == null ? 0 : sessionData.length;
|
747 | _this['temp' + componentId] = _this['temp' + componentId] == undefined ? [] : _this['temp' + componentId];
|
748 |
|
749 | if (tempSessionLength < 10 && jsonFlag == false) {
|
750 | _this['temp' + componentId].length == 0 ? _this['temp' + componentId].push(value) : _this['temp' + componentId].unshift(value);
|
751 |
|
752 | _this.setSessionData(_assertThisInitialized(_this), componentId);
|
753 | } else if (tempSessionLength >= 10 && jsonFlag == false) {
|
754 | _this['temp' + componentId].pop();
|
755 |
|
756 | var s = value;
|
757 |
|
758 | _this['temp' + componentId].unshift(s);
|
759 |
|
760 | _this.setSessionData(_assertThisInitialized(_this), componentId);
|
761 | } else {
|
762 | _this.setSessionData(_assertThisInitialized(_this), componentId);
|
763 | }
|
764 | };
|
765 |
|
766 | _this.clearData = function (event) {
|
767 | var clearCallback = _this.props.clearCallback;
|
768 |
|
769 | if (_this.state.isFocus) {
|
770 | _this.setState({
|
771 | isFocus: true,
|
772 | isShow: true,
|
773 | inputValue: "",
|
774 | hasClick: false
|
775 | });
|
776 | } else {
|
777 | _this.setState({
|
778 | inputValue: "",
|
779 | isShow: false,
|
780 | hasClick: false,
|
781 | isFocus: false
|
782 | });
|
783 | }
|
784 |
|
785 | _this._tempCleared = true;
|
786 | clearCallback && clearCallback();
|
787 | };
|
788 |
|
789 | _this.unmountComponent = function (componentId) {
|
790 |
|
791 | _this.setState({
|
792 | index: -1
|
793 | });
|
794 |
|
795 |
|
796 | _this.addAndRemoveListen(true, false);
|
797 |
|
798 | _this['domState' + componentId] = false;
|
799 | _this.props.unmountCallBack && _this.props.unmountCallBack();
|
800 | };
|
801 |
|
802 | _this.unmountMask = function () {
|
803 | _this.setState({
|
804 | showTree: false
|
805 | });
|
806 |
|
807 | _this.unmountComponent(_this.props.componentId);
|
808 |
|
809 | if (document.getElementById('AutoTree_Mask')) {
|
810 | ReactDom.unmountComponentAtNode(document.getElementById('AutoTree_Mask'));
|
811 | }
|
812 | };
|
813 |
|
814 | _this.onClose = function (event) {
|
815 | var self = _assertThisInitialized(_this);
|
816 |
|
817 | setTimeout(function () {
|
818 | self._tempCleared = false;
|
819 | }, 400);
|
820 | var _this$props14 = _this.props,
|
821 | status = _this$props14.status,
|
822 | onCloseCallback = _this$props14.onCloseCallback,
|
823 | componentId = _this$props14.componentId;
|
824 |
|
825 | if (window.autoId == componentId) {
|
826 | if (event && event.target.innerHTML == '全部查找' || event.target.innerHTML == "“查找全部”" || event.target.className.includes('icon-close')) return;
|
827 | var area = _this.tar;
|
828 | var result_ul = status == 'edit' ? getElByClass('auto-result-container') : getElByClass('auto-result-container-search');
|
829 |
|
830 | if (area == undefined && _this.state.showTree == false) {
|
831 | _this.setState({
|
832 | isShow: false
|
833 | });
|
834 |
|
835 | _this.unmountComponent(componentId);
|
836 |
|
837 | onCloseCallback && onCloseCallback(event);
|
838 | return;
|
839 | }
|
840 |
|
841 | if (area != undefined && result_ul != undefined && !area.contains(event.target) && !result_ul.contains(event.target)) {
|
842 | _this.setState({
|
843 | isFocus: false,
|
844 | isShow: false
|
845 | });
|
846 |
|
847 | _this.unmountComponent(componentId);
|
848 |
|
849 | onCloseCallback && onCloseCallback(event);
|
850 | if (_this.state.hasClick == false) _this.setState({
|
851 | inputValue: ''
|
852 | });
|
853 | }
|
854 | }
|
855 | };
|
856 |
|
857 | _this.itemClose = function (event, item, index) {
|
858 | var itemCloseCallBack = _this.props.itemCloseCallBack;
|
859 | var _resultsData = _this.state.resultsData;
|
860 | var _hasCount = _this.state.hasCount;
|
861 | _resultsData = _resultsData.filter(function (child) {
|
862 | return item.id != child.id;
|
863 | });
|
864 |
|
865 | _this.setState({
|
866 | resultsData: _resultsData,
|
867 | hasCount: _hasCount - 1
|
868 | });
|
869 |
|
870 | if (_resultsData.length === 0) {
|
871 | _this.setState({
|
872 | defaultPlaceholder: '请选择'
|
873 | });
|
874 | }
|
875 |
|
876 | itemCloseCallBack && itemCloseCallBack(_resultsData);
|
877 | };
|
878 |
|
879 | _this.treeItemClick = function (e, valObj) {
|
880 |
|
881 | var _this$props15 = _this.props,
|
882 | componentId = _this$props15.componentId,
|
883 | itemCallBack = _this$props15.itemCallBack,
|
884 | status = _this$props15.status,
|
885 | treeData = _this$props15.treeData,
|
886 | showDropDown = _this$props15.showDropDown,
|
887 | isSearchAutoTreeEdit = _this$props15.isSearchAutoTreeEdit,
|
888 | removeComponent = _this$props15.removeComponent,
|
889 | totalCount = _this$props15.totalCount;
|
890 | _this['domState' + componentId] = true;
|
891 | var single = _this.state.single;
|
892 |
|
893 | if (single && !isSearchAutoTreeEdit) {
|
894 | treeData.clearTreeData && treeData.clearTreeData();
|
895 | }
|
896 |
|
897 | var self = _assertThisInitialized(_this);
|
898 |
|
899 | var _resultsData = _this.state.resultsData;
|
900 | var currentDataLength = _resultsData.length;
|
901 |
|
902 | var sessionData = _this.getSessionData(componentId);
|
903 |
|
904 | _this.setClickData(valObj.name, Object.assign({}, valObj), sessionData);
|
905 |
|
906 | if (_this['val' + componentId] != null) {
|
907 | valObj.filters = _this['val' + componentId].filters;
|
908 | }
|
909 |
|
910 | _this['val' + componentId] = valObj;
|
911 |
|
912 | if ((!isSearchAutoTreeEdit && single || status == 'edit' && single) && !showDropDown) {
|
913 | _this.unmountMask();
|
914 | }
|
915 |
|
916 | var temp_resultsData = _resultsData.filter(function (child) {
|
917 | return _this['val' + componentId].id == child.id;
|
918 | });
|
919 |
|
920 |
|
921 | if (currentDataLength === totalCount) {
|
922 | _this.setState({
|
923 | isShowSaveTips: true,
|
924 | tipsTitle: '最多只能选择' + totalCount + '项'
|
925 | });
|
926 | }
|
927 |
|
928 |
|
929 | var temp_falg = true;
|
930 |
|
931 | if (temp_resultsData.length == 0 && _resultsData.length < totalCount) {
|
932 | _resultsData.map(function (child) {
|
933 | var allChild = valObj.path.split("/");
|
934 |
|
935 | var judge = allChild.every(function (i) {
|
936 | return !(i == child.id);
|
937 | });
|
938 |
|
939 | if (!judge) {
|
940 | temp_falg = false;
|
941 | }
|
942 |
|
943 |
|
944 |
|
945 | });
|
946 |
|
947 | if (temp_falg) {
|
948 | _resultsData.push(_this['val' + componentId]);
|
949 | } else {
|
950 | _this.setState({
|
951 | isShowSaveTips: true,
|
952 | tipsTitle: '需删除父级后,才可选择子级'
|
953 | });
|
954 | }
|
955 | }
|
956 |
|
957 |
|
958 | var real_resultsData = [];
|
959 | var deleteData = [];
|
960 |
|
961 | if (currentDataLength < totalCount) {
|
962 | real_resultsData = _resultsData.filter(function (child) {
|
963 |
|
964 | var allParent = child.path.split("/");
|
965 |
|
966 | if (allParent.length > 1) {
|
967 | allParent.pop();
|
968 | }
|
969 |
|
970 | return allParent.every(function (i) {
|
971 | return !(valObj.id == i);
|
972 | });
|
973 | });
|
974 |
|
975 | deleteData = _resultsData.filter(function (child) {
|
976 |
|
977 | var parentpath = child.path.split("/");
|
978 |
|
979 | if (parentpath.length > 1) {
|
980 | parentpath.pop();
|
981 | }
|
982 |
|
983 | return parentpath.some(function (i) {
|
984 | return valObj.id == i;
|
985 | });
|
986 | });
|
987 |
|
988 | if (deleteData.length > 0) {
|
989 | deleteData.map(function (child) {
|
990 | self._tempClosed.push(child);
|
991 | });
|
992 | }
|
993 | } else {
|
994 | real_resultsData = _resultsData;
|
995 | }
|
996 |
|
997 | var _inputValue = status == 'search' || single ? valObj.name : '';
|
998 |
|
999 | if (status == 'search') {
|
1000 | _this.setState({
|
1001 | nodeValue: valObj.name,
|
1002 | searchValue: _inputValue,
|
1003 | hasClick: true,
|
1004 | resultsData: real_resultsData,
|
1005 | hasCount: real_resultsData.length,
|
1006 | showPanel: false
|
1007 | }, _this.forceUpdate());
|
1008 | } else {
|
1009 | _this.setState({
|
1010 | nodeValue: valObj.name,
|
1011 | inputValue: _inputValue,
|
1012 | searchValue: _inputValue,
|
1013 | hasClick: true,
|
1014 | resultsData: real_resultsData,
|
1015 | hasCount: real_resultsData.length,
|
1016 | showPanel: false,
|
1017 | isFocus: false
|
1018 | }, _this.forceUpdate());
|
1019 | }
|
1020 |
|
1021 | if (_this.state.showTree) _this._tempSeleted.push(_this['val' + componentId].id);
|
1022 |
|
1023 | if (!showDropDown) {
|
1024 | removeComponent && removeComponent();
|
1025 | }
|
1026 |
|
1027 | if (single && !isSearchAutoTreeEdit || status == 'search' || isSearchAutoTreeEdit) {
|
1028 | itemCallBack && itemCallBack(_this['val' + componentId]);
|
1029 | }
|
1030 |
|
1031 | setTimeout(function () {
|
1032 | self['domState' + self.props.componentId] = false;
|
1033 | }, 500);
|
1034 | };
|
1035 |
|
1036 | _this.handelSubmit = function () {
|
1037 | var searchValue = _this.state.searchValue;
|
1038 | var _this$props16 = _this.props,
|
1039 | isSearchAutoTreeEdit = _this$props16.isSearchAutoTreeEdit,
|
1040 | treeData = _this$props16.treeData;
|
1041 |
|
1042 | if (isSearchAutoTreeEdit) {
|
1043 | _this.unmountMask();
|
1044 |
|
1045 | treeData.clearTreeData && treeData.clearTreeData();
|
1046 | }
|
1047 |
|
1048 | var val;
|
1049 |
|
1050 | if (_this['val' + _this.props.componentId] && searchValue == _this['val' + _this.props.componentId].name) {
|
1051 | val = _this['val' + _this.props.componentId];
|
1052 | } else {
|
1053 | val = null;
|
1054 | }
|
1055 |
|
1056 | _this.props.searchSubmitCallBack && _this.props.searchSubmitCallBack(val);
|
1057 | };
|
1058 |
|
1059 | _this.state = {
|
1060 | isFocus: props && props.defaultStatus || false,
|
1061 |
|
1062 | isShowMouseOverIcon: false,
|
1063 | inputValue: props && props.defaultValue || '',
|
1064 |
|
1065 | itemId: '',
|
1066 | isShow: true,
|
1067 | showTree: false,
|
1068 |
|
1069 | status: props && props.status || 'edit',
|
1070 | showTreeResult: false,
|
1071 |
|
1072 | searchValue: "",
|
1073 | autoTreeItems: [],
|
1074 | filters: '',
|
1075 |
|
1076 | hidden: props && props.hidden || false,
|
1077 | hasClick: props.defaultValue == '' || props.defaultValue == undefined ? false : true,
|
1078 | index: -1,
|
1079 |
|
1080 | hasCount: props && props.resultsData.length || 0,
|
1081 | resultsData: props && props.resultsData || [],
|
1082 |
|
1083 | isActive: false,
|
1084 | single: props && props.single || props.single == undefined ? true : false,
|
1085 | defaultPlaceholder: props && (props.resultsData.length > 0 ? '' : props.placeholder) || '',
|
1086 | showPanel: props.status == 'search' ? true : false,
|
1087 | searchChange: false,
|
1088 | isShowSaveTips: false,
|
1089 | tipsTitle: ''
|
1090 | };
|
1091 | _this._tempClosed = [];
|
1092 | _this._tempSeleted = [];
|
1093 | _this._tempCleared = false;
|
1094 | _this.autoLi = [];
|
1095 | _this.clickScroll = true;
|
1096 | _this.chrome_tag = true;
|
1097 | _this.renderParents_Node = false;
|
1098 | _this['temp' + props.componentId] = [];
|
1099 | sessionStorage.setItem('search' + props.componentId, JSON.stringify(_this['temp' + props.componentId]));
|
1100 | _this['val' + props.componentId] = props && props.defaultValueObj || null;
|
1101 | _this.tar = null;
|
1102 |
|
1103 | _this.createDom();
|
1104 |
|
1105 | _this['domState' + props.componentId] = false;
|
1106 |
|
1107 |
|
1108 |
|
1109 |
|
1110 |
|
1111 |
|
1112 |
|
1113 |
|
1114 | _this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
|
1115 | _this.searchClick = _this.searchClick.bind(_assertThisInitialized(_this));
|
1116 | _this.onChange = debounce(_this.onChange, 200);
|
1117 | return _this;
|
1118 | }
|
1119 |
|
1120 | _createClass(AutoTree, [{
|
1121 | key: "createDom",
|
1122 | value: function createDom() {
|
1123 | if (document.getElementById('AutoTree_Mask')) return;
|
1124 | var mDiv = document.createElement('div');
|
1125 | mDiv.id = 'AutoTree_Mask';
|
1126 | document.body.appendChild(mDiv);
|
1127 | }
|
1128 |
|
1129 | }, {
|
1130 | key: "onChange",
|
1131 |
|
1132 | value: function onChange(event) {
|
1133 | var self = this;
|
1134 | var _this$props17 = this.props,
|
1135 | getAutoTreeDataAPI = _this$props17.getAutoTreeDataAPI,
|
1136 | sync = _this$props17.sync,
|
1137 | componentId = _this$props17.componentId,
|
1138 | getAutoTreeData = _this$props17.getAutoTreeData,
|
1139 | changeCallBack = _this$props17.changeCallBack,
|
1140 | clearCallback = _this$props17.clearCallback,
|
1141 | single = _this$props17.single,
|
1142 | status = _this$props17.status;
|
1143 | var inputValue = status == 'search' ? event.value : event.target.value;
|
1144 | var filters = this.state.filters;
|
1145 | var formRef = this.refs.autoForm_ref;
|
1146 | this._tempCleared = false;
|
1147 |
|
1148 | if (status == 'search' || single) {
|
1149 | this.setState({
|
1150 | index: -1,
|
1151 | isShow: true,
|
1152 | showPanel: true,
|
1153 | searchChange: true,
|
1154 | hasClick: false,
|
1155 | searchValue: inputValue
|
1156 | });
|
1157 | } else {
|
1158 | this.setState({
|
1159 | index: -1,
|
1160 | isShow: true,
|
1161 | hasClick: false,
|
1162 | inputValue: inputValue
|
1163 | });
|
1164 | }
|
1165 |
|
1166 | this['domState' + componentId] = true;
|
1167 | if (formRef) this.tar = this.props.single ? formRef.refs.autoTreeInput : formRef.refs.autoTree_commonInput;
|
1168 | offset = {
|
1169 | zIndex: '99999',
|
1170 | position: 'fixed'
|
1171 | };
|
1172 | if (inputValue == '') clearCallback && clearCallback();
|
1173 |
|
1174 | sync == false ? getAutoTreeData && getAutoTreeData(getAutoTreeDataAPI, inputValue, filters) : this.filterData(inputValue);
|
1175 | setTimeout(function () {
|
1176 | self.renderDom(false, offset);
|
1177 | }, 200);
|
1178 | changeCallBack && changeCallBack(event, this.state, inputValue);
|
1179 | }
|
1180 | }, {
|
1181 | key: "onRealChange",
|
1182 | value: function onRealChange(event) {
|
1183 | event.persist();
|
1184 | this.onChange(event);
|
1185 | }
|
1186 |
|
1187 | }, {
|
1188 | key: "componentDidUpdate",
|
1189 | value: function componentDidUpdate() {
|
1190 | var _this$state6 = this.state,
|
1191 | status = _this$state6.status,
|
1192 | showTree = _this$state6.showTree,
|
1193 | inputValue = _this$state6.inputValue,
|
1194 | isFocus = _this$state6.isFocus,
|
1195 | autoTreeItems = _this$state6.autoTreeItems;
|
1196 | var _this$props18 = this.props,
|
1197 | componentId = _this$props18.componentId,
|
1198 | autoTreeData = _this$props18.autoTreeData,
|
1199 | sync = _this$props18.sync,
|
1200 | single = _this$props18.single;
|
1201 | var popAutoResult = getElByClass('pop-auto-result');
|
1202 |
|
1203 | var searchContainer = getElByClass('searchContainer');
|
1204 | var autoResultContainer = getElByClass('auto-result-container');
|
1205 | var windowH = window.innerHeight;
|
1206 | var windowW = window.innerWidth;
|
1207 | var ItemHeight = this.renderParents_Node ? 54 : 30;
|
1208 | var selected_Component = getElByClass('selected_Component');
|
1209 |
|
1210 | if (selected_Component) {
|
1211 | selected_Component.style.width = windowW * 0.65 - 301 + 'px';
|
1212 | selected_Component.style.marginLeft = '15px';
|
1213 | selected_Component.style.marginTop = '15px';
|
1214 | }
|
1215 |
|
1216 | if (popAutoResult != undefined) {
|
1217 | var popAutoResult_ClientHeight = searchContainer.offsetHeight * 0.85 - 10;
|
1218 | var maxLength = parseInt(popAutoResult_ClientHeight / ItemHeight);
|
1219 | var finalHeight = maxLength * ItemHeight;
|
1220 | popAutoResult.style.maxHeight = finalHeight + 'px';
|
1221 | }
|
1222 |
|
1223 | if (status == 'search') {
|
1224 | var reConNode = getElByClass('autoTree_Search');
|
1225 | var resultNode = getElByClass('auto-result-container-search');
|
1226 | var searchInput = getElByClass('autoTree-search-input');
|
1227 | if (searchInput && !this.chrome_tag) searchInput.style.lineHeight = 23 + 'px';
|
1228 |
|
1229 | if (reConNode != undefined && resultNode != undefined && !showTree) {
|
1230 | reConNode.style.boxShadow = '0px 3px 10px rgba(0, 0, 0, 0.15)';
|
1231 | }
|
1232 | }
|
1233 |
|
1234 | var dataResult = sync ? autoTreeItems : autoTreeData;
|
1235 |
|
1236 | if (status == 'status' && inputValue.length > 0 && dataResult.length == 0 && isFocus == true) {
|
1237 | autoResultContainer.style.height = '360px';
|
1238 | }
|
1239 |
|
1240 |
|
1241 | if (showTree && searchContainer != undefined) {
|
1242 | var temp_Height = status == 'edit' ? 50 : 0;
|
1243 | searchContainer.style.left = (windowW - searchContainer.offsetWidth) * 0.5 + 'px';
|
1244 | searchContainer.style.top = '30px';
|
1245 | }
|
1246 |
|
1247 | if (status == 'edit' && !single) {
|
1248 | if (inputValue.length == 0 && isFocus == true) this['domState' + componentId] = true;
|
1249 | if (showTree == true) this['domState' + componentId] = true;
|
1250 | }
|
1251 |
|
1252 | var self = this;
|
1253 |
|
1254 | if (this['domState' + componentId]) {
|
1255 | self.renderDom(false, offset);
|
1256 | }
|
1257 |
|
1258 | if (showTree) {
|
1259 | this.renderMask();
|
1260 | }
|
1261 | }
|
1262 | }, {
|
1263 | key: "componentDidMount",
|
1264 | value: function componentDidMount() {
|
1265 | var status = this.state.status;
|
1266 |
|
1267 | if (status == 'search') {
|
1268 | var reConNode = this.refs.AutoTree;
|
1269 |
|
1270 | if (reConNode != undefined) {
|
1271 | reConNode.style.boxShadow = '0px 3px 10px rgba(0, 0, 0, 0.15)';
|
1272 | }
|
1273 |
|
1274 | this.setState({
|
1275 | isFocus: true
|
1276 | });
|
1277 | }
|
1278 |
|
1279 | this.chrome_tag = parseInt(getSysVersion().chrome) >= 50;
|
1280 |
|
1281 | if (this.props.defaultStatus) {
|
1282 | this.refs.autoForm_ref.refs.autoTreeInput.focus();
|
1283 | }
|
1284 |
|
1285 | ;
|
1286 | setMaskStyle();
|
1287 | }
|
1288 |
|
1289 | }, {
|
1290 | key: "componentWillReceiveProps",
|
1291 | value: function componentWillReceiveProps(nextProps) {
|
1292 | var nextAutoData = nextProps.autoTreeData;
|
1293 | var nextTreeData = nextProps.treeData.treeData;
|
1294 | var _this$props19 = this.props,
|
1295 | autoTreeData = _this$props19.autoTreeData,
|
1296 | treeData = _this$props19.treeData;
|
1297 |
|
1298 | if (nextProps.defaultValue != this.props.defaultValue && nextProps.defaultValue != this.state.inputValue) {
|
1299 | this.setState({
|
1300 | defaultValue: nextProps.defaultValue,
|
1301 | inputValue: nextProps.defaultValue
|
1302 | });
|
1303 |
|
1304 | if (nextProps.defaultValue.length == 0 && this['val' + this.props.componentId]) {
|
1305 | this['val' + this.props.componentId].filters = '';
|
1306 | }
|
1307 | }
|
1308 |
|
1309 |
|
1310 | if (nextAutoData != undefined && autoTreeData != undefined && nextAutoData.length != autoTreeData.length) {
|
1311 | this.setState({
|
1312 | showPanel: true
|
1313 | });
|
1314 | }
|
1315 |
|
1316 |
|
1317 | if (nextTreeData != undefined && treeData.treeData != undefined && nextTreeData.length != treeData.treeData.length) {
|
1318 | this.setState({
|
1319 | showPanel: true
|
1320 | });
|
1321 | }
|
1322 | }
|
1323 |
|
1324 | }, {
|
1325 | key: "renderDom",
|
1326 | value: function renderDom(temp) {
|
1327 | var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
1328 | var self = this;
|
1329 | var _this$props20 = this.props,
|
1330 | status = _this$props20.status,
|
1331 | single = _this$props20.single,
|
1332 | isSearchAutoTreeEdit = _this$props20.isSearchAutoTreeEdit,
|
1333 | showDropDown = _this$props20.showDropDown,
|
1334 | DropDownData = _this$props20.DropDownData;
|
1335 | var _this$state7 = this.state,
|
1336 | isShow = _this$state7.isShow,
|
1337 | inputValue = _this$state7.inputValue,
|
1338 | searchChange = _this$state7.searchChange,
|
1339 | showPanel = _this$state7.showPanel;
|
1340 |
|
1341 | if (status != 'search') {
|
1342 | if (single) {
|
1343 | var ul_Content;
|
1344 | var autoLi = this.returnAutoLi(true);
|
1345 | var autoLiChild = autoLi.length > 0 ? autoLi : '';
|
1346 | if (isShow) ul_Content = autoLi.length == 0 && inputValue.length > 0 ? React.createElement("div", {
|
1347 | className: "findNothing empty-con"
|
1348 | }) : autoLiChild;
|
1349 | var searchCom = React.createElement(SearchFilters, {
|
1350 | DropDownData: DropDownData,
|
1351 | isSearchAutoTreeEdit: isSearchAutoTreeEdit,
|
1352 | changeFilter: this.changeFilter,
|
1353 | showDropDown: showDropDown,
|
1354 | handelSubmit: this.handelSubmit,
|
1355 | isPanelShow: isShow
|
1356 | });
|
1357 | renderTree(self, temp, offset, self.treeItemClick, ul_Content, self.itemClick, searchChange, searchCom, showPanel);
|
1358 | } else {
|
1359 | renderAutoUl(self, temp, offset);
|
1360 | }
|
1361 | }
|
1362 | }
|
1363 | }, {
|
1364 | key: "searchClick",
|
1365 | value: function searchClick(event) {
|
1366 | var showPanel = this.state.showPanel;
|
1367 |
|
1368 | if (!showPanel) {
|
1369 | this.setState({
|
1370 | showPanel: true
|
1371 | });
|
1372 | }
|
1373 | }
|
1374 | }, {
|
1375 | key: "render",
|
1376 | value: function render() {
|
1377 | var _this2 = this;
|
1378 |
|
1379 | var _this$state8 = this.state,
|
1380 | isFocus = _this$state8.isFocus,
|
1381 | inputValue = _this$state8.inputValue,
|
1382 | isShow = _this$state8.isShow,
|
1383 | searchValue = _this$state8.searchValue,
|
1384 | status = _this$state8.status,
|
1385 | single = _this$state8.single,
|
1386 | resultsData = _this$state8.resultsData,
|
1387 | isShowMouseOverIcon = _this$state8.isShowMouseOverIcon,
|
1388 | defaultPlaceholder = _this$state8.defaultPlaceholder,
|
1389 | showPanel = _this$state8.showPanel,
|
1390 | searchChange = _this$state8.searchChange,
|
1391 | isShowSaveTips = _this$state8.isShowSaveTips,
|
1392 | tipsTitle = _this$state8.tipsTitle;
|
1393 | var _this$props21 = this.props,
|
1394 | showDropDown = _this$props21.showDropDown,
|
1395 | errorMsg = _this$props21.errorMsg,
|
1396 | showText = _this$props21.showText,
|
1397 | errorStatus = _this$props21.errorStatus,
|
1398 | placeholder = _this$props21.placeholder,
|
1399 | autoTreeData = _this$props21.autoTreeData,
|
1400 | isSearchAutoTreeEdit = _this$props21.isSearchAutoTreeEdit,
|
1401 | readOnly = _this$props21.readOnly,
|
1402 | treeData = _this$props21.treeData,
|
1403 | componentId = _this$props21.componentId,
|
1404 | DropDownData = _this$props21.DropDownData,
|
1405 | disabled = _this$props21.disabled,
|
1406 | defaultValue = _this$props21.defaultValue;
|
1407 | var ul_Content;
|
1408 | var autoLi = this.returnAutoLi(true);
|
1409 | var autoLiChild = autoLi.length > 0 ? autoLi : '';
|
1410 |
|
1411 | var _defaultValue = resultsData.length == 0 ? defaultValue || '' : '';
|
1412 |
|
1413 | var cInputData = getCommonInputData(this.state.isActive, defaultPlaceholder, _defaultValue, disabled, errorStatus, errorMsg, this.state.resultsData, this.itemClose, this.onChange, this.addClass, this.removeClass);
|
1414 | var autoTreeSum = autoTreeData ? autoTreeData : [];
|
1415 | var assignTreeData = Object.assign({}, treeData, {
|
1416 | style: {
|
1417 | "height": "325px"
|
1418 | }
|
1419 | });
|
1420 |
|
1421 | if (isShow) {
|
1422 | ul_Content = autoLi.length == 0 && inputValue.length > 0 ? React.createElement("div", {
|
1423 | className: "findNothing empty-con"
|
1424 | }) : autoLiChild;
|
1425 | }
|
1426 |
|
1427 | var tipProps = {
|
1428 | infoType: 'warning',
|
1429 | disappearTime: '3000',
|
1430 | isAutomaticCloseTip: true,
|
1431 | title: tipsTitle,
|
1432 | hide: function hide() {
|
1433 | _this2.setState({
|
1434 | isShowSaveTips: false
|
1435 | });
|
1436 | }
|
1437 | };
|
1438 | return React.createElement("div", null, React.createElement("div", {
|
1439 | ref: "AutoTree",
|
1440 | onKeyDown: this.handleKeyDown,
|
1441 | className: 'field auto-tree' + (status == 'search' ? ' autoTree_Search' : '')
|
1442 | }, status == 'edit' ? React.createElement("div", {
|
1443 | className: status == 'edit' ? 'innerAutoTree multiAutoTree' : ''
|
1444 | }, React.createElement("div", {
|
1445 | className: 'form-item ' + (errorStatus && single ? 'base-input-error-label' : '')
|
1446 | }, status == 'edit' ? React.createElement(CommonLabel, this.props) : '', React.createElement(AutoFormInput, {
|
1447 | status: status,
|
1448 | isShowMouseOverIcon: isShowMouseOverIcon,
|
1449 | isFocus: isFocus,
|
1450 | disabled: disabled,
|
1451 | single: single,
|
1452 | showDropDown: showDropDown,
|
1453 | placeholder: defaultPlaceholder,
|
1454 | inputValue: inputValue,
|
1455 | defaultValue: defaultValue,
|
1456 | errorMsg: errorMsg,
|
1457 | showText: showText,
|
1458 | autoId: window.autoId,
|
1459 | componentId: componentId,
|
1460 | DropDownData: DropDownData,
|
1461 | errorStatus: errorStatus,
|
1462 | commmonInput_Data: cInputData,
|
1463 | handlerOver: this.handlerOver,
|
1464 | readOnly: readOnly,
|
1465 | handlerOut: this.handlerOut,
|
1466 | clearData: this.clearData,
|
1467 | addClass: this.addClass,
|
1468 | editInput_focus: this.editInput_focus,
|
1469 | removeClass: this.removeClass,
|
1470 | onChange: this.onRealChange.bind(this),
|
1471 | findAll: this.findAll,
|
1472 | changeFilter: this.changeFilter,
|
1473 | isSearchAutoTreeEdit: isSearchAutoTreeEdit,
|
1474 | ref: "autoForm_ref"
|
1475 | }))) : React.createElement("div", {
|
1476 | className: "auto-tree__search-panel"
|
1477 | }, React.createElement(Search, _extends({}, getSearchData(searchValue, showPanel ? true : false, true), {
|
1478 | onChange: this.onChange,
|
1479 | onClick: this.searchClick
|
1480 | })), this.props.isFetching ? React.createElement("div", {
|
1481 | style: {
|
1482 | "maxHeight": '310px',
|
1483 | 'overflowY': 'scroll',
|
1484 | backgroundColor: "#FFF",
|
1485 | height: '310px'
|
1486 | }
|
1487 | }, React.createElement(Loading, {
|
1488 | type: "small"
|
1489 | })) : searchChange ? searchValue.length > 0 && autoTreeSum.length > 0 ? React.createElement("div", {
|
1490 | className: "auto-result-container-search",
|
1491 | style: {
|
1492 | display: showPanel ? 'block' : 'none'
|
1493 | }
|
1494 | }, React.createElement("ul", {
|
1495 | className: "auto-result",
|
1496 | onClick: this.itemClick
|
1497 | }, ul_Content)) : searchValue.length > 0 && autoTreeSum.length == 0 ? React.createElement("div", {
|
1498 | className: "empty-con error_page"
|
1499 | }) : showPanel ? React.createElement(Tree, _extends({}, assignTreeData, {
|
1500 | onClick: this.treeItemClick
|
1501 | })) : '' : showPanel ? React.createElement(Tree, _extends({}, assignTreeData, {
|
1502 | onClick: this.treeItemClick
|
1503 | })) : '', React.createElement(SearchFilters, {
|
1504 | DropDownData: DropDownData,
|
1505 | isSearchAutoTreeEdit: isSearchAutoTreeEdit,
|
1506 | changeFilter: this.changeFilter,
|
1507 | showDropDown: showDropDown,
|
1508 | handelSubmit: this.handelSubmit
|
1509 | }))), isShowSaveTips && React.createElement("div", {
|
1510 | style: {
|
1511 | "z-index": '999999'
|
1512 | }
|
1513 | }, React.createElement(Tip, tipProps), " "));
|
1514 | }
|
1515 | }]);
|
1516 |
|
1517 | return AutoTree;
|
1518 | }(Component);
|
1519 |
|
1520 | export { AutoTree as default }; |
\ | No newline at end of file |