1、通过父子组件相互控制传值解决表格删除、禁启用、批量删除等功能

chenjunhuan666 · Aug 5, 2020 · ef77ebe · ef77ebe
1 parent 25fa0a6
commit ef77ebe
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 9 deletions.
diff --git a/src/components/TableComp/index.js b/src/components/TableComp/index.js
@@ -25,17 +25,14 @@ class TableComp extends Component {
     componentDidMount = () => {
         // console.log(requestUrl[this.props.config.url])
         this.getDepartmentListFun()
+        this.props.onRef(this)
     }
 
 
     // 获取部门列表
-    getDepartmentListFun = () => { 
+    getDepartmentListFun = (data) => { 
         const { pageNumber, pageSize } = this.state
         this.setState({tableLoading: true})
-        // const data = {
-        //     pageNumber,
-        //     pageSize
-        // }
         // if(name) {
         //     data.name = name
         // }
@@ -47,6 +44,9 @@ class TableComp extends Component {
                 pageSize
             }
         }
+        if(data){
+            requestData.data.name = data
+        }
 
         TableList(requestData).then(res => {
             const newData = res.data.data
@@ -55,18 +55,23 @@ class TableComp extends Component {
                     tableData: newData.data,
                     tableLoading: false
                 })
+                // 控制父组件serachFlag开关的值
+                this.props.sonSetSearchFlag()
             }
 
         }).catch( err => {
             this.setState({tableLoading: false})
+            // 控制父组件serachFlag开关的值
+            this.props.sonSetSearchFlag()
         })
     }
     /* 
         复选框
     */
     onCheckBox = (selectedRowKeys) => {
         // this.setState({ selectedRowKeys });
-        console.log(selectedRowKeys)
+        // console.log("son-selectedRowKeys",selectedRowKeys)
+        this.props.sonToCheck(selectedRowKeys)
     }
 
 

diff --git a/src/pages/DepartmentAdd/index.js b/src/pages/DepartmentAdd/index.js
@@ -47,10 +47,16 @@ class AddDepartment extends Component{
         })
         if(!values.name){
             message.info('部门名称不能为空')
+            this.setState({
+                loading: false
+            })
             return false
         }
         if(!values.content){
             message.info('请进行相关描述')
+            this.setState({
+                loading: false
+            })
             return false
         }
         const requestAddData = values

diff --git a/src/pages/DepartmentList/index.js b/src/pages/DepartmentList/index.js
@@ -84,6 +84,24 @@ class DepartmentList extends Component{
     componentDidMount = () => {
         // this.getDepartmentListFun()
     }
+    // 父控制子组件
+    onRef = (ref) => {
+        this.table = ref
+    }
+
+    //子调用父，控制searchFlag的值
+    sonSetSearchFlag = () => {
+        this.setState({
+            searchFlag: false
+        })
+    }
+
+    // 子向父传多选selectedRowKeys的值
+    sonToCheck = (selectedRowKeys) => {
+        this.setState({
+            selectedRowKeys
+        })
+    }
 
     /* 
         删除modal框的控制 
@@ -99,6 +117,9 @@ class DepartmentList extends Component{
             // console.log(res.data.data)
             message.success(res.data.message)
             // this.getDepartmentListFun()
+            //调用子组件更新列表
+            this.table.getDepartmentListFun()
+
             this.setState({
                 confirmLoading: false,
                 visible: false,
@@ -125,6 +146,8 @@ class DepartmentList extends Component{
             pageSize: 10
         })
         // this.getDepartmentListFun()
+        //调用子组件更新列表
+        this.table.getDepartmentListFun(this.state.name)
     }
 
 
@@ -153,6 +176,9 @@ class DepartmentList extends Component{
             this.setState({switchId: null})
             // this.setState({flag: false})
             // this.getDepartmentListFun()
+
+            //调用子组件更新列表
+            this.table.getDepartmentListFun()
         }).catch(err => {
             this.setState({switchId: null})
             // this.setState({flag: false})
@@ -163,10 +189,13 @@ class DepartmentList extends Component{
     deleteDep = ({id}) => {
         const { selectedRowKeys } = this.state
         if(!id){ // 批量删除
-            if(selectedRowKeys.length === 0) return false;
+            if(selectedRowKeys.length === 0){
+                message.info('请选择要删除的数据！')
+                return false
+            };
             id = selectedRowKeys.join()
         }
-        // console.log(id)
+        console.log(id)
         this.setState({
             visible: true,
             id
@@ -186,7 +215,12 @@ class DepartmentList extends Component{
                     </Form.Item>
                 </Form>
 
-                <TableComp config = {this.state.tableConfig}/>
+                <TableComp 
+                    onRef={this.onRef} 
+                    sonToCheck = {this.sonToCheck}
+                    config = {this.state.tableConfig}
+                    sonSetSearchFlag = {this.sonSetSearchFlag}
+                />
 
                 <Button onClick={this.deleteDep} style={{marginTop:'10px'}}>批量删除</Button>
                 <Modal