fix

src/pages/weComTask/page/home/index.tsx

@@ -1,7 +1,7 @@
 import { useAjax } from '@/Hook/useAjax';
 import React, { useEffect, useState } from 'react';
 import { getCorpExternalUserRepeatListApi, getExternalUserRepeatByCorpAtlasApi, getExternalUserRepeatByCorpListApi, getExternalUserRepeatCorpApi, getExternalUserRepeatCorpUserApi } from '../../API/home';
-import { Avatar, Card, Col, Flex, Input, Row, Select, Space, Spin, Statistic, Table, Tabs, Tooltip, Typography } from 'antd';
+import { Avatar, Card, Checkbox, Col, Divider, Flex, Input, Row, Select, Space, Spin, Statistic, Table, Tabs, Tooltip, Typography } from 'antd';
 import { BarChartOutlined, CheckOutlined, DeleteOutlined, ExclamationOutlined, GlobalOutlined, QuestionCircleOutlined, RetweetOutlined, UserOutlined } from '@ant-design/icons';
 import useEcharts from '@/Hook/useEcharts';
 const { Title } = Typography;
@@ -14,8 +14,8 @@ const Home: React.FC = () => {
 
     /*******************************************/
     const { Bar } = useEcharts()
-    const [queryParmas, setQueryParmas] = useState<{ pageNum: number, pageSize: number, corpIdList?: string }>({ pageNum: 1, pageSize: 30 })
-    const [queryParmasZt, setQueryParmasZt] = useState<{ pageNum: number, pageSize: number, corpIdList?: string }>({ pageNum: 1, pageSize: 30 })
+    const [queryParmas, setQueryParmas] = useState<{ pageNum: number, pageSize: number, corpIdList?: string[] }>({ pageNum: 1, pageSize: 30 })
+    const [queryParmasZt, setQueryParmasZt] = useState<{ pageNum: number, pageSize: number, corpIdList?: string[] }>({ pageNum: 1, pageSize: 30 })
     const [corpRepeat, setCorpRepeat] = useState<{ [x: string]: any }>({})
     const [corpUserRepeat, setCorpUserRepeat] = useState<{ [x: string]: any }>({})
     const [barCorpData, setBarCorpData] = useState<Record<string, any>[]>([])
@@ -34,6 +34,9 @@ const Home: React.FC = () => {
         deletedUserCountRate: number
         qcUuidUserCount: number
     }>({ avgCorpRepeatUserRate: 0, repeatUserRate: 0, userCount: 0, qcUuidCount: 0, qcUuidCountRate: 0, qcUuidNullCount: 0, qcUuidNullCountRate: 0, deletedUserCount: 0, deletedUserCountRate: 0, qcUuidUserCount: 0 })
+    const [oldFiltered, setOldFiltered] = useState<{ label: string, value: string }[]>([]);
+    const [filtered, setFiltered] = useState<{ label: string, value: string }[]>([]);
+    const [filtered1, setFiltered1] = useState<{ label: string, value: string }[]>([]);
 
     const getExternalUserRepeatCorp = useAjax(() => getExternalUserRepeatCorpApi())
     const getExternalUserRepeatCorpUser = useAjax(() => getExternalUserRepeatCorpUserApi())
@@ -44,7 +47,12 @@ const Home: React.FC = () => {
     /*******************************************/
 
     useEffect(() => {
-        getCorpAllList.run({})
+        getCorpAllList.run({}).then(res => {
+            console.log('getCorpAllList', res)
+            setFiltered(res?.data?.map(item => ({ label: item.corpName, value: item.corpId })))
+            setFiltered1(res?.data?.map(item => ({ label: item.corpName, value: item.corpId })))
+            setOldFiltered(res?.data?.map(item => ({ label: item.corpName, value: item.corpId })))
+        })
     }, [])
 
     useEffect(() => {
@@ -125,6 +133,18 @@ const Home: React.FC = () => {
         })
     }, [])
 
+    const handleSearch = (val, isOne?: boolean) => {
+        const f = oldFiltered.filter((item) => {
+            const inputStr = val.replace(/[,，\s]/g, ',');
+            if (inputStr && inputStr.includes(',')) {
+                const inputList = inputStr.split(',').filter((it) => it).map(i => i.toLowerCase());
+                return inputList.includes(((item?.label ?? '') as string).toLowerCase())
+            }
+            return ((item?.label ?? '') as string).toLowerCase().includes(val.toLowerCase())
+        });
+        !isOne ? setFiltered(f) : setFiltered1(f);
+    };
+
     return <div>
         <Spin spinning={getExternalUserRepeatCorpUser.loading}>
             <Flex gap={16}>
@@ -229,15 +249,29 @@ const Home: React.FC = () => {
                 value={queryParmas?.corpIdList}
                 onChange={(e) => setQueryParmas({ ...queryParmas, corpIdList: e })}
                 showSearch
-                style={{ minWidth: 150 }}
+                style={{ minWidth: 200 }}
                 maxTagCount={1}
                 mode='multiple'
                 placeholder="选择企业"
-                filterOption={(input, option) =>
-                    ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
-                }
+                filterOption={false}
+                onSearch={handleSearch}
                 allowClear
-                options={getCorpAllList?.data?.data?.map((item: any) => ({ label: item.corpName, value: item.corpId }))}
+                options={filtered}
+                popupRender={(menu) => (
+                    <>
+                        {menu}
+                        <Divider style={{ margin: '8px 0' }} />
+                        <Space style={{ padding: '0 8px 4px' }}>
+                            <Checkbox onChange={(e) => {
+                                if (e.target.checked) {
+                                    setQueryParmas({ ...queryParmas, corpIdList: filtered.map(item => item.value) })
+                                } else {
+                                    setQueryParmas({ ...queryParmas, corpIdList: [] })
+                                }
+                            }}>全选</Checkbox>
+                        </Space>
+                    </>
+                )}
             />
         </Flex>
         <Row gutter={16}>
@@ -294,11 +328,25 @@ const Home: React.FC = () => {
                         maxTagCount={1}
                         mode='multiple'
                         placeholder="选择企业"
-                        filterOption={(input, option) =>
-                            ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
-                        }
+                        filterOption={false}
+                        onSearch={(val) => handleSearch(val, true)}
                         allowClear
-                        options={getCorpAllList?.data?.data?.map((item: any) => ({ label: item.corpName, value: item.corpId }))}
+                        options={filtered1}
+                        popupRender={(menu) => (
+                            <>
+                                {menu}
+                                <Divider style={{ margin: '8px 0' }} />
+                                <Space style={{ padding: '0 8px 4px' }}>
+                                    <Checkbox onChange={(e) => {
+                                        if (e.target.checked) {
+                                            setQueryParmasZt({ ...queryParmasZt, corpIdList: filtered1.map(item => item.value) })
+                                        } else {
+                                            setQueryParmasZt({ ...queryParmasZt, corpIdList: [] })
+                                        }
+                                    }}>全选</Checkbox>
+                                </Space>
+                            </>
+                        )}
                     />}
                 items={[
                     {
@@ -486,7 +534,7 @@ const Home: React.FC = () => {
         </Spin>
 
         {/* uuid */}
-        <UuidTem getCorpAllList={getCorpAllList}/>
+        <UuidTem getCorpAllList={oldFiltered} />
     </div>
 };
 

src/pages/weComTask/page/home/uuidTem.tsx

@@ -1,27 +1,44 @@
 import { useAjax } from "@/Hook/useAjax"
-import React, { useEffect } from "react"
+import React, { useEffect, useState } from "react"
 import { AreaChartOutlined, SearchOutlined, UserOutlined } from "@ant-design/icons"
 
 import { GetExternalUserRepeatByCorpListApiProps, getSelectQcUuidStatisticPageListApi } from "../../API/home"
-import { Avatar, Button, Card, Input, InputNumber, Select, Space, Table, Typography } from "antd";
+import { Avatar, Button, Card, Checkbox, Divider, Input, InputNumber, Select, Space, Table, Typography } from "antd";
 import SearchBox from "../../components/searchBox";
 import CorpDetails from "./corpDetails";
 import CorpUserDetails from "./corpUserDetails";
 const { Title, Text } = Typography;
 
-const UuidTem: React.FC<{ getCorpAllList: any }> = ({ getCorpAllList }) => {
+const UuidTem: React.FC<{ getCorpAllList: { label: string, value: string }[] }> = ({ getCorpAllList }) => {
 
     /*****************************************/
-    const [queryParmas, setQueryParmas] = React.useState<GetExternalUserRepeatByCorpListApiProps>({ pageNum: 1, pageSize: 20 })
-    const [queryParmasNew, setQueryParmasNew] = React.useState<GetExternalUserRepeatByCorpListApiProps>({ pageNum: 1, pageSize: 20 })
+    const [queryParmas, setQueryParmas] = useState<GetExternalUserRepeatByCorpListApiProps>({ pageNum: 1, pageSize: 20 })
+    const [queryParmasNew, setQueryParmasNew] = useState<GetExternalUserRepeatByCorpListApiProps>({ pageNum: 1, pageSize: 20 })
+    const [filtered, setFiltered] = useState<{ label: string, value: string }[]>(getCorpAllList);
 
     const getSelectQcUuidStatisticPageList = useAjax((params) => getSelectQcUuidStatisticPageListApi(params))
     /*****************************************/
 
+    useEffect(() => {
+        setFiltered(getCorpAllList);
+    }, [getCorpAllList])
+
     useEffect(() => {
         getSelectQcUuidStatisticPageList.run(queryParmas)
     }, [queryParmas])
 
+    const handleSearch = (val) => {
+        const f = getCorpAllList.filter((item) => {
+            const inputStr = val.replace(/[,，\s]/g, ',');
+            if (inputStr && inputStr.includes(',')) {
+                const inputList = inputStr.split(',').filter((it) => it).map(i => i.toLowerCase());
+                return inputList.includes(((item?.label ?? '') as string).toLowerCase())
+            }
+            return ((item?.label ?? '') as string).toLowerCase().includes(val.toLowerCase())
+        });
+        setFiltered(f);
+    };
+
     return <>
         <Title level={3}><AreaChartOutlined style={{ color: '#ff85c0' }} /> Uuid维度统计列表</Title>
         <SearchBox
@@ -45,11 +62,25 @@ const UuidTem: React.FC<{ getCorpAllList: any }> = ({ getCorpAllList }) => {
                     maxTagCount={1}
                     mode='multiple'
                     placeholder="选择企业"
-                    filterOption={(input, option) =>
-                        ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
-                    }
+                    filterOption={false}
+                    onSearch={handleSearch}
                     allowClear
-                    options={getCorpAllList?.data?.data?.map((item: any) => ({ label: item.corpName, value: item.corpId }))}
+                    options={filtered}
+                    popupRender={(menu) => (
+                        <>
+                            {menu}
+                            <Divider style={{ margin: '8px 0' }} />
+                            <Space style={{ padding: '0 8px 4px' }}>
+                                <Checkbox onChange={(e) => {
+                                    if (e.target.checked) {
+                                        setQueryParmasNew({ ...queryParmasNew, corpIdList: filtered.map(item => item.value) })
+                                    } else {
+                                        setQueryParmasNew({ ...queryParmasNew, corpIdList: [] })
+                                    }
+                                }}>全选</Checkbox>
+                            </Space>
+                        </>
+                    )}
                 />
                 {/* <Input onChange={(e) => setQueryParmasNew({ ...queryParmasNew, corpName: e.target.value })} value={queryParmasNew?.corpName} placeholder="企微名称" allowClear /> */}
                 <Input onChange={(e) => setQueryParmasNew({ ...queryParmasNew, name: e.target.value })} value={queryParmasNew?.name} placeholder="客户昵称" allowClear />

src/pages/weComTask/page/logs/index.tsx

@@ -180,6 +180,7 @@ const Logs: React.FC = () => {
                                         setEndClickDate(undefined)
                                     }
                                 }}
+                                allowClear={false}
                                 disabledDate={disabledDate}
                                 value={(weekQuery.startTime && weekQuery.endTime) ? [dayjs(weekQuery.startTime), dayjs(weekQuery.endTime)] : undefined}
                             />