fix SalesOrderPayment.vue 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;