Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

divInput输入逻辑优化&&全局变量配置未更新问题修复 #7171

Merged
merged 3 commits into from
Nov 16, 2023
Merged

divInput输入逻辑优化&&全局变量配置未更新问题修复 #7171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c63057c
optimization: 节点树空分支样式调整
ywywZhou Nov 16, 2023
1e8f60a
optimization: divInput输入逻辑优化
ywywZhou Nov 16, 2023
e60a2c2
bugfix: 批量更新子流程未更新被勾选到全局变量的表单配置问题修复
ywywZhou Nov 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 21 additions & 3 deletions frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -315,6 +315,7 @@
// 文本框输入
handleInputChange (e, selection) {
if (!selection) {
// 实时更新
this.updateInputValue()
}
let matchResult = []
Expand All @@ -323,10 +324,22 @@
this.isListOpen = false
return
}
// 获取文本
this.lastEditRange = window.getSelection().getRangeAt(0)
const offsetText = focusNode.data.substring(0, anchorOffset)
let matchText = offsetText

// 如果不包含$则不进行后续计算
if (matchText.indexOf('$') === -1) {
this.isListOpen = false
return
}

// 过滤掉完整的变量格式文本
const varRegexp = /\s?\${[a-zA-Z_][\w|.]*}\s?/g
let matchText = offsetText.split(varRegexp).pop()
if (varRegexp.test(matchText)) {
matchText = offsetText.split(varRegexp).pop()
}
// 拿到字段最后以$开头的部分
matchText = matchText.replace(/(.*)(\$[^\}]*)/, ($0, $1, $2) => $2)
// 判断是否为变量格式
Expand Down Expand Up @@ -399,12 +412,18 @@
}
inputValue = inputValue.replace(/\u00A0/g, ' ')
this.input.value = inputValue
this.updateForm(inputValue)
},
// 文本框失焦
handleInputBlur (e) {
this.$emit('blur')
this.input.focus = false
// 更新文本框结构，生成tag标签
this.updateInputHtml()
// 向上更新表单
this.updateForm(this.input.value)
},
// 更新文本框结构，生成tag标签
updateInputHtml () {
// 如果表单项开启了变量免渲染，不以tag展示
if (!this.render) return
// 支持所有变量（系统变量，内置变量，自定义变量）
Expand Down Expand Up @@ -446,7 +465,6 @@
return match
})
divInputDom.innerHTML = innerHtml
this.updateInputValue()
},
// 文本框按键事件
handleInputKeyDown (e) {
Expand Down
16 changes: 11 additions & 5 deletions frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,6 +259,7 @@
// 文本框输入
handleInputChange (e, updateForm = true) {
if (updateForm) {
// 实时更新
this.updateInputValue()
}
const range = window.getSelection().getRangeAt(0)
Expand All @@ -274,12 +275,12 @@
const lastNode = textNode.childNodes[startOffset - 1]
previousText = lastNode.textContent
}
const matchText = previousText.replace(/(.*)(\$[^\}]*)/, ($0, $1, $2) => $2)
// 如果是完整全局变量则不进行后续操作
if (/^\$\{\w+\}$/.test(matchText)) {
// 如果不包含$则不进行后续计算、 如果是完整全局变量则不进行后续操作
if (previousText.indexOf('$') === -1 || /\${[a-zA-Z_][\w|.]*}/.test(previousText)) {
this.isListOpen = false
return
}
const matchText = previousText.replace(/(.*)(\$[^\}]*)/, ($0, $1, $2) => $2)
// 判断是否为变量格式
if (matchText === '$' || /^\${[a-zA-Z_]*[\w|.]*/.test(matchText)) {
this.varList = this.constantArr.filter(item => item.key.indexOf(matchText) > -1)
Expand Down Expand Up @@ -360,12 +361,18 @@
return domValue.replace(/\u00A0/g, ' ')
}).join('\n')
this.input.value = inputValue
this.updateForm(inputValue)
},
// 文本框失焦
handleInputBlur (e) {
this.$emit('blur')
this.input.focus = false
// 更新文本框结构，生成tag标签
this.updateInputHtml()
// 向上更新表单
this.updateForm(this.input.value)
},
// 更新文本框结构，生成tag标签
updateInputHtml () {
// 如果表单项开启了变量免渲染，不以tag展示
if (!this.render) return
// 支持所有变量（系统变量，内置变量，自定义变量）
Expand Down Expand Up @@ -440,7 +447,6 @@
divInputDom.replaceChild(newDom, dom)
}
})
this.updateInputValue()
},
// 文本框按键事件
handleInputKeyDown (e) {
Expand Down
3 changes: 2 additions & 1 deletion frontend/desktop/src/config/i18n/cn.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1792,7 +1792,8 @@ const cn = {
'刷新': '刷新',
'exFailedText': '节点执行失败，请前往{0}查看错误原因',
'exFailedText_调用日志': '调用日志',
'任务还未执行，暂无执行历史': '任务还未执行，暂无执行历史'
'任务还未执行，暂无执行历史': '任务还未执行，暂无执行历史',
'空分支': '空分支'
}

export default cn
3 changes: 2 additions & 1 deletion frontend/desktop/src/config/i18n/en.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1826,7 +1826,8 @@ const en = {
'刷新': 'Refresh',
'exFailedText': 'Node execution failed. Please go to the {0} to check the error reason.',
'exFailedText_调用日志': 'call log',
'任务还未执行，暂无执行历史': 'Task not executed, no history available.'
'任务还未执行，暂无执行历史': 'Task not executed, no history available.',
'空分支': 'Empty branch'
}

export default en
26 changes: 23 additions & 3 deletions frontend/desktop/src/pages/task/TaskExecute/NodeTreeItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,12 @@
<span
v-else-if="node.conditionType && (node.isCallback ? node.children.length : true)"
class="branch-condition-box"
:class="{ 'default-condition': node.conditionType === 'default' }"
:class="{
'default-condition': node.conditionType === 'default',
'empty-condition': !node.children || !node.children.length
}"
@click.stop="toggleExpanded(node)">
<i v-if="node.children && node.children.length" class="common-icon-next-triangle-shape"></i>
<i class="common-icon-next-triangle-shape"></i>
</span>
<!--空的占位符-->
<span v-else-if="node.isCallback || node.isLevelUp ? false : !node.parentId" class="empty-div"></span>
Expand All @@ -62,7 +65,12 @@
<span v-else-if="!node.conditionType" class="default-node" :class="nodeStateMap[node.state]"></span>
</div>
<!-- 节点名称 -->
<span v-bk-overflow-tips class="node-name">{{ node.title }}</span>
<span v-bk-overflow-tips class="node-name">
<span>{{ node.title }}</span>
<span v-if="node.conditionType && (!node.children || !node.children.length)" class="empty-branch">
{{ $t('（') + $t('空分支') + $t('）') }}
</span>
</span>
</div>
<div
v-if="node.expanded && node.dynamicLoad"
Expand Down Expand Up @@ -201,6 +209,11 @@
background: #f0f1f5;
border-color: #c4c6cc;
}
&.empty-condition {
color: #63656e;
background: #f5f7fa;
border-color: #dcdee5;
}

}
.common-icon-converge-node,
Expand Down Expand Up @@ -258,6 +271,7 @@
}
&.expanded {
.common-icon-next-triangle-shape {
top: -3px;
transform: rotate(90deg);
transition: transform .2s;
}
Expand All @@ -266,9 +280,15 @@

.node-name {
flex: 1;
display: flex;
align-items: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.empty-branch {
font-size: 12px;
color: #979ba5;
}
}
}
.node-active {
Expand Down
21 changes: 20 additions & 1 deletion frontend/desktop/src/pages/template/TemplateEdit/BatchUpdateDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,7 @@
import atomFilter from '@/utils/atomFilter.js'
import tools from '@/utils/tools.js'
import i18n from '@/config/i18n/index.js'
import formSchema from '@/utils/formSchema.js'
import InputParams from './NodeConfig/InputParams.vue'
import OutputParams from './NodeConfig/OutputParams.vue'
import NoData from '@/components/common/base/NoData.vue'
Expand Down Expand Up @@ -571,7 +572,7 @@
const curVar = this.$store.state.template.constants[key] // 当前版本key相同的变量
const { source_type, source_info } = varItem
if (['component_inputs', 'component_outputs'].includes(source_type)) {
this.subflowForms.forEach(subflow => {
this.subflowForms.forEach((subflow, index) => {
if (source_info[subflow.id]) { // 该节点最新版本输入输出参数有勾选
source_info[subflow.id].slice(0).forEach(nodeFormItem => {
// 注释 1.a 场景
Expand Down Expand Up @@ -623,6 +624,24 @@
})
}
}

const { form, inputsConfig } = subflow.latestForm
const formValue = form[key]
const inputRef = this.$refs.inputParams[index]
let hook = false
// 获取输入参数的勾选状态
if (inputRef && inputRef.hooked) {
hook = inputRef.hooked[key] || false
}
if (varItem.is_meta && formValue && hook) {
const schema = formSchema.getSchema(formValue.key, inputsConfig)
varItem['form_schema'] = schema
varItem.meta = formValue.meta
// 如果之前选中的下拉项被删除了，则删除对应的值
const curVal = varItem.value
const isMatch = curVal ? schema.attrs.items.find(item => item.value === curVal) : true
varItem.value = isMatch ? curVal : ''
}
})
if (Object.keys(source_info).length > 0) {
constants[key] = varItem
Expand Down
Loading