资料填报页面-边界图片增加下载功能

src/components/Form/src/jeecg/components/JImageUpload.vue

@@ -13,9 +13,9 @@
       @change="handleChange"
       @preview="handlePreview"
       @download="handleDownload"
-      :showUploadList="true"
+      :showUploadList="uploadListShowConfig"
     >
-    <template #downloadIcon>download</template>
+      <template #downloadIcon><DownloadOutlined /></template>
       <div v-if="uploadVisible && buttonVisible">
         <div v-if="listType == 'picture-card'">
           <LoadingOutlined v-if="loading" />
@@ -35,19 +35,19 @@
 </template>
 <script lang="ts">
   import { defineComponent, PropType, ref, reactive, watchEffect, computed, unref, watch, onMounted } from 'vue';
-  import { LoadingOutlined, UploadOutlined } from '@ant-design/icons-vue';
+  import { LoadingOutlined, UploadOutlined, DownloadOutlined } from '@ant-design/icons-vue';
   import { useRuleFormItem } from '/@/hooks/component/useFormItem';
   import { propTypes } from '/@/utils/propTypes';
   import { useAttrs } from '/@/hooks/core/useAttrs';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { getFileAccessHttpUrl, getRandom } from '/@/utils/common/compUtils';
-  import { uploadUrl } from '/@/api/common/api';
+  import { uploadUrl, downloadFile } from '/@/api/common/api';
   import { getToken } from '/@/utils/auth';
 
   const { createMessage, createErrorModal } = useMessage();
   export default defineComponent({
     name: 'JImageUpload',
-    components: { LoadingOutlined, UploadOutlined },
+    components: { LoadingOutlined, UploadOutlined, DownloadOutlined },
     inheritAttrs: false,
     props: {
       //绑定值
@@ -127,6 +127,18 @@
         return uploadFileList.value.length < props['fileMax'];
       });
 
+      /** 照片墙模式显示下载图标 */
+      const uploadListShowConfig = computed(() => {
+        if (props.listType === 'picture-card') {
+          return {
+            showPreviewIcon: true,
+            showRemoveIcon: true,
+            showDownloadIcon: true,
+          };
+        }
+        return true;
+      });
+
       /**
        * 监听value变化
        */
@@ -231,19 +243,28 @@
         previewVisible.value = true;
       }
       /**
-       * 下载图片
+       * 下载图片（走系统下载接口，支持需登录的静态资源）
        */
       function handleDownload(file) {
-        console.log('download',file)
-        let url = file.url;
-        let link = document.createElement('a');
-        link.style.display = 'none';
-        link.href = url;
-        link.setAttribute('download', fileName);
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link); //下载完成移除元素
-        window.URL.revokeObjectURL(url); //释放掉blob对象
+        let relativePath = file?.response?.message;
+        if (!relativePath && file?.url) {
+          const u = String(file.url);
+          const marker = '/sys/common/static/';
+          const idx = u.indexOf(marker);
+          if (idx !== -1) {
+            relativePath = u.substring(idx + marker.length);
+          }
+        }
+        if (!relativePath) {
+          createMessage.warning('无法下载该文件');
+          return;
+        }
+        const normalized = String(relativePath).replace(/^\/+/, '');
+        const url = `/sys/common/static/${normalized}`;
+        const name = file?.name || getFileName(relativePath);
+        downloadFile(url, name).catch(() => {
+          createMessage.error('下载失败');
+        });
       }
 
       function getAvatarView() {
@@ -273,6 +294,7 @@
         handleCancel,
         handleChange,
         handleDownload,
+        uploadListShowConfig,
         getAvatarView
       };
     },