update order items
This commit is contained in:
@@ -1,18 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
import dayjs from 'dayjs'
|
||||
import { api } from '@/utils/request'
|
||||
import {
|
||||
useOrderItemStore,
|
||||
type OrderItemDetail,
|
||||
} from '@/stores/order-item'
|
||||
import type { OrderItemRecord } from '@/stores/order'
|
||||
import { useOrderItemStore, type OrderItemRecord } from '@/stores/order-item'
|
||||
import type { OrderItemDetail } from '@/types/api'
|
||||
import CascadeFilter from '@/components/CascadeFilter.vue'
|
||||
import {
|
||||
SearchOutlined,
|
||||
ReloadOutlined,
|
||||
EyeOutlined,
|
||||
CopyOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
|
||||
const router = useRouter()
|
||||
const store = useOrderItemStore()
|
||||
|
||||
// Detail drawer
|
||||
@@ -21,23 +20,6 @@ const drawerLoading = ref(false)
|
||||
const itemDetail = ref<OrderItemDetail | null>(null)
|
||||
let detailRequestId = 0
|
||||
|
||||
const columns = [
|
||||
{ title: 'ID', dataIndex: 'id', width: 80, fixed: 'left' as const },
|
||||
{ title: '公司', key: 'company', width: 100 },
|
||||
{ title: '平台', key: 'platform', width: 100 },
|
||||
{ title: '店铺', key: 'store', width: 120 },
|
||||
{ title: '平台订单ID', key: 'platform_order_id', width: 160, ellipsis: true },
|
||||
{ title: '子订单ID', dataIndex: 'sub_order_id', width: 140 },
|
||||
{ title: '平台商品ID', key: 'platform_product_id', width: 140, ellipsis: true },
|
||||
{ title: 'SKU', dataIndex: 'product_sku', width: 120 },
|
||||
{ title: '单价', key: 'unit_price', width: 100 },
|
||||
{ title: '数量', dataIndex: 'quantity', width: 80 },
|
||||
{ title: '优惠', key: 'discount', width: 100 },
|
||||
{ title: '小计', key: 'total', width: 100 },
|
||||
{ title: '创建时间', key: 'created_date', width: 140 },
|
||||
{ title: '操作', key: 'action', width: 100, fixed: 'right' as const },
|
||||
]
|
||||
|
||||
const orderStatusMap: Record<number, { text: string; color: string }> = {
|
||||
1: { text: '待付款', color: 'orange' },
|
||||
2: { text: '支付失败', color: 'red' },
|
||||
@@ -50,6 +32,23 @@ const orderStatusMap: Record<number, { text: string; color: string }> = {
|
||||
9: { text: '发货前取消', color: 'default' },
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{ title: 'ID', dataIndex: 'id', width: 80, fixed: 'left' as const },
|
||||
{ title: '公司', key: 'company', width: 100 },
|
||||
{ title: '平台', key: 'platform', width: 100 },
|
||||
{ title: '店铺', key: 'store', width: 120 },
|
||||
{ title: '平台订单ID', key: 'platform_order_id', width: 160, ellipsis: true },
|
||||
{ title: '子订单ID', key: 'sub_order_id', width: 140, ellipsis: true },
|
||||
{ title: '平台商品ID', key: 'platform_product_id', width: 140, ellipsis: true },
|
||||
{ title: 'SKU', key: 'product_sku', width: 120, ellipsis: true },
|
||||
{ title: '单价', key: 'unit_price', width: 100 },
|
||||
{ title: '数量', dataIndex: 'quantity', width: 80 },
|
||||
{ title: '优惠', key: 'discount', width: 100 },
|
||||
{ title: '小计', key: 'total', width: 100 },
|
||||
{ title: '创建时间', key: 'created_date', width: 140 },
|
||||
{ title: '操作', key: 'action', width: 100, fixed: 'right' as const },
|
||||
]
|
||||
|
||||
// RangePicker dayjs 桥接
|
||||
const createdDateRange = computed({
|
||||
get: () => {
|
||||
@@ -97,6 +96,19 @@ function formatTime(time: string | null) {
|
||||
return time.replace('T', ' ').substring(0, 16)
|
||||
}
|
||||
|
||||
async function handleCopyOrderId(platformOrderId: string) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(platformOrderId)
|
||||
message.success('已复制平台订单ID')
|
||||
} catch {
|
||||
message.error('复制失败')
|
||||
}
|
||||
}
|
||||
|
||||
function handleGoToOrder(platformOrderId: string) {
|
||||
router.push({ path: '/orders', query: { platform_order_id: platformOrderId } })
|
||||
}
|
||||
|
||||
async function handleViewDetail(record: { id: number }) {
|
||||
const currentRequestId = ++detailRequestId
|
||||
drawerVisible.value = true
|
||||
@@ -121,7 +133,7 @@ async function handleViewDetail(record: { id: number }) {
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold mb-4">订单子项</h2>
|
||||
<h2 class="text-xl font-semibold mb-4">订单项管理</h2>
|
||||
|
||||
<!-- Filter area -->
|
||||
<a-card class="mb-4">
|
||||
@@ -181,7 +193,7 @@ async function handleViewDetail(record: { id: number }) {
|
||||
:data-source="store.orderItems"
|
||||
:loading="store.loading"
|
||||
:pagination="false"
|
||||
:scroll="{ x: 1500 }"
|
||||
:scroll="{ x: 1680 }"
|
||||
row-key="id"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
@@ -195,11 +207,26 @@ async function handleViewDetail(record: { id: number }) {
|
||||
{{ store.storeMap.get(record.store_id) || record.store_id }}
|
||||
</template>
|
||||
<template v-else-if="column.key === 'platform_order_id'">
|
||||
{{ record.platform_order_id }}
|
||||
<a
|
||||
class="text-blue-500 cursor-pointer"
|
||||
@click="handleGoToOrder(record.platform_order_id)"
|
||||
>
|
||||
{{ record.platform_order_id }}
|
||||
</a>
|
||||
<CopyOutlined
|
||||
class="ml-1 cursor-pointer text-gray-400 hover:text-blue-500"
|
||||
@click.stop="handleCopyOrderId(record.platform_order_id)"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'sub_order_id'">
|
||||
{{ record.sub_order_id || '-' }}
|
||||
</template>
|
||||
<template v-else-if="column.key === 'platform_product_id'">
|
||||
{{ record.platform_product_id }}
|
||||
</template>
|
||||
<template v-else-if="column.key === 'product_sku'">
|
||||
{{ record.product_sku || '-' }}
|
||||
</template>
|
||||
<template v-else-if="column.key === 'unit_price'">
|
||||
{{ formatAmount(record.unit_price) }}
|
||||
</template>
|
||||
@@ -247,66 +274,16 @@ async function handleViewDetail(record: { id: number }) {
|
||||
>
|
||||
<a-spin :spinning="drawerLoading">
|
||||
<template v-if="itemDetail">
|
||||
<!-- 父订单摘要 -->
|
||||
<a-descriptions title="父订单摘要" :column="2" bordered class="mb-4">
|
||||
<a-descriptions-item label="平台订单ID">
|
||||
{{ itemDetail.parent_order.platform_order_id }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="订单状态">
|
||||
<a-tag
|
||||
:color="orderStatusMap[itemDetail.parent_order.order_status_id]?.color || 'default'"
|
||||
>
|
||||
{{
|
||||
orderStatusMap[itemDetail.parent_order.order_status_id]?.text
|
||||
|| `状态 ${itemDetail.parent_order.order_status_id}`
|
||||
}}
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="总金额">
|
||||
{{ formatAmount(itemDetail.parent_order.total_amount) }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="实付金额">
|
||||
{{ formatAmount(itemDetail.parent_order.total_paid) }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="创建时间">
|
||||
{{ formatTime(itemDetail.parent_order.created_date) }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="支付时间">
|
||||
{{ formatTime(itemDetail.parent_order.paid_date) }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
|
||||
<!-- 订单项基本信息 -->
|
||||
<!-- 订单项信息 -->
|
||||
<a-descriptions title="订单项信息" :column="2" bordered class="mb-4">
|
||||
<a-descriptions-item label="ID">{{ itemDetail.id }}</a-descriptions-item>
|
||||
<a-descriptions-item label="公司">
|
||||
{{ store.companyMap.get(itemDetail.company_id) || itemDetail.company_id }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="平台">
|
||||
{{ store.platformMap.get(itemDetail.platform_id) || itemDetail.platform_id }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="店铺">
|
||||
{{ store.storeMap.get(itemDetail.store_id) || itemDetail.store_id }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="平台订单ID">
|
||||
{{ itemDetail.platform_order_id }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="子订单ID">
|
||||
{{ itemDetail.sub_order_id || '-' }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="子订单类型">
|
||||
{{ itemDetail.sub_order_type_id }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="平台商品ID">
|
||||
{{ itemDetail.platform_product_id }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="商品ID">
|
||||
{{ itemDetail.product_id }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="SKU">
|
||||
{{ itemDetail.product_sku || '-' }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="条码">
|
||||
<a-descriptions-item label="条形码">
|
||||
{{ itemDetail.product_barcode || '-' }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="单价">
|
||||
@@ -321,12 +298,58 @@ async function handleViewDetail(record: { id: number }) {
|
||||
<a-descriptions-item label="小计">
|
||||
{{ formatAmount(itemDetail.total) }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="子订单ID">
|
||||
{{ itemDetail.sub_order_id || '-' }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="创建时间">
|
||||
{{ formatTime(itemDetail.created_date) }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="更新时间">
|
||||
{{ formatTime(itemDetail.updated_at) }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
|
||||
<!-- 所属订单 -->
|
||||
<a-descriptions title="所属订单" :column="2" bordered class="mb-4">
|
||||
<template v-if="itemDetail.parent_order">
|
||||
<a-descriptions-item label="平台订单ID" :span="2">
|
||||
<a
|
||||
class="text-blue-500 cursor-pointer"
|
||||
@click="handleGoToOrder(itemDetail.parent_order.platform_order_id)"
|
||||
>
|
||||
{{ itemDetail.parent_order.platform_order_id }}
|
||||
</a>
|
||||
<CopyOutlined
|
||||
class="ml-2 cursor-pointer text-blue-500"
|
||||
@click="handleCopyOrderId(itemDetail.parent_order.platform_order_id)"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="订单状态">
|
||||
<a-tag
|
||||
:color="orderStatusMap[itemDetail.parent_order.order_status_id]?.color
|
||||
|| 'default'"
|
||||
>
|
||||
{{
|
||||
orderStatusMap[itemDetail.parent_order.order_status_id]?.text
|
||||
|| `状态 ${itemDetail.parent_order.order_status_id}`
|
||||
}}
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="订单金额">
|
||||
{{ formatAmount(itemDetail.parent_order.total_amount) }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="已支付">
|
||||
{{ formatAmount(itemDetail.parent_order.total_paid) }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="创建时间">
|
||||
{{ formatTime(itemDetail.parent_order.created_date) }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="付款时间">
|
||||
{{ formatTime(itemDetail.parent_order.paid_date) }}
|
||||
</a-descriptions-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-descriptions-item :span="2">
|
||||
<span class="text-gray-400">无关联订单</span>
|
||||
</a-descriptions-item>
|
||||
</template>
|
||||
</a-descriptions>
|
||||
|
||||
<!-- ext JSON -->
|
||||
|
||||
Reference in New Issue
Block a user