MSuMshk
50877b6ba9
All checks were successful
Build and Deploy TenantUI / build-and-deploy (push) Successful in 55s
136 lines
3.2 KiB
Vue
136 lines
3.2 KiB
Vue
<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>
|