feat:[模板管理][checkbox-tree]

src/components/Template/HandleFormItem.vue

@@ -54,20 +54,20 @@
                 <div v-for="group in item.options" :key="group.value" class="checkbox-tree-group">
                     <el-checkbox :label="group.value" :disabled="getDisabled()"
                         :value="getCheckboxTreeChecked(group.value)"
-                        @change="onCheckboxTreeChange(group.value, $event)">
+                        :indeterminate="getCheckboxTreeIndeterminate(group.value)"
+                        @change="onCheckboxTreeParentChange(group, $event)">
                         {{ group.label }}
                     </el-checkbox>
                     <div v-if="group.children && group.children.length > 0" class="checkbox-tree-children">
                         <div v-for="child in group.children" :key="child.value" class="checkbox-tree-item">
                             <el-checkbox :label="child.value" :disabled="getDisabled()"
                                 :value="getCheckboxTreeChecked(child.value)"
-                                @change="onCheckboxTreeChange(child.value, $event)">
+                                @change="onCheckboxTreeChildChange(group, child.value, $event)">
                                 {{ child.label }}
                             </el-checkbox>
                             <div v-if="(child.value === '样品信息' || child.value === '其他') && isCheckboxTreeChecked(child.value)"
                                 class="checkbox-tree-input-container">
                                 <el-input v-model="inputValue.otherValues[child.value]"
-                                    :class="{ 'error-border': isCheckboxTreeOtherInputError(child.value) }"
                                     placeholder="请输入" @blur="onCheckboxTreeOtherBlur(child.value, $event)" />
                             </div>
                         </div>
@@ -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;
                 }
             }