11111

src/components/LazyCascader/index.jsx

@@ -1,9 +1,9 @@
 import { Cascader } from 'antd'
-import React, { useState, useEffect } from 'react'
+import React, { useEffect } from 'react'
 import { connect } from 'dva'
 
 const LazyCascader = props => {
-  const { options, dispatch } = props
+  const { options, dispatch, onSelect } = props
   useEffect(() => {
     if (!options.length) {
       dispatch({
@@ -12,8 +12,9 @@ const LazyCascader = props => {
     }
   }, [])
 
-  const onChange = (value, selectedOptions) => {
-    // console.log(value, selectedOptions)
+  const onChange = value => {
+    const [province = '', city = '', area = ''] = value
+    onSelect({ province, city, area })
   }
 
   const loadData = selectedOptions => {

src/pages/Customer/Contact/index.jsx

@@ -9,6 +9,7 @@ import useAutoTable from '@/hooks/useAutoTable'
 import consts from '@/consts'
 import { queryContact } from '@/services/contact'
 import styles from './index.less'
+import LazyCascader from '@/components/LazyCascader'
 
 const Contact = props => {
   const [x, y] = useAutoTable(props.collapsed)
@@ -308,15 +309,16 @@ const Contact = props => {
   console.log(districtlist)
 
   const handleSearch = value => {
-    console.log(111)
     initData({ search: value })
   }
+
+  const handleOnselect = payload => {
+    initData({ ...payload })
+  }
   return (
     // <PageHeaderWrapper></PageHeaderWrapper>
     <div>
-      <div className="zh-pd-24">
-        <Cascader onChange={onChange} />
-      </div>
+      {/* <div className="zh-pd-24" /> */}
       <div className={styles.tableContent}>
         <ProTable
           // className={styles.tableContent}
@@ -336,7 +338,8 @@ const Contact = props => {
           toolbar={{
             search: {
               onSearch: handleSearch
-            }
+            },
+            actions: [<LazyCascader onSelect={handleOnselect} key={LazyCascader} />]
           }}
           scroll={{ x, y }}
           columnsStateMap={columnsStateMap}