tld_wms/packages/app/src/pages/relocation-order/table/index.tsx

import {useContextSection, useQueryTableList} from '@hooks';
import {FC} from 'react';
import {context, pageContext, searchContext} from '../content';
import {getRelocationOrderList} from '@apis';
import {ColumnsType} from 'antd/es/table';
import {RelocationOrderListData} from '@models';
import {HUGE_TABLE_WIDTH, MIDDLE_TABLE_WIDTH, NORMAL_TABLE_WIDTH, SMALL_TABLE_WIDTH} from '@utils';
import {Card} from 'antd';
import {Table} from '@components';

const columns: ColumnsType<RelocationOrderListData> = [
  {
    title: '移库单ID',
    dataIndex: 'warehouseTransferId',
    key: 'warehouseTransferId',
    width: NORMAL_TABLE_WIDTH,
  },
  {
    title: '移库单编号',
    dataIndex: 'warehouseTransferCode',
    key: 'warehouseTransferCode',
    width: NORMAL_TABLE_WIDTH,
  },
  {
    title: 'WBS编号',
    dataIndex: 'WBS',
    key: 'WBS',
    width: NORMAL_TABLE_WIDTH,
  },
  {
    title: '物料名称',
    dataIndex: 'materialName',
    key: 'materialName',
    width: HUGE_TABLE_WIDTH,
  },
  {
    title: '物料编号',
    dataIndex: 'materialCode',
    key: 'materialCode',
    width: MIDDLE_TABLE_WIDTH,
  },
  {
    title: '要货仓库',
    dataIndex: 'askGoodsWarehouseName',
    key: 'askGoodsWarehouseName',
    width: MIDDLE_TABLE_WIDTH,
  },
  {
    title: '出货仓库',
    dataIndex: 'supplyWarehouseName',
    key: 'supplyWarehouseName',
    width: MIDDLE_TABLE_WIDTH,
  },
  {
    title: '移库类型',
    dataIndex: 'warehouseTransferType',
    key: 'warehouseTransferType',
    width: NORMAL_TABLE_WIDTH,
  },
  {
    title: '移库数量',
    dataIndex: 'num',
    key: 'num',
    width: SMALL_TABLE_WIDTH,
  },
  {
    title: '出库数量',
    dataIndex: 'outNum',
    key: 'outNum',
    width: SMALL_TABLE_WIDTH,
  },
  {
    title: '状态',
    dataIndex: 'type',
    key: 'type',
    width: SMALL_TABLE_WIDTH,
    render(_, {type}) {
      return type === '1' ? '已移库' : '未移库';
    },
  },
  {
    title: '单据日期',
    dataIndex: 'documentTime',
    key: 'documentTime',
    width: NORMAL_TABLE_WIDTH,
  },
];

const TableList: FC = function () {
  const params = useContextSection(context, state => state[0]);
  const [{data, count}] = useQueryTableList({
    queryFn: getRelocationOrderList,
    params,
    pageContext,
    searchContext,
  });

  return (
    <Card className='table-wrapper'>
      <Table
        columns={columns}
        data={data}
        count={count}
        pageContext={pageContext}
        searchContext={searchContext}
      />
    </Card>
  );
};

export default TableList;