Skip to content

Commit

Permalink
divInput输入逻辑优化&&全局变量配置未更新问题修复 (#7171)
Browse files Browse the repository at this point in the history 
* optimization: 节点树空分支样式调整

* optimization: divInput输入逻辑优化

* bugfix: 批量更新子流程未更新被勾选到全局变量的表单配置问题修复
  • Loading branch information
@ywywZhou
ywywZhou committed Nov 16, 2023
1 parent ab867d3 commit 35726c0
Show file tree
Hide file tree
Showing 6 changed files with 79 additions and 14 deletions.
24 changes: 21 additions & 3 deletions frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue
View file
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
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
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
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
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
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

0 comments on commit 35726c0

Please sign in to comment.