Merge pull request #65 from hLinx/feature_3.3.5_new

feature: 全局变量支持批量编辑 #43
TencentBlueKing · Jul 7, 2021 · 923df2e · 923df2e
2 parents a21385f + c986a76
commit 923df2e
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 46 deletions.
diff --git a/src/frontend/package.json b/src/frontend/package.json
@@ -65,7 +65,7 @@
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.3.1",
-    "eslint-plugin-vue": "^7.9.0",
+    "eslint-plugin-vue": "7.9.0",
     "eslint-webpack-plugin": "^2.5.3",
     "figlet": "^1.5.0",
     "file-loader": "^6.2.0",

diff --git a/src/frontend/src/components/jb-textarea/index.vue b/src/frontend/src/components/jb-textarea/index.vue
@@ -32,7 +32,7 @@
             fouced: isFocused,
         }"
         :style="boxStyles">
-        <div class="job-textarea-wraper" :style="wraperStyles">
+        <div ref="wraper" class="job-textarea-wraper" :style="wraperStyles">
             <div style="min-height: 30px; word-break: break-all; white-space: pre-wrap; visibility: hidden;">{{ localValue }}</div>
             <textarea
                 ref="textarea"
@@ -58,6 +58,8 @@
     </div>
 </template>
 <script>
+    const rowHeight = 18;
+
     export default {
         name: '',
         props: {
@@ -70,6 +72,7 @@
                 type: Boolean,
                 default: false,
             },
+            // 默认展示多少行
             rows: {
                 type: Number,
                 default: 1,
@@ -84,9 +87,9 @@
         },
         computed: {
             boxStyles () {
-                const styles = {
-                    height: `${this.rows * 18 + 12}px`,
-                };
+                const styles = {};
+                const defaultHeight = this.rows * rowHeight + 12;
+                styles.height = `${defaultHeight}px`;
                 return styles;
             },
             wraperStyles () {
@@ -158,7 +161,6 @@
         line-height: 18px;
         word-break: break-all;
         cursor: pointer;
-        background: #fff;
 
         .job-textarea-wraper {
             position: absolute;
@@ -169,8 +171,6 @@
             max-height: 300px;
             min-height: 100%;
             padding-bottom: 20px;
-            background: inherit;
-            transition: all 0.15s;
 
             .value-length {
                 position: absolute;
@@ -193,19 +193,19 @@
             left: 0;
             width: 100%;
             height: 100%;
-            padding: 6px 10px;
+            padding: 6px 10px 0;
             overflow-y: scroll;
             font-size: 12px;
             color: #63656e;
-            background: inherit;
+            background: #fff;
             border: 1px solid #c4c6cc;
             border-radius: 2px;
             outline: none;
             resize: none;
 
             &:focus {
                 padding-bottom: 30px;
-                background: #fff;
+                background: #fff !important;
                 border: 1px solid #3a84ff !important;
             }
 

diff --git a/src/frontend/src/css/bk-patch.css b/src/frontend/src/css/bk-patch.css
@@ -190,10 +190,6 @@
 /**
     覆盖 tooltip 样式
  */
-.tippy-content {
-    padding: 0 !important;
-}
-
 .tippy-tooltip {
     z-index: 1;
 }

diff --git a/src/frontend/src/views/task-manage/common/render-global-var/batch-edit-of-plan/index.vue b/src/frontend/src/views/task-manage/common/render-global-var/batch-edit-of-plan/index.vue
@@ -1,14 +1,12 @@
 <template>
-    <div>
-        <global-variable-layout>
-            <global-variable
-                v-for="variable in variableList"
-                ref="variable"
-                :type="variable.type"
-                :key="variable.id"
-                :data="variable" />
-        </global-variable-layout>
-    </div>
+    <global-variable-layout style="margin-bottom: -20px;">
+        <global-variable
+            v-for="variable in variableList"
+            ref="variable"
+            :type="variable.type"
+            :key="variable.id"
+            :data="variable" />
+    </global-variable-layout>
 </template>
 <script>
     import GlobalVariableLayout from '@components/global-variable/layout';

diff --git a/...ntend/src/views/task-manage/common/render-global-var/batch-operation/create-table-row.vue b/...ntend/src/views/task-manage/common/render-global-var/batch-operation/create-table-row.vue
@@ -14,7 +14,11 @@
             </bk-select>
         </td>
         <td>
-            <div class="variable-name-box offset-left" :class="{ 'edit-error': isNameError }">
+            <div
+                class="variable-name-box offset-left"
+                :class="{
+                    'edit-error': isNameError,
+                }">
                 <bk-input
                     :value="formData.name"
                     @blur="handleShowNameError"
@@ -41,11 +45,12 @@
                     field="defaultTargetValue"
                     :value="formData.defaultTargetValue" />
             </template>
-            <bk-input
-                v-else
-                class="offset-left"
-                :value="formData.defaultValue"
-                @change="value => handleChange('defaultValue', value)" />
+            <template v-else>
+                <bk-input
+                    class="offset-left"
+                    :value="formData.defaultValue"
+                    @change="value => handleChange('defaultValue', value)" />
+            </template>
         </td>
         <td>
             <jb-textarea
@@ -56,7 +61,6 @@
         <td>
             <bk-checkbox
                 v-if="withChangable"
-                class="offset-left"
                 :value="formData.changeable"
                 @change="value => handleChange('changeable', value)"
                 :true-value="1"
@@ -65,7 +69,6 @@
         </td>
         <td>
             <bk-checkbox
-                class="offset-left"
                 :value="formData.required"
                 @change="value => handleChange('required', value)"
                 :true-value="1"
@@ -284,14 +287,13 @@
         }
 
         .job-textarea {
-            background: #f7f8fa;
-
-            &:hover {
-                background: #f0f1f5;
-            }
-
             .job-textarea-edit {
+                background: #f7f8fa;
                 border: 1px solid transparent;
+
+                &:hover {
+                    background: #f0f1f5;
+                }
             }
         }
 

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
@@ -41,6 +41,13 @@
                     @on-append="handleAppendVariable(index)" />
             </template>
         </table>
+        <div
+            v-if="variableList.length < 1"
+            class="empty-box"
+            @click="handleAppendVariable(0)">
+            <Icon type="add-fill" />
+            <span>{{ $t('template.全局变量') }}</span>
+        </div>
     </div>
 </template>
 <script>
@@ -67,11 +74,6 @@
                 variableList: _.cloneDeep(this.variable),
             };
         },
-        created () {
-            if (this.variable.length < 1) {
-                this.variableList.push(createVariable());
-            }
-        },
         methods: {
             /**
              * @desc 不包含当前索引变量的变量列表
@@ -152,7 +154,8 @@
             th,
             td {
                 height: 41px;
-                padding: 0 15px;
+                padding-right: 5px;
+                padding-left: 15px;
                 text-align: left;
             }
 
@@ -194,5 +197,34 @@
                 }
             }
         }
+
+        .empty-box {
+            display: flex;
+            height: 32px;
+            margin-top: 6px;
+            font-size: 12px;
+            color: #979ba5;
+            cursor: pointer;
+            background: #fcfdff;
+            border: 1px dashed #c4c6cc;
+            border-radius: 2px;
+            align-items: center;
+            justify-content: center;
+
+            i {
+                margin-right: 7px;
+                font-size: 14px;
+                color: #c4c6cc;
+            }
+
+            &:hover {
+                color: #3a84ff;
+                border-color: #3a84ff;
+
+                i {
+                    color: #3a84ff;
+                }
+            }
+        }
     }
 </style>
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
@@ -109,7 +109,8 @@
                 v-if="isEditOfPlan"
                 :is-show.sync="isShowBatchEditOfPlan"
                 :title="$t('template.编辑全局变量')"
-                :width="960">
+                :width="960"
+                footer-offset-target="variable-value">
                 <batch-edit-of-plan
                     v-if="isShowBatchEditOfPlan"
                     ref="planGlobalVar"