| | |
| | | :expand-on-click-node="false" |
| | | :check-on-click-node="false" |
| | | :filter-node-method="filterNode" |
| | | highlight-current |
| | | @check="handleCheck" |
| | | :props="{ |
| | | label: 'name', |
| | |
| | | loading.value = true; |
| | | const res = await treeDataApi(); |
| | | treeAllData.value = res.data.data; |
| | | |
| | | if(coverData.value.length===0){ |
| | | checkedKeys.value = []; |
| | | checkedNodes.value = []; |
| | | coverData.value = []; |
| | | nextTick(() => { |
| | | if (treeRef.value) { |
| | | treeRef.value.setCheckedKeys([]); |
| | | } |
| | | }); |
| | | } |
| | | |
| | | setupWatch(); |
| | | } catch (error) { |
| | | console.error('获取数据失败:', error); |
| | |
| | | ); |
| | | }; |
| | | const selectAll = () => { |
| | | layerParams.value.currentLocationFolderId = null; |
| | | layerParams.value.isSingleLocating = false |
| | | if (treeRef.value) { |
| | | const allFenceKeys = getAllFenceKeys(); |
| | | const allFenceNodes = treeData.value.flatMap(folder => folder.children); |
| | | |
| | | if (checkedKeys.value.length === allFenceKeys.length) { |
| | | // 取消全选 |
| | | treeRef.value.setCheckedKeys([]); |
| | | checkedKeys.value = []; |
| | | checkedNodes.value = []; |
| | | coverData.value = []; |
| | | emit('update:coverData', coverData.value); |
| | | } else { |
| | | // 全选 |
| | | treeRef.value.setCheckedKeys(allFenceKeys); |
| | | checkedKeys.value = allFenceKeys; |
| | | checkedNodes.value = allFenceNodes; |
| | | coverData.value = allFenceNodes; |
| | | emit('update:coverData', coverData.value); |
| | | |
| | | } |
| | | emit('update:coverData', coverData.value); |
| | | |
| | | } |
| | | }; |
| | | // 定位按钮事件 |
| | | const handleLocation = node => { |
| | | const currentKey = treeRef.value.getCurrentKey(); |
| | | if (currentKey === node.data.id) { |
| | | treeRef.value.setCurrentKey(null); // 取消高亮 |
| | | } else { |
| | | treeRef.value.setCurrentKey(node.data.id); // 高亮当前节点 |
| | | } |
| | | if (node.data.level === 2) { |
| | | layerParams.value.isSingleLocating = false; |
| | | // 新增:标记当前定位的文件夹ID |
| | |
| | | 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 handleDelete = node => { |
| | | |
| | | let id = node.data.id; |
| | | ElMessageBox.confirm('确定要删除该内容吗?', '提示', { |
| | | confirmButtonText: '确定', |
| | |
| | | left: 0; |
| | | height: calc(100% - 32px); |
| | | z-index: 99; |
| | | width: 382px; |
| | | width: 332px; |
| | | overflow: hidden; |
| | | background: rgba(0,0,0,0.51); |
| | | backdrop-filter: blur(4px); |
| | |
| | | margin-top: 10px; |
| | | padding-right: 12px; |
| | | .inputName { |
| | | width: 184px; |
| | | width: 140px; |
| | | height: 32px; |
| | | } |
| | | .searchAndReset { |
| | |
| | | justify-content: right; |
| | | align-items: center; |
| | | margin-right: 10px; |
| | | .reset, |
| | | .search { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | width: 46px; |
| | | height: 32px; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .reset { |
| | | margin-left: 12px; |
| | | background: #0d2b38; |
| | | border-radius: 4px 4px 4px 4px; |
| | | border: 1px solid #84cbd3; |
| | | font-weight: 400; |
| | | font-size: 14px; |
| | | color: #ffffff; |
| | | } |
| | | |
| | | .search { |
| | | background: #1e2d51; |
| | | border-radius: 4px 4px 4px 4px; |
| | | border: 1px solid #c5d6ff; |
| | | font-weight: 400; |
| | | font-size: 14px; |
| | | color: #ffffff; |
| | | } |
| | | } |
| | | } |
| | | .btnGroups { |
| | |
| | | overflow-y: scroll; |
| | | height: 0; |
| | | flex-grow: 1; |
| | | padding-right: 12px; |
| | | // padding-right: 12px; |
| | | :deep(.el-tree-node__content) { |
| | | height: 35px !important; |
| | | line-height: 35px !important; |
| | | padding-left: 0 !important; |
| | | // border-bottom: 1px solid rgba(0,0,0,0.51); |
| | | height: 45px !important; |
| | | line-height: 45px !important; |
| | | // padding-left: 0 !important; |
| | | border-bottom: 1px dotted rgba(255,255,255,0.1); |
| | | } |
| | | |
| | | // 定位选中节点的背景色样式 |
| | | ::v-deep(.el-tree-node.is-current > .el-tree-node__content) { |
| | | background-color: rgba(64, 158, 255, 0.2) !important; // 浅蓝色半透明背景 |
| | | } |
| | | .isTheTerritory { |
| | | :deep() { |
| | | .el-tree-node__expand-icon { |
| | |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | padding-right: 12px; |
| | | width: 100%; |
| | | .nodeName { |
| | | font-size: 12px !important; |