数据采集-考勤引用页面重构

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 <div className="setGroupWrapper">
       <WeaCheckbox content={groupName} onChange={(val) => onSelectGroupAll(groupId, val)}/>
-      <span className="checkedtitle">已选择0个字段</span>
+      <span className="checkedtitle">已选择{number}个字段</span>
     </div>;
   };
 
   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 (
       <React.Fragment>
         {
-          _.map(!_.isEmpty(filterList) ? filterList : list, item => {
+          _.map(setItemList, item => {
             const { items } = item;
             return <WeaSearchGroup title={this.renderTitle(item)} showGroup>
               <div className="itemsWrapper">