shaojiahao
/
ShangHaiYuan-AnXin
2
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity
Browse Source

[完善]组织机构排序

master
邵佳豪 2 years ago
parent
b4d4c892a6
commit
d48ab61752
5 changed files with 20275 additions and 1246 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 19309
      package-lock.json
  2. 63
      src/app/ui/organization/organization.component.html
  3. 192
      src/app/ui/organization/organization.component.scss
  4. 974
      src/app/ui/organization/organization.component.ts
  5. 983
      yarn.lock

19309
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

63
src/app/ui/organization/organization.component.html
Unescape View File

@ -1,42 +1,52 @@
<div class="box" style="height: 100%; overflow-y: auto;position: relative"> <div class="box" style="height: 100%; overflow-y: auto;position: relative">
<div> <div style="position: relative;">
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" > <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<mat-tree-node *matTreeNodeDef="let node;" matTreeNodePadding (click)="getOffices(node)"> <mat-tree-node *matTreeNodeDef="let node;" matTreeNodePadding (click)="getOffices(node)">
<button mat-icon-button disabled ></button> <button mat-icon-button disabled></button>
{{node.name}} {{node.name}}
<button mat-icon-button class="create" (click)="create(node)"><mat-icon>add_circle_outline</mat-icon></button> <button mat-icon-button class="create" (click)="create(node)"><mat-icon>add_circle_outline</mat-icon></button>
<button mat-icon-button class="edit" (click)="edit(node)"><mat-icon>create</mat-icon></button> <button mat-icon-button class="edit" (click)="edit(node)"><mat-icon>create</mat-icon></button>
<button mat-icon-button class="up" (click)="up(node)" [disabled]="!node.isTop?false:true"><mat-icon>arrow_upward</mat-icon></button> <button mat-icon-button class="up" (click)="up(node,$event)"
<button mat-icon-button class="down" (click)="down(node)" [disabled]="!node.isBottom?false:true"><mat-icon>arrow_downward</mat-icon></button> [disabled]="!node.isTop?false:true"><mat-icon>arrow_upward</mat-icon></button>
<button mat-icon-button class="disabled" (click)="disable(node)" *ngIf="node.enabled" color="warn"><mat-icon>block</mat-icon></button> <button mat-icon-button class="down" (click)="down(node,$event)"
<button mat-icon-button class="disabled" (click)="disable(node)" *ngIf="!node.enabled"><mat-icon>block</mat-icon></button> [disabled]="!node.isBottom?false:true"><mat-icon>arrow_downward</mat-icon></button>
<button mat-icon-button class="disabled" (click)="disable(node)" *ngIf="node.enabled"
color="warn"><mat-icon>block</mat-icon></button>
<button mat-icon-button class="disabled" (click)="disable(node)"
*ngIf="!node.enabled"><mat-icon>block</mat-icon></button>
<button mat-icon-button class="deleted" (click)="delete(node)"><mat-icon>delete</mat-icon></button> <button mat-icon-button class="deleted" (click)="delete(node)"><mat-icon>delete</mat-icon></button>
</mat-tree-node> </mat-tree-node>
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)="getOffices(node)"> <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)="getOffices(node)">
<button mat-icon-button <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
matTreeNodeToggle
[attr.aria-label]="'toggle ' + node.name">
<mat-icon class="mat-icon-rtl-mirror"> <mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon> </mat-icon>
</button> </button>
{{node.name}} {{node.name}}
<button mat-icon-button class="create" (click)="create(node)"><mat-icon>add_circle_outline</mat-icon></button> <button mat-icon-button class="create" (click)="create(node)"><mat-icon>add_circle_outline</mat-icon></button>
<button mat-icon-button class="edit" (click)="edit(node)"><mat-icon>create</mat-icon></button> <button mat-icon-button class="edit" (click)="edit(node)"><mat-icon>create</mat-icon></button>
<button mat-icon-button class="up" (click)="up(node)" [disabled]="!node.isTop?false:true"><mat-icon>arrow_upward</mat-icon></button> <button mat-icon-button class="up" (click)="up(node,$event)"
<button mat-icon-button class="down" (click)="down(node)" [disabled]="!node.isBottom?false:true"><mat-icon>arrow_downward</mat-icon></button> [disabled]="!node.isTop?false:true"><mat-icon>arrow_upward</mat-icon></button>
<button mat-icon-button class="disabled" (click)="disable(node)" *ngIf="node.enabled" color="warn"><mat-icon>block</mat-icon></button> <button mat-icon-button class="down" (click)="down(node,$event)"
<button mat-icon-button class="disabled" (click)="disable(node)" *ngIf="!node.enabled"><mat-icon>block</mat-icon></button> [disabled]="!node.isBottom?false:true"><mat-icon>arrow_downward</mat-icon></button>
<button mat-icon-button class="disabled" (click)="disable(node)" *ngIf="node.enabled"
color="warn"><mat-icon>block</mat-icon></button>
<button mat-icon-button class="disabled" (click)="disable(node)"
*ngIf="!node.enabled"><mat-icon>block</mat-icon></button>
<button mat-icon-button class="deleted" (click)="delete(node)"><mat-icon>delete</mat-icon></button> <button mat-icon-button class="deleted" (click)="delete(node)"><mat-icon>delete</mat-icon></button>
</mat-tree-node> </mat-tree-node>
</mat-tree> </mat-tree>
<div *ngIf="isloading" class="spinner">
<mat-spinner diameter="30"></mat-spinner>
</div>
</div> </div>
<!-- 组织机构下属机关 --> <!-- 组织机构下属机关 -->
<div class="rightDiv" *ngIf="selectedOrg"> <div class="rightDiv" *ngIf="selectedOrg">
@ -51,7 +61,8 @@
<span>{{item.officeName}}</span> <span>{{item.officeName}}</span>
<span class="btnbox"> <span class="btnbox">
<button mat-icon-button class="edit" (click)="editOffice(item)"><mat-icon>create</mat-icon></button> <button mat-icon-button class="edit" (click)="editOffice(item)"><mat-icon>create</mat-icon></button>
<button mat-icon-button class="deleted" (click)="deleteOffice(item)"><mat-icon style="color: #f44336;">delete</mat-icon></button> <button mat-icon-button class="deleted" (click)="deleteOffice(item)"><mat-icon
style="color: #f44336;">delete</mat-icon></button>
</span> </span>
</li> </li>
</ul> </ul>
@ -60,9 +71,5 @@
</span> </span>
</div> </div>
</div> </div>
<div *ngIf="isloading" style="position: absolute;width: 100%;height: 100%;background-color: rgba(125, 125, 125, 0.3);z-index: 999;left: 0;top: 0;text-align: center;">
<mat-spinner style="position: fixed;top: 40%;left: 50%;transform: translate(-40%,-50%);"></mat-spinner>
<p style="position: fixed;top:53%;left: 53%;transform: translate(-53%,-50%);">努力加载中...</p>
</div>
</div>
</div>

192
src/app/ui/organization/organization.component.scss
Unescape View File

@ -1,109 +1,121 @@
mat-tree{ mat-tree {
width:800px; width: 800px;
button{ button {
display: block; display: block;
float: right; float: right;
} }
mat-tree-node{ mat-tree-node {
position: relative; position: relative;
.deleted{ .deleted {
position: absolute; position: absolute;
right: 0px; right: 0px;
} }
.disabled{ .disabled {
position: absolute; position: absolute;
right: 40px; right: 40px;
} }
.edit{ .edit {
position: absolute; position: absolute;
right:160px; right: 160px;
}
.create{
position: absolute;
right: 200px;
}
.up{
position: absolute;
right: 120px;
}
.down{
position: absolute;
right: 80px;
}
} }
} .create {
form{ position: absolute;
text-align: center; right: 200px;
button{
margin: 0 8px;
margin-top: 8px;
} }
.up {
position: absolute;
right: 120px;
}
.down {
position: absolute;
right: 80px;
}
}
}
form {
text-align: center;
button {
margin: 0 8px;
margin-top: 8px;
}
} }
.leftbox{ .leftbox {
width: 300px; width: 300px;
float: left; float: left;
} }
.treebox{ .treebox {
float: right; float: right;
height: 250px; height: 250px;
width: 300px; width: 300px;
/* overflow: auto; */ /* overflow: auto; */
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
} }
.smalltreebox{ .smalltreebox {
width: 300px;
mat-tree-node {
width: 300px; width: 300px;
mat-tree-node{ }
width: 300px;
}
} }
.orilist{ .orilist {
list-style: none; list-style: none;
} }
.orilist:hover{ .orilist:hover {
cursor: pointer; cursor: pointer;
background-color: rgba(225, 225, 225, 0.8); background-color: rgba(225, 225, 225, 0.8);
} }
.box{ .box {
div{ div {
float: left; float: left;
}
.rightDiv {
display: flex;
flex-direction: column;
border: 1px solid gray;
border-radius: 6px;
box-sizing: border-box;
padding: 20px;
.topbox {
display: flex;
height: 40px;
line-height: 40px;
} }
.rightDiv{ .listBox {
width: 100%;
text-align: center;
li {
display: flex; display: flex;
flex-direction: column; justify-content: space-between;
border: 1px solid gray;
border-radius: 6px;
box-sizing: border-box; box-sizing: border-box;
padding: 20px; padding: 3px 6px;
align-items: center;
.topbox{ .btnbox {
display: flex; display: flex;
height: 40px; align-items: center;
line-height: 40px; button {
} margin: 0 2px;
.listBox{ }
width: 100%;
text-align: center;
li{
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 3px 6px;
align-items: center;
.btnbox{
display: flex;
align-items: center;
button{
margin: 0 2px;
}
}
}
} }
}
} }
} }
}
.spinner {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(125, 125, 125, 0.3);
z-index: 999;
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
}

974
src/app/ui/organization/organization.component.ts
View File

File diff suppressed because it is too large Load Diff

983
yarn.lock
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save