feat(shopOrder): 添加订单商品明细展开功能并优化订单状态显示
- 在订单列表中增加商品明细的展开/收起功能,默认显示2条商品信息 - 支持点击“展开全部 N 件”切换显示全部或折叠商品明细 - 优化订单状态栏支付状态、发货状态、开票状态及操作按钮中的分隔线统一风格 - 将shop/dashboard运行天数改为基于租户创建时间,而非订阅生效时间,保证准确性 - 调整订单列表表格列宽及显示顺序,改善界面布局和信息展示 - 注释和代码格式微调,删除无用的组件显示及注释代码,提升代码整洁度 - 修复了部分变量定义和模板标签排版,完善代码可维护性
This commit is contained in:
@@ -14,68 +14,66 @@
|
||||
<!-- <span>批量删除</span>-->
|
||||
<!-- </a-button>-->
|
||||
<a-input-search
|
||||
allow-clear
|
||||
v-model:value="where.orderNo"
|
||||
placeholder="订单编号"
|
||||
style="width: 260px"
|
||||
@search="reload"
|
||||
@pressEnter="reload"
|
||||
allow-clear
|
||||
v-model:value="where.orderNo"
|
||||
placeholder="订单编号"
|
||||
style="width: 240px"
|
||||
@search="reload"
|
||||
@pressEnter="reload"
|
||||
/>
|
||||
<!-- <a-select-->
|
||||
<!-- v-model:value="where.type"-->
|
||||
<!-- style="width: 150px"-->
|
||||
<!-- placeholder="订单类型"-->
|
||||
<!-- @change="search"-->
|
||||
<!-- >-->
|
||||
<!-- <a-select-option value="">全部</a-select-option>-->
|
||||
<!-- <a-select-option :value="1">普通订单</a-select-option>-->
|
||||
<!-- <a-select-option :value="2">秒杀订单</a-select-option>-->
|
||||
<!-- <a-select-option :value="3">拼团订单</a-select-option>-->
|
||||
<!-- </a-select>-->
|
||||
<!-- <a-select-->
|
||||
<!-- v-model:value="where.payStatus"-->
|
||||
<!-- style="width: 150px"-->
|
||||
<!-- placeholder="付款状态"-->
|
||||
<!-- @change="search"-->
|
||||
<!-- >-->
|
||||
<!-- <a-select-option value="">全部</a-select-option>-->
|
||||
<!-- <a-select-option :value="1">已付款</a-select-option>-->
|
||||
<!-- <a-select-option :value="0">未付款</a-select-option>-->
|
||||
<!-- </a-select>-->
|
||||
<!-- <a-select-->
|
||||
<!-- v-model:value="where.type"-->
|
||||
<!-- style="width: 150px"-->
|
||||
<!-- placeholder="订单类型"-->
|
||||
<!-- @change="search"-->
|
||||
<!-- >-->
|
||||
<!-- <a-select-option value="">全部</a-select-option>-->
|
||||
<!-- <a-select-option :value="1">普通订单</a-select-option>-->
|
||||
<!-- <a-select-option :value="2">秒杀订单</a-select-option>-->
|
||||
<!-- <a-select-option :value="3">拼团订单</a-select-option>-->
|
||||
<!-- </a-select>-->
|
||||
<a-select
|
||||
v-model:value="where.orderStatus"
|
||||
style="width: 150px"
|
||||
placeholder="订单状态"
|
||||
@change="search"
|
||||
v-model:value="where.payStatus"
|
||||
style="width: 150px"
|
||||
placeholder="付款状态"
|
||||
@change="search"
|
||||
>
|
||||
<a-select-option value="">全部</a-select-option>
|
||||
<a-select-option :value="1">已完成</a-select-option>
|
||||
<!-- <a-select-option :value="0">未完成</a-select-option>-->
|
||||
<!-- <a-select-option :value="2">未使用</a-select-option>-->
|
||||
<a-select-option :value="3">已取消</a-select-option>
|
||||
<a-select-option :value="4">退款中</a-select-option>
|
||||
<a-select-option :value="5">退款被拒</a-select-option>
|
||||
<a-select-option :value="6">退款成功</a-select-option>
|
||||
<a-select-option :value="1">已付款</a-select-option>
|
||||
<a-select-option :value="0">未付款</a-select-option>
|
||||
</a-select>
|
||||
<!-- <a-select-->
|
||||
<!-- :options="getPayType()"-->
|
||||
<!-- v-model:value="where.payType"-->
|
||||
<!-- style="width: 150px"-->
|
||||
<!-- placeholder="付款方式"-->
|
||||
<!-- @change="search"-->
|
||||
<!-- />-->
|
||||
<!-- <a-select-->
|
||||
<!-- v-model:value="where.orderStatus"-->
|
||||
<!-- style="width: 150px"-->
|
||||
<!-- placeholder="订单状态"-->
|
||||
<!-- @change="search"-->
|
||||
<!-- >-->
|
||||
<!-- <a-select-option value="">全部</a-select-option>-->
|
||||
<!-- <a-select-option :value="1">已完成</a-select-option>-->
|
||||
<!-- <a-select-option :value="3">已取消</a-select-option>-->
|
||||
<!-- <a-select-option :value="4">退款中</a-select-option>-->
|
||||
<!-- <a-select-option :value="5">退款被拒</a-select-option>-->
|
||||
<!-- <a-select-option :value="6">退款成功</a-select-option>-->
|
||||
<!-- </a-select>-->
|
||||
<a-select
|
||||
:options="getPayType()"
|
||||
v-model:value="where.payType"
|
||||
style="width: 150px"
|
||||
placeholder="付款方式"
|
||||
@change="search"
|
||||
/>
|
||||
|
||||
<a-range-picker
|
||||
v-model:value="dateRange"
|
||||
@change="search"
|
||||
value-format="YYYY-MM-DD"
|
||||
v-model:value="dateRange"
|
||||
@change="search"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
:placeholder="getSearchPlaceholder()"
|
||||
style="width: 320px"
|
||||
v-model:value="where.keywords"
|
||||
@search="reload"
|
||||
allow-clear
|
||||
:placeholder="getSearchPlaceholder()"
|
||||
style="width: 320px"
|
||||
v-model:value="where.keywords"
|
||||
@search="reload"
|
||||
>
|
||||
<template #addonBefore>
|
||||
<a-select v-model:value="type" style="width: 88px" @change="onType">
|
||||
@@ -102,13 +100,13 @@ import {listShopOrderGoods} from '@/api/shop/shopOrderGoods';
|
||||
import {getPayType} from '@/utils/shop';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的订单
|
||||
selection?: ShopOrder[];
|
||||
// 当前列表标签对应的筛选状态(如待发货=1),导出时一并带入
|
||||
statusFilter?: number;
|
||||
}>(),
|
||||
{}
|
||||
defineProps<{
|
||||
// 选中的订单
|
||||
selection?: ShopOrder[];
|
||||
// 当前列表标签对应的筛选状态(如待发货=1),导出时一并带入
|
||||
statusFilter?: number;
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -223,11 +221,11 @@ const getDeliveryStatusLabel = (s?: number) => {
|
||||
const getGoodsSummary = (goods?: any[]) => {
|
||||
if (!goods || !goods.length) return '';
|
||||
return goods
|
||||
.map((g) => {
|
||||
const spec = g.spec ? `(${g.spec})` : '';
|
||||
return `${g.goodsName || '未知商品'}${spec} x${g.totalNum || 1}`;
|
||||
})
|
||||
.join(';');
|
||||
.map((g) => {
|
||||
const spec = g.spec ? `(${g.spec})` : '';
|
||||
return `${g.goodsName || '未知商品'}${spec} x${g.totalNum || 1}`;
|
||||
})
|
||||
.join(';');
|
||||
};
|
||||
|
||||
// 商品总数量:基于实际取到的商品明细求和(订单级 totalNum 列表接口可能不返回,以明细为准)
|
||||
@@ -265,87 +263,87 @@ const handleExport = async () => {
|
||||
]
|
||||
];
|
||||
|
||||
await listShopOrder({ ...where, statusFilter: props.statusFilter })
|
||||
.then(async (list) => {
|
||||
orders.value = list;
|
||||
// 列表接口不返回 orderGoods,按订单逐个补齐商品明细(含名称/规格/数量)
|
||||
const goodsList = await Promise.all(
|
||||
(list ?? []).map((d) =>
|
||||
d.orderId
|
||||
? listShopOrderGoods({ orderId: d.orderId }).catch(() => [])
|
||||
: Promise.resolve([])
|
||||
)
|
||||
);
|
||||
list?.forEach((d: ShopOrder, idx: number) => {
|
||||
array.push([
|
||||
`${d.orderNo || ''}`,
|
||||
`${d.realName || ''}`,
|
||||
`${d.phone || d.mobile || ''}`,
|
||||
`${d.address || ''}`,
|
||||
`${getDeliveryTypeLabel(d.deliveryType)}`,
|
||||
`${getGoodsSummary(goodsList[idx])}`,
|
||||
`${getGoodsTotalNum(goodsList[idx])}`,
|
||||
`${d.payPrice || ''}`,
|
||||
`${
|
||||
d.sendStartTime && d.sendEndTime
|
||||
? `${d.sendStartTime} - ${d.sendEndTime}`
|
||||
: ''
|
||||
}`,
|
||||
`${d.selfTakeCode || ''}`,
|
||||
`${getShopName(d)}`,
|
||||
`${d.buyerRemarks || ''}`,
|
||||
`${getPayType(d.payType)}`,
|
||||
`${getDeliveryStatusLabel(d.deliveryStatus)}`,
|
||||
`${d.createTime || ''}`
|
||||
]);
|
||||
});
|
||||
const sheetName = `订单数据`;
|
||||
const workbook = {
|
||||
SheetNames: [sheetName],
|
||||
Sheets: {}
|
||||
};
|
||||
const sheet = utils.aoa_to_sheet(array);
|
||||
workbook.Sheets[sheetName] = sheet;
|
||||
// 设置列宽(与上方表头一一对应)
|
||||
sheet['!cols'] = [
|
||||
{wch: 22}, // 订单编号
|
||||
{wch: 12}, // 收货人
|
||||
{wch: 16}, // 联系电话
|
||||
{wch: 40}, // 收货地址
|
||||
{wch: 14}, // 配送方式
|
||||
{wch: 40}, // 商品明细
|
||||
{wch: 12}, // 商品总数量
|
||||
{wch: 12}, // 实付金额(元)
|
||||
{wch: 28}, // 配送时间
|
||||
{wch: 12}, // 自提码
|
||||
{wch: 20}, // 发货/自提店铺
|
||||
{wch: 30}, // 买家备注
|
||||
{wch: 12}, // 支付方式
|
||||
{wch: 10}, // 发货状态
|
||||
{wch: 20} // 下单时间
|
||||
];
|
||||
message.loading('正在导出...');
|
||||
setTimeout(() => {
|
||||
writeFile(
|
||||
workbook,
|
||||
`${
|
||||
where.createTimeEnd ? xlsFileName.value + '_' : ''
|
||||
}${sheetName}.xlsx`
|
||||
await listShopOrder({...where, statusFilter: props.statusFilter})
|
||||
.then(async (list) => {
|
||||
orders.value = list;
|
||||
// 列表接口不返回 orderGoods,按订单逐个补齐商品明细(含名称/规格/数量)
|
||||
const goodsList = await Promise.all(
|
||||
(list ?? []).map((d) =>
|
||||
d.orderId
|
||||
? listShopOrderGoods({orderId: d.orderId}).catch(() => [])
|
||||
: Promise.resolve([])
|
||||
)
|
||||
);
|
||||
list?.forEach((d: ShopOrder, idx: number) => {
|
||||
array.push([
|
||||
`${d.orderNo || ''}`,
|
||||
`${d.realName || ''}`,
|
||||
`${d.phone || d.mobile || ''}`,
|
||||
`${d.address || ''}`,
|
||||
`${getDeliveryTypeLabel(d.deliveryType)}`,
|
||||
`${getGoodsSummary(goodsList[idx])}`,
|
||||
`${getGoodsTotalNum(goodsList[idx])}`,
|
||||
`${d.payPrice || ''}`,
|
||||
`${
|
||||
d.sendStartTime && d.sendEndTime
|
||||
? `${d.sendStartTime} - ${d.sendEndTime}`
|
||||
: ''
|
||||
}`,
|
||||
`${d.selfTakeCode || ''}`,
|
||||
`${getShopName(d)}`,
|
||||
`${d.buyerRemarks || ''}`,
|
||||
`${getPayType(d.payType)}`,
|
||||
`${getDeliveryStatusLabel(d.deliveryStatus)}`,
|
||||
`${d.createTime || ''}`
|
||||
]);
|
||||
});
|
||||
const sheetName = `订单数据`;
|
||||
const workbook = {
|
||||
SheetNames: [sheetName],
|
||||
Sheets: {}
|
||||
};
|
||||
const sheet = utils.aoa_to_sheet(array);
|
||||
workbook.Sheets[sheetName] = sheet;
|
||||
// 设置列宽(与上方表头一一对应)
|
||||
sheet['!cols'] = [
|
||||
{wch: 22}, // 订单编号
|
||||
{wch: 12}, // 收货人
|
||||
{wch: 16}, // 联系电话
|
||||
{wch: 40}, // 收货地址
|
||||
{wch: 14}, // 配送方式
|
||||
{wch: 40}, // 商品明细
|
||||
{wch: 12}, // 商品总数量
|
||||
{wch: 12}, // 实付金额(元)
|
||||
{wch: 28}, // 配送时间
|
||||
{wch: 12}, // 自提码
|
||||
{wch: 20}, // 发货/自提店铺
|
||||
{wch: 30}, // 买家备注
|
||||
{wch: 12}, // 支付方式
|
||||
{wch: 10}, // 发货状态
|
||||
{wch: 20} // 下单时间
|
||||
];
|
||||
message.loading('正在导出...');
|
||||
setTimeout(() => {
|
||||
writeFile(
|
||||
workbook,
|
||||
`${
|
||||
where.createTimeEnd ? xlsFileName.value + '_' : ''
|
||||
}${sheetName}.xlsx`
|
||||
);
|
||||
loading.value = false;
|
||||
}, 1000);
|
||||
})
|
||||
.catch((msg) => {
|
||||
message.error(msg);
|
||||
loading.value = false;
|
||||
}, 1000);
|
||||
})
|
||||
.catch((msg) => {
|
||||
message.error(msg);
|
||||
loading.value = false;
|
||||
})
|
||||
.finally(() => {
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {
|
||||
}
|
||||
() => props.selection,
|
||||
() => {
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user