Chengdong Zhang
0d0e10b97b
- Add tailwindcss v4 + @tailwindcss/vite to mall, shop-admin, admin - Add @vmall/shared/theme.css tokens with html[data-accent] presets - Add @vmall/ui kit (VBtn/VBadge/VField/VInput/VCard/VPanel/VTable/VPage, VAccentSwatch, useAccent) as a Nuxt module - Convert all three apps to kit + utilities; delete ui.css/mall.css and every <style scoped>; consoles get accent presets, mall locked to red - Fix VCard boolean prop default (padding) and PDP/store stale useAsyncData keys on param navigation - Archive adopt-tailwind-design-system; new frontend-ui capability spec
84 lines
2.8 KiB
Vue
84 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
|
|
import type { Invoice } from "@vmall/shared";
|
|
|
|
definePageMeta({ middleware: "auth" });
|
|
|
|
const { $api } = useNuxtApp();
|
|
const { locale, t: translate } = useI18n();
|
|
const { load: loadMoney, fmt } = useMoney();
|
|
const invoices = ref<Invoice[]>([]);
|
|
const loading = ref(true);
|
|
const error = ref("");
|
|
const actionId = ref("");
|
|
|
|
function statusClass(value: Invoice["status"]): "green" | "red" | "orange" {
|
|
return value === "issued" ? "green" : value === "cancelled" ? "red" : "orange";
|
|
}
|
|
|
|
|
|
async function loadInvoices(): Promise<void> {
|
|
loading.value = true;
|
|
error.value = "";
|
|
try {
|
|
invoices.value = await $api.shop.listInvoices();
|
|
} catch (err: unknown) {
|
|
error.value = err instanceof Error ? err.message : translate("common.error");
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
async function issueInvoice(invoice: Invoice): Promise<void> {
|
|
actionId.value = invoice.id;
|
|
error.value = "";
|
|
try {
|
|
await $api.shop.issueInvoice(invoice.id);
|
|
await loadInvoices();
|
|
} catch (err: unknown) {
|
|
error.value = err instanceof Error ? err.message : translate("common.error");
|
|
} finally {
|
|
actionId.value = "";
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadMoney();
|
|
loadInvoices();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<VPage :title="$t('shop.invoiceList')">
|
|
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
|
|
<p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
|
|
<VCard v-else-if="!invoices.length" class="text-muted">{{ $t("common.empty") }}</VCard>
|
|
<VTable v-else>
|
|
<thead>
|
|
<tr>
|
|
<th>{{ $t("shop.invoiceNo") }}</th>
|
|
<th>{{ $t("shop.orderNo") }}</th>
|
|
<th>{{ $t("invoice.invoiceTitle") }}</th>
|
|
<th>{{ $t("shop.kind") }}</th>
|
|
<th>{{ $t("shop.taxNo") }}</th>
|
|
<th>{{ $t("invoice.amount") }}</th>
|
|
<th>{{ $t("common.status") }}</th>
|
|
<th>{{ $t("common.actions") }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="invoice in invoices" :key="invoice.id">
|
|
<td>{{ invoice.invoice_no || $t("shop.noInvoice") }}</td>
|
|
<td><NuxtLink :to="`/orders/${invoice.order_id}`" class="text-primary hover:underline">{{ invoice.order_no ?? invoice.order_id }}</NuxtLink></td>
|
|
<td>{{ invoice.title }}</td>
|
|
<td>{{ $t(`invoice.${invoice.kind}`) }}</td>
|
|
<td>{{ invoice.tax_no || $t("shop.noInvoice") }}</td>
|
|
<td>{{ fmt(invoice.amount_minor, invoice.currency) }}</td>
|
|
<td><VBadge :tone="statusClass(invoice.status)">{{ $t(`invoice.status.${invoice.status}`) }}</VBadge></td>
|
|
<td><VBtn v-if="invoice.status === 'requested'" variant="primary" size="sm" :disabled="actionId === invoice.id" @click="issueInvoice(invoice)">{{ $t("shop.issueInvoice") }}</VBtn></td>
|
|
</tr>
|
|
</tbody>
|
|
</VTable>
|
|
</VPage>
|
|
</template>
|