From 4944aec15009e7f0f0fc779cad71a6e91082b934 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=B6=E5=90=AF=E9=BE=99?= <shiqilong@beyondcent.com>
Date: Sun, 1 Sep 2024 14:56:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=9B=91=E6=8E=A7=E5=92=8C=E6=97=A5?=
 =?UTF-8?q?=E5=BF=97=20iframe=20=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/common/utils/url.ts      | 18 ++++++++++++++++
 webs/log-web/src/views/iframe.vue | 34 +++++++++++++++++++++----------
 webs/oms-web/src/router/index.js  |  2 +-
 webs/oms-web/src/views/iframe.vue | 34 +++++++++++++++++++++----------
 4 files changed, 65 insertions(+), 23 deletions(-)
 create mode 100644 packages/common/utils/url.ts

diff --git a/packages/common/utils/url.ts b/packages/common/utils/url.ts
new file mode 100644
index 0000000..7e723ac
--- /dev/null
+++ b/packages/common/utils/url.ts
@@ -0,0 +1,18 @@
+export function appendParamsToUrl(url: string, pathname: string, params: Record<string, string>) {
+  // 创建一个新的URL对象，在末尾添加 pathname
+  const urlObject = new URL(pathname, url)
+
+  // 获取该URL的查询参数对象
+  const searchParams = new URLSearchParams(urlObject.search)
+
+  // 添加新的参数
+  for (const key in params) {
+    searchParams.append(key, params[key])
+  }
+
+  // 设置URL的查询参数
+  urlObject.search = searchParams.toString()
+
+  // 返回处理后的URL字符串
+  return urlObject.toString()
+}
diff --git a/webs/log-web/src/views/iframe.vue b/webs/log-web/src/views/iframe.vue
index 13ad93e..c754949 100644
--- a/webs/log-web/src/views/iframe.vue
+++ b/webs/log-web/src/views/iframe.vue
@@ -1,31 +1,43 @@
 <template>
-  <div>
+  <div v-if="iframeUrl">
     <iframe :src="iframeUrl" frameborder="0" class="iframe-box"></iframe>
   </div>
 </template>
 
 <script>
 import { getToken } from '@cmp/cmp-element'
-function addParamsToUrl(url, params) {
-  const queryString = Object.keys(params)
-    .map(key => key + '=' + params[key])
-    .join('&')
-
-  // 检查原url中是否已存在查询字符串
-  const separator = url.includes('?') ? '&' : '?'
-  return url + separator + queryString
-}
+import { appendParamsToUrl } from '@cmp/cmp-common/utils/url.ts'
+import { getSystemTreeConfigs } from '@cmp/cmp-api/system'
 
 export default {
+  data() {
+    return {
+      url: ''
+    }
+  },
+  created() {
+    this.getUrl()
+  },
   computed: {
+    // 取系统配置里面的动态地址, 与菜单的 [路由地址] 进行拼接, params 为地址传参
     iframeUrl() {
+      if (!this.url) return ''
       const params = {
         token: getToken(),
         ...(this.$route.query || {})
       }
-      const url = addParamsToUrl(this.$route.meta.url, params)
+      const url = appendParamsToUrl(this.url, this.$route.path, params)
+      console.log('iframeUrl: ', url.toString())
       return url.toString()
     }
+  },
+  methods: {
+    async getUrl() {
+      const res = await getSystemTreeConfigs({ category: '系统对接' })
+      if (res.success) {
+        this.url = (res.data.find(item => item.name === '日志管理系统')?.values || []).find(({ code }) => code === 'LOGURL')?.value || ''
+      }
+    }
   }
 }
 </script>
diff --git a/webs/oms-web/src/router/index.js b/webs/oms-web/src/router/index.js
index 6b6006e..487e793 100644
--- a/webs/oms-web/src/router/index.js
+++ b/webs/oms-web/src/router/index.js
@@ -1,3 +1,3 @@
 export default {
-  OmsDashbaord: () => import('views/iframe.vue')
+  LogIframe: () => import('views/iframe.vue')
 }
diff --git a/webs/oms-web/src/views/iframe.vue b/webs/oms-web/src/views/iframe.vue
index 13ad93e..9f8c10a 100644
--- a/webs/oms-web/src/views/iframe.vue
+++ b/webs/oms-web/src/views/iframe.vue
@@ -1,31 +1,43 @@
 <template>
-  <div>
+  <div v-if="iframeUrl">
     <iframe :src="iframeUrl" frameborder="0" class="iframe-box"></iframe>
   </div>
 </template>
 
 <script>
 import { getToken } from '@cmp/cmp-element'
-function addParamsToUrl(url, params) {
-  const queryString = Object.keys(params)
-    .map(key => key + '=' + params[key])
-    .join('&')
-
-  // 检查原url中是否已存在查询字符串
-  const separator = url.includes('?') ? '&' : '?'
-  return url + separator + queryString
-}
+import { appendParamsToUrl } from '@cmp/cmp-common/utils/url.ts'
+import { getSystemTreeConfigs } from '@cmp/cmp-api/system'
 
 export default {
+  data() {
+    return {
+      url: ''
+    }
+  },
+  created() {
+    this.getUrl()
+  },
   computed: {
+    // 取系统配置里面的动态地址, 与菜单的 [路由地址] 进行拼接, params 为地址传参
     iframeUrl() {
+      if (!this.url) return ''
       const params = {
         token: getToken(),
         ...(this.$route.query || {})
       }
-      const url = addParamsToUrl(this.$route.meta.url, params)
+      const url = appendParamsToUrl(this.url, this.$route.path, params)
+      console.log('iframeUrl: ', url.toString())
       return url.toString()
     }
+  },
+  methods: {
+    async getUrl() {
+      const res = await getSystemTreeConfigs({ category: '系统对接' })
+      if (res.success) {
+        this.url = (res.data.find(item => item.name === '基础监控系统')?.values || []).find(({ code }) => code === 'MONITORURL')?.value || ''
+      }
+    }
   }
 }
 </script>