| | |
| | | <template #default="{ node }"> |
| | | <div class="tree-node"> |
| | | <!-- 节点名称 --> |
| | | <span>{{ node.label }}</span> |
| | | <span class="nodeName">{{ node.label }}</span> |
| | | <!-- 操作按钮组 --> |
| | | <div class="tree-node-actions"> |
| | | <el-button |
| | | link |
| | | |
| | | icon="el-icon-location" |
| | | @click.stop="handleLocation(node)" |
| | | >定位</el-button> |
| | | <el-button link @click.stop="handleEdit(node)">编辑</el-button> |
| | | <el-button link @click.stop="handleDelete(node)">删除</el-button> |
| | | :disabled="node.data.level === 2 && (!node.data.children || node.data.children.length === 0)" |
| | | class="location-btn" |
| | | ></el-button> |
| | | <el-button icon="el-icon-edit" link @click.stop="handleEdit(node)"></el-button> |
| | | <el-button icon="el-icon-delete" link @click.stop="handleDelete(node)"></el-button> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | const checkedKeys = ref([]); // 存储勾选的节点key |
| | | const treeRef = ref(null); // 获取tree实例 |
| | | const checkedNodes = ref([]); // 存储勾选的节点数据 |
| | | const props = defineProps(['activeName']); |
| | | const props = defineProps(['activeName','resetCheck']); |
| | | const formData = ref({ |
| | | isPush: undefined, |
| | | page: 1, |
| | |
| | | }; |
| | | // 定位按钮事件 |
| | | const handleLocation = node => { |
| | | if (node.data.level === 2) { |
| | | layerParams.value.isSingleLocating = false; |
| | | if (node.data.level === 2) { |
| | | layerParams.value.isSingleLocating = false; |
| | | // 新增:标记当前定位的文件夹ID |
| | | layerParams.value.currentLocationFolderId = node.data.id; |
| | | } else if (node.data.level === 3) { |
| | | layerParams.value.isSingleLocating = true; |
| | | layerParams.value.isSingleLocating = true; |
| | | // 清空文件夹定位标识 |
| | | layerParams.value.currentLocationFolderId = null; |
| | | } |
| | | |
| | | const currentCheckedKeys = [...checkedKeys.value]; |
| | | const currentCheckedNodes = [...checkedNodes.value]; |
| | | EventBus.emit('focusOnNode', node.data); |
| | | |
| | | if (node.data.level === 2) { |
| | | const folderChildren = node.data.children || []; |
| | | const childrenIds = folderChildren.map(child => child.id); |
| | | // 合并已选中的节点和当前文件夹的子节点 |
| | | const newCheckedKeys = [...new Set([...currentCheckedKeys, ...childrenIds])]; |
| | | const newCheckedNodes = [...currentCheckedNodes, ...folderChildren]; |
| | | const newChildrenIds = childrenIds.filter(id => !currentCheckedKeys.includes(id)); |
| | | const newChildrenNodes = folderChildren.filter(child => newChildrenIds.includes(child.id)); |
| | | |
| | | const newCheckedKeys = [...new Set([...currentCheckedKeys, ...newChildrenIds])]; |
| | | const newCheckedNodes = [...currentCheckedNodes, ...newChildrenNodes]; |
| | | |
| | | treeRef.value.setCheckedKeys(newCheckedKeys); |
| | | checkedKeys.value = newCheckedKeys; |
| | | checkedNodes.value = newCheckedNodes; |
| | | coverData.value = newCheckedNodes; |
| | | } |
| | | // 如果是单个节点(level 3),仅添加到选中列表(如果未选中) |
| | | else if (!currentCheckedKeys.includes(node.data.id)) { |
| | | layerParams.value.isSingleLocating = true |
| | | emit('update:coverData', coverData.value); |
| | | } else if (!currentCheckedKeys.includes(node.data.id)) { |
| | | layerParams.value.isSingleLocating = true; |
| | | currentCheckedKeys.push(node.data.id); |
| | | currentCheckedNodes.push(node.data); |
| | | treeRef.value.setCheckedKeys(currentCheckedKeys); |
| | | checkedKeys.value = currentCheckedKeys; |
| | | checkedNodes.value = currentCheckedNodes; |
| | | coverData.value = currentCheckedNodes; |
| | | emit('update:coverData', coverData.value); |
| | | } |
| | | emit('update:coverData', coverData.value); |
| | | }; |
| | | // 编辑按钮事件 |
| | | const handleEdit = node => { |
| | |
| | | ElMessage.success('取消同步成功'); |
| | | }); |
| | | } |
| | | |
| | | // 切换tab清空复选框的数据 |
| | | watch( |
| | | () => props.resetCheck, |
| | | (newVal) => { |
| | | if (newVal !== undefined) { |
| | | checkedKeys.value = []; |
| | | checkedNodes.value = []; |
| | | coverData.value = []; |
| | | treeRef.value?.setCheckedKeys([]); |
| | | } |
| | | }, |
| | | { immediate: true } |
| | | ); |
| | | onMounted(() => { |
| | | failuresList(); |
| | | gettreeDataApi(); |
| | |
| | | flex-grow: 1; |
| | | padding-right: 12px; |
| | | :deep(.el-tree-node__content) { |
| | | height: 38px !important; |
| | | line-height: 38px !important; |
| | | height: 35px !important; |
| | | line-height: 35px !important; |
| | | } |
| | | |
| | | .isTheTerritory { |
| | |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | width: 100%; |
| | | .nodeName { |
| | | font-size: 12px !important; |
| | | } |
| | | } |
| | | |
| | | .tree-node-actions { |
| | | display: flex; |
| | | // gap: 8px; // 按钮之间的间距 |
| | | // gap: 8px; |
| | | |
| | | button { |
| | | padding: 0; // 清除默认内边距 |
| | | // color: #fff; // 按钮图标颜色 |
| | | color: #409eff; |
| | | &:hover { |
| | | color: #409eff; // hover 时的颜色 |
| | | } |
| | | padding: 0; |
| | | color: #fff; |
| | | width: 17px; |
| | | height: 17px; |
| | | // color: #409eff; |
| | | // &:hover { |
| | | // color: #409eff; |
| | | // } |
| | | } |
| | | } |
| | | ::v-deep(.location-btn.el-button.is-link.is-disabled) { |
| | | color: #999 !important; |
| | | } |
| | | } |
| | | </style> |