canrd-main / canrd-erp-front · Files

import { postErpOrderListByPage } from '@/services';
import {
  PageContainer,
  ProTable, ProColumns
} from '@ant-design/pro-components';
import { Button, Checkbox, Flex, Space, Divider } from 'antd';
import React, {useState, Key } from 'react';
import './index.less'
import OrderDrawer from './components/OrderDrawer';

const TableList: React.FC<unknown> = () => {
  const [orderDrawerVisible, setOrderDrawerVisible] = useState<boolean>(false);
  const [expandedRowKeys, setExpandedRowKeys] = useState<Key[]>([]);
  const [selectedItems, setSelectedItems] = useState([]);
  const [orderRow,setOrderRow] = useState<[]>([]);
  const [subOrderShowText,setSubOrderShowText] = useState("订单详情");

  const onCheckboxChange = (itemKey: never) => {
    const newSelectedItems = selectedItems.includes(itemKey)
      ? selectedItems.filter((key) => key !== itemKey)
      : [...selectedItems, itemKey];

    setSelectedItems(newSelectedItems);
  };

  // 主订单内容渲染
  const MainOrderColunmRender = ({ record }) => {
    return <Flex vertical={true}>
      {/* 编号、时间、销售信息 */}
      <Flex justify='space-between' className='py-4 px-2 bg-gray-100'>
        <Checkbox onChange={() => onCheckboxChange(record.id)}
          checked={selectedItems.includes(record.id)}>
          <Flex wrap="wrap" gap="middle">
            <div>{record.createTime}</div>
            <div>订单编号：{record.id}</div>
          </Flex>
        </Checkbox>
      </Flex>
      {/* 收货、开票、备注信息 */}
      <Flex justify='space-between' className='px-2 py-4'>
        <Space split={<Divider type="vertical" align="center" />}>
          <Space.Compact direction="vertical" className='gap-2'>
            <div>
              收货信息：收货人：{record.customerName} 联系方式：{record.customerContactNumber} 单位联系人：{record.institutionContactName} 单位名称：{record.institution} 收货地址：{record.customerShippingAddress}
            </div>
            <div>开票信息：开户银行：{record.bank} 银行账号：{record.bankAccountNumber} 识别号：{record.invoiceIdentificationNumber}</div>
            <div>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：{record.notes}</div>
          </Space.Compact>
        </Space>
        {/* 总金额、操作按钮信息 */}
        <Space>
          <Space.Compact direction="vertical" align="end">
            <div>总金额：<span className='text-lg'>{record.totalPayment}￥</span></div>
            <div>
              <Button className='p-0 pe-2' type="link">确认收货</Button>
              <Button className='p-0 pe-2' type="link">发货</Button>
              <Button className='p-0 pe-2' type="link">打印</Button>
              <Button className='p-0 pe-2' type="link">开票</Button>
              <Button className='p-0 pe-2' type="link" onClick={()=>setOrderDrawerVisible(true)}>编辑</Button>
              <Button className='p-0 pe-2' type="link">审核</Button>
              <Button className='p-0' type="link">作废</Button>
            </div>
          </Space.Compact>
          <Space.Compact direction="vertical">
            <Button type="primary" onClick={() => handleExpand(record.id)} size='small'>{subOrderShowText}</Button>
          </Space.Compact>
        </Space>

      </Flex>
    </Flex>
  }
  const [data, setData] = useState([]);


  const tableListDataSource: TableListItem[] = [];

  // 主订单列表
  const mainOrdersColumns: ProColumns<TableListItem>[] = [
    {
      title: '订单列表',
      width: 120,
      dataIndex: 'name',
      search: false,
      render: (text, record) => {
        return <MainOrderColunmRender record={record} />
      }
    },
    {
      title: '订单编号',
      dataIndex: 'id',
      valueType: 'text',
      hideInTable: true
    },
    {
      title: '销售代表',
      dataIndex: 'salesCode',
      valueType: 'text',
      hideInTable: true
    },
    {
      title: '收货人',
      dataIndex: 'customerName',
      valueType: 'text',
      hideInTable: true
    },
    {
      title: '收货人联系电话',
      dataIndex: 'customerContactNumber',
      valueType: 'text',
      hideInTable: true
    },
    {
      title: '单位',
      dataIndex: 'institution',
      valueType: 'text',
      hideInTable: true
    },
    {
      title: '单位联系人',
      dataIndex: 'institutionContactName',
      valueType: 'text',
      hideInTable: true
    },
    {
      title: '收货人地址',
      dataIndex: 'customerShippingAddress',
      valueType: 'text',
      hideInTable: true
    },
    {
      title: '商品名称',
      dataIndex: 'productName',
      valueType: 'text',
      hideInTable: true
    },
    {
      title: '商品参数',
      dataIndex: 'parameters',
      valueType: 'text',
      hideInTable: true
    },
    {
      title: '订单状态',
      dataIndex: 'orderStatus',
      valueType: 'text',
      hideInTable: true
    },
    {
      title: '支付方式',
      dataIndex: 'paymentStatus',
      valueType: 'text',
      hideInTable: true
    },
    {
      title: '物流方式',
      dataIndex: 'logisticsMethod',
      valueType: 'text',
      hideInTable: true
    },
    {
      title: '支付渠道',
      dataIndex: 'paymentChannel',
      valueType: 'text',
      hideInTable: true
    },
    {
      title: '银行名称',
      dataIndex: 'bank',
      valueType: 'text',
      hideInTable: true
    },
    {
      title: '支付流水',
      dataIndex: 'paymentTransactionId',
      valueType: 'text',
      hideInTable: true
    },
    {
      title: '所属部门',
      dataIndex: 'productBelongBusiness',
      valueType: 'text',
      hideInTable: true
    },
    {
      title: '创建日期',
      dataIndex: 'createTime',
      valueType: 'dateRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          return {
            startTime: value[0],
            endTime: value[1],
          };
        },
      },
    },
    {
      title: '开票状态',
      dataIndex: 'invoicingStatus',
      valueType: 'text',
      hideInTable: true
    },
    {
      title: '开票日期',
      dataIndex: 'invoicingTime',
      valueType: 'dateRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          return {
            startTime: value[0],
            endTime: value[1],
          };
        },
      },
    }
  ];
  const handleExpand = (key: number) => {
    if(expandedRowKeys.includes(key)){
      setSubOrderShowText("订单详情");
    }else{
      setSubOrderShowText("收起订单");
    }
    const newExpandedRowKeys = expandedRowKeys.includes(key)
      ? expandedRowKeys.filter((k) => k !== key)
      : [...expandedRowKeys, key];

    setExpandedRowKeys(newExpandedRowKeys);
  };

  const expandedRowRender = (record) => {
    let subOrders = record.subOrderInformationLists;
    console.log(subOrders);
    return (
      <ProTable
        columns={[
          { title: 'ID', dataIndex: 'id', key: 'id' },
          { title: '商品编码', dataIndex: 'productCode', key: 'productCode' },
          { title: '商品名称', dataIndex: 'productName', key: 'productName' },
          { title: '商品参数', dataIndex: 'parameters', key: 'parameters' },
          { title: '商品数量', dataIndex: 'quantity', key: 'quantity' },
          { title: '子订单金额(￥)', dataIndex: 'subOrderPayment', key: 'subOrderPayment' },
          { title: '支付方式', dataIndex: 'paymentMethod', key: 'paymentMethod' },
          { title: '支付渠道', dataIndex: 'paymentChannel', key: 'paymentChannel' },
          { title: '支付流水', dataIndex: 'paymentTransactionId', key: 'paymentTransactionId' },
          { title: '物流方式', dataIndex: 'logisticsMethod', key: 'logisticsMethod' },
          { title: '物流单号', dataIndex: 'serialNumber', key: 'serialNumber' },
          { title: '开票状态', dataIndex: 'invoicingStatus', key: 'invoicingStatus' },
          { title: '订单状态', dataIndex: 'orderStatus', key: 'orderStatus' },
          {
            title: '操作',
            dataIndex: 'operation',
            key: 'operation',
            valueType: 'option',
            align: 'center',

            render: () => <Flex>
              <Button type="link" size='small' style={{ 'paddingLeft': 0, paddingRight: '4px' }}>编辑</Button>
              <Button type="link" size='small' style={{ 'paddingLeft': 0, paddingRight: '4px' }}>审核</Button>
              <Button type="link" size='small' style={{ 'paddingLeft': 0, paddingRight: '4px' }}>备注</Button>
              <Button type="link" size='small' style={{ 'paddingLeft': 0, paddingRight: 0 }}>作废</Button>
            </Flex>
          },
          {
            title: '备注',
            dataIndex: 'operation',
            key: 'operation',
            valueType: 'option',
            align: 'center',
            render: () => [<Button type="dashed" size='small'>详情</Button>],
          },
        ]}
        rowSelection={{
          // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
          // 注释该行则默认不显示下拉选项
          // selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
          defaultSelectedRowKeys: [],
        }}
        rowKey="id"
        headerTitle={false}
        search={false}
        options={false}
        dataSource={subOrders}
        pagination={false}
      />
    );
  };

  const allItemKeys = data.map(record => record.id);
  const checkAll = allItemKeys.length === selectedItems.length;
  const indeterminate = selectedItems.length > 0 && selectedItems.length < allItemKeys.length;

  return (
    <PageContainer
      header={{
        title: '订单管理',
      }}
    >
      <ProTable
        expandIconColumnIndex={-1}
        // dataSource={data}
        columns={mainOrdersColumns}
        rowKey="id"
        pagination={{
          showQuickJumper: true,
        }}
        expandedRowKeys={expandedRowKeys}
        expandable={{ expandedRowRender }}
        search={false}
        dateFormatter="string"
        options={false}
        headerTitle="订单列表"
        search={{
          labelWidth: 'auto',
        }}
        request={async (
          // 第一个参数 params 查询表单和 params 参数的结合
          // 第一个参数中一定会有 pageSize 和  current ，这两个参数是 antd 的规范
          params: T & {
            pageSize: 10;
            current: 1;
          },
          sorter,
          filter,) => {
          const { data } = await postErpOrderListByPage({
            // ...params,
            // FIXME: remove @ts-ignore
            // @ts-ignore
            sorter,
            filter,
            body: JSON.stringify(params)
          });
          console.log(data);
          return {
            data: data?.data || [],
          };
        }}
        toolBarRender={() => [
          <Button key="show">一键展开</Button>,
          <Button key="out" onClick={()=>setOrderDrawerVisible(true)}>
            新增
          </Button>,
          <Button key="primary" type="primary">
            导出
          </Button>

        ]}
      />

      {orderDrawerVisible &&
        <OrderDrawer
          data={orderRow}
          onClose={() => {
            setOrderDrawerVisible(false);
            setOrderRow({});
          }}
        />
      }
    </PageContainer>
  );
};

export default TableList;