From f6948fae619e191bc38927511c5f51ca7223dbc4 Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Fri, 24 Oct 2025 13:48:25 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BA=9F=E5=BC=83=E4=BB=A3=E7=A0=81=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/common/fileTree.vue   | 360 --------------------------
 src/views/viewFile/viewFile.vue | 441 --------------------------------
 2 files changed, 801 deletions(-)
 delete mode 100644 src/views/common/fileTree.vue
 delete mode 100644 src/views/viewFile/viewFile.vue

diff --git a/src/views/common/fileTree.vue b/src/views/common/fileTree.vue
deleted file mode 100644
index 3322986..0000000
--- a/src/views/common/fileTree.vue
+++ /dev/null
@@ -1,360 +0,0 @@
-<template>
-    <!-- 小型弹窗，用于完成，删除，保存等操作 -->
-    <el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
-        :closeOnClickModal="false" @close="handleClose" :append-to-body="true">
-        <el-row :gutter="24" style="display: flex; align-items: center">
-                <el-col :span="16">
-                    <el-input v-model="filterText" placeholder="输入关键字" @keyup.enter.native="onHandleSearch">
-                    </el-input>
-                </el-col>
-                <el-col :span="8">
-                    <el-button type="primary" size="small" @click="onHandleSearch">
-                        查询
-                    </el-button>
-                </el-col>
-            </el-row>
-        <div class="tree-container" style="max-height: calc(80vh - 190px); overflow-y: auto;">
-            
-
-            <el-tree ref="leftTreeRef" :data="treeDataList" default-expand-all class="left-tree-list"
-                @node-click="onHandleNodeClick" :filter-node-method="filterNode" highlight-current node-key="id">
-                <span class="custom-tree-node" slot-scope="{ node }">
-                    <span class="node-label">{{ node.label }}</span>
-                </span>
-            </el-tree>
-        </div>
-        <span slot="footer" class="dialog-footer">
-            <el-button class="clear-btn" @click="handleClose">取消</el-button>
-            <el-button type="primary" class="search-btn" @click="handleSave">确认</el-button>
-        </span>
-    </el-dialog>
-
-</template>
-<script>
-import _ from 'lodash'
-import {
-    getFileManageTreeApi
-} from '@/api/filesTransfer/apply'
-import { validSecurity } from '@/utils/validate'
-export default {
-    name: "FileTree",
-    props: ["width", "title", "rowData"],
-    data() {
-        return {
-            lDialog: this.width > 500 ? "w700" : "w500",
-            dialogVisible: true,
-            isDisabled: true,
-            treeDataList: [],
-            filterText: '',
-            originalTreeData: [], // 保存原始数据,
-            selectedNodeId: null, // 保存当前选中的节点ID
-        };
-    },
-    created() {
-        this.getLeftTreeList();
-    },
-    computed: {
-        // 过滤后的树数据
-        filteredTreeData() {
-            if (!this.filterText) {
-                return this.treeDataList
-            }
-            return this.filterTreeData(this.treeDataList)
-        }
-    },
-    methods: {
-        // 获取树列表
-        async getLeftTreeList() {
-            const proId = this.rowData.proId;
-            const res = await getFileManageTreeApi({ proId })
-            const transformedData = this.convertToVueTree(res.data)
-            this.treeDataList = transformedData;
-            // 保存原始数据
-            this.originalTreeData = JSON.parse(JSON.stringify(this.treeDataList))
-        },
-        /* 刷新树节点 */
-        async handleQuery() {
-            // 保存当前选中的节点ID
-            const currentNode = this.$refs.leftTreeRef.getCurrentNode();
-            if (currentNode) {
-                this.selectedNodeId = currentNode.id;
-            }
-
-            // 重新获取树数据
-            await this.getLeftTreeList();
-
-            // 恢复选中状态
-            this.$nextTick(() => {
-                if (this.selectedNodeId) {
-                    this.$refs.leftTreeRef.setCurrentKey(this.selectedNodeId);
-                }
-            });
-        },
-        // 树数据过滤 - 支持无限层级转换
-        convertToVueTree(data) {
-            if (!data || !Array.isArray(data)) {
-                return [];
-            }
-
-            return data.map(item => {
-
-                const node = {
-                    id: item.id,
-                    label: item.contentName,
-                    level: item.level,
-                    parentId: item.parentId
-                };
-
-                // 递归处理子节点
-                if (item.children && Array.isArray(item.children) && item.children.length > 0) {
-                    const children = this.convertToVueTree(item.children);
-                    // 只有当子节点不为空时才添加 children 属性
-                    if (children.length > 0) {
-                        node.children = children;
-                    }
-                }
-
-                return node;
-            });
-        },
-        // 节点点击事件
-        onHandleNodeClick(data) {
-            // 保存选中的节点ID
-            this.selectedNodeId = data.id;
-        },
-        
-        // 搜索
-        onHandleSearch() {
-            // 安全校验
-            if (this.filterText && !validSecurity(this.filterText)) {
-                this.$message.error('搜索内容包含非法字符，请重新输入')
-                return
-            }
-            this.$refs.leftTreeRef.filter(this.filterText)
-        },
-        // 树节点过滤方法
-        filterNode(value, data) {
-            if (!value) return true
-            return data.label.indexOf(value) !== -1
-        },
-        // 递归过滤树数据
-        filterTreeData(treeData) {
-            const result = []
-            for (const node of treeData) {
-                const newNode = { ...node }
-                if (node.children && node.children.length > 0) {
-                    const filteredChildren = this.filterTreeData(node.children)
-                    if (filteredChildren.length > 0) {
-                        newNode.children = filteredChildren
-                        result.push(newNode)
-                    } else if (node.label.indexOf(this.filterText) !== -1) {
-                        // 如果父节点匹配，保留所有子节点
-                        result.push(node)
-                    }
-                } else if (node.label.indexOf(this.filterText) !== -1) {
-                    result.push(newNode)
-                }
-            }
-            return result
-        },
-        /*关闭弹窗 */
-        handleClose() {
-            this.dialogVisible = false;
-            this.$emit("closeDialog");
-            /* setTimeout(() => {
-                this.dialogVisible = true;
-            }); */
-        },
-        /**确认弹窗 */
-        sureBtnClick() {
-            this.dialogVisible = false;
-            this.$emit("closeDialog");
-            /* setTimeout(() => {
-                this.dialogVisible = true;
-            }); */
-        },
-        // 保存数据
-        handleSave(){
-            this.$emit('getTreeData', this.selectedNodeId);
-            this.handleClose();
-        }
-    }
-};
-</script>
-<style lang="scss" scoped>
-.w700 ::v-deep .el-dialog {
-    width: 700px;
-}
-
-.w500 ::v-deep .el-dialog {
-    width: 500px;
-}
-
-.w500 ::v-deep .el-dialog__header,
-.w700 ::v-deep .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;
-}
-
-.tree-container {
-    margin-top: 10px;
-    overflow-x: hidden;
-}
-
-/* 自定义滚动条样式 */
-.tree-container::-webkit-scrollbar {
-    width: 6px;
-    background: #f5f5f5;
-}
-
-.tree-container::-webkit-scrollbar-track {
-    background: #f5f5f5;
-    border-radius: 3px;
-}
-
-.tree-container::-webkit-scrollbar-thumb {
-    background: #c0c4cc;
-    border-radius: 3px;
-    transition: background 0.3s;
-}
-
-.tree-container::-webkit-scrollbar-thumb:hover {
-    background: #909399;
-}
-
-.left-tree-list {
-    width: 100%;
-}
-
-/* 自定义节点行：左右布局，支持多行文本 */
-.custom-tree-node {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    min-height: 20px;
-    padding: 1px 0;
-}
-
-.node-label {
-    flex: 1;
-    min-width: 0;
-    overflow: visible;
-    text-overflow: initial;
-    white-space: normal;
-    word-break: break-word;
-    word-wrap: break-word;
-    line-height: 1.2;
-    padding-right: 4px;
-}
-
-/* 使行容器自适应高度，单行文本居中对齐，多行文本顶部对齐 */
-.left-tree-list .el-tree-node__content {
-    display: flex;
-    align-items: center;
-    height: auto;
-    min-height: 20px;
-    padding: 1px 4px;
-    line-height: 1.2;
-}
-
-/* 多行文本时改为顶部对齐 */
-.left-tree-list .el-tree-node__content:has(.node-label[style*="height"]) {
-    align-items: flex-start;
-}
-
-/* 高亮选中状态同样自适应高度 */
-.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
-    height: auto !important;
-    align-items: center;
-    line-height: 1.2;
-}
-
-/* 选中节点的背景色 */
-.left-tree-list .el-tree-node.is-current>.el-tree-node__content {
-    background-color: #b3d9ff;
-    color: #006e6a !important;
-}
-
-/* 确保选中节点的文字颜色正确应用 */
-.left-tree-list .el-tree-node.is-current>.el-tree-node__content .el-tree-node__label {
-    color: #006e6a !important;
-}
-
-/* 确保自定义树节点中的文字颜色正确应用 */
-.left-tree-list .el-tree-node.is-current>.el-tree-node__content .custom-tree-node {
-    color: #006e6a !important;
-}
-
-/* 悬停效果 */
-.left-tree-list .el-tree-node__content:hover {
-    background-color: #f5f5f5;
-}
-
-.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
-    height: auto;
-}
-
-/* 选中节点的悬停效果 */
-.left-tree-list .el-tree-node.is-current>.el-tree-node__content:hover {
-    background-color: #8cc8ff;
-}
-
-
-.btn-box {
-    margin-left: 4px;
-    opacity: 0;
-    transition: opacity 0.15s ease-in-out;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    gap: 1px;
-}
-
-/* 悬浮到整行时显示操作按钮 */
-.left-tree-list .el-tree-node__content:hover .btn-box {
-    opacity: 1;
-}
-
-/* 确保树节点内容正确显示 */
-::v-deep .el-tree-node__content {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    height: auto;
-    min-height: 38px;
-    padding: 1px 4px;
-}
-
-/* 树节点展开/收起图标 */
-::v-deep .el-tree-node__expand-icon {
-    padding: 1px;
-    margin-right: 1px;
-    flex-shrink: 0;
-}
-
-/* 树节点图标容器 */
-::v-deep .el-tree-node__content>.el-tree-node__expand-icon {
-    flex-shrink: 0;
-}
-</style>
\ No newline at end of file
diff --git a/src/views/viewFile/viewFile.vue b/src/views/viewFile/viewFile.vue
deleted file mode 100644
index 33ad392..0000000
--- a/src/views/viewFile/viewFile.vue
+++ /dev/null
@@ -1,441 +0,0 @@
-<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">
-        <div class="image-toolbar">
-          <!-- <el-button size="mini" @click="downloadFile"><i class="el-icon-download"></i> 下载</el-button> -->
-        </div>
-        <el-image :src="processedFileUrl" :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>
-        <div class="pdf-container">
-          <!-- PDF加载状态 -->
-          <div v-if="pdfLoading" class="pdf-loading">
-            <i class="el-icon-loading"></i>
-            <p>PDF加载中...</p>
-          </div>
-
-          <!-- PDF错误状态 -->
-          <div v-else-if="pdfError" class="pdf-error">
-            <i class="el-icon-warning"></i>
-            <p>PDF加载失败</p>
-            <el-button size="small" @click="retryLoadPdf">重试</el-button>
-          </div>
-
-          <!-- PDF内容 -->
-          <div v-else class="pdf-content">
-            <!-- PDF工具栏 -->
-            <div class="pdf-toolbar">
-              <div class="pdf-controls">
-                <el-button size="mini" :disabled="currentPage <= 1" @click="prevPage">
-                  <i class="el-icon-arrow-left"></i> 上一页
-                </el-button>
-                <span class="page-info">
-                  {{ currentPage }} / {{ numPages }}
-                </span>
-                <el-button size="mini" :disabled="currentPage >= numPages" @click="nextPage">
-                  下一页 <i class="el-icon-arrow-right"></i>
-                </el-button>
-              </div>
-              <div class="pdf-actions">
-                <!-- <el-button size="mini" @click="downloadFile"><i class="el-icon-download"></i> 下载</el-button> -->
-              </div>
-            </div>
-
-            <!-- PDF显示区域 -->
-            <div class="pdf-viewer" @wheel="handleWheel" ref="pdfViewer">
-              <pdf :src="processedFileUrl" :page="currentPage" @num-pages="numPages = $event" @loaded="onPdfLoaded"
-                @error="onPdfError" style="width:100%;height:70vh" />
-            </div>
-          </div>
-        </div>
-      </template>
-    </div>
-  </el-dialog>
-</template>
-<script>
-import pdf from 'vue-pdf'
-import { getFileAsBase64Api } from '@/api/archivesManagement/fileManager/fileManager'
-export default {
-  name: 'ViewFile',
-  props: ['width', 'hight', 'dataForm', 'title', 'disabled', 'isAdd', 'rowData', 'projectId'],
-  components: { pdf },
-  data() {
-    return {
-      dialogVisible: true,
-      lDialog: this.width > 500 ? "w700" : "w500",
-      fileUrl: '',           // 实际文件地址
-      fileName: '',          // 用于从文件名判断类型
-      previewList: [],       // 预览组（可只放当前图片）
-      // PDF相关状态
-      pdfLoading: false,
-      pdfError: false,
-      currentPage: 1,
-      numPages: 0,
-      // 滚轮翻页相关
-      wheelTimeout: null,
-      isWheelScrolling: false
-    }
-  },
-  computed: {
-    isImage() {
-      // 允许的图片类型
-      const exts = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp']
-      const url = (this.fileUrl || '')
-      const name = (this.fileName || '').toLowerCase()
-      return exts.some(ext => url.endsWith(ext) || name.endsWith(ext))
-    },
-    isPdf() {
-      // 判断是否为PDF文件
-      const exts = ['.pdf']
-      const url = (this.fileUrl || '')
-      const name = (this.fileName || '').toLowerCase()
-      return exts.some(ext => url.endsWith(ext) || name.endsWith(ext))
-    },
-    processedFileUrl() {
-      // 处理文件URL，为PDF和图片添加data前缀
-      if (this.fileUrl && !this.fileUrl.startsWith('data:')) {
-        if (this.isPdf) {
-          return `data:application/pdf;base64,${this.fileUrl}`
-        } else if (this.isImage) {
-          // 根据图片类型添加相应的MIME类型
-          const imageType = this.getImageMimeType()
-          return `data:${imageType};base64,${this.fileUrl}`
-        }
-      }
-      return this.fileUrl
-    }
-  },
-  created() {
-    this.getFileAsBase64();
-  },
-
-  watch: {
-    isPdf(newVal) {
-      if (newVal) {
-        this.resetPdfState();
-      }
-    }
-  },
-  methods: {
-    handleClose() {
-      this.dialogVisible = false
-      this.$emit('closeDialog')
-    },
-    /* 获取文件的base64 */
-    getFileAsBase64() {
-      if (this.isPdf) {
-        this.pdfLoading = true;
-        this.pdfError = false;
-      }
-      getFileAsBase64Api({ id: this.rowData.fileId }).then(res => {
-        const obj = res.data;
-        this.fileUrl = obj?.fileBase64 || ''
-        this.fileName = obj?.fileName || ''
-
-        // 预览组（如果你有多张，可放数组；没有就放当前一张）
-        if (this.isImage && this.fileUrl) {
-          this.previewList = [this.processedFileUrl]
-        }
-      }).catch(error => {
-        if (this.isPdf) {
-          this.pdfError = true;
-          this.pdfLoading = false;
-        }
-        console.error('获取文件失败:', error);
-      })
-    },
-
-    // PDF相关方法
-    resetPdfState() {
-      this.currentPage = 1;
-      this.numPages = 0;
-      this.pdfLoading = false;
-      this.pdfError = false;
-      this.isWheelScrolling = false;
-      if (this.wheelTimeout) {
-        clearTimeout(this.wheelTimeout);
-        this.wheelTimeout = null;
-      }
-    },
-
-    onPdfLoaded() {
-      this.pdfLoading = false;
-      this.pdfError = false;
-    },
-
-    onPdfError(error) {
-      this.pdfLoading = false;
-      this.pdfError = true;
-      console.error('PDF加载失败:', error);
-    },
-
-    retryLoadPdf() {
-      this.resetPdfState();
-      this.getFileAsBase64();
-    },
-
-    prevPage() {
-      if (this.currentPage > 1) {
-        this.currentPage--;
-      }
-    },
-
-    nextPage() {
-      if (this.currentPage < this.numPages) {
-        this.currentPage++;
-      }
-    },
-    // 下载文件（图片或PDF，base64 -> Blob，避免在控制台暴露base64）
-    downloadFile() {
-      if (!this.fileUrl) return
-      const filename = this.fileName || '文件'
-
-      // 推断 MIME 类型
-      let mime = this.isPdf ? 'application/pdf' : this.getImageMimeType()
-
-      // 如果带有 data: 前缀，从中解析 mime 与数据体
-      let base64Data = this.fileUrl
-      if (typeof base64Data === 'string' && base64Data.startsWith('data:')) {
-        try {
-          const parts = base64Data.split(',')
-          const header = parts[0]
-          const dataPart = parts[1]
-          const match = header.match(/^data:(.*?);base64$/)
-          if (match && match[1]) mime = match[1]
-          base64Data = dataPart
-        } catch (e) {
-          // 解析失败则按原样处理
-        }
-      }
-
-      const blob = this.base64ToBlob(base64Data, mime)
-      const url = URL.createObjectURL(blob)
-      const a = document.createElement('a')
-      a.style.display = 'none'
-      a.href = url
-      a.download = filename
-      document.body.appendChild(a)
-      a.click()
-      document.body.removeChild(a)
-      URL.revokeObjectURL(url)
-    },
-
-    // base64(不含data前缀) 转 Blob
-    base64ToBlob(base64, mime) {
-      const byteChars = atob(base64)
-      const sliceSize = 1024
-      const byteArrays = []
-      for (let offset = 0; offset < byteChars.length; offset += sliceSize) {
-        const slice = byteChars.slice(offset, offset + sliceSize)
-        const byteNumbers = new Array(slice.length)
-        for (let i = 0; i < slice.length; i++) {
-          byteNumbers[i] = slice.charCodeAt(i)
-        }
-        const byteArray = new Uint8Array(byteNumbers)
-        byteArrays.push(byteArray)
-      }
-      return new Blob(byteArrays, { type: mime || 'application/octet-stream' })
-    },
-    
-    // 获取图片MIME类型
-    getImageMimeType() {
-      // 根据文件扩展名返回对应的MIME类型
-      const name = (this.fileName || '').toLowerCase()
-      if (name.endsWith('.jpg') || name.endsWith('.jpeg')) {
-        return 'image/jpeg'
-      } else if (name.endsWith('.png')) {
-        return 'image/png'
-      } else if (name.endsWith('.gif')) {
-        return 'image/gif'
-      } else if (name.endsWith('.bmp')) {
-        return 'image/bmp'
-      } else if (name.endsWith('.webp')) {
-        return 'image/webp'
-      }
-      // 默认返回jpeg
-      return 'image/jpeg'
-    },
-
-    // 处理滚轮事件
-    handleWheel(event) {
-      // 阻止默认滚动行为
-      event.preventDefault();
-
-      // 如果正在滚轮翻页中，忽略新的滚轮事件
-      if (this.isWheelScrolling) {
-        return;
-      }
-
-      // 设置滚轮翻页状态
-      this.isWheelScrolling = true;
-
-      // 清除之前的定时器
-      if (this.wheelTimeout) {
-        clearTimeout(this.wheelTimeout);
-      }
-
-      // 根据滚轮方向翻页
-      if (event.deltaY > 0) {
-        // 向下滚动 - 下一页
-        this.nextPage();
-      } else if (event.deltaY < 0) {
-        // 向上滚动 - 上一页
-        this.prevPage();
-      }
-
-      // 设置定时器，防止滚轮翻页过于频繁
-      this.wheelTimeout = setTimeout(() => {
-        this.isWheelScrolling = false;
-      }, 300);
-    }
-  },
-}
-</script>
-<style lang="scss" scoped>
-.w700 ::v-deep .el-dialog {
-    width: 700px;
-}
-
-.w500 ::v-deep .el-dialog {
-    width: 500px;
-}
-
-.w500 ::v-deep .el-dialog__header,
-.w700 ::v-deep .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;
-}
-
-/* PDF预览样式 */
-.pdf-container {
-  width: 100%;
-  height: 70vh;
-  position: relative;
-}
-
-.pdf-loading,
-.pdf-error {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: #909399;
-  font-size: 16px;
-}
-
-.pdf-loading i {
-  font-size: 32px;
-  margin-bottom: 16px;
-  animation: rotating 2s linear infinite;
-}
-
-.pdf-error i {
-  font-size: 32px;
-  margin-bottom: 16px;
-  color: #F56C6C;
-}
-
-.pdf-content {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.pdf-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 12px;
-  background: #f5f5f5;
-  border-bottom: 1px solid #e4e7ed;
-  flex-shrink: 0;
-}
-
-.pdf-controls {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.image-toolbar {
-  display: flex;
-  justify-content: flex-end;
-  padding: 4px 0 8px 0;
-}
-
-.pdf-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.page-info {
-  font-size: 14px;
-  color: #606266;
-  min-width: 60px;
-  text-align: center;
-}
-
-.pdf-viewer {
-  flex: 1;
-  overflow: hidden;
-  display: flex;
-  justify-content: center;
-  background: #f8f9fa;
-  cursor: pointer;
-}
-
-/* 移除滚动条样式，因为现在使用滚轮翻页 */
-
-@keyframes rotating {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-</style>
\ No newline at end of file