feat(project): implement all-orders page with modular structure

apps/web-antd/src/views/order/all/components/OrderTableCard.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import type { TablePaginationConfig, TableProps } from 'ant-design-vue';
+
+import type { OrderAllListItemDto } from '#/api/order';
+
+import { h } from 'vue';
+
+import { Button, Table, Tag } from 'ant-design-vue';
+
+import { formatCurrency } from '../composables/order-all-page/helpers';
+
+interface PaginationState {
+  page: number;
+  pageSize: number;
+  total: number;
+}
+
+interface Props {
+  loading: boolean;
+  pagination: PaginationState;
+  rows: OrderAllListItemDto[];
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'detail', orderNo: string): void;
+  (event: 'pageChange', page: number, pageSize: number): void;
+}>();
+
+function resolveChannelTagColor(channel: string) {
+  if (channel.includes('外卖')) return 'blue';
+  if (channel.includes('自提')) return 'green';
+  if (channel.includes('堂食')) return 'orange';
+  return 'default';
+}
+
+function resolveStatusTagColor(status: string) {
+  if (status.includes('退款')) return 'red';
+  if (status.includes('取消')) return 'default';
+  if (status.includes('完成')) return 'success';
+  if (status.includes('接单') || status.includes('取餐')) return 'orange';
+  if (status.includes('制作') || status.includes('配送')) return 'processing';
+  return 'default';
+}
+
+const columns: TableProps['columns'] = [
+  {
+    title: '订单号',
+    dataIndex: 'orderNo',
+    width: 170,
+  },
+  {
+    title: '下单时间',
+    dataIndex: 'orderedAt',
+    width: 180,
+  },
+  {
+    title: '渠道',
+    dataIndex: 'channel',
+    width: 100,
+    customRender: ({ text }) =>
+      h(Tag, { color: resolveChannelTagColor(String(text ?? '')) }, () =>
+        String(text ?? '--'),
+      ),
+  },
+  {
+    title: '顾客',
+    dataIndex: 'customer',
+    width: 100,
+  },
+  {
+    title: '商品',
+    dataIndex: 'itemsSummary',
+    ellipsis: true,
+  },
+  {
+    title: '金额',
+    dataIndex: 'amount',
+    width: 120,
+    customRender: ({ text }) => formatCurrency(Number(text || 0)),
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 110,
+    customRender: ({ text }) =>
+      h(Tag, { color: resolveStatusTagColor(String(text ?? '')) }, () =>
+        String(text ?? '--'),
+      ),
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 90,
+    customRender: ({ record }) =>
+      h(
+        Button,
+        {
+          type: 'link',
+          onClick: () => emit('detail', String(record.orderNo ?? '')),
+        },
+        () => '详情',
+      ),
+  },
+];
+
+function handleTableChange(next: TablePaginationConfig) {
+  emit('pageChange', Number(next.current || 1), Number(next.pageSize || 10));
+}
+
+function resolveRowClassName(record: OrderAllListItemDto) {
+  return record.isDimmed ? 'oa-row-dim' : '';
+}
+</script>
+
+<template>
+  <div class="oa-table-card">
+    <Table
+      row-key="orderNo"
+      :columns="columns"
+      :data-source="props.rows"
+      :loading="props.loading"
+      :pagination="{
+        current: props.pagination.page,
+        pageSize: props.pagination.pageSize,
+        total: props.pagination.total,
+        showSizeChanger: true,
+        showTotal: (total: number) => `共 ${total} 条`,
+      }"
+      :row-class-name="resolveRowClassName"
+      @change="handleTableChange"
+    />
+  </div>
+</template>