feat: add order governance flags and reconciliation

This commit is contained in:
2026-01-16 13:29:59 +08:00
parent 7ead7fc11c
commit e5f40287c3
17 changed files with 1247 additions and 103 deletions

View File

@@ -20,6 +20,8 @@ export const OrderService = {
content_title,
type,
status,
is_flagged,
is_reconciled,
created_at_from,
created_at_to,
paid_at_from,
@@ -49,6 +51,8 @@ export const OrderService = {
content_title,
type,
status,
is_flagged,
is_reconciled,
created_at_from: iso(created_at_from),
created_at_to: iso(created_at_to),
paid_at_from: iso(paid_at_from),
@@ -86,5 +90,25 @@ export const OrderService = {
idempotency_key
}
});
},
async flagOrder(orderID, { is_flagged, reason } = {}) {
if (!orderID) throw new Error('orderID is required');
return requestJson(`/super/v1/orders/${orderID}/flag`, {
method: 'POST',
body: {
is_flagged: Boolean(is_flagged),
reason
}
});
},
async reconcileOrder(orderID, { is_reconciled, note } = {}) {
if (!orderID) throw new Error('orderID is required');
return requestJson(`/super/v1/orders/${orderID}/reconcile`, {
method: 'POST',
body: {
is_reconciled: Boolean(is_reconciled),
note
}
});
}
};

View File

@@ -17,6 +17,16 @@ const refundLoading = ref(false);
const refundForce = ref(false);
const refundReason = ref('');
const flagDialogVisible = ref(false);
const flagLoading = ref(false);
const flagValue = ref(false);
const flagReason = ref('');
const reconcileDialogVisible = ref(false);
const reconcileLoading = ref(false);
const reconcileValue = ref(false);
const reconcileNote = ref('');
function formatDate(value) {
if (!value) return '-';
if (String(value).startsWith('0001-01-01')) return '-';
@@ -46,6 +56,14 @@ function getOrderStatusSeverity(value) {
}
}
function getFlagSeverity(value) {
return value ? 'danger' : 'secondary';
}
function getReconcileSeverity(value) {
return value ? 'success' : 'secondary';
}
function safeJson(value) {
try {
return JSON.stringify(value ?? null, null, 2);
@@ -89,6 +107,66 @@ async function confirmRefund() {
}
}
function openFlagDialog() {
const order = detail.value?.order;
if (!order) return;
flagValue.value = Boolean(order.is_flagged);
flagReason.value = order.flag_reason || '';
flagDialogVisible.value = true;
}
async function confirmFlag() {
const order = detail.value?.order;
if (!order?.id) return;
if (flagValue.value && !flagReason.value.trim()) {
toast.add({ severity: 'warn', summary: '请填写原因', detail: '标记为问题订单时需要填写原因', life: 3000 });
return;
}
flagLoading.value = true;
try {
await OrderService.flagOrder(order.id, {
is_flagged: flagValue.value,
reason: flagValue.value ? flagReason.value : ''
});
toast.add({ severity: 'success', summary: '已更新标记', detail: `订单ID: ${order.id}`, life: 3000 });
flagDialogVisible.value = false;
await loadDetail();
} catch (error) {
toast.add({ severity: 'error', summary: '操作失败', detail: error?.message || '无法更新问题标记', life: 4000 });
} finally {
flagLoading.value = false;
}
}
function openReconcileDialog() {
const order = detail.value?.order;
if (!order) return;
reconcileValue.value = Boolean(order.is_reconciled);
reconcileNote.value = order.reconcile_note || '';
reconcileDialogVisible.value = true;
}
async function confirmReconcile() {
const order = detail.value?.order;
if (!order?.id) return;
reconcileLoading.value = true;
try {
await OrderService.reconcileOrder(order.id, {
is_reconciled: reconcileValue.value,
note: reconcileValue.value ? reconcileNote.value : ''
});
toast.add({ severity: 'success', summary: '已更新对账', detail: `订单ID: ${order.id}`, life: 3000 });
reconcileDialogVisible.value = false;
await loadDetail();
} catch (error) {
toast.add({ severity: 'error', summary: '操作失败', detail: error?.message || '无法更新对账状态', life: 4000 });
} finally {
reconcileLoading.value = false;
}
}
watch(
() => orderID.value,
() => loadDetail(),
@@ -104,6 +182,8 @@ watch(
<span class="text-muted-color">OrderID: {{ orderID || '-' }}</span>
</div>
<div class="flex items-center gap-2">
<Button :label="detail?.order?.is_flagged ? '取消标记' : '标记问题'" icon="pi pi-flag" text @click="openFlagDialog" :disabled="loading" />
<Button :label="detail?.order?.is_reconciled ? '撤销对账' : '完成对账'" icon="pi pi-check-circle" text @click="openReconcileDialog" :disabled="loading" />
<Button label="退款" icon="pi pi-replay" severity="danger" @click="openRefundDialog" :disabled="detail?.order?.status !== 'paid' || loading" />
</div>
</div>
@@ -140,6 +220,26 @@ watch(
<div class="text-sm text-muted-color">支付时间</div>
<div class="font-medium">{{ formatDate(detail?.order?.paid_at) }}</div>
</div>
<div class="col-span-12 md:col-span-3">
<div class="text-sm text-muted-color">问题标记</div>
<Tag :value="detail?.order?.is_flagged ? '已标记' : '未标记'" :severity="getFlagSeverity(detail?.order?.is_flagged)" />
<div v-if="detail?.order?.is_flagged" class="text-xs text-muted-color mt-1">
{{ detail?.order?.flag_reason || '无原因' }}
</div>
<div v-if="detail?.order?.is_flagged" class="text-xs text-muted-color">
{{ formatDate(detail?.order?.flagged_at) }}
</div>
</div>
<div class="col-span-12 md:col-span-3">
<div class="text-sm text-muted-color">对账状态</div>
<Tag :value="detail?.order?.is_reconciled ? '已对账' : '未对账'" :severity="getReconcileSeverity(detail?.order?.is_reconciled)" />
<div v-if="detail?.order?.is_reconciled" class="text-xs text-muted-color mt-1">
{{ detail?.order?.reconcile_note || '无说明' }}
</div>
<div v-if="detail?.order?.is_reconciled" class="text-xs text-muted-color">
{{ formatDate(detail?.order?.reconciled_at) }}
</div>
</div>
</div>
<div class="grid grid-cols-12 gap-3">
@@ -191,4 +291,52 @@ watch(
<Button label="确认退款" icon="pi pi-check" severity="danger" @click="confirmRefund" :loading="refundLoading" :disabled="detail?.order?.status !== 'paid'" />
</template>
</Dialog>
<Dialog v-model:visible="flagDialogVisible" :modal="true" :style="{ width: '520px' }">
<template #header>
<div class="flex items-center gap-2">
<span class="font-medium">问题订单标记</span>
<span class="text-muted-color truncate max-w-[280px]">{{ orderID ? `#${orderID}` : '' }}</span>
</div>
</template>
<div class="flex flex-col gap-4">
<div class="text-sm text-muted-color">标记后将用于运营复核与对账追踪可随时取消</div>
<div class="flex items-center gap-2">
<Checkbox v-model="flagValue" inputId="flagValueDetail" binary />
<label for="flagValueDetail" class="cursor-pointer">标记为问题订单</label>
</div>
<div>
<label class="block font-medium mb-2">标记原因</label>
<InputText v-model="flagReason" placeholder="标记为问题时必填" class="w-full" :disabled="!flagValue" />
</div>
</div>
<template #footer>
<Button label="取消" icon="pi pi-times" text @click="flagDialogVisible = false" :disabled="flagLoading" />
<Button label="确认" icon="pi pi-check" @click="confirmFlag" :loading="flagLoading" :disabled="flagValue && !flagReason.trim()" />
</template>
</Dialog>
<Dialog v-model:visible="reconcileDialogVisible" :modal="true" :style="{ width: '520px' }">
<template #header>
<div class="flex items-center gap-2">
<span class="font-medium">订单对账</span>
<span class="text-muted-color truncate max-w-[280px]">{{ orderID ? `#${orderID}` : '' }}</span>
</div>
</template>
<div class="flex flex-col gap-4">
<div class="text-sm text-muted-color">用于记录人工对账结果与备注</div>
<div class="flex items-center gap-2">
<Checkbox v-model="reconcileValue" inputId="reconcileValueDetail" binary />
<label for="reconcileValueDetail" class="cursor-pointer">完成对账</label>
</div>
<div>
<label class="block font-medium mb-2">对账说明</label>
<InputText v-model="reconcileNote" placeholder="可选" class="w-full" :disabled="!reconcileValue" />
</div>
</div>
<template #footer>
<Button label="取消" icon="pi pi-times" text @click="reconcileDialogVisible = false" :disabled="reconcileLoading" />
<Button label="确认" icon="pi pi-check" @click="confirmReconcile" :loading="reconcileLoading" />
</template>
</Dialog>
</template>

View File

@@ -32,6 +32,8 @@ const contentID = ref(null);
const contentTitle = ref('');
const status = ref('');
const type = ref('');
const isFlagged = ref(null);
const isReconciled = ref(null);
const createdAtFrom = ref(null);
const createdAtTo = ref(null);
const paidAtFrom = ref(null);
@@ -56,6 +58,12 @@ const typeOptions = [
{ label: 'content_purchase', value: 'content_purchase' }
];
const booleanOptions = [
{ label: '全部', value: null },
{ label: '是', value: true },
{ label: '否', value: false }
];
function getQueryValue(value) {
if (Array.isArray(value)) return value[0];
return value ?? null;
@@ -74,6 +82,15 @@ function parseDate(value) {
return date;
}
function parseBool(value) {
if (value === null || value === undefined || value === '') return null;
if (typeof value === 'boolean') return value;
const text = String(value).toLowerCase();
if (text === 'true' || text === '1') return true;
if (text === 'false' || text === '0') return false;
return null;
}
function formatDate(value) {
if (!value) return '-';
if (String(value).startsWith('0001-01-01')) return '-';
@@ -93,6 +110,8 @@ function resetFilters() {
contentTitle.value = '';
status.value = '';
type.value = '';
isFlagged.value = null;
isReconciled.value = null;
createdAtFrom.value = null;
createdAtTo.value = null;
paidAtFrom.value = null;
@@ -121,6 +140,11 @@ function applyRouteQuery(query) {
if (statusValue !== null) status.value = String(statusValue);
if (typeValue !== null) type.value = String(typeValue);
const flaggedValue = parseBool(getQueryValue(query?.is_flagged));
const reconciledValue = parseBool(getQueryValue(query?.is_reconciled));
if (flaggedValue !== null) isFlagged.value = flaggedValue;
if (reconciledValue !== null) isReconciled.value = reconciledValue;
const createdFromValue = getQueryValue(query?.created_at_from);
const createdToValue = getQueryValue(query?.created_at_to);
const paidFromValue = getQueryValue(query?.paid_at_from);
@@ -153,6 +177,14 @@ function getOrderStatusSeverity(value) {
}
}
function getFlagSeverity(value) {
return value ? 'danger' : 'secondary';
}
function getReconcileSeverity(value) {
return value ? 'success' : 'secondary';
}
async function loadOrders() {
loading.value = true;
try {
@@ -169,6 +201,8 @@ async function loadOrders() {
content_title: contentTitle.value,
status: status.value,
type: type.value,
is_flagged: isFlagged.value === null ? undefined : isFlagged.value,
is_reconciled: isReconciled.value === null ? undefined : isReconciled.value,
created_at_from: createdAtFrom.value || undefined,
created_at_to: createdAtTo.value || undefined,
paid_at_from: paidAtFrom.value || undefined,
@@ -187,6 +221,18 @@ async function loadOrders() {
}
}
const flagDialogVisible = ref(false);
const flagLoading = ref(false);
const flagOrder = ref(null);
const flagValue = ref(false);
const flagReason = ref('');
const reconcileDialogVisible = ref(false);
const reconcileLoading = ref(false);
const reconcileOrder = ref(null);
const reconcileValue = ref(false);
const reconcileNote = ref('');
function openRefundDialog(order) {
refundOrder.value = order;
refundDialogVisible.value = true;
@@ -211,6 +257,64 @@ async function confirmRefund() {
}
}
function openFlagDialog(order) {
flagOrder.value = order;
flagValue.value = Boolean(order?.is_flagged);
flagReason.value = order?.flag_reason || '';
flagDialogVisible.value = true;
}
async function confirmFlag() {
const id = flagOrder.value?.id;
if (!id) return;
if (flagValue.value && !flagReason.value.trim()) {
toast.add({ severity: 'warn', summary: '请填写原因', detail: '标记为问题订单时需要填写原因', life: 3000 });
return;
}
flagLoading.value = true;
try {
await OrderService.flagOrder(id, {
is_flagged: flagValue.value,
reason: flagValue.value ? flagReason.value : ''
});
toast.add({ severity: 'success', summary: '已更新标记', detail: `订单ID: ${id}`, life: 3000 });
flagDialogVisible.value = false;
await loadOrders();
} catch (error) {
toast.add({ severity: 'error', summary: '操作失败', detail: error?.message || '无法更新问题标记', life: 4000 });
} finally {
flagLoading.value = false;
}
}
function openReconcileDialog(order) {
reconcileOrder.value = order;
reconcileValue.value = Boolean(order?.is_reconciled);
reconcileNote.value = order?.reconcile_note || '';
reconcileDialogVisible.value = true;
}
async function confirmReconcile() {
const id = reconcileOrder.value?.id;
if (!id) return;
reconcileLoading.value = true;
try {
await OrderService.reconcileOrder(id, {
is_reconciled: reconcileValue.value,
note: reconcileValue.value ? reconcileNote.value : ''
});
toast.add({ severity: 'success', summary: '已更新对账', detail: `订单ID: ${id}`, life: 3000 });
reconcileDialogVisible.value = false;
await loadOrders();
} catch (error) {
toast.add({ severity: 'error', summary: '操作失败', detail: error?.message || '无法更新对账状态', life: 4000 });
} finally {
reconcileLoading.value = false;
}
}
function onSearch() {
page.value = 1;
loadOrders();
@@ -289,6 +393,12 @@ watch(
<SearchField label="类型">
<Select v-model="type" :options="typeOptions" optionLabel="label" optionValue="value" placeholder="请选择" class="w-full" />
</SearchField>
<SearchField label="问题标记">
<Select v-model="isFlagged" :options="booleanOptions" optionLabel="label" optionValue="value" placeholder="请选择" class="w-full" />
</SearchField>
<SearchField label="对账状态">
<Select v-model="isReconciled" :options="booleanOptions" optionLabel="label" optionValue="value" placeholder="请选择" class="w-full" />
</SearchField>
<SearchField label="创建时间 From">
<DatePicker v-model="createdAtFrom" showIcon showButtonBar placeholder="开始时间" class="w-full" />
</SearchField>
@@ -358,6 +468,24 @@ watch(
<Tag :value="data?.status_description || data?.status || '-'" :severity="getOrderStatusSeverity(data?.status)" />
</template>
</Column>
<Column header="问题标记" style="min-width: 12rem">
<template #body="{ data }">
<div class="flex flex-col">
<Tag :value="data?.is_flagged ? '已标记' : '未标记'" :severity="getFlagSeverity(data?.is_flagged)" />
<span v-if="data?.is_flagged && data?.flag_reason" class="text-xs text-muted-color mt-1">{{ data.flag_reason }}</span>
<span v-if="data?.is_flagged && data?.flagged_at" class="text-xs text-muted-color">{{ formatDate(data.flagged_at) }}</span>
</div>
</template>
</Column>
<Column header="对账状态" style="min-width: 12rem">
<template #body="{ data }">
<div class="flex flex-col">
<Tag :value="data?.is_reconciled ? '已对账' : '未对账'" :severity="getReconcileSeverity(data?.is_reconciled)" />
<span v-if="data?.is_reconciled && data?.reconcile_note" class="text-xs text-muted-color mt-1">{{ data.reconcile_note }}</span>
<span v-if="data?.is_reconciled && data?.reconciled_at" class="text-xs text-muted-color">{{ formatDate(data.reconciled_at) }}</span>
</div>
</template>
</Column>
<Column field="amount_paid" header="实付" sortable style="min-width: 10rem">
<template #body="{ data }">
{{ formatCny(data.amount_paid) }}
@@ -390,7 +518,11 @@ watch(
</Column>
<Column header="操作" style="min-width: 10rem">
<template #body="{ data }">
<Button label="退款" icon="pi pi-replay" text size="small" class="p-0" :disabled="data?.status !== 'paid'" @click="openRefundDialog(data)" />
<div class="flex flex-col gap-1">
<Button label="退款" icon="pi pi-replay" text size="small" class="p-0 justify-start" :disabled="data?.status !== 'paid'" @click="openRefundDialog(data)" />
<Button :label="data?.is_flagged ? '取消标记' : '标记问题'" icon="pi pi-flag" text size="small" class="p-0 justify-start" @click="openFlagDialog(data)" />
<Button :label="data?.is_reconciled ? '撤销对账' : '完成对账'" icon="pi pi-check-circle" text size="small" class="p-0 justify-start" @click="openReconcileDialog(data)" />
</div>
</template>
</Column>
</DataTable>
@@ -421,4 +553,56 @@ watch(
<Button label="确认退款" icon="pi pi-check" severity="danger" @click="confirmRefund" :loading="refundLoading" :disabled="refundOrder?.status !== 'paid'" />
</template>
</Dialog>
<Dialog v-model:visible="flagDialogVisible" :modal="true" :style="{ width: '520px' }">
<template #header>
<div class="flex items-center gap-2">
<span class="font-medium">问题订单标记</span>
<span class="text-muted-color truncate max-w-[280px]">
{{ flagOrder?.id ? `#${flagOrder.id}` : '' }}
</span>
</div>
</template>
<div class="flex flex-col gap-4">
<div class="text-sm text-muted-color">标记后将用于运营复核与对账追踪可随时取消</div>
<div class="flex items-center gap-2">
<Checkbox v-model="flagValue" inputId="flagValue" binary />
<label for="flagValue" class="cursor-pointer">标记为问题订单</label>
</div>
<div>
<label class="block font-medium mb-2">标记原因</label>
<InputText v-model="flagReason" placeholder="必填" class="w-full" :disabled="!flagValue" />
</div>
</div>
<template #footer>
<Button label="取消" icon="pi pi-times" text @click="flagDialogVisible = false" :disabled="flagLoading" />
<Button label="确认" icon="pi pi-check" @click="confirmFlag" :loading="flagLoading" :disabled="flagValue && !flagReason.trim()" />
</template>
</Dialog>
<Dialog v-model:visible="reconcileDialogVisible" :modal="true" :style="{ width: '520px' }">
<template #header>
<div class="flex items-center gap-2">
<span class="font-medium">订单对账</span>
<span class="text-muted-color truncate max-w-[280px]">
{{ reconcileOrder?.id ? `#${reconcileOrder.id}` : '' }}
</span>
</div>
</template>
<div class="flex flex-col gap-4">
<div class="text-sm text-muted-color">对账用于确认支付状态与对账结果支持撤销</div>
<div class="flex items-center gap-2">
<Checkbox v-model="reconcileValue" inputId="reconcileValue" binary />
<label for="reconcileValue" class="cursor-pointer">完成对账</label>
</div>
<div>
<label class="block font-medium mb-2">对账说明</label>
<InputText v-model="reconcileNote" placeholder="可选" class="w-full" :disabled="!reconcileValue" />
</div>
</div>
<template #footer>
<Button label="取消" icon="pi pi-times" text @click="reconcileDialogVisible = false" :disabled="reconcileLoading" />
<Button label="确认" icon="pi pi-check" @click="confirmReconcile" :loading="reconcileLoading" />
</template>
</Dialog>
</template>