From 78269419468603a3446c4795324c31536c229488 Mon Sep 17 00:00:00 2001
From: weiwei <ctw@example.com>
Date: Thu, 27 Feb 2025 11:14:17 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=A4=9A=E5=9B=BE?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Upload/Image.vue               | 150 ++++-----
 src/components/Upload/Images.vue              | 285 ++++++++----------
 src/views/canteen/canteenSpu/form.vue         |  25 +-
 src/views/canteen/merchantInfo/form.vue       | 116 +++----
 .../hard/hard-order/admin-refund-dialog.vue   |  16 +-
 src/views/supermarket/smSpu/form.vue          |   6 +-
 .../supermarketerp/supermarketSpu/form.vue    |   2 +-
 src/views/wallet/mch-manage/form.vue          |   2 +-
 8 files changed, 271 insertions(+), 331 deletions(-)

diff --git a/src/components/Upload/Image.vue b/src/components/Upload/Image.vue
index 5388b76..cff4f83 100644
--- a/src/components/Upload/Image.vue
+++ b/src/components/Upload/Image.vue
@@ -20,15 +20,15 @@
 				<div class="upload-handle" @click.stop>
 					<div class="handle-icon" @click="editImg" v-if="!self_disabled">
 						<el-icon :size="props.iconSize"><Edit /></el-icon>
-						<span v-if="!props.iconSize">{{ $t('common.editBtn') }}</span>
+						<span v-if="!props.iconSize">{{ $t("common.editBtn") }}</span>
 					</div>
 					<div class="handle-icon" @click="imgViewVisible = true">
 						<el-icon :size="props.iconSize"><ZoomIn /></el-icon>
-						<span v-if="!props.iconSize">{{ $t('common.viewBtn') }}</span>
+						<span v-if="!props.iconSize">{{ $t("common.viewBtn") }}</span>
 					</div>
 					<div class="handle-icon" @click="deleteImg" v-if="!self_disabled">
 						<el-icon :size="props.iconSize"><Delete /></el-icon>
-						<span v-if="!props.iconSize">{{ $t('common.delBtn') }}</span>
+						<span v-if="!props.iconSize">{{ $t("common.delBtn") }}</span>
 					</div>
 				</div>
 			</template>
@@ -54,145 +54,145 @@
 </template>
 
 <script setup lang="ts" name="UploadImg">
-import { ref, computed, inject } from 'vue';
-import { ElNotification, formContextKey, formItemContextKey } from 'element-plus';
-import type { UploadProps, UploadRequestOptions } from 'element-plus';
-import { generateUUID } from '/@/utils/other';
-import request from '/@/utils/request';
+import { ref, computed, inject } from "vue"
+import { ElNotification, formContextKey, formItemContextKey } from "element-plus"
+import type { UploadProps, UploadRequestOptions } from "element-plus"
+import { generateUUID } from "/@/utils/other"
+import request from "/@/utils/request"
 
 interface UploadFileProps {
-	imageUrl?: string; // 图片地址 ==> 必传
-	uploadFileUrl?: string; // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里直接引入即可 ==> 非必传
-	drag?: boolean; // 是否支持拖拽上传 ==> 非必传（默认为 true）
-	disabled?: boolean; // 是否禁用上传组件 ==> 非必传（默认为 false）
-	fileSize?: number; // 图片大小限制 ==> 非必传（默认为 5M）
-	fileType?: File.ImageMimeType[]; // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
-	height?: string; // 组件高度 ==> 非必传（默认为 150px）
-	width?: string; // 组件宽度 ==> 非必传（默认为 150px）
-	borderRadius?: string; // 组件边框圆角 ==> 非必传（默认为 8px）
-	iconSize?: number;
-	dir?: string; // 文件目录
-	listType?: string;
+	imageUrl?: string // 图片地址 ==> 必传
+	uploadFileUrl?: string // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里直接引入即可 ==> 非必传
+	drag?: boolean // 是否支持拖拽上传 ==> 非必传（默认为 true）
+	disabled?: boolean // 是否禁用上传组件 ==> 非必传（默认为 false）
+	fileSize?: number // 图片大小限制 ==> 非必传（默认为 5M）
+	fileType?: File.ImageMimeType[] // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
+	height?: string // 组件高度 ==> 非必传（默认为 150px）
+	width?: string // 组件宽度 ==> 非必传（默认为 150px）
+	borderRadius?: string // 组件边框圆角 ==> 非必传（默认为 8px）
+	iconSize?: number
+	dir?: string // 文件目录
+	listType?: string
 }
 
 // 接受父组件参数
 const props = withDefaults(defineProps<UploadFileProps>(), {
-	imageUrl: '',
-	uploadFileUrl: '/admin/sys-file/upload',
+	imageUrl: "",
+	uploadFileUrl: "/admin/sys-file/upload",
 	drag: true,
 	disabled: false,
 	fileSize: 5,
-	fileType: () => ['image/jpeg', 'image/png', 'image/gif'],
-	height: '150px',
-	width: '150px',
-	borderRadius: '8px',
-	dir: '',
-	listType: '',
-});
+	fileType: () => ["image/jpeg", "image/png", "image/gif"],
+	height: "150px",
+	width: "150px",
+	borderRadius: "8px",
+	dir: "",
+	listType: "",
+})
 
 // 生成组件唯一id
-const uuid = ref('id-' + generateUUID());
+const uuid = ref("id-" + generateUUID())
 
 // 查看图片
-const imgViewVisible = ref(false);
+const imgViewVisible = ref(false)
 // 获取 el-form 组件上下文
-const formContext = inject(formContextKey, void 0);
+const formContext = inject(formContextKey, void 0)
 // 获取 el-form-item 组件上下文
-const formItemContext = inject(formItemContextKey, void 0);
+const formItemContext = inject(formItemContextKey, void 0)
 // 判断是否禁用上传和删除
 const self_disabled = computed(() => {
-	return props.disabled || formContext?.disabled;
-});
+	return props.disabled || formContext?.disabled
+})
 
 /**
  * @description 图片上传
  * @param options upload 所有配置项
  * */
 interface UploadEmits {
-	(e: 'update:imageUrl', value: string): void;
+	(e: "update:imageUrl", value: string): void
 }
-const emit = defineEmits<UploadEmits>();
+const emit = defineEmits<UploadEmits>()
 const handleHttpUpload = async (options: UploadRequestOptions) => {
-	let formData = new FormData();
-	formData.append('file', options.file);
-	formData.append('dir', props.dir);
+	let formData = new FormData()
+	formData.append("file", options.file)
+	formData.append("dir", props.dir)
 	try {
 		const { data } = await request({
 			url: props.uploadFileUrl,
-			method: 'post',
+			method: "post",
 			headers: {
-				'Content-Type': 'multipart/form-data',
+				"Content-Type": "multipart/form-data",
 			},
 			data: formData,
-		});
-		emit('update:imageUrl', data.url);
+		})
+		emit("update:imageUrl", data.url)
 		// 调用 el-form 内部的校验方法（可自动校验）
-		formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);
+		formItemContext?.prop && formContext?.validateField([formItemContext.prop as string])
 	} catch (error) {
-		options.onError(error as any);
+		options.onError(error as any)
 	}
-};
+}
 
 /**
  * @description 删除图片
  * */
 const deleteImg = () => {
-	emit('update:imageUrl', '');
-};
+	emit("update:imageUrl", "")
+}
 
 /**
  * @description 编辑图片
  * */
 const editImg = () => {
-	const dom = document.querySelector(`#${uuid.value} .el-upload__input`);
-	dom && dom.dispatchEvent(new MouseEvent('click'));
-};
+	const dom = document.querySelector(`#${uuid.value} .el-upload__input`)
+	dom && dom.dispatchEvent(new MouseEvent("click"))
+}
 
 /**
  * @description 文件上传之前判断
  * @param rawFile 选择的文件
  * */
-const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
-	const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
-	const imgType = props.fileType.includes(rawFile.type as File.ImageMimeType);
+const beforeUpload: UploadProps["beforeUpload"] = (rawFile) => {
+	const imgSize = rawFile.size / 1024 / 1024 < props.fileSize
+	const imgType = props.fileType.includes(rawFile.type)
 	if (!imgType)
 		ElNotification({
-			title: '温馨提示',
-			message: '上传图片不符合所需的格式！',
-			type: 'warning',
-		});
+			title: "温馨提示",
+			message: "上传图片不符合所需的格式！",
+			type: "warning",
+		})
 	if (!imgSize)
 		setTimeout(() => {
 			ElNotification({
-				title: '温馨提示',
+				title: "温馨提示",
 				message: `上传图片大小不能超过 ${props.fileSize}M！`,
-				type: 'warning',
-			});
-		}, 0);
-	return imgType && imgSize;
-};
+				type: "warning",
+			})
+		}, 0)
+	return imgType && imgSize
+}
 
 /**
  * @description 图片上传成功
  * */
 const uploadSuccess = () => {
 	ElNotification({
-		title: '温馨提示',
-		message: '图片上传成功！',
-		type: 'success',
-	});
-};
+		title: "温馨提示",
+		message: "图片上传成功！",
+		type: "success",
+	})
+}
 
 /**
  * @description 图片上传错误
  * */
 const uploadError = () => {
 	ElNotification({
-		title: '温馨提示',
-		message: '图片上传失败，请您重新上传！',
-		type: 'error',
-	});
-};
+		title: "温馨提示",
+		message: "图片上传失败，请您重新上传！",
+		type: "error",
+	})
+}
 </script>
 <style scoped lang="scss">
 .is-error {
diff --git a/src/components/Upload/Images.vue b/src/components/Upload/Images.vue
index 1aae577..2eef8b2 100644
--- a/src/components/Upload/Images.vue
+++ b/src/components/Upload/Images.vue
@@ -1,169 +1,186 @@
 <template>
 	<div class="upload-box">
 		<el-upload
-			ref="elUploadRef"
+			v-model:file-list="fileList"
 			list-type="picture-card"
-			:class="['upload', self_disabled ? 'disabled' : '', drag ? 'no-border' : '']"
+			multiple
+			:accept="fileType.join(',')"
+			:class="['upload', 'no-border', self_disabled ? 'disabled' : '']"
+			:drag="true"
+			:disabled="self_disabled"
+			:before-upload="beforeUpload"
 			:on-preview="handlePictureCardPreview"
+			:on-error="uploadError"
 			:on-remove="handleRemove"
 			:on-success="uploadSuccess"
-			:before-upload="beforeUpload"
-			:on-error="uploadError"
 			:http-request="handleHttpUpload"
-			multiple
-			:drag="drag"
-			:disabled="self_disabled"
-			:accept="fileType.join(',')"
 		>
-			<div class="upload-empty">
-				<slot name="empty">
-					<el-icon><Plus /></el-icon>
-					<!-- <span>请上传图片</span> -->
-				</slot>
-			</div>
+			<el-icon><Plus /></el-icon>
 		</el-upload>
-		<div class="el-upload__tip">
-			<slot name="tip"></slot>
-		</div>
+
 		<el-dialog v-model="dialogVisible">
-			<img w-full :src="dialogImageUrl" alt="Preview Image" />
+			<img class="m-auto" w-full :src="dialogImageUrl" alt="Preview Image" />
 		</el-dialog>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
-import { ElUpload, ElDialog, UploadRequestOptions, ElNotification, UploadFile, UploadProps, formContextKey } from 'element-plus';
-import request from '/@/utils/request';
+import { ref, watch } from "vue"
+import { Plus } from "@element-plus/icons-vue"
+import { ElUpload, ElDialog, UploadRequestOptions, ElNotification, UploadFile, UploadProps, formContextKey } from "element-plus"
+import request from "/@/utils/request"
 
 interface UploadFileProps {
-	imageUrls?: string; // 图片地址 ==> 必传
-	uploadFileUrl?: string; // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里直接引入即可 ==> 非必传
-	drag?: boolean; // 是否支持拖拽上传 ==> 非必传（默认为 true）
-	disabled?: boolean; // 是否禁用上传组件 ==> 非必传（默认为 false）
-	fileSize?: number; // 图片大小限制 ==> 非必传（默认为 5M）
-	fileType?: string[]; // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
-	height?: string; // 组件高度 ==> 非必传（默认为 150px）
-	width?: string; // 组件宽度 ==> 非必传（默认为 150px）
-	borderRadius?: string; // 组件边框圆角 ==> 非必传（默认为 8px）
+	disabled?: boolean
+	fileType?: string[]
+	fileSize?: number
+	height?: string
+	width?: string
+	borderRadius?: string
 }
 const props = withDefaults(defineProps<UploadFileProps>(), {
-	imageUrls: '',
-	uploadFileUrl: '/admin/sys-file/upload',
-	drag: true,
 	disabled: false,
+	fileType: () => ["image/jpeg", "image/png", "image/gif"],
 	fileSize: 5,
-	fileType: () => ['image/jpeg', 'image/png', 'image/gif'],
-	height: '150px',
-	width: '150px',
-	borderRadius: '8px',
-});
+	height: "150px",
+	width: "150px",
+	borderRadius: "8px",
+})
 
-interface UploadEmits {
-	(e: 'update:imageUrls', value: string): void;
-}
-const emit = defineEmits<UploadEmits>();
+const imageUrls = defineModel<string>()
 
-const dialogImageUrl = ref('');
-const dialogVisible = ref(false);
-const elUploadRef = ref();
+const imageBaseUrl = import.meta.env.VITE_IMAGE_BASE_PATH
+const dialogVisible = ref(false)
+const fileList = ref<any>([])
+const dialogImageUrl = ref("")
 // 获取 el-form 组件上下文
-const formContext = inject(formContextKey, void 0);
-const imageBaseUrl = import.meta.env.VITE_IMAGE_BASE_PATH;
+const formContext = inject(formContextKey, void 0)
 
-// 上传
+// 自定义上传方法
 const handleHttpUpload = async (options: UploadRequestOptions) => {
-	let formData = new FormData();
-	formData.append('file', options.file);
+	let formData = new FormData()
+	formData.append("file", options.file)
 	try {
 		const res = await request({
-			url: props.uploadFileUrl,
-			method: 'post',
+			url: "/admin/sys-file/upload",
+			method: "post",
 			headers: {
-				'Content-Type': 'multipart/form-data',
+				"Content-Type": "multipart/form-data",
 			},
 			data: formData,
-		});
+		})
 		if (res.code == 0) {
-			return res;
+			return res
 		}
 	} catch (error) {
-		options.onError(error as any);
+		options.onError(error as any)
 	}
-};
-
-// 移除
-const handleRemove = (uploadFile: any, uploadFiles: any[]) => {
-	const urls = uploadFiles.map((item) => item.response.data.url).join(',');
-	emit('update:imageUrls', urls);
-};
-
-// 预览
-const handlePictureCardPreview = (uploadFile: any) => {
-	dialogImageUrl.value = imageBaseUrl + uploadFile.response.data.url;
-	dialogVisible.value = true;
-};
-
-// 判断是否禁用上传和删除
-const self_disabled = computed(() => {
-	return props.disabled || formContext?.disabled;
-});
-
-watch(
-	() => props.imageUrls,
-	(newValue) => {
-		if (!newValue) elUploadRef.value.clearFiles();
-	}
-);
+}
 
 /**
  * @description 文件上传之前判断
  * @param rawFile 选择的文件
  * */
-const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
-	const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
-	const imgType = props.fileType.includes(rawFile.type as File.ImageMimeType);
+const beforeUpload: UploadProps["beforeUpload"] = (rawFile) => {
+	const imgSize = rawFile.size / 1024 / 1024 < props.fileSize
+	const imgType = props.fileType.includes(rawFile.type)
 	if (!imgType)
 		ElNotification({
-			title: '温馨提示',
-			message: '上传图片不符合所需的格式！',
-			type: 'warning',
-		});
+			title: "温馨提示",
+			message: "上传图片不符合所需的格式！",
+			type: "warning",
+		})
 	if (!imgSize)
 		setTimeout(() => {
 			ElNotification({
-				title: '温馨提示',
+				title: "温馨提示",
 				message: `上传图片大小不能超过 ${props.fileSize}M！`,
-				type: 'warning',
-			});
-		}, 0);
-	return imgType && imgSize;
-};
+				type: "warning",
+			})
+		}, 0)
+	return imgType && imgSize
+}
 
 /**
  * @description 图片上传成功
  * */
 const uploadSuccess = (response: any, uploadFile: UploadFile, uploadFiles: any) => {
-	const urls = uploadFiles.map((item: any) => item.response.data.url).join(',');
-	emit('update:imageUrls', urls);
+	console.log("success", uploadFiles)
+
+	const urls = uploadFiles
+		.map((item: any) => {
+			// 处理新上传和已有的图片URL
+			return item.response ? item.response.data.url : item.fileUrl
+		})
+		.filter(Boolean)
+		.join(",")
+	imageUrls.value = urls
+
+	console.log("fileList.value", fileList.value)
+	console.log("urls", urls)
 
 	ElNotification({
-		title: '温馨提示',
-		message: '图片上传成功！',
-		type: 'success',
-	});
-};
+		title: "温馨提示",
+		message: "图片上传成功！",
+		type: "success",
+	})
+}
+
+// 预览
+const handlePictureCardPreview = (uploadFile: any) => {
+	dialogImageUrl.value = uploadFile.url
+	dialogVisible.value = true
+}
+
+// 移除
+const handleRemove = (uploadFile: any, uploadFiles: any[]) => {
+	const urls = uploadFiles
+		.map((item) => {
+			return item.response ? item.response.data.url : item.fileUrl
+		})
+		.filter(Boolean)
+		.join(",")
+	imageUrls.value = urls
+}
 
 /**
  * @description 图片上传错误
  * */
 const uploadError = () => {
 	ElNotification({
-		title: '温馨提示',
-		message: '图片上传失败，请您重新上传！',
-		type: 'error',
-	});
-};
+		title: "温馨提示",
+		message: "图片上传失败，请您重新上传！",
+		type: "error",
+	})
+}
+
+// 判断是否禁用上传和删除
+const self_disabled = computed(() => {
+	return props.disabled || formContext?.disabled
+})
+
+watch(
+	() => imageUrls.value,
+	(newValue) => {
+		if (!newValue) {
+			fileList.value = []
+			return
+		}
+
+		fileList.value = newValue
+			.split(",")
+			.map((item: string) => {
+				const url = item.startsWith("http") ? item : imageBaseUrl + item
+				return {
+					name: item.split("/").pop() || "",
+					url: url,
+					fileUrl: item,
+				}
+			})
+			.filter((item) => item.url)
+	},
+	{ immediate: true },
+)
 </script>
 
 <style scoped lang="scss">
@@ -191,7 +208,6 @@ const uploadError = () => {
 }
 .upload-box {
 	overflow: hidden;
-
 	.no-border {
 		:deep(.el-upload) {
 			border: none !important;
@@ -234,62 +250,7 @@ const uploadError = () => {
 				background-color: var(--el-color-primary-light-9);
 				border: 2px dashed var(--el-color-primary) !important;
 			}
-			.upload-image {
-				width: 100%;
-				height: 100%;
-				object-fit: contain;
-			}
-			.upload-empty {
-				position: relative;
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				justify-content: center;
-				font-size: 12px;
-				line-height: 30px;
-				color: var(--el-color-info);
-				.el-icon {
-					font-size: 28px;
-					color: var(--el-text-color-secondary);
-				}
-			}
-			.upload-handle {
-				position: absolute;
-				top: 0;
-				right: 0;
-				box-sizing: border-box;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				width: 100%;
-				height: 100%;
-				cursor: pointer;
-				background: rgb(0 0 0 / 60%);
-				opacity: 0;
-				transition: var(--el-transition-duration-fast);
-				.handle-icon {
-					display: flex;
-					flex-direction: column;
-					align-items: center;
-					justify-content: center;
-					padding: 0 6%;
-					color: aliceblue;
-					.el-icon {
-						margin-bottom: 40%;
-						font-size: 130%;
-						line-height: 130%;
-					}
-					span {
-						font-size: 85%;
-						line-height: 85%;
-					}
-				}
-			}
 		}
 	}
-	.el-upload__tip {
-		line-height: 18px;
-		text-align: center;
-	}
 }
 </style>
diff --git a/src/views/canteen/canteenSpu/form.vue b/src/views/canteen/canteenSpu/form.vue
index f6d479e..561244e 100644
--- a/src/views/canteen/canteenSpu/form.vue
+++ b/src/views/canteen/canteenSpu/form.vue
@@ -2,11 +2,11 @@
 	<el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable>
 		<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
 			<el-row :gutter="24">
-<!--				<el-col :span="14" class="mb20">-->
-<!--					<el-form-item label="商户" prop="merchantId">-->
-<!--						<select-mch v-model="form.merchantId" />-->
-<!--					</el-form-item>-->
-<!--				</el-col>-->
+				<!--				<el-col :span="14" class="mb20">-->
+				<!--					<el-form-item label="商户" prop="merchantId">-->
+				<!--						<select-mch v-model="form.merchantId" />-->
+				<!--					</el-form-item>-->
+				<!--				</el-col>-->
 				<el-col :span="14" class="mb20">
 					<el-form-item label="商品名称" prop="name">
 						<el-input v-model.trim="form.name" placeholder="请输入商品名称" />
@@ -22,17 +22,6 @@
 						<upload-img v-model:imageUrl="form.picUrl" />
 					</el-form-item>
 				</el-col>
-				<!--				<el-col :span="12" class="mb20">-->
-				<!--					<el-form-item label="商品简介" prop="introduction">-->
-				<!--						<el-input type="textarea" v-model="form.introduction" placeholder="请输入商品简介" />-->
-				<!--					</el-form-item>-->
-				<!--				</el-col>-->
-
-				<!--				<el-col :span="24" class="mb20">-->
-				<!--					<el-form-item label="商品轮播图" prop="sliderPicUrls">-->
-				<!--						<upload-imgs v-model:imageUrls="form.sliderPicUrls"></upload-imgs>-->
-				<!--					</el-form-item>-->
-				<!--				</el-col>-->
 
 				<el-col :span="14" class="mb20">
 					<el-form-item label="排序" prop="sort">
@@ -43,9 +32,7 @@
 				<el-col :span="14" class="mb20">
 					<el-form-item label="商品状态" prop="status">
 						<el-radio-group v-model="form.status">
-							<el-radio :label="item.value" v-for="(item, index) in spu_status" border :key="index">{{
-								item.label
-							}}</el-radio>
+							<el-radio :label="item.value" v-for="(item, index) in spu_status" border :key="index">{{ item.label }}</el-radio>
 						</el-radio-group>
 					</el-form-item>
 				</el-col>
diff --git a/src/views/canteen/merchantInfo/form.vue b/src/views/canteen/merchantInfo/form.vue
index c210426..7f64580 100644
--- a/src/views/canteen/merchantInfo/form.vue
+++ b/src/views/canteen/merchantInfo/form.vue
@@ -30,7 +30,7 @@
 
 				<el-col :span="24" class="mb20">
 					<el-form-item label="轮播图" prop="swiper">
-						<upload-imgs v-model:imageUrl="form.swiper" />
+						<upload-imgs v-model="form.swiper" />
 					</el-form-item>
 				</el-col>
 
@@ -72,105 +72,105 @@
 </template>
 
 <script setup lang="ts" name="MerchantInfoDialog">
-import { useDict } from '/@/hooks/dict';
-import { useMessage } from '/@/hooks/message';
-import { getObj, addObj, putObj } from '/@/api/canteen/merchantInfo';
-import { rule } from '/@/utils/validate';
-import { deptTree } from '/@/api/admin/dept';
-const emit = defineEmits(['refresh']);
+import { useDict } from "/@/hooks/dict"
+import { useMessage } from "/@/hooks/message"
+import { getObj, addObj, putObj } from "/@/api/canteen/merchantInfo"
+import { rule } from "/@/utils/validate"
+import { deptTree } from "/@/api/admin/dept"
+const emit = defineEmits(["refresh"])
 
 // 定义变量内容
-const dataFormRef = ref();
-const visible = ref(false);
-const loading = ref(false);
+const dataFormRef = ref()
+const visible = ref(false)
+const loading = ref(false)
 //定义业务变量内容
 
 // 定义字典
-const { merchant_type } = useDict('merchant_type');
+const { merchant_type } = useDict("merchant_type")
 
 // 提交表单数据
 const form = reactive({
-	id: '',
-	merchantId: '',
-	deptId: '',
-	name: '',
-	merchantType: '',
-	logo: '',
-	collectMoneyCode: '',
-	swiper: '',
-	phone: '',
-	businessTime: '',
-	address: '',
-	jobStartTime: '',
+	id: "",
+	merchantId: "",
+	deptId: "",
+	name: "",
+	merchantType: "",
+	logo: "",
+	collectMoneyCode: "",
+	swiper: "",
+	phone: "",
+	businessTime: "",
+	address: "",
+	jobStartTime: "",
 	rangeDate: [],
 	jobEndTime: [],
-});
+})
 
 // 定义校验规则
 const dataRules = ref({
-	merchantId: [{ required: true, message: '商户不能为空', trigger: 'blur' }],
-	name: [{ required: true, message: '商户名不能为空', trigger: 'blur' }],
-	type: [{ required: true, message: '请选择商户类型', trigger: 'change' }],
-	logo: [{ required: true, message: '请上传商户logo', trigger: 'change' }],
-	swiper: [{ required: true, message: '请上传商户轮播图', trigger: 'change' }],
-	rangeDate: [{ required: true, message: '请选择营业时间', trigger: 'change' }],
-	deptId: [{ required: true, message: '请选择部门', trigger: 'change' }],
-});
+	merchantId: [{ required: true, message: "商户不能为空", trigger: "blur" }],
+	name: [{ required: true, message: "商户名不能为空", trigger: "blur" }],
+	type: [{ required: true, message: "请选择商户类型", trigger: "change" }],
+	logo: [{ required: true, message: "请上传商户logo", trigger: "change" }],
+	swiper: [{ required: true, message: "请上传商户轮播图", trigger: "change" }],
+	rangeDate: [{ required: true, message: "请选择营业时间", trigger: "change" }],
+	deptId: [{ required: true, message: "请选择部门", trigger: "change" }],
+})
 
 // 打开弹窗
 const openDialog = (id: string) => {
-	visible.value = true;
-	form.id = '';
+	visible.value = true
+	form.id = ""
 
 	// 重置表单数据
 	nextTick(() => {
-		dataFormRef.value?.resetFields();
-	});
+		dataFormRef.value?.resetFields()
+	})
 
 	// 获取merchantInfo信息
 	if (id) {
-		form.id = id;
-		getmerchantInfoData(id);
+		form.id = id
+		getmerchantInfoData(id)
 	}
-};
+}
 
 // 提交
 const onSubmit = async () => {
-	const valid = await dataFormRef.value.validate().catch(() => {});
-	if (!valid) return false;
-	const _pa = { ...form };
+	const valid = await dataFormRef.value.validate().catch(() => {})
+	if (!valid) return false
+	const _pa = { ...form }
 	if (_pa.rangeDate && _pa.rangeDate.length) {
-		_pa.jobStartTime = _pa.rangeDate[0];
-		_pa.jobEndTime = _pa.rangeDate[1];
+		_pa.jobStartTime = _pa.rangeDate[0]
+		_pa.jobEndTime = _pa.rangeDate[1]
 	}
 	try {
-		loading.value = true;
-		form.id ? await putObj(form) : await addObj(form);
-		useMessage().success(form.id ? '修改成功' : '添加成功');
-		visible.value = false;
-		emit('refresh');
+		loading.value = true
+		form.id ? await putObj(form) : await addObj(form)
+		useMessage().success(form.id ? "修改成功" : "添加成功")
+		visible.value = false
+		emit("refresh")
 	} catch (err: any) {
-		useMessage().error(err.msg);
+		useMessage().error(err.msg)
 	} finally {
-		loading.value = false;
+		loading.value = false
 	}
-};
+}
 
 // 初始化表单数据
 const getmerchantInfoData = (id: string) => {
 	// 获取数据
-	loading.value = true;
+	loading.value = true
 	getObj(id)
 		.then((res: any) => {
-			Object.assign(form, res.data);
+			Object.assign(form, res.data)
 		})
 		.finally(() => {
-			loading.value = false;
-		});
-};
+			loading.value = false
+		})
+}
 
 // 暴露变量
 defineExpose({
 	openDialog,
-});
+})
 </script>
diff --git a/src/views/hard/hard-order/admin-refund-dialog.vue b/src/views/hard/hard-order/admin-refund-dialog.vue
index d61f26d..b500602 100644
--- a/src/views/hard/hard-order/admin-refund-dialog.vue
+++ b/src/views/hard/hard-order/admin-refund-dialog.vue
@@ -11,30 +11,20 @@
 				<el-col :span="24" class="mb20">
 					<el-form-item label="退款原因" prop="applyReason">
 						<el-select v-model="form.applyReason">
-							<el-option
-								v-for="reason in state.setting.afterSaleRefundReasons"
-								:key="reason"
-								:label="reason"
-								:value="reason"
-							/>
+							<el-option v-for="reason in state.setting.afterSaleRefundReasons" :key="reason" :label="reason" :value="reason" />
 						</el-select>
 					</el-form-item>
 				</el-col>
 
 				<el-col :span="24" class="mb20">
 					<el-form-item label="补充凭证图片" prop="applyPicUrls">
-						<upload-imgs v-model:imageUrls="form.applyPicUrls" />
+						<upload-imgs v-model="form.applyPicUrls" />
 					</el-form-item>
 				</el-col>
 
 				<el-col :span="24" class="mb20">
 					<el-form-item label="相关描述" prop="applyDescription">
-						<el-input
-							v-model="form.applyDescription"
-							placeholder="请输入备注"
-							type="textarea"
-							:autosize="{ minRows: 6 }"
-						/>
+						<el-input v-model="form.applyDescription" placeholder="请输入备注" type="textarea" :autosize="{ minRows: 6 }" />
 					</el-form-item>
 				</el-col>
 			</el-row>
diff --git a/src/views/supermarket/smSpu/form.vue b/src/views/supermarket/smSpu/form.vue
index 8c2105e..0fb2ae3 100644
--- a/src/views/supermarket/smSpu/form.vue
+++ b/src/views/supermarket/smSpu/form.vue
@@ -9,6 +9,7 @@
 							placeholder="请选择库存商品"
 							:value="form.erpSpuName"
 							readonly
+							:suffix-icon="Search"
 							@click="handleClickSelectSpu"
 						/>
 					</el-form-item>
@@ -16,7 +17,7 @@
 
 				<el-col :span="24" class="mb20">
 					<el-form-item label="商品轮播图" prop="sliderPicUrls">
-						<upload-imgs v-model:imageUrls="form.sliderPicUrls"></upload-imgs>
+						<upload-imgs v-model="form.sliderPicUrls" />
 					</el-form-item>
 				</el-col>
 
@@ -124,6 +125,7 @@ import { useMessage } from "/@/hooks/message"
 import { getObj, addObj, putObj, getOnlineSpuPage } from "/@/api/supermarket/smSpu"
 import { rule } from "/@/utils/validate"
 import { BasicTableProps, useTable } from "/@/hooks/table"
+import { Search } from "@element-plus/icons-vue"
 const emit = defineEmits(["refresh"])
 
 // 定义变量内容
@@ -138,7 +140,7 @@ const spuSelectDialogVisible = ref<boolean>(false)
 const form = reactive({
 	id: "",
 	erpSpuId: "",
-	description: "",
+	description: "<p></p>",
 	sliderPicUrls: "",
 	sort: "",
 	status: "0",
diff --git a/src/views/supermarketerp/supermarketSpu/form.vue b/src/views/supermarketerp/supermarketSpu/form.vue
index d4a0756..0895136 100644
--- a/src/views/supermarketerp/supermarketSpu/form.vue
+++ b/src/views/supermarketerp/supermarketSpu/form.vue
@@ -338,7 +338,7 @@ const onSubmit = async () => {
 	console.log("提交的数据", form)
 
 	const valid = await dataFormRef.value.validate().catch(() => {})
-	// if (!valid) return useMessage().warning("基础信息必填项未填写完整")
+	if (!valid) return useMessage().warning("基础信息必填项未填写完整")
 	if (!form.smErpUnitEntityList || form.smErpUnitEntityList.length <= 0) return useMessage().warning("请添加包装单位")
 	if (!(await supermarketUnitEntityListRef.value.editableTableValidate())) return useMessage().warning("包装单位必填项未填写完整")
 	if (!supermarketUnitEntityListRef.value.getRadioEvent()) return useMessage().warning("请选择基础包装单位")
diff --git a/src/views/wallet/mch-manage/form.vue b/src/views/wallet/mch-manage/form.vue
index 1a07d1f..d1b6435 100644
--- a/src/views/wallet/mch-manage/form.vue
+++ b/src/views/wallet/mch-manage/form.vue
@@ -38,7 +38,7 @@
 
 				<el-col :span="24" class="mb20">
 					<el-form-item label="轮播图" prop="swiperPic">
-						<upload-imgs v-model:imageUrls="form.swiperPic" />
+						<upload-imgs v-model="form.swiperPic" />
 					</el-form-item>
 				</el-col>
 

From 1dd21a506157cdc5d32fcc9f7952bd51ca65a8af Mon Sep 17 00:00:00 2001
From: weiwei <ctw@example.com>
Date: Thu, 27 Feb 2025 15:03:13 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E9=87=87=E8=B4=AD=E9=80=80=E8=B4=A7?=
 =?UTF-8?q?=E5=92=8C=E9=9B=B6=E5=94=AE=E9=80=80=E8=B4=A7=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E3=80=81=E5=95=86=E5=93=81=E7=AE=A1=E7=90=86=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E5=8C=85=E8=A3=85=E5=8D=95=E4=BD=8D=E5=9B=9E=E6=98=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/supermarketerp/smErpCgBack.ts         | 48 +++++++++++++++++++
 .../smErpInventoryRecordsItem.ts              | 41 ----------------
 src/api/supermarketerp/smErpRetailBack.ts     |  9 ++++
 .../components/linkCgCodeDialog.vue           |  4 +-
 .../smErpCgBack/smErpCgBackOption.vue         |  4 +-
 .../components/linkCgCodeDialog.vue           |  4 +-
 .../smErpRetailBack/smErpRetailBackOption.vue |  2 +-
 .../supermarketerp/supermarketSpu/form.vue    | 23 +++++----
 8 files changed, 78 insertions(+), 57 deletions(-)
 create mode 100644 src/api/supermarketerp/smErpCgBack.ts
 delete mode 100644 src/api/supermarketerp/smErpInventoryRecordsItem.ts
 create mode 100644 src/api/supermarketerp/smErpRetailBack.ts

diff --git a/src/api/supermarketerp/smErpCgBack.ts b/src/api/supermarketerp/smErpCgBack.ts
new file mode 100644
index 0000000..31bd4a8
--- /dev/null
+++ b/src/api/supermarketerp/smErpCgBack.ts
@@ -0,0 +1,48 @@
+import request from "/@/utils/request"
+
+export function fetchList(query?: Object) {
+	return request({
+		url: "/supermarket/smErpCgBack/page",
+		method: "get",
+		params: query,
+	})
+}
+
+export function addObj(obj?: Object) {
+	return request({
+		url: "/supermarket/smErpCgBack",
+		method: "post",
+		data: obj,
+	})
+}
+
+export function getObj(id?: string) {
+	return request({
+		url: "/supermarket/smErpCgBack/" + id,
+		method: "get",
+	})
+}
+
+export function delObjs(ids?: Object) {
+	return request({
+		url: "/supermarket/smErpCgBack",
+		method: "delete",
+		data: ids,
+	})
+}
+
+export function putObj(obj?: Object) {
+	return request({
+		url: "/supermarket/smErpCgBack",
+		method: "put",
+		data: obj,
+	})
+}
+
+export function getCgInventoryPage(params?: Object) {
+	return request({
+		url: "/smErpInventoryRecords/inventory/page",
+		method: "get",
+		params,
+	})
+}
diff --git a/src/api/supermarketerp/smErpInventoryRecordsItem.ts b/src/api/supermarketerp/smErpInventoryRecordsItem.ts
deleted file mode 100644
index 2ff6071..0000000
--- a/src/api/supermarketerp/smErpInventoryRecordsItem.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import request from "/@/utils/request"
-
-export function fetchList(query?: Object) {
-  return request({
-    url: '/supermarket/smErpInventoryRecordsItem/page',
-    method: 'get',
-    params: query
-  })
-}
-
-export function addObj(obj?: Object) {
-  return request({
-    url: '/supermarket/smErpInventoryRecordsItem',
-    method: 'post',
-    data: obj
-  })
-}
-
-export function getObj(id?: string) {
-  return request({
-    url: '/supermarket/smErpInventoryRecordsItem/' + id,
-    method: 'get'
-  })
-}
-
-export function delObjs(ids?: Object) {
-  return request({
-    url: '/supermarket/smErpInventoryRecordsItem',
-    method: 'delete',
-    data: ids
-  })
-}
-
-export function putObj(obj?: Object) {
-  return request({
-    url: '/supermarket/smErpInventoryRecordsItem',
-    method: 'put',
-    data: obj
-  })
-}
-
diff --git a/src/api/supermarketerp/smErpRetailBack.ts b/src/api/supermarketerp/smErpRetailBack.ts
new file mode 100644
index 0000000..3b9af8c
--- /dev/null
+++ b/src/api/supermarketerp/smErpRetailBack.ts
@@ -0,0 +1,9 @@
+import request from "/@/utils/request"
+
+export function getCgInventoryPage(params?: Object) {
+	return request({
+		url: "/smErpInventoryRecords/inventory/page",
+		method: "get",
+		params,
+	})
+}
diff --git a/src/views/supermarketerp/smErpCgBack/components/linkCgCodeDialog.vue b/src/views/supermarketerp/smErpCgBack/components/linkCgCodeDialog.vue
index 8b1f927..4d3d056 100644
--- a/src/views/supermarketerp/smErpCgBack/components/linkCgCodeDialog.vue
+++ b/src/views/supermarketerp/smErpCgBack/components/linkCgCodeDialog.vue
@@ -55,8 +55,8 @@
 
 <script setup lang="ts" name="linkCgCodeDialog">
 import { ref } from "vue"
-import { getCgddPage } from "/@/api/supermarketerp/smErpInventoryRecords"
 import { VxeTableEvents } from "vxe-table"
+import { getCgInventoryPage } from "/@/api/supermarketerp/smErpCgBack"
 
 const linkCgCodeDialogVisible = defineModel()
 const emit = defineEmits(["getSelectedCgPlan"])
@@ -74,7 +74,7 @@ const openLinkCodeDialog = async () => {
 	step.value = 0
 	linkCodeLoading.value = true
 	try {
-		const res = await getCgddPage().finally(() => (linkCodeLoading.value = false))
+		const res = await getCgInventoryPage({ inventoryType: "3" }).finally(() => (linkCodeLoading.value = false))
 		if (res.code === 0) {
 			cgddPage.value = res.data.records
 		}
diff --git a/src/views/supermarketerp/smErpCgBack/smErpCgBackOption.vue b/src/views/supermarketerp/smErpCgBack/smErpCgBackOption.vue
index 7e1547f..c9391de 100644
--- a/src/views/supermarketerp/smErpCgBack/smErpCgBackOption.vue
+++ b/src/views/supermarketerp/smErpCgBack/smErpCgBackOption.vue
@@ -181,14 +181,14 @@
 import { ref, reactive, computed, onMounted } from "vue"
 import { useRouter, useRoute } from "vue-router"
 import { useMessage } from "/@/hooks/message"
-import { getObj, addObj, putObj } from "/@/api/supermarketerp/smErpInventoryRecords"
+import { getObj, addObj, putObj } from "/@/api/supermarketerp/smErpCgBack"
 import { getPlanCode, getErpSpuSimpleAll } from "/@/api/supermarketerp/common"
 import { VxeTableEvents, VxeTablePropTypes, type VxeTableInstance } from "vxe-table"
 import { getSupplierTypeOptions } from "/@/api/supermarketerp/smErpSupplier"
 import { formatDate } from "/@/utils/formatTime"
 import { Search } from "@element-plus/icons-vue"
 import erpSpuSelectDialog from "/@/views/supermarketerp/components/erpSpuSelectDialog.vue"
-import linkCgCodeDialog from "/@/views/supermarketerp/smErpCgDd/components/linkCgCodeDialog.vue"
+import linkCgCodeDialog from "/@/views/supermarketerp/smErpCgBack/components/linkCgCodeDialog.vue"
 import { displayPrice } from "/@/utils/formatMoney"
 
 const router = useRouter()
diff --git a/src/views/supermarketerp/smErpRetailBack/components/linkCgCodeDialog.vue b/src/views/supermarketerp/smErpRetailBack/components/linkCgCodeDialog.vue
index 8b1f927..52ac77e 100644
--- a/src/views/supermarketerp/smErpRetailBack/components/linkCgCodeDialog.vue
+++ b/src/views/supermarketerp/smErpRetailBack/components/linkCgCodeDialog.vue
@@ -55,8 +55,8 @@
 
 <script setup lang="ts" name="linkCgCodeDialog">
 import { ref } from "vue"
-import { getCgddPage } from "/@/api/supermarketerp/smErpInventoryRecords"
 import { VxeTableEvents } from "vxe-table"
+import { getCgInventoryPage } from "/@/api/supermarketerp/smErpRetailBack"
 
 const linkCgCodeDialogVisible = defineModel()
 const emit = defineEmits(["getSelectedCgPlan"])
@@ -74,7 +74,7 @@ const openLinkCodeDialog = async () => {
 	step.value = 0
 	linkCodeLoading.value = true
 	try {
-		const res = await getCgddPage().finally(() => (linkCodeLoading.value = false))
+		const res = await getCgInventoryPage({ inventoryType: "5" }).finally(() => (linkCodeLoading.value = false))
 		if (res.code === 0) {
 			cgddPage.value = res.data.records
 		}
diff --git a/src/views/supermarketerp/smErpRetailBack/smErpRetailBackOption.vue b/src/views/supermarketerp/smErpRetailBack/smErpRetailBackOption.vue
index 829e1a4..4544826 100644
--- a/src/views/supermarketerp/smErpRetailBack/smErpRetailBackOption.vue
+++ b/src/views/supermarketerp/smErpRetailBack/smErpRetailBackOption.vue
@@ -219,7 +219,7 @@ import { getSupplierTypeOptions } from "/@/api/supermarketerp/smErpSupplier"
 import { formatDate } from "/@/utils/formatTime"
 import { Search } from "@element-plus/icons-vue"
 import erpSpuSelectDialog from "/@/views/supermarketerp/components/erpSpuSelectDialog.vue"
-import linkCgCodeDialog from "/@/views/supermarketerp/smErpCgDd/components/linkCgCodeDialog.vue"
+import linkCgCodeDialog from "/@/views/supermarketerp/smErpRetailBack/components/linkCgCodeDialog.vue"
 import { displayPrice, storePrice } from "/@/utils/formatMoney"
 import { useDict } from "/@/hooks/dict"
 
diff --git a/src/views/supermarketerp/supermarketSpu/form.vue b/src/views/supermarketerp/supermarketSpu/form.vue
index 0895136..8110bf8 100644
--- a/src/views/supermarketerp/supermarketSpu/form.vue
+++ b/src/views/supermarketerp/supermarketSpu/form.vue
@@ -244,7 +244,10 @@ const openDialog = async (id: string) => {
 	// 获取supermarketSpu信息
 	if (id) {
 		form.id = id
-		getsupermarketSpuData(id)
+		await getsupermarketSpuData(id)
+
+		// 设置基础包装单位单选行
+		supermarketUnitEntityListRef.value.setRadioRow(form.smErpUnitEntityList.findIndex((item: any) => item.isBase))
 	}
 
 	// 获取分类下拉选项 & 获取品牌下拉选项 & 获取货商下拉选项
@@ -268,17 +271,19 @@ const getsupermarketSpuData = async (id: string) => {
 		if (res.code === 0) {
 			res.data.smErpUnitEntityList = res.data.smErpUnitEntityList.map((item: any) => {
 				// 格式化数据
-				item.retailPrice = displayPrice(item.retailPrice, "")
-				item.promotionPrice = displayPrice(item.promotionPrice, "")
-				item.purchasePrice = displayPrice(item.purchasePrice, "")
-				item.costPrice = displayPrice(item.costPrice, "")
+				item.retailPrice = parseFloat(displayPrice(item.retailPrice, ""))
+				item.promotionPrice = parseFloat(displayPrice(item.promotionPrice, ""))
+				item.purchasePrice = parseFloat(displayPrice(item.purchasePrice, ""))
+				item.costPrice = parseFloat(displayPrice(item.costPrice, ""))
 				return item
 			})
 
-			Object.assign(form, res.data)
-
-			// 设置基础包装单位单选行
-			supermarketUnitEntityListRef.value.setRadioRow(form.smErpUnitEntityList.findIndex((item: any) => item.isBase))
+			Object.assign(form, {
+				...res.data,
+				costPrice: parseFloat(displayPrice(res.data.costPrice, "")),
+				purchasePrice: parseFloat(displayPrice(res.data.purchasePrice, "")),
+				retailPrice: parseFloat(displayPrice(res.data.retailPrice, "")),
+			})
 
 			console.log("获取的商品详情：", res.data)
 		}