add product
This commit is contained in:
Timi
@@ -274,6 +274,9 @@ const customerDisplayText = computed(() => {
|
||||
|
||||
async function handleCustomerChange(value: string | string[]): Promise<void> {
|
||||
selectedCustomerIdList.value = Array.isArray(value) ? value : [value];
|
||||
if (isPackagePurchaseSelected.value) {
|
||||
resetPackageRequestNo();
|
||||
}
|
||||
await loadSelectedCustomerList();
|
||||
await loadRecentRecordList();
|
||||
}
|
||||
@@ -601,6 +604,7 @@ const {
|
||||
handleEventSelectionChange,
|
||||
applySelectedPackageEvent,
|
||||
resetPackagePurchaseForm,
|
||||
resetPackageRequestNo,
|
||||
submitPackagePurchase,
|
||||
validatePackagePurchaseForm
|
||||
} = usePackagePurchaseRecord({
|
||||
@@ -635,8 +639,9 @@ async function submitRecord(): Promise<void> {
|
||||
return;
|
||||
}
|
||||
|
||||
const packageResult = isPackagePurchaseSelected.value ? await submitPackagePurchase() : undefined;
|
||||
const success = isPackagePurchaseSelected.value
|
||||
? await submitPackagePurchase()
|
||||
? !!packageResult?.id
|
||||
: await submitEventRecords();
|
||||
if (!success) {
|
||||
return;
|
||||
@@ -645,6 +650,10 @@ async function submitRecord(): Promise<void> {
|
||||
await loadRecentRecordList();
|
||||
await settingStore.playRegisterSuccessSound();
|
||||
Message.success(isPackagePurchaseSelected.value ? "套餐购买已提交" : "登记已提交");
|
||||
if (packageResult?.id) {
|
||||
await router.replace(`/management/customer-packages/${packageResult.id}`);
|
||||
return;
|
||||
}
|
||||
await router.replace("/customers");
|
||||
} finally {
|
||||
isSaving.value = false;
|
||||
|
||||
@@ -718,7 +718,7 @@ onUnmounted(() => {
|
||||
flex-direction: column;
|
||||
|
||||
.search-input {
|
||||
--td-input-vertical-padding: 8px;
|
||||
--td-input-vertical-padding: 8px 14px;
|
||||
|
||||
border: 1px solid rgba(148, 163, 184, .28);
|
||||
z-index: 1;
|
||||
|
||||
@@ -29,9 +29,9 @@
|
||||
</div>
|
||||
<t-form-item
|
||||
v-for="(item, index) in itemList"
|
||||
:key="`${index}-${item.productName}-${item.unit}`"
|
||||
:key="`${index}-${item.productId}-${item.productUnitId}`"
|
||||
class="item"
|
||||
:label="item.productName"
|
||||
:label="getItemLabel(item)"
|
||||
>
|
||||
<t-input
|
||||
:model-value="item.totalQuantity"
|
||||
@@ -43,7 +43,7 @@
|
||||
@update:model-value="updateItemQuantity(index, $event)"
|
||||
>
|
||||
<template #suffix-icon>
|
||||
<span class="unit" v-text="item.unit" />
|
||||
<span class="unit" v-text="getItemUnit(item)" />
|
||||
</template>
|
||||
</t-input>
|
||||
</t-form-item>
|
||||
@@ -68,6 +68,15 @@ const props = defineProps<Props>();
|
||||
const saleAmount = defineModel<string>("saleAmount", { required: true });
|
||||
const itemList = defineModel<PackagePurchaseItem[]>("itemList", { required: true });
|
||||
|
||||
function getItemLabel(item: PackagePurchaseItem): string {
|
||||
const configItem = props.packageConfig?.itemList?.find(config => config.productId === item.productId && config.productUnitId === item.productUnitId);
|
||||
return configItem ? `${configItem.productNameSnapshot || "未命名产品"} · ${configItem.unitSnapshot || "未设置单位"}` : "产品权益";
|
||||
}
|
||||
|
||||
function getItemUnit(item: PackagePurchaseItem): string {
|
||||
return props.packageConfig?.itemList?.find(config => config.productId === item.productId && config.productUnitId === item.productUnitId)?.unitSnapshot || "";
|
||||
}
|
||||
|
||||
function updateItemQuantity(index: number, value: string | number): void {
|
||||
itemList.value = itemList.value.map((item, itemIndex) => itemIndex === index ? {
|
||||
...item,
|
||||
|
||||
@@ -2,7 +2,7 @@ import { computed, ref, type Ref } from "vue";
|
||||
import PackageAPI from "@/api/PackageAPI";
|
||||
import type { Customer } from "@/types/Customer";
|
||||
import type { EventItem } from "@/types/EventItem";
|
||||
import type { PackagePurchaseItem } from "@/types/Package";
|
||||
import type { GaoCustomerPackage, PackagePurchaseItem } from "@/types/Package";
|
||||
import { isPackagePurchaseEvent } from "@/utils/event";
|
||||
import { createPackageRequestNo, formatPackageAmountInput, normalizePackageQuantity, parsePackageAmount } from "@/utils/package";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
@@ -37,6 +37,7 @@ export function usePackagePurchaseRecord(options: UsePackagePurchaseRecordOption
|
||||
const canPriceOverride = computed(() => options.hasPermission(permissionCodes.customerPackage.priceOverride));
|
||||
const saleAmountText = ref("");
|
||||
const packagePurchaseItemList = ref<PackagePurchaseItem[]>([]);
|
||||
const packageRequestNo = ref("");
|
||||
|
||||
function handleEventSelectionChange(eventIdList: string[]): void {
|
||||
const packageEvent = eventIdList
|
||||
@@ -65,8 +66,8 @@ export function usePackagePurchaseRecord(options: UsePackagePurchaseRecordOption
|
||||
|
||||
saleAmountText.value = formatPackageAmountInput(config.standardAmount);
|
||||
packagePurchaseItemList.value = (config.itemList || []).map((item, index) => ({
|
||||
productName: item.productName,
|
||||
unit: item.unit,
|
||||
productId: item.productId,
|
||||
productUnitId: item.productUnitId,
|
||||
totalQuantity: normalizePackageQuantity(item.defaultQuantity) || "",
|
||||
sort: item.sort ?? index,
|
||||
remark: item.remark ?? null
|
||||
@@ -76,25 +77,33 @@ export function usePackagePurchaseRecord(options: UsePackagePurchaseRecordOption
|
||||
function resetPackagePurchaseForm(): void {
|
||||
saleAmountText.value = "";
|
||||
packagePurchaseItemList.value = [];
|
||||
packageRequestNo.value = "";
|
||||
}
|
||||
|
||||
async function submitPackagePurchase(): Promise<boolean> {
|
||||
function resetPackageRequestNo(): void {
|
||||
packageRequestNo.value = "";
|
||||
}
|
||||
|
||||
async function submitPackagePurchase(): Promise<GaoCustomerPackage | undefined> {
|
||||
const eventId = selectedPackageEvent.value?.id;
|
||||
const customerId = options.selectedCustomerList.value[0]?.id;
|
||||
const saleAmount = parsePackageAmount(saleAmountText.value);
|
||||
if (!eventId || !customerId || saleAmount === undefined) {
|
||||
return false;
|
||||
return undefined;
|
||||
}
|
||||
|
||||
await PackageAPI.purchase({
|
||||
requestNo: createPackageRequestNo(),
|
||||
if (!packageRequestNo.value) {
|
||||
packageRequestNo.value = createPackageRequestNo();
|
||||
}
|
||||
const result = await PackageAPI.purchase({
|
||||
requestNo: packageRequestNo.value,
|
||||
eventId,
|
||||
customerId,
|
||||
saleAmount,
|
||||
purchasedAt: options.buildRegisteredAt(),
|
||||
itemList: packagePurchaseItemList.value.map((item, index) => ({
|
||||
productName: item.productName.trim(),
|
||||
unit: item.unit.trim(),
|
||||
productId: item.productId,
|
||||
productUnitId: item.productUnitId,
|
||||
totalQuantity: normalizePackageQuantity(item.totalQuantity)!,
|
||||
sort: item.sort ?? index,
|
||||
remark: item.remark ?? null
|
||||
@@ -105,7 +114,7 @@ export function usePackagePurchaseRecord(options: UsePackagePurchaseRecordOption
|
||||
})),
|
||||
remark: options.note.value.trim() || null
|
||||
});
|
||||
return true;
|
||||
return result;
|
||||
}
|
||||
|
||||
function validatePackagePurchaseForm(): boolean {
|
||||
@@ -135,8 +144,8 @@ export function usePackagePurchaseRecord(options: UsePackagePurchaseRecordOption
|
||||
}
|
||||
for (const item of packagePurchaseItemList.value) {
|
||||
const quantity = normalizePackageQuantity(item.totalQuantity);
|
||||
if (!item.productName.trim() || !item.unit.trim() || !quantity || quantity === "0") {
|
||||
Message.warning("产品名称、单位和正数量不能为空");
|
||||
if (!item.productId || !item.productUnitId || !quantity || quantity === "0") {
|
||||
Message.warning("产品单位和正数量不能为空");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@@ -159,6 +168,7 @@ export function usePackagePurchaseRecord(options: UsePackagePurchaseRecordOption
|
||||
handleEventSelectionChange,
|
||||
applySelectedPackageEvent,
|
||||
resetPackagePurchaseForm,
|
||||
resetPackageRequestNo,
|
||||
submitPackagePurchase,
|
||||
validatePackagePurchaseForm
|
||||
};
|
||||
|
||||
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.orderFulfillment.create" class="fulfillment-create">
|
||||
<t-cell-group title="履约来源" theme="card">
|
||||
<t-cell title="销售订单" :note="order?.orderNo || order?.id || '请选择直接产品订单'" arrow @click="openOrderPicker" />
|
||||
<t-cell title="客户" :note="order?.customer?.name || order?.customerId || '未选择'" />
|
||||
<t-cell title="来源类型" :note="isPackage ? '套餐权益' : '直接产品'" />
|
||||
</t-cell-group>
|
||||
<t-cell-group v-if="sourceItems.length" title="本次履约明细" theme="card">
|
||||
<t-cell v-for="item in sourceItems" :key="item.id" class="item">
|
||||
<template #title><strong v-text="getItemTitle(item)" /></template>
|
||||
<template #description><span v-text="getItemDescription(item)" /></template>
|
||||
<template #note><t-input v-model.trim="quantityMap[item.id || '']" class="quantity" type="number" borderless align="right" placeholder="数量" /></template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<div v-else class="empty" v-text="order ? '该订单暂无可履约明细，请从客户套餐或订单详情进入' : '请先选择销售订单'" />
|
||||
<t-form class="form" label-align="left" label-width="6rem">
|
||||
<t-form-item label="履约时间" content-align="right"><t-button theme="primary" variant="outline" size="small" :content="deliveredAtText || '此刻'" @click="pickerVisible = true" /></t-form-item>
|
||||
<t-form-item label="备注"><t-textarea v-model.trim="remark" borderless autosize maxlength="500" /></t-form-item>
|
||||
</t-form>
|
||||
<package-photo-field v-if="order" v-model="photoItems" required title="履约凭证照片" />
|
||||
<t-popup v-model="pickerVisible" placement="bottom">
|
||||
<t-date-time-picker v-model="draftTime" format="YYYY-MM-DD HH:mm" :mode="['date', 'minute']" title="履约时间" @cancel="pickerVisible = false" @confirm="confirmTime" />
|
||||
</t-popup>
|
||||
<t-popup v-model="orderPickerVisible" placement="bottom" :style="{height: '75vh'}">
|
||||
<div class="order-picker">
|
||||
<div class="picker-title" v-text="'选择进行中的直接产品订单'" />
|
||||
<t-cell-group v-if="orderOptions.length" theme="card">
|
||||
<t-cell
|
||||
v-for="item in orderOptions"
|
||||
:key="item.id"
|
||||
:title="item.orderNo || item.id"
|
||||
:description="item.customer?.name || item.customerId || '未知客户'"
|
||||
:note="formatPackageAmount(item.saleAmount)"
|
||||
arrow
|
||||
@click="selectOrder(item)"
|
||||
/>
|
||||
</t-cell-group>
|
||||
<div v-else class="empty" v-text="orderLoading ? '正在加载订单' : '暂无可履约的直接产品订单'" />
|
||||
</div>
|
||||
</t-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import PackageAPI from "@/api/PackageAPI";
|
||||
import SalesOrderAPI from "@/api/SalesOrderAPI";
|
||||
import FulfillmentAPI from "@/api/FulfillmentAPI";
|
||||
import PackagePhotoField from "@/components/PackagePhotoField.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { CustomerPackageItem, GaoCustomerPackage } from "@/types/Package";
|
||||
import type { OrderFulfillmentItemRequest } from "@/types/Fulfillment";
|
||||
import type { SalesOrder, SalesOrderItem } from "@/types/SalesOrder";
|
||||
import type { PhotoItem } from "@/types/Photo";
|
||||
import type { Attachment } from "timi-web-api";
|
||||
import { createPackageRequestNo, formatPackageAmount, getPackageQuantityText, normalizePackageQuantity } from "@/utils/package";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
type SourceItem = SalesOrderItem | CustomerPackageItem;
|
||||
defineOptions({ name: "OrderFulfillmentCreate" });
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
const order = ref<SalesOrder>();
|
||||
const customerPackage = ref<GaoCustomerPackage>();
|
||||
const quantityMap = reactive<Record<string, string>>({});
|
||||
const deliveredAtText = ref("");
|
||||
const draftTime = ref("");
|
||||
const pickerVisible = ref(false);
|
||||
const remark = ref("");
|
||||
const requestNo = ref("");
|
||||
const isSaving = ref(false);
|
||||
const photoItems = ref<PhotoItem[]>([]);
|
||||
const orderPickerVisible = ref(false);
|
||||
const orderLoading = ref(false);
|
||||
const orderOptions = ref<SalesOrder[]>([]);
|
||||
const isPackage = computed(() => !!customerPackage.value);
|
||||
const sourceItems = computed<SourceItem[]>(() => customerPackage.value?.itemList || order.value?.itemList || []);
|
||||
async function loadData(): Promise<void> {
|
||||
const salesOrderId = String(route.query.salesOrderId || "");
|
||||
const customerPackageId = String(route.query.customerPackageId || "");
|
||||
if (!salesOrderId) return;
|
||||
try {
|
||||
order.value = await SalesOrderAPI.detail(salesOrderId);
|
||||
if (customerPackageId) customerPackage.value = await PackageAPI.customerPackageDetail(customerPackageId);
|
||||
} catch (error) { Message.error(getErrorMessage(error, "履约来源加载失败")); }
|
||||
}
|
||||
function getItemTitle(item: SourceItem): string { return `${item.productNameSnapshot || "未命名产品"} · ${item.unitSnapshot || "未设置单位"}`; }
|
||||
function getItemDescription(item: SourceItem): string {
|
||||
return isPackage.value
|
||||
? `可履约 ${getPackageQuantityText((item as CustomerPackageItem).availableQuantity)}`
|
||||
: `待履约 ${getPackageQuantityText((item as SalesOrderItem).reservedQuantity)}`;
|
||||
}
|
||||
function confirmTime(value: string | number): void { deliveredAtText.value = String(value); pickerVisible.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" }] : []);
|
||||
}
|
||||
function validate(): boolean {
|
||||
if (!order.value?.id) { Message.warning("请先从订单详情进入履约创建"); return false; }
|
||||
if (!buildAttachments().length) { Message.warning("履约必须上传至少一张照片"); return false; }
|
||||
const selected = sourceItems.value.filter(item => !!item.id && quantityMap[item.id]);
|
||||
if (!selected.length) { Message.warning("请填写至少一项履约数量"); return false; }
|
||||
for (const item of selected) { if (!normalizePackageQuantity(quantityMap[item.id || ""])) { Message.warning("履约数量必须是正数，最多三位小数"); return false; } }
|
||||
return true;
|
||||
}
|
||||
async function save(): Promise<void> {
|
||||
if (isSaving.value || !validate()) return;
|
||||
if (!requestNo.value) requestNo.value = createPackageRequestNo();
|
||||
isSaving.value = true;
|
||||
try {
|
||||
const itemList: OrderFulfillmentItemRequest[] = sourceItems.value
|
||||
.filter(item => !!item.id && quantityMap[item.id])
|
||||
.map(item => ({
|
||||
...(isPackage.value ? { sourceCustomerPackageItemId: item.id } : { sourceOrderItemId: item.id }),
|
||||
quantity: normalizePackageQuantity(quantityMap[item.id || ""])!
|
||||
}));
|
||||
const result = await FulfillmentAPI.create({
|
||||
salesOrderId: order.value!.id!,
|
||||
requestNo: requestNo.value,
|
||||
deliveredAt: resolveTimestamp(deliveredAtText.value),
|
||||
itemList,
|
||||
attachmentList: buildAttachments(),
|
||||
remark: remark.value.trim() || null
|
||||
});
|
||||
Message.success("履约单已提交"); await router.replace(`/management/order-fulfillments/${result.id}`);
|
||||
} catch (error) { Message.error(getErrorMessage(error, "履约单创建失败，重试会复用同一请求号")); } finally { isSaving.value = false; }
|
||||
}
|
||||
async function openOrderPicker(): Promise<void> {
|
||||
if (order.value?.id) {
|
||||
await router.push(`/management/sales-orders/${order.value.id}`);
|
||||
return;
|
||||
}
|
||||
orderPickerVisible.value = true;
|
||||
if (orderOptions.value.length) return;
|
||||
orderLoading.value = true;
|
||||
try {
|
||||
const result = await SalesOrderAPI.list({ index: 0, size: 100, orderType: "DIRECT_PRODUCT", status: "ACTIVE" });
|
||||
orderOptions.value = result.list || [];
|
||||
} catch (error) { Message.error(getErrorMessage(error, "可履约订单加载失败")); }
|
||||
finally { orderLoading.value = false; }
|
||||
}
|
||||
async function selectOrder(item: SalesOrder): Promise<void> {
|
||||
if (!item.id) return;
|
||||
order.value = item;
|
||||
orderPickerVisible.value = false;
|
||||
for (const key of Object.keys(quantityMap)) delete quantityMap[key];
|
||||
await router.replace({ query: { salesOrderId: item.id } });
|
||||
}
|
||||
onMounted(async () => { navBarStore.setRightText("提交履约", "var(--td-brand-color)", save); await loadData(); });
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.fulfillment-create { gap: 1rem; padding: calc(var(--app-nav-height) + 1rem) 0 2rem; display: flex; flex-direction: column;
|
||||
.item .quantity { width: 7rem; }
|
||||
.form { padding: 0 1rem; }
|
||||
.empty { color: var(--td-text-color-secondary); padding: 2rem 1rem; text-align: center; }
|
||||
.order-picker { height: 100%; overflow: auto; padding: 1rem 0; }
|
||||
.picker-title { padding: 0 1rem 1rem; font-weight: 700; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.orderFulfillment.read" class="fulfillment-detail">
|
||||
<template v-if="fulfillment">
|
||||
<t-cell-group title="履约单信息" theme="card" v-entrance-transition>
|
||||
<t-cell title="履约单号" :note="fulfillment.id" />
|
||||
<t-cell title="销售订单" :note="fulfillment.salesOrderId || '未知'" arrow @click="toOrder" />
|
||||
<t-cell title="履约类型" :note="getFulfillmentTypeText(fulfillment.fulfillmentType)" />
|
||||
<t-cell title="状态"><template #note><t-tag :content="getFulfillmentStatusText(fulfillment.status)" variant="light-outline" :theme="getStatusTheme(fulfillment.status)" /></template></t-cell>
|
||||
<t-cell title="履约时间" :note="fulfillment.deliveredAt ? Time.toDateTime(fulfillment.deliveredAt) : '未知'" />
|
||||
<t-cell title="提交人" :note="fulfillment.operator?.name || fulfillment.operatorUserId || '未知'" />
|
||||
<t-cell title="处理人" :note="fulfillment.verifier?.name || fulfillment.verifierUserId || '未处理'" />
|
||||
<t-cell v-if="fulfillment.reason" title="原因" :note="fulfillment.reason" />
|
||||
<t-cell v-if="fulfillment.remark" title="备注" :note="fulfillment.remark" />
|
||||
</t-cell-group>
|
||||
<t-cell-group title="履约明细" theme="card" v-entrance-transition="70">
|
||||
<t-cell
|
||||
v-for="item in fulfillment.itemList || []"
|
||||
:key="item.id"
|
||||
:title="`${item.productNameSnapshot || '未命名产品'} · ${item.unitSnapshot || ''}`"
|
||||
:description="`本次 ${item.quantity || 0} · 基础单位 ${item.baseQuantity || 0}`"
|
||||
:note="`待履约 ${item.reservedBefore || 0} → ${item.reservedAfter || 0}`"
|
||||
/>
|
||||
<t-cell v-if="!fulfillment.itemList?.length" title="暂无履约明细" />
|
||||
</t-cell-group>
|
||||
<section class="actions" v-entrance-transition="140">
|
||||
<t-button v-if="isWaitingStock && canVerify" theme="primary" @click="prepareStock">准备库存</t-button>
|
||||
<t-button v-if="isPending && canVerify" theme="primary" @click="verify">核销履约</t-button>
|
||||
<t-button v-if="isPending && canVerify" theme="default" variant="outline" @click="openReason('reject')">拒绝履约</t-button>
|
||||
<t-button v-if="isPending && canCreate" theme="default" variant="outline" @click="openReason('cancel')">撤销履约</t-button>
|
||||
<t-button v-if="isVerified && canRevoke" theme="danger" variant="outline" @click="openRevoke">履约冲正</t-button>
|
||||
</section>
|
||||
</template>
|
||||
<t-empty v-else :description="loading ? '正在加载履约单' : '履约单不存在'" />
|
||||
<t-dialog
|
||||
v-model:visible="reasonVisible"
|
||||
:title="reasonAction === 'reject' ? '拒绝履约' : '撤销履约'"
|
||||
:confirm-btn="reasonAction === 'reject' ? '拒绝' : '撤销'"
|
||||
@confirm="submitReason"
|
||||
>
|
||||
<t-textarea v-model.trim="reason" borderless autosize placeholder="请输入原因" />
|
||||
</t-dialog>
|
||||
<bottom-popup
|
||||
v-model="revokeVisible"
|
||||
title="履约冲正"
|
||||
height="min(55vh, 32rem)"
|
||||
left-button-text="取消"
|
||||
right-button-text="提交"
|
||||
@left-button-click="revokeVisible = false"
|
||||
@right-button-click="submitRevoke"
|
||||
>
|
||||
<t-form label-align="top">
|
||||
<t-form-item label="冲正原因" required-mark><t-textarea v-model.trim="revokeReason" borderless autosize /></t-form-item>
|
||||
<t-form-item label="库存是否退回门店"><t-switch v-model="returnedToStore" /></t-form-item>
|
||||
</t-form>
|
||||
<package-photo-field v-model="photoItems" required title="冲正凭证照片" />
|
||||
</bottom-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { BottomPopup } from "timi-tdesign-mobile";
|
||||
import { Time } from "timi-web";
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import FulfillmentAPI from "@/api/FulfillmentAPI";
|
||||
import PackagePhotoField from "@/components/PackagePhotoField.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { OrderFulfillment } from "@/types/Fulfillment";
|
||||
import type { PhotoItem } from "@/types/Photo";
|
||||
import type { Attachment } from "timi-web-api";
|
||||
import { createPackageRequestNo } from "@/utils/package";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { getFulfillmentStatusText, getFulfillmentTypeText, getStatusTheme } from "@/utils/salesOrder";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
type ReasonAction = "reject" | "cancel";
|
||||
defineOptions({ name: "OrderFulfillmentDetail" });
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
const userStore = useUserStore();
|
||||
const fulfillment = ref<OrderFulfillment>();
|
||||
const loading = ref(false);
|
||||
const operating = ref(false);
|
||||
const reasonVisible = ref(false);
|
||||
const reasonAction = ref<ReasonAction>("reject");
|
||||
const reason = ref("");
|
||||
const revokeVisible = ref(false);
|
||||
const revokeReason = ref("");
|
||||
const returnedToStore = ref(true);
|
||||
const revokeRequestNo = ref("");
|
||||
const photoItems = ref<PhotoItem[]>([]);
|
||||
const isWaitingStock = computed(() => fulfillment.value?.status === "WAITING_STOCK");
|
||||
const isPending = computed(() => fulfillment.value?.status === "PENDING");
|
||||
const isVerified = computed(() => fulfillment.value?.status === "VERIFIED");
|
||||
const canVerify = computed(() => userStore.hasPermissions(permissionCodes.orderFulfillment.verify));
|
||||
const canCreate = computed(() => userStore.hasPermissions(permissionCodes.orderFulfillment.create));
|
||||
const canRevoke = computed(() => userStore.hasPermissions(permissionCodes.orderFulfillment.revoke));
|
||||
async function loadData(): Promise<void> {
|
||||
const id = String(route.params.id || "");
|
||||
if (!id) return;
|
||||
loading.value = true;
|
||||
try { fulfillment.value = await FulfillmentAPI.detail(id); }
|
||||
catch (error) { Message.error(getErrorMessage(error, "履约单加载失败")); }
|
||||
finally { loading.value = false; }
|
||||
}
|
||||
async function toOrder(): Promise<void> {
|
||||
if (fulfillment.value?.salesOrderId) await router.push(`/management/sales-orders/${fulfillment.value.salesOrderId}`);
|
||||
}
|
||||
async function prepareStock(): Promise<void> {
|
||||
if (!fulfillment.value?.id || operating.value) return;
|
||||
operating.value = true;
|
||||
try {
|
||||
await FulfillmentAPI.prepareStock({ fulfillmentId: fulfillment.value.id });
|
||||
Message.success("库存准备已提交");
|
||||
await loadData();
|
||||
} catch (error) { Message.error(getErrorMessage(error, "库存准备失败")); }
|
||||
finally { operating.value = false; }
|
||||
}
|
||||
async function verify(): Promise<void> {
|
||||
if (!fulfillment.value?.id || operating.value) return;
|
||||
operating.value = true;
|
||||
try {
|
||||
await FulfillmentAPI.verify({ fulfillmentId: fulfillment.value.id, reason: "" });
|
||||
Message.success("履约已核销");
|
||||
await loadData();
|
||||
} catch (error) { Message.error(getErrorMessage(error, "履约核销失败")); }
|
||||
finally { operating.value = false; }
|
||||
}
|
||||
function openReason(action: ReasonAction): void { reasonAction.value = action; reason.value = ""; reasonVisible.value = true; }
|
||||
async function submitReason(): Promise<void> {
|
||||
if (!fulfillment.value?.id || !reason.value || operating.value) return;
|
||||
operating.value = true;
|
||||
try {
|
||||
const payload = { fulfillmentId: fulfillment.value.id, reason: reason.value.trim() };
|
||||
if (reasonAction.value === "reject") await FulfillmentAPI.reject(payload);
|
||||
else await FulfillmentAPI.cancel(payload);
|
||||
reasonVisible.value = false;
|
||||
Message.success(reasonAction.value === "reject" ? "履约已拒绝" : "履约已撤销");
|
||||
await loadData();
|
||||
} catch (error) { Message.error(getErrorMessage(error, "履约状态操作失败")); }
|
||||
finally { operating.value = false; }
|
||||
}
|
||||
function openRevoke(): void { revokeReason.value = ""; returnedToStore.value = true; revokeRequestNo.value = ""; photoItems.value = []; revokeVisible.value = true; }
|
||||
function buildAttachments(): Partial<Attachment>[] {
|
||||
return photoItems.value.flatMap(item => item.tempFileId ? [{ tempFileId: item.tempFileId, attachType: "PHOTO" }] : []);
|
||||
}
|
||||
async function submitRevoke(): Promise<void> {
|
||||
if (!fulfillment.value?.id || !revokeReason.value || operating.value) return;
|
||||
if (fulfillment.value.stockRecordList?.length && !buildAttachments().length) { Message.warning("实物履约冲正必须上传退回照片"); return; }
|
||||
if (!revokeRequestNo.value) revokeRequestNo.value = createPackageRequestNo();
|
||||
operating.value = true;
|
||||
try {
|
||||
await FulfillmentAPI.revoke({
|
||||
fulfillmentId: fulfillment.value.id,
|
||||
requestNo: revokeRequestNo.value,
|
||||
reason: revokeReason.value.trim(),
|
||||
returnedToStore: returnedToStore.value,
|
||||
attachmentList: buildAttachments()
|
||||
});
|
||||
revokeVisible.value = false;
|
||||
Message.success("履约单已冲正");
|
||||
await loadData();
|
||||
} catch (error) { Message.error(getErrorMessage(error, "履约冲正失败，重试会复用同一请求号")); }
|
||||
finally { operating.value = false; }
|
||||
}
|
||||
onMounted(loadData);
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.fulfillment-detail { gap: 1rem; padding: calc(var(--app-nav-height) + 1rem) 0 2rem; display: flex; flex-direction: column;
|
||||
.actions { gap: .5rem; padding: 0 1rem; display: flex; flex-wrap: wrap; }
|
||||
.actions .t-button { flex: 1 1 8rem; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.orderFulfillment.read" class="fulfillment-list">
|
||||
<div class="filters">
|
||||
<t-dropdown-menu>
|
||||
<t-dropdown-item v-model="type" label="履约类型" :options="typeOptions" @change="selectType" />
|
||||
<t-dropdown-item v-model="status" label="履约状态" :options="statusOptions" @change="selectStatus" />
|
||||
</t-dropdown-menu>
|
||||
</div>
|
||||
<t-pull-down-refresh v-model="refreshing" :refresh-timeout="30000" @refresh="refresh" @scrolltolower="loadMore">
|
||||
<t-cell-group v-if="list.length" theme="card">
|
||||
<t-cell v-for="(item, index) in list" :key="item.id" arrow hover v-entrance-transition="index * 30" @click="toDetail(item)">
|
||||
<template #title>
|
||||
<div class="title">
|
||||
<strong v-text="item.id || '履约单'" />
|
||||
<t-tag :content="getFulfillmentStatusText(item.status)" variant="light-outline" :theme="getStatusTheme(item.status)" />
|
||||
</div>
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="description">
|
||||
<span v-text="getFulfillmentTypeText(item.fulfillmentType)" />
|
||||
<span v-text="`订单：${item.salesOrderId || '未知'}`" />
|
||||
<span v-text="`${(item.itemList || []).length} 项`" />
|
||||
</div>
|
||||
</template>
|
||||
<template #note><span v-text="item.deliveredAt ? Time.toDateTime(item.deliveredAt) : '时间未知'" /></template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<div v-else class="empty" v-text="loading ? '正在加载履约单' : '暂无履约单'" />
|
||||
<div class="center-tips" v-text="loading ? '正在加载' : noMore ? '已经到底了' : '上拉加载更多'" />
|
||||
</t-pull-down-refresh>
|
||||
</div>
|
||||
<nav-bar-action-menu v-if="canCreate" :actions="actions" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type DropdownValue } from "tdesign-mobile-vue";
|
||||
import { Time } from "timi-web";
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import FulfillmentAPI from "@/api/FulfillmentAPI";
|
||||
import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { FulfillmentStatus, FulfillmentType, OrderFulfillment } from "@/types/Fulfillment";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { getFulfillmentStatusText, getFulfillmentTypeText, getStatusTheme } from "@/utils/salesOrder";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
defineOptions({ name: "OrderFulfillmentList" });
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
const userStore = useUserStore();
|
||||
const canCreate = computed(() => userStore.hasPermissions(permissionCodes.orderFulfillment.create));
|
||||
const actions = computed(() => canCreate.value ? [{ key: "create", text: "创建履约单", icon: "add", theme: "primary" as const, action: toCreate }] : []);
|
||||
const type = ref("ALL");
|
||||
const status = ref(String(route.query.status || "ALL"));
|
||||
const list = ref<OrderFulfillment[]>([]);
|
||||
const pageIndex = ref(0);
|
||||
const total = ref(0);
|
||||
const loading = ref(false);
|
||||
const refreshing = ref(false);
|
||||
const noMore = ref(false);
|
||||
const pageSize = 15;
|
||||
const typeOptions = [{ label: "全部类型", value: "ALL" }, { label: "套餐权益", value: "PACKAGE_ENTITLEMENT" }, { label: "直接产品", value: "DIRECT_PRODUCT" }];
|
||||
const statusOptions = [
|
||||
{ label: "全部状态", value: "ALL" },
|
||||
{ label: "等待库存", value: "WAITING_STOCK" },
|
||||
{ label: "待核销", value: "PENDING" },
|
||||
{ label: "已核销", value: "VERIFIED" },
|
||||
{ label: "已拒绝", value: "REJECTED" },
|
||||
{ label: "已撤销", value: "CANCELLED" },
|
||||
{ label: "已冲正", value: "REVOKED" }
|
||||
];
|
||||
async function fetchList(reset: boolean): Promise<void> {
|
||||
if (loading.value || (!reset && noMore.value)) return;
|
||||
if (reset) { pageIndex.value = 0; total.value = 0; noMore.value = false; list.value = []; }
|
||||
loading.value = true;
|
||||
try {
|
||||
const result = await FulfillmentAPI.list({
|
||||
index: pageIndex.value,
|
||||
size: pageSize,
|
||||
salesOrderId: String(route.query.salesOrderId || "") || undefined,
|
||||
fulfillmentType: type.value === "ALL" ? undefined : type.value as FulfillmentType,
|
||||
status: status.value === "ALL" ? undefined : status.value as FulfillmentStatus
|
||||
});
|
||||
const rows = result.list || [];
|
||||
list.value = reset ? rows : list.value.concat(rows);
|
||||
total.value = result.total || 0;
|
||||
pageIndex.value += 1;
|
||||
noMore.value = rows.length < pageSize || total.value <= list.value.length;
|
||||
} finally { loading.value = false; }
|
||||
}
|
||||
async function refresh(): Promise<void> { try { await fetchList(true); } catch (error) { Message.error(getErrorMessage(error, "履约单加载失败")); } finally { refreshing.value = false; } }
|
||||
async function loadMore(): Promise<void> { try { await fetchList(false); } catch (error) { Message.error(getErrorMessage(error, "履约单加载失败")); } }
|
||||
async function selectType(value: DropdownValue): Promise<void> { if (!Array.isArray(value)) { type.value = String(value); await fetchList(true); } }
|
||||
async function selectStatus(value: DropdownValue): Promise<void> { if (!Array.isArray(value)) { status.value = String(value); await fetchList(true); } }
|
||||
async function toDetail(item: OrderFulfillment): Promise<void> { if (item.id) await router.push(`/management/order-fulfillments/${item.id}`); }
|
||||
async function toCreate(): Promise<void> { await router.push("/management/order-fulfillments/create"); }
|
||||
onMounted(async () => { navBarStore.clearRight(); navBarStore.setCustomRightVisible(canCreate.value); try { await fetchList(true); } catch (error) { Message.error(getErrorMessage(error, "履约单加载失败")); } });
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.fulfillment-list { padding: var(--app-nav-height) 0 1rem;
|
||||
.filters { top: var(--app-nav-height); z-index: 10; padding: .75rem 1rem; position: sticky; background: #f5f5f8; box-shadow: var(--td-shadow-1); }
|
||||
.title, .description { gap: .5rem; display: flex; align-items: center; }
|
||||
.description { color: var(--td-text-color-secondary); flex-wrap: wrap; }
|
||||
.empty { color: var(--td-text-color-secondary); padding: 3rem 1rem; text-align: center; }
|
||||
}
|
||||
</style>
|
||||
@@ -1,242 +0,0 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.packageDelivery.create" class="package-operation-edit">
|
||||
<t-cell-group v-if="customerPackage" title="发放前状态（以提交时后端校验为准）" theme="card" v-entrance-transition>
|
||||
<t-cell title="客户套餐" :note="customerPackage.packageNameSnapshot || '未命名套餐'" />
|
||||
<t-cell title="收款状态" :note="getPaymentStatusText(customerPackage.paymentStatus)" />
|
||||
</t-cell-group>
|
||||
<section v-if="customerPackage" class="items" v-entrance-transition="70">
|
||||
<div class="section-title"><strong>本次发放权益</strong><span>只能提交不超过可发数量的产品</span></div>
|
||||
<div v-for="item in customerPackage.itemList || []" :key="item.id" class="item">
|
||||
<div class="item-title"><strong v-text="`${item.productNameSnapshot}（${item.unitSnapshot}）`" /><span v-text="`可发 ${getPackageQuantityText(item.availableQuantity)}`" /></div>
|
||||
<t-input v-model.trim="quantityMap[item.id || '']" type="number" borderless placeholder="本次发放数量，不填表示不发放" />
|
||||
</div>
|
||||
</section>
|
||||
<t-form v-if="customerPackage" class="form" label-align="left" label-width="6rem" v-entrance-transition="140">
|
||||
<t-form-item label="发放时间" arrow @click="deliveredPickerVisible = true">
|
||||
<span class="picker-text" v-text="deliveredAtText || '使用当前时间'" />
|
||||
</t-form-item>
|
||||
<t-form-item label="备注">
|
||||
<t-textarea v-model.trim="remark" borderless autosize maxlength="500" placeholder="发放备注" />
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
<package-photo-field v-if="customerPackage" v-model="photoItems" required title="发放照片" />
|
||||
<t-empty v-if="!customerPackage" :description="isLoading ? '正在加载套餐' : '套餐不存在'" />
|
||||
<t-popup v-model="deliveredPickerVisible" placement="bottom">
|
||||
<t-date-time-picker v-model="deliveredDraft" format="YYYY-MM-DD HH:mm" :mode="['date', 'minute']" title="发放时间" @cancel="deliveredPickerVisible = false" @confirm="confirmDeliveredAt" />
|
||||
</t-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import PackageAPI from "@/api/PackageAPI";
|
||||
import PackagePhotoField from "@/components/PackagePhotoField.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { GaoCustomerPackage, PackageAttachment } from "@/types/Package";
|
||||
import type { PhotoItem } from "@/types/Photo";
|
||||
import {
|
||||
canCreatePackageDelivery,
|
||||
comparePackageQuantity,
|
||||
createPackageRequestNo,
|
||||
getPackageQuantityText,
|
||||
getPaymentStatusText,
|
||||
isStoreManagerRequiredForPackageDelivery,
|
||||
normalizePackageQuantity
|
||||
} from "@/utils/package";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { Message } from "@/utils/message";
|
||||
import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
|
||||
|
||||
defineOptions({ name: "CustomerPackageDelivery" });
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const navBarStore = useNavBarStore();
|
||||
const customerPackage = ref<GaoCustomerPackage>();
|
||||
const quantityMap = reactive<Record<string, string>>({});
|
||||
const photoItems = ref<PhotoItem[]>([]);
|
||||
const remark = ref("");
|
||||
const deliveredAtText = ref("");
|
||||
const deliveredDraft = ref("");
|
||||
const deliveredPickerVisible = ref(false);
|
||||
const isLoading = ref(false);
|
||||
const isSaving = ref(false);
|
||||
const isStoreManager = computed(() => userStore.hasRoles(gaoRoleCodes.storeManager) && !userStore.hasRoles(gaoRoleCodes.globalManager));
|
||||
const canCreateDelivery = computed(() => canCreatePackageDelivery(customerPackage.value)
|
||||
&& (!isStoreManagerRequiredForPackageDelivery(customerPackage.value) || isStoreManager.value)
|
||||
&& userStore.hasPermissions(permissionCodes.packageDelivery.create));
|
||||
|
||||
function confirmDeliveredAt(value: string | number): void {
|
||||
deliveredAtText.value = String(value);
|
||||
deliveredPickerVisible.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(): PackageAttachment[] {
|
||||
return photoItems.value.flatMap(item => item.tempFileId ? [{ tempFileId: item.tempFileId, attachType: "PHOTO", name: item.attachment?.name }] : []);
|
||||
}
|
||||
|
||||
async function loadData(): Promise<void> {
|
||||
const id = String(route.params.id || "");
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
isLoading.value = true;
|
||||
try {
|
||||
customerPackage.value = await PackageAPI.customerPackageDetail(id);
|
||||
for (const item of customerPackage.value.itemList || []) {
|
||||
if (item.id) {
|
||||
quantityMap[item.id] = "";
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "套餐加载失败"));
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function validateItems(): Array<{ customerPackageItemId: string; quantity: string }> | undefined {
|
||||
const result: Array<{ customerPackageItemId: string; quantity: string }> = [];
|
||||
for (const item of customerPackage.value?.itemList || []) {
|
||||
if (!item.id) {
|
||||
continue;
|
||||
}
|
||||
const text = quantityMap[item.id] || "";
|
||||
if (!text.trim()) {
|
||||
continue;
|
||||
}
|
||||
const quantity = normalizePackageQuantity(text);
|
||||
if (!quantity || quantity === "0") {
|
||||
Message.warning(`${item.productNameSnapshot} 的数量必须是正数，最多三位小数`);
|
||||
return undefined;
|
||||
}
|
||||
if (comparePackageQuantity(quantity, item.availableQuantity) > 0) {
|
||||
Message.warning(`${item.productNameSnapshot} 的发放数量超过当前可发数量，请刷新后重新确认`);
|
||||
return undefined;
|
||||
}
|
||||
result.push({ customerPackageItemId: item.id, quantity });
|
||||
}
|
||||
if (!result.length) {
|
||||
Message.warning("请至少填写一项本次发放数量");
|
||||
return undefined;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
async function save(): Promise<void> {
|
||||
if (isSaving.value) {
|
||||
return;
|
||||
}
|
||||
const customerPackageId = customerPackage.value?.id;
|
||||
const itemList = validateItems();
|
||||
if (!customerPackageId || !itemList) {
|
||||
return;
|
||||
}
|
||||
if (!canCreatePackageDelivery(customerPackage.value)) {
|
||||
Message.warning("套餐未有已核销收款，不能提交发放");
|
||||
return;
|
||||
}
|
||||
if (isStoreManagerRequiredForPackageDelivery(customerPackage.value) && !isStoreManager.value) {
|
||||
Message.warning("部分收款套餐仅店长可发放");
|
||||
return;
|
||||
}
|
||||
if (!photoItems.value.some(item => item.tempFileId)) {
|
||||
Message.warning("发放必须上传至少一张照片");
|
||||
return;
|
||||
}
|
||||
isSaving.value = true;
|
||||
try {
|
||||
const result = await PackageAPI.createDelivery({
|
||||
requestNo: createPackageRequestNo(),
|
||||
customerPackageId,
|
||||
deliveredAt: resolveTimestamp(deliveredAtText.value),
|
||||
itemList,
|
||||
attachmentList: buildAttachments(),
|
||||
remark: remark.value.trim() || null
|
||||
});
|
||||
Message.success("发放单已提交，等待核销");
|
||||
await PackageAPI.customerPackageDetail(customerPackageId);
|
||||
if (result.id) {
|
||||
await router.replace(`/management/package-deliveries/${result.id}`);
|
||||
return;
|
||||
}
|
||||
await router.replace(`/management/customer-packages/${customerPackageId}`);
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "发放单提交失败，请刷新后确认状态"));
|
||||
} finally {
|
||||
isSaving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await loadData();
|
||||
if (canCreateDelivery.value) {
|
||||
navBarStore.setRightText("提交发放", "var(--td-brand-color)", save);
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.package-operation-edit {
|
||||
gap: 1rem;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.form {
|
||||
border-radius: .75rem;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.items,
|
||||
.package-photo-field {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: var(--td-text-color-secondary);
|
||||
margin-bottom: .5rem;
|
||||
font-size: .8125rem;
|
||||
}
|
||||
|
||||
.section-title span {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
.item {
|
||||
gap: .5rem;
|
||||
padding: .75rem;
|
||||
margin-bottom: .75rem;
|
||||
display: grid;
|
||||
background: var(--td-bg-color-container);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
border-radius: .75rem;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.item-title span {
|
||||
color: var(--td-brand-color);
|
||||
font-size: .75rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,238 +1,112 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.customerPackage.read" class="customer-package-detail">
|
||||
<template v-if="customerPackage">
|
||||
<customer-profile-card
|
||||
class="customer"
|
||||
:customer="customerPackage.customer"
|
||||
v-entrance-transition
|
||||
/>
|
||||
<t-cell-group
|
||||
class="package"
|
||||
theme="card"
|
||||
v-entrance-transition="70"
|
||||
>
|
||||
<customer-profile-card class="customer" :customer="customerPackage.customer" v-entrance-transition />
|
||||
<t-cell-group class="summary" theme="card" v-entrance-transition="70">
|
||||
<t-cell>
|
||||
<template #title>
|
||||
<div class="title">
|
||||
<h3 class="value" v-text="customerPackage.packageNameSnapshot || '未命名套餐'" />
|
||||
<strong v-text="customerPackage.packageNameSnapshot || '未命名套餐'" />
|
||||
<t-tag :content="getCustomerPackageStatusText(customerPackage.status)" variant="light-outline" :theme="getStatusTheme(customerPackage.status)" />
|
||||
</div>
|
||||
</template>
|
||||
<template #description>
|
||||
<span>购买于</span>
|
||||
<pass-time-label class="word-space" :timestamp="customerPackage.purchasedAt" underline />
|
||||
</template>
|
||||
<template #description><span>购买于 </span><pass-time-label :timestamp="order?.purchasedAt" underline /></template>
|
||||
</t-cell>
|
||||
<t-cell
|
||||
v-if="canReadPackageConfig && customerPackage.packageConfigId"
|
||||
title="套餐方案详情"
|
||||
arrow
|
||||
hover
|
||||
@click="toPackageConfigDetail"
|
||||
/>
|
||||
<t-cell
|
||||
v-if="canReadEventRecord && customerPackage.purchaseEventRecord?.id"
|
||||
title="购买登记记录"
|
||||
note="查看关联的事件登记记录"
|
||||
arrow
|
||||
@click="toPurchaseEventRecord"
|
||||
/>
|
||||
<t-cell v-if="customerPackage.salesOrderId && canReadOrder" title="销售订单" :note="order?.orderNo || customerPackage.salesOrderId" arrow @click="toOrder" />
|
||||
<t-cell v-if="canReadPackageConfig && customerPackage.packageConfigId" title="套餐方案详情" arrow @click="toPackageConfig" />
|
||||
<t-cell v-if="canReadEventRecord && customerPackage.purchaseEventRecord?.id" title="购买登记记录" arrow @click="toEventRecord" />
|
||||
</t-cell-group>
|
||||
<t-cell-group title="金额" theme="card" v-entrance-transition="140">
|
||||
<t-cell class="amount standard" title="标准价快照" :note="formatPackageAmount(customerPackage.standardAmountSnapshot)" />
|
||||
<t-cell class="amount sale" title="成交价" :note="formatPackageAmount(customerPackage.saleAmount)" />
|
||||
<t-cell class="amount paid" title="已核销收款" :note="formatPackageAmount(customerPackage.paidAmount)" />
|
||||
<t-cell class="amount pending" title="待核销收款" :note="formatPackageAmount(customerPackage.pendingPaidAmount)" />
|
||||
<t-cell class="amount remaining" title="剩余待收款" :note="formatPackageAmount(getRemainingReceivableAmount(customerPackage))" />
|
||||
<t-cell class="amount refunded" title="有效退款" :note="formatPackageAmount(customerPackage.refundedAmount)" />
|
||||
<t-cell
|
||||
v-if="canReadFund && 0 < (customerPackage.pendingPaidAmount || 0)"
|
||||
title="去核销收款"
|
||||
note="查看待核销的登记收款"
|
||||
arrow
|
||||
hover
|
||||
@click="toPendingFundList"
|
||||
/>
|
||||
<t-cell v-if="canReadFund" title="资金历史" arrow @click="toFundList" />
|
||||
<t-cell-group v-if="order" title="订单资金" theme="card" v-entrance-transition="140">
|
||||
<t-cell title="成交金额" :note="formatPackageAmount(order.saleAmount)" />
|
||||
<t-cell title="已生效收款" :note="formatPackageAmount(order.paidAmount)" />
|
||||
<t-cell title="待核销收款" :note="formatPackageAmount(order.pendingPaidAmount)" />
|
||||
<t-cell title="剩余待收款" :note="formatPackageAmount(order.unpaidAmount)" />
|
||||
<t-cell title="有效退款" :note="formatPackageAmount(order.refundedAmount)" />
|
||||
<t-cell title="收款状态" :note="getSalesPaymentStatusText(order.paymentStatus)" />
|
||||
<t-cell title="退款状态" :note="getSalesRefundStatusText(order.refundStatus)" />
|
||||
<t-cell v-if="canReadFund" title="资金流水" arrow @click="toFundRecords" />
|
||||
</t-cell-group>
|
||||
<t-button
|
||||
v-if="canReceivePayment"
|
||||
class="cell-button"
|
||||
theme="primary"
|
||||
@click="toPayment"
|
||||
v-entrance-transition="210"
|
||||
>登记收款</t-button>
|
||||
<t-cell-group title="状态" theme="card" v-entrance-transition="280">
|
||||
<t-cell title="收款状态" :note="getPaymentStatusText(customerPackage.paymentStatus)" />
|
||||
<t-cell title="退款状态" :note="getRefundStatusText(customerPackage.refundStatus)" />
|
||||
</t-cell-group>
|
||||
<card-container description="产品权益" v-entrance-transition="350">
|
||||
<card-container title="套餐权益" description="权益数量来自客户套餐快照，履约状态来自统一履约单" v-entrance-transition="210">
|
||||
<t-cell-group>
|
||||
<t-cell
|
||||
v-for="item in customerPackage.itemList || []"
|
||||
:key="item.id"
|
||||
class="benefit"
|
||||
>
|
||||
<template #title>
|
||||
<div class="title">
|
||||
<strong v-text="item.productNameSnapshot || '未命名产品'" />
|
||||
<t-tag theme="primary" variant="light" :content="item.unitSnapshot || '未设置单位'" />
|
||||
</div>
|
||||
</template>
|
||||
<t-cell v-for="item in customerPackage.itemList || []" :key="item.id" class="benefit">
|
||||
<template #title><div class="title"><strong v-text="item.productNameSnapshot || '未命名产品'" /><t-tag theme="primary" variant="light" :content="item.unitSnapshot || '未设置单位'" /></div></template>
|
||||
<template #description>
|
||||
<div class="stats">
|
||||
<div class="stat">
|
||||
<span>总数</span>
|
||||
<strong v-text="getPackageQuantityText(item.totalQuantity)" />
|
||||
</div>
|
||||
<div class="stat available">
|
||||
<span>可发</span>
|
||||
<strong v-text="getPackageQuantityText(item.availableQuantity)" />
|
||||
</div>
|
||||
<div class="stat pending">
|
||||
<span>待核销</span>
|
||||
<strong v-text="getPackageQuantityText(item.pendingQuantity)" />
|
||||
</div>
|
||||
<div class="stat delivered">
|
||||
<span>已核销</span>
|
||||
<strong v-text="getPackageQuantityText(item.deliveredQuantity)" />
|
||||
</div>
|
||||
<span>总数 <strong v-text="getPackageQuantityText(item.totalQuantity)" /></span>
|
||||
<span>可履约 <strong v-text="getPackageQuantityText(item.availableQuantity)" /></span>
|
||||
<span>待核销 <strong v-text="getPackageQuantityText(item.pendingQuantity)" /></span>
|
||||
<span>已履约 <strong v-text="getPackageQuantityText(item.fulfilledQuantity)" /></span>
|
||||
</div>
|
||||
</template>
|
||||
</t-cell>
|
||||
<t-cell
|
||||
v-if="canReadDelivery && hasPendingDelivery"
|
||||
title="去核销发放"
|
||||
note="查看待核销的发放记录"
|
||||
arrow
|
||||
@click="toPendingDeliveryList"
|
||||
/>
|
||||
<t-cell v-if="canReadDelivery" title="发放历史" arrow @click="toDeliveryList" />
|
||||
<div v-if="!customerPackage.itemList?.length" class="empty" v-text="'暂无产品权益'" />
|
||||
</t-cell-group>
|
||||
</card-container>
|
||||
<t-button
|
||||
v-if="canCreateDelivery"
|
||||
class="cell-button"
|
||||
theme="primary"
|
||||
@click="toDelivery"
|
||||
v-entrance-transition="420"
|
||||
>创建发放单</t-button>
|
||||
<t-button
|
||||
v-if="canCancelPackage"
|
||||
class="cell-button"
|
||||
theme="danger"
|
||||
@click="toCancel"
|
||||
>取消套餐</t-button>
|
||||
<t-button
|
||||
v-if="canRefund"
|
||||
class="cell-button bg-orange white"
|
||||
variant="text"
|
||||
@click="toRefund"
|
||||
>处理退款</t-button>
|
||||
<t-cell-group title="统一履约" theme="card" v-entrance-transition="280">
|
||||
<t-cell
|
||||
v-for="item in customerPackage.fulfillmentList || []"
|
||||
:key="item.id"
|
||||
:title="`${getFulfillmentTypeText(item.fulfillmentType)} · ${getFulfillmentStatusText(item.status)}`"
|
||||
:note="getFulfillmentSummary(item)"
|
||||
arrow
|
||||
@click="toFulfillment(item.id)"
|
||||
/>
|
||||
<t-cell v-if="!customerPackage.fulfillmentList?.length" title="暂无履约记录" />
|
||||
<t-cell v-if="canCreateFulfillment && hasAvailableItem" title="创建统一履约单" note="选择本次履约的权益数量" arrow @click="toCreateFulfillment" />
|
||||
</t-cell-group>
|
||||
<t-button v-if="canCancel" class="cell-button" theme="danger" @click="openCancel">取消客户套餐</t-button>
|
||||
</template>
|
||||
<t-empty v-else :description="isLoading ? '正在加载客户套餐' : '客户套餐不存在'" />
|
||||
<bottom-popup
|
||||
v-model="cancelPopupVisible"
|
||||
title="取消客户套餐"
|
||||
height="min(35vh, 20rem)"
|
||||
left-button-text="取消"
|
||||
right-button-text="确认取消"
|
||||
@left-button-click="closeCancelPopup"
|
||||
@right-button-click="confirmCancel"
|
||||
>
|
||||
<template #rightButton="{ onClick }">
|
||||
<t-button
|
||||
variant="text"
|
||||
size="small"
|
||||
theme="danger"
|
||||
:loading="isCancelling"
|
||||
:disabled="!canConfirmCancel || isCancelling"
|
||||
@click="onClick"
|
||||
>确认取消</t-button>
|
||||
</template>
|
||||
<t-form class="cancel-form" label-align="top">
|
||||
<t-form-item label="取消原因" required-mark>
|
||||
<t-textarea v-model.trim="cancelReason" borderless autosize maxlength="500" placeholder="请输入取消原因" />
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
<bottom-popup v-model="cancelVisible" title="取消客户套餐" height="min(35vh, 20rem)" left-button-text="取消" right-button-text="确认取消" @left-button-click="cancelVisible = false" @right-button-click="confirmCancel">
|
||||
<t-form label-align="top"><t-form-item label="取消原因" required-mark><t-textarea v-model.trim="cancelReason" borderless autosize maxlength="500" placeholder="请输入取消原因" /></t-form-item></t-form>
|
||||
</bottom-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { BottomPopup } from "timi-tdesign-mobile";
|
||||
import { PassTimeLabel } from "timi-web";
|
||||
import { PassTimeLabel, Time } from "timi-web";
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import PackageAPI from "@/api/PackageAPI";
|
||||
import SalesOrderAPI from "@/api/SalesOrderAPI";
|
||||
import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
|
||||
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
||||
import type { CustomerPackageStatus, GaoCustomerPackage } from "@/types/Package";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { GaoCustomerPackage } from "@/types/Package";
|
||||
import type { OrderFulfillment } from "@/types/Fulfillment";
|
||||
import type { SalesOrder } from "@/types/SalesOrder";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import {
|
||||
canCreatePackageDelivery,
|
||||
formatPackageAmount,
|
||||
getCustomerPackageStatusText,
|
||||
getPackageQuantityText,
|
||||
getPaymentStatusText,
|
||||
getRefundStatusText,
|
||||
isStoreManagerRequiredForPackageDelivery
|
||||
} from "@/utils/package";
|
||||
import { formatPackageAmount, getCustomerPackageStatusText, getPackageQuantityText } from "@/utils/package";
|
||||
import { getFulfillmentStatusText, getFulfillmentTypeText, getSalesPaymentStatusText, getSalesRefundStatusText } from "@/utils/salesOrder";
|
||||
import { Message } from "@/utils/message";
|
||||
import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
defineOptions({ name: "CustomerPackageDetail" });
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
const userStore = useUserStore();
|
||||
const currentStoreStore = useCurrentStoreStore();
|
||||
const customerPackage = ref<GaoCustomerPackage>();
|
||||
const order = ref<SalesOrder>();
|
||||
const isLoading = ref(false);
|
||||
const canReceivePayment = computed(() => customerPackage.value?.status === "ACTIVE" && customerPackage.value.paymentStatus !== "PAID" && userStore.hasPermissions(permissionCodes.fundReceive.create));
|
||||
const isStoreManager = computed(() => userStore.hasRoles(gaoRoleCodes.storeManager) && !userStore.hasRoles(gaoRoleCodes.globalManager));
|
||||
const canCreateDelivery = computed(() => customerPackage.value?.status === "ACTIVE"
|
||||
&& canCreatePackageDelivery(customerPackage.value)
|
||||
&& (!isStoreManagerRequiredForPackageDelivery(customerPackage.value) || isStoreManager.value)
|
||||
&& userStore.hasPermissions(permissionCodes.packageDelivery.create));
|
||||
const canCancelPackage = computed(() => customerPackage.value?.status === "ACTIVE" && userStore.hasPermissions(permissionCodes.customerPackage.cancel));
|
||||
const canRefund = computed(() => customerPackage.value?.status === "CANCELLED" && customerPackage.value.refundStatus === "PENDING" && userStore.hasPermissions(permissionCodes.fund.refund));
|
||||
const canReadEventRecord = computed(() => userStore.hasPermissions(permissionCodes.eventRecord.read));
|
||||
const canReadPackageConfig = computed(() => userStore.hasPermissions(permissionCodes.packageConfig.read));
|
||||
const canReadDelivery = computed(() => userStore.hasPermissions(permissionCodes.packageDelivery.read));
|
||||
const hasPendingDelivery = computed(() => customerPackage.value?.itemList?.some(item => 0 < Number(item.pendingQuantity)) ?? false);
|
||||
const canReadFund = computed(() => userStore.hasPermissions(permissionCodes.fundRecord.read));
|
||||
const cancelPopupVisible = ref(false);
|
||||
const cancelVisible = ref(false);
|
||||
const cancelReason = ref("");
|
||||
const isCancelling = ref(false);
|
||||
const canConfirmCancel = computed(() => !!cancelReason.value.trim());
|
||||
|
||||
/** 计算扣除已核销和待核销收款后的剩余待收款金额。 */
|
||||
function getRemainingReceivableAmount(packageEntity: GaoCustomerPackage): number | undefined {
|
||||
if (packageEntity.saleAmount === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
const remainingAmount = packageEntity.saleAmount - (packageEntity.paidAmount || 0) - (packageEntity.pendingPaidAmount || 0);
|
||||
return 0 < remainingAmount ? remainingAmount : 0;
|
||||
}
|
||||
|
||||
function getStatusTheme(status?: CustomerPackageStatus): "success" | "default" {
|
||||
return status === "ACTIVE" ? "success" : "default";
|
||||
}
|
||||
const canCancel = computed(() => customerPackage.value?.status === "ACTIVE" && userStore.hasPermissions(permissionCodes.customerPackage.cancel));
|
||||
const canCreateFulfillment = computed(() => userStore.hasPermissions(permissionCodes.orderFulfillment.create));
|
||||
const canReadOrder = computed(() => userStore.hasPermissions(permissionCodes.salesOrder.read));
|
||||
const canReadFund = computed(() => userStore.hasPermissions(permissionCodes.fundRecord.read));
|
||||
const canReadPackageConfig = computed(() => userStore.hasPermissions(permissionCodes.packageConfig.read));
|
||||
const canReadEventRecord = computed(() => userStore.hasPermissions(permissionCodes.eventRecord.read));
|
||||
const hasAvailableItem = computed(() => customerPackage.value?.itemList?.some(item => 0 < Number(item.availableQuantity)) ?? false);
|
||||
|
||||
async function loadData(): Promise<void> {
|
||||
const id = String(route.params.id || "");
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
if (!id) return;
|
||||
isLoading.value = true;
|
||||
try {
|
||||
if (userStore.hasRoles(gaoRoleCodes.globalManager)) {
|
||||
await currentStoreStore.loadStoreList();
|
||||
} else {
|
||||
await currentStoreStore.loadLoginStore();
|
||||
}
|
||||
customerPackage.value = await PackageAPI.customerPackageDetail(id);
|
||||
order.value = customerPackage.value.salesOrderId && canReadOrder.value
|
||||
? await SalesOrderAPI.detail(customerPackage.value.salesOrderId)
|
||||
: undefined;
|
||||
} catch (error) {
|
||||
customerPackage.value = undefined;
|
||||
Message.error(getErrorMessage(error, "客户套餐加载失败"));
|
||||
@@ -240,266 +114,39 @@ async function loadData(): Promise<void> {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function toPayment(): Promise<void> {
|
||||
if (customerPackage.value?.id) {
|
||||
await router.push(`/management/customer-packages/${customerPackage.value.id}/payment`);
|
||||
}
|
||||
}
|
||||
|
||||
async function toPackageConfigDetail(): Promise<void> {
|
||||
const id = customerPackage.value?.packageConfigId;
|
||||
if (id && canReadPackageConfig.value) {
|
||||
function getStatusTheme(status?: string): "success" | "warning" | "danger" | "default" { return status === "ACTIVE" ? "success" : status === "CANCELLED" ? "danger" : "default"; }
|
||||
function getFulfillmentSummary(item: OrderFulfillment): string { return `${item.deliveredAt ? Time.toDateTime(item.deliveredAt) : "时间未知"} · ${(item.itemList || []).length} 项`; }
|
||||
async function toOrder(): Promise<void> { if (order.value?.id) await router.push(`/management/sales-orders/${order.value.id}`); }
|
||||
async function toPackageConfig(): Promise<void> { if (customerPackage.value?.packageConfigId) await router.push(`/management/package-configs/${customerPackage.value.packageConfigId}`); }
|
||||
async function toEventRecord(): Promise<void> { if (customerPackage.value?.purchaseEventRecord?.id) await router.push(`/management/registration-event-records/${customerPackage.value.purchaseEventRecord.id}`); }
|
||||
async function toFundRecords(): Promise<void> { if (order.value?.id) await router.push({ path: "/management/fund-records", query: { salesOrderId: order.value.id } }); }
|
||||
async function toFulfillment(id?: string): Promise<void> { if (id) await router.push(`/management/order-fulfillments/${id}`); }
|
||||
async function toCreateFulfillment(): Promise<void> {
|
||||
if (order.value?.id && customerPackage.value?.id) {
|
||||
await router.push({
|
||||
name: "PackageConfigDetail",
|
||||
params: { id },
|
||||
query: { transitionDepth: String(getCurrentRouteDepth() + 1) }
|
||||
path: "/management/order-fulfillments/create",
|
||||
query: { salesOrderId: order.value.id, customerPackageId: customerPackage.value.id }
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function toPurchaseEventRecord(): Promise<void> {
|
||||
const id = customerPackage.value?.purchaseEventRecord?.id;
|
||||
if (id && canReadEventRecord.value) {
|
||||
await router.push({
|
||||
name: "EventRecordDetail",
|
||||
params: { id },
|
||||
query: { transitionDepth: String(getCurrentRouteDepth() + 1) }
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function toDelivery(): Promise<void> {
|
||||
if (customerPackage.value?.id) {
|
||||
await router.push(`/management/customer-packages/${customerPackage.value.id}/delivery/create`);
|
||||
}
|
||||
}
|
||||
|
||||
async function toCancel(): Promise<void> {
|
||||
if (!customerPackage.value?.id || !canCancelPackage.value) {
|
||||
return;
|
||||
}
|
||||
cancelReason.value = "";
|
||||
cancelPopupVisible.value = true;
|
||||
}
|
||||
|
||||
function closeCancelPopup(): void {
|
||||
if (isCancelling.value) {
|
||||
return;
|
||||
}
|
||||
cancelPopupVisible.value = false;
|
||||
}
|
||||
|
||||
function openCancel(): void { cancelReason.value = ""; cancelVisible.value = true; }
|
||||
async function confirmCancel(): Promise<void> {
|
||||
const id = customerPackage.value?.id;
|
||||
const reason = cancelReason.value.trim();
|
||||
if (!id || !canCancelPackage.value || !reason || isCancelling.value) {
|
||||
return;
|
||||
}
|
||||
if (!customerPackage.value?.id || !cancelReason.value || isCancelling.value) return;
|
||||
isCancelling.value = true;
|
||||
try {
|
||||
await PackageAPI.cancel(id, reason);
|
||||
cancelPopupVisible.value = false;
|
||||
Message.success("客户套餐已取消");
|
||||
await loadData();
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "套餐取消失败，请刷新后确认状态"));
|
||||
} finally {
|
||||
isCancelling.value = false;
|
||||
}
|
||||
try { await PackageAPI.cancel(customerPackage.value.id, cancelReason.value); cancelVisible.value = false; Message.success("客户套餐已取消"); await loadData(); }
|
||||
catch (error) { Message.error(getErrorMessage(error, "套餐取消失败")); }
|
||||
finally { isCancelling.value = false; }
|
||||
}
|
||||
|
||||
async function toRefund(): Promise<void> {
|
||||
if (customerPackage.value?.id) {
|
||||
await router.push(`/management/customer-packages/${customerPackage.value.id}/refund`);
|
||||
}
|
||||
}
|
||||
|
||||
async function toDeliveryList(): Promise<void> {
|
||||
await navigateToDeliveryList();
|
||||
}
|
||||
|
||||
async function toPendingDeliveryList(): Promise<void> {
|
||||
await navigateToDeliveryList(true);
|
||||
}
|
||||
|
||||
async function navigateToDeliveryList(showPending = false): Promise<void> {
|
||||
if (customerPackage.value?.id) {
|
||||
const query = {
|
||||
customerPackageId: customerPackage.value.id,
|
||||
transitionDepth: String(getCurrentRouteDepth() + 1),
|
||||
...(showPending ? { status: "PENDING" } : {})
|
||||
};
|
||||
await router.push({
|
||||
path: "/management/package-deliveries",
|
||||
query
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function toFundList(): Promise<void> {
|
||||
await navigateToFundList();
|
||||
}
|
||||
|
||||
async function toPendingFundList(): Promise<void> {
|
||||
await navigateToFundList(true);
|
||||
}
|
||||
|
||||
async function navigateToFundList(showPendingReceive = false): Promise<void> {
|
||||
if (customerPackage.value?.id) {
|
||||
const query = {
|
||||
customerPackageId: customerPackage.value.id,
|
||||
transitionDepth: String(getCurrentRouteDepth() + 1),
|
||||
...(showPendingReceive ? { operationType: "RECEIVE", status: "PENDING" } : {})
|
||||
};
|
||||
await router.push({ path: "/management/fund-records", query });
|
||||
}
|
||||
}
|
||||
|
||||
function getCurrentRouteDepth(): number {
|
||||
const transitionDepth = Array.isArray(route.query.transitionDepth)
|
||||
? route.query.transitionDepth[0]
|
||||
: route.query.transitionDepth;
|
||||
const depth = Number(transitionDepth);
|
||||
if (transitionDepth && Number.isInteger(depth) && 0 <= depth && depth <= 20) {
|
||||
return depth;
|
||||
}
|
||||
return Number(route.meta.depth ?? 0);
|
||||
}
|
||||
|
||||
onMounted(loadData);
|
||||
watch(() => route.params.id, loadData);
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.customer-package-detail {
|
||||
gap: 1rem;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.customer {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.package {
|
||||
|
||||
:deep(.t-cell__title) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.value {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.amount {
|
||||
|
||||
:deep(.t-cell__note) {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:deep(.t-cell__title-text),
|
||||
:deep(.t-cell__note) {
|
||||
color: var(--td-text-color-secondary);
|
||||
}
|
||||
|
||||
&.sale :deep(.t-cell__title-text),
|
||||
&.sale :deep(.t-cell__note) {
|
||||
color: var(--td-brand-color);
|
||||
}
|
||||
|
||||
&.paid :deep(.t-cell__title-text),
|
||||
&.paid :deep(.t-cell__note) {
|
||||
color: var(--td-success-color);
|
||||
}
|
||||
|
||||
&.pending :deep(.t-cell__title-text),
|
||||
&.pending :deep(.t-cell__note),
|
||||
&.remaining :deep(.t-cell__title-text),
|
||||
&.remaining :deep(.t-cell__note) {
|
||||
color: var(--td-warning-color);
|
||||
}
|
||||
|
||||
&.refunded :deep(.t-cell__title-text),
|
||||
&.refunded :deep(.t-cell__note) {
|
||||
color: var(--td-error-color);
|
||||
}
|
||||
}
|
||||
|
||||
.benefit {
|
||||
padding: .875rem 1rem;
|
||||
|
||||
:deep(.t-cell__title) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
strong {
|
||||
font-size: .9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.stats {
|
||||
gap: .5rem;
|
||||
margin-top: .75rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
|
||||
.stat {
|
||||
gap: .25rem;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
span {
|
||||
color: var(--td-text-color-secondary);
|
||||
font-size: .6875rem;
|
||||
}
|
||||
|
||||
strong {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
font-size: 1.5rem;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.available strong {
|
||||
color: var(--td-brand-color);
|
||||
}
|
||||
|
||||
.pending strong {
|
||||
color: var(--td-warning-color);
|
||||
}
|
||||
|
||||
.delivered strong {
|
||||
color: var(--td-success-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.photo-scroller) {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: var(--td-text-color-secondary);
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
.customer-package-detail { gap: 1rem; padding: calc(var(--app-nav-height) + 1rem) 0 2rem; display: flex; flex-direction: column;
|
||||
.customer { margin: 0 1rem; }
|
||||
.summary .title, .benefit .title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
|
||||
.stats { gap: .75rem; display: flex; flex-wrap: wrap; color: var(--td-text-color-secondary); }
|
||||
.stats strong { color: var(--td-text-color-primary); }
|
||||
.empty { color: var(--td-text-color-secondary); padding: 1rem; text-align: center; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -17,12 +17,6 @@
|
||||
:options="statusOptions"
|
||||
@change="selectStatus"
|
||||
/>
|
||||
<t-dropdown-item
|
||||
v-model="paymentStatus"
|
||||
label="收款状态"
|
||||
:options="paymentOptions"
|
||||
@change="selectPaymentStatus"
|
||||
/>
|
||||
</t-dropdown-menu>
|
||||
</div>
|
||||
</div>
|
||||
@@ -67,13 +61,7 @@
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="description">
|
||||
<t-tag
|
||||
class="line"
|
||||
theme="primary"
|
||||
variant="outline"
|
||||
:content="getPaymentStatusText(item.paymentStatus)"
|
||||
/>
|
||||
<div class="line" v-text="`成交价：${formatPackageAmount(item.saleAmount)}`" />
|
||||
<div class="line" v-text="`订单：${item.salesOrderId || '未关联'}`" />
|
||||
</div>
|
||||
</template>
|
||||
</t-cell>
|
||||
@@ -89,10 +77,10 @@ import { type DropdownValue } from "tdesign-mobile-vue";
|
||||
import { Text, Toolkit } from "timi-web";
|
||||
import PackageAPI from "@/api/PackageAPI";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { CustomerPackageStatus, GaoCustomerPackage, PaymentStatus } from "@/types/Package";
|
||||
import type { CustomerPackageStatus, GaoCustomerPackage } from "@/types/Package";
|
||||
import { getCustomerPhotoURL } from "@/utils/customer";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { formatPackageAmount, getCustomerPackageStatusText, getPaymentStatusText } from "@/utils/package";
|
||||
import { getCustomerPackageStatusText } from "@/utils/package";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
@@ -102,7 +90,6 @@ const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
const keyword = ref("");
|
||||
const status = ref("ALL");
|
||||
const paymentStatus = ref("ALL");
|
||||
const packageList = ref<GaoCustomerPackage[]>([]);
|
||||
const pageIndex = ref(0);
|
||||
const total = ref(0);
|
||||
@@ -115,12 +102,6 @@ const statusOptions = [
|
||||
{ label: "已履约", value: "FULFILLED" },
|
||||
{ label: "已取消", value: "CANCELLED" }
|
||||
];
|
||||
const paymentOptions = [
|
||||
{ label: "全部收款", value: "ALL" },
|
||||
{ label: "未收款", value: "UNPAID" },
|
||||
{ label: "部分收款", value: "PARTIALLY_PAID" },
|
||||
{ label: "已收款", value: "PAID" }
|
||||
];
|
||||
const loadStateText = computed(() => loading.value ? "正在加载" : noMore.value ? "已经到底了" : "上拉加载更多");
|
||||
|
||||
async function loadMore(): Promise<void> {
|
||||
@@ -133,8 +114,7 @@ async function loadMore(): Promise<void> {
|
||||
index: pageIndex.value,
|
||||
size: 15,
|
||||
keyword: keyword.value || undefined,
|
||||
status: status.value === "ALL" ? undefined : status.value as CustomerPackageStatus,
|
||||
paymentStatus: paymentStatus.value === "ALL" ? undefined : paymentStatus.value as PaymentStatus
|
||||
status: status.value === "ALL" ? undefined : status.value as CustomerPackageStatus
|
||||
});
|
||||
const list = result.list || [];
|
||||
packageList.value = packageList.value.concat(list);
|
||||
@@ -165,13 +145,6 @@ async function selectStatus(value: DropdownValue): Promise<void> {
|
||||
await reload();
|
||||
}
|
||||
|
||||
async function selectPaymentStatus(value: DropdownValue): Promise<void> {
|
||||
if (Array.isArray(value)) {
|
||||
return;
|
||||
}
|
||||
paymentStatus.value = String(value);
|
||||
await reload();
|
||||
}
|
||||
|
||||
const reloadByKeyword = Toolkit.debounce(async () => {
|
||||
try {
|
||||
@@ -223,16 +196,16 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
padding: .75rem 1rem;
|
||||
position: sticky;
|
||||
background: #F5F5F8;
|
||||
background: var(--td-bg-color-page);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
flex-direction: column;
|
||||
|
||||
.search-input {
|
||||
--td-input-vertical-padding: 8px;
|
||||
--td-input-vertical-padding: 8px 14px;
|
||||
|
||||
border: 1px solid rgba(148, 163, 184, .28);
|
||||
z-index: 1;
|
||||
background: #f8fbff;
|
||||
background: var(--td-bg-color-container);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
@@ -243,7 +216,7 @@ onUnmounted(() => {
|
||||
overflow: hidden;
|
||||
margin-top: -1.5rem;
|
||||
padding-top: .8rem;
|
||||
background: #fff;
|
||||
background: var(--td-bg-color-container);
|
||||
border: 1px solid rgba(148, 163, 184, .18);
|
||||
border-radius: 0 0 1rem 1rem;
|
||||
|
||||
@@ -264,7 +237,7 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-top: 1rem;
|
||||
margin-top: .75rem;
|
||||
|
||||
.item {
|
||||
padding: 10px;
|
||||
|
||||
@@ -1,237 +0,0 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.fundReceive.create" class="package-operation-edit">
|
||||
<customer-profile-card
|
||||
v-if="customerPackage"
|
||||
class="customer"
|
||||
:customer="customerPackage.customer"
|
||||
v-entrance-transition
|
||||
/>
|
||||
<t-cell-group v-if="customerPackage" title="收款信息" theme="card" v-entrance-transition>
|
||||
<t-cell title="客户套餐" :note="customerPackage.packageNameSnapshot || '未命名套餐'" />
|
||||
<t-cell class="amount sale" title="成交价" :note="formatPackageAmount(customerPackage.saleAmount)" />
|
||||
<t-cell class="amount paid" title="已核销收款" :note="formatPackageAmount(customerPackage.paidAmount)" />
|
||||
<t-cell class="amount pending" title="待核销收款" :note="formatPackageAmount(customerPackage.pendingPaidAmount)" />
|
||||
<t-cell class="amount remaining" title="剩余待收款" :note="formatPackageAmount(getRemainingReceivableAmount(customerPackage))" />
|
||||
</t-cell-group>
|
||||
<t-form v-if="customerPackage" class="form" label-align="left" label-width="7rem" v-entrance-transition="70">
|
||||
<t-form-item label="本次收款（元）" required-mark>
|
||||
<t-input v-model.trim="amountText" type="number" align="right" borderless placeholder="本次实际收款金额" />
|
||||
</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.trim="remark" borderless autosize maxlength="500" placeholder="收款备注" />
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
<package-photo-field v-if="customerPackage" v-model="photoItems" required title="收款凭证照片" />
|
||||
<t-empty v-if="!customerPackage" :description="isLoading ? '正在加载套餐' : '套餐不存在'" />
|
||||
<t-popup v-model="occurredPickerVisible" placement="bottom">
|
||||
<t-date-time-picker
|
||||
v-model="occurredDraft"
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
:mode="['date', 'minute']"
|
||||
title="发生时间"
|
||||
@cancel="occurredPickerVisible = false"
|
||||
@confirm="confirmOccurredAt"
|
||||
/>
|
||||
</t-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Time } from "timi-web";
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import PackageAPI from "@/api/PackageAPI";
|
||||
import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
|
||||
import PackagePhotoField from "@/components/PackagePhotoField.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { GaoCustomerPackage, PackageAttachment } from "@/types/Package";
|
||||
import type { PhotoItem } from "@/types/Photo";
|
||||
import { createPackageRequestNo, formatPackageAmount, parsePackageAmount } from "@/utils/package";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
defineOptions({ name: "CustomerPackagePayment" });
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const navBarStore = useNavBarStore();
|
||||
const customerPackage = ref<GaoCustomerPackage>();
|
||||
const isLoading = ref(false);
|
||||
const isSaving = ref(false);
|
||||
const amountText = ref("");
|
||||
const occurredAtText = ref("");
|
||||
const occurredDraft = ref("");
|
||||
const occurredPickerVisible = ref(false);
|
||||
const remark = ref("");
|
||||
const photoItems = ref<PhotoItem[]>([]);
|
||||
|
||||
/** 计算扣除已核销和待核销收款后的剩余待收款金额。 */
|
||||
function getRemainingReceivableAmount(packageEntity: GaoCustomerPackage): number | undefined {
|
||||
if (packageEntity.saleAmount === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
const remainingAmount = packageEntity.saleAmount - (packageEntity.paidAmount || 0) - (packageEntity.pendingPaidAmount || 0);
|
||||
return 0 < remainingAmount ? remainingAmount : 0;
|
||||
}
|
||||
|
||||
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 openOccurredAtPicker(): void {
|
||||
occurredDraft.value = occurredAtText.value || Time.formatDateTime(new Date());
|
||||
occurredPickerVisible.value = true;
|
||||
}
|
||||
|
||||
function confirmOccurredAt(value?: string | number): void {
|
||||
occurredAtText.value = String(value || occurredDraft.value);
|
||||
occurredPickerVisible.value = false;
|
||||
}
|
||||
|
||||
function resetOccurredAt(): void {
|
||||
occurredAtText.value = "";
|
||||
occurredDraft.value = "";
|
||||
}
|
||||
|
||||
function buildAttachments(): PackageAttachment[] {
|
||||
return photoItems.value.flatMap(item => item.tempFileId ? [{ tempFileId: item.tempFileId, attachType: "PHOTO", name: item.attachment?.name }] : []);
|
||||
}
|
||||
|
||||
async function loadData(): Promise<void> {
|
||||
const id = String(route.params.id || "");
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
isLoading.value = true;
|
||||
try {
|
||||
customerPackage.value = await PackageAPI.customerPackageDetail(id);
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "套餐加载失败"));
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function save(): Promise<void> {
|
||||
if (isSaving.value) {
|
||||
return;
|
||||
}
|
||||
const customerPackageId = customerPackage.value?.id;
|
||||
const amount = parsePackageAmount(amountText.value);
|
||||
if (!customerPackageId || amount === undefined || 0 >= amount) {
|
||||
Message.warning("请输入大于 0 的合法收款金额");
|
||||
return;
|
||||
}
|
||||
if (!photoItems.value.some(item => item.tempFileId)) {
|
||||
Message.warning("收款必须上传至少一张凭证照片");
|
||||
return;
|
||||
}
|
||||
isSaving.value = true;
|
||||
try {
|
||||
await PackageAPI.receivePayment({
|
||||
requestNo: createPackageRequestNo(),
|
||||
customerPackageId,
|
||||
amount,
|
||||
occurredAt: resolveTimestamp(occurredAtText.value),
|
||||
attachmentList: buildAttachments(),
|
||||
remark: remark.value.trim() || null
|
||||
});
|
||||
Message.success("收款已提交，等待核销");
|
||||
await router.replace(`/management/customer-packages/${customerPackageId}`);
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "收款提交失败，请刷新后确认状态"));
|
||||
} finally {
|
||||
isSaving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
if (userStore.hasPermissions(permissionCodes.fundReceive.create)) {
|
||||
navBarStore.setRightText("提交", "var(--td-brand-color)", save);
|
||||
}
|
||||
await loadData();
|
||||
});
|
||||
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.package-operation-edit {
|
||||
gap: 1rem;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.customer {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.amount {
|
||||
|
||||
:deep(.t-cell__note) {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:deep(.t-cell__title-text),
|
||||
:deep(.t-cell__note) {
|
||||
color: var(--td-text-color-secondary);
|
||||
}
|
||||
|
||||
&.sale :deep(.t-cell__title-text),
|
||||
&.sale :deep(.t-cell__note) {
|
||||
color: var(--td-brand-color);
|
||||
}
|
||||
|
||||
&.paid :deep(.t-cell__title-text),
|
||||
&.paid :deep(.t-cell__note) {
|
||||
color: var(--td-success-color);
|
||||
}
|
||||
|
||||
&.pending :deep(.t-cell__title-text),
|
||||
&.pending :deep(.t-cell__note),
|
||||
&.remaining :deep(.t-cell__title-text),
|
||||
&.remaining :deep(.t-cell__note) {
|
||||
color: var(--td-warning-color);
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
border-radius: .75rem;
|
||||
}
|
||||
|
||||
.time-actions {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.package-photo-field {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,173 +0,0 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.fund.refund" class="package-operation-edit">
|
||||
<t-cell-group v-if="customerPackage" title="退款信息" theme="card" v-entrance-transition>
|
||||
<t-cell title="客户套餐" :note="customerPackage.packageNameSnapshot || '未命名套餐'" />
|
||||
<t-cell title="已核销收款" :note="formatPackageAmount(customerPackage.paidAmount)" />
|
||||
<t-cell title="当前退款状态" :note="getRefundStatusText(customerPackage.refundStatus)" />
|
||||
</t-cell-group>
|
||||
<t-form v-if="customerPackage" class="form" label-align="left" label-width="6rem" v-entrance-transition="70">
|
||||
<t-form-item label="确认无需退款" content-align="right">
|
||||
<t-switch v-model="confirmNone" />
|
||||
</t-form-item>
|
||||
<t-form-item v-if="!confirmNone" label="退款金额（元）" required-mark>
|
||||
<t-input v-model.trim="amountText" type="number" align="right" borderless placeholder="请输入实际退款金额，不自动填充" />
|
||||
</t-form-item>
|
||||
<t-form-item label="退款原因" required-mark>
|
||||
<t-textarea v-model.trim="reason" borderless autosize maxlength="500" placeholder="请输入原因" />
|
||||
</t-form-item>
|
||||
<t-form-item label="发生时间" arrow @click="occurredPickerVisible = true">
|
||||
<span class="picker-text" v-text="occurredAtText || '使用当前时间'" />
|
||||
</t-form-item>
|
||||
<t-form-item label="备注">
|
||||
<t-textarea v-model.trim="remark" borderless autosize maxlength="500" placeholder="备注（可选）" />
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
<package-photo-field v-if="customerPackage && !confirmNone" v-model="photoItems" required title="退款凭证照片" />
|
||||
<t-empty v-if="!customerPackage" :description="isLoading ? '正在加载套餐' : '套餐不存在'" />
|
||||
<t-popup v-model="occurredPickerVisible" placement="bottom">
|
||||
<t-date-time-picker v-model="occurredDraft" format="YYYY-MM-DD HH:mm" :mode="['date', 'minute']" title="发生时间" @cancel="occurredPickerVisible = false" @confirm="confirmOccurredAt" />
|
||||
</t-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import PackageAPI from "@/api/PackageAPI";
|
||||
import PackagePhotoField from "@/components/PackagePhotoField.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { GaoCustomerPackage, PackageAttachment } from "@/types/Package";
|
||||
import type { PhotoItem } from "@/types/Photo";
|
||||
import { createPackageRequestNo, formatPackageAmount, parsePackageAmount, getRefundStatusText } from "@/utils/package";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
defineOptions({ name: "CustomerPackageRefund" });
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const navBarStore = useNavBarStore();
|
||||
const customerPackage = ref<GaoCustomerPackage>();
|
||||
const confirmNone = ref(false);
|
||||
const amountText = ref("");
|
||||
const reason = ref("");
|
||||
const remark = ref("");
|
||||
const occurredAtText = ref("");
|
||||
const occurredDraft = ref("");
|
||||
const occurredPickerVisible = ref(false);
|
||||
const photoItems = ref<PhotoItem[]>([]);
|
||||
const isLoading = ref(false);
|
||||
const isSaving = ref(false);
|
||||
|
||||
function confirmOccurredAt(value: string | number): void {
|
||||
occurredAtText.value = String(value);
|
||||
occurredPickerVisible.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(): PackageAttachment[] {
|
||||
return photoItems.value.flatMap(item => item.tempFileId ? [{ tempFileId: item.tempFileId, attachType: "PHOTO", name: item.attachment?.name }] : []);
|
||||
}
|
||||
|
||||
async function loadData(): Promise<void> {
|
||||
const id = String(route.params.id || "");
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
isLoading.value = true;
|
||||
try {
|
||||
customerPackage.value = await PackageAPI.customerPackageDetail(id);
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "套餐加载失败"));
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function save(): Promise<void> {
|
||||
if (isSaving.value) {
|
||||
return;
|
||||
}
|
||||
const customerPackageId = customerPackage.value?.id;
|
||||
if (!customerPackageId || !reason.value.trim()) {
|
||||
Message.warning("请输入退款原因");
|
||||
return;
|
||||
}
|
||||
const amount = confirmNone.value ? undefined : parsePackageAmount(amountText.value);
|
||||
if (!confirmNone.value && (amount === undefined || 0 >= amount)) {
|
||||
Message.warning("请输入大于 0 的合法退款金额");
|
||||
return;
|
||||
}
|
||||
if (!confirmNone.value && !photoItems.value.some(item => item.tempFileId)) {
|
||||
Message.warning("退款必须上传至少一张凭证照片");
|
||||
return;
|
||||
}
|
||||
isSaving.value = true;
|
||||
try {
|
||||
if (confirmNone.value) {
|
||||
await PackageAPI.confirmNoRefund({
|
||||
requestNo: createPackageRequestNo(),
|
||||
customerPackageId,
|
||||
occurredAt: resolveTimestamp(occurredAtText.value),
|
||||
reason: reason.value.trim(),
|
||||
remark: remark.value.trim() || null
|
||||
});
|
||||
} else {
|
||||
await PackageAPI.refund({
|
||||
requestNo: createPackageRequestNo(),
|
||||
customerPackageId,
|
||||
amount: amount!,
|
||||
occurredAt: resolveTimestamp(occurredAtText.value),
|
||||
reason: reason.value.trim(),
|
||||
attachmentList: buildAttachments(),
|
||||
remark: remark.value.trim() || null
|
||||
});
|
||||
}
|
||||
Message.success(confirmNone.value ? "已确认无需退款" : "退款已登记");
|
||||
await router.replace(`/management/customer-packages/${customerPackageId}`);
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "退款操作失败，请刷新后确认状态"));
|
||||
} finally {
|
||||
isSaving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
if (userStore.hasPermissions(permissionCodes.fund.refund)) {
|
||||
navBarStore.setRightText("提交处理", "var(--td-brand-color)", save);
|
||||
}
|
||||
await loadData();
|
||||
});
|
||||
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.package-operation-edit {
|
||||
gap: 1rem;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.form {
|
||||
border-radius: .75rem;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.package-photo-field {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,11 +1,19 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.fundRecord.read" class="package-record-detail">
|
||||
<template v-if="record">
|
||||
<section class="hero" v-entrance-transition>
|
||||
<span class="eyebrow" v-text="'资金流水'" />
|
||||
<div class="hero-title">
|
||||
<h1 v-text="getFundOperationText(record.operationType)" />
|
||||
<t-tag :content="getFundStatusText(record.status)" :theme="getStatusTheme(record.status)" variant="light-outline" />
|
||||
</div>
|
||||
<strong class="amount" v-text="formatPackageAmount(record.amount)" />
|
||||
</section>
|
||||
<t-cell-group title="资金记录" theme="card" v-entrance-transition>
|
||||
<t-cell title="操作类型" :note="getFundOperationText(record.operationType)" />
|
||||
<t-cell title="状态"><template #note><t-tag :content="getFundStatusText(record.status)" :theme="getStatusTheme(record.status)" variant="light-outline" /></template></t-cell>
|
||||
<t-cell title="金额" :note="formatPackageAmount(record.amount)" />
|
||||
<t-cell title="客户套餐" :note="record.customerPackageId || record.bizId || '未知'" />
|
||||
<t-cell title="销售订单" :note="record.bizId || '未知'" />
|
||||
<t-cell title="发生时间" :note="record.occurredAt ? Time.toDateTime(record.occurredAt) : '未知'" />
|
||||
<t-cell title="提交人" :note="record.operator?.name || record.operator?.nick || record.operatorUserId || '未知'" />
|
||||
<t-cell title="处理人" :note="record.verifier?.name || record.verifier?.nick || record.verifierUserId || '未处理'" />
|
||||
@@ -32,14 +40,15 @@
|
||||
import { DialogPlugin } from "tdesign-mobile-vue";
|
||||
import { Time } from "timi-web";
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import PackageAPI from "@/api/PackageAPI";
|
||||
import SalesOrderAPI from "@/api/SalesOrderAPI";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { FundRecordStatus, GaoFundRecord } from "@/types/Package";
|
||||
import type { FundRecord, FundRecordStatus } from "@/types/SalesOrder";
|
||||
import type { PhotoItem } from "@/types/Photo";
|
||||
import { getAttachmentReadURL } from "@/utils/attachment";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { formatPackageAmount, getFundOperationText, getFundStatusText } from "@/utils/package";
|
||||
import { formatPackageAmount } from "@/utils/package";
|
||||
import { getFundOperationText, getFundStatusText } from "@/utils/salesOrder";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
@@ -51,7 +60,7 @@ const route = useRoute();
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const navBarStore = useNavBarStore();
|
||||
const record = ref<GaoFundRecord>();
|
||||
const record = ref<FundRecord>();
|
||||
const isLoading = ref(false);
|
||||
const isOperating = ref(false);
|
||||
const reasonDialogVisible = ref(false);
|
||||
@@ -72,8 +81,8 @@ const photoItems = computed<PhotoItem[]>(() => (record.value?.attachmentList ||
|
||||
})));
|
||||
const photoURLList = computed(() => photoItems.value.map(item => item.url));
|
||||
|
||||
function getStatusTheme(status?: FundRecordStatus): "success" | "danger" | "default" {
|
||||
return status === "VERIFIED" ? "success" : status === "REJECTED" ? "danger" : "default";
|
||||
function getStatusTheme(status?: FundRecordStatus): "success" | "warning" | "danger" | "default" {
|
||||
return status === "VERIFIED" ? "success" : status === "PENDING" ? "warning" : status === "REJECTED" ? "danger" : "default";
|
||||
}
|
||||
|
||||
async function loadData(): Promise<void> {
|
||||
@@ -83,7 +92,7 @@ async function loadData(): Promise<void> {
|
||||
}
|
||||
isLoading.value = true;
|
||||
try {
|
||||
record.value = await PackageAPI.fundRecordDetail(id);
|
||||
record.value = await SalesOrderAPI.fundRecordDetail(id);
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "资金记录加载失败"));
|
||||
} finally {
|
||||
@@ -92,9 +101,8 @@ async function loadData(): Promise<void> {
|
||||
}
|
||||
|
||||
async function refreshRelatedPackage(): Promise<void> {
|
||||
const customerPackageId = record.value?.customerPackageId || record.value?.bizId;
|
||||
if (customerPackageId) {
|
||||
await PackageAPI.customerPackageDetail(customerPackageId);
|
||||
if (record.value?.bizId) {
|
||||
await SalesOrderAPI.detail(record.value.bizId);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -109,7 +117,7 @@ async function verifyReceive(): Promise<void> {
|
||||
onConfirm: async () => {
|
||||
isOperating.value = true;
|
||||
try {
|
||||
await PackageAPI.verifyPayment(record.value!.id!);
|
||||
await SalesOrderAPI.verifyPayment(record.value!.id!);
|
||||
await refreshRelatedPackage();
|
||||
Message.success("收款已核销");
|
||||
await loadData();
|
||||
@@ -140,9 +148,9 @@ async function submitReason(): Promise<void> {
|
||||
isOperating.value = true;
|
||||
try {
|
||||
if (reasonAction.value === "reject") {
|
||||
await PackageAPI.rejectPayment(record.value.id, reasonText.value.trim());
|
||||
await SalesOrderAPI.rejectPayment({ fundRecordId: record.value.id, reason: reasonText.value.trim() });
|
||||
} else {
|
||||
await PackageAPI.cancelPayment(record.value.id, reasonText.value.trim());
|
||||
await SalesOrderAPI.cancelPayment({ fundRecordId: record.value.id, reason: reasonText.value.trim() });
|
||||
}
|
||||
reasonDialogVisible.value = false;
|
||||
await refreshRelatedPackage();
|
||||
@@ -172,6 +180,44 @@ onUnmounted(() => navBarStore.clearRight());
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.hero {
|
||||
margin: 0 1rem;
|
||||
padding: 1rem;
|
||||
background: linear-gradient(135deg, #eff6ff, #f0fdf4);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
border-radius: 1.25rem;
|
||||
|
||||
.eyebrow {
|
||||
color: #2563eb;
|
||||
display: block;
|
||||
font-size: .6875rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: .08em;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
margin-top: .35rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.amount {
|
||||
color: #0f766e;
|
||||
display: block;
|
||||
margin-top: .75rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.photo-scroller) {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
@@ -187,4 +233,16 @@ onUnmounted(() => navBarStore.clearRight());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) .package-record-detail .hero {
|
||||
background: linear-gradient(135deg, rgba(37, 99, 235, .2), rgba(15, 118, 110, .18));
|
||||
|
||||
.eyebrow {
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
.amount {
|
||||
color: #99f6e4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.fundRecord.read" class="package-record-list">
|
||||
<t-dropdown-menu>
|
||||
<t-dropdown-item v-model="operationType" label="操作类型" :options="operationOptions" @change="selectOperation" />
|
||||
<t-dropdown-item v-model="status" label="状态" :options="statusOptions" @change="selectStatus" />
|
||||
</t-dropdown-menu>
|
||||
<div class="filters">
|
||||
<t-dropdown-menu>
|
||||
<t-dropdown-item v-model="operationType" label="操作类型" :options="operationOptions" @change="selectOperation" />
|
||||
<t-dropdown-item v-model="status" label="状态" :options="statusOptions" @change="selectStatus" />
|
||||
</t-dropdown-menu>
|
||||
</div>
|
||||
<t-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="reload" @scrolltolower="loadMore">
|
||||
<t-cell-group v-if="recordList.length" theme="card">
|
||||
<t-cell
|
||||
@@ -34,11 +36,12 @@
|
||||
<script setup lang="ts">
|
||||
import { type DropdownValue } from "tdesign-mobile-vue";
|
||||
import { Time } from "timi-web";
|
||||
import PackageAPI from "@/api/PackageAPI";
|
||||
import SalesOrderAPI from "@/api/SalesOrderAPI";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { FundOperationType, FundRecordStatus, GaoFundRecord } from "@/types/Package";
|
||||
import type { FundOperationType, FundRecord, FundRecordStatus } from "@/types/SalesOrder";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { formatPackageAmount, getFundOperationText, getFundStatusText } from "@/utils/package";
|
||||
import { formatPackageAmount } from "@/utils/package";
|
||||
import { getFundOperationText, getFundStatusText } from "@/utils/salesOrder";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
@@ -47,7 +50,7 @@ defineOptions({ name: "FundRecordList" });
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
const recordList = ref<GaoFundRecord[]>([]);
|
||||
const recordList = ref<FundRecord[]>([]);
|
||||
const operationType = ref(route.query.operationType === "RECEIVE" ? "RECEIVE" : "ALL");
|
||||
const status = ref(route.query.status === "PENDING" ? "PENDING" : "ALL");
|
||||
const pageIndex = ref(0);
|
||||
@@ -77,10 +80,10 @@ async function loadMore(): Promise<void> {
|
||||
}
|
||||
loading.value = true;
|
||||
try {
|
||||
const result = await PackageAPI.fundRecordList({
|
||||
const result = await SalesOrderAPI.fundRecordList({
|
||||
index: pageIndex.value,
|
||||
size: 15,
|
||||
customerPackageId: String(route.query.customerPackageId || "") || undefined,
|
||||
salesOrderId: String(route.query.salesOrderId || "") || undefined,
|
||||
operationType: operationType.value === "ALL" ? undefined : operationType.value as FundOperationType,
|
||||
status: status.value === "ALL" ? undefined : status.value as FundRecordStatus
|
||||
});
|
||||
@@ -119,15 +122,15 @@ async function selectStatus(value: DropdownValue): Promise<void> {
|
||||
}
|
||||
}
|
||||
|
||||
function getDescription(item: GaoFundRecord): string {
|
||||
return `${item.customer?.name || item.customerId || "未知客户"}｜${item.occurredAt ? Time.toDateTime(item.occurredAt) : "时间未知"}`;
|
||||
function getDescription(item: FundRecord): string {
|
||||
return `${item.customer?.name || item.customerId || "未知客户"}｜订单 ${item.bizId || "未知"}｜${item.occurredAt ? Time.toDateTime(item.occurredAt) : "时间未知"}`;
|
||||
}
|
||||
|
||||
function getStatusTheme(statusValue?: FundRecordStatus): "success" | "warning" | "danger" | "default" {
|
||||
return statusValue === "VERIFIED" ? "success" : statusValue === "PENDING" ? "warning" : statusValue === "REJECTED" ? "danger" : "default";
|
||||
}
|
||||
|
||||
async function toDetail(item: GaoFundRecord): Promise<void> {
|
||||
async function toDetail(item: FundRecord): Promise<void> {
|
||||
if (item.id) {
|
||||
await router.push(`/management/fund-records/${item.id}`);
|
||||
}
|
||||
@@ -147,7 +150,24 @@ onUnmounted(() => navBarStore.clearRight());
|
||||
|
||||
<style scoped lang="less">
|
||||
.package-record-list {
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
|
||||
padding: var(--app-nav-height) 0 1rem;
|
||||
|
||||
.filters {
|
||||
top: var(--app-nav-height);
|
||||
z-index: 10;
|
||||
padding: .75rem 1rem .5rem;
|
||||
position: sticky;
|
||||
background: var(--td-bg-color-page);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
|
||||
:deep(.t-dropdown-menu) {
|
||||
border-radius: .875rem;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.t-pull-down-refresh) {
|
||||
padding-top: .75rem;
|
||||
}
|
||||
|
||||
.title-row {
|
||||
gap: .5rem;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<t-cell title="操作类型" :note="getFundOperationText(record.operationType)" />
|
||||
<t-cell title="金额" :note="formatPackageAmount(record.amount)" />
|
||||
<t-cell title="原状态" :note="getFundStatusText(record.status)" />
|
||||
<t-cell title="客户套餐" :note="record.customerPackageId || record.bizId || '未知'" />
|
||||
<t-cell title="销售订单" :note="record.bizId || '未知'" />
|
||||
</t-cell-group>
|
||||
<t-form v-if="record" class="form" label-align="left" label-width="6rem" v-entrance-transition="70">
|
||||
<t-form-item label="冲正原因" required-mark><t-textarea v-model.trim="reason" borderless autosize maxlength="500" placeholder="请输入冲正原因" /></t-form-item>
|
||||
@@ -20,13 +20,14 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import PackageAPI from "@/api/PackageAPI";
|
||||
import { useUserStore, type Attachment } from "timi-web-api";
|
||||
import SalesOrderAPI from "@/api/SalesOrderAPI";
|
||||
import PackagePhotoField from "@/components/PackagePhotoField.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { GaoFundRecord, PackageAttachment } from "@/types/Package";
|
||||
import type { FundRecord } from "@/types/SalesOrder";
|
||||
import type { PhotoItem } from "@/types/Photo";
|
||||
import { createPackageRequestNo, formatPackageAmount, getFundOperationText, getFundStatusText } from "@/utils/package";
|
||||
import { createPackageRequestNo, formatPackageAmount } from "@/utils/package";
|
||||
import { getFundOperationText, getFundStatusText } from "@/utils/salesOrder";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
@@ -37,7 +38,7 @@ const route = useRoute();
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const navBarStore = useNavBarStore();
|
||||
const record = ref<GaoFundRecord>();
|
||||
const record = ref<FundRecord>();
|
||||
const reason = ref("");
|
||||
const remark = ref("");
|
||||
const occurredAtText = ref("");
|
||||
@@ -46,6 +47,7 @@ const pickerVisible = ref(false);
|
||||
const photoItems = ref<PhotoItem[]>([]);
|
||||
const isLoading = ref(false);
|
||||
const isSaving = ref(false);
|
||||
const requestNo = ref("");
|
||||
|
||||
function confirmTime(value: string | number): void {
|
||||
occurredAtText.value = String(value);
|
||||
@@ -60,7 +62,7 @@ function resolveTimestamp(value: string): number | undefined {
|
||||
return Number.isFinite(timestamp) ? timestamp : undefined;
|
||||
}
|
||||
|
||||
function buildAttachments(): PackageAttachment[] {
|
||||
function buildAttachments(): Partial<Attachment>[] {
|
||||
return photoItems.value.flatMap(item => item.tempFileId ? [{ tempFileId: item.tempFileId, attachType: "PHOTO" }] : []);
|
||||
}
|
||||
|
||||
@@ -71,7 +73,7 @@ async function loadData(): Promise<void> {
|
||||
}
|
||||
isLoading.value = true;
|
||||
try {
|
||||
record.value = await PackageAPI.fundRecordDetail(id);
|
||||
record.value = await SalesOrderAPI.fundRecordDetail(id);
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "资金记录加载失败"));
|
||||
} finally {
|
||||
@@ -97,8 +99,11 @@ async function save(): Promise<void> {
|
||||
}
|
||||
isSaving.value = true;
|
||||
try {
|
||||
const result = await PackageAPI.revokeFundRecord({
|
||||
requestNo: createPackageRequestNo(),
|
||||
if (!requestNo.value) {
|
||||
requestNo.value = createPackageRequestNo();
|
||||
}
|
||||
const result = await SalesOrderAPI.fundRecordRevoke({
|
||||
requestNo: requestNo.value,
|
||||
fundRecordId: record.value.id,
|
||||
occurredAt: resolveTimestamp(occurredAtText.value),
|
||||
reason: reason.value.trim(),
|
||||
@@ -106,9 +111,8 @@ async function save(): Promise<void> {
|
||||
remark: remark.value.trim() || null
|
||||
});
|
||||
Message.success("资金记录已冲正");
|
||||
const customerPackageId = record.value.customerPackageId || record.value.bizId;
|
||||
if (customerPackageId) {
|
||||
await router.replace(`/management/customer-packages/${customerPackageId}`);
|
||||
if (record.value.bizId) {
|
||||
await router.replace(`/management/sales-orders/${record.value.bizId}`);
|
||||
return;
|
||||
}
|
||||
await router.replace(`/management/fund-records/${result.id || record.value.id}`);
|
||||
@@ -137,7 +141,12 @@ onUnmounted(() => navBarStore.clearRight());
|
||||
flex-direction: column;
|
||||
|
||||
.form {
|
||||
border-radius: .75rem;
|
||||
margin: 0 1rem;
|
||||
padding: 0 .5rem;
|
||||
background: var(--td-bg-color-container);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
|
||||
@@ -2,8 +2,10 @@
|
||||
<div v-can="permissionCodes.packageConfig.read" class="package-config-detail">
|
||||
<template v-if="config">
|
||||
<section class="hero" v-entrance-transition>
|
||||
<div class="title"><h2 v-text="config.name || '未命名套餐'" /><t-tag :content="getPackageConfigStatusText(config.status)" variant="light-outline" :theme="getStatusTheme(config.status)" /></div>
|
||||
<span class="eyebrow" v-text="'套餐管理'" />
|
||||
<div class="title"><h1 v-text="config.name || '未命名套餐'" /><t-tag :content="getPackageConfigStatusText(config.status)" variant="light-outline" :theme="getStatusTheme(config.status)" /></div>
|
||||
<p v-text="config.description || '暂无套餐说明'" />
|
||||
<div class="hero-meta"><span v-text="`${config.itemList?.length || 0} 项产品权益`" /><strong v-text="formatPackageAmount(config.standardAmount)" /></div>
|
||||
</section>
|
||||
<t-cell-group title="基本信息" theme="card" v-entrance-transition="70">
|
||||
<t-cell title="标准价" :note="formatPackageAmount(config.standardAmount)" />
|
||||
@@ -14,9 +16,9 @@
|
||||
<t-cell-group title="产品权益" theme="card" v-entrance-transition="140">
|
||||
<t-cell
|
||||
v-for="item in config.itemList || []"
|
||||
:key="item.id || `${item.productName}-${item.unit}`"
|
||||
:title="item.productName"
|
||||
:note="`${item.defaultQuantity} ${item.unit}${item.remark ? `｜${item.remark}` : ''}`"
|
||||
:key="item.id || `${item.productId}-${item.productUnitId}`"
|
||||
:title="item.productNameSnapshot || '未命名产品'"
|
||||
:note="`${item.defaultQuantity} ${item.unitSnapshot || ''}${item.remark ? `｜${item.remark}` : ''}`"
|
||||
/>
|
||||
<div v-if="!config.itemList?.length" class="empty" v-text="'暂无产品权益'" />
|
||||
</t-cell-group>
|
||||
@@ -148,9 +150,18 @@ onUnmounted(() => navBarStore.clearRight());
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
h2 {
|
||||
.eyebrow {
|
||||
color: var(--td-brand-color);
|
||||
display: block;
|
||||
font-size: .6875rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: .08em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
p {
|
||||
@@ -158,6 +169,31 @@ onUnmounted(() => navBarStore.clearRight());
|
||||
margin: .5rem 0 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.hero-meta {
|
||||
gap: .75rem;
|
||||
display: flex;
|
||||
margin-top: .75rem;
|
||||
color: var(--td-text-color-secondary);
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: #c2410c;
|
||||
font-size: 1.2rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) .package-config-detail .hero {
|
||||
.eyebrow {
|
||||
color: #99f6e4;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: #fdba74;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -36,12 +36,15 @@
|
||||
label-width="6rem"
|
||||
>
|
||||
<div class="header">
|
||||
<t-input v-model="item.productName" borderless placeholder="产品名称" />
|
||||
<strong v-text="item.productNameSnapshot || '未选择产品'" />
|
||||
<t-button theme="danger" variant="text" size="small" @click="removeItem(index)">删除</t-button>
|
||||
</div>
|
||||
<t-form-item label="单位" required-mark>
|
||||
<t-input v-model.trim="item.unit" borderless placeholder="例如 盒、次" />
|
||||
</t-form-item>
|
||||
<product-selector
|
||||
:model-value="item.productId && item.productUnitId ? {productId: item.productId, productUnitId: item.productUnitId} : undefined"
|
||||
label="产品单位"
|
||||
required-mark
|
||||
@update:model-value="applyProduct(index, $event)"
|
||||
/>
|
||||
<t-form-item label="默认配额" required-mark>
|
||||
<t-input v-model.trim="item.defaultQuantity" type="number" borderless />
|
||||
</t-form-item>
|
||||
@@ -79,13 +82,15 @@ import PackageAPI from "@/api/PackageAPI";
|
||||
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { GaoPackageConfig, PackageConfigItem, PackageConfigStatus } from "@/types/Package";
|
||||
import ProductAPI from "@/api/ProductAPI";
|
||||
import type { Product } from "@/types/Product";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { formatPackageAmountInput, getPackageConfigStatusText, normalizePackageQuantity, parsePackageAmount } from "@/utils/package";
|
||||
import { Message } from "@/utils/message";
|
||||
import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
|
||||
|
||||
type PickerValue = string | number;
|
||||
type PackageConfigFormItem = PackageConfigItem & { clientKey: string };
|
||||
type PackageConfigFormItem = Partial<PackageConfigItem> & { clientKey: string };
|
||||
|
||||
defineOptions({ name: "PackageConfigEdit" });
|
||||
|
||||
@@ -132,13 +137,29 @@ function createItem(item?: Partial<PackageConfigItem>): PackageConfigFormItem {
|
||||
return {
|
||||
...item,
|
||||
clientKey: window.crypto.randomUUID(),
|
||||
productName: item?.productName || "",
|
||||
unit: item?.unit || "",
|
||||
defaultQuantity: item?.defaultQuantity ?? "",
|
||||
remark: item?.remark || ""
|
||||
};
|
||||
}
|
||||
|
||||
const productCache = new Map<string, Product>();
|
||||
|
||||
async function applyProduct(index: number, value?: { productId: string; productUnitId: string }): Promise<void> {
|
||||
if (!value) {
|
||||
return;
|
||||
}
|
||||
const product = productCache.get(value.productId) || await ProductAPI.detail(value.productId);
|
||||
productCache.set(value.productId, product);
|
||||
const unit = product.unitList?.find(item => item.id === value.productUnitId);
|
||||
Object.assign(form.itemList[index], {
|
||||
productId: value.productId,
|
||||
productUnitId: value.productUnitId,
|
||||
productNameSnapshot: product.name,
|
||||
unitSnapshot: unit?.name || "",
|
||||
baseQuantityPerUnitSnapshot: unit?.baseQuantityPerUnit
|
||||
});
|
||||
}
|
||||
|
||||
function addItem(): void {
|
||||
form.itemList.push(createItem());
|
||||
}
|
||||
@@ -224,10 +245,10 @@ function validateForm(): boolean {
|
||||
}
|
||||
const keySet = new Set<string>();
|
||||
for (const item of form.itemList) {
|
||||
const quantity = normalizePackageQuantity(item.defaultQuantity);
|
||||
const key = `${item.productName.trim()}\u0000${item.unit.trim()}`;
|
||||
if (!item.productName.trim() || !item.unit.trim() || !quantity || quantity === "0") {
|
||||
Message.warning("产品名称、单位和正数量不能为空");
|
||||
const quantity = normalizePackageQuantity(item.defaultQuantity ?? "");
|
||||
const key = `${item.productId}\u0000${item.productUnitId}`;
|
||||
if (!item.productId || !item.productUnitId || !quantity || quantity === "0") {
|
||||
Message.warning("产品单位和正数量不能为空");
|
||||
return false;
|
||||
}
|
||||
if (keySet.has(key)) {
|
||||
@@ -261,9 +282,9 @@ async function save(): Promise<void> {
|
||||
beginAt: form.beginAt ?? null,
|
||||
endAt: form.endAt ?? null,
|
||||
itemList: form.itemList.map((item, index) => ({
|
||||
productName: item.productName.trim(),
|
||||
unit: item.unit.trim(),
|
||||
defaultQuantity: normalizePackageQuantity(item.defaultQuantity)!,
|
||||
productId: item.productId!,
|
||||
productUnitId: item.productUnitId!,
|
||||
defaultQuantity: normalizePackageQuantity(item.defaultQuantity ?? "")!,
|
||||
sort: index,
|
||||
remark: item.remark?.trim() || null
|
||||
}))
|
||||
@@ -337,6 +358,14 @@ onUnmounted(() => navBarStore.clearRight());
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 calc(1rem + env(safe-area-inset-bottom, 0));
|
||||
flex-direction: column;
|
||||
|
||||
.form {
|
||||
margin: 0 1rem;
|
||||
background: var(--td-bg-color-container);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.items {
|
||||
padding: 1rem 0;
|
||||
|
||||
|
||||
@@ -224,7 +224,7 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
padding: .75rem 1rem;
|
||||
position: sticky;
|
||||
background: #F5F5F8;
|
||||
background: var(--td-bg-color-page);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
|
||||
.keyword {
|
||||
@@ -232,7 +232,7 @@ onUnmounted(() => {
|
||||
border: 1px solid var(--td-component-border);
|
||||
z-index: 1;
|
||||
padding: .5rem 1rem;
|
||||
background: #f8fbff;
|
||||
background: var(--td-bg-color-container);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,208 +0,0 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.packageDelivery.read" class="package-record-detail">
|
||||
<template v-if="delivery">
|
||||
<t-cell-group title="发放单信息" theme="card" v-entrance-transition>
|
||||
<t-cell title="操作类型" :note="getDeliveryOperationText(delivery.operationType)" />
|
||||
<t-cell title="状态"><template #note><t-tag :content="getDeliveryStatusText(delivery.status)" :theme="getStatusTheme(delivery.status)" variant="light-outline" /></template></t-cell>
|
||||
<t-cell title="客户套餐" :note="delivery.customerPackageId || '未知'" />
|
||||
<t-cell title="发放时间" :note="delivery.deliveredAt ? Time.toDateTime(delivery.deliveredAt) : '未知'" />
|
||||
<t-cell title="提交人" :note="delivery.operator?.name || delivery.operator?.nick || delivery.operatorUserId || '未知'" />
|
||||
<t-cell title="处理人" :note="delivery.verifier?.name || delivery.verifier?.nick || delivery.verifierUserId || '未处理'" />
|
||||
<t-cell v-if="delivery.sourceDeliveryId" title="原发放单" :note="delivery.sourceDeliveryId" />
|
||||
<t-cell v-if="delivery.reason" title="原因" :note="delivery.reason" />
|
||||
</t-cell-group>
|
||||
<t-cell-group title="本单明细" theme="card" v-entrance-transition="70">
|
||||
<t-cell
|
||||
v-for="item in delivery.itemList || []"
|
||||
:key="item.customerPackageItemId || item.productNameSnapshot"
|
||||
:title="item.productNameSnapshot || '产品'"
|
||||
:note="`${getPackageQuantityText(item.quantity)} ${item.unitSnapshot || ''}`"
|
||||
/>
|
||||
<div v-if="!delivery.itemList?.length" class="empty" v-text="'暂无明细'" />
|
||||
</t-cell-group>
|
||||
<photo-scroller :model-value="photoURLList" :photo-items="photoItems" title="业务照片" :show-add="false" :show-remove="false" :show-viewer-actions="false" />
|
||||
<section class="actions" v-if="canVerify || canCancel || canRevoke" v-entrance-transition="140">
|
||||
<t-button v-if="canVerify && isPending" theme="primary" @click="verify">核销发放</t-button>
|
||||
<t-button v-if="canVerify && isPending" theme="default" variant="outline" @click="openReasonDialog('reject')">拒绝发放</t-button>
|
||||
<t-button v-if="canCancel && isPending" theme="default" variant="outline" @click="openReasonDialog('cancel')">撤销发放</t-button>
|
||||
<t-button v-if="canRevoke && isVerifiedDelivery" theme="danger" variant="outline" @click="toRevoke">整单冲正</t-button>
|
||||
</section>
|
||||
</template>
|
||||
<t-empty v-else :description="isLoading ? '正在加载发放单' : '发放单不存在'" />
|
||||
<t-dialog v-model:visible="reasonDialogVisible" :title="reasonTitle" :confirm-btn="reasonActionText" @confirm="submitReason">
|
||||
<t-textarea v-model.trim="reasonText" borderless autosize placeholder="请输入原因" />
|
||||
</t-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DialogPlugin } from "tdesign-mobile-vue";
|
||||
import { Time } from "timi-web";
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import PackageAPI from "@/api/PackageAPI";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { DeliveryStatus, GaoCustomerPackage, GaoPackageDelivery } from "@/types/Package";
|
||||
import type { PhotoItem } from "@/types/Photo";
|
||||
import { getAttachmentReadURL } from "@/utils/attachment";
|
||||
import { getDeliveryOperationText, getDeliveryStatusText, getPackageQuantityText, isStoreManagerRequiredForPackageDelivery } from "@/utils/package";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { Message } from "@/utils/message";
|
||||
import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
|
||||
|
||||
type ReasonAction = "reject" | "cancel";
|
||||
|
||||
defineOptions({ name: "PackageDeliveryDetail" });
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const navBarStore = useNavBarStore();
|
||||
const delivery = ref<GaoPackageDelivery>();
|
||||
const customerPackage = ref<GaoCustomerPackage>();
|
||||
const isLoading = ref(false);
|
||||
const isOperating = ref(false);
|
||||
const reasonDialogVisible = ref(false);
|
||||
const reasonText = ref("");
|
||||
const reasonAction = ref<ReasonAction>("reject");
|
||||
const isPending = computed(() => delivery.value?.operationType === "DELIVER" && delivery.value.status === "PENDING");
|
||||
const isVerifiedDelivery = computed(() => delivery.value?.operationType === "DELIVER" && delivery.value.status === "VERIFIED");
|
||||
const isStoreManager = computed(() => userStore.hasRoles(gaoRoleCodes.storeManager) && !userStore.hasRoles(gaoRoleCodes.globalManager));
|
||||
const canVerify = computed(() => userStore.hasPermissions(permissionCodes.packageDelivery.verify)
|
||||
&& (!isStoreManagerRequiredForPackageDelivery(customerPackage.value) || isStoreManager.value));
|
||||
const canCancel = computed(() => userStore.hasPermissions(permissionCodes.packageDelivery.create));
|
||||
const canRevoke = computed(() => userStore.hasPermissions(permissionCodes.packageDelivery.revoke));
|
||||
const reasonTitle = computed(() => reasonAction.value === "reject" ? "拒绝发放" : "撤销发放");
|
||||
const reasonActionText = computed(() => reasonAction.value === "reject" ? "拒绝" : "撤销");
|
||||
const photoItems = computed<PhotoItem[]>(() => (delivery.value?.attachmentList || [])
|
||||
.filter(item => !!item.id)
|
||||
.map(item => ({
|
||||
attachment: item,
|
||||
attachType: item.attachType || "PHOTO",
|
||||
url: getAttachmentReadURL(item.id || "")
|
||||
})));
|
||||
const photoURLList = computed(() => photoItems.value.map(item => item.url));
|
||||
|
||||
function getStatusTheme(status?: DeliveryStatus): "success" | "danger" | "default" {
|
||||
return status === "VERIFIED" ? "success" : status === "REJECTED" ? "danger" : "default";
|
||||
}
|
||||
|
||||
async function loadData(): Promise<void> {
|
||||
const id = String(route.params.id || "");
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
isLoading.value = true;
|
||||
try {
|
||||
delivery.value = await PackageAPI.deliveryDetail(id);
|
||||
customerPackage.value = delivery.value.customerPackageId ? await PackageAPI.customerPackageDetail(delivery.value.customerPackageId) : undefined;
|
||||
} catch (error) {
|
||||
customerPackage.value = undefined;
|
||||
Message.error(getErrorMessage(error, "发放单加载失败"));
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshRelatedPackage(): Promise<void> {
|
||||
if (delivery.value?.customerPackageId) {
|
||||
await PackageAPI.customerPackageDetail(delivery.value.customerPackageId);
|
||||
}
|
||||
}
|
||||
|
||||
async function verify(): Promise<void> {
|
||||
if (!delivery.value?.id || !isPending.value || !canVerify.value || isOperating.value) {
|
||||
return;
|
||||
}
|
||||
const dialog = DialogPlugin.confirm({
|
||||
title: "核销发放",
|
||||
content: "核销后会增加已发数量，所有权益完成核销后套餐可能变为已履约。确定继续？",
|
||||
confirmBtn: "核销",
|
||||
onConfirm: async () => {
|
||||
isOperating.value = true;
|
||||
try {
|
||||
await PackageAPI.verifyDelivery(delivery.value!.id!);
|
||||
await refreshRelatedPackage();
|
||||
Message.success("发放单已核销");
|
||||
await loadData();
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "发放核销失败，请刷新后确认状态"));
|
||||
} finally {
|
||||
isOperating.value = false;
|
||||
dialog.destroy();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function openReasonDialog(action: ReasonAction): void {
|
||||
if (isOperating.value || !isPending.value) {
|
||||
return;
|
||||
}
|
||||
reasonAction.value = action;
|
||||
reasonText.value = "";
|
||||
reasonDialogVisible.value = true;
|
||||
}
|
||||
|
||||
async function submitReason(): Promise<void> {
|
||||
if (!delivery.value?.id || !reasonText.value.trim() || isOperating.value) {
|
||||
Message.warning("请输入原因");
|
||||
return;
|
||||
}
|
||||
isOperating.value = true;
|
||||
try {
|
||||
if (reasonAction.value === "reject") {
|
||||
await PackageAPI.rejectDelivery(delivery.value.id, reasonText.value.trim());
|
||||
} else {
|
||||
await PackageAPI.cancelDelivery(delivery.value.id, reasonText.value.trim());
|
||||
}
|
||||
await refreshRelatedPackage();
|
||||
reasonDialogVisible.value = false;
|
||||
Message.success(reasonAction.value === "reject" ? "发放单已拒绝" : "发放单已撤销");
|
||||
await loadData();
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "发放状态操作失败，请刷新后确认状态"));
|
||||
} finally {
|
||||
isOperating.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function toRevoke(): Promise<void> {
|
||||
if (delivery.value?.id && isVerifiedDelivery.value && canRevoke.value) {
|
||||
await router.push(`/management/package-deliveries/${delivery.value.id}/revoke`);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(loadData);
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.package-record-detail {
|
||||
gap: 1rem;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
:deep(.photo-scroller) {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
gap: .5rem;
|
||||
padding: 0 1rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.t-button {
|
||||
flex: 1 1 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: var(--td-text-color-secondary);
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,157 +0,0 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.packageDelivery.read" class="package-record-list">
|
||||
<div class="filters">
|
||||
<t-dropdown-menu>
|
||||
<t-dropdown-item v-model="status" label="状态" :options="statusOptions" @change="selectStatus" />
|
||||
<t-dropdown-item v-model="operationType" label="操作类型" :options="operationOptions" @change="selectOperation" />
|
||||
</t-dropdown-menu>
|
||||
</div>
|
||||
<t-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="reload" @scrolltolower="loadMore">
|
||||
<t-cell-group v-if="deliveryList.length" theme="card">
|
||||
<t-cell
|
||||
v-for="(item, index) in deliveryList"
|
||||
:key="item.id"
|
||||
:title="`${getDeliveryOperationText(item.operationType)} · ${getDeliveryStatusText(item.status)}`"
|
||||
:description="getDescription(item)"
|
||||
arrow
|
||||
hover
|
||||
v-entrance-transition="index * 30"
|
||||
@click="toDetail(item)"
|
||||
>
|
||||
<template #note><span v-text="getItemSummary(item)" /></template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<div v-else class="empty" v-text="loading ? '正在加载发放记录' : '暂无发放记录'" />
|
||||
<div class="center-tips" v-text="loadStateText" />
|
||||
</t-pull-down-refresh>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type DropdownValue } from "tdesign-mobile-vue";
|
||||
import { Time } from "timi-web";
|
||||
import PackageAPI from "@/api/PackageAPI";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { DeliveryOperationType, DeliveryStatus, GaoPackageDelivery } from "@/types/Package";
|
||||
import { getDeliveryOperationText, getDeliveryStatusText, getPackageQuantityText } from "@/utils/package";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
defineOptions({ name: "PackageDeliveryList" });
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
const deliveryList = ref<GaoPackageDelivery[]>([]);
|
||||
const pageIndex = ref(0);
|
||||
const total = ref(0);
|
||||
const loading = ref(false);
|
||||
const isRefreshing = ref(false);
|
||||
const noMore = ref(false);
|
||||
const status = ref("ALL");
|
||||
const operationType = ref("ALL");
|
||||
const statusOptions = [
|
||||
{ label: "全部状态", value: "ALL" },
|
||||
{ label: "待核销", value: "PENDING" },
|
||||
{ label: "已核销", value: "VERIFIED" },
|
||||
{ label: "已拒绝", value: "REJECTED" },
|
||||
{ label: "已撤销", value: "CANCELLED" },
|
||||
{ label: "已冲正", value: "REVOKED" }
|
||||
];
|
||||
const operationOptions = [
|
||||
{ label: "全部类型", value: "ALL" },
|
||||
{ label: "正常发放", value: "DELIVER" },
|
||||
{ label: "发放冲正", value: "REVOKE" }
|
||||
];
|
||||
const loadStateText = computed(() => loading.value ? "正在加载" : noMore.value ? "已经到底了" : "上拉加载更多");
|
||||
|
||||
async function loadMore(): Promise<void> {
|
||||
if (loading.value || noMore.value) {
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
try {
|
||||
const result = await PackageAPI.deliveryList({
|
||||
index: pageIndex.value,
|
||||
size: 15,
|
||||
customerPackageId: String(route.query.customerPackageId || "") || undefined,
|
||||
status: status.value === "ALL" ? undefined : status.value as DeliveryStatus,
|
||||
operationType: operationType.value === "ALL" ? undefined : operationType.value as DeliveryOperationType
|
||||
});
|
||||
const list = result.list || [];
|
||||
deliveryList.value = deliveryList.value.concat(list);
|
||||
total.value = result.total || 0;
|
||||
pageIndex.value += 1;
|
||||
noMore.value = list.length < 15 || total.value <= deliveryList.value.length;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function reload(): Promise<void> {
|
||||
if (loading.value) {
|
||||
return;
|
||||
}
|
||||
pageIndex.value = 0;
|
||||
deliveryList.value = [];
|
||||
total.value = 0;
|
||||
noMore.value = false;
|
||||
await loadMore();
|
||||
}
|
||||
|
||||
async function selectStatus(value: DropdownValue): Promise<void> {
|
||||
if (!Array.isArray(value)) {
|
||||
status.value = String(value);
|
||||
await reload();
|
||||
}
|
||||
}
|
||||
|
||||
async function selectOperation(value: DropdownValue): Promise<void> {
|
||||
if (!Array.isArray(value)) {
|
||||
operationType.value = String(value);
|
||||
await reload();
|
||||
}
|
||||
}
|
||||
|
||||
function getDescription(item: GaoPackageDelivery): string {
|
||||
return `${item.customerPackageId || "未知客户套餐"}｜${item.deliveredAt ? Time.toDateTime(item.deliveredAt) : "时间未知"}`;
|
||||
}
|
||||
|
||||
function getItemSummary(item: GaoPackageDelivery): string {
|
||||
return (item.itemList || []).map(detail => `${detail.productNameSnapshot || "产品"} ${getPackageQuantityText(detail.quantity)} ${detail.unitSnapshot || ""}`).join("、") || "无明细";
|
||||
}
|
||||
|
||||
async function toDetail(item: GaoPackageDelivery): Promise<void> {
|
||||
if (item.id) {
|
||||
await router.push(`/management/package-deliveries/${item.id}`);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
navBarStore.clearRight();
|
||||
try {
|
||||
await reload();
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "发放记录加载失败"));
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.package-record-list {
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
|
||||
|
||||
.filters {
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: var(--td-text-color-secondary);
|
||||
padding: 2rem 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,152 +0,0 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.packageDelivery.revoke" class="package-operation-edit">
|
||||
<t-cell-group v-if="delivery" title="原发放单" theme="card" v-entrance-transition>
|
||||
<t-cell title="发放单号" :note="delivery.id" />
|
||||
<t-cell title="客户套餐" :note="delivery.customerPackageId || '未知'" />
|
||||
<t-cell title="原状态" :note="getDeliveryStatusText(delivery.status)" />
|
||||
<t-cell title="原明细" :note="getItemSummary" />
|
||||
</t-cell-group>
|
||||
<t-form v-if="delivery" class="form" label-align="left" label-width="6rem" v-entrance-transition="70">
|
||||
<t-form-item label="冲正原因" required-mark><t-textarea v-model.trim="reason" borderless autosize maxlength="500" placeholder="请输入冲正原因" /></t-form-item>
|
||||
<t-form-item label="冲正时间" arrow @click="pickerVisible = true"><span class="picker-text" v-text="occurredAtText || '使用当前时间'" /></t-form-item>
|
||||
<t-form-item label="备注"><t-textarea v-model.trim="remark" borderless autosize maxlength="500" placeholder="备注（可选）" /></t-form-item>
|
||||
</t-form>
|
||||
<package-photo-field v-if="delivery" v-model="photoItems" required title="冲正凭证照片" />
|
||||
<t-empty v-if="!delivery" :description="isLoading ? '正在加载发放单' : '发放单不存在'" />
|
||||
<t-popup v-model="pickerVisible" placement="bottom">
|
||||
<t-date-time-picker v-model="draftTime" format="YYYY-MM-DD HH:mm" :mode="['date', 'minute']" title="冲正时间" @cancel="pickerVisible = false" @confirm="confirmTime" />
|
||||
</t-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import PackageAPI from "@/api/PackageAPI";
|
||||
import PackagePhotoField from "@/components/PackagePhotoField.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { GaoPackageDelivery, PackageAttachment } from "@/types/Package";
|
||||
import type { PhotoItem } from "@/types/Photo";
|
||||
import { createPackageRequestNo, getDeliveryStatusText, getPackageQuantityText } from "@/utils/package";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
defineOptions({ name: "PackageDeliveryRevoke" });
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const navBarStore = useNavBarStore();
|
||||
const delivery = ref<GaoPackageDelivery>();
|
||||
const reason = ref("");
|
||||
const remark = ref("");
|
||||
const occurredAtText = ref("");
|
||||
const draftTime = ref("");
|
||||
const pickerVisible = ref(false);
|
||||
const photoItems = ref<PhotoItem[]>([]);
|
||||
const isLoading = ref(false);
|
||||
const isSaving = ref(false);
|
||||
const getItemSummary = computed(() => (delivery.value?.itemList || []).map(item => `${item.productNameSnapshot || "产品"} ${getPackageQuantityText(item.quantity)} ${item.unitSnapshot || ""}`).join("、") || "无明细");
|
||||
|
||||
function confirmTime(value: string | number): void {
|
||||
occurredAtText.value = String(value);
|
||||
pickerVisible.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(): PackageAttachment[] {
|
||||
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;
|
||||
}
|
||||
isLoading.value = true;
|
||||
try {
|
||||
delivery.value = await PackageAPI.deliveryDetail(id);
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "发放单加载失败"));
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function save(): Promise<void> {
|
||||
if (isSaving.value) {
|
||||
return;
|
||||
}
|
||||
if (!delivery.value?.id || delivery.value.status !== "VERIFIED" || delivery.value.operationType !== "DELIVER") {
|
||||
Message.warning("只有已核销的正常发放单可以冲正");
|
||||
return;
|
||||
}
|
||||
if (!reason.value.trim()) {
|
||||
Message.warning("请输入冲正原因");
|
||||
return;
|
||||
}
|
||||
if (!photoItems.value.some(item => item.tempFileId)) {
|
||||
Message.warning("冲正必须上传至少一张照片");
|
||||
return;
|
||||
}
|
||||
isSaving.value = true;
|
||||
try {
|
||||
const result = await PackageAPI.revokeDelivery({
|
||||
requestNo: createPackageRequestNo(),
|
||||
deliveryId: delivery.value.id,
|
||||
deliveredAt: resolveTimestamp(occurredAtText.value),
|
||||
reason: reason.value.trim(),
|
||||
attachmentList: buildAttachments(),
|
||||
remark: remark.value.trim() || null
|
||||
});
|
||||
Message.success("发放单已冲正");
|
||||
if (result.customerPackageId) {
|
||||
await router.replace(`/management/customer-packages/${result.customerPackageId}`);
|
||||
return;
|
||||
}
|
||||
await router.replace(`/management/package-deliveries/${delivery.value.id}`);
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "发放冲正失败，请刷新后确认状态"));
|
||||
} finally {
|
||||
isSaving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
if (userStore.hasPermissions(permissionCodes.packageDelivery.revoke)) {
|
||||
navBarStore.setRightText("提交冲正", "var(--td-danger-color)", save);
|
||||
}
|
||||
await loadData();
|
||||
});
|
||||
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.package-operation-edit {
|
||||
gap: 1rem;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.form {
|
||||
border-radius: .75rem;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.package-photo-field {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,418 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.productCategory.read" class="product-category-list">
|
||||
<div class="filters bg-white">
|
||||
<t-input
|
||||
v-model="keyword"
|
||||
class="keyword"
|
||||
type="search"
|
||||
borderless
|
||||
placeholder="搜索分类名称"
|
||||
/>
|
||||
<t-dropdown-menu class="status">
|
||||
<t-dropdown-item
|
||||
v-model="status"
|
||||
label="状态"
|
||||
:options="statusOptions"
|
||||
@change="selectStatus"
|
||||
/>
|
||||
</t-dropdown-menu>
|
||||
</div>
|
||||
<t-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="refresh" @scrolltolower="loadMore">
|
||||
<t-cell-group v-if="categoryList.length" theme="card" class="list fix-last-cell-line">
|
||||
<t-swipe-cell v-for="(item, index) in categoryList" :key="item.id" class="item" v-entrance-transition="index * 30">
|
||||
<t-cell arrow hover @click="openEditDialog(item)">
|
||||
<template #title>
|
||||
<div class="title">
|
||||
<strong v-text="item.name || '未命名分类'" />
|
||||
</div>
|
||||
</template>
|
||||
<template #note>
|
||||
<t-tag size="small" variant="outline" :theme="getProductCategoryStatusTheme(item.status)" :content="getProductCategoryStatusText(item.status)" />
|
||||
</template>
|
||||
</t-cell>
|
||||
<template v-if="canUpdate && item.status === 'ACTIVE' && item.id" #right>
|
||||
<t-button class="disable" theme="danger" :loading="disablingId === item.id" @click.stop="disable(item)">停用</t-button>
|
||||
</template>
|
||||
</t-swipe-cell>
|
||||
</t-cell-group>
|
||||
<div v-else class="center-tips" v-text="emptyText" />
|
||||
<div v-if="categoryList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
|
||||
</t-pull-down-refresh>
|
||||
</div>
|
||||
<t-dialog
|
||||
v-model:visible="editDialogVisible"
|
||||
:title="isCreateMode ? '新增产品分类' : '编辑产品分类'"
|
||||
cancel-btn="取消"
|
||||
:confirm-btn="isSaving ? { content: '保存中', loading: true } : '保存'"
|
||||
:close-on-overlay-click="!isSaving"
|
||||
@cancel="closeEditDialog"
|
||||
@confirm="saveCategory"
|
||||
>
|
||||
<t-form class="edit-form" label-align="left" label-width="5rem">
|
||||
<t-form-item label="分类名称" required-mark>
|
||||
<t-input
|
||||
v-model="formModel.name"
|
||||
borderless
|
||||
maxlength="64"
|
||||
placeholder="请输入分类名称"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item v-if="!isCreateMode" label="状态" arrow content-align="right" @click="openStatusPicker">
|
||||
<span v-text="getProductCategoryStatusText(formModel.status)" />
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
</t-dialog>
|
||||
<t-popup v-model="statusPickerVisible" placement="bottom">
|
||||
<t-picker v-model="statusDraft" :columns="statusPickerOptions" title="分类状态" @cancel="statusPickerVisible = false" @confirm="confirmStatus" />
|
||||
</t-popup>
|
||||
<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DialogPlugin, type DropdownValue } from "tdesign-mobile-vue";
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import ProductAPI from "@/api/ProductAPI";
|
||||
import type { NavBarAction } from "@/types/NavBarAction";
|
||||
import type { ProductCategory, ProductCategoryStatus } from "@/types/Product";
|
||||
import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { getProductCategoryStatusText, getProductCategoryStatusTheme } from "@/utils/product";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
defineOptions({ name: "ProductCategoryList" });
|
||||
|
||||
const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
const userStore = useUserStore();
|
||||
const canCreate = computed(() => userStore.hasPermissions(permissionCodes.productCategory.create));
|
||||
const canUpdate = computed(() => userStore.hasPermissions(permissionCodes.productCategory.update));
|
||||
const canShowActionMenu = computed(() => canCreate.value || canUpdate.value);
|
||||
const actionList = computed<NavBarAction[]>(() => {
|
||||
const list: NavBarAction[] = [];
|
||||
if (canCreate.value) {
|
||||
list.push({
|
||||
key: "create",
|
||||
text: "新增分类",
|
||||
icon: "add",
|
||||
theme: "primary",
|
||||
action: openCreateDialog
|
||||
});
|
||||
}
|
||||
if (canUpdate.value) {
|
||||
list.push({
|
||||
key: "rank",
|
||||
text: "排序",
|
||||
icon: "order",
|
||||
action: toRank
|
||||
});
|
||||
}
|
||||
return list;
|
||||
});
|
||||
|
||||
const keyword = ref("");
|
||||
const status = ref("ALL");
|
||||
const categoryList = ref<ProductCategory[]>([]);
|
||||
const pageIndex = ref(0);
|
||||
const total = ref(0);
|
||||
const isLoading = ref(false);
|
||||
const isRefreshing = ref(false);
|
||||
const isNoMore = ref(false);
|
||||
const disablingId = ref("");
|
||||
const isSaving = ref(false);
|
||||
const editDialogVisible = ref(false);
|
||||
const statusPickerVisible = ref(false);
|
||||
const statusDraft = ref<Array<string | number>>([]);
|
||||
const formModel = reactive<ProductCategory>({
|
||||
id: undefined,
|
||||
name: "",
|
||||
sort: 0,
|
||||
status: "ACTIVE"
|
||||
});
|
||||
const isCreateMode = computed(() => !formModel.id);
|
||||
let keywordTimer: number | undefined;
|
||||
let requestToken = 0;
|
||||
|
||||
const statusOptions = [
|
||||
{ label: "全部状态", value: "ALL" },
|
||||
{ label: "启用", value: "ACTIVE" },
|
||||
{ label: "停用", value: "INACTIVE" }
|
||||
];
|
||||
const statusPickerOptions = [
|
||||
{ label: "启用", value: "ACTIVE" },
|
||||
{ label: "停用", value: "INACTIVE" }
|
||||
];
|
||||
const emptyText = computed(() => isLoading.value ? "正在加载产品分类" : keyword.value ? "未找到匹配分类" : "暂无产品分类");
|
||||
|
||||
async function fetch(reset = false): Promise<void> {
|
||||
if (!reset && (isLoading.value || isNoMore.value)) {
|
||||
return;
|
||||
}
|
||||
if (reset) {
|
||||
pageIndex.value = 0;
|
||||
categoryList.value = [];
|
||||
total.value = 0;
|
||||
isNoMore.value = false;
|
||||
}
|
||||
const token = ++requestToken;
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const pageSize = 20;
|
||||
const result = await ProductAPI.categoryList({
|
||||
index: pageIndex.value,
|
||||
size: pageSize,
|
||||
keyword: keyword.value || undefined,
|
||||
status: status.value === "ALL" ? undefined : status.value as ProductCategoryStatus
|
||||
});
|
||||
if (token !== requestToken) {
|
||||
return;
|
||||
}
|
||||
const list = result.list || [];
|
||||
categoryList.value = reset ? list : categoryList.value.concat(list);
|
||||
total.value = result.total || 0;
|
||||
pageIndex.value += 1;
|
||||
isNoMore.value = list.length < pageSize || total.value === categoryList.value.length || total.value < categoryList.value.length;
|
||||
} finally {
|
||||
if (token === requestToken) {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function refresh(): Promise<void> {
|
||||
try {
|
||||
await fetch(true);
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "产品分类加载失败"));
|
||||
} finally {
|
||||
isRefreshing.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadMore(): Promise<void> {
|
||||
try {
|
||||
await fetch();
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "产品分类加载失败"));
|
||||
}
|
||||
}
|
||||
|
||||
async function selectStatus(value: DropdownValue): Promise<void> {
|
||||
if (Array.isArray(value)) {
|
||||
return;
|
||||
}
|
||||
status.value = String(value);
|
||||
await fetch(true);
|
||||
}
|
||||
|
||||
function openCreateDialog(): void {
|
||||
if (!canCreate.value) {
|
||||
return;
|
||||
}
|
||||
Object.assign(formModel, {
|
||||
id: undefined,
|
||||
name: "",
|
||||
sort: 0,
|
||||
status: "ACTIVE"
|
||||
});
|
||||
statusPickerVisible.value = false;
|
||||
editDialogVisible.value = true;
|
||||
}
|
||||
|
||||
function openEditDialog(item: ProductCategory): void {
|
||||
if (!item.id || !canUpdate.value) {
|
||||
return;
|
||||
}
|
||||
Object.assign(formModel, {
|
||||
id: item.id,
|
||||
name: item.name || "",
|
||||
sort: item.sort ?? 0,
|
||||
status: item.status || "ACTIVE",
|
||||
storeId: item.storeId
|
||||
});
|
||||
statusPickerVisible.value = false;
|
||||
editDialogVisible.value = true;
|
||||
}
|
||||
|
||||
function closeEditDialog(): void {
|
||||
if (isSaving.value) {
|
||||
return;
|
||||
}
|
||||
statusPickerVisible.value = false;
|
||||
editDialogVisible.value = false;
|
||||
}
|
||||
|
||||
function openStatusPicker(): void {
|
||||
statusDraft.value = [formModel.status || "ACTIVE"];
|
||||
statusPickerVisible.value = true;
|
||||
}
|
||||
|
||||
function confirmStatus(value: Array<string | number>): void {
|
||||
const nextStatus = String(value[0] || "");
|
||||
if (nextStatus === "ACTIVE" || nextStatus === "INACTIVE") {
|
||||
formModel.status = nextStatus;
|
||||
}
|
||||
statusPickerVisible.value = false;
|
||||
}
|
||||
|
||||
function validateForm(): boolean {
|
||||
if (!formModel.name.trim()) {
|
||||
Message.warning("请输入分类名称");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
async function saveCategory(): Promise<void> {
|
||||
if (isSaving.value) {
|
||||
return;
|
||||
}
|
||||
const isCreating = !formModel.id;
|
||||
if (isCreating ? !canCreate.value : !canUpdate.value) {
|
||||
return;
|
||||
}
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
isSaving.value = true;
|
||||
try {
|
||||
const payload: ProductCategory = {
|
||||
id: formModel.id,
|
||||
name: formModel.name.trim(),
|
||||
sort: formModel.sort ?? 0,
|
||||
status: formModel.status
|
||||
};
|
||||
if (isCreating) {
|
||||
await ProductAPI.categoryCreate(payload);
|
||||
} else {
|
||||
await ProductAPI.categoryUpdate(payload);
|
||||
}
|
||||
editDialogVisible.value = false;
|
||||
await fetch(true);
|
||||
Message.success(isCreating ? "产品分类已创建" : "产品分类已保存");
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "产品分类保存失败"));
|
||||
} finally {
|
||||
isSaving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function toRank(): Promise<void> {
|
||||
await router.push({ name: "ProductCategoryRank" });
|
||||
}
|
||||
|
||||
function disable(item: ProductCategory): void {
|
||||
if (!item.id || disablingId.value) {
|
||||
return;
|
||||
}
|
||||
const dialog = DialogPlugin.confirm({
|
||||
title: "停用产品分类",
|
||||
content: `确定停用“${item.name || "未命名分类"}”？停用后不能用于新产品。`,
|
||||
confirmBtn: { content: "停用", theme: "danger" },
|
||||
onConfirm: async () => {
|
||||
disablingId.value = item.id || "";
|
||||
try {
|
||||
await ProductAPI.categoryDisable(item.id || "");
|
||||
await fetch(true);
|
||||
Message.success("产品分类已停用");
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "产品分类停用失败"));
|
||||
} finally {
|
||||
disablingId.value = "";
|
||||
dialog.destroy();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
navBarStore.clearRight();
|
||||
navBarStore.setCustomRightVisible(canShowActionMenu.value);
|
||||
try {
|
||||
await fetch(true);
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "产品分类加载失败"));
|
||||
}
|
||||
});
|
||||
|
||||
watch(keyword, () => {
|
||||
window.clearTimeout(keywordTimer);
|
||||
keywordTimer = window.setTimeout(async () => {
|
||||
try {
|
||||
await fetch(true);
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "产品分类加载失败"));
|
||||
}
|
||||
}, 300);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
navBarStore.clearRight();
|
||||
statusPickerVisible.value = false;
|
||||
window.clearTimeout(keywordTimer);
|
||||
requestToken += 1;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.product-category-list {
|
||||
padding: var(--app-nav-height) 0 1rem;
|
||||
|
||||
.filters {
|
||||
top: var(--app-nav-height);
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
padding: .75rem 1rem;
|
||||
position: sticky;
|
||||
background: var(--td-bg-color-page);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
|
||||
.keyword {
|
||||
flex: 1;
|
||||
border: 1px solid var(--td-component-border);
|
||||
z-index: 1;
|
||||
padding: .5rem 1rem;
|
||||
background: var(--td-bg-color-container);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-left: -2rem;
|
||||
padding-left: 1.5rem;
|
||||
border-radius: 1rem;
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
padding-top: .75rem;
|
||||
|
||||
.item {
|
||||
|
||||
.title {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.disable {
|
||||
height: 100%;
|
||||
padding: 0 1rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit-form {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.productCategory.update" class="product-category-rank">
|
||||
<div class="tip" v-text="'按住右侧拖动手柄调整分类顺序，保存后生效'" />
|
||||
<div class="items">
|
||||
<t-cell-group v-if="categoryList.length" theme="card">
|
||||
<vue-draggable-next
|
||||
v-model="categoryList"
|
||||
class="draggable"
|
||||
item-key="id"
|
||||
handle=".handle"
|
||||
ghost-class="ghost"
|
||||
chosen-class="chosen"
|
||||
drag-class="dragging"
|
||||
:animation="180"
|
||||
:disabled="isLoading || isSaving"
|
||||
@change="handleSortChange"
|
||||
>
|
||||
<t-cell
|
||||
v-for="(item, index) in categoryList"
|
||||
:key="item.id"
|
||||
class="cell"
|
||||
:title="item.name || '未命名分类'"
|
||||
v-entrance-transition="index * 30"
|
||||
>
|
||||
<template #note>
|
||||
<t-tag
|
||||
:theme="getStatusTheme(item.status)"
|
||||
variant="outline"
|
||||
:content="getStatusText(item.status)"
|
||||
/>
|
||||
</template>
|
||||
<template #rightIcon>
|
||||
<t-icon class="handle" role="button" name="move" aria-label="拖动排序" />
|
||||
</template>
|
||||
</t-cell>
|
||||
</vue-draggable-next>
|
||||
</t-cell-group>
|
||||
<div v-else class="empty-block" v-text="isLoading ? '正在加载产品分类' : '暂无产品分类'" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { TagProps } from "tdesign-mobile-vue";
|
||||
import { VueDraggableNext } from "vue-draggable-next";
|
||||
import ProductAPI from "@/api/ProductAPI";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { ProductCategory, ProductCategoryStatus } from "@/types/Product";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
import { useUserStore } from "timi-web-api";
|
||||
|
||||
defineOptions({ name: "ProductCategoryRank" });
|
||||
|
||||
const navBarStore = useNavBarStore();
|
||||
const userStore = useUserStore();
|
||||
const router = useRouter();
|
||||
|
||||
const categoryList = ref<ProductCategory[]>([]);
|
||||
const isLoading = ref(false);
|
||||
const isSaving = ref(false);
|
||||
const sortDirty = ref(false);
|
||||
|
||||
function getStatusText(status?: ProductCategoryStatus): string {
|
||||
return status === "ACTIVE" ? "启用" : "停用";
|
||||
}
|
||||
|
||||
function getStatusTheme(status?: ProductCategoryStatus): TagProps["theme"] {
|
||||
return status === "ACTIVE" ? "primary" : "default";
|
||||
}
|
||||
|
||||
function handleSortChange(): void {
|
||||
sortDirty.value = true;
|
||||
}
|
||||
|
||||
async function saveSort(): Promise<void> {
|
||||
if (!sortDirty.value || isSaving.value || !userStore.hasPermissions(permissionCodes.productCategory.update)) {
|
||||
return;
|
||||
}
|
||||
isSaving.value = true;
|
||||
try {
|
||||
const idList = categoryList.value
|
||||
.map(item => item.id)
|
||||
.filter((id): id is string => Boolean(id));
|
||||
await ProductAPI.categorySort(idList);
|
||||
categoryList.value.forEach((item, index) => {
|
||||
item.sort = index;
|
||||
});
|
||||
sortDirty.value = false;
|
||||
Message.success("产品分类排序已保存");
|
||||
await router.back();
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "产品分类排序保存失败"));
|
||||
} finally {
|
||||
isSaving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadData(): Promise<void> {
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const result = await ProductAPI.categoryList({ index: 0, size: 1000 });
|
||||
categoryList.value = result.list || [];
|
||||
sortDirty.value = false;
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
navBarStore.clearRight();
|
||||
if (userStore.hasPermissions(permissionCodes.productCategory.update)) {
|
||||
navBarStore.setRightText("保存", "var(--td-brand-color)", saveSort);
|
||||
}
|
||||
try {
|
||||
await loadData();
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "产品分类加载失败"));
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
navBarStore.clearRight();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.product-category-rank {
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 6rem;
|
||||
|
||||
.tip {
|
||||
color: #52607a;
|
||||
padding: 0 1rem .75rem;
|
||||
font-size: .8125rem;
|
||||
}
|
||||
|
||||
.items {
|
||||
.draggable {
|
||||
.cell {
|
||||
position: relative;
|
||||
|
||||
.handle {
|
||||
color: #52607a;
|
||||
cursor: grab;
|
||||
touch-action: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ghost {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
.chosen,
|
||||
.dragging {
|
||||
z-index: 1;
|
||||
box-shadow: 0 .5rem 1rem rgba(15, 23, 42, .16);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-block {
|
||||
color: #52607a;
|
||||
padding: 2rem 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.product-category-rank {
|
||||
.tip,
|
||||
.empty-block,
|
||||
.handle {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.draggable {
|
||||
.cell {
|
||||
background: rgba(15, 23, 42, .88);
|
||||
box-shadow: 0 .5rem 1rem rgba(2, 6, 23, .28);
|
||||
}
|
||||
|
||||
.ghost {
|
||||
background: rgba(15, 23, 42, .6);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.product.read" class="product-detail">
|
||||
<t-loading v-if="isLoading" class="loading" size="32px" />
|
||||
<template v-else-if="product">
|
||||
<section class="hero" v-entrance-transition>
|
||||
<span class="eyebrow" v-text="'产品库'" />
|
||||
<div class="hero-title">
|
||||
<h1 v-text="product.name || '未命名产品'" />
|
||||
<t-tag :content="getProductStatusText(product.status)" variant="light-outline" :theme="getProductStatusTheme(product.status)" />
|
||||
</div>
|
||||
<div class="hero-meta">
|
||||
<span v-text="`${product.code || '-'} · ${getProductTypeText(product.productType)}`" />
|
||||
<span v-text="`${product.unitList?.length || 0} 个业务单位`" />
|
||||
</div>
|
||||
</section>
|
||||
<card-container v-if="product.attachmentList?.length" title="产品附件">
|
||||
<photo-scroller
|
||||
:model-value="attachmentUrlList"
|
||||
:photo-items="attachmentItemList"
|
||||
title="附件列表"
|
||||
:show-add="false"
|
||||
:show-remove="false"
|
||||
:show-viewer-actions="false"
|
||||
/>
|
||||
</card-container>
|
||||
<card-container title="基本信息">
|
||||
<t-cell-group theme="card" class="info">
|
||||
<t-cell title="产品名称" :note="product.name || '未命名产品'" />
|
||||
<t-cell title="产品编码" :note="product.code || '-'" />
|
||||
<t-cell title="产品类型" :note="getProductTypeText(product.productType)" />
|
||||
<t-cell title="产品分类" :note="product.category?.name || '未分类'" />
|
||||
<t-cell title="基础单位" :note="product.baseUnit || '-'" />
|
||||
<t-cell title="参考成本" :note="formatProductAmount(product.referenceCost)" />
|
||||
<t-cell title="库存管理" :note="product.stockEnabled ? '已开启' : '未开启'" />
|
||||
<t-cell title="状态" :note="getProductStatusText(product.status)" />
|
||||
</t-cell-group>
|
||||
</card-container>
|
||||
<card-container title="业务单位" :description="product.unitList?.length ? '名称、基础单位数量、售价和可用范围由产品库统一维护' : '暂无业务单位'">
|
||||
<t-cell-group theme="card" class="units">
|
||||
<t-cell v-for="unit in product.unitList || []" :key="unit.id || unit.name">
|
||||
<template #title>
|
||||
<div class="unit-title">
|
||||
<strong v-text="unit.name || '未命名单位'" />
|
||||
<t-tag v-if="unit.isBase" size="small" theme="primary" variant="light-outline" content="基础单位" />
|
||||
</div>
|
||||
</template>
|
||||
<template #note>
|
||||
<span v-text="`1 ${unit.name || '单位'} = ${unit.baseQuantityPerUnit} ${product.baseUnit || '基础单位'}`" />
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="unit-description">
|
||||
<span v-text="`建议售价：${formatProductAmount(unit.salePrice)}`" />
|
||||
<span v-text="getUnitUsageText(unit)" />
|
||||
</div>
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
</card-container>
|
||||
<card-container v-if="product.remark" title="备注">
|
||||
<div class="remark" v-text="product.remark" />
|
||||
</card-container>
|
||||
</template>
|
||||
<t-empty v-else description="产品不存在或已被删除" />
|
||||
</div>
|
||||
<nav-bar-action-menu v-if="actionList.length" :actions="actionList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DialogPlugin } from "tdesign-mobile-vue";
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import ProductAPI from "@/api/ProductAPI";
|
||||
import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { NavBarAction } from "@/types/NavBarAction";
|
||||
import type { PhotoItem } from "@/types/Photo";
|
||||
import type { Product, ProductUnit } from "@/types/Product";
|
||||
import { getAttachmentReadURL } from "@/utils/attachment";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { formatProductAmount, getProductStatusText, getProductStatusTheme, getProductTypeText } from "@/utils/product";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
defineOptions({ name: "ProductDetail" });
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
const userStore = useUserStore();
|
||||
const product = ref<Product>();
|
||||
const isLoading = ref(false);
|
||||
const attachmentItemList = computed<PhotoItem[]>(() => (product.value?.attachmentList || [])
|
||||
.filter(item => !!item.id)
|
||||
.map(item => ({
|
||||
attachment: item,
|
||||
attachType: item.attachType || "PHOTO",
|
||||
previewUrl: getAttachmentReadURL(item.id || ""),
|
||||
url: getAttachmentReadURL(item.id || "", 90)
|
||||
})));
|
||||
const attachmentUrlList = computed(() => attachmentItemList.value.map(item => item.url));
|
||||
const actionList = computed<NavBarAction[]>(() => {
|
||||
const list: NavBarAction[] = [];
|
||||
if (userStore.hasPermissions(permissionCodes.product.update)) {
|
||||
list.push({ key: "edit", text: "编辑产品", icon: "edit-1", theme: "primary", action: edit });
|
||||
if (product.value?.status === "ACTIVE") {
|
||||
list.push({ key: "disable", text: "停用产品", icon: "close", theme: "danger", action: disable });
|
||||
}
|
||||
}
|
||||
if (product.value?.stockEnabled && userStore.hasPermissions(permissionCodes.productStock.read)) {
|
||||
list.push({ key: "stock", text: "查看库存", icon: "wallet", theme: "default", action: viewStock });
|
||||
}
|
||||
return list;
|
||||
});
|
||||
|
||||
function getUnitUsageText(unit: ProductUnit): string {
|
||||
const usage: string[] = [];
|
||||
if (unit.allowSale) {
|
||||
usage.push("可销售");
|
||||
}
|
||||
if (unit.allowPurchase) {
|
||||
usage.push("可采购");
|
||||
}
|
||||
return usage.length ? usage.join("、") : "暂无业务用途";
|
||||
}
|
||||
|
||||
async function load(): Promise<void> {
|
||||
const id = String(route.params.id || "");
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
isLoading.value = true;
|
||||
try {
|
||||
product.value = await ProductAPI.detail(id);
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function edit(): Promise<void> {
|
||||
if (product.value?.id) {
|
||||
await router.push(`/management/products/${product.value.id}/edit`);
|
||||
}
|
||||
}
|
||||
|
||||
async function viewStock(): Promise<void> {
|
||||
if (product.value?.id) {
|
||||
await router.push(`/management/product-stocks/${product.value.id}`);
|
||||
}
|
||||
}
|
||||
|
||||
function disable(): void {
|
||||
const id = product.value?.id;
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
const dialog = DialogPlugin.confirm({
|
||||
title: "停用产品",
|
||||
content: "停用后不能用于新订单、套餐或库存操作，历史记录仍会保留。确定停用？",
|
||||
confirmBtn: { content: "停用", theme: "danger" },
|
||||
onConfirm: async () => {
|
||||
try {
|
||||
await ProductAPI.disable(id);
|
||||
await load();
|
||||
Message.success("产品已停用");
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "产品停用失败"));
|
||||
} finally {
|
||||
dialog.destroy();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
navBarStore.clearRight();
|
||||
navBarStore.setCustomRightVisible(actionList.value.length > 0);
|
||||
try {
|
||||
await load();
|
||||
navBarStore.setCustomRightVisible(actionList.value.length > 0);
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "产品详情加载失败"));
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.product-detail {
|
||||
gap: 1rem;
|
||||
display: grid;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
|
||||
|
||||
.hero {
|
||||
margin: 0 1rem;
|
||||
padding: 1rem;
|
||||
background: linear-gradient(135deg, #e8fffa, #eff6ff);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
border-radius: 1.25rem;
|
||||
|
||||
.eyebrow {
|
||||
color: #0f766e;
|
||||
display: block;
|
||||
font-size: .6875rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: .08em;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
margin-top: .35rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.hero-meta {
|
||||
gap: .75rem;
|
||||
display: flex;
|
||||
margin-top: .6rem;
|
||||
color: var(--td-text-color-secondary);
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.loading {
|
||||
margin: 3rem auto;
|
||||
}
|
||||
|
||||
.info,
|
||||
.units {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.unit-title {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.unit-description {
|
||||
gap: .125rem;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.remark {
|
||||
padding: 1rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) .product-detail .hero {
|
||||
background: linear-gradient(135deg, rgba(15, 118, 110, .2), rgba(37, 99, 235, .18));
|
||||
|
||||
.eyebrow {
|
||||
color: #99f6e4;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,539 @@
|
||||
<template>
|
||||
<div v-can="savePermissionCode" class="product-edit">
|
||||
<t-form class="form" label-align="left" label-width="6rem">
|
||||
<t-form-item label="产品编码" required-mark>
|
||||
<t-input v-model.trim="form.code" borderless maxlength="64" placeholder="门店内唯一编码" />
|
||||
</t-form-item>
|
||||
<t-form-item label="产品名称" required-mark>
|
||||
<t-input v-model.trim="form.name" borderless maxlength="128" placeholder="请输入产品名称" />
|
||||
</t-form-item>
|
||||
<t-form-item label="产品类型" arrow content-align="right" @click="openTypePicker">
|
||||
<span class="picker-text" v-text="getProductTypeText(form.productType)" />
|
||||
</t-form-item>
|
||||
<t-form-item label="产品分类" arrow content-align="right" @click="openCategoryPicker">
|
||||
<span class="picker-text" v-text="selectedCategoryName" />
|
||||
</t-form-item>
|
||||
<t-form-item label="基础单位" required-mark>
|
||||
<t-input v-model.trim="form.baseUnit" borderless maxlength="32" placeholder="例如 次、瓶" />
|
||||
</t-form-item>
|
||||
<t-form-item label="参考成本（元）">
|
||||
<t-input v-model.trim="referenceCostText" type="number" align="right" borderless placeholder="非负金额" />
|
||||
</t-form-item>
|
||||
<t-form-item label="库存管理">
|
||||
<t-checkbox v-model="form.stockEnabled" :disabled="form.productType === 'SERVICE'">管理库存</t-checkbox>
|
||||
</t-form-item>
|
||||
<t-form-item label="允许小数">
|
||||
<t-checkbox v-model="form.allowDecimalQuantity">业务数量允许小数</t-checkbox>
|
||||
</t-form-item>
|
||||
<t-form-item v-if="form.stockEnabled" label="最低库存">
|
||||
<t-input v-model.trim="minStockQuantityText" type="number" align="right" borderless placeholder="基础单位数量，最多三位小数" />
|
||||
</t-form-item>
|
||||
<t-form-item label="状态" arrow content-align="right" @click="openStatusPicker">
|
||||
<span class="picker-text" v-text="getProductStatusText(form.status)" />
|
||||
</t-form-item>
|
||||
<t-form-item label="备注">
|
||||
<t-textarea v-model.trim="form.remark" borderless maxlength="255" autosize placeholder="可填写产品说明" />
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
|
||||
<card-container title="产品附件" description="可上传产品图片或其他产品文件" v-entrance-transition="70">
|
||||
<photo-scroller
|
||||
v-model="attachmentUrlList"
|
||||
v-model:photo-items="attachmentItemList"
|
||||
title="附件列表"
|
||||
:edit-mode="true"
|
||||
:loading="isAttachmentUploading"
|
||||
:show-viewer-actions="false"
|
||||
:add-actions="attachmentAddActions"
|
||||
@add-photo="openAttachmentPicker('PHOTO')"
|
||||
@add-other="openAttachmentPicker('OTHER')"
|
||||
/>
|
||||
<input ref="attachmentInputRef" class="file-input" type="file" accept="image/*" @change="handleAttachmentSelected" />
|
||||
</card-container>
|
||||
|
||||
<card-container title="产品单位" description="必须保留一个基础单位；销售和库存业务只能选择允许的单位" v-entrance-transition="70">
|
||||
<div class="unit-list">
|
||||
<div v-for="(unit, index) in form.unitList" :key="unit.clientKey" class="unit-item">
|
||||
<div class="unit-header">
|
||||
<strong v-text="`单位 ${index + 1}`" />
|
||||
<t-button v-if="1 < form.unitList.length" theme="danger" variant="text" size="small" @click="removeUnit(index)">删除</t-button>
|
||||
</div>
|
||||
<t-form label-width="6rem">
|
||||
<t-form-item label="单位名称" required-mark>
|
||||
<t-input v-model.trim="unit.name" borderless maxlength="32" placeholder="例如 瓶、盒、次" />
|
||||
</t-form-item>
|
||||
<t-form-item label="基础单位数量" required-mark>
|
||||
<t-input v-model.trim="unit.baseQuantityPerUnit" type="number" align="right" borderless placeholder="每个单位对应的基础单位数量" />
|
||||
</t-form-item>
|
||||
<t-form-item label="建议售价（元）">
|
||||
<t-input v-model.trim="unit.salePriceText" type="number" align="right" borderless placeholder="非负金额" />
|
||||
</t-form-item>
|
||||
<t-form-item label="基础单位">
|
||||
<t-checkbox v-model="unit.isBase" @change="setBaseUnit(index)">基础单位</t-checkbox>
|
||||
</t-form-item>
|
||||
<t-form-item label="允许采购">
|
||||
<t-checkbox v-model="unit.allowPurchase">入库可用</t-checkbox>
|
||||
</t-form-item>
|
||||
<t-form-item label="允许销售">
|
||||
<t-checkbox v-model="unit.allowSale">销售和套餐可用</t-checkbox>
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
</div>
|
||||
<t-button class="add-unit" theme="primary" variant="dashed" block @click="addUnit">添加业务单位</t-button>
|
||||
</div>
|
||||
</card-container>
|
||||
|
||||
<t-popup v-model="typePickerVisible" placement="bottom">
|
||||
<t-picker v-model="typeDraft" :columns="productTypeOptions" title="产品类型" @cancel="typePickerVisible = false" @confirm="confirmType" />
|
||||
</t-popup>
|
||||
<t-popup v-model="categoryPickerVisible" placement="bottom">
|
||||
<t-picker v-model="categoryDraft" :columns="categoryOptions" title="产品分类" @cancel="categoryPickerVisible = false" @confirm="confirmCategory" />
|
||||
</t-popup>
|
||||
<t-popup v-model="statusPickerVisible" placement="bottom">
|
||||
<t-picker v-model="statusDraft" :columns="statusOptions" title="产品状态" @cancel="statusPickerVisible = false" @confirm="confirmStatus" />
|
||||
</t-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type Attachment, AttachmentAPI, useUserStore } from "timi-web-api";
|
||||
import ProductAPI from "@/api/ProductAPI";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { PhotoItem } from "@/types/Photo";
|
||||
import type { Product, ProductAttachmentType, ProductCategory, ProductUnit } from "@/types/Product";
|
||||
import { compressUploadImage } from "@/utils/imageCompression";
|
||||
import { getAttachmentReadURL } from "@/utils/attachment";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { formatProductAmount, getProductStatusText, getProductTypeText, normalizeProductQuantity, parseProductAmount } from "@/utils/product";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
type PickerValue = string | number;
|
||||
type ProductUnitForm = ProductUnit & { clientKey: string; salePriceText: string };
|
||||
type ProductAttachmentItem = PhotoItem & {
|
||||
attachment?: Attachment;
|
||||
attachType: ProductAttachmentType;
|
||||
};
|
||||
|
||||
defineOptions({ name: "ProductEdit" });
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
const userStore = useUserStore();
|
||||
const routeId = computed(() => String(route.params.id || ""));
|
||||
const isCreateMode = computed(() => !routeId.value);
|
||||
const savePermissionCode = computed(() => isCreateMode.value ? permissionCodes.product.create : permissionCodes.product.update);
|
||||
const isSaving = ref(false);
|
||||
const form = reactive<Product & { unitList: ProductUnitForm[] }>({
|
||||
id: undefined,
|
||||
code: "",
|
||||
name: "",
|
||||
productType: "GOODS",
|
||||
baseUnit: "",
|
||||
stockEnabled: true,
|
||||
allowDecimalQuantity: false,
|
||||
status: "ACTIVE",
|
||||
unitList: []
|
||||
});
|
||||
const referenceCostText = ref("");
|
||||
const minStockQuantityText = ref("");
|
||||
const categoryList = ref<ProductCategory[]>([]);
|
||||
const typePickerVisible = ref(false);
|
||||
const categoryPickerVisible = ref(false);
|
||||
const statusPickerVisible = ref(false);
|
||||
const attachmentInputRef = ref<HTMLInputElement>();
|
||||
const attachmentPickerTarget = ref<ProductAttachmentType>("PHOTO");
|
||||
const isAttachmentUploading = ref(false);
|
||||
const typeDraft = ref<PickerValue[]>([]);
|
||||
const categoryDraft = ref<PickerValue[]>([]);
|
||||
const statusDraft = ref<PickerValue[]>([]);
|
||||
const productTypeOptions = [
|
||||
{ label: "服务", value: "SERVICE" },
|
||||
{ label: "实物", value: "GOODS" },
|
||||
{ label: "消耗品", value: "CONSUMABLE" }
|
||||
];
|
||||
const categoryOptions = computed(() => [{ label: "不设置分类", value: "" }, ...categoryList.value.map(item => ({ label: item.name || "未命名分类", value: item.id || "" }))]);
|
||||
const statusOptions = [
|
||||
{ label: "启用", value: "ACTIVE" },
|
||||
{ label: "停用", value: "INACTIVE" }
|
||||
];
|
||||
const selectedCategoryName = computed(() => categoryList.value.find(item => item.id === form.categoryId)?.name || "不设置分类");
|
||||
const attachmentAddActions = [
|
||||
{
|
||||
icon: "camera",
|
||||
text: "产品图片",
|
||||
emit: "add-photo",
|
||||
theme: "primary"
|
||||
},
|
||||
{
|
||||
icon: "file-attachment",
|
||||
text: "其他文件",
|
||||
emit: "add-other",
|
||||
theme: "default"
|
||||
}
|
||||
] as const;
|
||||
const attachmentItemList = ref<ProductAttachmentItem[]>([]);
|
||||
const attachmentUrlList = computed<string[]>({
|
||||
get() {
|
||||
return attachmentItemList.value.map(item => item.url);
|
||||
},
|
||||
set(value) {
|
||||
const urlSet = new Set(value);
|
||||
attachmentItemList.value = attachmentItemList.value.filter(item => urlSet.has(item.url));
|
||||
}
|
||||
});
|
||||
|
||||
function createUnit(unit?: Partial<ProductUnit>): ProductUnitForm {
|
||||
return {
|
||||
...unit,
|
||||
clientKey: window.crypto.randomUUID(),
|
||||
name: unit?.name || "",
|
||||
baseQuantityPerUnit: unit?.baseQuantityPerUnit ?? "1",
|
||||
salePriceText: unit?.salePrice === null || unit?.salePrice === undefined ? "" : formatProductAmount(unit.salePrice),
|
||||
isBase: unit?.isBase ?? false,
|
||||
allowPurchase: unit?.allowPurchase ?? form.productType !== "SERVICE",
|
||||
allowSale: unit?.allowSale ?? true,
|
||||
sort: unit?.sort ?? 0
|
||||
};
|
||||
}
|
||||
|
||||
function addUnit(): void {
|
||||
form.unitList.push(createUnit({
|
||||
isBase: !form.unitList.length,
|
||||
baseQuantityPerUnit: !form.unitList.length ? "1" : ""
|
||||
}));
|
||||
}
|
||||
|
||||
function removeUnit(index: number): void {
|
||||
if (form.unitList.length < 2) {
|
||||
Message.warning("产品至少需要一个单位");
|
||||
return;
|
||||
}
|
||||
const wasBase = form.unitList[index]?.isBase;
|
||||
form.unitList.splice(index, 1);
|
||||
if (wasBase && form.unitList[0]) {
|
||||
form.unitList[0].isBase = true;
|
||||
form.unitList[0].baseQuantityPerUnit = "1";
|
||||
}
|
||||
}
|
||||
|
||||
function setBaseUnit(index: number): void {
|
||||
form.unitList.forEach((unit, unitIndex) => {
|
||||
unit.isBase = unitIndex === index;
|
||||
});
|
||||
const unit = form.unitList[index];
|
||||
if (unit) {
|
||||
unit.baseQuantityPerUnit = "1";
|
||||
}
|
||||
}
|
||||
|
||||
function openTypePicker(): void {
|
||||
typeDraft.value = [form.productType];
|
||||
typePickerVisible.value = true;
|
||||
}
|
||||
|
||||
function confirmType(value: Array<string | number>): void {
|
||||
const type = String(value[0] || "");
|
||||
if (type === "SERVICE" || type === "GOODS" || type === "CONSUMABLE") {
|
||||
form.productType = type;
|
||||
if (type === "SERVICE") {
|
||||
form.stockEnabled = false;
|
||||
form.unitList.forEach(unit => {
|
||||
unit.allowPurchase = false;
|
||||
});
|
||||
} else if (form.stockEnabled) {
|
||||
form.unitList.forEach(unit => {
|
||||
unit.allowPurchase = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
typePickerVisible.value = false;
|
||||
}
|
||||
|
||||
function openCategoryPicker(): void {
|
||||
categoryDraft.value = [form.categoryId || ""];
|
||||
categoryPickerVisible.value = true;
|
||||
}
|
||||
|
||||
function confirmCategory(value: Array<string | number>): void {
|
||||
form.categoryId = String(value[0] || "") || undefined;
|
||||
categoryPickerVisible.value = false;
|
||||
}
|
||||
|
||||
function openStatusPicker(): void {
|
||||
statusDraft.value = [form.status || "ACTIVE"];
|
||||
statusPickerVisible.value = true;
|
||||
}
|
||||
|
||||
function confirmStatus(value: Array<string | number>): void {
|
||||
const status = String(value[0] || "");
|
||||
if (status === "ACTIVE" || status === "INACTIVE") {
|
||||
form.status = status;
|
||||
}
|
||||
statusPickerVisible.value = false;
|
||||
}
|
||||
|
||||
function openAttachmentPicker(target: ProductAttachmentType): void {
|
||||
attachmentPickerTarget.value = target;
|
||||
attachmentInputRef.value?.click();
|
||||
}
|
||||
|
||||
async function handleAttachmentSelected(event: Event): Promise<void> {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
|
||||
isAttachmentUploading.value = true;
|
||||
try {
|
||||
const tempFile = (await AttachmentAPI.upload(await compressUploadImage(file)))[0];
|
||||
if (tempFile?.id) {
|
||||
attachmentItemList.value.push({
|
||||
attachType: attachmentPickerTarget.value,
|
||||
tempFileId: tempFile.id,
|
||||
url: AttachmentAPI.getTempReadURL(tempFile.id)
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "产品附件上传失败"));
|
||||
} finally {
|
||||
isAttachmentUploading.value = false;
|
||||
input.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
function buildAttachmentList(): Attachment[] {
|
||||
return attachmentItemList.value.flatMap(item => {
|
||||
if (item.attachment) {
|
||||
return [{
|
||||
...item.attachment,
|
||||
attachType: item.attachType || item.attachment.attachType || "PHOTO"
|
||||
}];
|
||||
}
|
||||
if (item.tempFileId) {
|
||||
return [{
|
||||
attachType: item.attachType,
|
||||
tempFileId: item.tempFileId
|
||||
}];
|
||||
}
|
||||
return [];
|
||||
});
|
||||
}
|
||||
|
||||
function parseOptionalAmount(value: string): number | null | undefined {
|
||||
if (!value.trim()) {
|
||||
return null;
|
||||
}
|
||||
return parseProductAmount(value);
|
||||
}
|
||||
|
||||
function validate(): boolean {
|
||||
if (!form.code.trim() || !form.name.trim() || !form.baseUnit.trim()) {
|
||||
Message.warning("产品编码、名称和基础单位不能为空");
|
||||
return false;
|
||||
}
|
||||
if (form.productType === "SERVICE" && form.stockEnabled) {
|
||||
Message.warning("服务产品不能管理库存");
|
||||
return false;
|
||||
}
|
||||
const referenceCost = parseOptionalAmount(referenceCostText.value);
|
||||
if (referenceCost === undefined) {
|
||||
Message.warning("价格必须是合法的非负元金额，最多两位小数");
|
||||
return false;
|
||||
}
|
||||
if (form.stockEnabled && !normalizeProductQuantity(minStockQuantityText.value || "0")) {
|
||||
Message.warning("最低库存必须是非负数量，最多三位小数");
|
||||
return false;
|
||||
}
|
||||
if (!form.unitList.length) {
|
||||
Message.warning("至少配置一个产品单位");
|
||||
return false;
|
||||
}
|
||||
const unitNameSet = new Set<string>();
|
||||
let baseCount = 0;
|
||||
for (const unit of form.unitList) {
|
||||
const name = unit.name.trim();
|
||||
const baseQuantityPerUnit = String(unit.baseQuantityPerUnit).trim();
|
||||
const salePrice = parseOptionalAmount(unit.salePriceText);
|
||||
if (!name || unitNameSet.has(name)) {
|
||||
Message.warning("单位名称不能为空且不能重复");
|
||||
return false;
|
||||
}
|
||||
if (!/^\d+(?:\.\d{1,6})?$/.test(baseQuantityPerUnit) || !(0 < Number(baseQuantityPerUnit))) {
|
||||
Message.warning("基础单位数量必须是大于 0 的数字，最多六位小数");
|
||||
return false;
|
||||
}
|
||||
if (salePrice === undefined) {
|
||||
Message.warning("单位售价必须是合法的非负元金额，最多两位小数");
|
||||
return false;
|
||||
}
|
||||
unitNameSet.add(name);
|
||||
if (unit.isBase) {
|
||||
baseCount += 1;
|
||||
if (baseQuantityPerUnit !== "1" && Number(baseQuantityPerUnit) !== 1) {
|
||||
Message.warning("基础单位数量必须为 1");
|
||||
return false;
|
||||
}
|
||||
if (name !== form.baseUnit.trim()) {
|
||||
Message.warning("基础单位名称必须与产品基础单位一致");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (baseCount !== 1) {
|
||||
Message.warning("产品必须且只能有一个基础单位");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
async function save(): Promise<void> {
|
||||
if (isSaving.value || !userStore.hasPermissions(savePermissionCode.value) || !validate()) {
|
||||
return;
|
||||
}
|
||||
isSaving.value = true;
|
||||
try {
|
||||
const minStockQuantity = form.stockEnabled ? normalizeProductQuantity(minStockQuantityText.value || "0") : undefined;
|
||||
const unitList = form.unitList as ProductUnitForm[];
|
||||
const payload: Product = {
|
||||
id: form.id,
|
||||
categoryId: form.categoryId,
|
||||
code: form.code.trim(),
|
||||
name: form.name.trim(),
|
||||
productType: form.productType,
|
||||
baseUnit: form.baseUnit.trim(),
|
||||
stockEnabled: form.stockEnabled,
|
||||
allowDecimalQuantity: form.allowDecimalQuantity,
|
||||
status: form.status,
|
||||
referenceCost: parseOptionalAmount(referenceCostText.value)!,
|
||||
minStockQuantity: form.stockEnabled ? minStockQuantity : null,
|
||||
remark: form.remark?.trim() || null,
|
||||
attachmentList: buildAttachmentList(),
|
||||
unitList: unitList.map((unit, index) => ({
|
||||
id: unit.id,
|
||||
name: unit.name.trim(),
|
||||
baseQuantityPerUnit: String(unit.baseQuantityPerUnit).trim(),
|
||||
salePrice: parseOptionalAmount(unit.salePriceText)!,
|
||||
isBase: !!unit.isBase,
|
||||
allowPurchase: form.productType === "SERVICE" ? false : !!unit.allowPurchase,
|
||||
allowSale: !!unit.allowSale,
|
||||
sort: index
|
||||
}))
|
||||
};
|
||||
if (isCreateMode.value) {
|
||||
const id = await ProductAPI.create(payload);
|
||||
Message.success("产品已创建");
|
||||
await router.replace(`/management/products/${id}`);
|
||||
} else {
|
||||
await ProductAPI.update(payload);
|
||||
Message.success("产品已保存");
|
||||
await router.replace(`/management/products/${routeId.value}`);
|
||||
}
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "产品保存失败"));
|
||||
} finally {
|
||||
isSaving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function load(): Promise<void> {
|
||||
const categoryResult = await ProductAPI.categoryList({ index: 0, size: 1000, status: "ACTIVE" });
|
||||
categoryList.value = categoryResult.list || [];
|
||||
if (isCreateMode.value) {
|
||||
addUnit();
|
||||
return;
|
||||
}
|
||||
const result = await ProductAPI.detail(routeId.value);
|
||||
if (result.category && !categoryList.value.some(item => item.id === result.category?.id)) {
|
||||
categoryList.value.push(result.category);
|
||||
}
|
||||
Object.assign(form, {
|
||||
id: result.id,
|
||||
categoryId: result.categoryId,
|
||||
code: result.code || "",
|
||||
name: result.name || "",
|
||||
productType: result.productType || "GOODS",
|
||||
baseUnit: result.baseUnit || "",
|
||||
stockEnabled: !!result.stockEnabled,
|
||||
allowDecimalQuantity: !!result.allowDecimalQuantity,
|
||||
status: result.status || "ACTIVE",
|
||||
remark: result.remark || "",
|
||||
unitList: (result.unitList || []).map(createUnit)
|
||||
});
|
||||
attachmentItemList.value = (result.attachmentList || [])
|
||||
.filter(item => !!item.id)
|
||||
.map(item => ({
|
||||
attachment: item,
|
||||
attachType: item.attachType === "OTHER" ? "OTHER" : "PHOTO",
|
||||
previewUrl: getAttachmentReadURL(item.id || ""),
|
||||
url: getAttachmentReadURL(item.id || "", 90)
|
||||
}));
|
||||
referenceCostText.value = result.referenceCost === null || result.referenceCost === undefined ? "" : `${Math.floor(result.referenceCost / 100)}.${String(result.referenceCost % 100).padStart(2, "0")}`;
|
||||
minStockQuantityText.value = result.minStockQuantity === null || result.minStockQuantity === undefined ? "" : String(result.minStockQuantity);
|
||||
if (!form.unitList.length) {
|
||||
addUnit();
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
navBarStore.clearRight();
|
||||
if (userStore.hasPermissions(savePermissionCode.value)) {
|
||||
navBarStore.setRightText("保存", "var(--td-brand-color)", save);
|
||||
}
|
||||
try {
|
||||
await load();
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "产品加载失败"));
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.product-edit {
|
||||
gap: 1rem;
|
||||
display: flex;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
|
||||
flex-direction: column;
|
||||
|
||||
.form {
|
||||
margin: 0 1rem;
|
||||
background: var(--td-bg-color-container);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.unit-list {
|
||||
padding: 1rem;
|
||||
|
||||
.unit-item {
|
||||
padding: .75rem 0;
|
||||
border-bottom: 1px dashed var(--td-component-border);
|
||||
|
||||
.unit-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
:deep(.t-form__item) {
|
||||
padding: .25rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.add-unit {
|
||||
margin-top: 1rem;
|
||||
border-radius: .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.file-input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,359 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.product.read" class="product-list">
|
||||
<div class="filters bg-white">
|
||||
<t-input v-model.trim="keyword" class="keyword" type="search" borderless clearable placeholder="搜索产品名称或编码" />
|
||||
<t-dropdown-menu class="menus">
|
||||
<t-dropdown-item v-model="status" label="状态" :options="statusOptions" @change="selectStatus" />
|
||||
<t-dropdown-item v-model="productType" label="类型" :options="productTypeOptions" @change="selectProductType" />
|
||||
<t-dropdown-item
|
||||
:model-value="categoryIdList"
|
||||
label="分类"
|
||||
:options="categoryOptions"
|
||||
multiple
|
||||
:options-columns="2"
|
||||
@change="selectCategory"
|
||||
@confirm="confirmCategory"
|
||||
@reset="resetCategory"
|
||||
@update:model-value="updateCategory"
|
||||
/>
|
||||
</t-dropdown-menu>
|
||||
</div>
|
||||
<t-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="refresh" @scrolltolower="loadMore">
|
||||
<t-cell-group
|
||||
v-if="productList.length"
|
||||
class="list fix-last-cell-line empty-cell-title-margin"
|
||||
theme="card"
|
||||
>
|
||||
<t-cell v-for="(item, index) in productList" :key="item.id" class="item" arrow hover v-entrance-transition="index * 30" @click="toDetail(item)">
|
||||
<template #leftIcon>
|
||||
<t-image
|
||||
v-if="getProductPhotoURL(item)"
|
||||
:src="getProductPhotoURL(item)"
|
||||
:alt="item.name || '产品图片'"
|
||||
fit="cover"
|
||||
class="avatar"
|
||||
/>
|
||||
<div v-else class="avatar placeholder" v-text="(item.name || item.code || '产').slice(0, 1)" />
|
||||
</template>
|
||||
<template #title>
|
||||
<div class="text-bold" v-text="item.name || '未命名产品'" />
|
||||
</template>
|
||||
<template #note>
|
||||
<t-tag
|
||||
size="small"
|
||||
variant="outline"
|
||||
:theme="getProductStatusTheme(item.status)"
|
||||
:content="getProductStatusText(item.status)"
|
||||
/>
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="description">
|
||||
<t-tag
|
||||
size="small"
|
||||
variant="outline"
|
||||
:content="item.code"
|
||||
/>
|
||||
<t-tag
|
||||
size="small"
|
||||
variant="outline"
|
||||
:content="getProductTypeText(item.productType)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<div v-else class="center-tips" v-text="emptyText" />
|
||||
<div v-if="productList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
|
||||
</t-pull-down-refresh>
|
||||
</div>
|
||||
<nav-bar-action-menu v-if="canCreate" :actions="actionList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type DropdownValue } from "tdesign-mobile-vue";
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import ProductAPI from "@/api/ProductAPI";
|
||||
import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { NavBarAction } from "@/types/NavBarAction";
|
||||
import type { Product, ProductCategory, ProductStatus, ProductType } from "@/types/Product";
|
||||
import { getAttachmentReadURL } from "@/utils/attachment";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { getProductStatusText, getProductStatusTheme, getProductTypeText } from "@/utils/product";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
defineOptions({ name: "ProductList" });
|
||||
|
||||
const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
const userStore = useUserStore();
|
||||
const canCreate = computed(() => userStore.hasPermissions(permissionCodes.product.create));
|
||||
const actionList = computed<NavBarAction[]>(() => canCreate.value ? [{
|
||||
key: "create",
|
||||
text: "新增产品",
|
||||
icon: "add",
|
||||
theme: "primary",
|
||||
action: toCreate
|
||||
}] : []);
|
||||
|
||||
const keyword = ref("");
|
||||
const status = ref("ALL");
|
||||
const productType = ref("ALL");
|
||||
const categoryIdList = ref<string[]>(["ALL"]);
|
||||
const categoryList = ref<ProductCategory[]>([]);
|
||||
const productList = ref<Product[]>([]);
|
||||
const pageIndex = ref(0);
|
||||
const total = ref(0);
|
||||
const isLoading = ref(false);
|
||||
const isRefreshing = ref(false);
|
||||
const isNoMore = ref(false);
|
||||
let keywordTimer: number | undefined;
|
||||
let requestToken = 0;
|
||||
|
||||
const statusOptions = [
|
||||
{ label: "全部状态", value: "ALL" },
|
||||
{ label: "启用", value: "ACTIVE" },
|
||||
{ label: "停用", value: "INACTIVE" }
|
||||
];
|
||||
const productTypeOptions = [
|
||||
{ label: "全部类型", value: "ALL" },
|
||||
{ label: "服务", value: "SERVICE" },
|
||||
{ label: "实物", value: "GOODS" },
|
||||
{ label: "消耗品", value: "CONSUMABLE" }
|
||||
];
|
||||
const categoryOptions = computed(() => [{ label: "全部分类", value: "ALL" }, ...categoryList.value.map(item => ({
|
||||
label: item.name || "未命名分类",
|
||||
value: item.id || ""
|
||||
}))]);
|
||||
const emptyText = computed(() => isLoading.value ? "正在加载产品" : keyword.value ? "未找到匹配产品" : "暂无产品");
|
||||
|
||||
function getProductPhotoURL(item: Product): string {
|
||||
const attachment = item.attachmentList?.find(item => item.attachType === "PHOTO" && !!item.id);
|
||||
return attachment?.id ? getAttachmentReadURL(attachment.id, 128) : "";
|
||||
}
|
||||
|
||||
async function loadCategories(): Promise<void> {
|
||||
const result = await ProductAPI.categoryList({ index: 0, size: 1000, status: "ACTIVE" });
|
||||
categoryList.value = result.list || [];
|
||||
}
|
||||
|
||||
async function fetch(reset = false): Promise<void> {
|
||||
if (!reset && (isLoading.value || isNoMore.value)) {
|
||||
return;
|
||||
}
|
||||
if (reset) {
|
||||
pageIndex.value = 0;
|
||||
productList.value = [];
|
||||
total.value = 0;
|
||||
isNoMore.value = false;
|
||||
}
|
||||
const token = ++requestToken;
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const pageSize = 15;
|
||||
const result = await ProductAPI.list({
|
||||
index: pageIndex.value,
|
||||
size: pageSize,
|
||||
keyword: keyword.value || undefined,
|
||||
status: status.value === "ALL" ? undefined : status.value as ProductStatus,
|
||||
productType: productType.value === "ALL" ? undefined : productType.value as ProductType,
|
||||
categoryIdList: categoryIdList.value.includes("ALL") ? undefined : categoryIdList.value
|
||||
});
|
||||
if (token !== requestToken) {
|
||||
return;
|
||||
}
|
||||
const list = result.list || [];
|
||||
productList.value = reset ? list : productList.value.concat(list);
|
||||
total.value = result.total || 0;
|
||||
pageIndex.value += 1;
|
||||
isNoMore.value = list.length < pageSize || productList.value.length === total.value || total.value < productList.value.length;
|
||||
} finally {
|
||||
if (token === requestToken) {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function refresh(): Promise<void> {
|
||||
try {
|
||||
await fetch(true);
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "产品列表加载失败"));
|
||||
} finally {
|
||||
isRefreshing.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadMore(): Promise<void> {
|
||||
try {
|
||||
await fetch();
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "产品列表加载失败"));
|
||||
}
|
||||
}
|
||||
|
||||
async function selectStatus(value: DropdownValue): Promise<void> {
|
||||
if (!Array.isArray(value)) {
|
||||
status.value = String(value);
|
||||
await fetch(true);
|
||||
}
|
||||
}
|
||||
|
||||
async function selectProductType(value: DropdownValue): Promise<void> {
|
||||
if (!Array.isArray(value)) {
|
||||
productType.value = String(value);
|
||||
await fetch(true);
|
||||
}
|
||||
}
|
||||
|
||||
function getDropdownStringList(value: DropdownValue): string[] {
|
||||
const valueList = Array.isArray(value) ? value : [value];
|
||||
return valueList
|
||||
.filter((item): item is string | number => !Array.isArray(item))
|
||||
.map(item => String(item));
|
||||
}
|
||||
|
||||
function normalizeCategoryIdList(value: DropdownValue): string[] {
|
||||
const idList = getDropdownStringList(value).filter(Boolean);
|
||||
if (!idList.length) {
|
||||
return ["ALL"];
|
||||
}
|
||||
return idList.includes("ALL") && idList.length > 1 ? idList.filter(item => item !== "ALL") : idList;
|
||||
}
|
||||
|
||||
function selectCategory(value: DropdownValue): void {
|
||||
categoryIdList.value = normalizeCategoryIdList(value);
|
||||
}
|
||||
|
||||
async function confirmCategory(value: DropdownValue): Promise<void> {
|
||||
categoryIdList.value = normalizeCategoryIdList(value);
|
||||
await fetch(true);
|
||||
}
|
||||
|
||||
async function resetCategory(): Promise<void> {
|
||||
categoryIdList.value = ["ALL"];
|
||||
await fetch(true);
|
||||
}
|
||||
|
||||
function updateCategory(value: DropdownValue): void {
|
||||
categoryIdList.value = normalizeCategoryIdList(value);
|
||||
}
|
||||
|
||||
async function toCreate(): Promise<void> {
|
||||
await router.push("/management/products/create");
|
||||
}
|
||||
|
||||
async function toDetail(item: Product): Promise<void> {
|
||||
if (item.id) {
|
||||
await router.push(`/management/products/${item.id}`);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
navBarStore.clearRight();
|
||||
navBarStore.setCustomRightVisible(canCreate.value);
|
||||
try {
|
||||
await Promise.all([loadCategories(), fetch(true)]);
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "产品列表加载失败"));
|
||||
}
|
||||
});
|
||||
|
||||
watch(keyword, () => {
|
||||
window.clearTimeout(keywordTimer);
|
||||
keywordTimer = window.setTimeout(async () => {
|
||||
try {
|
||||
await fetch(true);
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "产品列表加载失败"));
|
||||
}
|
||||
}, 300);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
navBarStore.clearRight();
|
||||
window.clearTimeout(keywordTimer);
|
||||
requestToken += 1;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.product-list {
|
||||
padding: var(--app-nav-height) 0 1rem;
|
||||
|
||||
.filters {
|
||||
z-index: 10;
|
||||
position: sticky;
|
||||
box-shadow: var(--td-shadow-1);
|
||||
background: var(--td-bg-color-page);
|
||||
}
|
||||
|
||||
.filters {
|
||||
top: var(--app-nav-height);
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
padding: .75rem 1rem;
|
||||
position: sticky;
|
||||
background: #F5F5F8;
|
||||
box-shadow: var(--td-shadow-1);
|
||||
flex-direction: column;
|
||||
|
||||
.keyword {
|
||||
--td-input-vertical-padding: 8px 14px;
|
||||
|
||||
border: 1px solid var(--td-component-border);
|
||||
z-index: 1;
|
||||
background: var(--td-bg-color-container);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.menus {
|
||||
--td-spacer-1: 6px;
|
||||
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin-top: -1rem;
|
||||
padding-top: .8rem;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(148, 163, 184, .18);
|
||||
border-radius: 0 0 1rem 1rem;
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.t-dropdown-menu__item) {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
:deep(.t-dropdown-menu__title) {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
padding-top: .75rem;
|
||||
|
||||
.item {
|
||||
padding: 10px;
|
||||
|
||||
.avatar {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.productStock.read" class="product-stock-detail">
|
||||
<t-loading v-if="isLoading" class="loading" size="32px" />
|
||||
<template v-else-if="product && stock">
|
||||
<section class="hero" v-entrance-transition>
|
||||
<span class="eyebrow" v-text="'库存中心'" />
|
||||
<div class="hero-title">
|
||||
<h1 v-text="product.name || '未命名产品'" />
|
||||
<t-tag :content="getStockStatusText(stock)" variant="light-outline" :theme="getStockTheme(stock)" />
|
||||
</div>
|
||||
<div class="hero-meta">
|
||||
<span v-text="product.code || '无产品编码'" />
|
||||
<strong v-text="`${getProductQuantityText(stock.availableQuantity)} ${product.baseUnit || ''}`" />
|
||||
</div>
|
||||
</section>
|
||||
<card-container title="库存余额">
|
||||
<t-cell-group theme="card" class="summary">
|
||||
<t-cell title="产品" :note="product.name || '未命名产品'" />
|
||||
<t-cell title="基础单位" :note="product.baseUnit || '-'" />
|
||||
<t-cell title="实际库存" :note="getProductQuantityText(stock.onHandQuantity)" />
|
||||
<t-cell title="预占库存" :note="getProductQuantityText(stock.reservedQuantity)" />
|
||||
<t-cell title="可用库存" :note="getProductQuantityText(stock.availableQuantity)" />
|
||||
</t-cell-group>
|
||||
</card-container>
|
||||
<card-container v-if="canOperate && product.stockEnabled" title="人工库存操作" description="所有操作必须选择业务单位、上传照片并填写原因或备注">
|
||||
<div class="operation-list">
|
||||
<t-button v-for="item in operationList" :key="item.type" :theme="item.theme" variant="outline" @click="openOperation(item.type)">
|
||||
<span v-text="item.text" />
|
||||
</t-button>
|
||||
</div>
|
||||
</card-container>
|
||||
<card-container title="库存流水" description="履约产生的预占、释放、出库和冲正流水仅展示，不提供人工修改">
|
||||
<t-cell-group v-if="recordList.length" theme="card" class="records">
|
||||
<t-cell v-for="record in recordList" :key="record.id || `${record.occurredAt}-${record.requestNo}`">
|
||||
<template #title>
|
||||
<div class="record-title">
|
||||
<strong v-text="getStockOperationText(record.operationType)" />
|
||||
<span :class="getDeltaClass(record.onHandDelta)" v-text="getDeltaText(record.onHandDelta)" />
|
||||
</div>
|
||||
</template>
|
||||
<template #note>
|
||||
<span v-text="record.occurredAt ? Time.toDateTime(record.occurredAt) : '时间未知'" />
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="record-description">
|
||||
<span v-text="`${record.quantity || 0} ${record.unitSnapshot || product.baseUnit || ''} · 基础单位 ${record.baseQuantity || 0}`" />
|
||||
<span class="gray" v-text="record.reason || record.remark || '无备注'" />
|
||||
</div>
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<div v-else class="center-tips" v-text="'暂无库存流水'" />
|
||||
</card-container>
|
||||
</template>
|
||||
<t-empty v-else description="库存或产品不存在" />
|
||||
<product-stock-operation-dialog
|
||||
v-if="product && stock"
|
||||
v-model:visible="operationVisible"
|
||||
:product="product"
|
||||
:stock="stock"
|
||||
:operation="operationType"
|
||||
@success="loadAll"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Time } from "timi-web";
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import ProductAPI from "@/api/ProductAPI";
|
||||
import ProductStockOperationDialog from "@/pages/product/ProductStockOperationDialog.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { Product, ProductStock, StockOperationType, StockRecord } from "@/types/Product";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { getProductQuantityText, getStockOperationText } from "@/utils/product";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
type ManualStockOperation = Extract<StockOperationType, "INITIAL_IN" | "MANUAL_IN" | "MANUAL_OUT" | "STOCKTAKE_GAIN" | "STOCKTAKE_LOSS">;
|
||||
|
||||
defineOptions({ name: "ProductStockDetail" });
|
||||
|
||||
const route = useRoute();
|
||||
const navBarStore = useNavBarStore();
|
||||
const userStore = useUserStore();
|
||||
const product = ref<Product>();
|
||||
const stock = ref<ProductStock>();
|
||||
const recordList = ref<StockRecord[]>([]);
|
||||
const isLoading = ref(false);
|
||||
const operationVisible = ref(false);
|
||||
const operationType = ref<ManualStockOperation>("MANUAL_IN");
|
||||
const canOperate = computed(() => userStore.hasPermissions(permissionCodes.productStock.create));
|
||||
const operationList: Array<{ text: string; type: ManualStockOperation; theme: "primary" | "danger" }> = [
|
||||
{ text: "期初入库", type: "INITIAL_IN", theme: "primary" },
|
||||
{ text: "手工入库", type: "MANUAL_IN", theme: "primary" },
|
||||
{ text: "手工出库", type: "MANUAL_OUT", theme: "danger" },
|
||||
{ text: "盘盈", type: "STOCKTAKE_GAIN", theme: "primary" },
|
||||
{ text: "盘亏", type: "STOCKTAKE_LOSS", theme: "danger" }
|
||||
];
|
||||
|
||||
function getDeltaText(value?: number | string): string {
|
||||
const amount = Number(value || 0);
|
||||
const text = String(value || "0");
|
||||
return `${0 < amount ? "+" : ""}${amount < 0 ? getProductQuantityText(text.slice(1)) : getProductQuantityText(text)}`;
|
||||
}
|
||||
|
||||
function getDeltaClass(value?: number | string): string {
|
||||
return 0 < Number(value || 0) ? "positive" : Number(value || 0) < 0 ? "negative" : "gray";
|
||||
}
|
||||
|
||||
function getStockStatusText(item: ProductStock): string {
|
||||
if (!item.product?.stockEnabled) {
|
||||
return "不管理库存";
|
||||
}
|
||||
const available = Number(item.availableQuantity || 0);
|
||||
const min = Number(item.product.minStockQuantity || 0);
|
||||
return 0 < min && available < min ? "库存不足" : "库存正常";
|
||||
}
|
||||
|
||||
function getStockTheme(item: ProductStock): "danger" | "success" | "default" {
|
||||
if (!item.product?.stockEnabled) {
|
||||
return "default";
|
||||
}
|
||||
const available = Number(item.availableQuantity || 0);
|
||||
const min = Number(item.product.minStockQuantity || 0);
|
||||
return 0 < min && available < min ? "danger" : "success";
|
||||
}
|
||||
|
||||
async function loadAll(): Promise<void> {
|
||||
const productId = String(route.params.productId || "");
|
||||
if (!productId) {
|
||||
return;
|
||||
}
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const [productResult, stockResult, recordResult] = await Promise.all([
|
||||
ProductAPI.detail(productId),
|
||||
ProductAPI.stockDetail(productId),
|
||||
ProductAPI.recordList({ productId, index: 0, size: 100 })
|
||||
]);
|
||||
product.value = productResult;
|
||||
stock.value = { ...stockResult, product: productResult };
|
||||
recordList.value = recordResult.list || [];
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function openOperation(type: ManualStockOperation): void {
|
||||
operationType.value = type;
|
||||
operationVisible.value = true;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
navBarStore.clearRight();
|
||||
try {
|
||||
await loadAll();
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "库存详情加载失败"));
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.product-stock-detail {
|
||||
gap: 1rem;
|
||||
display: grid;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
|
||||
|
||||
.hero {
|
||||
margin: 0 1rem;
|
||||
padding: 1rem;
|
||||
background: linear-gradient(135deg, #eff6ff, #f0fdf4);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
border-radius: 1.25rem;
|
||||
|
||||
.eyebrow {
|
||||
color: #2563eb;
|
||||
display: block;
|
||||
font-size: .6875rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: .08em;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
margin-top: .35rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.hero-meta {
|
||||
gap: .75rem;
|
||||
display: flex;
|
||||
margin-top: .6rem;
|
||||
color: var(--td-text-color-secondary);
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: #0f766e;
|
||||
font-size: 1.2rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
margin: 3rem auto;
|
||||
}
|
||||
|
||||
.summary,
|
||||
.records {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.operation-list {
|
||||
gap: .75rem;
|
||||
display: grid;
|
||||
padding: 1rem;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
|
||||
.t-button {
|
||||
border-radius: .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.record-title {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.record-description {
|
||||
gap: .125rem;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.positive {
|
||||
color: var(--td-success-color);
|
||||
}
|
||||
|
||||
.negative {
|
||||
color: var(--td-error-color);
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) .product-stock-detail .hero {
|
||||
background: linear-gradient(135deg, rgba(37, 99, 235, .2), rgba(15, 118, 110, .18));
|
||||
|
||||
.eyebrow {
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: #99f6e4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.productStock.read" class="product-stock-list">
|
||||
<div class="search bg-white">
|
||||
<t-input v-model.trim="keyword" class="keyword" type="search" borderless clearable placeholder="搜索产品名称或编码" />
|
||||
</div>
|
||||
<t-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="refresh" @scrolltolower="loadMore">
|
||||
<t-cell-group v-if="stockList.length" theme="card" class="list fix-last-cell-line">
|
||||
<t-cell v-for="(item, index) in stockList" :key="item.productId || item.id" arrow hover class="item" v-entrance-transition="index * 30" @click="toDetail(item)">
|
||||
<template #title>
|
||||
<div class="title">
|
||||
<strong v-text="item.product?.name || '未命名产品'" />
|
||||
<t-tag size="small" variant="outline" :theme="getStockTheme(item)" :content="getStockStatusText(item)" />
|
||||
</div>
|
||||
</template>
|
||||
<template #note>
|
||||
<span v-text="`${getProductQuantityText(item.availableQuantity)} ${item.product?.baseUnit || ''}`" />
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="description">
|
||||
<span class="gray" v-text="item.product?.code || '无产品编码'" />
|
||||
<span v-text="`实际 ${getProductQuantityText(item.onHandQuantity)} · 预占 ${getProductQuantityText(item.reservedQuantity)} · 可用 ${getProductQuantityText(item.availableQuantity)}`" />
|
||||
</div>
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<div v-else class="center-tips" v-text="emptyText" />
|
||||
<div v-if="stockList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
|
||||
</t-pull-down-refresh>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import ProductAPI from "@/api/ProductAPI";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { ProductStock } from "@/types/Product";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { getProductQuantityText } from "@/utils/product";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
defineOptions({ name: "ProductStockList" });
|
||||
|
||||
const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
const userStore = useUserStore();
|
||||
const keyword = ref("");
|
||||
const stockList = ref<ProductStock[]>([]);
|
||||
const pageIndex = ref(0);
|
||||
const total = ref(0);
|
||||
const isLoading = ref(false);
|
||||
const isRefreshing = ref(false);
|
||||
const isNoMore = ref(false);
|
||||
let keywordTimer: number | undefined;
|
||||
let requestToken = 0;
|
||||
|
||||
const emptyText = computed(() => isLoading.value ? "正在加载库存" : keyword.value ? "未找到匹配库存" : "暂无库存记录");
|
||||
|
||||
function getStockStatusText(item: ProductStock): string {
|
||||
if (!item.product?.stockEnabled) {
|
||||
return "不管理库存";
|
||||
}
|
||||
const available = Number(item.availableQuantity || 0);
|
||||
const min = Number(item.product.minStockQuantity || 0);
|
||||
return 0 < min && available < min ? "库存不足" : "库存正常";
|
||||
}
|
||||
|
||||
function getStockTheme(item: ProductStock): "danger" | "success" | "default" {
|
||||
if (!item.product?.stockEnabled) {
|
||||
return "default";
|
||||
}
|
||||
const available = Number(item.availableQuantity || 0);
|
||||
const min = Number(item.product.minStockQuantity || 0);
|
||||
return 0 < min && available < min ? "danger" : "success";
|
||||
}
|
||||
|
||||
async function fetch(reset = false): Promise<void> {
|
||||
if (!reset && (isLoading.value || isNoMore.value)) {
|
||||
return;
|
||||
}
|
||||
if (reset) {
|
||||
pageIndex.value = 0;
|
||||
stockList.value = [];
|
||||
total.value = 0;
|
||||
isNoMore.value = false;
|
||||
}
|
||||
const token = ++requestToken;
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const pageSize = 15;
|
||||
const result = await ProductAPI.stockList({ index: pageIndex.value, size: pageSize, keyword: keyword.value || undefined });
|
||||
if (token !== requestToken) {
|
||||
return;
|
||||
}
|
||||
const list = result.list || [];
|
||||
stockList.value = reset ? list : stockList.value.concat(list);
|
||||
total.value = result.total || 0;
|
||||
pageIndex.value += 1;
|
||||
isNoMore.value = list.length < pageSize || stockList.value.length === total.value || total.value < stockList.value.length;
|
||||
} finally {
|
||||
if (token === requestToken) {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function refresh(): Promise<void> {
|
||||
try {
|
||||
await fetch(true);
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "库存列表加载失败"));
|
||||
} finally {
|
||||
isRefreshing.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadMore(): Promise<void> {
|
||||
try {
|
||||
await fetch();
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "库存列表加载失败"));
|
||||
}
|
||||
}
|
||||
|
||||
async function toDetail(item: ProductStock): Promise<void> {
|
||||
if (item.productId) {
|
||||
await router.push(`/management/product-stocks/${item.productId}`);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
navBarStore.clearRight();
|
||||
if (!userStore.hasPermissions(permissionCodes.productStock.read)) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await fetch(true);
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "库存列表加载失败"));
|
||||
}
|
||||
});
|
||||
|
||||
watch(keyword, () => {
|
||||
window.clearTimeout(keywordTimer);
|
||||
keywordTimer = window.setTimeout(async () => {
|
||||
try {
|
||||
await fetch(true);
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "库存列表加载失败"));
|
||||
}
|
||||
}, 300);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
navBarStore.clearRight();
|
||||
window.clearTimeout(keywordTimer);
|
||||
requestToken += 1;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.product-stock-list {
|
||||
padding: var(--app-nav-height) 0 1rem;
|
||||
|
||||
.search {
|
||||
top: var(--app-nav-height);
|
||||
z-index: 10;
|
||||
padding: .75rem 1rem;
|
||||
position: sticky;
|
||||
background: var(--td-bg-color-page);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
|
||||
.keyword {
|
||||
border: 1px solid var(--td-component-border);
|
||||
padding: .5rem 1rem;
|
||||
background: var(--td-bg-color-container);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
padding-top: .75rem;
|
||||
|
||||
.item {
|
||||
.title {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.description {
|
||||
display: grid;
|
||||
gap: .125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<t-dialog
|
||||
v-model:visible="visible"
|
||||
:title="getStockOperationText(operation)"
|
||||
cancel-btn="取消"
|
||||
:confirm-btn="isSaving ? { content: '提交中', loading: true } : '提交'"
|
||||
@cancel="visible = false"
|
||||
@confirm="submit"
|
||||
>
|
||||
<div class="operation-dialog">
|
||||
<div class="summary">
|
||||
<strong v-text="props.product.name || '未命名产品'" />
|
||||
<span class="gray" v-text="`当前可用库存：${getProductQuantityText(props.stock?.availableQuantity)} ${props.product.baseUnit || ''}`" />
|
||||
</div>
|
||||
<t-form label-align="left" label-width="5rem">
|
||||
<t-form-item label="业务单位" required-mark @click="openUnitPicker">
|
||||
<span class="picker-text" v-text="selectedUnitName" />
|
||||
</t-form-item>
|
||||
<t-form-item label="数量" required-mark>
|
||||
<t-input v-model.trim="quantity" type="number" align="right" borderless placeholder="必须大于 0" />
|
||||
</t-form-item>
|
||||
<t-form-item label="原因">
|
||||
<t-input v-model.trim="reason" borderless maxlength="255" placeholder="原因或备注至少填写一项" />
|
||||
</t-form-item>
|
||||
<t-form-item label="备注">
|
||||
<t-textarea v-model.trim="remark" borderless maxlength="500" autosize placeholder="可补充说明" />
|
||||
</t-form-item>
|
||||
<package-photo-field v-model="photoItems" title="操作照片" :required="true" />
|
||||
</t-form>
|
||||
</div>
|
||||
</t-dialog>
|
||||
<t-popup v-model="unitPickerVisible" placement="bottom">
|
||||
<t-picker v-model="unitDraft" :columns="unitOptions" title="选择业务单位" @cancel="unitPickerVisible = false" @confirm="confirmUnit" />
|
||||
</t-popup>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { watch } from "vue";
|
||||
import ProductAPI from "@/api/ProductAPI";
|
||||
import type { Product, ProductStock, ProductUnit, ProductStockChangeRequest, StockOperationType } from "@/types/Product";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { createProductRequestNo, getProductQuantityText, getStockOperationText } from "@/utils/product";
|
||||
import { Message } from "@/utils/message";
|
||||
import type { PhotoItem } from "@/types/Photo";
|
||||
|
||||
type ManualStockOperation = Extract<StockOperationType, "INITIAL_IN" | "MANUAL_IN" | "MANUAL_OUT" | "STOCKTAKE_GAIN" | "STOCKTAKE_LOSS">;
|
||||
type PickerValue = string | number;
|
||||
|
||||
interface Props {
|
||||
product: Product;
|
||||
stock?: ProductStock;
|
||||
operation: ManualStockOperation;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<{
|
||||
success: [];
|
||||
}>();
|
||||
const visible = defineModel<boolean>("visible", { default: false });
|
||||
const isSaving = ref(false);
|
||||
const quantity = ref("");
|
||||
const reason = ref("");
|
||||
const remark = ref("");
|
||||
const requestNo = ref("");
|
||||
const photoItems = ref<PhotoItem[]>([]);
|
||||
const selectedUnitId = ref("");
|
||||
const unitPickerVisible = ref(false);
|
||||
const unitDraft = ref<PickerValue[]>([]);
|
||||
|
||||
const isInbound = computed(() => props.operation === "INITIAL_IN" || props.operation === "MANUAL_IN" || props.operation === "STOCKTAKE_GAIN");
|
||||
const selectableUnits = computed<ProductUnit[]>(() => (props.product.unitList || []).filter(unit => isInbound.value ? unit.allowPurchase : unit.allowSale));
|
||||
const unitOptions = computed(() => [selectableUnits.value.map(unit => ({ label: unit.name || "未命名单位", value: unit.id || "" }))]);
|
||||
const selectedUnitName = computed(() => selectableUnits.value.find(unit => unit.id === selectedUnitId.value)?.name || "请选择业务单位");
|
||||
|
||||
function resetForm(): void {
|
||||
quantity.value = "";
|
||||
reason.value = "";
|
||||
remark.value = "";
|
||||
requestNo.value = "";
|
||||
photoItems.value = [];
|
||||
selectedUnitId.value = selectableUnits.value[0]?.id || "";
|
||||
}
|
||||
|
||||
function openUnitPicker(): void {
|
||||
if (selectableUnits.value.length) {
|
||||
unitDraft.value = [selectedUnitId.value];
|
||||
unitPickerVisible.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
function confirmUnit(value: Array<string | number>): void {
|
||||
selectedUnitId.value = String(value[0] || "");
|
||||
unitPickerVisible.value = false;
|
||||
}
|
||||
|
||||
function validate(): boolean {
|
||||
if (!selectedUnitId.value) {
|
||||
Message.warning("请选择业务单位");
|
||||
return false;
|
||||
}
|
||||
if (!/^\d+(?:\.\d{1,3})?$/.test(quantity.value) || !(0 < Number(quantity.value))) {
|
||||
Message.warning("数量必须是大于 0 的数字，最多三位小数");
|
||||
return false;
|
||||
}
|
||||
if (!props.product.allowDecimalQuantity && !/^\d+$/.test(quantity.value)) {
|
||||
Message.warning("该产品不允许输入小数数量");
|
||||
return false;
|
||||
}
|
||||
if (!reason.value.trim() && !remark.value.trim()) {
|
||||
Message.warning("原因或备注至少填写一项");
|
||||
return false;
|
||||
}
|
||||
if (!photoItems.value.some(item => !!item.tempFileId)) {
|
||||
Message.warning("请上传至少一张操作照片");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function buildRequest(): ProductStockChangeRequest {
|
||||
return {
|
||||
requestNo: requestNo.value || (requestNo.value = createProductRequestNo()),
|
||||
productId: props.product.id || "",
|
||||
productUnitId: selectedUnitId.value,
|
||||
quantity: quantity.value,
|
||||
reason: reason.value.trim() || undefined,
|
||||
remark: remark.value.trim() || null,
|
||||
attachmentList: photoItems.value.flatMap(item => item.tempFileId ? [{ tempFileId: item.tempFileId, attachType: item.attachType || "PHOTO" }] : [])
|
||||
};
|
||||
}
|
||||
|
||||
async function submit(): Promise<void> {
|
||||
if (isSaving.value || !validate()) {
|
||||
return;
|
||||
}
|
||||
isSaving.value = true;
|
||||
try {
|
||||
const request = buildRequest();
|
||||
switch (props.operation) {
|
||||
case "INITIAL_IN":
|
||||
await ProductAPI.initialIn(request);
|
||||
break;
|
||||
case "MANUAL_IN":
|
||||
await ProductAPI.manualIn(request);
|
||||
break;
|
||||
case "MANUAL_OUT":
|
||||
await ProductAPI.manualOut(request);
|
||||
break;
|
||||
case "STOCKTAKE_GAIN":
|
||||
await ProductAPI.stocktakeGain(request);
|
||||
break;
|
||||
case "STOCKTAKE_LOSS":
|
||||
await ProductAPI.stocktakeLoss(request);
|
||||
break;
|
||||
}
|
||||
visible.value = false;
|
||||
Message.success("库存操作已提交");
|
||||
emit("success");
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "库存操作失败，请确认请求号后重试"));
|
||||
} finally {
|
||||
isSaving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => [visible.value, props.operation] as const, ([isVisible]) => {
|
||||
if (isVisible) {
|
||||
resetForm();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.operation-dialog {
|
||||
.summary {
|
||||
gap: .25rem;
|
||||
display: grid;
|
||||
padding: .5rem 0 1rem;
|
||||
}
|
||||
|
||||
:deep(.t-form__item) {
|
||||
padding: .25rem 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.salesOrder.cancel" class="sales-order-operation">
|
||||
<t-cell-group v-if="order" title="销售订单" theme="card"><t-cell title="订单号" :note="order.orderNo || order.id" /><t-cell title="当前状态" :note="order.status || '未知'" /></t-cell-group>
|
||||
<t-form v-if="order" class="form" label-align="left" label-width="6rem">
|
||||
<t-form-item label="取消原因" required-mark><t-textarea v-model.trim="reason" borderless autosize maxlength="500" placeholder="请输入取消原因" /></t-form-item>
|
||||
</t-form>
|
||||
<t-empty v-if="!order" :description="loading ? '正在加载订单' : '订单不存在'" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import SalesOrderAPI from "@/api/SalesOrderAPI";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { SalesOrder } from "@/types/SalesOrder";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
defineOptions({ name: "SalesOrderCancel" });
|
||||
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 reason = ref("");
|
||||
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 (!order.value?.id || !reason.value || saving.value) return;
|
||||
saving.value = true;
|
||||
try {
|
||||
await SalesOrderAPI.cancel({ salesOrderId: order.value.id, reason: reason.value.trim() });
|
||||
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.salesOrder.cancel)) return;
|
||||
navBarStore.setRightText("确认取消", "var(--td-danger-color)", save);
|
||||
await loadData();
|
||||
});
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.sales-order-operation { gap: 1rem; padding: calc(var(--app-nav-height) + 1rem) 1rem 2rem; display: flex; flex-direction: column;
|
||||
.form { padding: 0 .5rem; background: var(--td-bg-color-container); box-shadow: var(--td-shadow-1); border-radius: 1rem; overflow: hidden; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,596 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.salesOrder.create" class="sales-order-create">
|
||||
<header class="intro">
|
||||
<span class="eyebrow">销售订单</span>
|
||||
<h1>创建直接产品订单</h1>
|
||||
<p>选择客户并添加本次购买的产品，提交后即可继续处理收款。</p>
|
||||
</header>
|
||||
|
||||
<section class="section customer-section">
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<span class="step" v-text="'01 / 客户'" />
|
||||
<h2>选择客户</h2>
|
||||
<p>订单将归档到所选客户名下</p>
|
||||
</div>
|
||||
<span class="required" v-text="'必填'" />
|
||||
</div>
|
||||
<button class="customer-picker" type="button" @click="customerSelectorVisible = true">
|
||||
<span class="customer-avatar" :class="{selected: !!customer}" v-text="customer?.name?.slice(0, 1) || '客'" />
|
||||
<span class="customer-copy">
|
||||
<strong v-if="customer" v-text="customer.name || customer.code" />
|
||||
<strong v-else class="placeholder">请选择客户</strong>
|
||||
<span v-if="customer?.telephone" v-text="customer.telephone" />
|
||||
<span v-else class="hint" v-text="customer ? customer.code : '支持按姓名、编码或电话搜索'" />
|
||||
</span>
|
||||
<t-icon name="chevron-right" size="1.25rem" />
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section class="section product-section">
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<span class="step" v-text="'02 / 产品'" />
|
||||
<h2>添加产品</h2>
|
||||
<p>同一产品单位不能重复，数量最多三位小数</p>
|
||||
</div>
|
||||
<span class="item-count" v-text="`${items.length} 项`" />
|
||||
</div>
|
||||
<div class="items">
|
||||
<article v-for="(item, index) in items" :key="item.clientKey" class="order-item">
|
||||
<div class="item-head">
|
||||
<span class="item-number" v-text="String(index + 1).padStart(2, '0')" />
|
||||
<div class="item-title">
|
||||
<span class="item-label" v-text="`产品 ${index + 1}`" />
|
||||
<strong v-text="item.productName || '未选择产品'" />
|
||||
</div>
|
||||
<t-button theme="danger" variant="text" size="small" @click="removeItem(index)">删除</t-button>
|
||||
</div>
|
||||
<t-form class="item-form" label-align="left" label-width="5.25rem">
|
||||
<product-selector
|
||||
:model-value="item.productId && item.productUnitId ? {productId: item.productId, productUnitId: item.productUnitId} : undefined"
|
||||
label="产品单位"
|
||||
placeholder="请选择产品及单位"
|
||||
required-mark
|
||||
@update:model-value="applyProduct(index, $event)"
|
||||
/>
|
||||
<div class="number-fields">
|
||||
<t-form-item label="数量" required-mark>
|
||||
<t-input v-model.trim="item.quantity" type="number" align="right" borderless placeholder="请输入数量" />
|
||||
</t-form-item>
|
||||
<t-form-item v-if="canPriceOverride" label="成交单价">
|
||||
<t-input v-model.trim="item.unitPriceText" type="number" align="right" borderless placeholder="产品价" />
|
||||
</t-form-item>
|
||||
</div>
|
||||
<t-form-item label="产品备注">
|
||||
<t-input v-model.trim="item.remark" borderless placeholder="选填" />
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
</article>
|
||||
</div>
|
||||
<button class="add-item" type="button" @click="addItem">
|
||||
<t-icon name="add" size="1.125rem" />
|
||||
<span>继续添加产品</span>
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section class="section setting-section">
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<span class="step" v-text="'03 / 设置'" />
|
||||
<h2>订单设置</h2>
|
||||
<p>时间不填则默认使用提交时刻</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="setting-row" type="button" @click="pickerVisible = true">
|
||||
<span class="setting-icon"><t-icon name="time" size="1.25rem" /></span>
|
||||
<span class="setting-copy">
|
||||
<strong>下单时间</strong>
|
||||
<span v-text="purchasedAtText || '此刻'" />
|
||||
</span>
|
||||
<span class="setting-action" v-text="purchasedAtText ? '已设置' : '修改'" />
|
||||
<t-icon name="chevron-right" size="1.125rem" />
|
||||
</button>
|
||||
<div class="remark-field">
|
||||
<div class="remark-head">
|
||||
<strong>订单备注</strong>
|
||||
<span v-text="'选填'" />
|
||||
</div>
|
||||
<t-textarea v-model.trim="remark" borderless autosize maxlength="500" placeholder="记录本单需要注意的内容" />
|
||||
</div>
|
||||
<package-photo-field v-model="photoItems" title="购买照片（消费事件要求时必填）" />
|
||||
</section>
|
||||
|
||||
<div class="submit-bar">
|
||||
<span>确认信息无误后提交订单</span>
|
||||
<t-button theme="primary" block :loading="isSaving" :disabled="isSaving" @click="save">提交订单</t-button>
|
||||
</div>
|
||||
<customer-selector v-model="customerIdList" v-model:visible="customerSelectorVisible" selection-mode="single" @change="loadCustomer" />
|
||||
<t-popup v-model="pickerVisible" placement="bottom">
|
||||
<t-date-time-picker v-model="draftTime" format="YYYY-MM-DD HH:mm" :mode="['date', 'minute']" title="下单时间" @cancel="pickerVisible = false" @confirm="confirmTime" />
|
||||
</t-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useUserStore, type Attachment } from "timi-web-api";
|
||||
import CustomerAPI from "@/api/CustomerAPI";
|
||||
import ProductAPI from "@/api/ProductAPI";
|
||||
import SalesOrderAPI from "@/api/SalesOrderAPI";
|
||||
import CustomerSelector from "@/components/CustomerSelector.vue";
|
||||
import PackagePhotoField from "@/components/PackagePhotoField.vue";
|
||||
import type { Customer } from "@/types/Customer";
|
||||
import type { Product } from "@/types/Product";
|
||||
import type { PhotoItem } from "@/types/Photo";
|
||||
import type { DirectProductOrderItemRequest } from "@/types/SalesOrder";
|
||||
import { createPackageRequestNo, normalizePackageQuantity, parsePackageAmount } from "@/utils/package";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
|
||||
type FormItem = Partial<DirectProductOrderItemRequest> & { clientKey: string; productName: string; unitPriceText: string };
|
||||
defineOptions({ name: "SalesOrderCreate" });
|
||||
const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
const currentStoreStore = useCurrentStoreStore();
|
||||
const userStore = useUserStore();
|
||||
const canPriceOverride = computed(() => userStore.hasPermissions(permissionCodes.salesOrder.priceOverride));
|
||||
const customerIdList = ref<string[]>([]);
|
||||
const customer = ref<Customer>();
|
||||
const customerSelectorVisible = ref(false);
|
||||
const items = ref<FormItem[]>([]);
|
||||
const remark = ref("");
|
||||
const purchasedAtText = ref("");
|
||||
const draftTime = ref("");
|
||||
const pickerVisible = ref(false);
|
||||
const isSaving = ref(false);
|
||||
const photoItems = ref<PhotoItem[]>([]);
|
||||
const productCache = new Map<string, Product>();
|
||||
const requestNo = ref("");
|
||||
function createItem(): FormItem { return { clientKey: window.crypto.randomUUID(), quantity: "", productName: "", unitPriceText: "", remark: "" }; }
|
||||
function addItem(): void { items.value.push(createItem()); }
|
||||
function removeItem(index: number): void { if (1 < items.value.length) items.value.splice(index, 1); else Message.warning("订单至少需要一项产品"); }
|
||||
async function applyProduct(index: number, value?: { productId: string; productUnitId: string }): Promise<void> {
|
||||
if (!value) return;
|
||||
const product = productCache.get(value.productId) || await ProductAPI.detail(value.productId);
|
||||
productCache.set(value.productId, product);
|
||||
items.value[index].productId = value.productId;
|
||||
items.value[index].productUnitId = value.productUnitId;
|
||||
items.value[index].productName = `${product.name} · ${product.unitList?.find(unit => unit.id === value.productUnitId)?.name || "单位"}`;
|
||||
}
|
||||
async function loadCustomer(value: string | string[]): Promise<void> { const id = Array.isArray(value) ? value[0] : value; customer.value = id ? await CustomerAPI.detail(id) : undefined; }
|
||||
function confirmTime(value: string | number): void { purchasedAtText.value = String(value); pickerVisible.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" }] : []);
|
||||
}
|
||||
function validate(): boolean {
|
||||
if (!customer.value?.id) { Message.warning("请选择客户"); return false; }
|
||||
if (!items.value.length) { Message.warning("请至少添加一项产品"); return false; }
|
||||
const keys = new Set<string>();
|
||||
for (const item of items.value) {
|
||||
const quantity = normalizePackageQuantity(item.quantity ?? "");
|
||||
const key = `${item.productId}\u0000${item.productUnitId}`;
|
||||
if (!item.productId || !item.productUnitId || !quantity || quantity === "0") { Message.warning("产品单位和正数量不能为空"); return false; }
|
||||
if (keys.has(key)) { Message.warning("产品单位不能重复"); return false; }
|
||||
keys.add(key);
|
||||
if (canPriceOverride.value && item.unitPriceText && parsePackageAmount(item.unitPriceText) === undefined) { Message.warning("成交单价必须是合法金额"); return false; }
|
||||
}
|
||||
return true;
|
||||
}
|
||||
async function save(): Promise<void> {
|
||||
if (isSaving.value || !validate()) return;
|
||||
if (!requestNo.value) requestNo.value = createPackageRequestNo();
|
||||
isSaving.value = true;
|
||||
try {
|
||||
const itemList = items.value.map((item, index) => ({
|
||||
productId: item.productId!,
|
||||
productUnitId: item.productUnitId!,
|
||||
quantity: normalizePackageQuantity(item.quantity ?? "")!,
|
||||
unitPrice: canPriceOverride.value && item.unitPriceText ? parsePackageAmount(item.unitPriceText) : undefined,
|
||||
sort: index,
|
||||
remark: item.remark?.trim() || null
|
||||
}));
|
||||
const result = await SalesOrderAPI.createDirectProduct({
|
||||
requestNo: requestNo.value,
|
||||
customerId: customer.value!.id!,
|
||||
purchasedAt: resolveTimestamp(purchasedAtText.value),
|
||||
itemList,
|
||||
attachmentList: buildAttachments(),
|
||||
remark: remark.value.trim() || null
|
||||
});
|
||||
Message.success("销售订单已创建");
|
||||
await router.replace(`/management/sales-orders/${result.id}`);
|
||||
} catch (error) {
|
||||
const message = getErrorMessage(error, "销售订单创建失败，重试会复用同一请求号");
|
||||
if (message.includes("直接产品消费事件")) {
|
||||
Message.warning("请先在门店配置中选择直接产品消费事件");
|
||||
const storeId = currentStoreStore.currentStoreId;
|
||||
if (storeId) {
|
||||
await router.replace(`/management/stores/${storeId}`);
|
||||
}
|
||||
} else {
|
||||
Message.error(message);
|
||||
}
|
||||
}
|
||||
finally { isSaving.value = false; }
|
||||
}
|
||||
onMounted(() => { addItem(); navBarStore.setRightText("提交订单", "var(--td-brand-color)", save); });
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.sales-order-create {
|
||||
gap: 1rem;
|
||||
display: flex;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 1rem calc(7.5rem + env(safe-area-inset-bottom, 0));
|
||||
flex-direction: column;
|
||||
|
||||
.intro {
|
||||
padding: .25rem .25rem .5rem;
|
||||
|
||||
.eyebrow {
|
||||
color: var(--td-brand-color);
|
||||
font-size: .6875rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: .12em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: .5rem 0 .35rem;
|
||||
color: var(--td-text-color-primary);
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: var(--td-text-color-secondary);
|
||||
font-size: .8125rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 1rem;
|
||||
background: var(--td-bg-color-container);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.section-head {
|
||||
gap: .75rem;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
|
||||
.step {
|
||||
color: var(--td-brand-color);
|
||||
display: block;
|
||||
font-size: .6875rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: .08em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: .3rem 0 .25rem;
|
||||
font-size: 1.0625rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: var(--td-text-color-secondary);
|
||||
font-size: .75rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.required,
|
||||
.item-count {
|
||||
color: var(--td-brand-color);
|
||||
padding: .25rem .5rem;
|
||||
background: var(--td-brand-color-1);
|
||||
border-radius: .75rem;
|
||||
font-size: .6875rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.customer-picker,
|
||||
.setting-row {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.customer-picker {
|
||||
gap: .75rem;
|
||||
margin-top: 1rem;
|
||||
padding: .75rem;
|
||||
border: 1px solid var(--td-component-border);
|
||||
border-radius: .875rem;
|
||||
|
||||
&:active {
|
||||
background: var(--td-bg-color-secondarycontainer);
|
||||
}
|
||||
|
||||
.customer-avatar {
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
color: var(--td-brand-color);
|
||||
flex: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--td-brand-color-1);
|
||||
border-radius: .875rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
|
||||
&.selected {
|
||||
color: var(--td-text-color-anti);
|
||||
background: var(--td-brand-color);
|
||||
}
|
||||
}
|
||||
|
||||
.customer-copy {
|
||||
gap: .2rem;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
strong,
|
||||
span {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--td-text-color-primary);
|
||||
font-size: .9375rem;
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--td-text-color-secondary);
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
.placeholder,
|
||||
.hint {
|
||||
color: var(--td-text-color-placeholder);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.items {
|
||||
gap: .75rem;
|
||||
display: flex;
|
||||
margin-top: 1rem;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.order-item {
|
||||
padding: .875rem;
|
||||
background: var(--td-bg-color-secondarycontainer);
|
||||
border: 1px solid var(--td-border-level-1-color);
|
||||
border-radius: .875rem;
|
||||
}
|
||||
|
||||
.item-head {
|
||||
gap: .625rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.item-number {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
color: var(--td-brand-color);
|
||||
flex: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--td-brand-color-1);
|
||||
border-radius: .625rem;
|
||||
font-size: .6875rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
gap: .1rem;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.item-label {
|
||||
color: var(--td-text-color-secondary);
|
||||
font-size: .6875rem;
|
||||
}
|
||||
|
||||
strong {
|
||||
overflow: hidden;
|
||||
color: var(--td-text-color-primary);
|
||||
font-size: .875rem;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.item-form {
|
||||
:deep(.t-form__item) {
|
||||
min-height: 2.75rem;
|
||||
padding: .125rem 0;
|
||||
border-bottom: 1px solid var(--td-border-level-1-color);
|
||||
}
|
||||
|
||||
:deep(.t-form__item:last-child) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
:deep(.t-form__label) {
|
||||
color: var(--td-text-color-secondary);
|
||||
font-size: .8125rem;
|
||||
}
|
||||
|
||||
:deep(.t-input) {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
:deep(.t-form__controls) {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.number-fields {
|
||||
gap: .75rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
|
||||
:deep(.t-form__item) {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.add-item {
|
||||
gap: .375rem;
|
||||
width: 100%;
|
||||
margin-top: .75rem;
|
||||
padding: .75rem;
|
||||
color: var(--td-brand-color);
|
||||
border: 1px dashed var(--td-brand-color-4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--td-brand-color-1);
|
||||
border-radius: .75rem;
|
||||
font-size: .8125rem;
|
||||
font-weight: 600;
|
||||
|
||||
&:active {
|
||||
background: var(--td-brand-color-2);
|
||||
}
|
||||
}
|
||||
|
||||
.setting-row {
|
||||
gap: .75rem;
|
||||
margin-top: 1rem;
|
||||
padding: .75rem 0;
|
||||
border-top: 1px solid var(--td-border-level-1-color);
|
||||
border-bottom: 1px solid var(--td-border-level-1-color);
|
||||
|
||||
&:active {
|
||||
background: var(--td-bg-color-secondarycontainer);
|
||||
}
|
||||
|
||||
.setting-icon {
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
color: var(--td-brand-color);
|
||||
flex: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--td-brand-color-1);
|
||||
border-radius: .75rem;
|
||||
}
|
||||
|
||||
.setting-copy {
|
||||
gap: .2rem;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
strong {
|
||||
color: var(--td-text-color-primary);
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--td-text-color-secondary);
|
||||
font-size: .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-action {
|
||||
color: var(--td-brand-color);
|
||||
font-size: .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.remark-field {
|
||||
padding-top: 1rem;
|
||||
|
||||
.remark-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
strong {
|
||||
color: var(--td-text-color-primary);
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--td-text-color-placeholder);
|
||||
font-size: .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.t-textarea) {
|
||||
margin-top: .5rem;
|
||||
padding: .75rem;
|
||||
background: var(--td-bg-color-secondarycontainer);
|
||||
border-radius: .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-bar {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 12;
|
||||
gap: .75rem;
|
||||
padding: .625rem 1rem calc(.625rem + env(safe-area-inset-bottom, 0));
|
||||
position: fixed;
|
||||
box-shadow: 0 -.25rem 1rem rgba(15, 23, 42, .08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--td-bg-color-container);
|
||||
backdrop-filter: blur(1rem);
|
||||
|
||||
span {
|
||||
color: var(--td-text-color-secondary);
|
||||
font-size: .6875rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:deep(.t-button) {
|
||||
width: 9rem;
|
||||
flex: none;
|
||||
border-radius: .75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.sales-order-create {
|
||||
.submit-bar {
|
||||
box-shadow: 0 -.25rem 1rem rgba(0, 0, 0, .2);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.salesOrder.read" class="sales-order-detail">
|
||||
<template v-if="order">
|
||||
<customer-profile-card v-if="order.customer" class="customer" :customer="order.customer" v-entrance-transition />
|
||||
<section class="hero" v-entrance-transition="35">
|
||||
<span class="eyebrow" v-text="'销售订单'" />
|
||||
<div class="hero-title">
|
||||
<h1 v-text="order.orderNo || order.id || '未命名订单'" />
|
||||
<t-tag :content="getSalesOrderStatusText(order.status)" variant="light-outline" :theme="getStatusTheme(order.status)" />
|
||||
</div>
|
||||
<div class="hero-meta">
|
||||
<span v-text="getSalesOrderTypeText(order.orderType)" />
|
||||
<strong v-text="formatPackageAmount(order.saleAmount)" />
|
||||
</div>
|
||||
</section>
|
||||
<t-cell-group title="订单信息" theme="card" v-entrance-transition="70">
|
||||
<t-cell title="订单号" :note="order.orderNo || order.id" />
|
||||
<t-cell title="订单类型" :note="getSalesOrderTypeText(order.orderType)" />
|
||||
<t-cell title="订单状态">
|
||||
<template #note><t-tag :content="getSalesOrderStatusText(order.status)" variant="light-outline" :theme="getStatusTheme(order.status)" /></template>
|
||||
</t-cell>
|
||||
<t-cell title="下单时间" :note="order.purchasedAt ? Time.toDateTime(order.purchasedAt) : '未知'" />
|
||||
<t-cell v-if="order.sourceEventRecord?.id" title="来源登记记录" arrow @click="toEventRecord" />
|
||||
<t-cell v-if="order.remark" title="备注" :note="order.remark" />
|
||||
</t-cell-group>
|
||||
<t-cell-group v-if="order.itemList?.length" title="订单明细" theme="card" v-entrance-transition="140">
|
||||
<t-cell
|
||||
v-for="item in order.itemList"
|
||||
:key="item.id"
|
||||
:title="item.productNameSnapshot || '未命名产品'"
|
||||
:description="`${item.quantity || 0} ${item.unitSnapshot || ''} · 已履约 ${item.fulfilledQuantity || 0} · 待履约 ${item.reservedQuantity || 0}`"
|
||||
:note="formatPackageAmount(item.lineAmount)"
|
||||
/>
|
||||
</t-cell-group>
|
||||
<sales-order-finance-panel :order="order" :can-read-fund="canReadFund" @fund="toFundRecords" @record="toFundDetail" />
|
||||
<t-cell-group title="统一履约" theme="card" v-entrance-transition="210">
|
||||
<t-cell title="履约记录" note="查看本单所有履约单" arrow @click="toFulfillmentList" />
|
||||
<t-cell v-if="canCreateFulfillment && order.orderType === 'DIRECT_PRODUCT' && order.status === 'ACTIVE'" title="创建履约单" note="直接产品订单统一履约" arrow @click="toCreateFulfillment" />
|
||||
</t-cell-group>
|
||||
<section class="actions" v-entrance-transition="280">
|
||||
<t-button v-if="canReceive" theme="primary" @click="toPayment">登记收款</t-button>
|
||||
<t-button v-if="canRefund" theme="danger" variant="outline" @click="toRefund">登记退款</t-button>
|
||||
<t-button v-if="canConfirmNoRefund" theme="default" variant="outline" @click="toNoRefund">确认无需退款</t-button>
|
||||
<t-button v-if="canCancel" theme="danger" variant="outline" @click="toCancel">取消订单</t-button>
|
||||
</section>
|
||||
</template>
|
||||
<t-empty v-else :description="loading ? '正在加载订单' : '订单不存在'" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Time } from "timi-web";
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import SalesOrderAPI from "@/api/SalesOrderAPI";
|
||||
import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
|
||||
import SalesOrderFinancePanel from "@/pages/salesOrder/components/SalesOrderFinancePanel.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { SalesOrder } from "@/types/SalesOrder";
|
||||
import { formatPackageAmount } from "@/utils/package";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { getSalesOrderStatusText, getSalesOrderTypeText, getStatusTheme } from "@/utils/salesOrder";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
defineOptions({ name: "SalesOrderDetail" });
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
const userStore = useUserStore();
|
||||
const order = ref<SalesOrder>();
|
||||
const loading = ref(false);
|
||||
const canReadFund = computed(() => userStore.hasPermissions(permissionCodes.fundRecord.read));
|
||||
const canCreateFulfillment = computed(() => userStore.hasPermissions(permissionCodes.orderFulfillment.create));
|
||||
const canReceive = computed(() => !!order.value && order.value.status !== "CANCELLED" && order.value.paymentStatus !== "PAID" && userStore.hasPermissions(permissionCodes.fundReceive.create));
|
||||
const canRefund = computed(() => !!order.value && order.value.status === "CANCELLED" && order.value.refundStatus === "PENDING" && userStore.hasPermissions(permissionCodes.fund.refund));
|
||||
const canConfirmNoRefund = computed(() => !!order.value && order.value.status === "CANCELLED" && order.value.refundStatus === "PENDING" && userStore.hasPermissions(permissionCodes.fund.refund));
|
||||
const canCancel = computed(() => !!order.value && order.value.status === "ACTIVE" && userStore.hasPermissions(permissionCodes.salesOrder.cancel));
|
||||
|
||||
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 toEventRecord(): Promise<void> { if (order.value?.sourceEventRecord?.id) await router.push(`/management/registration-event-records/${order.value.sourceEventRecord.id}`); }
|
||||
async function toFundRecords(): Promise<void> { if (order.value?.id) await router.push({ path: "/management/fund-records", query: { salesOrderId: order.value.id } }); }
|
||||
async function toFundDetail(id: string): Promise<void> { await router.push(`/management/fund-records/${id}`); }
|
||||
async function toFulfillmentList(): Promise<void> { if (order.value?.id) await router.push({ path: "/management/order-fulfillments", query: { salesOrderId: order.value.id } }); }
|
||||
async function toCreateFulfillment(): Promise<void> { if (order.value?.id) await router.push({ path: "/management/order-fulfillments/create", query: { salesOrderId: order.value.id } }); }
|
||||
async function toPayment(): Promise<void> { if (order.value?.id) await router.push(`/management/sales-orders/${order.value.id}/payment`); }
|
||||
async function toRefund(): Promise<void> { if (order.value?.id) await router.push(`/management/sales-orders/${order.value.id}/refund`); }
|
||||
async function toNoRefund(): Promise<void> { if (order.value?.id) await router.push(`/management/sales-orders/${order.value.id}/no-refund`); }
|
||||
async function toCancel(): Promise<void> { if (order.value?.id) await router.push(`/management/sales-orders/${order.value.id}/cancel`); }
|
||||
onMounted(loadData);
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.sales-order-detail { gap: 1rem; padding: calc(var(--app-nav-height) + 1rem) 0 2rem; display: flex; flex-direction: column;
|
||||
.customer { margin: 0 1rem; }
|
||||
.hero { margin: 0 1rem; padding: 1rem; background: linear-gradient(135deg, #fff7ed, #eff6ff); box-shadow: var(--td-shadow-1); border-radius: 1.25rem;
|
||||
.eyebrow { color: #c2410c; display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; }
|
||||
.hero-title { gap: .5rem; display: flex; margin-top: .35rem; align-items: center; justify-content: space-between; }
|
||||
h1 { margin: 0; min-width: 0; font-size: 1.2rem; line-height: 1.35; }
|
||||
.hero-meta { gap: .75rem; display: flex; margin-top: .6rem; color: var(--td-text-color-secondary); align-items: center; justify-content: space-between; }
|
||||
strong { color: #c2410c; font-size: 1.2rem; white-space: nowrap; }
|
||||
}
|
||||
.actions { gap: .5rem; padding: 0 1rem; display: flex; flex-wrap: wrap; }
|
||||
.actions .t-button { flex: 1 1 8rem; }
|
||||
}
|
||||
|
||||
:global(html.theme-dark) .sales-order-detail .hero { background: linear-gradient(135deg, rgba(194, 65, 12, .2), rgba(37, 99, 235, .18));
|
||||
.eyebrow, strong { color: #fdba74; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.salesOrder.read" class="sales-order-list">
|
||||
<div class="filters">
|
||||
<t-input v-model.trim="keyword" class="keyword" type="search" borderless clearable placeholder="搜索订单号、客户" />
|
||||
<t-dropdown-menu class="menus">
|
||||
<t-dropdown-item v-model="orderType" label="订单类型" :options="orderTypeOptions" @change="selectOrderType" />
|
||||
<t-dropdown-item v-model="status" label="订单状态" :options="statusOptions" @change="selectStatus" />
|
||||
<t-dropdown-item v-model="paymentStatus" label="收款状态" :options="paymentOptions" @change="selectPaymentStatus" />
|
||||
</t-dropdown-menu>
|
||||
</div>
|
||||
<t-pull-down-refresh v-model="refreshing" :refresh-timeout="30000" @refresh="refresh" @scrolltolower="loadMore">
|
||||
<div v-if="viewMode" class="view-tip" v-text="viewMode === 'pending-receive' ? '当前显示未收清订单' : '当前显示待处理退款订单'" />
|
||||
<t-cell-group v-if="displayList.length" theme="card">
|
||||
<t-cell v-for="(item, index) in displayList" :key="item.id" arrow hover v-entrance-transition="index * 30" @click="toDetail(item)">
|
||||
<template #title>
|
||||
<div class="title">
|
||||
<strong v-text="item.orderNo || item.id || '未命名订单'" />
|
||||
<t-tag :content="getSalesOrderStatusText(item.status)" variant="light-outline" :theme="getStatusTheme(item.status)" />
|
||||
</div>
|
||||
</template>
|
||||
<template #note><span class="amount" v-text="formatPackageAmount(item.saleAmount)" /></template>
|
||||
<template #description>
|
||||
<div class="description">
|
||||
<span v-text="getSalesOrderTypeText(item.orderType)" />
|
||||
<span v-text="item.customer?.name || item.customerId || '未知客户'" />
|
||||
<t-tag :content="getSalesPaymentStatusText(item.paymentStatus)" theme="primary" variant="outline" />
|
||||
</div>
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<div v-else class="empty" v-text="loading ? '正在加载销售订单' : '暂无销售订单'" />
|
||||
<div class="center-tips" v-text="loading ? '正在加载' : noMore ? '已经到底了' : '上拉加载更多'" />
|
||||
</t-pull-down-refresh>
|
||||
</div>
|
||||
<nav-bar-action-menu v-if="canCreate" :actions="actions" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type DropdownValue } from "tdesign-mobile-vue";
|
||||
import { Toolkit } from "timi-web";
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import SalesOrderAPI from "@/api/SalesOrderAPI";
|
||||
import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { SalesOrder, SalesOrderStatus, SalesOrderType, SalesPaymentStatus } from "@/types/SalesOrder";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { formatPackageAmount } from "@/utils/package";
|
||||
import { getSalesOrderStatusText, getSalesOrderTypeText, getSalesPaymentStatusText, getStatusTheme } from "@/utils/salesOrder";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
defineOptions({ name: "SalesOrderList" });
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
const userStore = useUserStore();
|
||||
const canCreate = computed(() => userStore.hasPermissions(permissionCodes.salesOrder.create));
|
||||
const actions = computed(() => canCreate.value ? [{ key: "create", text: "直接产品下单", icon: "add", theme: "primary" as const, action: toCreate }] : []);
|
||||
const keyword = ref("");
|
||||
const orderType = ref("ALL");
|
||||
const viewMode = computed(() => route.query.view === "pending-receive" || route.query.view === "pending-refund" ? String(route.query.view) : "");
|
||||
const status = ref(viewMode.value === "pending-refund" ? "CANCELLED" : "ALL");
|
||||
const paymentStatus = ref("ALL");
|
||||
const list = ref<SalesOrder[]>([]);
|
||||
const pageIndex = ref(0);
|
||||
const total = ref(0);
|
||||
const loading = ref(false);
|
||||
const refreshing = ref(false);
|
||||
const noMore = ref(false);
|
||||
const pageSize = 15;
|
||||
const orderTypeOptions = [{ label: "全部类型", value: "ALL" }, { label: "套餐订单", value: "PACKAGE" }, { label: "直接产品", value: "DIRECT_PRODUCT" }];
|
||||
const statusOptions = [{ label: "全部状态", value: "ALL" }, { label: "进行中", value: "ACTIVE" }, { label: "已履约", value: "FULFILLED" }, { label: "已取消", value: "CANCELLED" }];
|
||||
const paymentOptions = [{ label: "全部收款", value: "ALL" }, { label: "未收款", value: "UNPAID" }, { label: "部分收款", value: "PARTIALLY_PAID" }, { label: "已收款", value: "PAID" }];
|
||||
const displayList = computed(() => list.value.filter(item => {
|
||||
if (viewMode.value === "pending-receive") return item.paymentStatus !== "PAID";
|
||||
if (viewMode.value === "pending-refund") return item.status === "CANCELLED" && item.refundStatus === "PENDING";
|
||||
return true;
|
||||
}));
|
||||
|
||||
async function fetchList(reset: boolean): Promise<void> {
|
||||
if (loading.value || (!reset && noMore.value)) return;
|
||||
if (reset) { pageIndex.value = 0; total.value = 0; noMore.value = false; list.value = []; }
|
||||
loading.value = true;
|
||||
try {
|
||||
const result = await SalesOrderAPI.list({
|
||||
index: pageIndex.value,
|
||||
size: pageSize,
|
||||
keyword: keyword.value || undefined,
|
||||
orderType: orderType.value === "ALL" ? undefined : orderType.value as SalesOrderType,
|
||||
status: status.value === "ALL" ? undefined : status.value as SalesOrderStatus,
|
||||
paymentStatus: paymentStatus.value === "ALL" ? undefined : paymentStatus.value as SalesPaymentStatus
|
||||
});
|
||||
const rows = result.list || [];
|
||||
list.value = reset ? rows : list.value.concat(rows);
|
||||
total.value = result.total || 0;
|
||||
pageIndex.value += 1;
|
||||
noMore.value = rows.length < pageSize || total.value <= list.value.length;
|
||||
} finally { loading.value = false; }
|
||||
}
|
||||
async function refresh(): Promise<void> { try { await fetchList(true); } catch (error) { Message.error(getErrorMessage(error, "销售订单加载失败")); } finally { refreshing.value = false; } }
|
||||
async function loadMore(): Promise<void> { try { await fetchList(false); } catch (error) { Message.error(getErrorMessage(error, "销售订单加载失败")); } }
|
||||
async function selectOrderType(value: DropdownValue): Promise<void> { if (!Array.isArray(value)) { orderType.value = String(value); await fetchList(true); } }
|
||||
async function selectStatus(value: DropdownValue): Promise<void> { if (!Array.isArray(value)) { status.value = String(value); await fetchList(true); } }
|
||||
async function selectPaymentStatus(value: DropdownValue): Promise<void> { if (!Array.isArray(value)) { paymentStatus.value = String(value); await fetchList(true); } }
|
||||
async function toDetail(item: SalesOrder): Promise<void> { if (item.id) await router.push(`/management/sales-orders/${item.id}`); }
|
||||
async function toCreate(): Promise<void> { await router.push("/management/sales-orders/create"); }
|
||||
const search = Toolkit.debounce(async () => { try { await fetchList(true); } catch (error) { Message.error(getErrorMessage(error, "销售订单加载失败")); } }, false);
|
||||
watch(keyword, () => search());
|
||||
watch(viewMode, async value => {
|
||||
status.value = value === "pending-refund" ? "CANCELLED" : "ALL";
|
||||
paymentStatus.value = "ALL";
|
||||
await fetchList(true);
|
||||
});
|
||||
onMounted(async () => { navBarStore.clearRight(); navBarStore.setCustomRightVisible(canCreate.value); try { await fetchList(true); } catch (error) { Message.error(getErrorMessage(error, "销售订单加载失败")); } });
|
||||
onUnmounted(() => { navBarStore.clearRight(); search.cancel(); });
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.sales-order-list { padding: var(--app-nav-height) 0 1rem;
|
||||
.filters { top: var(--app-nav-height); z-index: 10; padding: .75rem 1rem .5rem; position: sticky; background: var(--td-bg-color-page); box-shadow: var(--td-shadow-1);
|
||||
.keyword { border: 1px solid var(--td-component-border); background: var(--td-bg-color-container); border-radius: 1rem; }
|
||||
.menus { margin-top: .5rem; border-radius: .875rem;
|
||||
:deep(.t-dropdown-menu__item) { min-width: 0; }
|
||||
:deep(.t-dropdown-menu__title) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
||||
}
|
||||
}
|
||||
.title, .description { gap: .5rem; display: flex; align-items: center; }
|
||||
.description { color: var(--td-text-color-secondary); flex-wrap: wrap; }
|
||||
.amount { color: var(--td-brand-color); font-weight: 700; }
|
||||
.view-tip { color: var(--td-text-color-secondary); padding: .75rem 1rem 0; font-size: .8125rem; }
|
||||
.empty { color: var(--td-text-color-secondary); padding: 3rem 1rem; text-align: center; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.fund.refund" class="sales-order-operation">
|
||||
<t-cell-group v-if="order" title="销售订单" theme="card"><t-cell title="订单号" :note="order.orderNo || order.id" /><t-cell title="当前退款状态" :note="order.refundStatus || '未知'" /></t-cell-group>
|
||||
<t-form v-if="order" class="form" label-align="left" label-width="6rem">
|
||||
<t-form-item label="确认原因" required-mark><t-textarea v-model.trim="reason" borderless autosize maxlength="500" placeholder="请说明无需退款的原因" /></t-form-item>
|
||||
</t-form>
|
||||
<t-empty v-if="!order" :description="loading ? '正在加载订单' : '订单不存在'" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import SalesOrderAPI from "@/api/SalesOrderAPI";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { SalesOrder } from "@/types/SalesOrder";
|
||||
import { createPackageRequestNo } from "@/utils/package";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
defineOptions({ name: "SalesOrderNoRefund" });
|
||||
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 reason = ref(""); const requestNo = ref("");
|
||||
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 (!order.value?.id || !reason.value || saving.value) return;
|
||||
if (!requestNo.value) requestNo.value = createPackageRequestNo();
|
||||
saving.value = true;
|
||||
try {
|
||||
await SalesOrderAPI.confirmNoRefund({ salesOrderId: order.value.id, requestNo: requestNo.value, reason: reason.value.trim() });
|
||||
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-brand-color)", save);
|
||||
await loadData();
|
||||
});
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.sales-order-operation { gap: 1rem; padding: calc(var(--app-nav-height) + 1rem) 1rem 2rem; display: flex; flex-direction: column;
|
||||
.form { padding: 0 .5rem; background: var(--td-bg-color-container); box-shadow: var(--td-shadow-1); border-radius: 1rem; overflow: hidden; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.fundReceive.create" class="sales-order-operation">
|
||||
<t-cell-group v-if="order" title="销售订单" theme="card"><t-cell title="订单号" :note="order.orderNo || order.id" /><t-cell title="剩余待收款" :note="formatPackageAmount(order.unpaidAmount)" /></t-cell-group>
|
||||
<t-form v-if="order" class="form" label-align="left" label-width="6rem">
|
||||
<t-form-item label="收款金额（元）" required-mark><t-input v-model.trim="amountText" type="number" align="right" borderless placeholder="请输入本次收款金额" /></t-form-item>
|
||||
<t-form-item label="收款时间" arrow @click="pickerVisible = true"><span class="picker-text" v-text="occurredAtText || '使用当前时间'" /></t-form-item>
|
||||
<t-form-item label="备注"><t-textarea v-model.trim="remark" borderless autosize maxlength="500" /></t-form-item>
|
||||
</t-form>
|
||||
<package-photo-field v-if="order" v-model="photoItems" required title="收款凭证照片" />
|
||||
<t-empty v-if="!order" :description="loading ? '正在加载订单' : '订单不存在'" />
|
||||
<t-popup v-model="pickerVisible" placement="bottom">
|
||||
<t-date-time-picker v-model="draftTime" format="YYYY-MM-DD HH:mm" :mode="['date', 'minute']" title="收款时间" @cancel="pickerVisible = false" @confirm="confirmTime" />
|
||||
</t-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useUserStore, type Attachment } from "timi-web-api";
|
||||
import PackagePhotoField from "@/components/PackagePhotoField.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, parsePackageAmount } from "@/utils/package";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
defineOptions({ name: "SalesOrderPayment" });
|
||||
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 occurredAtText = ref("");
|
||||
const draftTime = ref("");
|
||||
const pickerVisible = ref(false);
|
||||
const remark = ref("");
|
||||
const photoItems = ref<PhotoItem[]>([]);
|
||||
const requestNo = ref("");
|
||||
function confirmTime(value: string | number): void { occurredAtText.value = String(value); pickerVisible.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) { Message.warning("请输入合法的正金额"); return; }
|
||||
if (!attachmentList.length) { Message.warning("收款必须上传至少一张照片"); return; }
|
||||
if (!requestNo.value) requestNo.value = createPackageRequestNo(); saving.value = true;
|
||||
try {
|
||||
await SalesOrderAPI.receivePayment({
|
||||
salesOrderId: order.value.id,
|
||||
requestNo: requestNo.value,
|
||||
amount,
|
||||
occurredAt: resolveTimestamp(occurredAtText.value),
|
||||
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.fundReceive.create)) return; navBarStore.setRightText("提交收款", "var(--td-brand-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; }
|
||||
.picker-text { width: 100%; text-align: right; }
|
||||
.package-photo-field { padding: 0 1rem; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.fund.refund" class="sales-order-operation">
|
||||
<t-cell-group v-if="order" title="销售订单" theme="card">
|
||||
<t-cell title="订单号" :note="order.orderNo || order.id" />
|
||||
<t-cell title="可退款金额" :note="formatPackageAmount((order.paidAmount || 0) - (order.refundedAmount || 0))" />
|
||||
</t-cell-group>
|
||||
<t-form v-if="order" class="form" label-align="left" label-width="6rem">
|
||||
<t-form-item label="退款金额（元）" required-mark><t-input v-model.trim="amountText" type="number" align="right" borderless placeholder="请输入退款金额" /></t-form-item>
|
||||
<t-form-item label="退款原因" required-mark><t-textarea v-model.trim="reason" borderless autosize maxlength="500" /></t-form-item>
|
||||
<t-form-item label="退款时间" arrow @click="pickerVisible = true"><span class="picker-text" v-text="occurredAtText || '使用当前时间'" /></t-form-item>
|
||||
<t-form-item label="备注"><t-textarea v-model.trim="remark" borderless autosize maxlength="500" /></t-form-item>
|
||||
</t-form>
|
||||
<package-photo-field v-if="order" v-model="photoItems" required title="退款凭证照片" />
|
||||
<t-empty v-if="!order" :description="loading ? '正在加载订单' : '订单不存在'" />
|
||||
<t-popup v-model="pickerVisible" placement="bottom">
|
||||
<t-date-time-picker v-model="draftTime" format="YYYY-MM-DD HH:mm" :mode="['date', 'minute']" title="退款时间" @cancel="pickerVisible = false" @confirm="confirmTime" />
|
||||
</t-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useUserStore, type Attachment } from "timi-web-api";
|
||||
import PackagePhotoField from "@/components/PackagePhotoField.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, parsePackageAmount } from "@/utils/package";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
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 occurredAtText = ref("");
|
||||
const draftTime = ref("");
|
||||
const pickerVisible = ref(false);
|
||||
const remark = ref("");
|
||||
const photoItems = ref<PhotoItem[]>([]);
|
||||
const requestNo = ref("");
|
||||
function confirmTime(value: string | number): void { occurredAtText.value = String(value); pickerVisible.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-danger-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; }
|
||||
.picker-text { width: 100%; text-align: right; }
|
||||
.package-photo-field { padding: 0 1rem; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="finance-panel">
|
||||
<t-cell-group title="资金摘要" theme="card">
|
||||
<t-cell title="成交金额" :note="formatPackageAmount(props.order.saleAmount)" />
|
||||
<t-cell title="已生效收款" :note="formatPackageAmount(props.order.paidAmount)" />
|
||||
<t-cell title="待核销收款" :note="formatPackageAmount(props.order.pendingPaidAmount)" />
|
||||
<t-cell title="剩余待收款" :note="formatPackageAmount(props.order.unpaidAmount)" />
|
||||
<t-cell title="有效退款" :note="formatPackageAmount(props.order.refundedAmount)" />
|
||||
<t-cell title="收款状态" :note="getSalesPaymentStatusText(props.order.paymentStatus)" />
|
||||
<t-cell title="退款状态" :note="getSalesRefundStatusText(props.order.refundStatus)" />
|
||||
<t-cell v-if="props.canReadFund" title="查看全部资金流水" arrow @click="emit('fund')" />
|
||||
</t-cell-group>
|
||||
<t-cell-group title="本单资金操作" theme="card">
|
||||
<t-cell
|
||||
v-for="item in props.order.fundRecordList || []"
|
||||
:key="item.id"
|
||||
:title="getFundOperationText(item.operationType)"
|
||||
:note="`${getFundStatusText(item.status)} · ${item.id || ''}`"
|
||||
arrow
|
||||
@click="item.id && emit('record', item.id)"
|
||||
>
|
||||
<template #note>
|
||||
<span class="record-note">
|
||||
<t-tag :content="getFundStatusText(item.status)" variant="light-outline" :theme="getStatusTheme(item.status)" />
|
||||
<span class="amount" v-text="formatPackageAmount(item.amount)" />
|
||||
</span>
|
||||
</template>
|
||||
</t-cell>
|
||||
<t-cell v-if="!props.order.fundRecordList?.length" title="暂无资金流水" />
|
||||
</t-cell-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { SalesOrder } from "@/types/SalesOrder";
|
||||
import { formatPackageAmount } from "@/utils/package";
|
||||
import { getFundOperationText, getFundStatusText, getSalesPaymentStatusText, getSalesRefundStatusText, getStatusTheme } from "@/utils/salesOrder";
|
||||
|
||||
const props = defineProps<{ order: SalesOrder; canReadFund: boolean }>();
|
||||
const emit = defineEmits<{ fund: []; record: [id: string] }>();
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.finance-panel { display: grid; gap: 1rem;
|
||||
.record-note { gap: .5rem; display: flex; align-items: center; }
|
||||
.amount { color: var(--td-brand-color); font-weight: 700; }
|
||||
}
|
||||
</style>
|
||||
@@ -35,6 +35,13 @@
|
||||
<t-switch v-model="formData.autoClosedDay" />
|
||||
</template>
|
||||
</t-cell>
|
||||
<t-cell
|
||||
title="直接产品消费事件"
|
||||
:note="directProductSaleEventName"
|
||||
description="直接产品订单使用该事件记录消费金额并触发积分"
|
||||
arrow
|
||||
@click="openDirectProductSaleEventPicker"
|
||||
/>
|
||||
</t-cell-group>
|
||||
<div v-if="!isCreateMode && !isStoreManagerScope" class="actions" v-entrance-transition="140">
|
||||
<t-button
|
||||
@@ -52,11 +59,21 @@
|
||||
@confirm="removeConfirmedStore"
|
||||
/>
|
||||
</div>
|
||||
<t-popup v-model="directProductSaleEventPickerVisible" placement="bottom">
|
||||
<t-picker
|
||||
v-model="directProductSaleEventPickerDraft"
|
||||
:columns="directProductSaleEventPickerColumns"
|
||||
title="选择直接产品消费事件"
|
||||
@cancel="directProductSaleEventPickerVisible = false"
|
||||
@confirm="confirmDirectProductSaleEvent"
|
||||
/>
|
||||
</t-popup>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import StoreAPI from "@/api/StoreAPI";
|
||||
import type { EventItem } from "@/types/EventItem";
|
||||
import StoreRemoveDialog from "@/components/StoreRemoveDialog.vue";
|
||||
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
@@ -68,6 +85,8 @@ defineOptions({
|
||||
name: "StoreEdit"
|
||||
});
|
||||
|
||||
type PickerValue = string | number;
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
@@ -95,9 +114,75 @@ const formData = reactive({
|
||||
telephone: "",
|
||||
address: "",
|
||||
remark: "",
|
||||
autoClosedDay: true
|
||||
autoClosedDay: true,
|
||||
directProductSaleEventId: ""
|
||||
});
|
||||
|
||||
// ---------- 直接产品消费事件 ----------
|
||||
|
||||
const directProductSaleEventList = ref<EventItem[]>([]);
|
||||
const directProductSaleEventLoaded = ref(false);
|
||||
const directProductSaleEventPickerVisible = ref(false);
|
||||
const directProductSaleEventPickerDraft = ref<PickerValue[]>([]);
|
||||
const directProductSaleEventPickerColumns = computed(() => [
|
||||
directProductSaleEventList.value
|
||||
.map(item => ({
|
||||
label: `${item.name || "未命名事件"}${item.requirePhoto ? "（需照片）" : ""}`,
|
||||
value: item.id || ""
|
||||
}))
|
||||
.filter(item => item.value)
|
||||
]);
|
||||
const selectedDirectProductSaleEvent = computed(() => directProductSaleEventList.value.find(item => item.id === formData.directProductSaleEventId));
|
||||
const directProductSaleEventName = computed(() => {
|
||||
if (selectedDirectProductSaleEvent.value) {
|
||||
return selectedDirectProductSaleEvent.value.name || "未命名事件";
|
||||
}
|
||||
if (formData.directProductSaleEventId && !directProductSaleEventLoaded.value) {
|
||||
return "已配置，点击查看";
|
||||
}
|
||||
return formData.directProductSaleEventId ? "当前配置事件不可用" : "未配置，直接产品订单不可提交";
|
||||
});
|
||||
|
||||
async function loadDirectProductSaleEvents(): Promise<boolean> {
|
||||
if (!formData.id) {
|
||||
return false;
|
||||
}
|
||||
try {
|
||||
directProductSaleEventList.value = await StoreAPI.directProductSaleEventList(formData.id);
|
||||
directProductSaleEventLoaded.value = true;
|
||||
return true;
|
||||
} catch {
|
||||
directProductSaleEventList.value = [];
|
||||
directProductSaleEventLoaded.value = false;
|
||||
Message.error("直接产品消费事件加载失败");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
async function openDirectProductSaleEventPicker(): Promise<void> {
|
||||
if (!formData.id) {
|
||||
Message.warning("请先保存门店，再配置直接产品消费事件");
|
||||
return;
|
||||
}
|
||||
if (!await loadDirectProductSaleEvents()) {
|
||||
return;
|
||||
}
|
||||
if (!directProductSaleEventPickerColumns.value[0]?.length) {
|
||||
Message.warning("暂无可选事件，请先创建并启用 GENERAL / NUMBER / CENT 消费事件");
|
||||
return;
|
||||
}
|
||||
directProductSaleEventPickerDraft.value = [formData.directProductSaleEventId];
|
||||
directProductSaleEventPickerVisible.value = true;
|
||||
}
|
||||
|
||||
function confirmDirectProductSaleEvent(value: Array<string | number>): void {
|
||||
const eventId = String(value[0] || "");
|
||||
if (eventId) {
|
||||
formData.directProductSaleEventId = eventId;
|
||||
}
|
||||
directProductSaleEventPickerVisible.value = false;
|
||||
}
|
||||
|
||||
async function doSave(): Promise<void> {
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
<t-cell-group
|
||||
v-for="(group, index) in visibleMenuGroupList"
|
||||
:key="group.title"
|
||||
class="menu-group"
|
||||
:title="group.title"
|
||||
theme="card"
|
||||
v-entrance-transition="index * 70"
|
||||
@@ -15,17 +16,18 @@
|
||||
<t-cell
|
||||
v-for="item in group.items"
|
||||
:key="item.path"
|
||||
class="item"
|
||||
class="menu-item"
|
||||
:title="item.title"
|
||||
arrow
|
||||
hover
|
||||
@click="go(item.path)"
|
||||
>
|
||||
<template #leftIcon>
|
||||
<t-icon :name="item.icon" size="1.75rem" />
|
||||
<span class="icon-wrap" :class="`tone-${index}`"><t-icon :name="item.icon" size="1.35rem" /></span>
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<div v-if="!visibleMenuGroupList.length" class="empty" v-text="'当前账号暂无产品管理权限'" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -53,35 +55,47 @@ const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const menuGroupList = computed<MenuGroup[]>(() => [
|
||||
{
|
||||
title: "套餐",
|
||||
{
|
||||
title: "产品管理",
|
||||
items: [
|
||||
{
|
||||
icon: "catalog",
|
||||
path: "/management/product-categories",
|
||||
title: "产品分类",
|
||||
visible: userStore.hasPermissions(permissionCodes.productCategory.read)
|
||||
},
|
||||
{
|
||||
icon: "layers",
|
||||
path: "/management/package-configs",
|
||||
title: "套餐配置",
|
||||
visible: userStore.hasPermissions(permissionCodes.packageConfig.read)
|
||||
path: "/management/products",
|
||||
title: "产品库",
|
||||
visible: userStore.hasPermissions(permissionCodes.product.read)
|
||||
},
|
||||
{
|
||||
icon: "order-list",
|
||||
path: "/management/customer-packages",
|
||||
title: "客户套餐",
|
||||
visible: userStore.hasPermissions(permissionCodes.customerPackage.read)
|
||||
},
|
||||
{
|
||||
icon: "upload",
|
||||
path: "/management/package-deliveries",
|
||||
title: "发放记录",
|
||||
visible: userStore.hasPermissions(permissionCodes.packageDelivery.read)
|
||||
},
|
||||
{
|
||||
icon: "money",
|
||||
path: "/management/fund-records",
|
||||
title: "资金流水",
|
||||
visible: userStore.hasPermissions(permissionCodes.fundRecord.read)
|
||||
icon: "wallet",
|
||||
path: "/management/product-stocks",
|
||||
title: "库存与库存流水",
|
||||
visible: userStore.hasPermissions(permissionCodes.productStock.read)
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "交易管理",
|
||||
items: [
|
||||
{ icon: "order", path: "/management/sales-orders", title: "销售订单", visible: userStore.hasPermissions(permissionCodes.salesOrder.read) },
|
||||
{ icon: "wallet", path: "/management/sales-orders?view=pending-receive", title: "待收款", visible: userStore.hasPermissions(permissionCodes.salesOrder.read) },
|
||||
{ icon: "discount", path: "/management/sales-orders?view=pending-refund", title: "待退款", visible: userStore.hasPermissions(permissionCodes.salesOrder.read) },
|
||||
{ icon: "wallet", path: "/management/fund-records", title: "资金流水", visible: userStore.hasPermissions(permissionCodes.fundRecord.read) },
|
||||
{ icon: "task", path: "/management/order-fulfillments", title: "统一履约", visible: userStore.hasPermissions(permissionCodes.orderFulfillment.read) }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "套餐管理",
|
||||
items: [
|
||||
{ icon: "layers", path: "/management/package-configs", title: "套餐配置", visible: userStore.hasPermissions(permissionCodes.packageConfig.read) },
|
||||
{ icon: "calendar", path: "/management/registration-events", title: "套餐购买事件绑定", visible: userStore.hasPermissions([permissionCodes.event.read, permissionCodes.packageConfig.read], "and") },
|
||||
{ icon: "usergroup", path: "/management/customer-packages", title: "客户套餐", visible: userStore.hasPermissions(permissionCodes.customerPackage.read) }
|
||||
]
|
||||
}
|
||||
]);
|
||||
|
||||
const visibleMenuGroupList = computed<MenuGroup[]>(() => menuGroupList.value
|
||||
|
||||
Reference in New Issue
Block a user