diff --git a/pc4mobx/hrmSalary/components/selectItemsModal/selectItemsWrapper.js b/pc4mobx/hrmSalary/components/selectItemsModal/selectItemsWrapper.js index 25c7e550..9984ac9f 100644 --- a/pc4mobx/hrmSalary/components/selectItemsModal/selectItemsWrapper.js +++ b/pc4mobx/hrmSalary/components/selectItemsModal/selectItemsWrapper.js @@ -11,95 +11,75 @@ class SelectItemsWrapper extends Component { constructor(props) { super(props); this.state = { - list: [], - filterList: [] + searchVal: "", + selectItem: [], + groupItem: [], + showOnlyChecked: false }; } - componentDidMount() { - this.setState({ - list: this.props.dataSource - }); - } - - handleSearchItemSet = (val) => { - const { dataSource } = this.props; - this.setState({ - filterList: _.map(dataSource, item => { - return { - ...item, - items: _.filter(item.items || [], child => child.name.indexOf(val) !== -1) - }; - }) - }); - }; - handleShowOnlyChecked = (checked) => { - const { dataSource } = this.props; - const { list } = this.state; - if (!!Number(checked)) { - this.setState({ - list: _.map(list, item => { - return { - ...item, - items: _.filter(item.items || [], child => !!child.checked) - }; - }) - }); - } else { - this.setState({ list: dataSource }); - } - }; + handleSearchItemSet = (searchVal) => this.setState({ searchVal }); + handleShowOnlyChecked = (showOnlyChecked) => this.setState({ showOnlyChecked: !!Number(showOnlyChecked) }); handleSelectGroupAll = (groupId, checked) => { - const { list, filterList } = this.state; - const key = !_.isEmpty(filterList) ? "filterList" : "list"; - this.setState({ - [key]: _.map(!_.isEmpty(filterList) ? filterList : list, item => { - if (groupId === item.groupId) { - return { - ...item, - items: _.map(item.items || [], child => { - return { ...child, checked: !!Number(checked) }; - }) - }; + const { selectItem, groupItem } = this.state; + const { dataSource } = this.props; + _.map(dataSource, item => { + if (item.groupId === groupId) { + if (!!Number(checked)) { + this.setState({ + groupItem: [...groupItem, ..._.map(item.items, child => child.id)] + }, () => this.setState({ selectItem: [...selectItem, ...this.state.groupItem] })); + } else { + this.setState({ + groupItem: _.differenceWith(groupItem, _.map(item.items, child => child.id), _.isEqual) + }, () => this.setState({ selectItem: this.state.groupItem })); } - return { ...item }; - }) + } }); }; handleSelectItem = (id, checked) => { - const { list, filterList } = this.state; - const key = !_.isEmpty(filterList) ? "filterList" : "list"; + const { selectItem } = this.state; this.setState({ - [key]: _.map(!_.isEmpty(filterList) ? filterList : list, item => { - return { - ...item, - items: _.map(item.items || [], child => { - if (id === child.id) { - return { ...child, checked: !!Number(checked) }; - } - return { ...child }; - }) - }; - }) + selectItem: !!Number(checked) ? [...selectItem, id] : _.xorWith(selectItem, [id], _.isEqual) }); }; renderTitle = (item) => { const { onSelectGroupAll } = this.props; - const { groupName, groupId } = item; + const { groupName, groupId, items } = item; + const number = _.filter(items, it => !!it.checked).length; return
onSelectGroupAll(groupId, val)}/> - 已选择0个字段 + 已选择{number}个字段
; }; render() { - const { list, filterList } = this.state; - const { onSelectItem } = this.props; - console.log("filterList", filterList); + const { searchVal, selectItem, showOnlyChecked } = this.state; + const { onSelectItem, dataSource } = this.props; + let setItemList = _.map(dataSource, item => { + return { + ...item, + items: _.filter(item.items || [], child => child.name.indexOf(searchVal) !== -1) + }; + }); + setItemList = _.map(setItemList, item => { + return { + ...item, + items: _.map(item.items, child => { + return { ...child, checked: selectItem.includes(child.id) }; + }) + }; + }); + if (showOnlyChecked) { + setItemList = _.map(setItemList, item => { + return { ...item, items: _.filter(item.items, it => !!it.checked) }; + }); + } + console.log(setItemList); return ( { - _.map(!_.isEmpty(filterList) ? filterList : list, item => { + _.map(setItemList, item => { const { items } = item; return