代码上传

src/components/detailTemplate/modules/files.vue

@@ -21,10 +21,27 @@
     </a-space> -->
     <a-table :dataSource="listData" :columns="columns">
       <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'document'">
+          <a-space :size="[10,10]">
+            <div class="image-panel panel">
+              <a-image
+                v-if="fileType(record) == '图片'"
+                :width="40"
+                :height="40"
+                :src="record.url"
+              />
+              <PlayCircleFilled style="font-size: 30px;" v-else-if="fileType(record) == '视频'"/>
+              <FileTextFilled style="font-size: 30px;" v-else-if="fileType(record) == '文本'"/>
+              <FileWordFilled style="font-size: 30px;" v-else-if="fileType(record) == 'office'"/>
+              <FileUnknownFilled style="font-size: 30px;" v-else/>
+            </div>
+            <span>{{record.document}}{{fileType(record)}}</span>
+          </a-space>
+        </template>
         <template v-if="column.key === 'op'">
-          <a-space>
-            <a :href="record.url">下载</a>
-            <a type="link" @click="deleteFiledeleteFileLink(record)">删除</a>
+          <a-space :size="[10,10]">
+            <a :href="record.url" target="_blank">预览</a>
+            <a type="link" v-if="isShow" @click="deleteFiledeleteFileLink(record)">删除</a>
           </a-space>
         </template>
       </template>
@@ -33,13 +50,30 @@
 </div>
 </template>
 <script setup>
+import { PlayCircleFilled, FileTextFilled,FileWordFilled,FileUnknownFilled } from '@ant-design/icons-vue';
 import upload from '@/components/upload/index.vue'
 import {defineProps, ref,onMounted,computed} from 'vue'
 
 import { useRouter } from "vue-router";
 import Api from '@/api/api'
 import utils from '@/utils/utils'
-
+const fileType = (item)=>{
+  const isImage = item.url.match(/\.(jpg|jpeg|png|gif|svg)$/i) !== null;
+  const isVideo = item.url.match(/\.(mp4|avi|mkv|flv|mov)$/i) !== null;
+  const isText = item.url.match(/\.(txt|md|csv|xml)$/i) !== null;
+  const isOffice = item.url.match(/\.(doc|docx|xls|xlsx|ppt|pptx)$/i) !== null;
+  if (isImage) {
+    return '图片';
+  } else if (isVideo) {
+    return '视频';
+  } else if (isText) {
+    return '文本';
+  } else if (isOffice) {
+    return 'office';
+  } else {
+    return '其他';
+  }
+}
 const columns = [
 {
   title: '附件名称',
@@ -122,15 +156,15 @@ onMounted(()=>{
 .image-panel{
   display: flex;
   align-items: center;
-  width: 200px;
-  height: 200px;
-  border:1px solid #f1f2f3;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
   overflow: hidden;
-  font-size: 0px;
+  
 }
 .file-panel{
-  height:200px;
-  width: 200px;
+  height:40px;
+  width: 40px;
   font-size: 12px;
 }
 </style>