下载验收报告单

src/utils/tool.js

@@ -287,6 +287,40 @@ export function downloadByUrl(url, filename) {
   window.URL.revokeObjectURL(url);
 }
 
+export function urlToBlob(url, cb) {
+  const xhr = new XMLHttpRequest();
+  xhr.open('GET', url, true);
+  xhr.responseType = 'blob';
+  xhr.onload = function () {
+    if (xhr.status == 200) {
+      cb(URL.createObjectURL(xhr.response));
+    }
+  };
+  xhr.send();
+}
+
+export function saveAs(blob, filename) {
+  if (window.navigator.msSaveOrOpenBlob) {
+    navigator.msSaveBlob(blob, filename);
+  } else {
+    console.log('blob', blob);
+    var link = document.createElement('a');
+    var body = document.querySelector('body');
+    link.href = blob;
+    link.download = filename;
+    link.style.display = 'none';
+    body.appendChild(link);
+    link.click();
+    body.removeChild(link);
+    window.URL.revokeObjectURL(link.href);
+  }
+}
+
+export function downloadByCrossUrl(url, filename) {
+  urlToBlob(url, (blob) => {
+    saveAs(blob, filename);
+  });
+}
 /**
  * 对象转url参数
  * @param {*} data

src/views/sop/components/dynamic-form-item/UPLOAD_IMAGE.vue

@@ -1,28 +1,35 @@
 <template>
-  <t-upload
-    ref="uploadRef3"
-    v-model="files"
-    :theme="theme"
-    :tips="`最多只能上传 ${config.length || 3} 张图片`"
-    accept="image/*"
-    :abridge-name="[6, 6]"
-    :auto-upload="true"
-    :upload-all-files-in-one-request="false"
-    multiple
-    :max="config.length || 3"
-    :disabled="!config.writable"
-    :before-upload="handleBeforeUpload"
-    :request-method="upload"
-    @fail="handleFail"
-    @change="handleChange"
-  >
-  </t-upload>
+  <div>
+    <t-upload
+      ref="uploadRef3"
+      v-model="files"
+      :theme="theme"
+      :tips="`最多只能上传 ${config.length || 3} 张图片`"
+      accept="image/*"
+      :abridge-name="[6, 6]"
+      :auto-upload="true"
+      :upload-all-files-in-one-request="false"
+      multiple
+      :max="config.length || 3"
+      :disabled="!config.writable"
+      :before-upload="handleBeforeUpload"
+      :request-method="upload"
+      @fail="handleFail"
+      @change="handleChange"
+      :show-image-file-name="true"
+    >
+    </t-upload>
+    <div class="m-t-5px" v-if="isYSBG">
+      <t-link theme="primary" @click="downloadAll">下载验收报告单</t-link>
+    </div>
+  </div>
 </template>
 <script setup name="UploadImage">
-import { ref, watch, onMounted } from 'vue';
+import { ref, watch, onMounted, computed } from 'vue';
 import { MessagePlugin } from 'tdesign-vue-next';
 import { uploadFiles } from '@/api/common';
 import { getFileMD5 } from '@/utils/crypto';
+import { downloadByCrossUrl } from '@/utils/tool';
 
 const props = defineProps({
   theme: {
@@ -42,6 +49,14 @@ const props = defineProps({
     type: Object,
   },
   modelValue: { type: Array },
+  sop: { type: Object },
+});
+const isYSBG = computed(() => {
+  return (
+    props.config?.formName?.startsWith('upload_check_report_photos') &&
+    !props.config.writable &&
+    files.value.length
+  );
 });
 const emit = defineEmits(['update:modelValue', 'change']);
 
@@ -97,6 +112,17 @@ const handleChange = () => {
 onMounted(() => {
   files.value = props.config.value || [];
 });
+const downloadAll = () => {
+  console.log('sop', props.sop);
+  files.value.forEach((item, index) => {
+    let number = index == 0 ? '' : index + 1 + '';
+    downloadByCrossUrl(
+      item.previewUrl,
+      // 'https://cet-test.markingtool.cn/file/slice/1/1/10102/1/013/1/101021221201302-1.jpg',
+      props.sop?.customName ? props.sop.customName + number : ''
+    );
+  });
+};
 // watch(
 //   () => props.modelValue,
 //   (val, oldval) => {