Merge branch 'master' of http://gcls-git.helxsoft.cn/GCLS/eep_page

src/icons/svg/switch.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.15508 2.91914C6.25867 1.10026 9.00084 0 12 0C18.6274 0 24 5.37258 24 12C24 14.5633 23.1962 16.939 21.827 18.8887L18 12H21.6C21.6 6.69806 17.302 2.4 12 2.4C9.41978 2.4 7.07732 3.41792 5.35228 5.0741L4.15508 2.91914ZM19.8449 21.0809C17.7413 22.8997 14.9992 24 12 24C5.37258 24 0 18.6274 0 12C0 9.43663 0.803748 7.06099 2.17296 5.11133L6 12H2.4C2.4 17.302 6.69806 21.6 12 21.6C14.5802 21.6 16.9226 20.582 18.6478 18.9259L19.8449 21.0809Z" fill="black" fill-opacity="0.3"/>
+</svg>

src/views/book/courseware/create/components/base/common/SelectResource.vue

@@ -25,18 +25,18 @@
         v-for="(item, index) in list"
         :key="index"
         class="sources-item"
-        :class="[select_sources_id === item.id ? 'active' : '', type_index === 5 ? 'sources-item-txt' : '']"
+        :class="[select_sources_id === item.id ? 'active' : '']"
         @click="selectSourceNode(item)"
       >
         <template v-if="type_index === 0"> <el-image :src="item.file_url" fit="contain" /></template>
         <template v-else-if="type_index === 1">
-          <AudioLine
+          <!-- <AudioLine
             ref="audioLine"
             :audio-id="'resource-audio-' + index"
             :mp3="item.file_url"
             :get-cur-time="getCurTime"
             :width="200"
-          />
+          /> -->
         </template>
         <template v-else-if="type_index === 2">
           <video
@@ -53,7 +53,7 @@
         </template>
         <template v-else-if="type_index === 4"> </template>
         <template v-else-if="type_index === 5">
-          <iframe class="sources-item-border" :src="item.new_path" width="100%" height="300px" frameborder="0"></iframe>
+          <!-- <iframe class="sources-item-border" :src="item.new_path" width="100%" height="300px" frameborder="0"></iframe> -->
         </template>
 
         <el-popover placement="bottom" width="300" trigger="hover">
@@ -69,7 +69,9 @@
               <p class="name">
                 {{ item.name
                 }}<SvgIcon
-                  v-show="item.file_id && (type_index === 3 || type_index === 2)"
+                  v-show="
+                    item.file_id && (type_index === 5 || type_index === 3 || type_index === 2 || type_index === 1)
+                  "
                   icon-class="uploadPreview"
                   size="16"
                   @click="viewDialog(item)"
@@ -108,7 +110,7 @@ import PaginationPage from '@/components/PaginationPage.vue';
 import AudioLine from '@/views/personal_workbench/project/components/AudioLine.vue';
 
 import { PageQueryProjectResourceList } from '@/api/list';
-import { H5StartupFile } from '@/api/app';
+import { H5StartupFile, GetFileURLMap } from '@/api/app';
 
 const Base64 = require('js-base64').Base64;
 import { getConfig } from '@/utils/auth';
@@ -243,12 +245,12 @@ export default {
       })
         .then(({ total_count, resource_list }) => {
           this.total = total_count;
-          if (this.type_index === 5) {
-            resource_list.forEach((item) => {
-              item.new_path = `${this.file_preview_url}onlinePreview?url=${Base64.encode(item.file_url)}`;
-            });
-            this.loading = false;
-          }
+          // if (this.type_index === 5) {
+          //   resource_list.forEach((item) => {
+          //     item.new_path = `${this.file_preview_url}onlinePreview?url=${Base64.encode(item.file_url)}`;
+          //   });
+          //   this.loading = false;
+          // }
           // else if (this.type_index === 3) {
           //   resource_list.forEach((item) => {
           //     H5StartupFile({ file_id: item.file_id, index_file_name: 'index.html' }).then((res) => {
@@ -257,9 +259,9 @@ export default {
           //     });
           //   });
           // }
-          else {
-            this.loading = false;
-          }
+          // else {
+          this.loading = false;
+          // }
           this.list = resource_list;
         })
         .catch(() => {
@@ -298,8 +300,10 @@ export default {
           this.visible_flag = true;
         });
       } else {
-        this.newpath = `${this.file_preview_url}onlinePreview?url=${Base64.encode(file.file_url)}`;
-        this.visible_flag = true;
+        GetFileURLMap({ file_id_list: [file.file_id] }).then(({ url_map }) => {
+          this.newpath = `${this.file_preview_url}onlinePreview?url=${Base64.encode(url_map[file.file_id])}`;
+          this.visible = true;
+        });
       }
     },
   },

src/views/book/courseware/create/components/base/common/SelectSerialNumberStyle.vue

@@ -108,7 +108,7 @@ export default {
   column-gap: 16px;
 
   .style-shape {
-    width: 80px;
+    width: 100px;
 
     :deep .el-input {
       &__inner {
@@ -132,8 +132,9 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
+  min-width: 24px;
   height: 24px;
+  padding: 0 4px;
   margin-top: 5px;
   font-size: 16px;
   font-weight: 500;

src/views/book/courseware/create/components/base/common/UploadFile.vue

@@ -255,7 +255,7 @@ export default {
       } else if (this.type === 'video' || this.type === 'video_interaction') {
         fileType = ['mp4'];
         typeTip = '视频文件只能是 mp4 格式!';
-      } else if (this.type === 'upload_preview') {
+      } else if (this.type === 'upload_preview' || this.type === 'video_interaction_file') {
         fileType = [
           'txt',
           'pdf',

src/views/book/courseware/create/components/common/SerialNumber.vue

@@ -2,6 +2,7 @@
   <div>
     <el-form-item label="序号" class="serial-number">
       <el-input v-model="propertyObj.serial_number" @input="changeSerialNumber" />
+      <SvgIcon icon-class="switch" height="16" width="16" @click="switchFormat" />
     </el-form-item>
     <el-form-item>
       <el-radio
@@ -52,6 +53,9 @@ export default {
     return {
       displayList,
       propertyObj: this.property,
+      displayValue: '1',
+      currentFormat: 0, // 0: 数字, 1: 字母, 2: 中文
+      maxNumber: 99,
     };
   },
   watch: {
@@ -99,6 +103,131 @@ export default {
       this.updateProperty('sn_style', sn_style);
       this.updateProperty('sn_background_color', sn_background_color);
     },
+
+    // 切换序号显示形式
+    handleInput(e) {
+      if (this.currentFormat === 0) {
+        const inputValue = e.target.value;
+        if (inputValue === '') {
+          this.propertyObj.serial_number = '';
+          return;
+        }
+        const num = parseInt(inputValue);
+        if (isNaN(num)) {
+          return;
+        } else if (num < 1) {
+          this.propertyObj.serial_number = '1';
+        } else if (num > this.maxNumber) {
+          this.propertyObj.serial_number = this.maxNumber.toString();
+        } else {
+          this.propertyObj.serial_number = inputValue;
+        }
+      }
+    },
+
+    // 切换格式
+    switchFormat() {
+      // 获取当前数字值
+      const num = this.getCurrentNumber() || 1;
+      // 循环切换格式
+      this.currentFormat = (this.currentFormat + 1) % 3;
+      // 更新显示值
+      switch (this.currentFormat) {
+        case 0: // 数字
+          this.propertyObj.serial_number = num.toString();
+          break;
+        case 1: // 字母
+          this.propertyObj.serial_number = this.toLetters(num);
+          break;
+        case 2: // 中文
+          this.propertyObj.serial_number = this.toChinese(num);
+          break;
+        default:
+          this.propertyObj.serial_number = num.toString();
+      }
+    },
+
+    // 获取当前显示值对应的数字
+    getCurrentNumber() {
+      switch (this.currentFormat) {
+        case 0: {
+          // 数字
+          const num = parseInt(this.propertyObj.serial_number);
+          return isNaN(num) ? null : num;
+        }
+        case 1: // 字母转数字
+          return this.lettersToNumber(this.propertyObj.serial_number);
+        case 2: // 中文转数字
+          return this.chineseToNumber(this.propertyObj.serial_number);
+        default:
+          return null;
+      }
+    },
+
+    // 数字转字母 (1→a, 2→b, ..., 27→aa)
+    toLetters(num) {
+      if (num < 1) return '';
+      let result = '';
+      let n = num - 1;
+      do {
+        result = String.fromCharCode(97 + (n % 26)) + result;
+        n = Math.floor(n / 26) - 1;
+      } while (n >= 0);
+      return result;
+    },
+
+    // 字母转数字 (a→1, b→2, ..., aa→27)
+    lettersToNumber(letters) {
+      if (!letters || typeof letters !== 'string') return null;
+      let result = 0;
+      for (let i = 0; i < letters.length; i++) {
+        const code = letters.toLowerCase().charCodeAt(i) - 96;
+        if (code < 1 || code > 26) return null;
+        result = result * 26 + code;
+      }
+      return result > this.maxNumber ? null : result;
+    },
+
+    // 数字转中文 (1→一, 11→十一, 21→二十一)
+    toChinese(num) {
+      const chinese = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
+      if (num <= 10) return chinese[num];
+      if (num < 20) return `十${num % 10 === 0 ? '' : chinese[num % 10]}`;
+      if (num < 100) {
+        return `${chinese[Math.floor(num / 10)]}十${num % 10 === 0 ? '' : chinese[num % 10]}`;
+      }
+      return num.toString();
+    },
+
+    // 中文转数字 (一→1, 十一→11, 二十一→21)
+    chineseToNumber(text) {
+      const map = { 零: 0, 一: 1, 二: 2, 三: 3, 四: 4, 五: 5, 六: 6, 七: 7, 八: 8, 九: 9, 十: 10 };
+      if (!text || typeof text !== 'string') return null;
+
+      if (text === '十') return 10;
+      if (text.length === 1) return map[text] || null;
+
+      if (text.startsWith('十')) {
+        return 10 + (map[text.slice(1)] || 0);
+      }
+      if (text.endsWith('十')) {
+        return (map[text.slice(0, -1)] || 0) * 10;
+      }
+
+      const index = text.indexOf('十');
+      if (index !== -1) {
+        return (map[text.slice(0, index)] || 0) * 10 + (map[text.slice(index + 1)] || 0);
+      }
+
+      return null;
+    },
   },
 };
 </script>
+<style lang="scss" scoped>
+@use '@/styles/mixin.scss' as *;
+
+.el-form {
+  @include setting-base;
+}
+</style>

src/views/book/courseware/create/components/question/video_interaction/VideoInteraction.vue

@@ -20,8 +20,49 @@
       />
       <div class="interaction-box" v-if="data.video_list.length > 0">
         <video id="interaction-video" :src="data.video_list[0].file_url" width="100%" height="400" controls></video>
-        <el-button type="primary" size="small">暂停视频上传文件</el-button>
+        <el-button type="primary" size="small" @click="handlePause">暂停视频上传文件</el-button>
+        <ul v-if="data.file_info_list.length > 0" class="file-list">
+          <li v-for="(file, i) in data.file_info_list" :key="i">
+            <div class="file-name">
+              <span>
+                <span>时间：{{ file.currentTime }}s</span>
+                <span>{{ file.file_name ?? file.name }}</span>
+              </span>
+            </div>
+            <SvgIcon icon-class="delete-black" size="12" @click="removeFile(file, i)" />
+          </li>
+        </ul>
       </div>
+      <!-- 上传 -->
+      <el-dialog
+        :visible.sync="sourceAddFlag"
+        width="500px"
+        append-to-body
+        :show-close="true"
+        title="上传文件"
+        :close-on-click-modal="false"
+        class="module-content"
+      >
+        <UploadFile
+          v-if="sourceAddFlag"
+          key="upload_resources"
+          type="video_interaction_file"
+          :total-size="20000"
+          :file-list="file_list"
+          :file-id-list="file_id_list"
+          :label-text="''"
+          :accept-file-type="'*'"
+          :icon-class="''"
+          :limit="1"
+          :single-size="2000"
+          :upload-tip="''"
+          @updateFileList="updateFileLists"
+        />
+        <footer style="text-align: right">
+          <el-button @click="handleCancle">取 消</el-button>
+          <el-button :loading="loading" type="primary" @click="submitAdd">确 定</el-button>
+        </footer>
+      </el-dialog>
     </template>
   </ModuleBase>
 </template>
@@ -30,12 +71,11 @@
 import ModuleMixin from '../../common/ModuleMixin';
 import UploadFile from '../../base/common/UploadFile.vue';
 import { getVideoInteractionData } from '@/views/book/courseware/data/videoInteraction';
-import SelectUpload from '@/views/book/courseware/create/components/common/SelectUpload.vue';
 import { GetFileURLMap } from '@/api/app';
 
 export default {
   name: 'VideoInteractionPage',
-  components: { UploadFile, SelectUpload },
+  components: { UploadFile },
   mixins: [ModuleMixin],
   data() {
     return {
@@ -44,6 +84,11 @@ export default {
       acceptFileType: '.mp4',
       uploadTip: '支持上传mp4格式视频文件，单个视频文件最大2GB，总文件体积不超10GB。',
       iconClass: 'video',
+      sourceAddFlag: false,
+      file_list: [],
+      file_id_list: [],
+      loading: false,
+      currentTime: 0,
     };
   },
   watch: {
@@ -61,7 +106,10 @@ export default {
     updateFileList({ file_list, file_id_list, file_info_list }) {
       this.data.video_list = file_list;
       this.data.video_id_list = file_id_list;
-      this.data.video_id_list = file_info_list;
+      this.data.video_info_list = file_info_list;
+      if (file_list.length === 0) {
+        this.data.file_info_list = [];
+      }
     },
 
     handleData() {
@@ -82,6 +130,47 @@ export default {
       });
       this.data.mind_map.node_list = node_list;
     },
+    updateFileLists({ file_list, file_id_list }) {
+      this.file_list = file_list;
+      this.file_id_list = file_id_list;
+      if (file_list.length > 0 && file_list[0].file_id) {
+        let obj = file_list[0];
+        obj.currentTime = this.currentTime;
+        this.data.file_info_list.push(obj);
+        this.sourceAddFlag = false;
+        document.getElementById('interaction-video').play();
+      }
+    },
+    handleCancle() {
+      this.sourceAddFlag = false;
+      this.file_list = [];
+      this.file_id_list = [];
+    },
+    // 确定新增资源
+    submitAdd() {
+      this.loading = true;
+    },
+    // 暂停视频上传资源
+    handlePause() {
+      const video = document.getElementById('interaction-video');
+      video.pause();
+      this.currentTime = video.currentTime.toFixed(3);
+      this.file_list = [];
+      this.file_id_list = [];
+      this.sourceAddFlag = true;
+    },
+    // 删除文件
+    removeFile(file, i) {
+      this.$confirm('是否删除当前文件？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          this.data.file_info_list.splice(i, 1);
+        })
+        .catch(() => {});
+    },
   },
 };
 </script>
@@ -118,4 +207,39 @@ export default {
 .interaction-box {
   padding: 10px 0;
 }
+
+.file-list {
+  display: flex;
+  flex-direction: column;
+  row-gap: 16px;
+  margin-top: 10px;
+
+  li {
+    display: flex;
+    column-gap: 12px;
+    align-items: center;
+
+    .file-name {
+      display: flex;
+      column-gap: 14px;
+      align-items: center;
+      justify-content: space-between;
+      max-width: 500px; // 360px有点窄
+      padding: 8px 12px;
+      font-size: 14px;
+      color: #1d2129;
+      background-color: #f7f8fa;
+
+      span {
+        display: flex;
+        column-gap: 14px;
+        align-items: center;
+      }
+    }
+
+    .svg-icon {
+      cursor: pointer;
+    }
+  }
+}
 </style>

src/views/book/courseware/data/videoInteraction.js

@@ -27,7 +27,7 @@ export function getVideoInteractionData() {
     video_id_list: [], // 视频文件 id
     file_list: [], // 文件列表
     file_info_list: [],
-    file_id_list: [], // 视频文件 id
+    file_id_list: [], // 文件 id
     mind_map: {
       node_list: [
       ], // 思维导图数据

src/views/book/courseware/preview/components/common/SerialNumberPosition.vue

@@ -104,8 +104,9 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
+  min-width: 24px;
   height: 24px;
+  padding: 0 4px;
   font-size: 16px;
   font-weight: 500;
 }

src/views/book/courseware/preview/components/video_interaction/VideoInteractionPreview.vue

@@ -3,8 +3,30 @@
   <div class="imageText-preview" :style="getAreaStyle()">
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
     <div class="interaction-box" v-if="data.video_list.length > 0">
-      <video id="interaction-video" :src="data.video_list[0].file_url" width="100%" height="400" controls></video>
+      <video
+        id="interaction-preview-video"
+        :src="data.video_list[0].file_url"
+        width="100%"
+        height="400"
+        controls
+        @timeupdate="handleTimeUpdate"
+        controlsList="nodownload"
+      ></video>
     </div>
+    <el-dialog
+      v-if="visible"
+      :visible.sync="visible"
+      :show-close="true"
+      :close-on-click-modal="true"
+      :modal-append-to-body="true"
+      :append-to-body="true"
+      :lock-scroll="true"
+      width="80%"
+      top="0"
+      @close="handleClose"
+    >
+      <iframe v-if="visible" :src="newpath" width="100%" :height="iframeHeight" frameborder="0"></iframe>
+    </el-dialog>
   </div>
 </template>
 
@@ -12,6 +34,7 @@
 import PreviewMixin from '../common/PreviewMixin';
 import { getVideoInteractionData } from '@/views/book/courseware/data/videoInteraction';
 import { GetFileURLMap } from '@/api/app';
+import { getConfig } from '@/utils/auth';
 export default {
   name: 'VideoInteractionPreview',
 
@@ -21,8 +44,14 @@ export default {
     return {
       data: getVideoInteractionData(),
       video_info: null,
+      file_preview_url: getConfig() ? getConfig().doc_preview_service_address : '',
+      visible: false,
+      newpath: '',
+      iframeHeight: `${window.innerHeight - 100}px`,
+      first: '',
     };
   },
+  watch: {},
   created() {
     this.initData();
   },
@@ -43,6 +72,31 @@ export default {
         });
       });
     },
+    handleTimeUpdate(event) {
+      let currentTime = event.target.currentTime;
+
+      this.data.file_info_list.forEach((item) => {
+        if (
+          Number(item.currentTime) > Math.floor(currentTime) &&
+          Number(item.currentTime) < Math.floor(currentTime) + 1 &&
+          item.file_id !== this.first
+        ) {
+          this.first = item.file_id;
+          document.getElementById('interaction-preview-video').pause();
+          GetFileURLMap({ file_id_list: [item.file_id] }).then(({ url_map }) => {
+            this.newpath = `${this.file_preview_url}onlinePreview?url=${Base64.encode(url_map[item.file_id])}`;
+            this.visible = true;
+          });
+        }
+      });
+    },
+    handleClose() {
+      this.visible = false;
+      document.getElementById('interaction-preview-video').play();
+      setTimeout(() => {
+        this.first = '';
+      }, 1000);
+    },
   },
 };
 </script>
@@ -50,41 +104,13 @@ export default {
 <style lang="scss" scoped>
 @use '@/styles/mixin.scss' as *;
 
-.img-box {
-  position: relative;
-  margin: 20px auto;
-}
-
-.pen {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-
-  .save {
-    box-sizing: border-box;
-    width: 65px;
-    height: 32px;
-    margin-left: 16px;
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 32px;
-    color: #000;
-    text-align: center;
-    cursor: pointer;
-    background: rgba(0, 0, 0, 5%);
-    border: 1px solid rgba(0, 0, 0, 10%);
-    border-radius: 6px;
-  }
-
-  .save:hover {
-    background: rgba(0, 0, 0, 25%);
+video:full-screen {
+  :fullscreen::-webkit-media-controls-fullscreen-button {
+    display: none;
   }
+}
 
-  > img {
-    width: 24px;
-    height: 24px;
-    margin: 0 8px;
-    cursor: pointer;
-  }
+video::-webkit-media-controls-fullscreen-button {
+  display: none;
 }
 </style>

src/views/personal_workbench/project/ProductionResourceManage.vue

@@ -52,18 +52,19 @@
             v-for="(item, index) in list"
             :key="index"
             class="sources-item"
-            :class="[select_sources_id === item.id ? 'active' : '', type_index === 5 ? 'sources-item-txt' : '']"
+            :class="[select_sources_id === item.id ? 'active' : '']"
             @click="selectSourceNode(item)"
           >
             <template v-if="type_index === 0"> <el-image :src="item.file_url" fit="contain" /></template>
             <template v-else-if="type_index === 1">
-              <AudioLine
+              <!-- <AudioLine
                 ref="audioLine"
                 :audio-id="'resource-audio-' + index"
                 :mp3="item.file_url"
                 :get-cur-time="getCurTime"
                 :width="200"
-              />
+              /> -->
+              <!-- {{ item.media_duration }} -->
             </template>
             <template v-else-if="type_index === 2">
               <video
@@ -86,13 +87,13 @@
             </template>
             <template v-else-if="type_index === 4"> </template>
             <template v-else-if="type_index === 5">
-              <iframe
+              <!-- <iframe
                 class="sources-item-border"
                 :src="item.new_path"
                 width="100%"
                 height="300px"
                 frameborder="0"
-              ></iframe>
+              ></iframe> -->
             </template>
 
             <el-popover placement="bottom" width="300" trigger="hover">
@@ -108,7 +109,9 @@
                   <p class="name">
                     {{ item.name }}
                     <SvgIcon
-                      v-show="item.file_id && (type_index === 3 || type_index === 2)"
+                      v-show="
+                        item.file_id && (type_index === 5 || type_index === 3 || type_index === 2 || type_index === 1)
+                      "
                       icon-class="uploadPreview"
                       size="16"
                       @click="viewDialog(item)"
@@ -231,7 +234,7 @@ import UploadFile from './components/UploadFile.vue';
 import AudioLine from './components/AudioLine.vue';
 const Base64 = require('js-base64').Base64;
 import { getConfig } from '@/utils/auth';
-import { H5StartupFile } from '@/api/app';
+import { H5StartupFile, GetFileURLMap } from '@/api/app';
 
 export default {
   name: 'ProjectResourceManager',
@@ -303,7 +306,7 @@ export default {
       file_id_list: [],
       file_list: [],
       loading: false,
-      acceptFileTypeList: ['.jpg,.png,.jpeg', '.mp3', '.mp4', '.zip', '*', '.txt'],
+      acceptFileTypeList: ['.jpg,.png,.jpeg', '.mp3', '.mp4', '.zip', '.fbx,.obj,.gltf,.glb', '.txt'],
       limit: 10,
       uploadTip: '',
       boxLoading: false,
@@ -486,12 +489,12 @@ export default {
       PageQueryProjectResourceList(datas)
         .then(({ total_count, resource_list }) => {
           this.total = total_count;
-          if (this.type_index === 5) {
-            resource_list.forEach((item) => {
-              item.new_path = `${this.file_preview_url}onlinePreview?url=${Base64.encode(item.file_url)}`;
-            });
-            this.boxLoading = false;
-          }
+          // if (this.type_index === 5) {
+          //   resource_list.forEach((item) => {
+          //     item.new_path = `${this.file_preview_url}onlinePreview?url=${Base64.encode(item.file_url)}`;
+          //   });
+          //   this.boxLoading = false;
+          // }
           // else if (this.type_index === 3) {
           //   resource_list.forEach((item) => {
           //     H5StartupFile({ file_id: item.file_id, index_file_name: 'index.html' }).then((res) => {
@@ -500,9 +503,9 @@ export default {
           //     });
           //   });
           // }
-          else {
-            this.boxLoading = false;
-          }
+          // else {
+          this.boxLoading = false;
+          // }
           this.list = resource_list;
         })
         .catch(() => {
@@ -625,8 +628,10 @@ export default {
           this.visible = true;
         });
       } else {
-        this.newpath = `${this.file_preview_url}onlinePreview?url=${Base64.encode(file.file_url)}`;
-        this.visible = true;
+        GetFileURLMap({ file_id_list: [file.file_id] }).then(({ url_map }) => {
+          this.newpath = `${this.file_preview_url}onlinePreview?url=${Base64.encode(url_map[file.file_id])}`;
+          this.visible = true;
+        });
       }
     },
   },