diff --git a/src/components/Template/HandleFormItem.vue b/src/components/Template/HandleFormItem.vue index ca72044..7106a92 100644 --- a/src/components/Template/HandleFormItem.vue +++ b/src/components/Template/HandleFormItem.vue @@ -54,20 +54,20 @@
+ :indeterminate="getCheckboxTreeIndeterminate(group.value)" + @change="onCheckboxTreeParentChange(group, $event)"> {{ group.label }}
+ @change="onCheckboxTreeChildChange(group, child.value, $event)"> {{ child.label }}
@@ -944,50 +944,113 @@ export default { return !!o.checked; }, - // checkboxTree的复选框变化处理 - onCheckboxTreeChange(value, checked) { - this.currentHandleType = 'checkboxTreeCheckbox'; - this.currentCheckboxTreeValue = value; - // 查找或创建对应的checkedValues项 + // 获取或创建checkedItem + getOrCreateCheckedItem(value) { let checkedItem = this.inputValue.checkedValues.find(item => item.label === value); + if (!checkedItem) { + checkedItem = { label: value, checked: false }; + this.inputValue.checkedValues.push(checkedItem); + } + return checkedItem; + }, - if (checked) { - checkedItem.checked = true; - // 如果勾选子级,默认勾选父级 - this.checkParentIfNeeded(value); - } else { - // 如果取消勾选,移除该项或设置为false - checkedItem.checked = false; - // 清除对应的otherValues - delete this.inputValue.otherValues[value]; + // 父级checkbox变化处理 + onCheckboxTreeParentChange(group, checked) { + this.currentHandleType = 'checkboxTreeCheckbox'; + this.currentCheckboxTreeValue = group.value; + + // 设置父级状态 + const parentItem = this.getOrCreateCheckedItem(group.value); + parentItem.checked = checked; + + // 同步所有子级状态 + if (group.children && group.children.length > 0) { + group.children.forEach(child => { + const childItem = this.getOrCreateCheckedItem(child.value); + childItem.checked = checked; + // 如果取消选中,清除otherValues + if (!checked) { + delete this.inputValue.otherValues[child.value]; + } + }); } + this.onCommonHandleSaveRecord(); }, - // 如果勾选子级,默认勾选父级 - checkParentIfNeeded(childValue) { - // 遍历所有选项组,找到子级对应的父级 - if (this.item && this.item.options) { - for (const group of this.item.options) { - if (group.children && group.children.length > 0) { - // 检查当前childValue是否在这个group的children中 - const childExists = group.children.some(child => child.value === childValue); - if (childExists) { - // 找到父级,确保父级被勾选 - let parentItem = this.inputValue.checkedValues.find(item => item.label === group.value); - if (!parentItem) { - // 父级不存在,添加父级 - parentItem = { label: group.value, checked: true }; - this.inputValue.checkedValues.push(parentItem); - } else if (!parentItem.checked) { - // 父级存在但未勾选,设置为勾选 - parentItem.checked = true; - } - break; - } - } + // 子级checkbox变化处理 + onCheckboxTreeChildChange(group, childValue, checked) { + this.currentHandleType = 'checkboxTreeCheckbox'; + this.currentCheckboxTreeValue = childValue; + + // 设置子级状态 + const childItem = this.getOrCreateCheckedItem(childValue); + childItem.checked = checked; + + // 如果取消选中,清除otherValues + if (!checked) { + delete this.inputValue.otherValues[childValue]; + } + + // 更新父级状态 + this.updateParentState(group); + + this.onCommonHandleSaveRecord(); + }, + + // 更新父级状态(根据子级状态) + updateParentState(group) { + if (!group.children || group.children.length === 0) return; + + const parentItem = this.getOrCreateCheckedItem(group.value); + const childValues = group.children.map(child => child.value); + + // 统计子级选中状态 + let checkedCount = 0; + let totalCount = childValues.length; + + childValues.forEach(childValue => { + const childItem = this.inputValue.checkedValues.find(item => item.label === childValue); + if (childItem && childItem.checked) { + checkedCount++; } + }); + + // 根据子级状态设置父级状态 + if (checkedCount === 0) { + // 全部未选中,父级取消选中 + parentItem.checked = false; + } else if (checkedCount === totalCount) { + // 全部选中,父级选中 + parentItem.checked = true; + } + // 部分选中时,父级保持当前状态(由indeterminate显示半选) + }, + + // 获取父级的半选状态 + getCheckboxTreeIndeterminate(groupValue) { + if (!this.inputValue || !this.inputValue.checkedValues) { + return false; + } + + // 找到对应的group + const group = this.item.options.find(opt => opt.value === groupValue); + if (!group || !group.children || group.children.length === 0) { + return false; } + + const childValues = group.children.map(child => child.value); + let checkedCount = 0; + + childValues.forEach(childValue => { + const childItem = this.inputValue.checkedValues.find(item => item.label === childValue); + if (childItem && childItem.checked) { + checkedCount++; + } + }); + + // 半选状态:有子级被选中但不是全部 + return checkedCount > 0 && checkedCount < childValues.length; }, // checkboxTree的其他输入框失去焦点处理 @@ -1053,7 +1116,7 @@ export default { const oldItem = oldCheckedValues.find(item => item.label === currentCheckboxTreeValue); const o = { "checkboxTreeCheckbox": { oldValue: oldItem, newValue: newItem, des: "" }, - "checkboxTreeOther": { oldValue: oldOtherValues[currentCheckboxTreeValue], newValue: otherValues[currentCheckboxTreeValue], des: "样品信息:" }, + "checkboxTreeOther": { oldValue: oldOtherValues[currentCheckboxTreeValue], newValue: otherValues[currentCheckboxTreeValue], des: `${currentCheckboxTreeValue}:` }, } return o[currentHandleType]; }, @@ -1121,7 +1184,7 @@ export default { } else if (this.type === "checkboxTree") { const current = this.getCheckboxTreeInfo(); const { oldValue, newValue } = current; - if (this.currentHandleType === "checkboxTreeCheckbox") { + if (currentHandleType === "checkboxTreeCheckbox") { isSame = this.isEqual(oldValue.checked, newValue.checked); isOldValueEmpty = isValueEmpty(oldValue.checked); } else { @@ -1214,8 +1277,8 @@ export default { recordValue = `${newValue.label || ''}:${newValue.checked ? '勾选' : '未勾选'}`; isModify = newValue.checked !== undefined; } else { - recordOldVlaue = current.oldValue; - recordValue = current.newValue; + recordOldVlaue = `${current.des + current.oldValue}`; + recordValue = `${current.des + current.newValue}`; isModify = !!current.oldValue; } }