optimization: 自定义表格支持url新页面或iframe打开链接 (#1190)

TencentBlueKing · Aug 31, 2023 · eb6b69a · eb6b69a
1 parent da09e99
commit eb6b69a
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 57 deletions.
diff --git a/frontend/pc/src/App.vue b/frontend/pc/src/App.vue
@@ -22,39 +22,41 @@
 
 <template>
   <div id="app" class="bk-app" @click="hiddenTree" v-bkloading="{ isLoading: loading }">
-    <!-- has navigation-->
-    <navigation v-if="!$route.meta.iframe">
-      <div
-        v-if="isShowView"
-        v-bkloading="{ isLoading: localLoading }"
-        class="bk-app-content">
-        <permissionApply
-          v-if="permissinApplyShow"
-          ref="permissionApply"
-          :permission-data="permissionData">
-        </permissionApply>
-        <router-view
-          v-else
-          :key="routerKey">
-        </router-view>
-      </div>
-    </navigation>
-    <!-- no navigation-->
-    <template v-else>
-      <div
-        v-if="isShowView"
-        v-bkloading="{ isLoading: localLoading }"
-        class="bk-app-content">
-        <permissionApply
-          v-if="permissinApplyShow"
-          ref="permissionApply"
-          :permission-data="permissionData">
-        </permissionApply>
-        <router-view
-          v-else
-          :key="routerKey">
-        </router-view>
-      </div>
+    <template v-if="isShowView">
+      <!-- has navigation-->
+      <navigation v-if="!$route.meta.iframe">
+        <div
+          v-if="isShowView"
+          v-bkloading="{ isLoading: localLoading }"
+          class="bk-app-content">
+          <permissionApply
+            v-if="permissinApplyShow"
+            ref="permissionApply"
+            :permission-data="permissionData">
+          </permissionApply>
+          <router-view
+            v-else
+            :key="routerKey">
+          </router-view>
+        </div>
+      </navigation>
+      <!-- no navigation-->
+      <template v-else>
+        <div
+          v-if="isShowView"
+          v-bkloading="{ isLoading: localLoading }"
+          class="bk-app-content">
+          <permissionApply
+            v-if="permissinApplyShow"
+            ref="permissionApply"
+            :permission-data="permissionData">
+          </permissionApply>
+          <router-view
+            v-else
+            :key="routerKey">
+          </router-view>
+        </div>
+      </template>
     </template>
     <PermissionModal ref="permissionModal"></PermissionModal>
   </div>

diff --git a/frontend/pc/src/components/renderview/ViewItem.vue b/frontend/pc/src/components/renderview/ViewItem.vue
@@ -36,6 +36,7 @@
       v-if="crumbsList.length <= 1"
       :is="componentType"
       :form="form"
+      :scheme="scheme"
       v-bind="getAttrs(form)">
     </component>
     <render-view
@@ -50,12 +51,14 @@
 <script>
   import TagText from './tags/TagText.vue';
   import TagTable from './tags/TagTable.vue';
+  import TagUrl from './tags/TagUrl.vue';
   import { deepClone } from '../../utils/util';
   export default {
     name: 'ViewItem',
     components: {
       TagText,
       TagTable,
+      TagUrl,
       RenderView: () => import('./RenderView'),
     },
     inject: ['getContext'],

diff --git a/frontend/pc/src/components/renderview/formMixins.js b/frontend/pc/src/components/renderview/formMixins.js
@@ -33,6 +33,10 @@ export const COMMON_ATTRS = {
     type: Object,
     default: () => ({}),
   },
+  scheme: {
+    type: Object,
+    default: () => ({}),
+  },
   children: {
     type: [String, Array],
     required: false,

diff --git a/frontend/pc/src/components/renderview/tags/TagTable.vue b/frontend/pc/src/components/renderview/tags/TagTable.vue
@@ -101,6 +101,7 @@
         }
         return {
           type: item.type,
+          isIframe: item.is_iframe || false,
         };
       },
     },

diff --git a/frontend/pc/src/components/renderview/tags/TagUrl.vue b/frontend/pc/src/components/renderview/tags/TagUrl.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="tag-url">
+    <template v-if="form.value">
+      <span v-if="scheme.isIframe" class="slider-trigger-btn" @click="isSideSliderOpen = true">{{ text }}</span>
+      <a v-else class="link" :href="form.value" target="_blank">{{ text }}</a>
+    </template>
+    <span v-else>{{ form.label || '--' }}</span>
+    <bk-sideslider
+      :is-show.sync="isSideSliderOpen"
+      :quick-close="true"
+      :title="text"
+      :width="800"
+      ext-cls="custom-form-iframe-sideslider">
+      <div slot="content" class="custom-form-iframe-content">
+        <iframe :src="form.value" frameborder="0"></iframe>
+      </div>
+    </bk-sideslider>
+  </div>
+</template>
+<script>
+  import { getFormMixins } from '../formMixins';
+
+  const textAttrs = {
+    styles: {
+      type: Object,
+      default: () => ({}),
+    },
+    value: {
+      type: [String, Array],
+      default: '',
+    },
+  };
+  export default {
+    name: 'TagUrl',
+    mixins: [getFormMixins(textAttrs)],
+    data() {
+      return {
+        isSideSliderOpen: false,
+      };
+    },
+    computed: {
+      text() {
+        return this.form.label || this.form.value || '--';
+      },
+    },
+  };
+</script>
+<style lang="scss" scoped>
+  .tag-url {
+    display: flex;
+  }
+  .slider-trigger-btn {
+    color: #3a84ff;
+    cursor: pointer;
+  }
+  .link {
+    color: #3a84ff;
+  }
+  .custom-form-iframe-content {
+    width: 100%;
+    height: 100%;
+    iframe {
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>
diff --git a/frontend/pc/src/views/ticket/details/components/fieldsDone.vue b/frontend/pc/src/views/ticket/details/components/fieldsDone.vue
@@ -118,12 +118,14 @@
     </div>
     <!-- 自定义表单 -->
     <div v-else-if="item.type === 'CUSTOM-FORM'" class="bk-fields-done-item">
-      <span v-if="isShowName" class="bk-li-left" style="float: initial;" :title="item.name">{{item.name}}</span>
-      <render-view
-        style="width: calc(100% - 140px)"
-        :form-data="customForm.formData"
-        :context="customForm.context">
-      </render-view>
+      <span v-if="isShowName" class="bk-li-left" style="float: initial;" :title="item.name">{{item.name}}：</span>
+      <div class="custom-form-wrapper">
+        <render-view
+          style="margin-left: 0 !important;"
+          :form-data="customForm.formData"
+          :context="customForm.context">
+        </render-view>
+      </div>
     </div>
     <!-- 默认 -->
     <div class="bk-fields-done-item" v-else>
@@ -342,37 +344,23 @@
       cursor: default;
     }
     .bk-fields-done {
+        position: relative;
         width: 100%;
         color: #737987;
-        display: flex;
-        .isOn {
-            font-size: 22px;
-            opacity: 0;
-            color: #3A84FF;
-        }
-
         &:hover {
-            .isOn {
-                opacity: 1;
+            .bk-fields-done-edit {
+                display: block;
             }
         }
         .bk-fields-done-item {
             // @include scroller(#060707, 3px);
             // overflow: auto;
-            max-width: calc(100% - 30px);
+            max-width: calc(100% - 10px);
             overflow-wrap: break-word;
             display: flex;
             .bk-form-content {
               width: calc(100% - 130px);
             }
-
-            .bk-fields-done-edit {
-                display: inline-block;
-                margin-top: 2px;
-                padding-left: 10px;
-                cursor: pointer;
-                align-self: flex-start;
-            }
             .bk-li-link{
                 color: #3a84ff;
                 cursor: pointer;
@@ -400,6 +388,7 @@
               }
             }
             .bk-li-left {
+                flex-shrink: 0;
                 width: 120px;
                 font-weight: 400;
                 margin-right: 10px;
@@ -428,6 +417,21 @@
                 }
             }
         }
+        .custom-form-wrapper {
+          flex: 1;
+          overflow: hidden;
+        }
+        .bk-fields-done-edit {
+            display: none;
+            position: absolute;
+            top: 0;
+            right: 0;
+            cursor: pointer;
+            .isOn {
+                font-size: 22px;
+                color: #3A84FF;
+            }
+        }
     }
 
     .bk-fields-log{
-Original file line number
+Diff line change
@@ Expand Up / @@ -101,6 +101,7 @@ @@
             }
             return {
               type: item.type,
+              isIframe: item.is_iframe || false,
             };
           },
         },
@@ Expand Down @@