#ICBR0A wps集成

src/api/system/file/index.ts

@@ -72,3 +72,15 @@ export async function getFileList(params: FilePageListParams, mode: ErrorMessage
     },
   );
 }
+
+export async function getAppToken(params, mode: ErrorMessageMode = 'modal') {
+    return defHttp.get(
+        {
+            url: '/v1/3rd/weboffice/url',
+            params
+        },
+        {
+            errorMessageMode: mode,
+        },
+    );
+}

src/components/Form/src/components/Upload.vue

@@ -70,6 +70,19 @@
           点击上传
         </a-button>
       </div>
+
+        <template #itemRender="{ file, actions }">
+            <a-space class="file-space">
+                <PaperClipOutlined/>
+                <span class="file-name-span" @click="actions.preview">{{ file.name }}</span>
+                <a-tooltip v-if="showDownloadIcon" title="下载"><span @click="actions.download" class="file-outlined-span"><DownloadOutlined /></span></a-tooltip>
+                <a-tooltip v-if="!disabled && showRemoveIcon" title="删除"><span @click="actions.remove" class="file-outlined-span"><DeleteOutlined /></span></a-tooltip>
+                <a-tooltip v-if="'.doc,.docx,.xls,.xlsx,.pdf'.includes(file.fileType)" title="编辑文档">
+                    <span @click="editFile(file)" class="file-outlined-span"><EditOutlined /></span>
+                </a-tooltip>
+            </a-space>
+        </template>
+
     </a-upload>
     <a-modal
       :bodyStyle="bodyStyle"
@@ -81,19 +94,31 @@
     >
       <iframe v-if="previewVisible" :src="previewFile" class="iframe-box"></iframe>;
     </a-modal>
+    <a-modal
+      wrap-class-name="full-modal"
+      width="100%"
+      :visible="wpsPreviewVisible"
+      :title="previewTitle"
+      :footer="null"
+      @cancel="handleCancelWps"
+    >
+      <div v-if="wpsPreviewVisible" id="office-container"></div>
+    </a-modal>
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, watch } from 'vue';
+  import { nextTick, ref, watch } from 'vue';
   import { Upload } from 'ant-design-vue';
-  import { UploadOutlined, PlusOutlined } from '@ant-design/icons-vue';
+  import { UploadOutlined, PlusOutlined, DownloadOutlined, DeleteOutlined, EditOutlined, PaperClipOutlined } from '@ant-design/icons-vue';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { deleteSingleFile, getFileList } from '/@/api/system/file';
+  import {deleteSingleFile, getAppToken, getFileList, getOnlineEditUrl} from '/@/api/system/file';
   import { downloadByUrl } from '/@/utils/file/download';
   import { uploadMultiApi } from '/@/api/sys/upload';
   import Icon from '/@/components/Icon/index';
   import { Base64 } from 'js-base64';
   import { getAppEnvConfig } from '/@/utils/env';
+  import WebOfficeSDK from "/@/assets/libs/open-jssdk-v0.1.3.es.js";
+  import {getToken} from "/@/utils/auth";
 
   const props = defineProps({
     value: String,
@@ -133,6 +158,7 @@
   const loading = ref(false);
 
   const previewVisible = ref(false);
+  const wpsPreviewVisible = ref(false);
   const previewFile = ref('');
   const previewTitle = ref('');
 
@@ -254,6 +280,42 @@
     downloadByUrl({ url, fileName: fileName + fileType });
   };
 
+  const handleCancelWps = () => {
+      wpsPreviewVisible.value = false;
+      previewTitle.value = '';
+  };
+
+  const refreshToken = async () => {
+      return getToken();
+  }
+
+  const editFile = async (file) => {
+      wpsPreviewVisible.value = true;
+      previewTitle.value = file.name || file.fileName;
+      let appToken = await getAppToken({_w_fileid: file.id});
+      let containerNode = document.getElementById('office-container')
+      containerNode.style.height = "calc(100vh - 50px)";
+      containerNode.style.width = "100%";
+      let webOfficeSdk = WebOfficeSDK.config({
+          mount: containerNode,
+          url: appToken.wpsUrl + '&_w_tokentype=1',
+          refreshToken: refreshToken,
+      })
+      webOfficeSdk.setToken({
+          token: appToken.token,
+          timeout: 10 * 60 * 1000,
+      });
+
+
+      /*await webOfficeSdk.ready();
+      const app = webOfficeSdk.Application;
+      // 获取总页数
+      const totalPages = await app.ActiveDocument.Range.Information(
+          app.Enum.WdInformation.wdNumberOfPagesInDocument
+      );
+      console.log("总页数为：", totalPages);*/
+  }
+
   const handlePreview = async (file) => {
     const fileUrl = file.response?.data?.fileUrl || file.fileUrl;
     previewFile.value =
@@ -330,4 +392,41 @@
     width: 100%;
     height: 100%;
   }
+
+  .file-name-span {
+      margin-right: 16px;
+      color: #1890ff;
+      cursor: pointer;
+  }
+
+  .file-outlined-span {
+      cursor: pointer;
+  }
+
+  .file-space:hover {
+      background-color: #f5f5f5;
+  }
+
+  .file-space {
+      display: flex;
+      align-items: center;
+      padding: 5px 0;
+  }
+
+  .full-modal {
+      .ant-modal {
+          max-width: 100%;
+          top: 0;
+          padding-bottom: 0;
+          margin: 0;
+      }
+      .ant-modal-content {
+          display: flex;
+          flex-direction: column;
+          height: calc(100vh);
+      }
+      .ant-modal-body {
+          flex: 1;
+      }
+  }
 </style>