feat: 客户、联系人详情更改列表实时刷新

src/pages/Customer/Company/components/CompanyDetail/CompanyTabList.jsx

@@ -9,7 +9,7 @@ import ProTable from '@ant-design/pro-table'
 import { queryContact } from '@/services/contact'
 // import { useScroll } from '_ahooks@2.10.2@ahooks'
 
-const CompanyTabList = ({ initData, customerId, software }) => {
+const CompanyTabList = ({ initData, customerId, client, software }) => {
   const { TabPane } = Tabs
   const tRef = useRef(null)
   const columns = [
@@ -52,20 +52,20 @@ const CompanyTabList = ({ initData, customerId, software }) => {
       dataIndex: 'client'
     }
   ]
-  const [dataSource, setDataSource] = useState([])
-  useEffect(() => {
-    const fetchClients = async () => {
-      const { code = -1, data: { client = [] } = { client: [], total: 0 } } = await queryContact({
-        customerId,
-        current: 1,
-        pageSize: consts.MAX_PAGE_SIZE
-      })
-      if (code === consts.RET_CODE.SUCCESS) {
-        setDataSource(client)
-      }
-    }
-    fetchClients()
-  }, [])
+  // const [dataSource, setDataSource] = useState([])
+  // useEffect(() => {
+  //   const fetchClients = async () => {
+  //     const { code = -1, data: { client = [] } = { client: [], total: 0 } } = await queryContact({
+  //       customerId,
+  //       current: 1,
+  //       pageSize: consts.MAX_PAGE_SIZE
+  //     })
+  //     if (code === consts.RET_CODE.SUCCESS) {
+  //       setDataSource(client)
+  //     }
+  //   }
+  //   fetchClients()
+  // }, [])
 
   const handleAddClient = async values => {
     // 客户id
@@ -86,7 +86,7 @@ const CompanyTabList = ({ initData, customerId, software }) => {
                 size="small"
                 columns={columns}
                 search={false}
-                dataSource={dataSource}
+                dataSource={client}
                 toolBarRender={false}
                 rowKey={record => record.id}
                 pagination={false}

src/pages/Customer/Company/components/CompanyDetail/index.jsx

@@ -51,7 +51,12 @@ const Index = props => {
             </div>
           </Col>
           <Col span={12} flex={{ flexDirection: 'column' }} className="sheet-box-right">
-            <CompanyTabList initData={initData} customerId={id} software={state.software} />
+            <CompanyTabList
+              initData={initData}
+              customerId={id}
+              software={state.software}
+              client={state.client}
+            />
             <CompanyLowerList log={state.log} />
           </Col>
         </Row>

src/pages/Customer/Company/index.jsx

@@ -18,7 +18,7 @@ import { IconPark } from '@/components/SvgIcon'
 import { apiBatchLink } from '@/services/customer'
 
 const Company = props => {
-  const { personTagColorMap, teamTagColorMap, personTags, teamTags, dispatch } = props
+  const { personTagColorMap, teamTagColorMap, personTags, teamTags, dispatch, shouldUpdate } = props
   const { toggleDrawer, setDrawerProps } = useModal()
   const tRef = useRef(null)
   const [selectKeys, setSelectKeys] = useState([])
@@ -109,7 +109,14 @@ const Company = props => {
         payload: { tagType: TagTypeEnum.TEAMTAG, tagColumn: TagDataTypeEnum.COMPANY }
       })
     }
-  }, [])
+    if (shouldUpdate) {
+      tRef.current.reload()
+      dispatch({
+        type: 'refresh/company',
+        payload: 'company'
+      })
+    }
+  }, [shouldUpdate])
   const handleSearch = value => {
     tRef.current.reset()
     setState({ ...state, params: { ...state.params, search: value } })
@@ -436,7 +443,13 @@ const Company = props => {
           onSearch: handleSearch
         },
         actions: [
-          <LazyCascader onChange={onDistrictChange} changeOnSelect={true} key="lazyCascader" />,
+          <LazyCascader
+            onChange={onDistrictChange}
+            changeOnSelect={true}
+            key="lazyCascader"
+            className="hover:bg-[rgba(0,0,0,0.1)]"
+            bordered={false}
+          />,
           <AddCompany onConfirm={handleAddCompany} key="addCompanyBtn" />
         ]
       }}
@@ -454,9 +467,10 @@ const Company = props => {
   )
 }
 
-export default connect(({ company }) => ({
+export default connect(({ company, refresh }) => ({
   personTagColorMap: company.personTagColorMap,
   personTags: company.personTags,
   teamTagColorMap: company.teamTagColorMap,
-  teamTags: company.teamTags
+  teamTags: company.teamTags,
+  shouldUpdate: refresh.company
 }))(Company)

src/pages/Customer/Contact/index.jsx

@@ -19,7 +19,7 @@ import { apiBatchLink } from '@/services/customer'
 
 const Contact = props => {
   const { toggleDrawer, setDrawerProps } = useModal()
-  const { personTagColorMap, teamTagColorMap, personTags, teamTags, dispatch } = props
+  const { personTagColorMap, teamTagColorMap, personTags, teamTags, dispatch, shouldUpdate } = props
 
   const tRef = useRef()
   const [tagState, setTagState] = useState({
@@ -66,7 +66,7 @@ const Contact = props => {
   }, [personTags, teamTags, personTagColorMap, teamTagColorMap])
 
   const toolbarOptionsChange = (type, ids) => {
-    console.log('type', type, 'ids', ids)
+    // console.log('type', type, 'ids', ids)
     setTagState({ ...tagState, [type]: ids })
   }
 
@@ -409,7 +409,14 @@ const Contact = props => {
         payload: { tagType: TagTypeEnum.TEAMTAG, tagColumn: TagDataTypeEnum.CONTACT }
       })
     }
-  }, [])
+    if (shouldUpdate) {
+      tRef.current.reload()
+      dispatch({
+        type: 'refresh/contact',
+        payload: 'contact'
+      })
+    }
+  }, [shouldUpdate])
 
   const handleSearch = value => {
     tRef.current.reset()
@@ -573,9 +580,10 @@ const Contact = props => {
   )
 }
 
-export default connect(({ contact }) => ({
+export default connect(({ contact, refresh }) => ({
   personTagColorMap: contact.personTagColorMap,
   personTags: contact.personTags,
   teamTagColorMap: contact.teamTagColorMap,
-  teamTags: contact.teamTags
+  teamTags: contact.teamTags,
+  shouldUpdate: refresh.contact
 }))(Contact)