ad-manage/src/pages/launchSystemV3/monitorEWList/astraSupport‌.tsx

import { useAjax } from '@/Hook/useAjax';
import { getCorpWechatAllApi } from '@/services/adqV3/global';
import { getCorpUserDayListApi, GetCorpUserDayListProps } from '@/services/adqV3/monitorEWList';
import { Button, Card, DatePicker, Input, InputNumber, Select, Table } from 'antd';
import React, { useEffect, useState } from 'react';
import moment from 'moment';
import { CorpUserDayListTableConfig } from './tableConfig';
import GroupUserEdit from '../tencenTasset/corpWechat/csgroup/components/group/groupUserEdit';
import { POOLTYPE } from '../tencenTasset/corpWechat/csgroup/const';

/**
 * 客服号加粉数据
 * @returns 
 */
const AstraSupport: React.FC<{ localCorpCsgroupList: { label: string, value: string, type: 0 | 1 }[] }> = ({ localCorpCsgroupList }) => {

    /*******************************************/
    const [corpWechatList, setCorpWechatList] = useState<{ label: string, value: string }[]>([]);
    const [queryParamsNew, setQueryParamsNew] = useState<GetCorpUserDayListProps>({ pageNum: 1, pageSize: 20 });
    const [queryParams, setQueryParams] = useState<GetCorpUserDayListProps>({ pageNum: 1, pageSize: 20 });
    const [upDateAddFans, setUpDateAddFans] = useState<{ visible?: boolean, idList: number[] }>({ visible: false, idList: [] })

    const getCorpWechatAll = useAjax((params) => getCorpWechatAllApi(params))
    const getCorpUserDayList = useAjax((params) => getCorpUserDayListApi(params))
    /*******************************************/

    useEffect(() => {
        getCorpWechatAll.run({}).then((res) => {
            if (res && res.length > 0) {
                setCorpWechatList(res.map((item: { corpName: string; localCorpId: string; }) => ({ label: item.corpName, value: item.localCorpId })));
            }
        })
    }, [])

    useEffect(() => {
        getCorpUserDayList.run(queryParamsNew)
    }, [queryParamsNew])

    const updateLimitAddFansOfDay = (data: any) => {
        setUpDateAddFans({ visible: true, idList: [data.signId] })
    }

    return <Card
        title={<div style={{ display: 'flex', gap: 8 }}>
            <DatePicker
                value={queryParams?.day ? moment(queryParams.day) : undefined}
                onChange={(_, dateString) => {
                    setQueryParams({ ...queryParams, day: dateString, pageNum: 1 })
                }}
            />
            <Select
                showSearch
                placeholder="请选择企业"
                filterOption={(input, option) =>
                    ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                }
                style={{ minWidth: 140 }}
                allowClear
                mode='multiple'
                maxTagCount={1}
                value={queryParams?.corpIdList}
                loading={getCorpWechatAll.loading}
                onChange={(e) => {
                    setQueryParams({ ...queryParams, corpIdList: e, pageNum: 1 })
                }}
                options={corpWechatList}
            />
            <Select
                showSearch
                placeholder="请选择本地客服组"
                filterOption={(input, option) =>
                    ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                }
                style={{ width: 200 }}
                allowClear
                value={queryParams?.localCsgroupId}
                onChange={(e) => {
                    setQueryParams({ ...queryParams, localCsgroupId: e, pageNum: 1 })
                }}
                options={localCorpCsgroupList?.filter(item => item.type === 1)}
            />
            <Select
                showSearch
                placeholder="归属客服池"
                filterOption={(input, option) =>
                    ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                }
                disabled={!queryParams?.localCsgroupId}
                allowClear
                value={queryParams?.poolType}
                onChange={(e) => {
                    setQueryParams({ ...queryParams, poolType: e, pageNum: 1 })
                }}
                options={Object.keys(POOLTYPE).map((key) => ({ label: POOLTYPE[key as keyof typeof POOLTYPE], value: key }))}
            />
            <Input value={queryParams?.corpUserName} style={{ width: 140 }} placeholder='客服号名称' onChange={(e) => setQueryParams({ ...queryParams, corpUserName: e.target.value, pageNum: 1 })} allowClear />
            <InputNumber value={queryParams?.addFansMin} placeholder='新增粉丝数最小值' style={{ width: 150 }} onChange={(e) => setQueryParams({ ...queryParams, addFansMin: e, pageNum: 1 })} />
            <InputNumber value={queryParams?.addFansMax} placeholder='新增粉丝数最大值' style={{ width: 150 }} onChange={(e) => setQueryParams({ ...queryParams, addFansMax: e, pageNum: 1 })} />
            <Button type='primary' onClick={() => {
                setQueryParamsNew({ ...queryParams })
            }}>搜索</Button>
        </div>}
        headStyle={{ padding: '0 16px' }}
        bodyStyle={{ padding: 16 }}
    >
        <Table
            dataSource={getCorpUserDayList?.data?.records}
            columns={CorpUserDayListTableConfig(updateLimitAddFansOfDay)}
            size='small'
            bordered
            rowKey={'id'}
            loading={getCorpUserDayList.loading}
            scroll={{ x: 1200 }}
            pagination={{
                total: getCorpUserDayList.data?.total,
                defaultPageSize: 20,
                current: queryParamsNew.pageNum,
                pageSize: queryParamsNew.pageSize,
            }}
            onChange={(pagination, _, sorter: any) => {
                const { current, pageSize } = pagination
                const newQueryForm = JSON.parse(JSON.stringify(queryParams))
                const newQueryFormNew = JSON.parse(JSON.stringify(queryParamsNew))
                if (sorter && sorter?.order) {
                    newQueryForm['sortAsc'] = sorter?.order === 'ascend' ? true : false
                    newQueryForm['sortFiled'] = sorter?.field
                    newQueryFormNew['sortAsc'] = sorter?.order === 'ascend' ? true : false
                    newQueryFormNew['sortFiled'] = sorter?.field
                } else {
                    delete newQueryForm['sortAsc']
                    delete newQueryForm['sortFiled']
                    delete newQueryFormNew['sortAsc']
                    delete newQueryFormNew['sortFiled']
                }
                newQueryForm.pageNum = current || newQueryForm.pageNum
                newQueryForm.pageSize = pageSize || newQueryForm.pageSize
                newQueryFormNew.pageNum = current || newQueryFormNew.pageNum
                newQueryFormNew.pageSize = pageSize || newQueryFormNew.pageSize
                setQueryParamsNew({ ...newQueryFormNew })
                setQueryParams({ ...newQueryForm })
            }}
        />

        {/* 修改单日限制加粉 */}
        {upDateAddFans?.visible && <GroupUserEdit
            {...upDateAddFans}
            isUpdatePoolType={false}
            onChange={() => {
                setUpDateAddFans({ visible: false, idList: [] })
                getCorpUserDayList.refresh()
            }}
            onClose={() => {
                setUpDateAddFans({ visible: false, idList: [] })
            }}
        />}
    </Card>
};

export default React.memo(AstraSupport);