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, Select, Table } from 'antd';
import React, { useEffect, useState } from 'react';
import moment from 'moment';
import { CorpUserDayListTableConfig } from './tableConfig';

/**
 * 客服号加粉数据
 * @returns 
 */
const AstraSupport: React.FC = () => {

    /*******************************************/
    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 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])

    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={{ width: 140 }}
                allowClear
                value={queryParams?.corpId}
                loading={getCorpWechatAll.loading}
                onChange={(e) => {
                    setQueryParams({ ...queryParams, corpId: e, pageNum: 1 })
                }}
                options={corpWechatList}
            />
            <Input value={queryParams?.corpUserName} style={{ width: 140 }} placeholder='客服号名称' onChange={(e) => setQueryParams({ ...queryParams, corpUserName: e.target.value, pageNum: 1 })} allowClear />
            <Button type='primary' onClick={() => {
                setQueryParamsNew({ ...queryParams })
            }}>搜索</Button>
        </div>}
        headStyle={{ padding: '0 16px' }}
        bodyStyle={{ padding: 16 }}
    >
        <Table
            dataSource={getCorpUserDayList?.data?.records}
            columns={CorpUserDayListTableConfig()}
            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 })
            }}
        />
    </Card>
};

export default React.memo(AstraSupport);