update style

This commit is contained in:
Timi
2026-09-25 09:31:52 +08:00
parent cfc47215ae
commit 1df745f646
+51 -16
View File
@@ -41,7 +41,7 @@
<t-dropdown-item <t-dropdown-item
v-if="!isSelfReceiveOnly" v-if="!isSelfReceiveOnly"
v-model="operationType" v-model="operationType"
label="操作类型" :label="operationFilterLabel"
:options="operationOptions" :options="operationOptions"
@change="selectOperation" @change="selectOperation"
/> />
@@ -89,9 +89,8 @@
</template> </template>
<template #title> <template #title>
<div class="title"> <div class="title">
<span class="customer" v-text="getCustomerText(item)" /> <span class="customer clip-text" v-text="getCustomerText(item)" />
<div class="operation"> <span class="type" :class="getOperationClass(item.operationType)" v-text="getFundOperationText(item.operationType)" />
<span v-text="getFundOperationText(item.operationType)" />
<t-tag <t-tag
size="small" size="small"
:content="getRecordStatusText(item)" :content="getRecordStatusText(item)"
@@ -99,7 +98,6 @@
:theme="getRecordStatusTheme(item)" :theme="getRecordStatusTheme(item)"
/> />
</div> </div>
</div>
</template> </template>
<template #description> <template #description>
<div class="description"> <div class="description">
@@ -217,7 +215,7 @@ const dateOptions: Array<{ label: string; value: DateFilterType }> = [
{ label: "全部", value: "all" }, { label: "全部", value: "all" },
{ label: "自定义范围", value: "custom" } { label: "自定义范围", value: "custom" }
]; ];
const dateFilterType = ref<DateFilterType>(parseDateFilterType(getQueryText(route.query.dateType), dateOptions, "thisWeek")); const dateFilterType = ref<DateFilterType>(parseDateFilterType(getQueryText(route.query.dateType), dateOptions, "all"));
const dateRange = ref<[string, string]>(parseDateRange(dateFilterType.value)); const dateRange = ref<[string, string]>(parseDateRange(dateFilterType.value));
const startDraft = ref(""); const startDraft = ref("");
const endDraft = ref(""); const endDraft = ref("");
@@ -233,6 +231,7 @@ const operationOptions = [
{ label: "确认无需退款", value: "CONFIRM_NO_REFUND" }, { label: "确认无需退款", value: "CONFIRM_NO_REFUND" },
{ label: "资金冲正", value: "REVOKE" } { label: "资金冲正", value: "REVOKE" }
]; ];
const operationFilterLabel = computed(() => operationOptions.find(item => item.value === operationType.value)?.label || "操作类型");
const statusOptions = [ const statusOptions = [
{ label: "全部状态", value: "ALL" }, { label: "全部状态", value: "ALL" },
{ label: "待核销", value: "PENDING" }, { label: "待核销", value: "PENDING" },
@@ -462,6 +461,15 @@ function getCustomerText(item: FundRecord): string {
return item.customer?.name || item.customer?.code || item.customerId || "未知客户"; return item.customer?.name || item.customer?.code || item.customerId || "未知客户";
} }
function getOperationClass(type?: FundOperationType): string {
return ({
RECEIVE: "receive",
REFUND: "refund",
CONFIRM_NO_REFUND: "confirm-no-refund",
REVOKE: "revoke"
} as Record<string, string>)[type || ""] || "unknown";
}
function getStatusTheme(statusValue?: FundRecordStatus): "success" | "warning" | "danger" | "default" { function getStatusTheme(statusValue?: FundRecordStatus): "success" | "warning" | "danger" | "default" {
return statusValue === "VERIFIED" ? "success" : statusValue === "PENDING" ? "warning" : statusValue === "REJECTED" ? "danger" : "default"; return statusValue === "VERIFIED" ? "success" : statusValue === "PENDING" ? "warning" : statusValue === "REJECTED" ? "danger" : "default";
} }
@@ -561,25 +569,34 @@ onUnmounted(() => navBarStore.clearRight());
} }
.title { .title {
gap: .5rem; gap: .25rem;
display: flex; display: flex;
font-size: .75rem; font-size: .75rem;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.customer { .customer {
min-width: 0;
overflow: hidden;
font-weight: 600; font-weight: 600;
white-space: nowrap;
text-overflow: ellipsis;
} }
.operation { .type {
gap: .5rem; font-weight: 700;
display: flex;
flex-shrink: 0; &.receive {
align-items: center; color: #15803d;
}
&.refund {
color: #dc2626;
}
&.confirm-no-refund {
color: #2563eb;
}
&.revoke {
color: #7c3aed;
}
} }
} }
@@ -647,5 +664,23 @@ onUnmounted(() => navBarStore.clearRight());
.fallback { .fallback {
background: #115e59; background: #115e59;
} }
.operation-type {
&.receive {
color: #86efac;
}
&.refund {
color: #fca5a5;
}
&.confirm-no-refund {
color: #93c5fd;
}
&.revoke {
color: #c4b5fd;
}
}
} }
</style> </style>