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

pc4mobx/hrmSalary/components/selectItemsModal/selectItemsWrapper.js

@@ -9,15 +9,16 @@ import { WeaCheckbox, WeaSearchGroup } from "ecCom";
 
 class SelectItemsWrapper extends Component {
   renderTitle = (item) => {
-    const { groupName } = item;
+    const { onSelectGroupAll } = this.props;
+    const { groupName, groupId } = item;
     return <div className="setGroupWrapper">
-      <WeaCheckbox content={groupName}/>
+      <WeaCheckbox content={groupName} onChange={(val) => onSelectGroupAll(groupId, val)}/>
       <span className="checkedtitle">已选择0个字段</span>
     </div>;
   };
 
   render() {
-    const { dataSource } = this.props;
+    const { dataSource, onSelectItem } = this.props;
     return (
       <React.Fragment>
         {
@@ -31,13 +32,11 @@ class SelectItemsWrapper extends Component {
                     <ul className="itemContUl">
                       {
                         _.map(items, child => {
-                          const { name, checked } = child;
+                          const { name, checked, id } = child;
                           return <li title={name}>
                             <WeaCheckbox
                               content={name} value={checked ? "1" : "0"}
-                              onChange={(value) => {
-                                console.log(value);
-                              }}
+                              onChange={(val) => onSelectItem(id, val)}
                             />
                           </li>;
                         })

pc4mobx/hrmSalary/pages/dataAcquisition/attendance/components/attendanceDataComp.js

@@ -229,6 +229,14 @@ class AttendanceDataComp extends Component {
   handleSearchItemSet = (val) => {
     const { fieldSetPayload, fieldSetList } = this.state;
     this.setState({
+      fieldSetList: _.map(_.cloneDeep(fieldSetList), item => {
+        return {
+          ...item,
+          items: _.filter(item.items || [], child => {
+            return child.name.indexOf(val) !== -1;
+          })
+        };
+      }),
       fieldSetPayload: {
         ...fieldSetPayload,
         data: _.map(_.cloneDeep(fieldSetList), item => {
@@ -251,7 +259,7 @@ class AttendanceDataComp extends Component {
           data: _.map(_.cloneDeep(fieldSetList), item => {
             return {
               ...item,
-              items: _.map(item.items || [], child => !!child.checked)
+              items: _.filter(item.items || [], child => !!child.checked)
             };
           })
         }
@@ -265,6 +273,66 @@ class AttendanceDataComp extends Component {
       });
     }
   };
+  handleSelectGroupAll = (groupId, checked) => {
+    const { fieldSetPayload, fieldSetList } = this.state;
+    this.setState({
+      fieldSetList: _.map(_.cloneDeep(fieldSetList), item => {
+        if (groupId === item.groupId) {
+          return {
+            ...item,
+            items: _.map(item.items || [], child => {
+              return { ...child, checked: !!Number(checked) };
+            })
+          };
+        }
+        return { ...item };
+      }),
+      fieldSetPayload: {
+        ...fieldSetPayload,
+        data: _.map(_.cloneDeep(fieldSetList), item => {
+          if (groupId === item.groupId) {
+            return {
+              ...item,
+              items: _.map(item.items || [], child => {
+                return { ...child, checked: !!Number(checked) };
+              })
+            };
+          }
+          return { ...item };
+        })
+      }
+    });
+  };
+  handleSelectItem = (id, checked) => {
+    const { fieldSetPayload, fieldSetList } = this.state;
+    this.setState({
+      fieldSetList: _.map(_.cloneDeep(fieldSetList), item => {
+        return {
+          ...item,
+          items: _.map(item.items || [], child => {
+            if (id === child.id) {
+              return { ...child, checked: !!Number(checked) };
+            }
+            return { ...child };
+          })
+        };
+      }),
+      fieldSetPayload: {
+        ...fieldSetPayload,
+        data: _.map(_.cloneDeep(fieldSetList), item => {
+          return {
+            ...item,
+            items: _.map(item.items || [], child => {
+              if (id === child.id) {
+                return { ...child, checked: !!Number(checked) };
+              }
+              return { ...child };
+            })
+          };
+        })
+      }
+    });
+  };
 
   render() {
     const {
@@ -327,7 +395,13 @@ class AttendanceDataComp extends Component {
         />
         {/* 表头设置 */}
         <SelectItemModal {...fieldSetPayload}
-                         comp={<SelectItemsWrapper dataSource={fieldSetPayload.data}/>}
+                         comp={
+                           <SelectItemsWrapper
+                             dataSource={fieldSetPayload.data}
+                             onSelectGroupAll={this.handleSelectGroupAll}
+                             onSelectItem={this.handleSelectItem}
+                           />
+                         }
                          onCancel={this.handleCloseSettings}
                          onSearchItemSet={this.handleSearchItemSet}
                          onShowOnlyChecked={this.handleShowOnlyChecked}