292 lines
8.2 KiB
Vue
292 lines
8.2 KiB
Vue
<template>
|
|
<div v-can="permissionCodes.fund.refund" class="sales-order-operation">
|
|
<t-cell-group
|
|
v-if="order"
|
|
title="销售订单"
|
|
theme="card"
|
|
v-entrance-transition
|
|
>
|
|
<t-cell title="订单号" :note="order.orderNo || order.id"/>
|
|
<t-cell
|
|
title="可退款金额"
|
|
:note="formatPackageAmount(refundableAmount)"
|
|
/>
|
|
</t-cell-group>
|
|
<t-form
|
|
v-if="order"
|
|
class="form"
|
|
label-width="6rem"
|
|
v-entrance-transition="70"
|
|
>
|
|
<t-form-item label="退款金额" required-mark>
|
|
<t-input
|
|
v-model.trim="amountText"
|
|
type="number"
|
|
align="right"
|
|
borderless
|
|
placeholder="输入退款金额"
|
|
>
|
|
<template #suffix-icon>
|
|
<t-button
|
|
size="extra-small"
|
|
theme="primary"
|
|
variant="outline"
|
|
@click="fillRefundAmount"
|
|
>全额退款</t-button>
|
|
</template>
|
|
</t-input>
|
|
</t-form-item>
|
|
<t-form-item label="退款原因" required-mark>
|
|
<div class="reason">
|
|
<t-textarea v-model="reason" borderless autosize maxlength="500" placeholder="输入退款原因" />
|
|
<t-button
|
|
size="extra-small"
|
|
theme="primary"
|
|
variant="outline"
|
|
@click="openRefundReasonPicker"
|
|
>选择</t-button>
|
|
</div>
|
|
</t-form-item>
|
|
<t-form-item label="退款时间" content-align="right">
|
|
<div class="time-actions">
|
|
<t-button
|
|
theme="primary"
|
|
variant="outline"
|
|
size="extra-small"
|
|
:content="occurredAtText || '此刻'"
|
|
@click="openOccurredAtPicker"
|
|
/>
|
|
<t-button
|
|
v-if="occurredAtText"
|
|
theme="primary"
|
|
variant="text"
|
|
size="extra-small"
|
|
content="此刻"
|
|
@click="resetOccurredAt"
|
|
/>
|
|
</div>
|
|
</t-form-item>
|
|
<t-form-item label="备注">
|
|
<t-textarea
|
|
v-model="remark"
|
|
borderless
|
|
autosize
|
|
maxlength="500"
|
|
/>
|
|
</t-form-item>
|
|
<t-form-item label-width="0">
|
|
<media-selector
|
|
v-if="order"
|
|
:model-value="photoUrlList"
|
|
v-model:photo-items="photoItems"
|
|
class="photo-field"
|
|
:upload="uploadPhotoList"
|
|
:edit-mode="true"
|
|
required
|
|
title="退款凭证照片"
|
|
/>
|
|
</t-form-item>
|
|
</t-form>
|
|
<t-empty v-if="!order" :description="loading ? '正在加载订单' : '订单不存在'"/>
|
|
<t-popup v-model="refundReasonPickerVisible" placement="bottom">
|
|
<t-picker
|
|
v-if="refundReasonPickerVisible"
|
|
v-model="refundReasonPickerDraft"
|
|
:columns="refundReasonPickerColumns"
|
|
title="选择退款原因"
|
|
@cancel="refundReasonPickerVisible = false"
|
|
@confirm="confirmRefundReason"
|
|
/>
|
|
</t-popup>
|
|
<t-popup v-model="occurredAtPickerVisible" placement="bottom">
|
|
<t-date-time-picker
|
|
v-if="occurredAtPickerVisible"
|
|
v-model="occurredAtDraftText"
|
|
:start="minimumDateTimeText"
|
|
:mode="['date', 'minute']"
|
|
format="YYYY-MM-DD HH:mm"
|
|
title="退款时间"
|
|
@cancel="occurredAtPickerVisible = false"
|
|
@confirm="confirmOccurredAt"
|
|
/>
|
|
</t-popup>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Time } from "timi-web";
|
|
import { useUserStore, type Attachment } from "timi-web-api";
|
|
import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
|
|
import SalesOrderAPI from "@/api/SalesOrderAPI";
|
|
import { useNavBarStore } from "@/store/navBarStore";
|
|
import type { SalesOrder } from "@/types/SalesOrder";
|
|
import type { PhotoItem } from "@/types/Photo";
|
|
import { createPackageRequestNo, formatPackageAmount, formatPackageAmountInput, parsePackageAmount } from "@/utils/package";
|
|
import { getErrorMessage } from "@/utils/error";
|
|
import { Message } from "@/utils/message";
|
|
import { permissionCodes } from "@/utils/permission";
|
|
import { uploadPhotoList } from "@/utils/photo";
|
|
|
|
defineOptions({ name: "SalesOrderRefund" });
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const navBarStore = useNavBarStore();
|
|
const userStore = useUserStore();
|
|
const order = ref<SalesOrder>();
|
|
const loading = ref(false);
|
|
const saving = ref(false);
|
|
const amountText = ref("");
|
|
const reason = ref("");
|
|
const minimumDateTimeText = "1970-01-01 00:00";
|
|
const occurredAtText = ref("");
|
|
const occurredAtDraftText = ref("");
|
|
const occurredAtPickerVisible = ref(false);
|
|
const refundReasonPickerDraft = ref<string[]>([]);
|
|
const refundReasonPickerVisible = ref(false);
|
|
const remark = ref("");
|
|
const photoItems = ref<PhotoItem[]>([]);
|
|
const photoUrlList = computed(() => photoItems.value.map(item => item.url));
|
|
const requestNo = ref("");
|
|
const refundableAmount = computed(() => (order.value?.paidAmount || 0) - (order.value?.refundedAmount || 0));
|
|
const refundReasonOptions = [
|
|
"取消订单",
|
|
"客户主动申请退款",
|
|
"商品缺货，无法履约",
|
|
"商品或服务与描述不符",
|
|
"客户重复下单",
|
|
"收款金额有误",
|
|
"其他售后原因"
|
|
];
|
|
const refundReasonPickerColumns = refundReasonOptions.map(item => ({ label: item, value: item }));
|
|
|
|
function openOccurredAtPicker(): void {
|
|
occurredAtDraftText.value = occurredAtText.value || Time.formatDateTime(new Date());
|
|
occurredAtPickerVisible.value = true;
|
|
}
|
|
|
|
function confirmOccurredAt(value?: string | number): void {
|
|
occurredAtText.value = String(value || occurredAtDraftText.value);
|
|
occurredAtPickerVisible.value = false;
|
|
}
|
|
|
|
function resetOccurredAt(): void {
|
|
occurredAtText.value = "";
|
|
occurredAtDraftText.value = "";
|
|
}
|
|
|
|
function fillRefundAmount(): void {
|
|
amountText.value = formatPackageAmountInput(refundableAmount.value);
|
|
}
|
|
|
|
function openRefundReasonPicker(): void {
|
|
const currentReason = refundReasonOptions.includes(reason.value) ? reason.value : refundReasonOptions[0];
|
|
refundReasonPickerDraft.value = [currentReason];
|
|
refundReasonPickerVisible.value = true;
|
|
}
|
|
|
|
function confirmRefundReason(value: Array<string | number>): void {
|
|
reason.value = String(value[0] || refundReasonPickerDraft.value[0] || "");
|
|
refundReasonPickerVisible.value = false;
|
|
}
|
|
|
|
function resolveTimestamp(value: string): number | undefined {
|
|
if (!value) return undefined;
|
|
const timestamp = new Date(value.replace(" ", "T")).getTime();
|
|
return Number.isFinite(timestamp) ? timestamp : undefined;
|
|
}
|
|
|
|
function buildAttachments(): Partial<Attachment>[] {
|
|
return photoItems.value.flatMap(item => item.tempFileId ? [{
|
|
tempFileId: item.tempFileId,
|
|
attachType: "PHOTO"
|
|
}] : []);
|
|
}
|
|
|
|
async function loadData(): Promise<void> {
|
|
const id = String(route.params.id || "");
|
|
if (!id) return;
|
|
loading.value = true;
|
|
try {
|
|
order.value = await SalesOrderAPI.detail(id);
|
|
} catch (error) {
|
|
Message.error(getErrorMessage(error, "订单加载失败"));
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
async function save(): Promise<void> {
|
|
if (saving.value || !order.value?.id) return;
|
|
const amount = parsePackageAmount(amountText.value);
|
|
const attachmentList = buildAttachments();
|
|
if (amount === undefined || amount === 0 || !reason.value) {
|
|
Message.warning("退款金额和原因不能为空");
|
|
return;
|
|
}
|
|
if (!attachmentList.length) {
|
|
Message.warning("退款必须上传至少一张照片");
|
|
return;
|
|
}
|
|
if (!requestNo.value) requestNo.value = createPackageRequestNo();
|
|
saving.value = true;
|
|
try {
|
|
await SalesOrderAPI.refund({
|
|
salesOrderId: order.value.id,
|
|
requestNo: requestNo.value,
|
|
amount,
|
|
occurredAt: resolveTimestamp(occurredAtText.value),
|
|
reason: reason.value.trim(),
|
|
attachmentList,
|
|
remark: remark.value.trim() || null
|
|
});
|
|
Message.success("退款登记已提交");
|
|
await router.replace(`/management/sales-orders/${order.value.id}`);
|
|
} catch (error) {
|
|
Message.error(getErrorMessage(error, "退款登记失败，重试会复用同一请求号"));
|
|
} finally {
|
|
saving.value = false;
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
if (!userStore.hasPermissions(permissionCodes.fund.refund)) return;
|
|
navBarStore.setRightText("提交", "var(--td-error-color)", save);
|
|
await loadData();
|
|
});
|
|
onUnmounted(() => navBarStore.clearRight());
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.sales-order-operation {
|
|
gap: 1rem;
|
|
padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.form {
|
|
margin: 0 1rem;
|
|
padding: 0 .5rem;
|
|
background: var(--td-bg-color-container);
|
|
box-shadow: var(--td-shadow-1);
|
|
border-radius: 1rem;
|
|
overflow: hidden;
|
|
|
|
.reason {
|
|
gap: .5rem;
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.time-actions {
|
|
gap: .5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.photo-field {
|
|
padding: 0 1rem;
|
|
}
|
|
}
|
|
</style>
|