UNPKG

ming-demo3

Version:
818 lines (710 loc) 29.2 kB
"use strict"; var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard"); var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports["default"] = void 0; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck")); var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass")); var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn")); var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf")); var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized")); var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits")); var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); var _react = _interopRequireWildcard(require("react")); var _baseui = require("@mdf/baseui"); var _label = _interopRequireDefault(require("./label")); var _text = _interopRequireDefault(require("./text")); var _addEventListener = _interopRequireDefault(require("rc-util/lib/Dom/addEventListener")); var _reactDom = require("react-dom"); var _util = require("util"); function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } var TreeNode = _baseui.Tree.TreeNode; var Search = _baseui.Input.Search; var TreeRefer = function (_Component) { (0, _inherits2["default"])(TreeRefer, _Component); function TreeRefer(props) { var _this; (0, _classCallCheck2["default"])(this, TreeRefer); _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(TreeRefer).call(this, props)); (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "open", function (e) { _this.referViewModel = e.vm; _this.treeModel = e.vm.get('tree'); _this.treeModel.addListener((0, _assertThisInitialized2["default"])(_this)); if (typeof _this.props.afterOkClick === 'function') _this.referViewModel.on('afterOkClick', _this.props.afterOkClick); _this.setState({ searchValue: "" }); }); (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setValue", function (value) { if (cb.utils.isArray(value)) return; _this.setState({ value: value }); }); (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setDataSource", function (dataSource) { _this.oldDataSource = dataSource; _this.setState({ dataSource: dataSource }); }); (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getModel", function () { return _this.props.model || _this.model; }); (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClick", function () { if (_this.state.disabled) return; if (!_this.refresh) { if (_this.hasClicked) return; _this.hasClicked = true; } _this.onClick(); }); (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onClick", function () { var model = _this.getModel(); if (!model && _this.props.cRefType) { _this.model = new cb.models.ReferModel({ cRefType: _this.props.cRefType, multiple: _this.props.multiple, isList: _this.props.isList ? true : false, value: _this.props.value }); _this.model.addListener((0, _assertThisInitialized2["default"])(_this)); } model = _this.getModel(); if (model) model.browse(); }); (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleJointQuery", function () { var model = _this.getModel(); if (!model && _this.props.cRefType) { _this.model = new cb.models.ReferModel({ cRefType: _this.props.cRefType, multiple: _this.props.multiple, isList: _this.props.isList ? true : false, value: _this.props.value }); _this.model.addListener((0, _assertThisInitialized2["default"])(_this)); } model = _this.getModel(); if (model) model.fireEvent('jointQuery'); }); (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onSelect", function (selectedKeys, e) { if (_this.props.onSelect) _this.props.onSelect(selectedKeys, e); if (_this.treeModel) _this.treeModel.select(selectedKeys); _this.setState({ showPop: false }); _this.selectedKeys = selectedKeys; _this.referViewModel.execute('afterOkClick', _this.treeModel.getSelectedNodes()); }); (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onPopClick", function () { var _this$state = _this.state, disabled = _this$state.disabled, value = _this$state.value; if (disabled) return; _this.selectedKeys = [value]; _this.setState({ showPop: !_this.state.showPop }); }); (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onCheck", function (checkedKeys, e) { var bLinkage = _this.state.bLinkage; var checkKeys, halfCheckKeys; if (checkedKeys.checked) { checkKeys = checkedKeys.checked; halfCheckKeys = checkedKeys.halfChecked; } else { checkKeys = checkedKeys; halfCheckKeys = e.halfCheckedKeys; } if (bLinkage) _this.changeLinkage(checkKeys, halfCheckKeys, e);else _this.setState({ checkedKeys: checkKeys, halfCheckedKeys: halfCheckKeys }); }); (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeLinkage", function (checkKeys, halfCheckKeys, e) { var key = e.node.props.eventKey; if (!_this.keyMap) _this.keyMap = _this.treeModel.get('keyMap'); var node = _this.keyMap[key]; if (e.checked) checkKeys.pop(); checkKeys = _this.loopTreeNodes(node, checkKeys, e.checked); _this.setState({ checkedKeys: checkKeys, halfCheckedKeys: halfCheckKeys }); }); (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "loopTreeNodes", function (node, checkKeys, bChecked) { if (bChecked) { checkKeys.push(node[_this.state.keyField]); } else { var keys = []; checkKeys.map(function (key, index) { if (key != node[_this.state.keyField]) keys.push(key); }); checkKeys = keys; } if (node.children) { node.children.map(function (n) { checkKeys = _this.loopTreeNodes(n, checkKeys, bChecked); }); } return checkKeys; }); (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onButtonClick", function (e, type) { var model = _this.getModel(); model.execute('blur'); var keys = _this.state.checkedKeys; if (type == 'submit') { if (_this.props.onSelect) _this.props.onSelect(keys, e); if (_this.treeModel) _this.treeModel.select(keys); _this.referViewModel.execute('afterOkClick', _this.treeModel.getSelectedNodes()); } _this.setState({ showPop: false }); }); (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onClear", function (e) { e.preventDefault(); e.stopPropagation(); if (_this.props.onSelect) _this.props.onSelect([], e); if (_this.treeModel) _this.treeModel.select([]); _this.setState({ checkedKeys: [], showPop: false, selectedKeys: [] }); var model = _this.getModel(); model.setValue(null, true); model.execute('blur'); }); (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onVisibleChange", function (visible) { var disabled = _this.state.disabled; if (disabled) return; _this.setState({ showPop: visible }); if (!visible) { var model = _this.getModel(); model.execute('blur'); } }); (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onSearchChange", function (e) { var value = e.target.value; _this.setState({ searchValue: value }); clearTimeout(_this.timer); _this.timer = setTimeout(function () { _this.searchDebounce(value); }, 800); }); (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "searchDebounce", function (value) { var data = _this.state.dataSource; var _this$state2 = _this.state, titleField = _this$state2.titleField, keyField = _this$state2.keyField; var loop = function loop(data) { return data.map(function (item) { if (item[titleField] && item[titleField].indexOf(value) > -1) _this.expandedKeys.push(item[keyField]); if (item.children) { loop(item.children); } }); }; if (value != '') loop(data); var _dataSource = {}; if (_this.filterTree) { var newDate = value != '' ? _this.getDataSourceNode(JSON.parse(JSON.stringify(_this.oldDataSource)), value) : _this.oldDataSource; _dataSource.dataSource = newDate; } _this.setState(_objectSpread({ expandedKeys: _this.expandedKeys, searchValue: value, autoExpandParent: true }, _dataSource)); _this.expandedKeys = []; }); (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getDataSourceNode", function (data, name) { _this.selectedDataList = []; _this.searchTreeMap = {}; _this.deepSearch(data, name); var allList = []; for (var key in _this.searchTreeMap) { allList.push(key); if (!_this.searchTreeMap[key].children) { if (_this.searchTreeMap[key].parent && _this.searchTreeMap[key].parent != "") { _this.deepSearchPar(_this.searchTreeMap[key], name); } } } return data; }); (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "deepSearch", function (tree, name) { for (var i = 0; i < tree.length; i++) { var currentData = tree[i]; _this.searchTreeMap[currentData.id] = currentData; var contSta = currentData.name.search(name) != -1; if (contSta) { _this.selectedDataList.push(currentData); } if (currentData.children && currentData.children.length > 0) { _this.deepSearch(currentData.children, name); } else { if (!contSta) { currentData["delete"] = true; } } } }); (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "deepSearchPar", function (currentData, name) { var parentObj = _this.searchTreeMap[currentData.parent], _status = true, parentChild = parentObj && parentObj.children ? parentObj.children : []; parentChild.forEach(function (da) { if (!da["delete"]) { _status = false; } }); var contSta = parentObj.name.search(name) != -1; if (!contSta) { if (_status) { parentObj["delete"] = true; } } if (parentObj.parent && parentObj.parent != "") { _this.deepSearchPar(parentObj, name); } }); (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onExpand", function (expandedKeys, node) { _this.setState({ expandedKeys: expandedKeys, autoExpandParent: false }); }); (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "filterTreeNode", function (node) {}); (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleBodyClick", function (e) { document.body.removeEventListener('click', _this.handleBodyClick); if (_this.contains(_this.refs.treerefer, e.target)) return; if (e.target && cb.dom((0, _reactDom.findDOMNode)(e.target)).parents('div.ant-popover-inner-content').length) return; var model = _this.getModel(); model.execute('blur'); }); (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onLinkageChange", function (e) { _this.setState({ "bLinkage": e.target.checked }); }); (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getTreeRefer", function () { var _this$state3 = _this.state, multiple = _this$state3.multiple, disabled = _this$state3.disabled, value = _this$state3.value, showPop = _this$state3.showPop; var contentClass = "", showClear = false, selectionControl = null; if (value && value != "") { selectionControl = _react["default"].createElement("span", { className: "ant-select-selection-selected-value" }, value); showClear = true; } else { selectionControl = _react["default"].createElement("span", { className: "ant-select-selection__placeholder" }); } if (disabled) { contentClass = "ant-select ant-select-disabled ant-select-allow-clear"; } else { contentClass = "ant-select ant-select-enabled ant-select-allow-clear"; } if (showPop) contentClass = contentClass + ' ant-select-open ant-select-focused'; var clearControl = showClear ? _react["default"].createElement("span", { onClick: _this.onClear, className: "ant-select-selection__clear" }) : _react["default"].createElement("span", null); return _react["default"].createElement("span", { ref: function ref(node) { return _this.input = node; }, onClick: _this.onClick, className: contentClass }, _react["default"].createElement("span", { className: "uretail-treerefer-selection ant-select-selection ant-select-selection--single", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "true", tabIndex: "0", "aria-expanded": "false" }, _react["default"].createElement("span", { className: "ant-select-selection__rendered" }, selectionControl), clearControl, _react["default"].createElement("span", { className: "ant-select-arrow", style: { outline: 'none' } }, _react["default"].createElement("b", null)))); }); var cStyle = _this.props.cStyle; var config = null; if (cStyle) { try { config = JSON.parse(cStyle); } catch (e) { console.log(" cStyle to json is error,pleases checke cStyle format ! "); config = {}; } _this.refresh = config.refresh; _this.filterTree = config.filterTree ? config.filterTree : null; } _this.state = Object.assign({ bIsNull: props.bIsNull, showPop: false, checkedKeys: [], halfCheckedKeys: [], expandedKeys: [], searchValue: '', autoExpandParent: true, visible: !props.bHidden, bLinkage: false }, config); _this.expandedKeys = []; _this.selectedKeys = []; _this.oldDataSource = null; return _this; } (0, _createClass2["default"])(TreeRefer, [{ key: "componentDidMount", value: function componentDidMount() { var _this2 = this; if (this.props.model) { this.props.model.addListener(this); var parent = this.props.model.getParent(); if (parent) parent.on('updateTreeRefer', function () { return _this2.onClick(); }); } if (this.props.focus) this.refs.input.refs.input.focus(); this.setState({ popWidth: this.input.clientWidth }); } }, { key: "componentDidUpdate", value: function componentDidUpdate(prevProps, prevState) { if (this.props.model) { this.props.model.addListener(this); if (this.state.err && prevState.value != this.state.value) { this.props.model.validate(); } } } }, { key: "componentWillUnmount", value: function componentWillUnmount() { var model = this.getModel(); this.selectedKeys = []; if (model) model.removeListener(this); } }, { key: "componentWillReceiveProps", value: function componentWillReceiveProps(nextProps) { if (nextProps.value !== this.props.value) this.setState({ value: nextProps.value }); if (nextProps.model) { if (!this.props.model) { nextProps.model.addListener(this); } else { return; } } else { if (this.props.model) { this.props.model.removeListener(this); } } } }, { key: "setListenerState", value: function setListenerState(params) { var value = params.value, keyField = params.keyField; delete params.value; var select = this.state.select; if (select && select.length) { var checkedKeys = []; select.forEach(function (item) { checkedKeys.push(item[keyField]); }); params.checkedKeys = checkedKeys; } this.setState(params); if (value) this.setValue(value); } }, { key: "onSearch", value: function onSearch(val) {} }, { key: "onPressEnter", value: function onPressEnter() {} }, { key: "contains", value: function contains(elem, target) { if (elem === target) return true; if (!elem || !elem.children || !elem.children.length) return false; for (var i = 0, len = elem.children.length; i < len; i++) { if (this.contains(elem.children[i], target)) return true; } return false; } }, { key: "getPopContent", value: function getPopContent(treeNodes, multiple) { var _this3 = this; if (multiple) { var _this$state4 = this.state, checkedKeys = _this$state4.checkedKeys, halfCheckedKeys = _this$state4.halfCheckedKeys, expandedKeys = _this$state4.expandedKeys, autoExpandParent = _this$state4.autoExpandParent, searchValue = _this$state4.searchValue, checkStrictly = _this$state4.checkStrictly, bLinkage = _this$state4.bLinkage; var treeProps = {}; if (checkStrictly === false) { treeProps.checkStrictly = false; treeProps.checkedKeys = [].concat(checkedKeys); } else { treeProps.checkStrictly = true; var keys = []; if (checkedKeys.length > 0) { keys = { checked: checkedKeys, halfChecked: halfCheckedKeys }; } treeProps.checkedKeys = keys; } return _react["default"].createElement("div", null, _react["default"].createElement(Search, { onSearch: this.onSearch, onPressEnter: this.onPressEnter, value: searchValue, onChange: this.onSearchChange }), _react["default"].createElement(_baseui.Tree, (0, _extends2["default"])({ checkable: true, onCheck: this.onCheck }, treeProps, { filterTreeNode: this.filterTreeNode, onExpand: this.onExpand, expandedKeys: expandedKeys, autoExpandParent: autoExpandParent }), treeNodes), _react["default"].createElement("div", { className: "filter-btn-1" }, _react["default"].createElement(_baseui.Checkbox, { checked: bLinkage, onChange: this.onLinkageChange }, "\u8054\u52A8\u4E0B\u7EA7"), _react["default"].createElement(_baseui.Button, { onClick: function onClick(e) { return _this3.onButtonClick(e, 'submit'); }, className: "ant-btn ant-btn-primary ant-btn-sm lf-margin" }, "\u786E\u5B9A"), _react["default"].createElement(_baseui.Button, { onClick: function onClick(e) { return _this3.onButtonClick(e, 'cancel'); }, className: "ant-btn ant-btn-default ant-btn-sm" }, "\u53D6\u6D88"))); } else { var _this$state5 = this.state, _expandedKeys = _this$state5.expandedKeys, _autoExpandParent = _this$state5.autoExpandParent, _searchValue = _this$state5.searchValue; return _react["default"].createElement("div", null, _react["default"].createElement(Search, { onSearch: this.onSearch, onChange: this.onSearchChange, value: _searchValue }), _react["default"].createElement(_baseui.Tree, { className: "tree-refer-radio", onSelect: function onSelect(selectedKeys, e) { return _this3.onSelect(selectedKeys, e); }, onExpand: this.onExpand, expandedKeys: _expandedKeys, autoExpandParent: _autoExpandParent, selectedKeys: this.selectedKeys }, treeNodes)); } } }, { key: "validate", value: function validate(val) { this.setState({ err: val.type && 'has-' + val.type, msg: val.message }); } }, { key: "baseControl", value: function baseControl() { var baseControl = null; if (this.state.readOnly) { baseControl = (0, _text["default"])(this.state.value); } else { var dataSource = this.state.dataSource || []; var _this$state6 = this.state, titleField = _this$state6.titleField, keyField = _this$state6.keyField, childrenField = _this$state6.childrenField, multiple = _this$state6.multiple, disabled = _this$state6.disabled, value = _this$state6.value, showPop = _this$state6.showPop, searchValue = _this$state6.searchValue, popWidth = _this$state6.popWidth; var _loop2 = null; if (!this.filterTree) { _loop2 = function loop(data) { return data.map(function (item) { var title = item[titleField]; if (!item["delete"]) { var selectable = cb.utils.getBooleanValue(item.selectable) === false ? false : true; if (item[childrenField]) { if (item[titleField] && item[titleField].indexOf(searchValue) > -1 && searchValue != "") title = _react["default"].createElement("span", { style: { color: 'red' } }, title); return _react["default"].createElement(TreeNode, { data: item, value: item[keyField], title: title, selectable: selectable, disabled: item.disabled, key: item[keyField] }, _loop2(item[childrenField])); } if (item[titleField] && item[titleField].indexOf(searchValue) > -1 && searchValue != "") title = _react["default"].createElement("span", { style: { color: 'red' } }, title); return _react["default"].createElement(TreeNode, { data: item, value: item[keyField], title: title, key: item[keyField], isLeaf: item.isLeaf, selectable: selectable, disabled: item.disabled }); } }); }; } else { _loop2 = function _loop(data) { var nodes = []; data.forEach(function (item) { var title = item[titleField]; if (!item["delete"]) { var selectable = cb.utils.getBooleanValue(item.selectable) === false ? false : true; if (item[childrenField]) { if (item[titleField] && item[titleField].indexOf(searchValue) > -1 && searchValue != "") title = _react["default"].createElement("span", { style: { color: 'red' } }, title); nodes.push(_react["default"].createElement(TreeNode, { data: item, value: item[keyField], title: title, selectable: selectable, disabled: item.disabled, key: item[keyField] }, _loop2(item[childrenField]))); } if (item[titleField] && item[titleField].indexOf(searchValue) > -1 && searchValue != "") title = _react["default"].createElement("span", { style: { color: 'red' } }, title); nodes.push(_react["default"].createElement(TreeNode, { data: item, value: item[keyField], title: title, key: item[keyField], isLeaf: item.isLeaf, selectable: selectable, disabled: item.disabled })); } }); return nodes; }; } var treeNodes = _loop2(cb.utils.isArray(dataSource) ? dataSource : []); var control = this.getTreeRefer(); var popContent = this.getPopContent(treeNodes, multiple); var extraProps = {}; if (popWidth) extraProps.overlayStyle = { width: popWidth }; baseControl = _react["default"].createElement(_baseui.Popover, (0, _extends2["default"])({}, extraProps, { visible: showPop, getPopupContainer: function getPopupContainer(triggerNode) { return document.getElementById('yxyweb-support-mount-popover') || document.body || triggerNode.parentNode; }, overlayClassName: "uretail-pop", content: popContent, trigger: "click", placement: "bottom", onClick: this.onPopClick, onVisibleChange: this.onVisibleChange }), control); } return baseControl; } }, { key: "getControl", value: function getControl() { var _this4 = this; var _this$props = this.props, bJointQuery = _this$props.bJointQuery, cShowCaption = _this$props.cShowCaption; var title = bJointQuery ? _react["default"].createElement("a", { onClick: function onClick(e) { return _this4.handleJointQuery(e); } }, cShowCaption) : cShowCaption; title = !this.state.readOnly && this.state.bIsNull === false && cShowCaption ? _react["default"].createElement("label", null, _react["default"].createElement(_baseui.Icon, { type: "star" }), title) : _react["default"].createElement("label", null, title); var control = cShowCaption ? _react["default"].createElement(_label["default"], { control: this.baseControl(), title: title }) : this.baseControl(); return control; } }, { key: "render", value: function render() { document.body.addEventListener('click', this.handleBodyClick); var control = this.getControl(); var errClass = this.state.err; var style = this.state.visible ? {} : { display: "none" }; return _react["default"].createElement("div", { style: style, className: errClass ? errClass + ' has-feedback' : 'has-feedback', ref: "treerefer" }, control, _react["default"].createElement("div", { className: "ant-form-explain" }, this.state.msg)); } }]); return TreeRefer; }(_react.Component); exports["default"] = TreeRefer; //# sourceMappingURL=treerefer.js.map