订单信息

web/pages/order/store.tsx

@@ -9,6 +9,7 @@ import {
   Table,
   Tag,
   Typography,
+  Image,
 } from 'antd';
 import type { TableProps } from 'antd';
 import XinTable from '@/components/XinTable';
@@ -84,16 +85,61 @@ const StoreOrderPage: React.FC = () => {
   const columns: XinTableColumn<IStoreOrder>[] = [
     {
       title: '订单号',
+      hideInTable: true,
       dataIndex: 'order_no',
       valueType: 'text',
+      hideInForm: true
+    },
+    {
+      title: '商品信息',
+      dataIndex: 'items',
       hideInForm: true,
-      render: (_, record) => <Text copyable={{ text: record.order_no }}>{record.order_no}</Text>,
+      hideInSearch: true,
+      width: 300,
+      render: (_, record) => {
+        return (
+          <Space orientation={'vertical'} className={'max-h-30 w-60 overflow-y-auto pr-6'}>
+            { record.items && record.items.length > 0 && record.items.map(item => (
+              <div className={'flex'}>
+                <Image src={item.image} width={40} height={40} ></Image>
+                <div className={'ml-2.5'}>
+                  <div>{item.product_name}</div>
+                  <div>{ item.price } ￥ × { item.quantity }</div>
+                </div>
+              </div>
+            ))}
+          </Space>
+        )
+      }
+    },
+    {
+      title: '基本信息',
+      dataIndex: 'order_no',
+      hideInForm: true,
+      hideInSearch: true,
+      width: 300,
+      render: (_, record) => {
+        return (
+          <Space orientation={'vertical'}>
+            <div>
+              <Text type={'secondary'}>订货门店：</Text>
+              <Tag color="blue">{record.store?.name ?? `门店#${record.store_id}`}</Tag>
+            </div>
+            <div>
+              <Text type={'secondary'}>订单号：</Text>
+              <Text copyable={{ text: record.order_no }}>{record.order_no}</Text>
+            </div>
+            <div><Text type={'secondary'}>订货时间：</Text>{record.created_at}</div>
+          </Space>
+        )
+      }
     },
     {
       title: '门店',
       dataIndex: 'store_id',
       valueType: 'select',
       hideInForm: true,
+      hideInTable: true,
       fieldProps: {
         options: stores.map((s) => ({ label: s.name, value: s.id })),
         showSearch: true,
@@ -101,53 +147,103 @@ const StoreOrderPage: React.FC = () => {
       },
       render: (_, record) => record.store?.name ?? '-',
     },
+    {
+      title: '门店信息',
+      dataIndex: 'store_id',
+      hideInForm: true,
+      hideInSearch: true,
+      width: 300,
+      render: (_, record) => (
+        <Space orientation={'vertical'}>
+          <div><Text type={'secondary'}>联系人：</Text>{ record.store?.contact ?? '-' }</div>
+          <div><Text type={'secondary'}>联系电话：</Text>{ record.store?.phone ?? '-' }</div>
+          <div><Text type={'secondary'}>门店地址：</Text>{ record.store?.address ?? '-' }</div>
+        </Space>
+      ),
+    },
     {
       title: '订货日期',
       dataIndex: 'order_date',
       valueType: 'dateRange',
       hideInForm: true,
+      hideInTable: true,
       align: 'center',
-      render: (_, record) => record.order_date,
     },
     {
-      title: '订货总量',
-      dataIndex: 'total_quantity',
+      title: '订单信息',
       hideInForm: true,
+      dataIndex: 'status',
       hideInSearch: true,
-      align: 'right',
+      width: 200,
+      render: (_, record) => (
+        <Space orientation={'vertical'}>
+          <div>
+            <Text type={'secondary'}>订货数量：</Text>
+            {record.total_quantity}
+          </div>
+          <div>
+            <Text type={'secondary'}>周转框数量：</Text>
+            {record.box_num}
+          </div>
+          <div>
+            <Text type={'secondary'}>周转托盘数量：</Text>
+            {record.tray_num}
+          </div>
+        </Space>
+      )
     },
     {
-      title: '订单金额',
-      dataIndex: 'total_amount',
+      title: '附加信息',
       hideInForm: true,
+      dataIndex: 'box_num',
       hideInSearch: true,
-      align: 'right',
-      render: (_, record) => <Text strong>¥{record.total_amount}</Text>,
+      width: 200,
+      render: (_, record) => (
+        <Space orientation={'vertical'}>
+          <div>
+            <Text type={'secondary'}>附加总金额：</Text>
+            {record.added_amount} ￥
+          </div>
+          <div>
+            <Text type={'secondary'}>商品总金额：</Text>
+            {record.product_amount} ￥
+          </div>
+          <div>
+            <Text type={'secondary'}>订单总金额：</Text>
+            {record.total_amount} ￥
+          </div>
+        </Space>
+      )
     },
     {
-      title: '状态',
+      title: '订单状态',
       dataIndex: 'status',
       valueType: 'select',
       hideInForm: true,
+      align: 'center',
       fieldProps: {
         options: Object.entries(STORE_ORDER_STATUS_MAP).map(([value, item]) => ({
           value: Number(value),
           label: item.text,
         })),
       },
-      render: (_, record) => {
-        const item = STORE_ORDER_STATUS_MAP[record.status ?? 0];
-        return <Tag color={item?.color}>{item?.text}</Tag>;
-      },
-      align: 'center',
+      render: (_, record) => (
+        <Tag color={STORE_ORDER_STATUS_MAP[record.status ?? 0]?.color}>
+          {STORE_ORDER_STATUS_MAP[record.status ?? 0]?.text}
+        </Tag>
+      )
     },
     {
-      title: '备注',
-      dataIndex: 'remark',
+      title: '采购单ID',
+      dataIndex: 'purchase_id',
+      valueType: 'digit',
+      hideInForm: true,
+    },
+    {
+      title: '账单ID',
+      dataIndex: 'statement_id',
+      valueType: 'digit',
       hideInForm: true,
-      hideInSearch: true,
-      ellipsis: true,
-      render: (_, record) => record.remark || '-',
     },
   ];