tangxh/ForgeFlow-ERP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复组织树连接线层级关系

Browse Source
This commit is contained in:
汤学会 2026-06-15 01:56:59 +08:00
parent dac7844d4c
commit 914c8ed99f
2 changed files with 47 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/OrgPermissionTree.test.js
View File

@ -9,10 +9,10 @@ const source = readFileSync(join(__dirname, "OrgPermissionTree.vue"), "utf8");
describe("OrgPermissionTree hierarchy lines", () => { describe("OrgPermissionTree hierarchy lines", () => {
it("draws connector lines only between each node and its direct children", () => { it("draws connector lines only between each node and its direct children", () => {
assert.match(source, /\.org-tree-children\s*>\s*\.org-tree-branch::before/);
assert.match(source, /\.org-tree-children\s*>\s*\.org-tree-branch\s*>\s*\.org-tree-node::before/); assert.match(source, /\.org-tree-children\s*>\s*\.org-tree-branch\s*>\s*\.org-tree-node::before/);
assert.match(source, /\.org-tree-children\s*>\s*\.org-tree-branch\s*>\s*\.org-tree-node::after/);
assert.doesNotMatch(source, /\.org-tree-children::before/); assert.doesNotMatch(source, /\.org-tree-children::before/);
assert.doesNotMatch(source, /\.org-tree-branch::before/); assert.doesNotMatch(source, /^\.org-tree-branch::before/m);
assert.match(source, /--tree-connector-x/); assert.match(source, /--tree-connector-x/);
assert.match(source, /--tree-connector-color/); assert.match(source, /--tree-connector-color/);
assert.match(source, /--tree-connector-width:\s*2px/); assert.match(source, /--tree-connector-width:\s*2px/);

77
frontend/src/components/OrgPermissionTree.vue
View File

@ -577,9 +577,10 @@ function removeEmployee(employee) {
} }
.org-tree-list { .org-tree-list {
--tree-connector-color: rgba(37, 99, 235, 0.74); --tree-connector-color: rgba(29, 78, 216, 0.9);
--tree-connector-width: 2px; --tree-connector-width: 2px;
--tree-connector-arm: 14px; --tree-connector-arm: 20px;
--tree-node-center: 20px;
display: flex; display: flex;
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
@ -598,6 +599,25 @@ function removeEmployee(employee) {
gap: 2px; gap: 2px;
} }
.org-tree-children > .org-tree-branch::before {
content: "";
position: absolute;
top: calc(-1 * var(--tree-connector-width));
bottom: calc(-1 * var(--tree-connector-width));
left: var(--tree-connector-x);
width: var(--tree-connector-width);
background: var(--tree-connector-color);
border-radius: 999px;
box-shadow: 0 0 0 1px rgba(219, 234, 254, 0.85);
transform: translateX(-50%);
pointer-events: none;
}
.org-tree-children > .org-tree-branch:last-child::before {
bottom: auto;
height: calc(var(--tree-node-center) + var(--tree-connector-width));
}
.org-tree-node { .org-tree-node {
position: relative; position: relative;
display: grid; display: grid;
@ -618,26 +638,13 @@ function removeEmployee(employee) {
.org-tree-children > .org-tree-branch > .org-tree-node::before { .org-tree-children > .org-tree-branch > .org-tree-node::before {
content: ""; content: "";
position: absolute; position: absolute;
top: 50%; top: var(--tree-node-center);
left: calc(var(--tree-connector-x) - var(--tree-connector-width) / 2); left: calc(var(--tree-connector-x) - var(--tree-connector-width) / 2);
width: var(--tree-connector-arm); width: var(--tree-connector-arm);
height: var(--tree-connector-width); height: var(--tree-connector-width);
background: var(--tree-connector-color); background: var(--tree-connector-color);
border-radius: 999px; border-radius: 999px;
transform: translateY(-50%); box-shadow: 0 0 0 1px rgba(219, 234, 254, 0.85);
pointer-events: none;
}
.org-tree-children > .org-tree-branch > .org-tree-node::after {
content: "";
position: absolute;
top: calc(50% - 10px);
left: var(--tree-connector-x);
width: var(--tree-connector-width);
height: 20px;
background: var(--tree-connector-color);
border-radius: 999px;
transform: translateX(-50%);
pointer-events: none; pointer-events: none;
} }
@ -798,6 +805,25 @@ function removeEmployee(employee) {
gap: 2px; gap: 2px;
} }
:deep(.org-tree-children > .org-tree-branch::before) {
content: "";
position: absolute;
top: calc(-1 * var(--tree-connector-width));
bottom: calc(-1 * var(--tree-connector-width));
left: var(--tree-connector-x);
width: var(--tree-connector-width);
background: var(--tree-connector-color);
border-radius: 999px;
box-shadow: 0 0 0 1px rgba(219, 234, 254, 0.85);
transform: translateX(-50%);
pointer-events: none;
}
:deep(.org-tree-children > .org-tree-branch:last-child::before) {
bottom: auto;
height: calc(var(--tree-node-center) + var(--tree-connector-width));
}
:deep(.org-tree-node) { :deep(.org-tree-node) {
position: relative; position: relative;
display: grid; display: grid;
@ -819,26 +845,13 @@ function removeEmployee(employee) {
:deep(.org-tree-children > .org-tree-branch > .org-tree-node::before) { :deep(.org-tree-children > .org-tree-branch > .org-tree-node::before) {
content: ""; content: "";
position: absolute; position: absolute;
top: 50%; top: var(--tree-node-center);
left: calc(var(--tree-connector-x) - var(--tree-connector-width) / 2); left: calc(var(--tree-connector-x) - var(--tree-connector-width) / 2);
width: var(--tree-connector-arm); width: var(--tree-connector-arm);
height: var(--tree-connector-width); height: var(--tree-connector-width);
background: var(--tree-connector-color); background: var(--tree-connector-color);
border-radius: 999px; border-radius: 999px;
transform: translateY(-50%); box-shadow: 0 0 0 1px rgba(219, 234, 254, 0.85);
pointer-events: none;
}
:deep(.org-tree-children > .org-tree-branch > .org-tree-node::after) {
content: "";
position: absolute;
top: calc(50% - 10px);
left: var(--tree-connector-x);
width: var(--tree-connector-width);
height: 20px;
background: var(--tree-connector-color);
border-radius: 999px;
transform: translateX(-50%);
pointer-events: none; pointer-events: none;
} }