档案管理

package.json

@@ -39,6 +39,7 @@
     "jsencrypt": "3.0.0-rc.1",
     "lodash": "^4.17.21",
     "nprogress": "0.2.0",
+    "pdfjs-dist": "^5.4.149",
     "quill": "2.0.2",
     "screenfull": "5.0.2",
     "sm-crypto": "^0.3.13",
@@ -47,6 +48,7 @@
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
+    "vue-pdf": "^4.3.0",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0"

src/views/archivesManagement/fileManager/components/addTableData.vue

@@ -256,7 +256,7 @@ export default {
                 return false
             }
             if (!isValidSize) {
-                this.$message.error('文件大小不能超过10MB！')
+                this.$message.error('文件大小不能超过`${this.maxFileTips}`！')
                 return false
             }
             
@@ -275,8 +275,6 @@ export default {
                 'image/jpeg',
                 'image/jpg', 
                 'image/png',
-                'image/gif',
-                'image/bmp'
             ]
             return allowedTypes.includes(file.type)
         },

src/views/archivesManagement/fileManager/components/rightTable.vue

@@ -12,13 +12,13 @@
                     @click="handleAdd" :disabled="addBtnIsShow">
                     新增
                 </el-button>
+                <el-button plain size="mini" type="primary" icon="el-icon-plus" v-hasPermi="['file:manage:add']"
+                    @click="viewFile">
+                    预览文件
+                </el-button>
             </template>
 
             <template slot="handle" slot-scope="{ data }">
-                <el-button plain size="mini" type="success" icon="el-icon-warning-outline" v-hasPermi="['file:manage:query']"
-                    @click="handleDetail(data)">
-                    详情
-                </el-button>
                 <el-button plain size="mini" type="primary" icon="el-icon-edit" v-hasPermi="['file:manage:update']"
                     @click="handleUpdate(data)">
                     修改
@@ -29,9 +29,11 @@
                 </el-button>
             </template>
         </TableModel>
-        <!-- 新增/编辑 -->
+            <!-- 新增/编辑 -->
-        <AddTableData v-if="isflag" :isAdd="isAdd" :rowData="row" @handleQuery="handleQuery" :title="title"
+            <AddTableData v-if="isflag" :isAdd="isAdd" :rowData="row" @handleQuery="handleQuery" :title="title"
-            @closeDialog="closeDialog" @showColose="showColose" :dataForm="row" :width="600" :projectId="projectId" />
+                @closeDialog="closeDialog" @showColose="showColose" :dataForm="row" :width="600" :projectId="projectId" />
+            <!-- 预览文件 -->
+            <ViewFile v-if="isViewflag" :rowData="row" :title="title" @closeDialog="closeDialog" @showColose="showColose" :width="600" />
         </el-card>
     </div>
 </template>
@@ -44,6 +46,7 @@ import {
     getFileManageApi,
 } from '@/api/archivesManagement/fileManager/fileManager.js'
 import AddTableData from './addTableData'
+import ViewFile from '@/views/viewFile/viewFile.vue'
 
 
 export default {
@@ -60,7 +63,8 @@ export default {
     },
     components: {
         TableModel,
-        AddTableData
+        AddTableData,
+        ViewFile
     },
     data() {
         return {
@@ -69,6 +73,7 @@ export default {
             getFileManageApi,
             title: "",
             isflag: false,
+            isViewflag: false,
             isAdd: '',
             row: {},
             loading: false,
@@ -85,14 +90,14 @@ export default {
         
         closeDialog() {
             this.isflag = false;
+            this.isViewflag = false; 
         },
         showColose() {
             this.isflag = false;
+            this.isViewflag = false; 
         },
         /** 新增按钮操作 */
         handleAdd() {
-            console.log(this.selectedNode);
-            
             this.title = "新增";
             this.isAdd = 'add';
             this.isflag = true;
@@ -112,14 +117,12 @@ export default {
             this.isflag = true;
         },
         
-        /** 详情操作 */
+        // 预览文件
-        handleDetail(row) {
+        viewFile(row) {
-            this.title = "详情";
+            this.title = "预览";
-            this.isAdd = 'detail';
+            this.isAdd = 'view';
             this.row = row;
-            this.row.belongName = this.selectedNode.label + '/' + this.selectedNode.parentName
+            this.isViewflag = true;
-            this.row.detailStatus = true;
-            this.isflag = true;
         },
         /* 搜索操作 */
         handleQuery() {

src/views/viewFile/viewFile.vue

@@ -0,0 +1,115 @@
+<template>
+    <!-- 预览文件 -->
+    <el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
+               :closeOnClickModal="false" @close="handleClose" :append-to-body="true">
+      <div style="text-align:center">
+        <!-- 图片预览 -->
+        <template v-if="isImage">
+          <el-image
+            :src="fileUrl"
+            :preview-src-list="previewList"
+            fit="contain"
+            style="max-width:100%;max-height:70vh"
+          >
+            <div slot="error" class="image-slot">
+              <i class="el-icon-picture-outline"></i>
+            </div>
+          </el-image>
+        </template>
+  
+        <!-- PDF 预览 -->
+        <template v-else>
+          <pdf :src="fileUrl" style="width:100%;height:70vh" />
+        </template>
+      </div>
+    </el-dialog>
+  </template>
+<script>
+import pdf from 'vue-pdf'
+
+export default {
+  name: 'ViewFile',
+  props: ['width','hight','dataForm','title','disabled','isAdd','rowData','projectId'],
+  data() {
+    return {
+      dialogVisible: true,
+      lDialog: this.width > 500 ? "w700" : "w500",
+      fileUrl: '',           // 实际文件地址
+      fileName: '',          // 用于从文件名判断类型
+      previewList: []        // 预览组（可只放当前图片）
+    }
+  },
+  computed: {
+    isImage() {
+      // 允许的图片类型
+      const exts = ['.jpg','.jpeg','.png','.gif','.bmp','.webp']
+      const url = (this.fileUrl || '').toLowerCase()
+      const name = (this.fileName || '').toLowerCase()
+      return exts.some(ext => url.endsWith(ext) || name.endsWith(ext))
+    }
+  },
+  created() {
+    // 从 rowData 或 dataForm 里取文件信息（根据你现有数据结构调整）
+    // 例如：
+    this.fileUrl = this.rowData?.fileUrl || this.dataForm?.fileUrl || ''
+    this.fileName = this.rowData?.fileName || this.dataForm?.fileName || ''
+    // 预览组（如果你有多张，可放数组；没有就放当前一张）
+    if (this.isImage && this.fileUrl) {
+      this.previewList = [this.fileUrl]
+    }
+  },
+  methods: {
+    handleClose() {
+      this.dialogVisible = false
+      this.$emit('closeDialog')
+    }
+  },
+  components: { pdf }
+}
+</script>
+<style lang="scss">
+.w700 .el-dialog {
+    width: 700px;
+    height: 800px;
+}
+
+.w500 .el-dialog {
+    width: 500px;
+    height: 800px;
+}
+
+.w500 .el-dialog__header,
+.w700 .el-dialog__header {
+    // background: #eeeeee;
+
+    .el-dialog__title {
+        font-size: 16px;
+    }
+}
+
+.yxq .el-range-separator {
+    margin-right: 7px !important;
+}
+
+.el-date-editor--daterange.el-input__inner {
+    width: 260px;
+}
+
+.form-item {
+    width: 100%;
+}
+
+.select-style {
+    display: flex;
+    justify-content: space-between;
+}
+.image-slot {
+  width: 100%;
+  height: 240px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #909399;
+  font-size: 24px;
+}
+</style>