feature: 全局变量支持批量编辑 TencentBlueKing#43

hLinx · Jul 6, 2021 · c692823 · c692823
1 parent f4789b5
commit c692823
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 64 deletions.
diff --git a/src/frontend/src/components/jb-edit/host.vue b/src/frontend/src/components/jb-edit/host.vue
@@ -30,12 +30,19 @@
         <div class="render-value-box" @click.stop="handleBlockShowEdit">
             <div class="value-text">
                 <slot v-bind:value="localValue">
-                    <span>{{ renderText }}</span>
+                    <div v-html="renderHtml" style="margin-left: -4px;" />
                 </slot>
             </div>
             <div class="edit-action-box">
-                <Icon v-if="!isBlock && !isSubmiting" type="edit-2" class="edit-action" @click.self.stop="handleShowEdit" />
-                <Icon v-if="isSubmiting" type="loading-circle" class="edit-loading" />
+                <Icon
+                    v-if="!isBlock && !isSubmiting"
+                    type="edit-2"
+                    class="edit-action"
+                    @click.self.stop="handleShowEdit" />
+                <Icon
+                    v-if="isSubmiting"
+                    type="loading-circle"
+                    class="edit-loading" />
             </div>
         </div>
         <choose-ip
@@ -107,7 +114,7 @@
             };
         },
         computed: {
-            renderText () {
+            renderHtml () {
                 if (!this.localValue) {
                     return '--';
                 }
@@ -118,13 +125,13 @@
                 } = this.localValue.hostNodeInfo || {};
                 const strs = [];
                 if (ipList.length > 0) {
-                    strs.push(`${ipList.length} ${I18n.t('台主机.result')}`);
+                    strs.push(`<span class="number strong">${ipList.length}</span>${I18n.t('台主机.result')}`);
                 }
                 if (topoNodeList.length > 0) {
-                    strs.push(`${topoNodeList.length} ${I18n.t('个节点.result')}`);
+                    strs.push(`<span class="number strong">${topoNodeList.length}</span>${I18n.t('个节点.result')}`);
                 }
                 if (dynamicGroupList.length > 0) {
-                    strs.push(`${dynamicGroupList.length} ${I18n.t('个分组.result')}`);
+                    strs.push(`<span class="number strong">${dynamicGroupList.length}</span>${I18n.t('个分组.result')}`);
                 }
                 return strs.length > 0 ? strs.join('\n') : '--';
             },

diff --git a/src/frontend/src/components/jb-edit/input.vue b/src/frontend/src/components/jb-edit/input.vue
@@ -274,9 +274,13 @@
             position: relative;
             cursor: pointer;
 
+            .render-value-box,
+            .edit-value-box {
+                margin-left: -10px;
+            }
+
             .render-value-box {
                 padding-left: 10px;
-                margin-left: -10px;
 
                 &:hover {
                     background: #f0f1f5;
@@ -365,6 +369,10 @@
                 font-size: 16px;
                 color: #ea3636;
             }
+
+            .bk-form-input {
+                height: 30px;
+            }
         }
     }
 </style>
diff --git a/src/frontend/src/components/jb-edit/textarea.vue b/src/frontend/src/components/jb-edit/textarea.vue
@@ -93,7 +93,7 @@
                 type: String,
                 default: '',
             },
-            // true 时值的内容一行展示
+            // 忽略换行强制文本在一行显示
             singleRowRender: {
                 type: Boolean,
                 default: false,
@@ -171,6 +171,57 @@
             });
         },
         methods: {
+            /**
+             * @desc 计算默认展示的文本宽度
+             *
+             * settimeout 保证计算过程在组件渲染之后
+             */
+            calcEllTextLength () {
+                if (this.isExpand) {
+                    return;
+                }
+                setTimeout(() => {
+                    const valLength = this.newVal.length;
+                    const $el = document.createElement('div');
+                    $el.style.position = 'absolute';
+                    $el.style.top = 0;
+                    $el.style.right = 0;
+                    $el.style.width = '100%';
+                    $el.style.opacity = 0;
+                    $el.style.zIndex = '-1';
+                    this.$refs.textWraper.appendChild($el);
+
+                    const lineHeight = 26;
+                    const maxLine = 3;
+                    const maxHeight = lineHeight * maxLine;
+                    let realHeight = 0;
+                    let realLength = 1;
+                
+                    const calcLength = () => {
+                        const text = this.newVal.slice(0, realLength);
+                        $el.innerText = text;
+                        Promise.resolve()
+                            .then(() => {
+                                realHeight = $el.getBoundingClientRect().height;
+                                if (realHeight <= maxHeight && realLength < valLength) {
+                                    realLength += 2;
+                                    calcLength();
+                                }
+                            });
+                    };
+                    calcLength();
+                    setTimeout(() => {
+                        this.renderLength = 0;
+                        if (realHeight > lineHeight) {
+                            this.renderLength = realLength - 7;
+                        }
+                        this.$refs.textWraper.removeChild($el);
+                    });
+                });
+            },
+            /**
+             * @desc 切换编辑状态
+             */
             handleBlockShowEdit () {
                 if (!this.isBlock) {
                     return;
@@ -207,6 +258,7 @@
                     this.$emit('on-change', {
                         [this.field]: this.newVal,
                     });
+                    this.calcEllTextLength();
                     this.messageSuccess(I18n.t('编辑成功'));
                 })
                     .finally(() => {
@@ -229,53 +281,8 @@
                 this.isEditing = false;
             },
             /**
-             * @desc 计算默认展示的文本宽度
-             *
-             * settimeout 保证计算过程在组件渲染之后
+             * @desc 查看态的文本展开收起
              */
-            calcEllTextLength () {
-                if (this.isExpand) {
-                    return;
-                }
-                setTimeout(() => {
-                    const valLength = this.newVal.length;
-                    const $el = document.createElement('div');
-                    $el.style.position = 'absolute';
-                    $el.style.top = 0;
-                    $el.style.right = 0;
-                    $el.style.width = '100%';
-                    $el.style.opacity = 0;
-                    $el.style.zIndex = '-1';
-                    this.$refs.textWraper.appendChild($el);
-
-                    const lineHeight = 26;
-                    const maxLine = 3;
-                    const maxHeight = lineHeight * maxLine;
-                    let realHeight = 0;
-                    let realLength = 1;
-                
-                    const calcLength = () => {
-                        const text = this.newVal.slice(0, realLength);
-                        $el.innerText = text;
-                        Promise.resolve()
-                            .then(() => {
-                                realHeight = $el.getBoundingClientRect().height;
-                                if (realHeight <= maxHeight && realLength < valLength) {
-                                    realLength += 2;
-                                    calcLength();
-                                }
-                            });
-                    };
-                    calcLength();
-                    setTimeout(() => {
-                        this.renderLength = 0;
-                        if (realHeight > lineHeight) {
-                            this.renderLength = realLength - 7;
-                        }
-                        this.$refs.textWraper.removeChild($el);
-                    });
-                });
-            },
             handleExpandAll () {
                 this.isExpand = !this.isExpand;
             },
@@ -290,9 +297,13 @@
             position: relative;
             cursor: pointer;
 
+            .render-value-box,
+            .edit-value-box {
+                margin-left: -10px;
+            }
+
             .render-value-box {
                 padding-left: 10px;
-                margin-left: -10px;
 
                 &:hover {
                     background: #f0f1f5;
@@ -324,6 +335,7 @@
 
             .text-whole {
                 color: #3a84ff;
+                white-space: nowrap;
                 cursor: pointer;
             }
         }
@@ -332,7 +344,7 @@
             position: relative;
             max-width: calc(100% - 25px);
             overflow: hidden;
-            line-height: 26px;
+            line-height: 24px;
             white-space: pre-wrap;
             flex: 0 0 auto;
         }

diff --git a/src/frontend/src/components/jb-sideslider/index.vue b/src/frontend/src/components/jb-sideslider/index.vue
@@ -151,6 +151,8 @@
                                 observer.observe(this.$refs.bkSideslider.$el, {
                                     subtree: true,
                                     childList: true,
+                                    attributeName: true,
+                                    characterData: true,
                                 });
                             });
                             this.checkFooterPosition();

diff --git a/src/frontend/src/views/task-manage/common/render-global-var/batch-operation/index.vue b/src/frontend/src/views/task-manage/common/render-global-var/batch-operation/index.vue
@@ -4,13 +4,13 @@
             <thead>
                 <tr>
                     <th style="width: 130px;">{{ $t('template.变量类型') }}<span class="require-flag" /></th>
-                    <th style="width: 120px;">{{ $t('template.变量名称') }}<span class="require-flag" /></th>
-                    <th style="width: 150px;">
+                    <th>{{ $t('template.变量名称') }}<span class="require-flag" /></th>
+                    <th>
                         <span v-bk-tooltips="$t('template.请输入变量的初始值 [可选]')" class="hover-tips">
                             {{ $t('template.初始值') }}
                         </span>
                     </th>
-                    <th>{{ $t('template.变量描述') }}</th>
+                    <th style="width: 320px;">{{ $t('template.变量描述') }}</th>
                     <th style="width: 80px;">
                         <span v-bk-tooltips="$t('template.变量的值在执行中可变')" class="hover-tips">
                             {{ $t('template.赋值可变') }}

diff --git a/src/frontend/src/views/task-manage/common/render-global-var/index.vue b/src/frontend/src/views/task-manage/common/render-global-var/index.vue
@@ -91,7 +91,7 @@
                 :title="$t('template.查看全局变量')"
                 :show-footer="false"
                 ref="variableView"
-                :media="mediaQueryMap">
+                :media="detailMedia">
                 <detail v-if="isShowDetail" :data="currentData" :default-field="defaultField" />
             </jb-sideslider>
             <jb-sideslider
@@ -132,7 +132,7 @@
                 v-if="isOperation"
                 :is-show.sync="isShowBatchOperation"
                 v-bind="operationSideSliderInfo"
-                :width="1040">
+                :media="batchOperationMediaQuery">
                 <batch-operation
                     v-if="isShowBatchOperation"
                     :variable="variable"
@@ -205,7 +205,7 @@
                 currentData: {},
                 currentIndex: -1,
                 currentOperation: 'create',
-                mediaQueryMap: [],
+                detailMedia: [],
             };
         },
         computed: {
@@ -278,6 +278,9 @@
                 immediate: true,
             },
         },
+        created () {
+            this.batchOperationMediaQuery = [1080, 1280, 1520, 1800];
+        },
         methods: {
             /**
              * @desc 显示全局变量详情tips
@@ -312,7 +315,7 @@
             handlerOperation (variableInfo, index) {
                 this.currentData = variableInfo;
                 if (this.isView) {
-                    this.mediaQueryMap = variableInfo.type === VariableModel.TYPE_HOST ? [960] : [600, 660, 720, 780];
+                    this.detailMedia = variableInfo.type === VariableModel.TYPE_HOST ? [960] : [600, 660, 720, 780];
                     this.isShowDetail = true;
                     return;
                 }