micro-ui-y
Version:
672 lines (614 loc) • 34 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _utils = require('../utils/utils');
var _index = require('../theme/index');
var _scrollBox = require('../scroll/scrollBox2.0');
var _scrollBox2 = _interopRequireDefault(_scrollBox);
var _dialog = require('../dialog/dialog');
var _dialog2 = _interopRequireDefault(_dialog);
var _buttonField = require('../button/buttonField');
var _buttonField2 = _interopRequireDefault(_buttonField);
var _index2 = require('../svg/index');
var _index3 = _interopRequireDefault(_index2);
var _style = require('./style');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var DeptPersonnel = function (_Theme) {
_inherits(DeptPersonnel, _Theme);
function DeptPersonnel(props) {
_classCallCheck(this, DeptPersonnel);
var _this = _possibleConstructorReturn(this, (DeptPersonnel.__proto__ || Object.getPrototypeOf(DeptPersonnel)).call(this, props));
_this.changeSearchValue = function (e) {
_this.setState({
searchValue: e.target.value
});
};
_this.searchKeyUp = function (e) {
if (e.keyCode == 13) {
_this.searchFn();
}
};
_this.searchFn = function () {
var searchList = [];
var randerSearch = function randerSearch(value, dataSource) {
if (dataSource instanceof Array) {
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = dataSource[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var item = _step.value;
var orgName = item.orgName;
if (value && orgName.includes(value)) {
// item.childList = null;
searchList.push(item);
}
if (item.childList && item.childList.length) {
randerSearch(value, item.childList);
}
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
}
};
randerSearch(_this.state.searchValue, _this.state.deptSource);
_this.setState({
searchList: searchList
});
};
_this.setUnfoldDPFn = function (menuObj) {
var orgId = menuObj.orgId;
var unfoldDPId = _this.state.unfoldDPId;
var inx1 = unfoldDPId.indexOf(orgId);
if (inx1 >= 0) {
unfoldDPId.splice(inx1, 1);
} else {
unfoldDPId.push(orgId);
}
_this.setState({
unfoldDPId: unfoldDPId
});
};
_this.setSelectDPFn = function (menuObj) {
_this.setState({
selectDpItem: menuObj
});
var arr = [];
arr.push(menuObj);
var data = menuObj.childList || arr;
_this.setPersonnelFn(data);
};
_this.setPersonnelFn = function (deptSource) {
var choosePersonId = _this.state.choosePersonId;
var personnelSource = _this.getPersonnelSource(deptSource);
console.log(personnelSource);
var allCheck = personnelSource.some(function (item) {
return !choosePersonId.includes(item.userId);
});
_this.setState({
personnelSource: personnelSource,
personnelSource_: personnelSource,
allCheck: !allCheck
});
};
_this.getPersonnelSource = function (deptSource) {
var personnelId = [];
var personnelSource = [];
var allPersonnel = _this.props.personnelSource.concat();
debugger;
var renderSource = function renderSource(data) {
if (data instanceof Array) {
data.forEach(function (element) {
allPersonnel.filter(function (person) {
if (element[_this.props.deptIdName] == person[_this.props.deptIdName]) {
if (!personnelId.includes(person.userId)) {
personnelId.push(person.userId);
personnelSource.push(person);
}
}
});
if (element.childList && element.childList.length) {
renderSource(element.childList);
}
});
}
};
renderSource(deptSource);
return personnelSource;
};
_this.handleCheck = function (item) {
_this.setChoosePerson(item);
};
_this.handleDelete = function (item) {
_this.deleteChoosePerson(item);
};
_this.handleChange = function (e) {
_this.setState({
inputValue: e.target.value
});
};
_this.handleKeyUp = function (e) {
if (e.keyCode == 13) {
_this.searchPersonFn(e.target.value ? e.target.value.trim() : "");
}
};
_this.deleteChoosePerson = function (deleteData) {
var choosePerson = _this.state.choosePerson.concat();
var choosePersonId = _this.state.choosePersonId.concat();
choosePerson.splice(choosePersonId.indexOf(deleteData.userId), 1);
choosePersonId.splice(choosePersonId.indexOf(deleteData.userId), 1);
_this.setState({
choosePerson: choosePerson,
choosePersonId: choosePersonId
});
};
_this.setChoosePerson = function (checkData) {
var choosePerson = _this.state.choosePerson;
var choosePersonId = _this.state.choosePersonId;
var allCheck = false;
if (_this.props.chooseType == "radio") {
choosePerson = [];
choosePersonId = [];
choosePerson.push(checkData);
choosePersonId.push(checkData.userId);
} else {
choosePerson = choosePerson.concat();
//check 为true添加人员，为false删除人员
if (!choosePersonId.includes(checkData.userId)) {
choosePerson.push(checkData);
choosePersonId.push(checkData.userId);
} else {
var index = choosePersonId.findIndex(function (item) {
return item == checkData.userId;
});
choosePerson.splice(index, 1);
choosePersonId.splice(index, 1);
}
allCheck = _this.state.personnelSource.some(function (item) {
return !choosePersonId.includes(item.userId);
});
}
_this.setState({
choosePerson: choosePerson,
choosePersonId: choosePersonId,
allCheck: !allCheck
});
};
_this.allCheckFn = function () {
var personnelSource = _this.state.personnelSource;
var choosePersonId = _this.state.choosePersonId;
var choosePerson = _this.state.choosePerson;
if (!_this.state.allCheck) {
personnelSource.map(function (item) {
if (!choosePersonId.includes(item.userId)) {
choosePersonId.push(item.userId);
choosePerson.push(item);
}
});
} else {
personnelSource.map(function (checkData) {
var index = choosePersonId.findIndex(function (item) {
return item == checkData.userId;
});
choosePerson.splice(index, 1);
choosePersonId.splice(index, 1);
});
}
_this.setState({
choosePersonId: choosePersonId,
choosePerson: choosePerson,
allCheck: !_this.state.allCheck
});
};
_this.searchPersonFn = function (value) {
var choosePersonId = _this.state.choosePersonId;
var personnelSource = [];
if (value == '') {
personnelSource = _this.state.personnelSource_;
} else {
var result = _this.state.personnelSource_.filter(function (item) {
return item.zhName.includes(value);
});
personnelSource = result;
}
var allCheck = personnelSource.some(function (item) {
return !choosePersonId.includes(item.userId);
});
_this.setState({
allCheck: !allCheck,
personnelSource: personnelSource
});
};
_this.randerTree = function (menuList, style) {
var randerFn = function randerFn(menuObj) {
var dom = [];
if (menuObj instanceof Array) {
var childList = [];
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
try {
for (var _iterator2 = menuObj[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var o = _step2.value;
childList.push(randerFn(o));
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
dom.push(_react2.default.createElement(
'div',
{ key: 'c' },
childList
));
} else {
dom.push(_react2.default.createElement(
'div',
{ key: 'dept-' + menuObj.orgId,
style: style.treeItemBox },
_react2.default.createElement(
'div',
{ style: style.treeItem },
_react2.default.createElement(
'div',
{ style: style.treeItemUnfold, onClick: _this.setUnfoldDPFn.bind(_this, menuObj) },
menuObj.childList && menuObj.childList.length > 0 ? _this.state.unfoldDPId.includes(menuObj.orgId) ? _react2.default.createElement(_index3.default, { type: 'Bottom', width: '0.875rem', height: '0.875rem', fill: '#999999' }) : _react2.default.createElement(_index3.default, { type: 'Right', width: '0.875rem', height: '0.875rem', fill: '#999999' }) : null
),
_react2.default.createElement(
'div',
{ style: _this.state.selectDpItem && _this.state.selectDpItem.orgId == menuObj.orgId ? Object.assign({}, style.treeItemTextBox, { color: "#4aa5fe" }) : style.treeItemTextBox, onClick: _this.setSelectDPFn.bind(_this, menuObj) },
_react2.default.createElement(
'div',
{ style: style.treeItemText },
_react2.default.createElement(
'div',
{ style: style.treeItemImg },
_react2.default.createElement(_index3.default, { type: 'Tree', width: '0.875rem', height: '0.875rem',
fill: '#bedefe' })
),
_react2.default.createElement(
'span',
null,
menuObj.orgName
)
)
)
),
_this.state.unfoldDPId.includes(menuObj.orgId) ? _react2.default.createElement(
'div',
{ style: style.treeChild },
menuObj.childList && menuObj.childList.length > 0 && randerFn(menuObj.childList)
) : null
));
}
return dom;
};
var itemDom = [];
var _iteratorNormalCompletion3 = true;
var _didIteratorError3 = false;
var _iteratorError3 = undefined;
try {
for (var _iterator3 = menuList[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
var o = _step3.value;
itemDom.push(randerFn(o));
}
} catch (err) {
_didIteratorError3 = true;
_iteratorError3 = err;
} finally {
try {
if (!_iteratorNormalCompletion3 && _iterator3.return) {
_iterator3.return();
}
} finally {
if (_didIteratorError3) {
throw _iteratorError3;
}
}
}
return itemDom;
};
var _state = {
shouldUpdate: false,
selectDpItem: {},
unfoldDPId: [], //展开了的部门Id集合
deptSource: [],
searchList: [], //部门搜索值
personnelSource: [],
personnelSource_: [],
choosePerson: [], //选中的人员数据集合
choosePersonId: [],
inputValue: "",
allCheck: false
};
_this.state = _utils._Object.merge(_this.state || {}, _state);
return _this;
}
//渲染菜单目录树
_createClass(DeptPersonnel, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if (nextProps.personnelSource.length !== this.props.personnelSource.length) {
var choosePersonId = nextProps.choosedPerson || [];
var choosePerson = choosePersonId.length > 0 ? nextProps.personnelSource.filter(function (item) {
return choosePersonId.includes(item.userId);
}) : [];
this.setState({
personnelSource: nextProps.personnelSource,
personnelSource_: nextProps.personnelSource,
choosePersonId: choosePersonId,
choosePerson: choosePerson
});
}
if (nextProps.deptSource.length !== this.props.deptSource.length) {
var deptSource = _utils._Tree.renderTree(nextProps.deptSource, nextProps.deptIdName, nextProps.parentIdName);
this.setState({
deptSource: deptSource,
selectDpItem: deptSource[0]
});
}
if (JSON.stringify(this.props.choosedPerson) !== JSON.stringify(nextProps.choosedPerson)) {
var _choosePersonId = nextProps.choosedPerson || [];
var _choosePerson = _choosePersonId.length > 0 ? nextProps.personnelSource.filter(function (item) {
return _choosePersonId.includes(item.userId);
}) : [];
this.setState({
choosePersonId: _choosePersonId,
choosePerson: _choosePerson
});
}
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
var deptSource = this.props.deptSource.length > 0 ? _utils._Tree.renderTree(this.props.deptSource, this.props.deptIdName, this.props.parentIdName) : [];
var personnelSource = this.props.personnelSource;
var choosePersonId = this.props.choosedPerson || [];
var choosePerson = choosePersonId.length > 0 ? personnelSource.filter(function (item) {
return choosePersonId.includes(item.userId);
}) : [];
this.setState({
deptSource: deptSource,
personnelSource: personnelSource,
personnelSource_: personnelSource,
selectDpItem: deptSource[0],
choosePersonId: choosePersonId,
choosePerson: choosePerson
});
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var props = _objectWithoutProperties(this.props, []);
var styles = _utils._Object.merge({}, (0, _style.personnelSty)(this));
var choosePerson = this.state.choosePerson || [];
var personnelList = this.state.personnelSource || [];
var actions = [_react2.default.createElement(_buttonField2.default, { key: '1', scenesType: 'submit', handleBtn: props.handleSubmit.bind(this, this.state.choosePerson), btnText: '\u786E\u8BA4' }), _react2.default.createElement(_buttonField2.default, { key: '2', scenesType: 'back', handleBtn: props.handleBack, btnText: '\u53D6\u6D88' })];
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(
_dialog2.default,
{
open: props.open,
onRequestClose: this.handleClose,
bodyStyle: props.open ? styles.bodyStyle : {},
contentStyle: props.open ? styles.contentStyle : {},
title: '\u90E8\u95E8\u4EBA\u5458\u9009\u62E9',
actions: actions
},
props.open ? [_react2.default.createElement(
'div',
{ key: '1', style: styles.deptStaff },
_react2.default.createElement(
'div',
{ style: styles.deptPersonTree },
_react2.default.createElement(
'div',
{ style: styles.searchBox },
_react2.default.createElement('input', { style: styles.searchInput, type: 'input', onKeyUp: this.searchKeyUp.bind(this),
onChange: this.changeSearchValue.bind(this) }),
_react2.default.createElement(
'div',
{ style: styles.searchIcon, onClick: this.searchFn.bind(this) },
_react2.default.createElement(_index3.default, { type: 'Query', width: '1rem', height: '1rem', fill: '#4aa5fe' })
)
),
_react2.default.createElement(
'div',
{ style: styles.treeContent },
_react2.default.createElement(
_scrollBox2.default
// shouldUpdate={this.state.shouldUpdateChoose}
// initScroll={this.initScrollChoose}
// shouldUpdate={this.state.shouldUpdateList}
// initScroll={this.initScrollList}
,
{ shouldUpdate: this.state.shouldUpdate,
maxHeight: '31rem',
scrollWrapColor: '#fff',
scrollBarColor: '#dfdfdf',
bottomScroll: 'N'
},
this.randerTree(this.state.searchList.length ? this.state.searchList : this.state.deptSource, styles)
)
)
),
_react2.default.createElement(
'div',
{ style: styles.deptPersonSelect },
_react2.default.createElement(
'div',
{ style: styles.choosedPerson },
'\u5DF2\u9009\u4EBA\u5458\u6570\uFF1A',
_react2.default.createElement(
'span',
null,
choosePerson.length
),
' '
),
_react2.default.createElement(
'div',
{ style: styles.chooseBox },
_react2.default.createElement(
_scrollBox2.default,
{ maxHeight: '9rem'
// width="33.75rem"
// bottomScroll="N"
},
_react2.default.createElement(
'div',
{ style: styles.chooseCont },
choosePerson.map(function (item, index) {
return _react2.default.createElement(
'div',
{ key: index, style: styles.chooseItem },
_react2.default.createElement(
'div',
{ style: styles.treeItemImg },
_react2.default.createElement(_index3.default, { type: 'Mine', width: '0.875rem', height: '0.875rem',
fill: '#bedefe' })
),
_react2.default.createElement(
'div',
{ style: styles.chooseItemName },
item.zhName
),
_react2.default.createElement(
'div',
{ style: styles.chooseItemSvg,
onClick: _this2.handleDelete.bind(_this2, item) },
_react2.default.createElement(_index3.default, { type: 'False', width: '0.75rem', height: '0.75rem', fill: '#ff6468' })
)
);
}),
!choosePerson.length ? _react2.default.createElement(
'div',
{ style: styles.nullBox },
'\u7A7A\u7A7A\u5982\u4E5F\uFF0C\u8BF7\u9009\u62E9\u4EBA\u5458'
) : null
)
)
),
_react2.default.createElement(
'div',
{ style: styles.searchBox1 },
_react2.default.createElement('input', { style: styles.searchInput1, type: 'text', onBlur: this.handleChange.bind(this),
defaultValue: this.state.inputValue, onKeyUp: this.handleKeyUp.bind(this) }),
_react2.default.createElement(
'div',
{ style: styles.searchBtn,
onClick: this.searchPersonFn.bind(this, this.state.inputValue ? this.state.inputValue.trim() : "") },
_react2.default.createElement(_index3.default, { type: 'Query', width: '1rem', height: '1rem', fill: '#4aa5fe' })
)
),
_react2.default.createElement(
'div',
null,
_react2.default.createElement(
'div',
{ style: styles.personnelTitle },
props.departmentName
),
_react2.default.createElement(
'div',
{ style: styles.personnelList },
_react2.default.createElement(
_scrollBox2.default,
{ maxHeight: '20rem'
// width="33.75rem"
// bottomScroll="N"
},
this.props.chooseType !== "radio" && _react2.default.createElement(
'div',
{ style: styles.allCheck, onClick: this.allCheckFn },
_react2.default.createElement(
'span',
{ style: { marginRight: "1rem" } },
'\u5168\u9009'
),
this.state.allCheck ? _react2.default.createElement(_index3.default, { type: 'CheckboxOn', width: '1rem', height: '1rem',
fill: "#4aa5fe" }) : _react2.default.createElement(_index3.default, { type: 'CheckboxOff', width: '1rem', height: '1rem',
fill: "#4aa5fe" })
),
_react2.default.createElement(
'div',
{ style: styles.personnelCont },
props.personnelSource.map(function (item, index) {
var i = personnelList.findIndex(function (person) {
return person.userId == item.userId;
});
return _react2.default.createElement(
'div',
{ key: item.userId, onClick: _this2.handleCheck.bind(_this2, item),
style: i >= 0 ? (index + 1) % 3 == 0 ? styles.personItem3 : styles.personItem : { display: "none" } },
_react2.default.createElement(
'div',
{ style: styles.treeItemImg },
_react2.default.createElement(_index3.default, { type: 'Mine', width: '0.875rem', height: '0.875rem',
fill: '#bedefe' })
),
_react2.default.createElement(
'div',
{ style: styles.personItemName },
item.zhName
),
props.checkType == "radio" ? _this2.state.choosePersonId.includes(item.userId) ? _react2.default.createElement(_index3.default, { type: 'RadioOn', width: '1rem', height: '1rem',
fill: "#4aa5fe" }) : _react2.default.createElement(_index3.default, { type: 'RadioOff', width: '1rem', height: '1rem',
fill: "#4aa5fe" }) : _this2.state.choosePersonId.includes(item.userId) ? _react2.default.createElement(_index3.default, { type: 'CheckboxOn', width: '1rem', height: '1rem',
fill: "#4aa5fe" }) : _react2.default.createElement(_index3.default, { type: 'CheckboxOff', width: '1rem', height: '1rem',
fill: "#4aa5fe" })
);
}),
personnelList.length == 0 ? _react2.default.createElement(
'div',
{ style: styles.personEmpty },
'\u7A7A\u7A7A\u5982\u4E5F'
) : ""
)
)
)
)
)
)] : null
)
);
}
}]);
return DeptPersonnel;
}(_index.Theme);
// Personnel.propTypes = propTypes;
exports.default = DeptPersonnel;
//# sourceMappingURL=index.js.map