feat: 拆包

wsj

3 days ago d26274d89d377067c1e2648192cffbf89464b361

 src/pages/customers/list/index.tsx

@@ -1,20 +1,46 @@
import { useMemo } from 'react';
import { useCallback, useMemo, useState } from 'react';
import { ProTable } from '@ant-design/pro-components';
import { customerColumns } from './columns';
import { getCustomerList } from './server';
import { createCustomerColumns } from './columns';
import CustomerDetailDrawer from './components/CustomerDetailDrawer';
import FollowUpRecordsDrawer from './components/FollowUpRecordsDrawer';
import { getCustomerList } from './service';
import type { CustomerListQuery, CustomerVO } from './types';

const CustomerList = () => {
  const columns = useMemo(() => customerColumns, []);
  const [detailId, setDetailId] = useState<number | null>(null);
  const [followUpCustomer, setFollowUpCustomer] = useState<{ id: number; name: string } | null>(
    null,
  );

  const openDetail = useCallback((record: CustomerVO) => {
    setDetailId(record.id);
  }, []);

  const openFollowUps = useCallback((record: CustomerVO) => {
    setFollowUpCustomer({ id: record.id, name: record.name });
  }, []);

  const closeDetail = useCallback(() => {
    setDetailId(null);
  }, []);

  const closeFollowUps = useCallback(() => {
    setFollowUpCustomer(null);
  }, []);

  const columns = useMemo(
    () => createCustomerColumns({ onDetail: openDetail, onFollowUp: openFollowUps }),
    [openDetail, openFollowUps],
  );

  return (
    <div className="customer-list-page">
      <ProTable<CustomerVO, CustomerListQuery>
        rowKey="id"
        columns={columns}
        cardProps={{ className: 'table-card' }}
        cardProps={{ bodyStyle: { padding: 20 } }}
        search={{ labelWidth: 'auto', defaultCollapsed: false }}
        scroll={{ x: 1510 }}
        scroll={{ x: 1660 }}
        options={false}
        pagination={{
          defaultPageSize: 10,
@@ -36,6 +62,14 @@
          };
        }}
      />

      <CustomerDetailDrawer open={detailId !== null} customerId={detailId} onClose={closeDetail} />

      <FollowUpRecordsDrawer
        open={followUpCustomer !== null}
        customer={followUpCustomer}
        onClose={closeFollowUps}
      />
    </div>
  );
};