From c5b54a8ce0de4ae8bb360b2b9bc227e328b5b2c0 Mon Sep 17 00:00:00 2001
From: yiwenZhou <67539158+ywywZhou@users.noreply.github.com>
Date: Mon, 18 Sep 2023 11:25:05 +0800
Subject: [PATCH] =?UTF-8?q?Horse=E7=89=88=E6=9C=AC=E6=8F=90=E6=B5=8B?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D=20(#7082)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/desktop/package.json                 |   2 +-
 .../common/RenderForm/IpSelector/StaticIp.vue |  18 ++--
 .../common/RenderForm/tags/TagDatatable.vue   |   3 +
 .../common/RenderForm/tags/TagInput.vue       |  11 ++
 .../common/RenderForm/tags/TagSelect.vue      |   5 +-
 .../common/RenderForm/tags/TagTextarea.vue    |   1 -
 frontend/desktop/src/config/i18n/cn.js        |   6 +-
 frontend/desktop/src/config/i18n/en.js        |   6 +-
 .../pages/task/TaskExecute/ExecuteInfo.vue    |  10 +-
 .../pages/task/TaskExecute/TaskOperation.vue  |  20 ++--
 .../TemplateEdit/NodeConfig/NodeConfig.vue    |  11 +-
 .../TabGlobalVariables/index.vue              | 100 +++++++++++++++++-
 .../desktop/src/store/modules/taskList.js     |   2 +-
 13 files changed, 162 insertions(+), 33 deletions(-)

diff --git a/frontend/desktop/package.json b/frontend/desktop/package.json
index 7059bbabf8..b9cfec0a97 100644
--- a/frontend/desktop/package.json
+++ b/frontend/desktop/package.json
@@ -19,7 +19,7 @@
     "ajv": "^6.10.2",
     "art-template": "^4.13.0",
     "axios": "^0.18.0",
-    "bk-magic-vue": "2.5.7",
+    "bk-magic-vue": "2.5.8-beta.10",
     "cron-parser-custom": "^2.13.0",
     "dom-to-image": "^2.6.0",
     "element-ui": "^2.4.1",
diff --git a/frontend/desktop/src/components/common/RenderForm/IpSelector/StaticIp.vue b/frontend/desktop/src/components/common/RenderForm/IpSelector/StaticIp.vue
index b821b6e476..4601d5ebf3 100644
--- a/frontend/desktop/src/components/common/RenderForm/IpSelector/StaticIp.vue
+++ b/frontend/desktop/src/components/common/RenderForm/IpSelector/StaticIp.vue
@@ -62,7 +62,7 @@
                         <span class="total-ip">{{staticIps.length}}</span>
                         {{$t('个静态IP，')}}
                         {{$t('其中')}}
-                        <span class="total-not-installed">{{failedAgentLength}}</span>
+                        <span class="total-not-installed">{{abnormalLength}}</span>
                         {{$t('个')}}{{$t('异常')}}
                     </div>
                     <div class="table-pagination" v-if="isPaginationShow">
@@ -138,27 +138,27 @@
                 operations: [
                     {
                         type: 'copyIp',
-                        name: this.$t('复制IP')
+                        name: this.$t('复制所有IP')
                     },
                     {
                         type: 'copyAgentIp',
-                        name: this.$t('复制Agent异常IP')
+                        name: this.$t('复制异常IP')
                     },
                     {
                         type: 'clearIp',
-                        name: this.$t('清空IP')
+                        name: this.$t('清除所有IP')
                     },
                     {
                         type: 'clearFailedAgentIp',
-                        name: this.$t('清空Agent异常IP')
+                        name: this.$t('清除异常IP')
                     }
                 ],
                 isUnfold: false
             }
         },
         computed: {
-            failedAgentLength () {
-                return this.staticIps.filter(item => item.agent !== 1).length
+            abnormalLength () {
+                return this.staticIps.filter(item => item.agent !== 1 || item.diff).length
             },
             isShowQuantity () {
                 return this.staticIps.length
@@ -224,14 +224,14 @@
                 this.handleIpCopy(ipStr)
             },
             copyAgentIp () {
-                const ipStr = this.staticIps.filter(item => item.agent !== 1).map(d => d.bk_host_innerip).join(',')
+                const ipStr = this.staticIps.filter(item => item.agent !== 1 || item.diff).map(d => d.bk_host_innerip).join(',')
                 this.handleIpCopy(ipStr)
             },
             clearIp () {
                 this.$emit('change', [])
             },
             clearFailedAgentIp () {
-                const staticIps = this.staticIps.filter(item => item.agent === 1)
+                const staticIps = this.staticIps.filter(item => item.agent === 1 && !item.diff)
                 this.$emit('change', staticIps)
             },
             onDropdownShow () {
diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagDatatable.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagDatatable.vue
index 0ea003e782..1696ec01fb 100644
--- a/frontend/desktop/src/components/common/RenderForm/tags/TagDatatable.vue
+++ b/frontend/desktop/src/components/common/RenderForm/tags/TagDatatable.vue
@@ -693,4 +693,7 @@
         white-space: nowrap;
         cursor: pointer;
     }
+    /deep/.rf-tag-form {
+        margin-left: 0 !important;
+    }
 </style>
diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue
index c11fb6e7cd..b70ea3411e 100644
--- a/frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue
+++ b/frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue
@@ -183,6 +183,17 @@
                 } else {
                     this.handleInputBlur()
                 }
+            },
+            formMode (val) {
+                if (val) {
+                    this.$nextTick(() => {
+                        const divInputDom = this.$el.querySelector('.div-input')
+                        divInputDom.innerHTML = this.value
+                        this.handleInputBlur()
+                    })
+                } else {
+                    this.validate()
+                }
             }
         },
         created () {
diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagSelect.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagSelect.vue
index ce743986c0..0728550f46 100644
--- a/frontend/desktop/src/components/common/RenderForm/tags/TagSelect.vue
+++ b/frontend/desktop/src/components/common/RenderForm/tags/TagSelect.vue
@@ -72,7 +72,7 @@
             </p>
             <span v-show="!validateInfo.valid" class="common-error-tip error-info">{{validateInfo.message}}</span>
         </div>
-        <span v-else class="rf-view-value">{{ value || '--' }}</span>
+        <span v-else class="rf-view-value">{{ viewValue || '--' }}</span>
     </div>
 </template>
 <script>
@@ -252,6 +252,9 @@
                 }
             },
             viewValue () {
+                if (Object.prototype.toString.call(this.value) === '[object object]') {
+                    return this.value
+                }
                 if (Array.isArray(this.seletedValue)) { // 多选
                     if (!this.seletedValue.length) {
                         return '--'
diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue
index 34164ec78f..9688e43751 100644
--- a/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue
+++ b/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue
@@ -534,7 +534,6 @@
     }
     /deep/.div-input {
         >div {
-            height: 18px;
             width: 100%;
         }
     }
diff --git a/frontend/desktop/src/config/i18n/cn.js b/frontend/desktop/src/config/i18n/cn.js
index e2b63f0f06..dbe62c51bd 100644
--- a/frontend/desktop/src/config/i18n/cn.js
+++ b/frontend/desktop/src/config/i18n/cn.js
@@ -1768,7 +1768,11 @@ const cn = {
     '确定重试节点【n】 ？': '确定重试节点【{n}】 ？',
     '非根节点仅支持以原参数进行重试': '非根节点仅支持以原参数进行重试',
     'password_手动输入': '手动输入',
-    'password_使用密码变量': '使用密码变量'
+    'password_使用密码变量': '使用密码变量',
+    '复制所有IP': '复制所有IP',
+    '复制异常IP': '复制异常IP',
+    '清除所有IP': '清除所有IP',
+    '清除异常IP': '清除异常IP'
 }
 
 export default cn
diff --git a/frontend/desktop/src/config/i18n/en.js b/frontend/desktop/src/config/i18n/en.js
index 71bc404eec..6540a6673f 100644
--- a/frontend/desktop/src/config/i18n/en.js
+++ b/frontend/desktop/src/config/i18n/en.js
@@ -1802,7 +1802,11 @@ const en = {
     '确定重试节点【n】 ？': 'Retry this node [ {n} ] ？',
     '非根节点仅支持以原参数进行重试': 'Non-root nodes only support retrying with the original parameters.',
     'password_手动输入': 'custom input',
-    'password_使用密码变量': 'use password var.'
+    'password_使用密码变量': 'use password var.',
+    '复制所有IP': 'Copy all IPs',
+    '复制异常IP': 'Copy abnormal IP',
+    '清除所有IP': 'Clear all IPs',
+    '清除异常IP': 'Clear abnormal IP'
 }
 
 export default en
diff --git a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo.vue b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo.vue
index 2d454057ae..d654c1de1a 100644
--- a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo.vue
+++ b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo.vue
@@ -177,7 +177,7 @@
                             v-else-if="nodeDetailConfig.component_code === 'bk_approve'"
                             theme="primary"
                             data-test-id="taskExecute_form_approvalBtn"
-                            @click="$emit('onApprovalClick', nodeDetailConfig.node_id)">
+                            @click="onApprovalClick">
                             {{ $t('审批') }}
                         </bk-button>
                         <bk-button
@@ -428,9 +428,6 @@
             nodeActivity () {
                 return this.pipelineData.activities[this.nodeDetailConfig.node_id]
             },
-            componentValue () {
-                return this.isSubProcessNode ? this.nodeActivity.component.data.subprocess.value : {}
-            },
             isExecuteTimeShow () {
                 return ['record', 'log'].includes(this.curActiveTab) && (this.loop > 1 || this.historyInfo.length > 1)
             },
@@ -677,7 +674,7 @@
                 $.context.output_form.state = state
                 // 获取子流程配置详情
                 if (componentCode === 'subprocess_plugin' || this.isLegacySubProcess) {
-                    const { constants } = this.isLegacySubProcess ? this.pipelineData : this.componentValue.pipeline
+                    const { constants } = this.subProcessPipeline
                     const renderConfig = await this.getSubflowInputsConfig(constants)
                     const keys = Object.keys(inputs)
                     this.renderConfig = renderConfig.filter(item => keys.includes(item.tag_code))
@@ -1428,6 +1425,9 @@
             onResumeClick () {
                 this.$emit('onTaskNodeResumeClick', this.nodeDetailConfig.node_id, this.subProcessTaskId)
             },
+            onApprovalClick () {
+                this.$emit('onApprovalClick', this.nodeDetailConfig.node_id, this.subProcessTaskId)
+            },
             onModifyTimeClick () {
                 this.$emit('onModifyTimeClick', this.nodeDetailConfig.node_id, this.subProcessTaskId)
             },
diff --git a/frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue b/frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue
index ffeb8564ec..70c54091e3 100644
--- a/frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue
+++ b/frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue
@@ -1299,8 +1299,9 @@
                     }
                 })
             },
-            onApprovalClick (id) {
+            onApprovalClick (id, taskId) {
                 this.approval.id = id
+                this.subProcessTaskId = taskId
                 this.approval.dialogShow = true
             },
             onApprovalConfirm () {
@@ -1316,17 +1317,16 @@
                             is_passed,
                             message,
                             project_id: this.project_id,
-                            task_id: this.instance_id,
+                            task_id: this.subProcessTaskId || this.instance_id,
                             node_id: id
                         }
-                        if (!this.isTopTask) {
-                            const selectedFlowIds = this.selectedFlowPath.reduce((acc, cur) => {
-                                if (cur.type !== 'root') {
-                                    acc = acc ? acc + ',' + cur.id : cur.id
-                                }
-                                return acc
-                            }, '')
-                            params.subprocess_id = selectedFlowIds
+                        // 如果存在子流程任务节点时则不需要传subprocess_id
+                        if (!this.subProcessTaskId) {
+                            let { subprocess_stack: stack } = this.nodeDetailConfig
+                            if (stack) {
+                                stack = JSON.parse(stack)
+                                params.subprocess_id = stack.join(',')
+                            }
                         }
                         await this.itsmTransition(params)
                         this.approval.id = ''
diff --git a/frontend/desktop/src/pages/template/TemplateEdit/NodeConfig/NodeConfig.vue b/frontend/desktop/src/pages/template/TemplateEdit/NodeConfig/NodeConfig.vue
index dffff209a9..d6ecfeb2d5 100644
--- a/frontend/desktop/src/pages/template/TemplateEdit/NodeConfig/NodeConfig.vue
+++ b/frontend/desktop/src/pages/template/TemplateEdit/NodeConfig/NodeConfig.vue
@@ -1281,11 +1281,18 @@
                     const { activities, conditions, constants } = this.variableCited[key]
                     const citedNum = activities.length + conditions.length + constants.length
                     if (citedNum <= 1) {
-                        // 直接删除引用量为1变量
-                        this.deleteUnhookingVar()
+                        // 切换插件/切换版本/更新子流程时直接删除引用量为1变量
+                        if (this.isUpdateConstants) {
+                            this.deleteUnhookingVar()
+                        } else {
+                            this.isCancelGloVarDialogShow = true
+                        }
                     } else {
+                        // 当变量来源为0时，自动删除变量
                         if (sourceInfo[id].length <= 1) {
                             this.$delete(sourceInfo, id)
+                            this.deleteUnhookingVar()
+                            return
                         } else {
                             let atomIndex
                             sourceInfo[id].some((item, index) => {
diff --git a/frontend/desktop/src/pages/template/TemplateEdit/TemplateSetting/TabGlobalVariables/index.vue b/frontend/desktop/src/pages/template/TemplateEdit/TemplateSetting/TabGlobalVariables/index.vue
index 0b2d8a277a..562791e853 100644
--- a/frontend/desktop/src/pages/template/TemplateEdit/TemplateSetting/TabGlobalVariables/index.vue
+++ b/frontend/desktop/src/pages/template/TemplateEdit/TemplateSetting/TabGlobalVariables/index.vue
@@ -12,7 +12,7 @@
 <template>
     <bk-sideslider
         :is-show="true"
-        :width="800"
+        :width="sideWidth"
         :quick-close="true"
         :before-close="closeTab">
         <div class="setting-header" slot="header">
@@ -71,6 +71,13 @@
             </div>
         </div>
         <div class="global-variable-panel" slot="content">
+            <!--可拖拽-->
+            <template v-if="variableData">
+                <div class="resize-trigger" @mousedown.left="handleMousedown($event)"></div>
+                <i :class="['resize-proxy', 'left']" ref="resizeProxy"></i>
+                <div class="resize-mask" ref="resizeMask"></div>
+            </template>
+
             <div v-show="!variableData" :class="{ 'is-hidden': variableData }">
                 <div class="add-variable">
                     <bk-button
@@ -280,6 +287,7 @@
                 }
             ]
             return {
+                sideWidth: 800, // 侧栏宽度
                 isHideSystemVar: false,
                 variableList: [], // 变量列表，包含系统内置变量和用户变量
                 cloneVariableList: [],
@@ -656,6 +664,7 @@
             // 关闭变量编辑面板
             closeEditingPanel () {
                 this.variableData = null
+                this.sideWidth = 800
             },
             // 关闭全局变量侧滑
             closeTab () {
@@ -687,6 +696,37 @@
             },
             setNewCloneKeys (key) {
                 this.newCloneKeys = [key]
+            },
+            handleMousedown (event) {
+                this.updateResizeMaskStyle()
+                this.updateResizeProxyStyle()
+                document.addEventListener('mousemove', this.handleMouseMove)
+                document.addEventListener('mouseup', this.handleMouseUp)
+            },
+            handleMouseMove (event) {
+                let width = window.innerWidth - event.clientX
+                width = width > 800 ? width : 800
+                const resizeProxy = this.$refs.resizeProxy
+                resizeProxy.style.right = `${width}px`
+            },
+            updateResizeMaskStyle () {
+                const resizeMask = this.$refs.resizeMask
+                resizeMask.style.display = 'block'
+                resizeMask.style.cursor = 'col-resize'
+            },
+            updateResizeProxyStyle () {
+                const resizeProxy = this.$refs.resizeProxy
+                resizeProxy.style.visibility = 'visible'
+                resizeProxy.style.right = `${this.sideWidth}px`
+            },
+            handleMouseUp () {
+                const resizeMask = this.$refs.resizeMask
+                const resizeProxy = this.$refs.resizeProxy
+                resizeProxy.style.visibility = 'hidden'
+                resizeMask.style.display = 'none'
+                this.sideWidth = resizeProxy.style.right
+                document.removeEventListener('mousemove', this.handleMouseMove)
+                document.removeEventListener('mouseup', this.handleMouseUp)
             }
         }
     }
@@ -742,8 +782,66 @@
 /deep/.bk-sideslider-content {
     height: calc(100% - 60px);
 }
+
+/deep/.bk-sideslider-wrapper {
+    overflow: initial;
+}
 .global-variable-panel {
     height: 100%;
+    
+    .resize-trigger {
+        width: 5px;
+        height: calc(100vh - 109px);
+        position: absolute;
+        left: 0;
+        top: 60px;
+        cursor: col-resize;
+        z-index: 3;
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            width: 1px;
+            background-color: #dcdee5;
+        }
+        &::after {
+            content: "";
+            position: absolute;
+            top: 50%;
+            right: -1px;
+            width: 2px;
+            height: 2px;
+            color: #979ba5;
+            transform: translate3d(0,-50%,0);
+            background: currentColor;
+            box-shadow: 0 4px 0 0 currentColor,0 8px 0 0 currentColor,0 -4px 0 0 currentColor,0 -8px 0 0 currentColor;
+        }
+        &:hover::before {
+            background-color: #3a84ff;
+        }
+    }
+    .resize-proxy {
+        visibility: hidden;
+        position: absolute;
+        pointer-events: none;
+        z-index: 9999;
+        &.left {
+            top: 0;
+            height: 100%;
+            border-left: 1px dashed #3a84ff;
+        }
+    }
+    .resize-mask {
+        display: none;
+        position: fixed;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 9999;
+    }
     .is-hidden {
         transform: scale(0)
     }
diff --git a/frontend/desktop/src/store/modules/taskList.js b/frontend/desktop/src/store/modules/taskList.js
index 7c476d7925..383492154f 100644
--- a/frontend/desktop/src/store/modules/taskList.js
+++ b/frontend/desktop/src/store/modules/taskList.js
@@ -28,7 +28,7 @@ const taskList = {
             return axios.get('api/v3/taskflow/', { params, ...config }).then(response => response.data.data)
         },
         deleteTask ({ commit }, task_id) {
-            return axios.delete(`api/v3/taskflow/${task_id}/`).then(response => response.data.objects)
+            return axios.delete(`api/v3/taskflow/${task_id}/`).then(response => response.data)
         },
         cloneTask ({ commit }, data) {
             const { task_id, name } = data