| | |
| | | <el-upload |
| | | v-model:file-list="fileList" |
| | | class="upload-demo" |
| | | :action="uploadUrl" |
| | | :http-request="uploadFile" |
| | | :on-success="handleUploadSuccess" |
| | | :on-error="handleUploadError" |
| | | :before-upload="beforeUpload" |
| | |
| | | <script setup> |
| | | import { ref, reactive, getCurrentInstance } from "vue"; |
| | | import { ElMessageBox } from "element-plus"; |
| | | import axios from "axios"; |
| | | import { getToken } from "@/utils/auth.js"; |
| | | import PIMTable from "@/components/PIMTable/PIMTable.vue"; |
| | | import filePreview from "@/components/filePreview/index.vue"; |
| | |
| | | Authorization: "Bearer " + getToken(), |
| | | }); |
| | | const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/file/upload"); |
| | | const currentWorkOrderNo = ref(""); |
| | | |
| | | const beforeUpload = file => { |
| | | const isImage = file?.type?.startsWith("image/"); |
| | |
| | | const openDialog = row => { |
| | | dialogVisible.value = true; |
| | | currentWorkOrderId.value = row.id; |
| | | currentWorkOrderNo.value = row.workOrderNo || row.work_order_no || ""; |
| | | page.current = 1; |
| | | getList(); |
| | | }; |
| | |
| | | proxy.$modal.msgError("文件上传失败"); |
| | | } |
| | | |
| | | const createWatermarkImage = async file => { |
| | | const sourceImage = await loadImage(URL.createObjectURL(file)); |
| | | const canvas = document.createElement("canvas"); |
| | | const width = sourceImage.naturalWidth || sourceImage.width; |
| | | const height = sourceImage.naturalHeight || sourceImage.height; |
| | | canvas.width = width; |
| | | canvas.height = height; |
| | | const ctx = canvas.getContext("2d"); |
| | | ctx.drawImage(sourceImage, 0, 0, width, height); |
| | | |
| | | const watermarkText = [ |
| | | "天津市玮苓乐器有限公司", |
| | | `${new Date().toLocaleString()}`, |
| | | ]; |
| | | |
| | | ctx.save(); |
| | | ctx.globalAlpha = 0.28; |
| | | ctx.fillStyle = "#ffffff"; |
| | | ctx.font = `bold ${Math.max(18, Math.floor(width / 28))}px Arial`; |
| | | ctx.textAlign = "right"; |
| | | ctx.textBaseline = "bottom"; |
| | | const padding = Math.max(24, Math.floor(width / 40)); |
| | | const lineHeight = Math.max(24, Math.floor(width / 20)); |
| | | const x = width - padding; |
| | | const y = height - padding; |
| | | watermarkText.reverse().forEach((text, index) => { |
| | | ctx.fillText(text, x, y - index * lineHeight); |
| | | }); |
| | | ctx.restore(); |
| | | |
| | | const blob = await new Promise(resolve => canvas.toBlob(resolve, file.type || "image/jpeg", 0.92)); |
| | | return new File([blob], file.name, { type: file.type || "image/jpeg" }); |
| | | }; |
| | | |
| | | const loadImage = src => |
| | | new Promise((resolve, reject) => { |
| | | const image = new Image(); |
| | | image.crossOrigin = "anonymous"; |
| | | image.onload = () => resolve(image); |
| | | image.onerror = reject; |
| | | image.src = src; |
| | | }); |
| | | |
| | | const uploadFile = async options => { |
| | | try { |
| | | const watermarkedFile = await createWatermarkImage(options.file); |
| | | const formData = new FormData(); |
| | | formData.append("file", watermarkedFile); |
| | | const response = await axios.post(uploadUrl.value, formData, { |
| | | headers: { |
| | | "Content-Type": "multipart/form-data", |
| | | Authorization: "Bearer " + getToken(), |
| | | }, |
| | | }); |
| | | options.onSuccess(response.data); |
| | | } catch (error) { |
| | | options.onError(error); |
| | | } |
| | | }; |
| | | |
| | | const handleDelete = () => { |
| | | if (selectedRows.value.length === 0) { |
| | | proxy.$modal.msgWarning("请选择数据"); |
| | |
| | | </script> |
| | | |
| | | <style scoped></style> |
| | | |