低代码组件增加文件类型

src/Dynamic/ConfigRenderComponent/DForm/FormItem/DAttachment.vue

@@ -2,7 +2,7 @@
  * @Author: zong.wang01@hand-china.com
  * @Date: 2024-08-01 09:55:12
  * @LastEditors: zong.wang01@hand-china.com
- * @LastEditTime: 2024-08-22 14:06:55
+ * @LastEditTime: 2024-09-19 16:27:20
  * @Version: 1.0.0
  * @Description: 动态渲染-附件组件
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -10,7 +10,7 @@
 <template>
   <div class="d-attachment">
    <div class="attachment-preview" v-for="(file, index) in fileList" :key="file.fileUrl" @click="preview(file)">
-      <img src="../../../assets/pdf.svg" class="file-type-icon"/>
+      <img :src="file.imgIcon" class="file-type-icon"/>
       <div class="file-content">
         <div class="file-name">{{file.fileName}}</div>
         <div class="file-info">{{file.realName}} {{file.creationDate}}</div>
@@ -38,6 +38,14 @@
 import { Button, Uploader, ImagePreview, Toast } from 'vant';
 import {getAttachUUid, upload, getAttachments, deleteAttachment} from '../../../service';
 import {getOrganizationId} from '../../../utils/utils';
+import pdfIcon from '../../../assets/pdf.svg';
+import excelIcon from '../../../assets/excel.png';
+import otherIcon from '../../../assets/other-file.png';
+import pptIcon from '../../../assets/ppt.png';
+import rarIcon from '../../../assets/rar.png';
+import txtIcon from '../../../assets/txt.png';
+import wordIcon from '../../../assets/word.png';
+import imgIcon from '../../../assets/image.png';
 
 export default {
   name: 'DAttachment',
@@ -134,9 +142,41 @@ export default {
         bucketName: this.bucketName
       }
       const res = await getAttachments(params);
-      this.fileList = res;
+      this.fileList = res.map(o => ({
+        ...o,
+        imgIcon: this.getFileIcon(o.fileName)
+      }));
       this.$emit('loadAttachments', this.fileList);
     },
+    getFileIcon(name) { // 获取文件图标
+      const fileType = (name || '').split('.').pop().toLowerCase();
+      const imgs = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'];
+      const excels = ['xlsx', 'xlsm', 'xls', 'csv'];
+      const words = ['doc', 'docm', 'docx', 'dotx', 'dotm'];
+
+      if (['ppt', 'pptx'].includes(fileType)) {
+        return pptIcon;
+      }
+      if ('pdf' === fileType) {
+        return pdfIcon;
+      }
+      if ('txt' === fileType) {
+        return txtIcon;
+      }
+      if (['rar', 'zip'].includes(fileType)) {
+        return rarIcon;
+      }
+      if (imgs.includes(fileType)) {
+        return imgIcon;
+      }
+      if (excels.includes(fileType)) {
+        return excelIcon;
+      }
+      if (words.includes(fileType)) {
+        return wordIcon;
+      }
+      return otherIcon;
+    },
     deleteFile(e, file, index){ // 删除附件  
       e.stopPropagation();
       e.preventDefault();
@@ -151,8 +191,8 @@ export default {
       })
     },
     preview(file) { // 预览
-      if (this.imgTypes.includes(file.fileType)) {
-        const images = this.fileList.filter( o => this.imgTypes.includes(o.fileType)).map(e => e.fileUrl);
+      if (file.fileType.startsWith('image/')) {
+        const images = this.fileList.filter( o => o.fileType.startsWith('image/')).map(e => e.fileUrl);
         const index = images.findIndex(o => o === file.fileUrl);
         ImagePreview({
           images: images,

src/Dynamic/assets/pdf copy.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>PDF</title>
+    <g id="整理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="附件、超链接" transform="translate(-36.000000, -775.000000)">
+            <g id="编组-4" transform="translate(22.000000, 761.000000)">
+                <g id="PDF" transform="translate(14.000000, 14.000000)">
+                    <rect id="矩形" x="0" y="0" width="50" height="50"></rect>
+                    <g id="Pdf" transform="translate(3.000000, 1.000000)" fill-rule="nonzero">
+                        <path d="M40.4797978,42.5238131 C40.4797978,43.1173924 40.2428257,43.6866602 39.8210797,44.1063842 C39.3993337,44.5261081 38.8273234,44.7619066 38.2308845,44.7619066 L6.74662669,44.7619066 C6.1501878,44.7619066 5.5781775,44.5261081 5.15643152,44.1063842 C4.73468555,43.6866602 4.49775114,43.1173924 4.49775114,42.5238131 L4.49775114,2.23813094 C4.49775114,1.64455165 4.73468555,1.07528381 5.15643152,0.655559865 C5.5781775,0.235835917 6.1501878,0 6.74662669,0 L26.0644678,0 C26.6622256,-0.00340194813 27.2367642,0.230143652 27.6611694,0.649084563 L39.8275862,12.7571702 C40.2485454,13.1795405 40.4832161,13.7513246 40.4797978,14.3462165 L40.4797978,42.5238131 L40.4797978,42.5238131 Z" id="路径" fill="#EBECF0"></path>
+                        <path d="M40.4797601,42.5238131 L40.4797601,44.7619066 C40.4797601,45.3554859 40.2428257,45.9247537 39.8210797,46.3444776 C39.3993337,46.7642016 38.8273234,47 38.2308845,47 L6.74662669,47 C5.50460702,47 4.49775114,45.9979714 4.49775114,44.7619066 L4.49775114,42.5238131 C4.49775114,43.1173924 4.73468555,43.6866602 5.15643152,44.1063842 C5.5781775,44.5261081 6.1501878,44.7619066 6.74662669,44.7619066 L38.2308845,44.7619066 C38.8273234,44.7619066 39.3993337,44.5261081 39.8210797,44.1063842 C40.2428257,43.6866602 40.4797601,43.1173924 40.4797601,42.5238131 L40.4797601,42.5238131 Z" id="路径" fill="#C1C7D0"></path>
+                        <path d="M0,24.6190655 L44.9775112,24.6190655 L44.9775112,35.8095327 C44.9775112,36.403112 44.7405768,36.9723798 44.3188308,37.3921038 C43.8970849,37.8118277 43.3250746,38.0476262 42.7286357,38.0476262 L2.24887555,38.0476262 C1.65243666,38.0476262 1.08042636,37.8118277 0.658680381,37.3921038 C0.236934404,36.9723798 0,36.403112 0,35.8095327 L0,24.6190655 L0,24.6190655 Z" id="路径" fill="#FF5630"></path>
+                        <path d="M4.49775114,24.6190655 L4.49775114,20.1428785 L0,24.6190655 L4.49775114,24.6190655 Z M40.4797601,24.6190655 L40.5247376,20.1428785 L45,24.6190655 L40.4797601,24.6190655 Z" id="形状" fill="#DE350B"></path>
+                        <path d="M11.2443778,26.8571589 L15.1574213,26.8571589 C15.8731951,26.8238425 16.5716617,27.082491 17.0914543,27.5733488 C17.5904628,28.0702365 17.8593128,28.7513009 17.8335832,29.4533473 C17.8566013,30.1549309 17.5881597,30.8349605 17.0914543,31.3333458 C16.5532152,31.8405623 15.8303537,32.1073046 15.089955,32.0719167 L12.8410795,32.0719167 L12.8410795,35.5857234 L11.2443778,35.5857234 L11.2443778,26.8571589 Z M12.7511245,30.6171559 L14.7751124,30.6171559 C15.193486,30.649898 15.6113515,30.5478941 15.9670165,30.3262038 C16.2260019,30.0941595 16.3594362,29.7538735 16.3268366,29.4085855 C16.3268366,28.6476337 15.8245877,28.2671578 14.8200899,28.2671578 L12.7511245,28.2671578 L12.7511245,30.6171559 Z M18.9355322,26.9914445 L22.4887556,26.9914445 C23.5198269,26.9481413 24.5140912,27.3769235 25.1874063,28.1552531 C25.89871,29.0412282 26.2587805,30.1560768 26.1994003,31.288584 C26.2489542,32.4334123 25.9081677,33.5612921 25.2323838,34.4890576 C24.5884114,35.3475176 23.5647776,35.8401801 22.4887556,35.8095327 L18.9355322,35.8095327 L18.9355322,26.9914445 Z M20.4422789,34.2876292 L22.4887556,34.2876292 C23.1383831,34.3109611 23.7589338,34.0188645 24.1529235,33.5042965 C24.5860955,32.8659952 24.7919483,32.1016878 24.7376312,31.3333458 C24.8125728,30.5355326 24.5882817,29.7383334 24.107946,29.0952523 C23.6713344,28.600419 23.0379035,28.3220632 22.3763118,28.3343006 L20.4422789,28.3343006 L20.4422789,34.2876292 Z M33.7331334,28.4014434 L29.077961,28.4014434 L29.077961,30.4828703 L33.7331334,30.4828703 L33.7331334,31.9152501 L29.077961,31.9152501 L29.077961,35.6752471 L27.5712144,35.6752471 L27.5712144,26.9466826 L33.7331334,26.9466826 L33.7331334,28.4014434 Z" id="形状" fill="#FFFFFF"></path>
+                        <path d="M40.4797601,14.3462165 L40.4797601,14.6595496 L28.3133433,14.6595496 C27.0713236,14.6595496 26.0644678,13.657521 26.0644678,12.4214561 L26.0644678,0 C26.6622256,-0.00340194813 27.2367642,0.230143652 27.6611694,0.649084563 L39.8500749,12.7571702 C40.2628079,13.1831735 40.4892116,13.7545161 40.4797601,14.3462165 L40.4797601,14.3462165 Z" id="路径" fill="#C1C7D0"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file