feat: 推广粘贴上传功能至所有图片上传页面(purchase/buy/product/semi)
This commit is contained in:
@ -147,7 +147,7 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
<el-form-item label="图片上传" required>
|
<el-form-item label="图片上传" required id="upload-purchase-images">
|
||||||
<el-upload
|
<el-upload
|
||||||
v-model:file-list="fileList"
|
v-model:file-list="fileList"
|
||||||
:http-request="customUpload"
|
:http-request="customUpload"
|
||||||
@ -244,6 +244,7 @@ import {
|
|||||||
approvePurchase, getPurchaseApprovers, autoFillPurchase
|
approvePurchase, getPurchaseApprovers, autoFillPurchase
|
||||||
} from '@/api/purchase'
|
} from '@/api/purchase'
|
||||||
import { uploadFile, deleteFile } from '@/api/common/upload'
|
import { uploadFile, deleteFile } from '@/api/common/upload'
|
||||||
|
import { usePasteUpload } from '@/hooks/usePasteUpload'
|
||||||
import type { FormInstance } from 'element-plus'
|
import type { FormInstance } from 'element-plus'
|
||||||
|
|
||||||
const userStore = useUserStore()
|
const userStore = useUserStore()
|
||||||
@ -490,6 +491,8 @@ const customUpload = async (options: any) => {
|
|||||||
if (res.code === 200) {
|
if (res.code === 200) {
|
||||||
const newUrl = res.data.url
|
const newUrl = res.data.url
|
||||||
form.value.images!.push(newUrl)
|
form.value.images!.push(newUrl)
|
||||||
|
// 同步更新 fileList,触发 el-upload UI 刷新
|
||||||
|
fileList.value.push({ name: newUrl.split('/').pop(), url: getImageUrl(newUrl) })
|
||||||
onSuccess(res)
|
onSuccess(res)
|
||||||
} else {
|
} else {
|
||||||
ElMessage.error(res.msg || '上传失败')
|
ElMessage.error(res.msg || '上传失败')
|
||||||
@ -512,6 +515,12 @@ const handleRemoveImage = async (uploadFile: any) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 粘贴上传处理器(PC 端:鼠标悬停 + Ctrl+V 直接粘贴图片)
|
||||||
|
const handlePasteLink = (link: string, field: string) => {
|
||||||
|
// 采购单没有独立的外链输入框,暂不支持网页图片链接自动填入
|
||||||
|
}
|
||||||
|
usePasteUpload(customUpload, 'images', '#upload-purchase-images', handlePasteLink)
|
||||||
|
|
||||||
// --- 提交 ---
|
// --- 提交 ---
|
||||||
const submitForm = async () => {
|
const submitForm = async () => {
|
||||||
if (!form.value.name.trim()) { ElMessage.warning('请选择或填写采购物品'); return }
|
if (!form.value.name.trim()) { ElMessage.warning('请选择或填写采购物品'); return }
|
||||||
|
|||||||
@ -447,7 +447,7 @@
|
|||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
<el-form-item label="到货图片" prop="arrival_photo">
|
<el-form-item label="到货图片" prop="arrival_photo">
|
||||||
<div class="upload-container">
|
<div class="upload-container" id="upload-arrival_photo">
|
||||||
<el-upload
|
<el-upload
|
||||||
v-model:file-list="arrivalFileList"
|
v-model:file-list="arrivalFileList"
|
||||||
action="#"
|
action="#"
|
||||||
@ -466,7 +466,7 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
<el-form-item label="检测报告" prop="inspection_report">
|
<el-form-item label="检测报告" prop="inspection_report">
|
||||||
<div class="upload-container">
|
<div class="upload-container" id="upload-inspection_report">
|
||||||
<el-upload
|
<el-upload
|
||||||
v-model:file-list="reportFileList"
|
v-model:file-list="reportFileList"
|
||||||
action="#"
|
action="#"
|
||||||
@ -698,6 +698,7 @@ import {
|
|||||||
} from '@/api/inbound/buy'
|
} from '@/api/inbound/buy'
|
||||||
import {getLabelPreview, executePrint} from '@/api/common/print'
|
import {getLabelPreview, executePrint} from '@/api/common/print'
|
||||||
import { getWarehouseTree } from '@/api/common/warehouse'
|
import { getWarehouseTree } from '@/api/common/warehouse'
|
||||||
|
import { usePasteUpload } from '@/hooks/usePasteUpload'
|
||||||
import WebRtcCamera from '@/components/Camera/WebRtcCamera.vue'
|
import WebRtcCamera from '@/components/Camera/WebRtcCamera.vue'
|
||||||
import WarehouseSelector from '@/components/WarehouseSelector.vue'
|
import WarehouseSelector from '@/components/WarehouseSelector.vue'
|
||||||
import SmartScannerDialog from '@/components/SmartScannerDialog.vue'
|
import SmartScannerDialog from '@/components/SmartScannerDialog.vue'
|
||||||
@ -1532,6 +1533,16 @@ const handleRemoveImage = async (uploadFile: any, targetField: 'arrival_photo' |
|
|||||||
ElMessage.success('已删除')
|
ElMessage.success('已删除')
|
||||||
} catch (e) { console.error(e) }
|
} catch (e) { console.error(e) }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 粘贴上传处理器(PC 端:鼠标悬停 + Ctrl+V 直接粘贴图片)
|
||||||
|
const handlePasteLink = (link: string, field: string) => {
|
||||||
|
if (field === 'inspection_report') {
|
||||||
|
inspection_report_url.value = link
|
||||||
|
}
|
||||||
|
}
|
||||||
|
usePasteUpload(customUpload, 'arrival_photo', '#upload-arrival_photo', handlePasteLink)
|
||||||
|
usePasteUpload(customUpload, 'inspection_report', '#upload-inspection_report', handlePasteLink)
|
||||||
|
|
||||||
const handlePreviewPicture = (uploadFile: any) => { dialogImageUrl.value = uploadFile.url!; dialogVisibleImage.value = true }
|
const handlePreviewPicture = (uploadFile: any) => { dialogImageUrl.value = uploadFile.url!; dialogVisibleImage.value = true }
|
||||||
const triggerCamera = (field: 'arrival_photo' | 'inspection_report') => {
|
const triggerCamera = (field: 'arrival_photo' | 'inspection_report') => {
|
||||||
currentCameraField.value = field;
|
currentCameraField.value = field;
|
||||||
|
|||||||
@ -388,7 +388,7 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="dialogStatus === 'update' ? 12 : 18">
|
<el-col :span="dialogStatus === 'update' ? 12 : 18">
|
||||||
<el-form-item label="成品实拍" prop="product_photo">
|
<el-form-item label="成品实拍" prop="product_photo">
|
||||||
<div class="upload-container">
|
<div class="upload-container" id="upload-product_photo">
|
||||||
<el-upload v-model:file-list="productPhotoList" action="#" list-type="picture-card" multiple :http-request="(opts) => customUpload(opts, 'product_photo')" :on-preview="handlePreviewPicture" :on-remove="(file) => handleRemoveImage(file, 'product_photo')" :before-upload="beforeAvatarUpload">
|
<el-upload v-model:file-list="productPhotoList" action="#" list-type="picture-card" multiple :http-request="(opts) => customUpload(opts, 'product_photo')" :on-preview="handlePreviewPicture" :on-remove="(file) => handleRemoveImage(file, 'product_photo')" :before-upload="beforeAvatarUpload">
|
||||||
<el-icon><Plus /></el-icon>
|
<el-icon><Plus /></el-icon>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
@ -402,7 +402,7 @@
|
|||||||
<el-row :gutter="24">
|
<el-row :gutter="24">
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-form-item label="质量报告" prop="quality_report_link">
|
<el-form-item label="质量报告" prop="quality_report_link">
|
||||||
<div class="upload-container">
|
<div class="upload-container" id="upload-quality_report_link">
|
||||||
<el-upload v-model:file-list="qualityFileList" action="#" list-type="picture-card" multiple :http-request="(opts) => customUpload(opts, 'quality_report_link')" :on-preview="handlePreviewPicture" :on-remove="(file) => handleRemoveImage(file, 'quality_report_link')" :before-upload="beforeAvatarUpload">
|
<el-upload v-model:file-list="qualityFileList" action="#" list-type="picture-card" multiple :http-request="(opts) => customUpload(opts, 'quality_report_link')" :on-preview="handlePreviewPicture" :on-remove="(file) => handleRemoveImage(file, 'quality_report_link')" :before-upload="beforeAvatarUpload">
|
||||||
<el-icon><Plus /></el-icon>
|
<el-icon><Plus /></el-icon>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
@ -415,7 +415,7 @@
|
|||||||
|
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-form-item label="检测报告" prop="inspection_report_link">
|
<el-form-item label="检测报告" prop="inspection_report_link">
|
||||||
<div class="upload-container">
|
<div class="upload-container" id="upload-inspection_report_link">
|
||||||
<el-upload v-model:file-list="inspectionFileList" action="#" list-type="picture-card" multiple :http-request="(opts) => customUpload(opts, 'inspection_report_link')" :on-preview="handlePreviewPicture" :on-remove="(file) => handleRemoveImage(file, 'inspection_report_link')" :before-upload="beforeAvatarUpload">
|
<el-upload v-model:file-list="inspectionFileList" action="#" list-type="picture-card" multiple :http-request="(opts) => customUpload(opts, 'inspection_report_link')" :on-preview="handlePreviewPicture" :on-remove="(file) => handleRemoveImage(file, 'inspection_report_link')" :before-upload="beforeAvatarUpload">
|
||||||
<el-icon><Plus /></el-icon>
|
<el-icon><Plus /></el-icon>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
@ -592,6 +592,7 @@ import WarehouseSelector from '@/components/WarehouseSelector.vue'
|
|||||||
import SmartScannerDialog from '@/components/SmartScannerDialog.vue'
|
import SmartScannerDialog from '@/components/SmartScannerDialog.vue'
|
||||||
import { getLabelPreview, executePrint } from '@/api/common/print'
|
import { getLabelPreview, executePrint } from '@/api/common/print'
|
||||||
import { getWarehouseTree } from '@/api/common/warehouse'
|
import { getWarehouseTree } from '@/api/common/warehouse'
|
||||||
|
import { usePasteUpload } from '@/hooks/usePasteUpload'
|
||||||
import { useUserStore } from '@/stores/user'
|
import { useUserStore } from '@/stores/user'
|
||||||
|
|
||||||
// ------------------------------------
|
// ------------------------------------
|
||||||
@ -1235,6 +1236,15 @@ const handleRemoveImage = async (uploadFile: any, targetField: 'product_photo' |
|
|||||||
}
|
}
|
||||||
const handlePreviewPicture = (uploadFile: any) => { dialogImageUrl.value = uploadFile.url!; dialogVisibleImage.value = true }
|
const handlePreviewPicture = (uploadFile: any) => { dialogImageUrl.value = uploadFile.url!; dialogVisibleImage.value = true }
|
||||||
|
|
||||||
|
// 粘贴上传处理器(PC 端:鼠标悬停 + Ctrl+V 直接粘贴图片)
|
||||||
|
const handlePasteLink = (link: string, field: string) => {
|
||||||
|
if (field === 'quality_report_link') quality_url.value = link
|
||||||
|
else if (field === 'inspection_report_link') inspection_url.value = link
|
||||||
|
}
|
||||||
|
usePasteUpload(customUpload, 'product_photo', '#upload-product_photo', handlePasteLink)
|
||||||
|
usePasteUpload(customUpload, 'quality_report_link', '#upload-quality_report_link', handlePasteLink)
|
||||||
|
usePasteUpload(customUpload, 'inspection_report_link', '#upload-inspection_report_link', handlePasteLink)
|
||||||
|
|
||||||
const triggerCamera = (field: any) => {
|
const triggerCamera = (field: any) => {
|
||||||
currentCameraField.value = field;
|
currentCameraField.value = field;
|
||||||
cameraDialogVisible.value = true;
|
cameraDialogVisible.value = true;
|
||||||
|
|||||||
@ -467,7 +467,7 @@
|
|||||||
<el-row :gutter="24">
|
<el-row :gutter="24">
|
||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
<el-form-item label="到货图片" prop="arrival_photo">
|
<el-form-item label="到货图片" prop="arrival_photo">
|
||||||
<div class="upload-container">
|
<div class="upload-container" id="upload-arrival_photo">
|
||||||
<el-upload v-model:file-list="arrivalFileList" action="#" list-type="picture-card" multiple :http-request="(opts) => customUpload(opts, 'arrival_photo')" :on-preview="handlePreviewPicture" :on-remove="(file) => handleRemoveImage(file, 'arrival_photo')" :before-upload="beforeAvatarUpload">
|
<el-upload v-model:file-list="arrivalFileList" action="#" list-type="picture-card" multiple :http-request="(opts) => customUpload(opts, 'arrival_photo')" :on-preview="handlePreviewPicture" :on-remove="(file) => handleRemoveImage(file, 'arrival_photo')" :before-upload="beforeAvatarUpload">
|
||||||
<el-icon><Plus /></el-icon>
|
<el-icon><Plus /></el-icon>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
@ -479,7 +479,7 @@
|
|||||||
|
|
||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
<el-form-item label="质量报告" prop="quality_report_link">
|
<el-form-item label="质量报告" prop="quality_report_link">
|
||||||
<div class="upload-container">
|
<div class="upload-container" id="upload-quality_report_link">
|
||||||
<el-upload v-model:file-list="reportFileList" action="#" list-type="picture-card" multiple :http-request="(opts) => customUpload(opts, 'quality_report_link')" :on-preview="handlePreviewPicture" :on-remove="(file) => handleRemoveImage(file, 'quality_report_link')" :before-upload="beforeAvatarUpload">
|
<el-upload v-model:file-list="reportFileList" action="#" list-type="picture-card" multiple :http-request="(opts) => customUpload(opts, 'quality_report_link')" :on-preview="handlePreviewPicture" :on-remove="(file) => handleRemoveImage(file, 'quality_report_link')" :before-upload="beforeAvatarUpload">
|
||||||
<el-icon><Plus /></el-icon>
|
<el-icon><Plus /></el-icon>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
@ -647,6 +647,7 @@ import WarehouseSelector from '@/components/WarehouseSelector.vue'
|
|||||||
import SmartScannerDialog from '@/components/SmartScannerDialog.vue'
|
import SmartScannerDialog from '@/components/SmartScannerDialog.vue'
|
||||||
import {getLabelPreview, executePrint} from '@/api/common/print'
|
import {getLabelPreview, executePrint} from '@/api/common/print'
|
||||||
import { getWarehouseTree } from '@/api/common/warehouse'
|
import { getWarehouseTree } from '@/api/common/warehouse'
|
||||||
|
import { usePasteUpload } from '@/hooks/usePasteUpload'
|
||||||
import { useUserStore } from '@/stores/user'
|
import { useUserStore } from '@/stores/user'
|
||||||
|
|
||||||
// ------------------------------------
|
// ------------------------------------
|
||||||
@ -1324,6 +1325,14 @@ const handleRemoveImage = async (uploadFile: any, targetField: 'arrival_photo' |
|
|||||||
} catch (e) { console.error(e) }
|
} catch (e) { console.error(e) }
|
||||||
}
|
}
|
||||||
const handlePreviewPicture = (uploadFile: any) => { dialogImageUrl.value = uploadFile.url!; dialogVisibleImage.value = true }
|
const handlePreviewPicture = (uploadFile: any) => { dialogImageUrl.value = uploadFile.url!; dialogVisibleImage.value = true }
|
||||||
|
|
||||||
|
// 粘贴上传处理器(PC 端:鼠标悬停 + Ctrl+V 直接粘贴图片)
|
||||||
|
const handlePasteLink = (link: string, field: string) => {
|
||||||
|
if (field === 'quality_report_link') quality_report_url.value = link
|
||||||
|
}
|
||||||
|
usePasteUpload(customUpload, 'arrival_photo', '#upload-arrival_photo', handlePasteLink)
|
||||||
|
usePasteUpload(customUpload, 'quality_report_link', '#upload-quality_report_link', handlePasteLink)
|
||||||
|
|
||||||
const triggerCamera = (field: 'arrival_photo' | 'quality_report_link') => {
|
const triggerCamera = (field: 'arrival_photo' | 'quality_report_link') => {
|
||||||
currentCameraField.value = field;
|
currentCameraField.value = field;
|
||||||
cameraDialogVisible.value = true;
|
cameraDialogVisible.value = true;
|
||||||
|
|||||||
Reference in New Issue
Block a user