update EventRecordEdit.vue style
This commit is contained in:
Timi
@@ -69,7 +69,7 @@
|
||||
</t-swipe-cell>
|
||||
</t-cell-group>
|
||||
<div v-if="!visibleEventList.length" class="empty-block" v-text="emptyText" />
|
||||
<div v-if="visibleEventList.length" class="load-state" v-text="isNoMore ? '已经到底了' : '上拉加载更多'" />
|
||||
<div v-if="visibleEventList.length" class="center-tips" v-text="isNoMore ? '已经到底了' : '上拉加载更多'" />
|
||||
</t-pull-down-refresh>
|
||||
</div>
|
||||
<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
|
||||
|
||||
+100
-139
@@ -50,17 +50,19 @@
|
||||
class="event-selector"
|
||||
:event-list="eventList"
|
||||
:disabled="isEditMode"
|
||||
:selection-mode="isPackagePurchaseSelected ? 'single' : 'multiple'"
|
||||
required-mark
|
||||
@update:model-value="handleEventSelectionChange"
|
||||
/>
|
||||
<event-option-selector
|
||||
v-if="!isPackagePurchaseSelected"
|
||||
class="option-selector"
|
||||
v-model="selectedOptionSelectionMap"
|
||||
:event-list="eventList"
|
||||
:selected-event-id-list="selectedEventIdList"
|
||||
:disabled="isSaving"
|
||||
/>
|
||||
<div v-if="!isEditMode && selectedNumberEventList.length" class="event-value-list">
|
||||
<div v-if="!isEditMode && !isPackagePurchaseSelected && selectedNumberEventList.length" class="event-value-list">
|
||||
<t-form-item
|
||||
v-for="item in selectedNumberEventList"
|
||||
:key="item.id"
|
||||
@@ -77,6 +79,13 @@
|
||||
/>
|
||||
</t-form-item>
|
||||
</div>
|
||||
<package-purchase-form
|
||||
v-if="isPackagePurchaseSelected"
|
||||
v-model:item-list="packagePurchaseItemList"
|
||||
v-model:sale-amount="saleAmountText"
|
||||
:can-price-override="canPriceOverride"
|
||||
:package-config="selectedPackageConfig"
|
||||
/>
|
||||
<t-form-item v-if="showSourceValueInput" label="积分动作">
|
||||
<span class="picker-text" v-text="getPointActionText(sourceValueAction)" />
|
||||
</t-form-item>
|
||||
@@ -111,7 +120,7 @@
|
||||
<t-form-item v-else label="登记时间" content-align="right">
|
||||
<span class="readonly-time" v-text="registeredAtText || '此刻'" />
|
||||
</t-form-item>
|
||||
<t-form-item label="登记备注">
|
||||
<t-form-item :label="isPackagePurchaseSelected ? '购买备注' : '登记备注'">
|
||||
<t-textarea
|
||||
v-model.trim="note"
|
||||
class="textarea"
|
||||
@@ -157,7 +166,7 @@
|
||||
v-if="!isEditMode"
|
||||
v-model="selectedCustomerIdList"
|
||||
v-model:visible="selectorVisible"
|
||||
:selection-mode="isEditMode ? 'single' : 'multiple'"
|
||||
:selection-mode="isEditMode || isPackagePurchaseSelected ? 'single' : 'multiple'"
|
||||
@change="handleCustomerChange"
|
||||
/>
|
||||
<t-popup v-model="selectedCustomerListVisible" placement="bottom">
|
||||
@@ -201,7 +210,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Time } from "timi-web";
|
||||
import { AttachmentAPI, type Attachment, useUserStore } from "timi-web-api";
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import { Message } from "@/utils/message";
|
||||
import CustomerAPI from "@/api/CustomerAPI";
|
||||
import EventAPI from "@/api/EventAPI";
|
||||
@@ -213,20 +222,21 @@ import CustomerSelector from "@/components/CustomerSelector.vue";
|
||||
import EventOptionSelector from "@/components/EventOptionSelector.vue";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import EventSelector from "@/components/EventSelector.vue";
|
||||
import PackagePurchaseForm from "@/pages/event/component/PackagePurchaseForm.vue";
|
||||
import { useEventRecordPhoto } from "@/pages/event/component/useEventRecordPhoto";
|
||||
import { usePackagePurchaseRecord } from "@/pages/event/component/usePackagePurchaseRecord";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import { useSettingStore } from "@/store/settingStore";
|
||||
import type { Customer } from "@/types/Customer";
|
||||
import type { EventItem, EventOptionSelectionMap } from "@/types/EventItem";
|
||||
import type { EventRecord } from "@/types/EventRecord";
|
||||
import type { PointAction } from "@/types/Point";
|
||||
import { getAttachmentReadURL } from "@/utils/attachment";
|
||||
import { isPackagePurchaseEvent } from "@/utils/event";
|
||||
import { buildEventOptionSelectionMap, resolveSelectedOptionGroupList, validateEventOptionSelection } from "@/utils/eventOption";
|
||||
import { getEventRecordPhotoURL, hasPhotoAttachment } from "@/utils/eventRecord";
|
||||
import { getEventNumberValuePlaceholder, resolveEventNumberValue } from "@/utils/eventValue";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
import { loadSourceValueConfig, type SourceValueConfig } from "@/utils/point";
|
||||
import { compressUploadImageList } from "@/utils/imageCompression";
|
||||
|
||||
defineOptions({
|
||||
name: "EventRecordEdit"
|
||||
@@ -238,14 +248,6 @@ const settingStore = useSettingStore();
|
||||
const userStore = useUserStore();
|
||||
const navBarStore = useNavBarStore();
|
||||
|
||||
type EditablePhoto = {
|
||||
attachment?: Partial<Attachment>;
|
||||
attachType?: string;
|
||||
previewUrl?: string;
|
||||
tempFileId?: string;
|
||||
url: string;
|
||||
};
|
||||
|
||||
// ---------- 路由权限 ----------
|
||||
|
||||
const routeId = computed(() => String(route.params.id || ""));
|
||||
@@ -329,10 +331,10 @@ async function loadSelectedCustomer(): Promise<void> {
|
||||
}
|
||||
|
||||
if (customer.id) {
|
||||
selectedCustomerIdList.value = isEditMode.value
|
||||
selectedCustomerIdList.value = isEditMode.value || isPackagePurchaseSelected.value
|
||||
? [customer.id]
|
||||
: [...new Set([...selectedCustomerIdList.value, customer.id])];
|
||||
selectedCustomerList.value = isEditMode.value
|
||||
selectedCustomerList.value = isEditMode.value || isPackagePurchaseSelected.value
|
||||
? [customer]
|
||||
: [...selectedCustomerList.value.filter(item => item.id !== customer.id), customer];
|
||||
}
|
||||
@@ -436,27 +438,6 @@ const eventNameMap = computed(() => {
|
||||
return map;
|
||||
});
|
||||
|
||||
async function handleEventSelectionChange(eventIdList: string[]): Promise<void> {
|
||||
const packageEvent = eventIdList
|
||||
.map(eventId => eventList.value.find(item => item.id === eventId))
|
||||
.find(item => isPackagePurchaseEvent(item));
|
||||
if (!isEditMode.value && packageEvent?.id) {
|
||||
if (!userStore.hasPermissions(permissionCodes.customerPackage.create)) {
|
||||
Message.warning("当前账号没有套餐购买权限");
|
||||
return;
|
||||
}
|
||||
await router.push({
|
||||
name: "CustomerPackagePurchase",
|
||||
query: {
|
||||
eventId: packageEvent.id,
|
||||
...(selectedCustomer.value?.id ? { customerId: selectedCustomer.value.id } : {})
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
selectedEventIdList.value = eventIdList;
|
||||
}
|
||||
|
||||
function appendRecordEvent(record: EventRecord): void {
|
||||
if (!record.event?.id || eventList.value.some(item => item.id === record.event?.id)) {
|
||||
return;
|
||||
@@ -519,6 +500,7 @@ let sourceValueLoadToken = 0;
|
||||
|
||||
const showSourceValueInput = computed(() => (
|
||||
!isEditMode.value
|
||||
&& !isPackagePurchaseSelected.value
|
||||
&& userStore.hasPermissions(permissionCodes.point.sourceValue)
|
||||
&& !!sourceValueConfig.value
|
||||
));
|
||||
@@ -531,7 +513,7 @@ async function loadSourceValueRule(): Promise<void> {
|
||||
const token = sourceValueLoadToken + 1;
|
||||
sourceValueLoadToken = token;
|
||||
sourceValueConfig.value = undefined;
|
||||
if (isEditMode.value || !userStore.hasPermissions(permissionCodes.point.sourceValue) || !selectedEventIdList.value.length) {
|
||||
if (isEditMode.value || isPackagePurchaseSelected.value || !userStore.hasPermissions(permissionCodes.point.sourceValue) || !selectedEventIdList.value.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -557,48 +539,17 @@ function getPointActionText(action: PointAction): string {
|
||||
|
||||
// ---------- 照片 ----------
|
||||
|
||||
const recordPhotoInputRef = ref<HTMLInputElement>();
|
||||
const photoItemList = ref<EditablePhoto[]>([]);
|
||||
const isPhotoUploading = ref(false);
|
||||
|
||||
const photoList = computed<string[]>({
|
||||
get() {
|
||||
return photoItemList.value.map(item => item.url);
|
||||
},
|
||||
set(value) {
|
||||
const urlSet = new Set(value);
|
||||
photoItemList.value = photoItemList.value.filter(item => urlSet.has(item.url));
|
||||
}
|
||||
});
|
||||
|
||||
function capturePhoto(): void {
|
||||
recordPhotoInputRef.value?.click();
|
||||
}
|
||||
|
||||
async function handleRecordPhotoSelected(event: Event): Promise<void> {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const fileList = Array.from(input.files || []);
|
||||
if (!fileList.length) {
|
||||
return;
|
||||
}
|
||||
isPhotoUploading.value = true;
|
||||
try {
|
||||
const compressedFileList = await compressUploadImageList(fileList);
|
||||
const tempFileList = await AttachmentAPI.upload(compressedFileList);
|
||||
for (const item of tempFileList) {
|
||||
if (!item.id) {
|
||||
continue;
|
||||
}
|
||||
photoItemList.value.push({
|
||||
tempFileId: item.id,
|
||||
url: AttachmentAPI.getTempReadURL(item.id)
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
isPhotoUploading.value = false;
|
||||
input.value = "";
|
||||
}
|
||||
}
|
||||
const {
|
||||
recordPhotoInputRef,
|
||||
photoItemList,
|
||||
isPhotoUploading,
|
||||
photoList,
|
||||
capturePhoto,
|
||||
handleRecordPhotoSelected,
|
||||
setExistingPhotoList,
|
||||
buildTempFileIdList,
|
||||
buildPhotoAttachmentList
|
||||
} = useEventRecordPhoto();
|
||||
|
||||
// ---------- 登记时间 ----------
|
||||
|
||||
@@ -640,6 +591,28 @@ function parseDateTime(value: string): Date {
|
||||
// ---------- 提交 ----------
|
||||
|
||||
const note = ref("");
|
||||
const {
|
||||
selectedPackageEvent,
|
||||
isPackagePurchaseSelected,
|
||||
selectedPackageConfig,
|
||||
canPriceOverride,
|
||||
saleAmountText,
|
||||
packagePurchaseItemList,
|
||||
handleEventSelectionChange,
|
||||
applySelectedPackageEvent,
|
||||
resetPackagePurchaseForm,
|
||||
submitPackagePurchase,
|
||||
validatePackagePurchaseForm
|
||||
} = usePackagePurchaseRecord({
|
||||
eventList,
|
||||
selectedEventIdList,
|
||||
selectedCustomerIdList,
|
||||
selectedCustomerList,
|
||||
note,
|
||||
hasPermission: permissionCode => userStore.hasPermissions(permissionCode),
|
||||
buildRegisteredAt,
|
||||
buildTempFileIdList
|
||||
});
|
||||
const isSaving = ref(false);
|
||||
const editingRecord = ref<EventRecord>();
|
||||
|
||||
@@ -662,40 +635,58 @@ async function submitRecord(): Promise<void> {
|
||||
return;
|
||||
}
|
||||
|
||||
const customerIdList = selectedCustomerList.value.map(customer => customer.id).filter((item): item is string => !!item);
|
||||
// 后端批量接口仍按选择顺序逐条处理，并为重复临时附件生成副本。
|
||||
await EventRecordAPI.createBatch(selectedEventIdList.value.map(eventId => ({
|
||||
eventId,
|
||||
customerIdList,
|
||||
selectedOptionGroupList: resolveRecordOptionGroupList(eventId),
|
||||
remark: note.value || "客户现场登记",
|
||||
registeredAt: buildRegisteredAt(),
|
||||
pointValue: showSourceValueInput.value ? resolveSourceValue() : undefined,
|
||||
numberValue: resolveNumberValue(eventId),
|
||||
attachmentList: buildTempFileIdList().map(tempFileId => ({
|
||||
tempFileId,
|
||||
attachType: "PHOTO"
|
||||
}))
|
||||
})));
|
||||
selectedCustomerList.value = [];
|
||||
selectedCustomerIdList.value = [];
|
||||
note.value = "";
|
||||
pointValueText.value = "";
|
||||
photoItemList.value = [];
|
||||
for (const eventId of Object.keys(numberValueTextMap)) {
|
||||
delete numberValueTextMap[eventId];
|
||||
}
|
||||
for (const eventId of Object.keys(selectedOptionSelectionMap)) {
|
||||
delete selectedOptionSelectionMap[eventId];
|
||||
const success = isPackagePurchaseSelected.value
|
||||
? await submitPackagePurchase()
|
||||
: await submitEventRecords();
|
||||
if (!success) {
|
||||
return;
|
||||
}
|
||||
resetCreateForm();
|
||||
await loadRecentRecordList();
|
||||
await settingStore.playRegisterSuccessSound();
|
||||
Message.success("登记已提交");
|
||||
Message.success(isPackagePurchaseSelected.value ? "套餐购买已提交" : "登记已提交");
|
||||
await router.replace("/customers");
|
||||
} finally {
|
||||
isSaving.value = false;
|
||||
}
|
||||
}
|
||||
async function submitEventRecords(): Promise<boolean> {
|
||||
const customerIdList = selectedCustomerList.value.map(customer => customer.id).filter((item): item is string => !!item);
|
||||
// 后端批量接口仍按选择顺序逐条处理，并为重复临时附件生成副本。
|
||||
await EventRecordAPI.createBatch(selectedEventIdList.value.map(eventId => ({
|
||||
eventId,
|
||||
customerIdList,
|
||||
selectedOptionGroupList: resolveRecordOptionGroupList(eventId),
|
||||
remark: note.value || "客户现场登记",
|
||||
registeredAt: buildRegisteredAt(),
|
||||
pointValue: showSourceValueInput.value ? resolveSourceValue() : undefined,
|
||||
numberValue: resolveNumberValue(eventId),
|
||||
attachmentList: buildTempFileIdList().map(tempFileId => ({
|
||||
tempFileId,
|
||||
attachType: "PHOTO"
|
||||
}))
|
||||
})));
|
||||
return true;
|
||||
}
|
||||
|
||||
function resetCreateForm(): void {
|
||||
selectedCustomerList.value = [];
|
||||
selectedCustomerIdList.value = [];
|
||||
note.value = "";
|
||||
pointValueText.value = "";
|
||||
photoItemList.value = [];
|
||||
for (const eventId of Object.keys(numberValueTextMap)) {
|
||||
delete numberValueTextMap[eventId];
|
||||
}
|
||||
for (const eventId of Object.keys(selectedOptionSelectionMap)) {
|
||||
delete selectedOptionSelectionMap[eventId];
|
||||
}
|
||||
if (selectedPackageEvent.value) {
|
||||
applySelectedPackageEvent(selectedPackageEvent.value);
|
||||
} else {
|
||||
resetPackagePurchaseForm();
|
||||
}
|
||||
}
|
||||
|
||||
function validateForm(): boolean {
|
||||
if (!selectedCustomerList.value.some(item => !!item.id)) {
|
||||
@@ -706,9 +697,8 @@ function validateForm(): boolean {
|
||||
Message.warning("请至少选择一个登记事件");
|
||||
return false;
|
||||
}
|
||||
if (selectedEventIdList.value.some(eventId => isPackagePurchaseEvent(eventList.value.find(item => item.id === eventId)))) {
|
||||
Message.warning("套餐购买事件必须通过客户套餐购买页面登记");
|
||||
return false;
|
||||
if (isPackagePurchaseSelected.value) {
|
||||
return validatePackagePurchaseForm() && validateRequiredPhotoList();
|
||||
}
|
||||
for (const eventId of selectedEventIdList.value) {
|
||||
const event = eventList.value.find(item => item.id === eventId);
|
||||
@@ -738,7 +728,6 @@ function validateForm(): boolean {
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function validateRequiredPhotoList(): boolean {
|
||||
const event = selectedRequiredPhotoEventList.value[0];
|
||||
if (event && !hasPhotoAttachment(photoItemList.value)) {
|
||||
@@ -766,27 +755,6 @@ async function updateRecord(): Promise<void> {
|
||||
Message.success("记录已保存");
|
||||
await router.replace(`/management/registration-event-records/${editingRecord.value.id}`);
|
||||
}
|
||||
|
||||
function buildTempFileIdList(): string[] {
|
||||
return photoItemList.value.map(item => item.tempFileId).filter((item): item is string => !!item);
|
||||
}
|
||||
|
||||
function buildPhotoAttachmentList(): Array<Partial<Attachment>> {
|
||||
return photoItemList.value.map((item) => {
|
||||
if (item.attachment) {
|
||||
return {
|
||||
...item.attachment,
|
||||
attachType: item.attachType || item.attachment.attachType || "PHOTO"
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
tempFileId: item.tempFileId,
|
||||
attachType: item.attachType || "PHOTO"
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- 页面数据 ----------
|
||||
|
||||
async function loadPageData(): Promise<void> {
|
||||
@@ -822,14 +790,7 @@ async function loadRecordForEdit(): Promise<void> {
|
||||
registeredAtText.value = record.registeredAt ? Time.formatDateTime(new Date(record.registeredAt)) : "";
|
||||
note.value = record.remark || "";
|
||||
pointValueText.value = "";
|
||||
photoItemList.value = (record.attachmentList || [])
|
||||
.filter(item => item.attachType === "PHOTO" || !item.attachType)
|
||||
.filter(item => !!item.id)
|
||||
.map(item => ({
|
||||
attachment: item,
|
||||
previewUrl: getAttachmentReadURL(item.id || ""),
|
||||
url: getAttachmentReadURL(item.id || "", 90)
|
||||
}));
|
||||
setExistingPhotoList(record.attachmentList);
|
||||
await loadRecentRecordList();
|
||||
}
|
||||
|
||||
|
||||
@@ -85,8 +85,8 @@
|
||||
@updated="reloadRecords"
|
||||
/>
|
||||
</t-cell-group>
|
||||
<div v-else class="load-state" v-text="isLoading ? '正在加载登记事件记录' : '暂无登记事件记录'" />
|
||||
<div v-if="pageResult.list.length" class="load-state" v-text="loadStateText" />
|
||||
<div v-else class="center-tips" v-text="isLoading ? '正在加载登记事件记录' : '暂无登记事件记录'" />
|
||||
<div v-if="pageResult.list.length" class="center-tips" v-text="loadStateText" />
|
||||
</div>
|
||||
</t-pull-down-refresh>
|
||||
</div>
|
||||
@@ -802,7 +802,7 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.empty-block,
|
||||
.load-state,
|
||||
.center-tips,
|
||||
.summary {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
@@ -98,8 +98,8 @@
|
||||
</template>
|
||||
</customer-cell>
|
||||
</t-cell-group>
|
||||
<div v-else class="load-state" v-text="emptyStateText" />
|
||||
<div v-if="pageResult.list.length" class="load-state" v-text="loadStateText" />
|
||||
<div v-else class="center-tips" v-text="emptyStateText" />
|
||||
<div v-if="pageResult.list.length" class="center-tips" v-text="loadStateText" />
|
||||
</t-pull-down-refresh>
|
||||
</div>
|
||||
<t-popup v-model="startVisible" placement="bottom">
|
||||
|
||||
@@ -140,7 +140,7 @@
|
||||
</t-collapse-panel>
|
||||
</vue-draggable-next>
|
||||
</t-collapse>
|
||||
<div v-else class="load-state">暂未配置登记选项，点击上方按钮新增。</div>
|
||||
<div v-else class="center-tips">暂未配置登记选项，点击上方按钮新增。</div>
|
||||
</div>
|
||||
</bottom-popup>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<section class="package-purchase-form">
|
||||
<div v-if="props.packageConfig" class="config-summary">
|
||||
<div class="header">
|
||||
<div class="text-bold" v-text="props.packageConfig.name || '未命名套餐'" />
|
||||
<div class="price">
|
||||
<span class="label gray">标准价：</span>
|
||||
<span class="value red text-bold" v-text="formatPackageAmount(props.packageConfig.standardAmount)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="description" v-text="props.packageConfig.description" />
|
||||
</div>
|
||||
<div v-else class="center-tips" v-text="'当前购买事件未返回绑定套餐，无法完成购买。'" />
|
||||
<t-form-item label="成交价（元）" label-width="6rem" required-mark>
|
||||
<t-input
|
||||
v-model.trim="saleAmount"
|
||||
type="number"
|
||||
align="right"
|
||||
borderless
|
||||
:readonly="!props.canPriceOverride"
|
||||
placeholder="请输入成交价"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item label-width="0">
|
||||
<div class="items">
|
||||
<div class="title">
|
||||
<strong>购买权益明细</strong>
|
||||
<span v-if="!props.canPriceOverride">当前账号无定制权限，明细不可修改</span>
|
||||
</div>
|
||||
<t-form-item
|
||||
v-for="(item, index) in itemList"
|
||||
:key="`${index}-${item.productName}-${item.unit}`"
|
||||
class="item"
|
||||
:label="item.productName"
|
||||
>
|
||||
<t-input
|
||||
:model-value="item.totalQuantity"
|
||||
type="number"
|
||||
:readonly="!props.canPriceOverride"
|
||||
placeholder="总权益数量"
|
||||
borderless
|
||||
align="right"
|
||||
@update:model-value="updateItemQuantity(index, $event)"
|
||||
>
|
||||
<template #suffix-icon>
|
||||
<span class="unit" v-text="item.unit" />
|
||||
</template>
|
||||
</t-input>
|
||||
</t-form-item>
|
||||
<div v-if="!itemList.length" class="center-tips" v-text="'当前套餐暂无权益明细'" />
|
||||
</div>
|
||||
</t-form-item>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { GaoPackageConfig, PackagePurchaseItem } from "@/types/Package";
|
||||
import { formatPackageAmount } from "@/utils/package";
|
||||
|
||||
defineOptions({ name: "PackagePurchaseForm" });
|
||||
|
||||
interface Props {
|
||||
packageConfig?: GaoPackageConfig;
|
||||
canPriceOverride: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const saleAmount = defineModel<string>("saleAmount", { required: true });
|
||||
const itemList = defineModel<PackagePurchaseItem[]>("itemList", { required: true });
|
||||
|
||||
function updateItemQuantity(index: number, value: string | number): void {
|
||||
itemList.value = itemList.value.map((item, itemIndex) => itemIndex === index ? {
|
||||
...item,
|
||||
totalQuantity: String(value)
|
||||
} : item);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.package-purchase-form {
|
||||
gap: .75rem;
|
||||
display: grid;
|
||||
margin-top: 1rem;
|
||||
|
||||
.config-summary {
|
||||
gap: .25rem;
|
||||
margin: 0 1rem;
|
||||
padding: .5rem .75rem;
|
||||
display: flex;
|
||||
background: var(--td-error-color-1);
|
||||
border-radius: .75rem;
|
||||
flex-direction: column;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
.label {
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 1.75rem;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.items {
|
||||
gap: .5rem;
|
||||
display: grid;
|
||||
|
||||
.title {
|
||||
font-size: .8125rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.item {
|
||||
border-radius: 1rem;
|
||||
box-shadow: .25rem .25rem 1rem rgba(0, 0, 0, .08);
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,92 @@
|
||||
import { computed, ref } from "vue";
|
||||
import { AttachmentAPI, type Attachment } from "timi-web-api";
|
||||
import type { PhotoItem } from "@/types/Photo";
|
||||
import { getAttachmentReadURL } from "@/utils/attachment";
|
||||
import { compressUploadImageList } from "@/utils/imageCompression";
|
||||
|
||||
export function useEventRecordPhoto() {
|
||||
const recordPhotoInputRef = ref<HTMLInputElement>();
|
||||
const photoItemList = ref<PhotoItem[]>([]);
|
||||
const isPhotoUploading = ref(false);
|
||||
const photoList = computed<string[]>({
|
||||
get() {
|
||||
return photoItemList.value.map(item => item.url);
|
||||
},
|
||||
set(value) {
|
||||
const urlSet = new Set(value);
|
||||
photoItemList.value = photoItemList.value.filter(item => urlSet.has(item.url));
|
||||
}
|
||||
});
|
||||
|
||||
function capturePhoto(): void {
|
||||
recordPhotoInputRef.value?.click();
|
||||
}
|
||||
|
||||
async function handleRecordPhotoSelected(event: Event): Promise<void> {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const fileList = Array.from(input.files || []);
|
||||
if (!fileList.length) {
|
||||
return;
|
||||
}
|
||||
isPhotoUploading.value = true;
|
||||
try {
|
||||
const compressedFileList = await compressUploadImageList(fileList);
|
||||
const tempFileList = await AttachmentAPI.upload(compressedFileList);
|
||||
for (const item of tempFileList) {
|
||||
if (!item.id) {
|
||||
continue;
|
||||
}
|
||||
photoItemList.value.push({
|
||||
tempFileId: item.id,
|
||||
url: AttachmentAPI.getTempReadURL(item.id)
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
isPhotoUploading.value = false;
|
||||
input.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
function setExistingPhotoList(attachmentList?: Attachment[]): void {
|
||||
photoItemList.value = (attachmentList || [])
|
||||
.filter(item => item.attachType === "PHOTO" || !item.attachType)
|
||||
.filter(item => !!item.id)
|
||||
.map(item => ({
|
||||
attachment: item,
|
||||
previewUrl: getAttachmentReadURL(item.id || ""),
|
||||
url: getAttachmentReadURL(item.id || "", 90)
|
||||
}));
|
||||
}
|
||||
|
||||
function buildTempFileIdList(): string[] {
|
||||
return photoItemList.value.map(item => item.tempFileId).filter((item): item is string => !!item);
|
||||
}
|
||||
|
||||
function buildPhotoAttachmentList(): Array<Partial<Attachment>> {
|
||||
return photoItemList.value.map((item) => {
|
||||
if (item.attachment) {
|
||||
return {
|
||||
...item.attachment,
|
||||
attachType: item.attachType || item.attachment.attachType || "PHOTO"
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
tempFileId: item.tempFileId,
|
||||
attachType: item.attachType || "PHOTO"
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
recordPhotoInputRef,
|
||||
photoItemList,
|
||||
isPhotoUploading,
|
||||
photoList,
|
||||
capturePhoto,
|
||||
handleRecordPhotoSelected,
|
||||
setExistingPhotoList,
|
||||
buildTempFileIdList,
|
||||
buildPhotoAttachmentList
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
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 { isPackagePurchaseEvent } from "@/utils/event";
|
||||
import { createPackageRequestNo, formatPackageAmountInput, normalizePackageQuantity, parsePackageAmount } from "@/utils/package";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
import { Message } from "@/utils/message";
|
||||
|
||||
interface UsePackagePurchaseRecordOptions {
|
||||
eventList: Ref<EventItem[]>;
|
||||
selectedEventIdList: Ref<string[]>;
|
||||
selectedCustomerIdList: Ref<string[]>;
|
||||
selectedCustomerList: Ref<Customer[]>;
|
||||
note: Ref<string>;
|
||||
hasPermission: (permissionCode: string) => boolean;
|
||||
buildRegisteredAt: () => number;
|
||||
buildTempFileIdList: () => string[];
|
||||
}
|
||||
|
||||
export function usePackagePurchaseRecord(options: UsePackagePurchaseRecordOptions) {
|
||||
const selectedPackageEvent = computed(() => options.selectedEventIdList.value
|
||||
.map(eventId => options.eventList.value.find(item => item.id === eventId))
|
||||
.find((item): item is EventItem => !!item && isPackagePurchaseEvent(item)));
|
||||
const isPackagePurchaseSelected = computed(() => !!selectedPackageEvent.value);
|
||||
const selectedPackageConfig = computed(() => selectedPackageEvent.value?.packageConfig);
|
||||
const isSelectedPackageConfigSaleable = computed(() => {
|
||||
const config = selectedPackageConfig.value;
|
||||
if (!config || config.status !== "ACTIVE") {
|
||||
return false;
|
||||
}
|
||||
const now = Date.now();
|
||||
return (config.beginAt === undefined || config.beginAt === null || config.beginAt <= now)
|
||||
&& (config.endAt === undefined || config.endAt === null || now <= config.endAt);
|
||||
});
|
||||
const canPriceOverride = computed(() => options.hasPermission(permissionCodes.customerPackage.priceOverride));
|
||||
const saleAmountText = ref("");
|
||||
const packagePurchaseItemList = ref<PackagePurchaseItem[]>([]);
|
||||
|
||||
function handleEventSelectionChange(eventIdList: string[]): void {
|
||||
const packageEvent = eventIdList
|
||||
.map(eventId => options.eventList.value.find(item => item.id === eventId))
|
||||
.find(item => isPackagePurchaseEvent(item));
|
||||
if (packageEvent?.id) {
|
||||
if (!options.hasPermission(permissionCodes.customerPackage.create)) {
|
||||
Message.warning("当前账号没有套餐购买权限");
|
||||
return;
|
||||
}
|
||||
options.selectedEventIdList.value = [packageEvent.id];
|
||||
keepSingleCustomer();
|
||||
applySelectedPackageEvent(packageEvent);
|
||||
return;
|
||||
}
|
||||
options.selectedEventIdList.value = eventIdList;
|
||||
resetPackagePurchaseForm();
|
||||
}
|
||||
|
||||
function applySelectedPackageEvent(event: EventItem): void {
|
||||
const config = event.packageConfig;
|
||||
if (!config) {
|
||||
resetPackagePurchaseForm();
|
||||
return;
|
||||
}
|
||||
|
||||
saleAmountText.value = formatPackageAmountInput(config.standardAmount);
|
||||
packagePurchaseItemList.value = (config.itemList || []).map((item, index) => ({
|
||||
productName: item.productName,
|
||||
unit: item.unit,
|
||||
totalQuantity: normalizePackageQuantity(item.defaultQuantity) || "",
|
||||
sort: item.sort ?? index,
|
||||
remark: item.remark ?? null
|
||||
}));
|
||||
}
|
||||
|
||||
function resetPackagePurchaseForm(): void {
|
||||
saleAmountText.value = "";
|
||||
packagePurchaseItemList.value = [];
|
||||
}
|
||||
|
||||
async function submitPackagePurchase(): Promise<boolean> {
|
||||
const eventId = selectedPackageEvent.value?.id;
|
||||
const customerId = options.selectedCustomerList.value[0]?.id;
|
||||
const saleAmount = parsePackageAmount(saleAmountText.value);
|
||||
if (!eventId || !customerId || saleAmount === undefined) {
|
||||
return false;
|
||||
}
|
||||
|
||||
await PackageAPI.purchase({
|
||||
requestNo: createPackageRequestNo(),
|
||||
eventId,
|
||||
customerId,
|
||||
saleAmount,
|
||||
purchasedAt: options.buildRegisteredAt(),
|
||||
itemList: packagePurchaseItemList.value.map((item, index) => ({
|
||||
productName: item.productName.trim(),
|
||||
unit: item.unit.trim(),
|
||||
totalQuantity: normalizePackageQuantity(item.totalQuantity)!,
|
||||
sort: item.sort ?? index,
|
||||
remark: item.remark ?? null
|
||||
})),
|
||||
attachmentList: options.buildTempFileIdList().map(tempFileId => ({
|
||||
tempFileId,
|
||||
attachType: "PHOTO"
|
||||
})),
|
||||
remark: options.note.value.trim() || null
|
||||
});
|
||||
return true;
|
||||
}
|
||||
|
||||
function validatePackagePurchaseForm(): boolean {
|
||||
if (!options.hasPermission(permissionCodes.customerPackage.create)) {
|
||||
Message.warning("当前账号没有套餐购买权限");
|
||||
return false;
|
||||
}
|
||||
if (options.selectedCustomerList.value.length < 1 || 1 < options.selectedCustomerList.value.length || !options.selectedCustomerList.value[0]?.id) {
|
||||
Message.warning("套餐购买只能选择一个客户");
|
||||
return false;
|
||||
}
|
||||
if (!selectedPackageConfig.value) {
|
||||
Message.warning("当前购买事件未绑定有效套餐配置");
|
||||
return false;
|
||||
}
|
||||
if (!isSelectedPackageConfigSaleable.value) {
|
||||
Message.warning("事件绑定的套餐当前不可购买，请检查套餐状态和有效期");
|
||||
return false;
|
||||
}
|
||||
if (parsePackageAmount(saleAmountText.value) === undefined) {
|
||||
Message.warning("成交价必须是合法的元金额，最多两位小数");
|
||||
return false;
|
||||
}
|
||||
if (!packagePurchaseItemList.value.length) {
|
||||
Message.warning("购买权益至少需要一项");
|
||||
return false;
|
||||
}
|
||||
for (const item of packagePurchaseItemList.value) {
|
||||
const quantity = normalizePackageQuantity(item.totalQuantity);
|
||||
if (!item.productName.trim() || !item.unit.trim() || !quantity || quantity === "0") {
|
||||
Message.warning("产品名称、单位和正数量不能为空");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function keepSingleCustomer(): void {
|
||||
const customer = options.selectedCustomerList.value[0];
|
||||
options.selectedCustomerList.value = customer ? [customer] : [];
|
||||
options.selectedCustomerIdList.value = customer?.id ? [customer.id] : [];
|
||||
}
|
||||
|
||||
return {
|
||||
selectedPackageEvent,
|
||||
isPackagePurchaseSelected,
|
||||
selectedPackageConfig,
|
||||
canPriceOverride,
|
||||
saleAmountText,
|
||||
packagePurchaseItemList,
|
||||
handleEventSelectionChange,
|
||||
applySelectedPackageEvent,
|
||||
resetPackagePurchaseForm,
|
||||
submitPackagePurchase,
|
||||
validatePackagePurchaseForm
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user