From bdd1ffa8c7dcc35d9227812cdf9126b7dbb8c42a Mon Sep 17 00:00:00 2001
From: hLinx <327159425@qq.com>
Date: Wed, 1 Feb 2023 15:46:33 +0800
Subject: [PATCH] =?UTF-8?q?bugfix:=20=E9=AB=98=E5=8D=B1=E8=AF=AD=E5=8F=A5?=
 =?UTF-8?q?=E8=A7=84=E5=88=99=E6=89=AB=E6=8F=8F=E7=B1=BB=E5=9E=8B=E9=AB=98?=
 =?UTF-8?q?=E5=8D=B1=E8=AF=AD=E5=8F=A5=E5=90=8C=E6=A0=B7=E4=BC=9A=E8=BF=9B?=
 =?UTF-8?q?=E8=A1=8C=E6=8B=A6=E6=88=AA=20#1704?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ace-editor/index.vue       | 15 +++++------
 src/frontend/src/components/jb-edit/input.vue | 20 ++++++++-------
 .../src/components/jb-edit/select.vue         | 19 +++++++-------
 src/frontend/src/components/jb-edit/tag.vue   | 25 +++++++++----------
 .../src/components/jb-edit/textarea.vue       | 21 ++++++++--------
 src/frontend/src/utils/assist/dom.js          | 13 +++++++++-
 .../script-manage/common/copy-create.vue      | 17 ++-----------
 .../src/views/script-manage/common/edit.vue   | 16 ++----------
 8 files changed, 66 insertions(+), 80 deletions(-)

diff --git a/src/frontend/src/components/ace-editor/index.vue b/src/frontend/src/components/ace-editor/index.vue
index a162280619..64f6ce3b51 100644
--- a/src/frontend/src/components/ace-editor/index.vue
+++ b/src/frontend/src/components/ace-editor/index.vue
@@ -158,7 +158,7 @@
         SQL: 'sql',
     };
     const LOCAL_STORAGE_KEY = 'ace_editor_history';
-    
+
     const escapeHTML = str => str.replace(/&/g, '&#38;').replace(/"/g, '&#34;')
         .replace(/'/g, '&#39;')
         .replace(/</g, '&#60;');
@@ -167,7 +167,7 @@
         temp.value = value;
         return temp.value;
     };
-    
+
     export default {
         name: 'AceEditor',
         components: {
@@ -382,6 +382,7 @@
         },
         beforeDestroy () {
             this.handleExitFullScreen();
+            this.$store.commit('setScriptCheckError', null);
         },
         mounted () {
             this.initEditor();
@@ -420,7 +421,7 @@
                         return result;
                     }, {});
                     this.defaultScriptMap = Object.assign({}, DefaultScript, customScriptMap);
-                        
+
                     // 只读或有传入值默认脚本使用prop.value
                     // 其它情况使用脚本编辑器提供的默认值
                     this.content = this.readonly || this.value
@@ -457,7 +458,7 @@
                 editor.setShowPrintMargin(false);
                 editor.$blockScrolling = Infinity;
                 editor.setReadOnly(this.readonly);
-                
+
                 editor.on('change', () => {
                     this.content = editor.getValue();
                     const content = Base64.encode(this.content);
@@ -479,12 +480,12 @@
                 });
                 // 先保存 editor 在设置 value
                 this.editor = editor;
-                
+
                 this.$once('hook:beforeDestroy', () => {
                     editor.destroy();
                     editor.container.remove();
                 });
-                
+
                 this.watchEditAction();
 
                 const $handler = document.querySelector(`#${this.selfId}`);
@@ -576,7 +577,7 @@
                 if (target.type !== 'textarea') {
                     return;
                 }
-                
+
                 if ([
                     'Escape',
                     'Meta',
diff --git a/src/frontend/src/components/jb-edit/input.vue b/src/frontend/src/components/jb-edit/input.vue
index 327c8e0760..88f0d986e0 100644
--- a/src/frontend/src/components/jb-edit/input.vue
+++ b/src/frontend/src/components/jb-edit/input.vue
@@ -53,7 +53,10 @@
             </div>
         </template>
         <template v-else>
-            <div class="edit-value-box" :class="{ 'edit-error': !!error }" @click.stop="">
+            <div
+                class="edit-value-box"
+                :class="{ 'edit-error': !!error }"
+                @click.stop="">
                 <bk-input
                     ref="input"
                     :value="newVal"
@@ -174,7 +177,7 @@
                         resolve();
                     }
                 });
-                
+
                 const allPromise = this.rules.map(rule => checkValidator(rule, this.newVal));
                 this.isValidatoring = true;
                 return Promise.all(allPromise).finally(() => {
@@ -256,16 +259,15 @@
              * @param {Object} event dom 事件
              */
             handleHideEdit (event) {
+                const eventPath = event.composedPath();
                 if (this.isValidatoring || this.error) {
                     return;
                 }
-                if (event.path && event.path.length > 0) {
-                    // eslint-disable-next-line no-plusplus
-                    for (let i = 0; i < event.path.length; i++) {
-                        const target = event.path[i];
-                        if (target.className === 'jb-edit-input') {
-                            return;
-                        }
+                // eslint-disable-next-line no-plusplus
+                for (let i = 0; i < eventPath.length; i++) {
+                    const target = eventPath[i];
+                    if (target.className === 'jb-edit-input') {
+                        return;
                     }
                 }
                 this.isEditing = false;
diff --git a/src/frontend/src/components/jb-edit/select.vue b/src/frontend/src/components/jb-edit/select.vue
index d2ecf461e1..0a321c6b5a 100644
--- a/src/frontend/src/components/jb-edit/select.vue
+++ b/src/frontend/src/components/jb-edit/select.vue
@@ -242,7 +242,7 @@
                         resolve();
                     }
                 });
-                
+
                 const allPromise = this.rules.map(rule => checkValidator(rule, this.localValue));
                 this.isValidatoring = true;
                 return Promise.all(allPromise).finally(() => {
@@ -300,17 +300,16 @@
              * @param {Object} event dom 事件
              */
             handleHideEdit (event) {
+                const eventPath = event.composedPath();
                 if (this.isValidatoring || this.error) {
                     return;
                 }
-                if (event.path && event.path.length > 0) {
-                    // eslint-disable-next-line no-plusplus
-                    for (let i = 0; i < event.path.length; i++) {
-                        const target = event.path[i];
-                        if (target.className === 'jb-edit-select'
-                            || target.className === 'tippy-content') {
-                            return;
-                        }
+                // eslint-disable-next-line no-plusplus
+                for (let i = 0; i < eventPath.length; i++) {
+                    const target = eventPath[i];
+                    if (target.className === 'jb-edit-select'
+                        || target.className === 'tippy-content') {
+                        return;
                     }
                 }
                 this.isEditing = false;
@@ -331,7 +330,7 @@
                     this.triggerChange();
                 }
             },
-            
+
         },
     };
 </script>
diff --git a/src/frontend/src/components/jb-edit/tag.vue b/src/frontend/src/components/jb-edit/tag.vue
index b5e8052296..3c247bff49 100644
--- a/src/frontend/src/components/jb-edit/tag.vue
+++ b/src/frontend/src/components/jb-edit/tag.vue
@@ -155,20 +155,20 @@
                 document.body.removeEventListener('click', this.hideEdit);
             });
         },
-        
+
         methods: {
             /**
              * @desc 触发标签修改操作
              */
             triggerRemote () {
                 this.isEditing = false;
-                
+
                 if (isEqual(this.memoValue, this.localValue)) {
                     return;
                 }
-                
+
                 this.isLoading = true;
-                
+
                 this.remoteHander({
                     [this.field]: this.localValue.map(({ id }) => ({ id })),
                 }).then(() => {
@@ -187,17 +187,16 @@
              */
             hideEdit (event) {
                 if (!this.isEditing) return;
-                if (event.path && event.path.length > 0) {
-                    // eslint-disable-next-line no-plusplus
-                    for (let i = 0; i < event.path.length; i++) {
-                        const target = event.path[i];
-                        if (/tippy-popper/.test(target.className)
-                            || /job-tag-create-dialog/.test(target.className)) {
-                            return;
-                        }
+                const eventPath = event.composedPath();
+                // eslint-disable-next-line no-plusplus
+                for (let i = 0; i < eventPath.length; i++) {
+                    const target = eventPath[i];
+                    if (/tippy-popper/.test(target.className)
+                        || /job-tag-create-dialog/.test(target.className)) {
+                        return;
                     }
                 }
-                
+
                 this.triggerRemote();
             },
             /**
diff --git a/src/frontend/src/components/jb-edit/textarea.vue b/src/frontend/src/components/jb-edit/textarea.vue
index a28e75e8a5..1cf76d955f 100644
--- a/src/frontend/src/components/jb-edit/textarea.vue
+++ b/src/frontend/src/components/jb-edit/textarea.vue
@@ -206,7 +206,7 @@
                         $el.style.wordBreak = 'keep-all';
                         $el.style.whiteSpace = 'pre';
                     }
-                    
+
                     this.$refs.valueTextBox.appendChild($el);
 
                     const lineHeight = 24;
@@ -214,7 +214,7 @@
                     const maxHeight = lineHeight * maxLine;
                     let realHeight = 0;
                     let realLength = 1;
-                
+
                     const calcLength = () => {
                         const text = this.newVal.slice(0, realLength);
                         $el.innerText = `${text} 展开展开`;
@@ -287,13 +287,12 @@
              * @desc 退出编辑状态
              */
             handleHideInput (event) {
-                if (event.path && event.path.length > 0) {
-                    // eslint-disable-next-line no-plusplus
-                    for (let i = 0; i < event.path.length; i++) {
-                        const target = event.path[i];
-                        if (target.className === 'jb-edit-textarea') {
-                            return;
-                        }
+                const eventPath = event.composedPath();
+                // eslint-disable-next-line no-plusplus
+                for (let i = 0; i < eventPath.length; i++) {
+                    const target = eventPath[i];
+                    if (target.className === 'jb-edit-textarea') {
+                        return;
                     }
                 }
                 this.isEditing = false;
@@ -366,7 +365,7 @@
 
             &:hover {
                 .edit-action {
-                    opacity: 1;
+                    opacity: 100%;
                     transform: scale(1);
                 }
             }
@@ -398,7 +397,7 @@
                 padding: 4px 15px 4px 2px;
                 color: #979ba5;
                 cursor: pointer;
-                opacity: 0;
+                opacity: 0%;
                 transform: scale(0);
                 transition: 0.15s;
                 transform-origin: left center;
diff --git a/src/frontend/src/utils/assist/dom.js b/src/frontend/src/utils/assist/dom.js
index 67850bbd31..e923bac8c2 100644
--- a/src/frontend/src/utils/assist/dom.js
+++ b/src/frontend/src/utils/assist/dom.js
@@ -56,7 +56,7 @@ export const getScrollParent = (node) => {
     if (node === null) {
         return null;
     }
-   
+
     if (node.scrollHeight > node.clientHeight) {
         return node;
     }
@@ -87,3 +87,14 @@ export const scrollTopSmooth = function (target, destScrollTop) {
     };
     step();
 };
+
+export const getParentByClass = (node, className) => {
+    let parentNode = node;
+    while (parentNode) {
+        if (parentNode.classList && parentNode.classList.contains(className)) {
+            return parentNode;
+        }
+        ({ parentNode } = parentNode);
+    }
+    return parentNode;
+};
diff --git a/src/frontend/src/views/script-manage/common/copy-create.vue b/src/frontend/src/views/script-manage/common/copy-create.vue
index 382ab320a1..7352699c80 100644
--- a/src/frontend/src/views/script-manage/common/copy-create.vue
+++ b/src/frontend/src/views/script-manage/common/copy-create.vue
@@ -295,21 +295,8 @@
                     return;
                 }
                 this.isSubmiting = true;
-                Promise.all([
-                    // 验证表单
-                    this.$refs.form.validate(),
-                    // 脚本高危语句检测
-                    ScriptManageService.getScriptValidation({
-                        content: this.formData.content,
-                        scriptType: this.formData.type,
-                    }).then((data) => {
-                        // 高危语句报错状态需要全局保存
-                        const dangerousContent = _.find(data, _ => _.isDangerous);
-                        this.$store.commit('setScriptCheckError', dangerousContent);
-                        return true;
-                    }),
-                ])
-                    .then(scriptErrorConfirm)
+                this.$refs.form.validate()
+                    .then(() => scriptErrorConfirm())
                     .then(() => {
                         this.scriptManageServiceHandler.scriptUpdate({
                             ...this.formData,
diff --git a/src/frontend/src/views/script-manage/common/edit.vue b/src/frontend/src/views/script-manage/common/edit.vue
index 3f5bf55f0e..f2fc908553 100644
--- a/src/frontend/src/views/script-manage/common/edit.vue
+++ b/src/frontend/src/views/script-manage/common/edit.vue
@@ -244,20 +244,8 @@
                     return;
                 }
                 this.isSubmiting = true;
-                Promise.all([
-                    // 验证表单
-                    this.$refs.form.validate(),
-                    // 脚本高危语句检测
-                    ScriptManageService.getScriptValidation({
-                        content: this.formData.content,
-                        scriptType: this.formData.type,
-                    }).then((data) => {
-                        // 高危语句报错状态需要全局保存
-                        const dangerousContent = _.find(data, _ => _.isDangerous);
-                        this.$store.commit('setScriptCheckError', dangerousContent);
-                        return true;
-                    }),
-                ]).then(scriptErrorConfirm)
+                this.$refs.form.validate()
+                    .then(() => scriptErrorConfirm())
                     .then(() => {
                         this.serviceHandler.scriptUpdate({
                             ...this.formData,