Selaa lähdekoodia

2.0.1 查询窗口表格字段值含有http为网页地址时显示复制和打开链接

liuyanpeng 11 kuukautta sitten
vanhempi
sitoutus
39e12c64a0
3 muutettua tiedostoa jossa 115 lisäystä ja 39 poistoa
  1. 1 1
      package.json
  2. 88 33
      packages/common/DownloadService.js
  3. 26 5
      packages/info/src/QueryPageTable.vue

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "pc-component-v3",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "",
   "main": "dist/pc-component-v3.js",
   "scripts": {

+ 88 - 33
packages/common/DownloadService.js

@@ -1,5 +1,52 @@
 import Common from './Common.js';
 import Notify from './Notify.js';
+const showFullscreenLoading = () => {
+  // 创建全屏遮罩
+  const overlay = document.createElement('div');
+  overlay.style.position = 'fixed';
+  overlay.style.top = '0';
+  overlay.style.left = '0';
+  overlay.style.width = '100vw';
+  overlay.style.height = '100vh';
+  overlay.style.backgroundColor = '#96e5b8';
+  overlay.style.zIndex = '9999';
+  overlay.style.opacity = '0.6';
+  overlay.style.display = 'flex';
+  overlay.style.justifyContent = 'center';
+  overlay.style.alignItems = 'center';
+  overlay.id = 'fullscreen-loading';
+
+  // 创建旋转动画元素
+  const spinner = document.createElement('div');
+  spinner.style.width = '50px';
+  spinner.style.height = '50px';
+  spinner.style.border = '5px solid rgb(20, 214, 140)';
+  spinner.style.borderRadius = '50%';
+  spinner.style.opacity = '1';
+  spinner.style.borderTopColor = '#fff';
+  spinner.style.animation = 'spin 1s linear infinite';
+
+  // 添加CSS动画关键帧
+  const style = document.createElement('style');
+  style.textContent = `
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+  `;
+
+  overlay.appendChild(spinner);
+  document.body.appendChild(style);
+  document.body.appendChild(overlay);
+};
+
+const hideFullscreenLoading = () => {
+  const overlay = document.getElementById('fullscreen-loading');
+  if (overlay) {
+    overlay.remove();
+    // 移除动态添加的style标签
+    document.querySelector('style').remove();
+  }
+};
 /**
  * 报表下载服务
  */
@@ -7,10 +54,10 @@ export default {
 
 
   /**
-	 * GET 方式下载文件
-	 * @param {*} url 
-	 * @param {*} fileName 
-	 */
+   * GET 方式下载文件
+   * @param {*} url 
+   * @param {*} fileName 
+   */
   downloadFile: function (url, fileName) {
     var xhr = new XMLHttpRequest();
     xhr.open('get', url, true);
@@ -18,53 +65,61 @@ export default {
     xhr.setRequestHeader('token', token);
     xhr.setRequestHeader('Content-type', 'application/json');
     xhr.responseType = 'blob';
-    xhr.onreadystatechange = function(){
-      if(xhr.readyState === 4 && xhr.status === 200){
-        let res = xhr.response;
-        let type = xhr.getResponseHeader('Content-Type');
-        let blob = new Blob([res], { type: type });   
-        const blobUrl = URL.createObjectURL(blob);
-        const link = document.createElement('a');
-        link.download = fileName;
-        link.style.display = 'none';
-        link.href = blobUrl;
-        document.body.appendChild(link);
-        link.click();
-        URL.revokeObjectURL(blobUrl);
-        document.body.removeChild(link);  
+    showFullscreenLoading();
+    xhr.onreadystatechange = function () {
+      if (xhr.readyState === 4) {
+        if (xhr.status === 200) {
+          let res = xhr.response;
+          let type = xhr.getResponseHeader('Content-Type');
+          let blob = new Blob([res], { type: type });
+          const blobUrl = URL.createObjectURL(blob);
+          const link = document.createElement('a');
+          link.download = fileName;
+          link.style.display = 'none';
+          link.href = blobUrl;
+          document.body.appendChild(link);
+          link.click();
+          URL.revokeObjectURL(blobUrl);
+          document.body.removeChild(link);
+        }
+        hideFullscreenLoading();
       }
     };
+    xhr.onerror = function () {
+      hideFullscreenLoading();
+      Notify.error('文件下载失败');
+    };
     xhr.send();
   },
 
 
   /**
-	 * 报表下载
-	 * @param {Object} fileName
-	 * @author GuoZhiBo 20200410
-	 */
+   * 报表下载
+   * @param {Object} fileName
+   * @author GuoZhiBo 20200410
+   */
   reportDownload: function (fileName) {
     var downloadUrl = Common.getApiURL('file/reportDownload') + '?fileName=' + window.encodeURIComponent(fileName);
     this.downloadFile(downloadUrl, fileName);
   },
 
   /**
-	 * 文件下载
-	 * @param {Object} className 类名称
-	 * @param {Object} fileName 文件名称
-	 * @author GuoZhiBo 20211008
-	 */
-  fileDownload:function(className, fileName){
+   * 文件下载
+   * @param {Object} className 类名称
+   * @param {Object} fileName 文件名称
+   * @author GuoZhiBo 20211008
+   */
+  fileDownload: function (className, fileName) {
     var downloadUrl = Common.getApiURL('file/fileDownload') + '?className=' + className
-        + '&fileName=' + window.encodeURIComponent(fileName);
+      + '&fileName=' + window.encodeURIComponent(fileName);
     this.downloadFile(downloadUrl, fileName);
   },
 
   /**
-	 * POST 方式下载文件
-	 * @param {http请求的地址} url 
-	 * @param {post请求需要的参数} params 
-	 */
+   * POST 方式下载文件
+   * @param {http请求的地址} url 
+   * @param {post请求需要的参数} params 
+   */
   postDownloadFile: function (url, params) {
     var form = document.createElement('form');
     form.style.display = 'none';

+ 26 - 5
packages/info/src/QueryPageTable.vue

@@ -67,11 +67,18 @@
                 />
               </span>
               <span v-else>
-                {{
-                  item1.data[item2.fieldName] != undefined
-                    ? item1.data[item2.fieldName].displayValue[0]
-                    : ""
-                }}
+                <span v-if="item1.data[item2.fieldName]">
+                  <a-space v-if="item1.data[item2.fieldName].displayValue[0].includes('https://') || item1.data[item2.fieldName].displayValue[0].includes('http://')">
+                    <a-button type="link" @click="copyLink(item1.data[item2.fieldName].displayValue[0])">
+                      复制
+                    </a-button>
+                    <a-button type="link" @click="openLink(item1.data[item2.fieldName].displayValue[0])">
+                      打开
+                    </a-button>
+                  </a-space>
+                  <span v-else>{{ item1.data[item2.fieldName].displayValue[0] }}</span>
+                </span>
+                <span v-else />
               </span>
             </td>
           </template>
@@ -96,6 +103,7 @@ import QueryPageImage from './QueryPageImage.vue';
 
 import Uuid from '../../common/Uuid.js';
 import Notify from '../../common/Notify.js';
+import { message } from 'ant-design-vue';
 
 
 
@@ -232,6 +240,19 @@ export default {
 
     getContext: Context,
 
+    copyLink: function (url) {
+      navigator.clipboard.writeText(url)
+        .then(() => {
+          message.success('复制成功');
+        })
+        .catch(error => {
+          message.warning('复制失败');
+        });
+    },
+    openLink: function (url) {
+      window.open(url, '_blank');
+    },
+
     executeCallout: function (rowData, filedItem) {
       let _self = this;