adtec-core-package 3.1.6 → 3.1.7

package/src/components/upload/FileView.vue

@@ -3,109 +3,75 @@
 <!--创建时间: 2024/12/3 上午10:06-->
 <!--修改时间: 2024/12/3 上午10:06-->
 <template>
-  <!--  <el-dialog :title="title" v-model="model" @close="model = false" width="100%">-->
   <Teleport to="body" v-if="model">
     <div
       v-loading="loading"
-      element-loading-text="下载中，请稍后。。。"
-      style="
-        position: absolute;
-        z-index: 9999;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-        background: rgb(0, 0, 0, 0.5);
-        text-align: center;
-        vertical-align: middle;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      "
+      element-loading-text="加载中，请稍后。。。"
+      class="file-view-overlay"
     >
-      <el-icon @click="download" style="
-      position: absolute;
-          top: 10%;
-          right: 10%;
-          font-size: 30px;
-          color: rgba(0,0,0,0.5);
-          cursor: pointer;"><Download /></el-icon>
-      <el-icon
-        @click="model = false"
-        style="
-          position: absolute;
-          top: 20px;
-          right: 20px;
-          font-size: 30px;
-          color: #f5f5f5;
-          opacity: 0.6;
-          cursor: pointer;
-        "
-      ><CircleClose
-      /></el-icon>
-
-
-      <DocumentEditor
-        id="docEditor"
-        :documentServerUrl="documentServerUrl"
-        :config="configcomp"
-        :events_onDocumentReady="onDocumentReady"
-        :onLoadComponentError="onLoadComponentError"
+      <office-preview-toolbar
+        v-if="!isHeaderPreview"
+        class="file-view-toolbar"
+        :zoom="previewScale"
+        :show-zoom="false"
+        :show-download="!!url"
+        :show-close="true"
+        :download-loading="loading"
+        @download="download"
+        @close="model = false"
       />
+
+      <div class="office-preview" :class="{ 'has-rich-header': isHeaderPreview }">
+        <office-preview
+          v-if="url"
+          v-model:scale="previewScale"
+          :url="url"
+          :file-id="fileId"
+          :file-name="title"
+          :show-header="isHeaderPreview"
+          :show-download="!!url"
+          :show-close="isHeaderPreview"
+          :download-loading="loading"
+          @loaded="loading = false"
+          @error="loading = false"
+          @download="download"
+          @close="model = false"
+        />
+      </div>
     </div>
   </Teleport>
-  <!--  </el-dialog>-->
 </template>
 <script setup lang="ts">
-import { DocumentEditor } from '@onlyoffice/document-editor-vue'
-import { computed, onBeforeMount, onMounted, ref } from 'vue'
-import { userInfoStore } from '../../stores/userInfoStore'
+import { computed, ref, watch } from 'vue'
 import { useVModel } from '@vueuse/core'
-import { CircleClose, Download } from '@element-plus/icons-vue'
 import framework from '../../api/framework'
 import frameworkUtils from '../../utils/FrameworkUtils'
 import { toSameOriginFileUrl } from '../../utils/toSameOriginFileUrl'
-import { ElIcon } from 'element-plus'
-const userinfo = userInfoStore()
-const model = defineModel()
-const loading=ref(false)
-const documentServerUrl = ref('')
-const documentServerCallbackUrl = ref('')
-
 import request from '../../utils/AxiosConfig'
+import OfficePreview from './OfficePreview.vue'
+import OfficePreviewToolbar from './OfficePreviewToolbar.vue'
+import {
+  isHeaderPreviewFile,
+  resolveOfficeFileExt,
+} from '../../utils/officePreviewUtil.ts'
 
+const model = defineModel()
+const loading = ref(false)
+const previewScale = ref(1)
 
-// 定义Props类型
 const props = defineProps({
-  /**
-   * @default ''
-   * @description 文件标题
-   */
   title: {
     type: String,
     default: '',
   },
-  /**
-   * @default ''
-   * @description 文件Url地址
-   */
   url: {
     type: String,
     default: '',
   },
-  /**
-   * @default ''
-   * @description 文件id
-   */
   fileId: {
     type: String,
     default: '',
   },
-  /**
-   * @type {"view" | "edit"}
-   * @default ''
-   * @description 文件id
-   */
   edit: {
     type: String,
     default: 'view',
@@ -115,105 +81,82 @@ const emit = defineEmits(['update:title', 'update:url', 'update:fileId', 'update
 const title = useVModel(props, 'title', emit)
 const fileId = useVModel(props, 'fileId', emit)
 const url = useVModel(props, 'url', emit)
-const edit = useVModel(props, 'edit', emit)
 
-const resolveFileExt = (type?: string, name?: string, fileUrl?: string) => {
-  const normalizedType = (type || '').toLowerCase().replace(/^\./, '')
-  if (normalizedType) {
-    return normalizedType === 'doc' ? 'docx' : normalizedType
-  }
-  const fromName = (name || '').match(/\.([a-z0-9]+)$/i)?.[1]?.toLowerCase()
-  if (fromName) {
-    return fromName === 'doc' ? 'docx' : fromName
-  }
-  const urlStr = (fileUrl || '').toLowerCase()
-  if (urlStr.includes('.docx') || urlStr.includes('.doc')) return 'docx'
-  if (urlStr.includes('.pdf')) return 'pdf'
-  if (urlStr.includes('.xlsx') || urlStr.includes('.xls')) return 'xlsx'
-  if (urlStr.includes('.pptx') || urlStr.includes('.ppt')) return 'pptx'
-  return ''
-}
+const isHeaderPreview = computed(() =>
+  isHeaderPreviewFile(undefined, title.value, url.value),
+)
 
-const getFileType = () => resolveFileExt(undefined, title.value, url.value)
-const getDocumentType = () => {
-  const ext = getFileType()
-  if (ext === 'docx' || ext === 'doc') return 'word'
-  if (ext === 'pdf') return 'pdf'
-  if (ext === 'xlsx' || ext === 'xls') return 'cell'
-  if (ext === 'pptx' || ext === 'ppt') return 'slide'
-}
-const download= async ()=>{
-  try{
-    loading.value=true
-    const data=await framework.getFileAccessAddress(fileId.value)
-    const res=await request<any>({
+watch(
+  [model, url],
+  ([visible, fileUrl]) => {
+    if (visible && fileUrl) {
+      loading.value = true
+      previewScale.value = 1
+    } else if (!visible) {
+      loading.value = false
+      previewScale.value = 1
+    }
+  },
+  { immediate: true },
+)
+
+const getFileType = () => resolveOfficeFileExt(undefined, title.value, url.value)
+
+const download = async () => {
+  try {
+    loading.value = true
+    const data = await framework.getFileAccessAddress(fileId.value)
+    const res = await request<any>({
       url: toSameOriginFileUrl(data.url),
       method: 'get',
       responseType: 'blob',
     })
     const viewSrc = new Blob([res.data], {
-      type: 'application/'+getFileType(),
+      type: 'application/' + getFileType(),
     })
-    var link = document.createElement('a')
+    const link = document.createElement('a')
     link.href = window.URL.createObjectURL(viewSrc)
     link.download = title.value
     link.click()
-    //释放内存
     window.URL.revokeObjectURL(link.href)
-
-  }catch (err){
+  } catch (err) {
     frameworkUtils.messageError(err)
-  }finally {
+  } finally {
     loading.value = false
   }
 }
-const configcomp = computed(() => {
-  return {
-    document: {
-      fileType: getFileType(),
-      title: title.value,
-      url: url.value + '',
-      permissions: {
-        download: false,
-        edit: false,
-        print: false,
-      },
-    },
-    type:"embedded",
-    documentType: getDocumentType(),
-    editorConfig: {
-      callbackUrl: documentServerCallbackUrl.value + '?fileId=' + fileId.value,
-      lang: 'zh-CN',
-      customization: {
-        autosave: false,
-        zoom: 95,
-      },
-      embedded: {
-        // embedUrl: documentServerCallbackUrl.value + '?fileId=' + fileId.value,
-        // fullscreenUrl: documentServerCallbackUrl.value + '?fileId=' + fileId.value,
-        saveUrl: url.value + '',
-        // shareUrl: documentServerCallbackUrl.value + '?fileId=' + fileId.value,
-        toolbarDocked: 'top',
-      },
-      // customization: {
-      //   autosave: false,
-      // },
-      user: {
-        id: userinfo.getUserInfo.userCode,
-        name: userinfo.getUserInfo.userName,
-      },
-    },
-    height: '90%',
-    width: '90%',
-  }
-})
-const onDocumentReady = () => {}
-const onLoadComponentError = () => {}
-onBeforeMount(() => {
-  const config = JSON.parse(localStorage.getItem('systemConfig') + '')
-  documentServerUrl.value = config.documentServerUrl
-  documentServerCallbackUrl.value = config.documentServerCallbackUrl
-})
-onMounted(() => {})
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.file-view-overlay {
+  position: absolute;
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: rgb(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.file-view-toolbar {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  z-index: 10001;
+}
+
+.office-preview {
+  height: 90%;
+  width: 90%;
+  overflow: hidden;
+  background: #f5f5f5;
+  border-radius: 8px;
+
+  &.has-rich-header {
+    display: flex;
+    flex-direction: column;
+  }
+}
+</style>