fix SalesOrderPayment.vue style

src/components/PackagePhotoField.vue

@@ -1,89 +0,0 @@
-<template>
-	<div class="package-photo-field">
-		<photo-scroller
-			v-model="photoUrlList"
-			v-model:photo-items="photoItems"
-			:title="title"
-			:required="required"
-			:loading="isUploading"
-			:edit-mode="true"
-			@add="openFilePicker"
-		/>
-		<input ref="fileInput" class="file-input" type="file" accept="image/*" multiple @change="handleFileChange" />
-	</div>
-</template>
-
-<script setup lang="ts">
-import { AttachmentAPI } from "timi-web-api";
-import PhotoScroller from "@/components/PhotoScroller.vue";
-import type { PhotoItem } from "@/types/Photo";
-import { compressUploadImageList } from "@/utils/imageCompression";
-import { Message } from "@/utils/message";
-
-interface Props {
-	required?: boolean;
-	title?: string;
-}
-
-withDefaults(defineProps<Props>(), {
-	required: false,
-	title: "业务照片"
-});
-
-defineOptions({
-	name: "PackagePhotoField"
-});
-
-const photoItems = defineModel<PhotoItem[]>({ required: true });
-const fileInput = ref<HTMLInputElement>();
-const isUploading = ref(false);
-const photoUrlList = computed<string[]>({
-	get: () => photoItems.value.map(item => item.url),
-	set: value => {
-		const urlSet = new Set(value);
-		photoItems.value = photoItems.value.filter(item => urlSet.has(item.url));
-	}
-});
-
-function openFilePicker(): void {
-	fileInput.value?.click();
-}
-
-async function handleFileChange(event: Event): Promise<void> {
-	const input = event.target as HTMLInputElement;
-	const fileList = Array.from(input.files || []);
-	if (!fileList.length) {
-		return;
-	}
-
-	isUploading.value = true;
-	try {
-		const tempFileList = await AttachmentAPI.upload(await compressUploadImageList(fileList));
-		for (const tempFile of tempFileList) {
-			if (!tempFile.id) {
-				continue;
-			}
-			photoItems.value.push({
-				tempFileId: tempFile.id,
-				attachType: "PHOTO",
-				url: AttachmentAPI.getTempReadURL(tempFile.id)
-			});
-		}
-	} catch {
-		Message.error("照片上传失败");
-	} finally {
-		isUploading.value = false;
-		input.value = "";
-	}
-}
-</script>
-
-<style scoped lang="less">
-.package-photo-field {
-	width: 100%;
-
-	.file-input {
-		display: none;
-	}
-}
-</style>

src/components/PhotoScroller.vue

@@ -44,8 +44,8 @@
 					theme="primary"
 					variant="dashed"
 					class="add"
-					:loading="loading"
-					:disabled="loading"
+					:loading="isBusy"
+					:disabled="isBusy"
 					@click="handleAddAction(addActionList[0])"
 				>
 					<span v-text="addActionList[0].text" />
@@ -60,8 +60,8 @@
 						class="add"
 						theme="primary"
 						variant="dashed"
-						:loading="loading"
-						:disabled="loading"
+						:loading="isBusy"
+						:disabled="isBusy"
 					>
 						<span v-text="addText" />
 					</t-button>
@@ -73,7 +73,7 @@
 								variant="text"
 								:theme="action.theme"
 								class="add-action"
-								:disabled="loading"
+								:disabled="isBusy"
 								@click="handleAddAction(action)"
 							>
 								<template #icon v-if="action.icon">
@@ -86,6 +86,15 @@
 				</t-popover>
 			</div>
 		</div>
+		<input
+			v-if="props.upload"
+			ref="fileInput"
+			class="file-input"
+			type="file"
+			accept="image/*"
+			multiple
+			@change="handleFileChange"
+		/>
 	</div>
 	<t-image-viewer
 		v-model:visible="photoViewerVisible"
@@ -163,6 +172,7 @@ interface Props {
 	modelValue: string[];
 	photoItems?: readonly PhotoItem[];
 	required?: boolean;
+	upload?: (fileList: File[]) => Promise<PhotoItem[]>;
 	showViewerActions?: boolean;
 	showAdd?: boolean;
 	showRemove?: boolean;
@@ -217,12 +227,15 @@ const photoViewerItems = ref<ViewerPhotoItem[]>([]);
 const photoViewerIndex = ref(0);
 const photoActionVisible = ref(false);
 const isSubmitting = ref(false);
+const isUploading = ref(false);
 const addPopoverVisible = ref(false);
+const fileInput = ref<HTMLInputElement>();
 const addActionList = computed<readonly AddAction[]>(() => props.addActions.length ? props.addActions : [{
 	emit: "add",
 	text: props.addText,
 	theme: "default"
 }]);
+const isBusy = computed(() => props.loading || isSubmitting.value || isUploading.value);
 const displayPhotoList = computed<PhotoItem[]>(() => {
 	if (props.photoItems?.length) {
 		return props.photoItems.map(normalizePhotoItem);
@@ -250,9 +263,37 @@ function handleAddAction(action?: AddAction): void {
 		return;
 	}
 	addPopoverVisible.value = false;
+	if (action.emit === "add" && props.upload) {
+		fileInput.value?.click();
+		return;
+	}
 	emit(action.emit);
 }
 
+async function handleFileChange(event: Event): Promise<void> {
+	const input = event.target as HTMLInputElement;
+	const fileList = Array.from(input.files || []);
+	if (!fileList.length || !props.upload) {
+		return;
+	}
+
+	isUploading.value = true;
+	try {
+		const uploadedPhotoItems = await props.upload(fileList);
+		if (!uploadedPhotoItems.length) {
+			return;
+		}
+		const nextPhotoItems = [...displayPhotoList.value, ...uploadedPhotoItems];
+		emit("update:photoItems", nextPhotoItems);
+		emit("update:modelValue", nextPhotoItems.map(item => item.url));
+	} catch {
+		Message.error("照片上传失败");
+	} finally {
+		isUploading.value = false;
+		input.value = "";
+	}
+}
+
 async function removePhoto(index: number): Promise<void> {
 	if (index < 0 || displayPhotoList.value.length <= index) {
 		return;
@@ -341,6 +382,10 @@ function normalizePhotoItem(item: PhotoItem): PhotoItem {
 	width: 100%;
 	display: grid;
 
+	.file-input {
+		display: none;
+	}
+
 	.photo-shell {
 		display: grid;
 		gap: .75rem;