feat: 客户下地区筛选还原到原本的筛选机制(toolbar)

src/pages/Customer/Client/index.jsx

@@ -6,7 +6,7 @@ import { connect, useModel } from 'umi'
 import React, { useEffect, useState, useRef, useMemo } from 'react'
 import consts from '@/consts'
 import { useModal } from '@/components/Modal'
-import { formatValues } from '@/components/LazyCascader'
+import LazyCascader, { formatValues } from '@/components/LazyCascader'
 import PersonLabel from '../Company/components/PersonLabel'
 import {
   TagTypeEnum,
@@ -21,7 +21,7 @@ import { refactorFilterField, refactorSortField } from '@/utils/utils'
 import { PermDataTypeEunm } from '../Company/components/PermSelect'
 import BasicTable from '@/components/Table'
 import { getPermAuthCache } from '@/utils/auth'
-import FilterCascader from '@/components/Table/src/components/FilterCascader'
+// import FilterCascader from '@/components/Table/src/components/FilterCascader'
 
 const Client = props => {
   const { toggleDrawer, setDrawerProps } = useModal()
@@ -172,7 +172,8 @@ const Client = props => {
       render: (clientName, record) => (
         <span
           onClick={() => showDrawer(record.id)}
-          className="text-primary cursor-pointer hover:text-[#967bbd]">
+          className="text-primary cursor-pointer hover:text-[#967bbd]"
+        >
           {clientName}
         </span>
       ),
@@ -189,7 +190,8 @@ const Client = props => {
         record.companyId !== consts.ENCRYPTION_ZERO ? (
           <span
             onClick={() => showDrawerComapny(record.companyId)}
-            className="text-primary cursor-pointer hover:text-[#967bbd]">
+            className="text-primary cursor-pointer hover:text-[#967bbd]"
+          >
             {companyName}
           </span>
         ) : (
@@ -261,7 +263,7 @@ const Client = props => {
       width: 75,
       search: false,
       ellipsis: true,
-      filterDropdown: filterDropdownProps => <FilterCascader {...filterDropdownProps} />,
+      // filterDropdown: filterDropdownProps => <FilterCascader {...filterDropdownProps} />,
       renderText: text => text?.replaceAll(' / ', ' , ')
     },
     {
@@ -295,7 +297,8 @@ const Client = props => {
             tagType={TagTypeEnum.PERSONTAG}
             tagColumn={TagDataTypeEnum.CLIENT}
             checkCallBack={refreshData}
-            modeType={LabelModeType.column}>
+            modeType={LabelModeType.column}
+          >
             <Add theme="filled" size="20" fill="#868e96" className="cursor-pointer" />
           </PersonLabel>
         </div>
@@ -332,7 +335,8 @@ const Client = props => {
             tagType={TagTypeEnum.TEAMTAG}
             tagColumn={TagDataTypeEnum.CLIENT}
             checkCallBack={refreshData}
-            modeType={LabelModeType.column}>
+            modeType={LabelModeType.column}
+          >
             <Add theme="filled" size="20" fill="#868e96" className="cursor-pointer" />
           </PersonLabel>
         </div>
@@ -440,12 +444,12 @@ const Client = props => {
     setState({ ...state, params: { ...state.params, search: value } })
   }
 
-  // const onDistrictChange = value => {
-  //   if (!value) return
-  //   tRef.current.reset()
-  //   const [province = '', city = '', area = ''] = value || []
-  //   setState({ ...state, params: { ...state.params, province, city, area } })
-  // }
+  const onDistrictChange = value => {
+    if (!value) return
+    tRef.current.reset()
+    const [province = '', city = '', area = ''] = value || []
+    setState({ ...state, params: { ...state.params, province, city, area } })
+  }
 
   // 批量设置-确认触发
   const tagsSettingConfirm = async clientIds => {
@@ -483,7 +487,8 @@ const Client = props => {
             tagType={TagTypeEnum.PERSONTAG}
             tagColumn={TagDataTypeEnum.CLIENT}
             checkCallBack={toolbarOptionsChange}
-            modeType={LabelModeType.toolbar}>
+            modeType={LabelModeType.toolbar}
+          >
             {tagState.tagIds.length ? (
               <Button>
                 {tagState.tagIds.map(item => (
@@ -508,7 +513,8 @@ const Client = props => {
             tagType={TagTypeEnum.TEAMTAG}
             tagColumn={TagDataTypeEnum.CLIENT}
             checkCallBack={toolbarOptionsChange}
-            modeType={LabelModeType.toolbar}>
+            modeType={LabelModeType.toolbar}
+          >
             {tagState.tagCooperationIds.length ? (
               <Button>
                 {tagState.tagCooperationIds.map(item => (
@@ -568,7 +574,7 @@ const Client = props => {
           search: (
             <Tooltip placement="bottom" title="输入客户、单位名称、电话邮箱等">
               <Input.Search
-                style={{ width: '300px' }}
+                style={{ width: '250px' }}
                 allowClear={true}
                 placeholder={`在${
                   permData[PermDataTypeEunm.CUSTOMER]?.find(
@@ -581,14 +587,14 @@ const Client = props => {
           ),
 
           actions: [
-            // <LazyCascader
-            //   key="lazyCascader"
-            //   onChange={onDistrictChange}
-            //   changeOnSelect={true}
-            //   bordered={false}
-            //   showFooter={true}
-            //   className="hover:bg-[rgba(0,0,0,0.1)]"
-            // />,
+            <LazyCascader
+              key="lazyCascader"
+              onChange={onDistrictChange}
+              changeOnSelect={true}
+              bordered={false}
+              showFooter={true}
+              className="hover:bg-[rgba(0,0,0,0.1)]"
+            />,
             <AddClient
               modalProps={{ zIndex: 1050 }}
               onConfirm={handleAddClient}

src/pages/Customer/Company/index.jsx

@@ -16,7 +16,7 @@ import { refactorFilterField, refactorSortField } from '@/utils/utils'
 import { PermDataTypeEunm } from './components/PermSelect'
 import BasicTable from '@/components/Table'
 import { getPermAuthCache } from '@/utils/auth'
-import FilterCascader from '@/components/Table/src/components/FilterCascader'
+// import FilterCascader from '@/components/Table/src/components/FilterCascader'
 
 const Company = props => {
   const {
@@ -135,12 +135,12 @@ const Company = props => {
     tRef.current.reload()
     setState({ ...state, params: { ...state.params, search: value } })
   }
-  // const onDistrictChange = value => {
-  //   if (!value) return
-  //   tRef.current.reset()
-  //   const [province = '', city = '', area = ''] = value
-  //   setState({ ...state, params: { ...state.params, province, city, area } })
-  // }
+  const onDistrictChange = value => {
+    if (!value) return
+    tRef.current.reset()
+    const [province = '', city = '', area = ''] = value
+    setState({ ...state, params: { ...state.params, province, city, area } })
+  }
 
   // 展示drawer
   const showDrawer = id => {
@@ -168,7 +168,8 @@ const Company = props => {
       render: (companyName, record) => (
         <span
           onClick={() => showDrawer(record.id)}
-          className="text-primary cursor-pointer hover:text-[#967bbd]">
+          className="text-primary cursor-pointer hover:text-[#967bbd]"
+        >
           {companyName}
         </span>
       )
@@ -180,7 +181,7 @@ const Company = props => {
       search: false,
       width: 100,
       ellipsis: true,
-      filterDropdown: filterDropdownProps => <FilterCascader {...filterDropdownProps} />,
+      // filterDropdown: filterDropdownProps => <FilterCascader {...filterDropdownProps} />,
       renderText: text => text?.replaceAll(' / ', ' , ')
     },
     {
@@ -214,7 +215,8 @@ const Company = props => {
             tagType={TagTypeEnum.PERSONTAG}
             tagColumn={TagDataTypeEnum.COMPANY}
             checkCallBack={refreshData}
-            modeType={LabelModeType.column}>
+            modeType={LabelModeType.column}
+          >
             <Add theme="filled" size="20" fill="#868e96" className="cursor-pointer" />
           </PersonLabel>
         </div>
@@ -245,7 +247,8 @@ const Company = props => {
             tagType={TagTypeEnum.TEAMTAG}
             tagColumn={TagDataTypeEnum.COMPANY}
             checkCallBack={refreshData}
-            modeType={LabelModeType.column}>
+            modeType={LabelModeType.column}
+          >
             <Add theme="filled" size="20" fill="#868e96" className="cursor-pointer" />
           </PersonLabel>
         </div>
@@ -403,7 +406,8 @@ const Company = props => {
             tagType={TagTypeEnum.PERSONTAG}
             tagColumn={TagDataTypeEnum.COMPANY}
             checkCallBack={toolbarOptionsChange}
-            modeType={LabelModeType.toolbar}>
+            modeType={LabelModeType.toolbar}
+          >
             {tagState.tagIds.length ? (
               <Button>
                 {tagState.tagIds.map(item => (
@@ -428,7 +432,8 @@ const Company = props => {
             tagType={TagTypeEnum.TEAMTAG}
             tagColumn={TagDataTypeEnum.COMPANY}
             checkCallBack={toolbarOptionsChange}
-            modeType={LabelModeType.toolbar}>
+            modeType={LabelModeType.toolbar}
+          >
             {tagState.tagCooperationIds.length ? (
               <Button>
                 {tagState.tagCooperationIds.map(item => (
@@ -483,7 +488,7 @@ const Company = props => {
           search: (
             <Tooltip placement="bottom" title="输入单位名称、单位性质等">
               <Input.Search
-                style={{ width: '300px' }}
+                style={{ width: '250px' }}
                 allowClear={true}
                 placeholder={`在${
                   permData[PermDataTypeEunm.CUSTOMER]?.find(
@@ -495,14 +500,14 @@ const Company = props => {
             </Tooltip>
           ),
           actions: [
-            // <LazyCascader
-            //   onChange={onDistrictChange}
-            //   changeOnSelect={true}
-            //   key="lazyCascader"
-            //   showFooter={true}
-            //   className="hover:bg-[rgba(0,0,0,0.1)]"
-            //   bordered={false}
-            // />,
+            <LazyCascader
+              onChange={onDistrictChange}
+              changeOnSelect={true}
+              key="lazyCascader"
+              showFooter={true}
+              className="hover:bg-[rgba(0,0,0,0.1)]"
+              bordered={false}
+            />,
             hasAddPerm && (
               <AddCompany
                 onConfirm={handleAddCompany}