维护

WXL

5 天以前 f806aff5702fc6be9c9348d51964366cbf434bf7

 src/components/FilePreviewDialog/index.vue

@@ -11,7 +11,10 @@
  >
    <!-- 加载状态 -->
    <div v-if="loading" class="preview-loading">
      <i class="el-icon-loading" style="font-size: 40px; margin-bottom: 16px;"></i>
      <i
        class="el-icon-loading"
        style="font-size: 40px; margin-bottom: 16px;"
      ></i>
      <span>文件加载中...</span>
    </div>

@@ -19,11 +22,19 @@
    <div v-else-if="fileType === 'image'" class="preview-container">
      <div class="image-toolbar">
        <el-button-group>
          <el-button size="mini" @click="zoomImageIn" :disabled="imageScale >= 300">
          <el-button
            size="mini"
            @click="zoomImageIn"
            :disabled="imageScale >= 300"
          >
            <i class="el-icon-zoom-in"></i> 放大
          </el-button>
          <el-button size="mini" disabled>{{ imageScale }}%</el-button>
          <el-button size="mini" @click="zoomImageOut" :disabled="imageScale <= 50">
          <el-button
            size="mini"
            @click="zoomImageOut"
            :disabled="imageScale <= 50"
          >
            <i class="el-icon-zoom-out"></i> 缩小
          </el-button>
          <el-button size="mini" @click="resetImageZoom">
@@ -83,11 +94,7 @@
          </el-button>
        </el-button-group>

        <el-button
          size="mini"
          type="success"
          @click="handleDownload"
        >
        <el-button size="mini" type="success" @click="handleDownload">
          <i class="el-icon-download"></i> 下载
        </el-button>
      </div>
@@ -111,7 +118,10 @@
    </div>

    <!-- Office文档预览 -->
    <div v-else-if="fileType === 'office'" class="preview-container office-preview">
    <div
      v-else-if="fileType === 'office'"
      class="preview-container office-preview"
    >
      <div class="office-toolbar">
        <el-alert
          title="Office文档预览提示"
@@ -127,7 +137,11 @@

      <div class="office-content">
        <iframe
          :src="`https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(fileUrl)}`"
          :src="
            `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(
              fileUrl
            )}`
          "
          width="100%"
          height="600px"
          frameborder="0"
@@ -177,6 +191,11 @@
      type: Object,
      default: () => ({})
    }
    // 添加baseUrlHt作为props传入
    // baseUrlHt: {
    //   type: String,
    //   default: process.env.VUE_APP_BASE_API
    // }
  },
  data() {
    return {
@@ -185,6 +204,7 @@
      // 加载状态
      loading: false,
      pdfLoading: false,
      baseUrlHt: "",
      // 文件信息
      fileUrl: "",
      fileName: "",
@@ -214,19 +234,75 @@
      }
    },
    previewVisible(newVal) {
      this.$emit('update:visible', newVal);
      this.$emit("update:visible", newVal);
      if (!newVal) {
        this.handleClose();
      }
    }
  },
  created() {
    this.calculateBaseUrl();
  },
  methods: {
    /** URL处理函数 - 将完整URL替换为baseUrlHt */
    processFileUrl(url) {
      if (!url) return "";

      // 如果已经是完整的http或https链接
      if (url.startsWith("http://") || url.startsWith("https://")) {
        // 找到第三个斜杠后的位置，提取路径部分
        const thirdSlashIndex = url.indexOf("/", 8); // 从http://或https://之后开始找
        if (thirdSlashIndex !== -1) {
          return `${this.baseUrlHt}${url.substring(thirdSlashIndex)}`;
        }
        return this.baseUrlHt; // 如果没有路径部分，只返回baseUrlHt
      }

      // 相对路径处理
      if (url.startsWith("/")) {
        return `${this.baseUrlHt}${url}`;
      }

      return `${this.baseUrlHt}/${url}`;
    },
    /** 计算 baseUrlHt */
    calculateBaseUrl() {
      // 获取当前浏览器地址
      const currentUrl = window.location.href;
      console.log("当前浏览器地址:", currentUrl);

      try {
        // 使用 URL 对象解析
        const urlObj = new URL(currentUrl);
        // 获取主机名（IP 或域名）
        const hostname = urlObj.hostname;
        // 拼接端口 :9095
        this.baseUrlHt = `http://${hostname}:9095`;
        console.log("计算得到的 baseUrlHt:", this.baseUrlHt);
      } catch (error) {
        console.error("解析URL失败:", error);
        // 备用方案：使用正则提取
        const match = currentUrl.match(/https?:\/\/([^:\/]+)/);
        if (match) {
          this.baseUrlHt = `http://${match[1]}:9095`;
        } else {
          // 最后的备用方案
          this.baseUrlHt =
            process.env.VUE_APP_BASE_API || "http://localhost:9095";
        }
      }
    },

    /** 初始化预览 */
    initPreview() {
      if (!this.file) return;

      this.fileName = this.file.fileName || this.file.name || "未知文件";
      this.fileUrl = this.file.fileUrl || this.file.path || this.file.url;
      const originalUrl = this.file.fileUrl || this.file.path || this.file.url;

      // 处理URL，替换域名部分
      this.fileUrl = this.processFileUrl(originalUrl);

      this.fileType = this.getFileType(this.fileName);

      this.loading = true;
@@ -250,7 +326,10 @@
    getFileType(fileName) {
      if (!fileName) return "other";

      const extension = fileName.split('.').pop().toLowerCase();
      const extension = fileName
        .split(".")
        .pop()
        .toLowerCase();
      const imageTypes = ["jpg", "jpeg", "png", "gif", "bmp", "webp"];
      const pdfTypes = ["pdf"];
      const officeTypes = ["doc", "docx", "xls", "xlsx", "ppt", "pptx"];
@@ -263,7 +342,12 @@

    /** 获取文件扩展名 */
    getFileExtension(filename) {
      return filename.split('.').pop().toLowerCase() || "未知";
      return (
        filename
          .split(".")
          .pop()
          .toLowerCase() || "未知"
      );
    },

    /** PDF加载完成 */
@@ -337,7 +421,7 @@
      this.imageScale = 100;
    },

    /** 下载文件 */
    /** 下载文件 - 也需要处理URL */
    handleDownload() {
      if (!this.fileUrl) {
        this.$message.warning("文件路径不存在，无法下载");