新增xls文件预览

web/src/components/file/file/useFileData.js

@@ -176,9 +176,9 @@ export default function useFileData() {
         // 如果是文件且格式支持预览, 则进行预览, 格式不支持预览, 则直接进行下载 (ftp 模式不支持预览, 全部是下载)
         if (row.type === 'FILE') {
             const { batchDownloadFile } = useFileOperator();
-
             // 获取文件类型
             let fileType = row.fileType;
+            // debugger
             switch (fileType) {
                 case 'video': openVideo(); break;
                 case 'image': openImage(row); break;

web/src/views/component/Viewfile.vue

@@ -22,7 +22,7 @@
         <!-- 预览文件的地方（用于渲染） -->
         <div ref="file" :class="{ 'fullscreen-doc': fullscreen }"></div>
       </div>
-      <div v-if="props.type == 'xlsx'" v-loading="loading" element-loading-text="正在加载报告..."
+      <div v-if="props.type == 'xlsx' || props.type == 'xls' " v-loading="loading" element-loading-text="正在加载报告..."
         element-loading-background="rgba(122, 122, 122, 0.8)" class="docWrap">
         <div class="tab">
           <el-radio-group size="small" v-model="excel.sheetNameActive" @change="getSheetNameTable">
@@ -191,7 +191,7 @@ function init(type) {
         loading.value = false;
       });
 
-  } else if (type == "xlsx") {
+  } else if (type == "xlsx"|| type == "xls") {
     // //表格
     loading.value = true;
     axios.request({
@@ -200,7 +200,7 @@ function init(type) {
       responseType: "arraybuffer", //告诉服务器想到的响应格式
       headers: {
         "Content-Type":
-          "application/vnd.ms-excel;application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+          "application/vnd.ms-excel;",
       }
     }).then((res) => {
       if (res) {

web/src/views/special/document/index.vue

@@ -287,6 +287,7 @@ const fileObj: any = ref({
 //上传组件
 const upfile = ref(false)
 function openFile() {
+    title.value = "上传文件"
     localStorage.setItem('filepath', findPathById(treedata.value, pathid.value));
     localStorage.setItem('storageKey', JSON.stringify(['minio']));
     upfile.value = true
@@ -304,6 +305,7 @@ function openFile() {
 //修改文件
 const judge = ref(false)
 function editfile(row: any, item: any) {
+    // debugger
     upfile.value = true
     fileObj.value = JSON.parse(JSON.stringify(row))
     if (item) {
@@ -581,7 +583,7 @@ const isViewfile = ref(false)
 const fileType = ref('')
 function openPreview(row: any) {
 
-    if (getFileExtension(row.fileName) == 'pdf' || getFileExtension(row.fileName) == 'xlsx' || getFileExtension(row.fileName) == 'docx' || getFileExtension(row.fileName) == 'doc' || getFileExtension(row.fileName) == 'bin') {
+    if (getFileExtension(row.fileName) == 'pdf' || getFileExtension(row.fileName) == 'xlsx'|| getFileExtension(row.fileName) == 'xls' || getFileExtension(row.fileName) == 'docx' || getFileExtension(row.fileName) == 'doc' || getFileExtension(row.fileName) == 'bin') {
         title1.value = row.fileName
         ViewfileUrl.value = row.url
         isViewfile.value = true
@@ -661,9 +663,9 @@ const FILE_ICONS = {
     txt: TextImg
 };
 // 获取文件图标
-const fileIcon = (filename: string) => {
+const fileIcon = (row:any) => {
-    const ext = filename.split('.').pop()?.toLowerCase() || 'unknown';
+    const ext = row.fileName.split('.').pop()?.toLowerCase() || 'unknown';
-    return FILE_ICONS[ext as keyof typeof FILE_ICONS] || require('@/assets/fileimg/text_line.png');
+    return FILE_ICONS[ext as keyof typeof FILE_ICONS] || (row.type == 'ZIP' ? ZipImg : TextImg);
 };
 // 判断是否可预览（基于文件图标映射表）
 const shouldPreview = (filename: string): boolean => {
@@ -747,19 +749,19 @@ const shouldPreview = (filename: string): boolean => {
                 <el-table-column prop="fileName" label="预览" width="80" align="center">
                     <template #default="{ row }">
                         <div class="preview-icon">
-                            <img :src="fileIcon(row.fileName)" alt="file icon" class="file-icon"
+                            <img :src="fileIcon(row)" alt="file icon" class="file-icon"
                                 @click="shouldPreview(row.fileName) && openPreview(row)">
                         </div>
                     </template>
                 </el-table-column>
                 <el-table-column prop="uploader" width="80" label="上传人"></el-table-column>
                 <el-table-column prop="uploadTime" width="170" label="上传时间"></el-table-column>
-                <el-table-column fixed="right" label="操作" width="100" align="center">
+                <el-table-column  label="操作" width="100" align="center">
                     <template #default="scope">
                         <span
                             style="display: flex;display: -webkit-flex;justify-content: space-between;-webkit-justify-content: space-between; ">
-                            <img src="@/assets/project/chong.png" alt="" title="重命名" @click="editfile(scope.row, false)"
+                            <!-- <img src="@/assets/project/chong.png" alt="" title="重命名" @click="editfile(scope.row, false)"
-                                style="cursor: pointer;">
+                                style="cursor: pointer;"> -->
                             <img src="@/assets/MenuIcon/lbcz_xg.png" alt="" @click="editfile(scope.row, true)" title="修改"
                                 style="cursor: pointer;">
                             <img src="@/assets/MenuIcon/lbcz_sc.png" alt="" @click="delfile(scope.row)" title="删除"
@@ -790,7 +792,7 @@ const shouldPreview = (filename: string): boolean => {
                 </el-form-item>
             </el-form>
         </el-dialog>
-        <el-dialog title="上传文件" v-model="upfile" width="50%" :before-close="fileClose" top="30px" draggable
+        <el-dialog :title="title" v-model="upfile" width="50%" :before-close="fileClose" top="30px" draggable
             destroy-on-close>
             <el-scrollbar :height="!fileObj.id ? '400px' : ''">
                 <el-form ref="ruleFormRef" style="max-width: 100%" :model="fileObj" :rules="moderqqqules"
@@ -801,7 +803,7 @@ const shouldPreview = (filename: string): boolean => {
                         <ZUpload />
                     </el-form-item>
                     <el-form-item v-else prop="fileName"  label="文件名称:">
-                        <el-input v-model="fileObj.fileName" />
+                        <el-input v-model="fileObj.fileName" disabled />
                     </el-form-item>
                     <el-form-item v-if="judge" label="关键字:" prop="taskName">
                         <el-input v-model="fileObj.keywords" />