james/vmall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip(freight): migration 0017 + model/column-list groundwork for add-freight-templates

Browse Source
This commit is contained in:
Chengdong Zhang
2026-09-23 17:39:45 +08:00
parent a83e857bdf
commit 5b426486ac
105 changed files with 6193 additions and 1566 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/shop-admin/pages/orders/[id].vue
+93 -26
View File
@@ -30,7 +30,6 @@ function shipmentStatusClass(value: Shipment["status"]): "green" | "blue" | "ora
return value === "delivered" ? "green" : value === "shipped" ? "blue" : "orange";
}
function formatDate(value: string): string {
return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
}
@@ -74,11 +73,12 @@ async function loadOrder(): Promise<void> {
loadedOrder.items.forEach((item) => {
nextQuantities[item.id] = Math.max(
0,
item.qty - loadedShipments
.filter((shipment) => shipment.order_id === orderId.value)
.flatMap((shipment) => shipment.items)
.filter((shipmentItem) => shipmentItem.order_item_id === item.id)
.reduce((total, shipmentItem) => total + shipmentItem.qty, 0),
item.qty -
loadedShipments
.filter((shipment) => shipment.order_id === orderId.value)
.flatMap((shipment) => shipment.items)
.filter((shipmentItem) => shipmentItem.order_item_id === item.id)
.reduce((total, shipmentItem) => total + shipmentItem.qty, 0),
);
});
quantities.value = nextQuantities;
@@ -104,7 +104,12 @@ async function createShipment(): Promise<void> {
busy.value = true;
error.value = "";
try {
await $api.shop.createShipment(order.value.id, carrier.value.trim(), trackingNo.value.trim(), items);
await $api.shop.createShipment(
order.value.id,
carrier.value.trim(),
trackingNo.value.trim(),
items,
);
carrier.value = "";
trackingNo.value = "";
await loadOrder();
@@ -137,23 +142,42 @@ onMounted(() => {
<template>
<VPage :title="order ? order.order_no : $t('order.title')">
<template #actions>
<NuxtLink class="inline-flex items-center justify-center rounded-md border border-border bg-surface px-4 py-2 text-sm font-medium text-text hover:bg-bg" to="/orders">{{ $t("common.back") }}</NuxtLink>
<NuxtLink
class="border-border bg-surface text-text hover:bg-bg inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium"
to="/orders"
>{{ $t("common.back") }}</NuxtLink
>
</template>
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
<div v-if="error" class="text-danger my-2 text-sm" role="alert">{{ error }}</div>
<p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
<template v-else-if="order">
<VCard>
<div class="mb-4 flex items-center justify-between gap-3">
<h2 class="text-lg font-semibold">{{ $t("shop.details") }}</h2>
<VBadge :tone="statusClass(order.status)">{{ $t(`order.status.${order.status}`) }}</VBadge>
<VBadge :tone="statusClass(order.status)">{{
$t(`order.status.${order.status}`)
}}</VBadge>
</div>
<div class="mb-5 grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(180px,1fr))]">
<div class="grid gap-1.5"><span class="text-sm text-muted">{{ $t("shop.created") }}</span><strong>{{ formatDate(order.created_at) }}</strong></div>
<div class="grid gap-1.5"><span class="text-sm text-muted">{{ $t("shop.total") }}</span><strong>{{ fmt(order.total_minor, order.currency) }}</strong></div>
<div class="mb-5 grid [grid-template-columns:repeat(auto-fit,minmax(180px,1fr))] gap-4">
<div class="grid gap-1.5">
<span class="text-muted text-sm">{{ $t("shop.created") }}</span
><strong>{{ formatDate(order.created_at) }}</strong>
</div>
<div class="grid gap-1.5">
<span class="text-muted text-sm">{{ $t("shop.total") }}</span
><strong>{{ fmt(order.total_minor, order.currency) }}</strong>
</div>
</div>
<h3 class="mb-3 text-base font-semibold">{{ $t("shop.items") }}</h3>
<VTable>
<thead><tr><th>{{ $t("product.detail") }}</th><th>{{ $t("product.skuCode") }}</th><th>{{ $t("common.qty") }}</th><th>{{ $t("common.price") }}</th></tr></thead>
<thead>
<tr>
<th>{{ $t("product.detail") }}</th>
<th>{{ $t("product.skuCode") }}</th>
<th>{{ $t("common.qty") }}</th>
<th>{{ $t("common.price") }}</th>
</tr>
</thead>
<tbody>
<tr v-for="item in order.items" :key="item.id">
<td>{{ localized(item.product_name, locale) }}</td>
@@ -163,10 +187,13 @@ onMounted(() => {
</tr>
</tbody>
</VTable>
<h3 class="mb-2 mt-5 text-base font-semibold">{{ $t("shop.address") }}</h3>
<address class="not-italic leading-7">
<h3 class="mt-5 mb-2 text-base font-semibold">{{ $t("shop.address") }}</h3>
<address class="leading-7 not-italic">
<div>{{ order.shipping_address.recipient }} · {{ order.shipping_address.phone }}</div>
<div>{{ order.shipping_address.country }}, {{ order.shipping_address.region }}, {{ order.shipping_address.city }}</div>
<div>
{{ order.shipping_address.country }}, {{ order.shipping_address.region }},
{{ order.shipping_address.city }}
</div>
<div>{{ order.shipping_address.line1 }}, {{ order.shipping_address.postal_code }}</div>
</address>
</VCard>
@@ -183,13 +210,31 @@ onMounted(() => {
</VField>
</div>
<h3 class="mb-3 text-base font-semibold">{{ $t("shop.shipmentQuantities") }}</h3>
<div v-for="item in order.items" :key="`quantity-${item.id}`" class="flex items-end gap-3">
<div class="min-w-0 flex-[2] pb-3.5">{{ localized(item.product_name, locale) }} ({{ item.sku_code }})</div>
<VField class="flex-1" :label="`${$t('shop.unshipped')}: ${unshippedQuantity(item.id, item.qty)}`">
<VInput :id="`quantity-${item.id}`" v-model.number="quantities[item.id]" type="number" min="0" :max="unshippedQuantity(item.id, item.qty)" step="1" />
<div
v-for="item in order.items"
:key="`quantity-${item.id}`"
class="flex items-end gap-3"
>
<div class="min-w-0 flex-[2] pb-3.5">
{{ localized(item.product_name, locale) }} ({{ item.sku_code }})
</div>
<VField
class="flex-1"
:label="`${$t('shop.unshipped')}: ${unshippedQuantity(item.id, item.qty)}`"
>
<VInput
:id="`quantity-${item.id}`"
v-model.number="quantities[item.id]"
type="number"
min="0"
:max="unshippedQuantity(item.id, item.qty)"
step="1"
/>
</VField>
</div>
<VBtn variant="primary" type="submit" :disabled="busy">{{ $t("shop.createShipment") }}</VBtn>
<VBtn variant="primary" type="submit" :disabled="busy">{{
$t("shop.createShipment")
}}</VBtn>
</form>
</VCard>
@@ -197,12 +242,34 @@ onMounted(() => {
<h2 class="mb-4 text-lg font-semibold">{{ $t("shipment.title") }}</h2>
<div v-if="!shipments.length" class="text-muted">{{ $t("common.empty") }}</div>
<VTable v-else>
<thead><tr><th>{{ $t("shipment.shipmentNo") }}</th><th>{{ $t("shop.carrier") }}</th><th>{{ $t("shop.trackingNo") }}</th><th>{{ $t("common.status") }}</th><th>{{ $t("common.actions") }}</th></tr></thead>
<thead>
<tr>
<th>{{ $t("shipment.shipmentNo") }}</th>
<th>{{ $t("shop.carrier") }}</th>
<th>{{ $t("shop.trackingNo") }}</th>
<th>{{ $t("common.status") }}</th>
<th>{{ $t("common.actions") }}</th>
</tr>
</thead>
<tbody>
<tr v-for="shipment in shipments" :key="shipment.id">
<td>{{ shipment.shipment_no }}</td><td>{{ shipment.carrier }}</td><td>{{ shipment.tracking_no }}</td>
<td><VBadge :tone="shipmentStatusClass(shipment.status)">{{ $t(`shipment.status.${shipment.status}`) }}</VBadge></td>
<td><VBtn v-if="shipment.status === 'pending'" size="sm" :disabled="actionId === shipment.id" @click="markShipped(shipment)">{{ $t("shipment.markShipped") }}</VBtn></td>
<td>{{ shipment.shipment_no }}</td>
<td>{{ shipment.carrier }}</td>
<td>{{ shipment.tracking_no }}</td>
<td>
<VBadge :tone="shipmentStatusClass(shipment.status)">{{
$t(`shipment.status.${shipment.status}`)
}}</VBadge>
</td>
<td>
<VBtn
v-if="shipment.status === 'pending'"
size="sm"
:disabled="actionId === shipment.id"
@click="markShipped(shipment)"
>{{ $t("shipment.markShipped") }}</VBtn
>
</td>
</tr>
</tbody>
</VTable>
apps/shop-admin/pages/orders/index.vue
+43 -12
View File
@@ -1,5 +1,4 @@
<script setup lang="ts">
import type { Order, OrderStatus, Paged } from "@vmall/shared";
definePageMeta({ middleware: "auth" });
@@ -20,7 +19,6 @@ function statusClass(value: OrderStatus): "green" | "red" | "orange" | "blue" {
return "blue";
}
function formatDate(value: string): string {
return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
}
@@ -29,7 +27,10 @@ async function loadOrders(): Promise<void> {
loading.value = true;
error.value = "";
try {
orders.value = await $api.shop.listOrders({ page: page.value, status: status.value || undefined });
orders.value = await $api.shop.listOrders({
page: page.value,
status: status.value || undefined,
});
} catch (err: unknown) {
error.value = err instanceof Error ? err.message : translate("common.error");
} finally {
@@ -43,7 +44,12 @@ async function filterChanged(): Promise<void> {
}
async function changePage(nextPage: number): Promise<void> {
if (!orders.value || nextPage < 1 || nextPage > Math.ceil(orders.value.total / orders.value.per_page)) return;
if (
!orders.value ||
nextPage < 1 ||
nextPage > Math.ceil(orders.value.total / orders.value.per_page)
)
return;
page.value = nextPage;
await loadOrders();
}
@@ -57,8 +63,15 @@ onMounted(() => {
<template>
<VPage :title="$t('shop.orderList')">
<div class="mb-4 flex items-center gap-3">
<label for="order-status" class="text-sm font-medium">{{ $t("shop.filterOrderStatus") }}</label>
<select id="order-status" v-model="status" class="rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30" @change="filterChanged">
<label for="order-status" class="text-sm font-medium">{{
$t("shop.filterOrderStatus")
}}</label>
<select
id="order-status"
v-model="status"
class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 rounded-md border px-3 py-2 text-sm focus:outline-2"
@change="filterChanged"
>
<option value="">{{ $t("common.all") }}</option>
<option value="pending_payment">{{ $t("order.status.pending_payment") }}</option>
<option value="paid">{{ $t("order.status.paid") }}</option>
@@ -68,7 +81,7 @@ onMounted(() => {
<option value="cancelled">{{ $t("order.status.cancelled") }}</option>
</select>
</div>
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
<div v-if="error" class="text-danger my-2 text-sm" role="alert">{{ error }}</div>
<p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
<VCard v-else-if="!orders?.items.length" class="text-muted">{{ $t("common.empty") }}</VCard>
<template v-else>
@@ -84,18 +97,36 @@ onMounted(() => {
</thead>
<tbody>
<tr v-for="order in orders.items" :key="order.id">
<td><NuxtLink :to="`/orders/${order.id}`" class="text-primary hover:underline">{{ order.order_no }}</NuxtLink></td>
<td>
<NuxtLink :to="`/orders/${order.id}`" class="text-primary hover:underline">{{
order.order_no
}}</NuxtLink>
</td>
<td>{{ formatDate(order.created_at) }}</td>
<td>{{ order.items.length }}</td>
<td>{{ fmt(order.total_minor, order.currency) }}</td>
<td><VBadge :tone="statusClass(order.status)">{{ $t(`order.status.${order.status}`) }}</VBadge></td>
<td>
<VBadge :tone="statusClass(order.status)">{{
$t(`order.status.${order.status}`)
}}</VBadge>
</td>
</tr>
</tbody>
</VTable>
<div v-if="orders.total > orders.per_page" class="mt-4 flex items-center justify-between">
<VBtn size="sm" :disabled="page <= 1 || loading" @click="changePage(page - 1)">{{ $t("common.prev") }}</VBtn>
<span class="text-sm text-muted">{{ $t("common.page") }} {{ page }} / {{ Math.ceil(orders.total / orders.per_page) }}</span>
<VBtn size="sm" :disabled="page >= Math.ceil(orders.total / orders.per_page) || loading" @click="changePage(page + 1)">{{ $t("common.next") }}</VBtn>
<VBtn size="sm" :disabled="page <= 1 || loading" @click="changePage(page - 1)">{{
$t("common.prev")
}}</VBtn>
<span class="text-muted text-sm"
>{{ $t("common.page") }} {{ page }} /
{{ Math.ceil(orders.total / orders.per_page) }}</span
>
<VBtn
size="sm"
:disabled="page >= Math.ceil(orders.total / orders.per_page) || loading"
@click="changePage(page + 1)"
>{{ $t("common.next") }}</VBtn
>
</div>
</template>
</VPage>