huminmin
2026-07-15 a52ebf49d0a304697ec7af4f4c3e6b6e13f269e7
src/views/productionManagement/workOrder/components/filesDia.vue
@@ -5,7 +5,7 @@
        <el-upload
          v-model:file-list="fileList"
          class="upload-demo"
          :action="uploadUrl"
          :http-request="uploadFile"
          :on-success="handleUploadSuccess"
          :on-error="handleUploadError"
          :before-upload="beforeUpload"
@@ -46,6 +46,7 @@
<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";
@@ -104,6 +105,7 @@
  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/");
@@ -116,6 +118,7 @@
const openDialog = row => {
  dialogVisible.value = true;
  currentWorkOrderId.value = row.id;
  currentWorkOrderNo.value = row.workOrderNo || row.work_order_no || "";
  page.current = 1;
  getList();
};
@@ -171,6 +174,66 @@
  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("请选择数据");
@@ -199,4 +262,3 @@
</script>
<style scoped></style>