BJ_ZTEITS-Developers / parking-cloud-yudao

Commit 4a8129bffa9e3928c56333e29f5874f55a079764

Authored by YunaiV
1 parent 833ac54a

v3.6.0 封装iframe组件

Inline Side-by-side
Showing 8 changed files with 66 additions and 88 deletions
yudao-ui-admin/src/components/iFrame/index.vue 0 → 100644
  View file @4a8129b
  1 +<template>
  2 + <div v-loading="loading" :style="'height:' + height">
  3 + <iframe
  4 + :src="src"
  5 + frameborder="no"
  6 + style="width: 100%; height: 100%"
  7 + scrolling="auto"
  8 + />
  9 + </div>
  10 +</template>
  11 +<script>
  12 +export default {
  13 + props: {
  14 + src: {
  15 + type: String,
  16 + required: true
  17 + },
  18 + },
  19 + data() {
  20 + return {
  21 + height: document.documentElement.clientHeight - 94.5 + "px;",
  22 + loading: true,
  23 + url: this.src
  24 + };
  25 + },
  26 + mounted: function () {
  27 + setTimeout(() => {
  28 + this.loading = false;
  29 + }, 300);
  30 + const that = this;
  31 + window.onresize = function temp() {
  32 + that.height = document.documentElement.clientHeight - 94.5 + "px;";
  33 + };
  34 + }
  35 +};
  36 +</script>
yudao-ui-admin/src/views/infra/druid/index.vue
  View file @4a8129b
1 <template> 1 <template>
2 - <div v-loading="loading" :style="'height:'+ height">  
3 - <iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />  
4 - </div> 2 + <i-frame :src="url" />
5 </template> 3 </template>
6 <script> 4 <script>
  5 +import iFrame from "@/components/iFrame/index";
7 export default { 6 export default {
8 name: "Druid", 7 name: "Druid",
  8 + components: { iFrame },
9 data() { 9 data() {
10 return { 10 return {
11 - src: process.env.VUE_APP_BASE_API + "/druid/index.html",  
12 - height: document.documentElement.clientHeight - 94.5 + "px;",  
13 - loading: true 11 + url: process.env.VUE_APP_BASE_API + "/druid/index.html"
14 }; 12 };
15 }, 13 },
16 - mounted: function() {  
17 - setTimeout(() => {  
18 - this.loading = false;  
19 - }, 230);  
20 - const that = this;  
21 - window.onresize = function temp() {  
22 - that.height = document.documentElement.clientHeight - 94.5 + "px;";  
23 - };  
24 - }  
25 }; 14 };
26 </script> 15 </script>
yudao-ui-admin/src/views/infra/server/index.vue
  View file @4a8129b
1 <template> 1 <template>
2 - <div v-loading="loading" :style="'height:'+ height">  
3 - <iframe ref="iframe" :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />  
4 - </div> 2 + <i-frame :src="url" />
5 </template> 3 </template>
6 <script> 4 <script>
  5 +import iFrame from "@/components/iFrame/index";
7 export default { 6 export default {
8 - name: "Server", 7 + name: "Druid",
  8 + components: { iFrame },
9 data() { 9 data() {
10 return { 10 return {
11 - src: process.env.VUE_APP_BASE_API + "/admin",  
12 - height: document.documentElement.clientHeight - 94.5 + "px;",  
13 - loading: true 11 + url: process.env.VUE_APP_BASE_API + "/admin"
14 }; 12 };
15 }, 13 },
16 - mounted: function() {  
17 - const that = this;  
18 -  
19 - setTimeout(() => {  
20 - // 模拟点击【应用】菜单  
21 - // that.$refs["iframe"].contentWindow.document.getElementsByClassName('navbar-item')[2].click(); // TODO 暂时去掉，存在跨域问题  
22 - // 取消加载中  
23 - this.loading = false;  
24 - }, 230);  
25 -  
26 - // 大小变化的监听  
27 - window.onresize = function temp() {  
28 - that.height = document.documentElement.clientHeight - 94.5 + "px;";  
29 - };  
30 - }  
31 }; 14 };
32 </script> 15 </script>
yudao-ui-admin/src/views/infra/skywalking/index.vue
  View file @4a8129b
1 <template> 1 <template>
2 - <div v-loading="loading" :style="'height:'+ height">  
3 - <iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />  
4 - </div> 2 + <i-frame :src="url" />
5 </template> 3 </template>
6 <script> 4 <script>
  5 +import iFrame from "@/components/iFrame/index";
7 export default { 6 export default {
8 - name: "SkyWalking", 7 + name: "Druid",
  8 + components: { iFrame },
9 data() { 9 data() {
10 return { 10 return {
11 - src: "http://skywalking.shop.iocoder.cn/trace", // TODO 芋艿，后续改成配置读取  
12 - height: document.documentElement.clientHeight - 94.5 + "px;",  
13 - loading: true 11 + url: "http://skywalking.shop.iocoder.cn/trace", // TODO 芋艿，后续改成配置读取
14 }; 12 };
15 }, 13 },
16 - mounted: function() {  
17 - setTimeout(() => {  
18 - this.loading = false;  
19 - }, 230);  
20 - const that = this;  
21 - window.onresize = function temp() {  
22 - that.height = document.documentElement.clientHeight - 94.5 + "px;";  
23 - };  
24 - }  
25 }; 14 };
26 </script> 15 </script>
yudao-ui-admin/src/views/infra/skywalking/log.vue
  View file @4a8129b
1 <template> 1 <template>
2 - <div v-loading="loading" :style="'height:'+ height">  
3 - <iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />  
4 - </div> 2 + <i-frame :src="url" />
5 </template> 3 </template>
6 <script> 4 <script>
  5 +import iFrame from "@/components/iFrame/index";
7 export default { 6 export default {
8 - name: "SkyWalking-Log", 7 + name: "Druid",
  8 + components: { iFrame },
9 data() { 9 data() {
10 return { 10 return {
11 - src: "http://skywalking.shop.iocoder.cn/log", // TODO 芋艿，后续改成配置读取  
12 - height: document.documentElement.clientHeight - 94.5 + "px;",  
13 - loading: true 11 + url: "http://skywalking.shop.iocoder.cn/log", // TODO 芋艿，后续改成配置读取
14 }; 12 };
15 }, 13 },
16 - mounted: function() {  
17 - setTimeout(() => {  
18 - this.loading = false;  
19 - }, 230);  
20 - const that = this;  
21 - window.onresize = function temp() {  
22 - that.height = document.documentElement.clientHeight - 94.5 + "px;";  
23 - };  
24 - }  
25 }; 14 };
26 </script> 15 </script>
yudao-ui-admin/src/views/tool/dbDoc/index.vue
  View file @4a8129b
@@ -10,15 +10,17 @@ @@ -10,15 +10,17 @@
10 10
11 <!-- 展示文档 --> 11 <!-- 展示文档 -->
12 <div v-loading="loading" :style="'height:'+ height"> 12 <div v-loading="loading" :style="'height:'+ height">
13 - <iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" /> 13 + <i-frame :src="src" />
14 </div> 14 </div>
15 </div> 15 </div>
16 </template> 16 </template>
17 <script> 17 <script>
18 import { exportHtml, exportWord, exportMarkdown} from "@/api/tool/dbDoc"; 18 import { exportHtml, exportWord, exportMarkdown} from "@/api/tool/dbDoc";
  19 +import iFrame from "@/components/iFrame/index";
19 20
20 export default { 21 export default {
21 name: "DBDoc", 22 name: "DBDoc",
  23 + components: { iFrame },
22 data() { 24 data() {
23 return { 25 return {
24 height: document.documentElement.clientHeight - 94.5 + "px;", 26 height: document.documentElement.clientHeight - 94.5 + "px;",
yudao-ui-admin/src/views/tool/swagger/index.vue
  View file @4a8129b
1 <template> 1 <template>
2 - <div v-loading="loading" :style="'height:'+ height">  
3 - <iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />  
4 - </div> 2 + <i-frame :src="url" />
5 </template> 3 </template>
6 <script> 4 <script>
  5 +import iFrame from "@/components/iFrame/index";
7 export default { 6 export default {
8 - name: "Swagger", 7 + name: "Druid",
  8 + components: { iFrame },
9 data() { 9 data() {
10 return { 10 return {
11 - src: process.env.VUE_APP_BASE_API + "/doc.html",  
12 - height: document.documentElement.clientHeight - 94.5 + "px;",  
13 - loading: true 11 + url: process.env.VUE_APP_BASE_API + "/doc.html"
14 }; 12 };
15 }, 13 },
16 - mounted: function() {  
17 - setTimeout(() => {  
18 - this.loading = false;  
19 - }, 230);  
20 - const that = this;  
21 - window.onresize = function temp() {  
22 - that.height = document.documentElement.clientHeight - 94.5 + "px;";  
23 - };  
24 - }  
25 }; 14 };
26 </script> 15 </script>
更新日志.md
  View file @4a8129b
@@ -18,7 +18,8 @@ @@ -18,7 +18,8 @@
18 18
19 ### ⚠️ Warning 19 ### ⚠️ Warning
20 20
21 -TODO 21 +* 修复各种多 Maven Module 重构带来的 Bug，感谢大量群友的 PR 支持！
  22 +* 跟进 ruoyi-vue 3.4.0、3.5.0 版本，感谢这么优秀的开源项目！
22 23
23 ### 📈 Statistic 24 ### 📈 Statistic
24 25
@@ -34,7 +35,7 @@ TODO @@ -34,7 +35,7 @@ TODO
34 * 【新增】前端的表格右侧工具栏组件支持显隐列，具体可见【用户管理】功能 [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/20e34e35a3bdc48e6a4c58e3849aa729bd18efe5) 35 * 【新增】前端的表格右侧工具栏组件支持显隐列，具体可见【用户管理】功能 [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/20e34e35a3bdc48e6a4c58e3849aa729bd18efe5)
35 * 【新增】前端的菜单导航显示风格 TopNav（false 为 左侧导航菜单，true 为顶部导航菜单），支持布局的保存与重置 [commit1](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/4bf5b04d542014a49c5a41b20935cef35033a518) [commit2](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/cff4391f2d7830770731c0034085c0f77ea8c68e) 36 * 【新增】前端的菜单导航显示风格 TopNav（false 为 左侧导航菜单，true 为顶部导航菜单），支持布局的保存与重置 [commit1](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/4bf5b04d542014a49c5a41b20935cef35033a518) [commit2](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/cff4391f2d7830770731c0034085c0f77ea8c68e)
36 * 【新增】前端的网页标题支持根据选择的菜单，动态展示标题 [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/7bf9a85263e0c44b2bc88485b83557c129583f5c) 37 * 【新增】前端的网页标题支持根据选择的菜单，动态展示标题 [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/7bf9a85263e0c44b2bc88485b83557c129583f5c)
37 -* 【新增】跟进 ruoyi-vue 3.4.0、3.5.0 版本，感谢这么优秀的开源项目！ 38 +* 【新增】前端的 iframe 组件，方便内嵌网页 [commit]()
38 39
39 ### 🐞 Bug Fixes 40 ### 🐞 Bug Fixes
40 41