Browse Source

123

beijing
陈鹏飞 3 years ago
parent
commit
381e754c57
  1. 3
      src/app/pages/pages.module.ts
  2. 49
      src/app/system-management/menu/menu.component.html
  3. 80
      src/app/system-management/menu/menu.component.scss
  4. 25
      src/app/system-management/menu/menu.component.spec.ts
  5. 233
      src/app/system-management/menu/menu.component.ts
  6. 1
      src/app/system-management/navigation/navigation.component.html
  7. 5
      src/app/system-management/system-management-routing.module.ts
  8. 1
      src/app/system-management/system-management.module.ts

3
src/app/pages/pages.module.ts

@ -85,11 +85,12 @@ import { auditStatusPipe, handleState, licenseViolationType, notificationContent
import { GasBaseInfoComponent } from './audit/gas-base-info/gas-base-info.component';
import { AnnualInspectionComponent } from './audit/annual-inspection/annual-inspection.component';
import { EditAnnualInspectionComponent } from './audit/annual-inspection/edit-annual-inspection/edit-annual-inspection.component';
import { MenuComponent } from '../system-management/menu/menu.component';
@NgModule({
declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent,
TodayWarningAdminComponent, CriminalRecordsAdminComponent, LeftDomainComponent, EquipmentInfoComponent, OilStationInfoComponent,
AddequipmentComponent, EditequipmentComponent, PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, HomePageComponent, OilUnloadingProcessListComponent, ChangePasswordComponent, FacilitySortPipe, WarningStatisticsListComponent, DisposeequipmentComponent, NavBarComponent, InformComponent, UpdateCategoryComponent, FileCategoryComponent, HistoriesComponent, EditUpdateCategoryComponent, DetailsUpdateCategoryComponent, EditFileCategoryComponent, DetailsFileCategoryComponent, PdfWordLookComponent, MisinformationListComponent, OilStationListComponent, UpdateLicenseListComponent, FileLicenseListComponent, AuditNavComponent, AuditIngComponent, AuditRecordComponent, AuditInformTimeComponent, AuditDisposeComponent, EditInformTimeComponent, AuditDetailsInformTimeComponent, auditStatusPipe, GasBaseInfoComponent, notificationContent, licenseViolationType, handleState, AnnualInspectionComponent, EditAnnualInspectionComponent],
AddequipmentComponent, EditequipmentComponent, PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, HomePageComponent, OilUnloadingProcessListComponent, ChangePasswordComponent, FacilitySortPipe, WarningStatisticsListComponent, DisposeequipmentComponent, NavBarComponent, InformComponent, UpdateCategoryComponent, FileCategoryComponent, HistoriesComponent, EditUpdateCategoryComponent, DetailsUpdateCategoryComponent, EditFileCategoryComponent, DetailsFileCategoryComponent, PdfWordLookComponent, MisinformationListComponent, OilStationListComponent, UpdateLicenseListComponent, FileLicenseListComponent, AuditNavComponent, AuditIngComponent, AuditRecordComponent, AuditInformTimeComponent, AuditDisposeComponent, EditInformTimeComponent, AuditDetailsInformTimeComponent, auditStatusPipe, GasBaseInfoComponent, notificationContent, licenseViolationType, handleState, AnnualInspectionComponent, EditAnnualInspectionComponent, MenuComponent],
imports: [

49
src/app/system-management/menu/menu.component.html

@ -0,0 +1,49 @@
<div class="orbox" id="orbox">
<div class="topbox">
<div class="lefttop">
<span>菜单列表</span>
</div>
<div class="righttop">
<!-- <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
<nz-form-item>
<nz-form-control>
<nz-input-group nzPrefixIcon="search">
<input type="text" nz-input placeholder="请输入单位" formControlName="search" [(ngModel)]="searchValue"/>
</nz-input-group>
</nz-form-control>
<button style="display: none;" type="submit"></button>
</nz-form-item>
</form> -->
<nz-input-group nzPrefixIcon="search">
<input type="text" nz-input placeholder="请输入单位" [(ngModel)]="searchValue" />
</nz-input-group>
<button nz-button nzType="primary" (click)="addOr()"><i nz-icon nzType="plus-circle"
nzTheme="outline"></i>新增</button>
</div>
</div>
<div class="treeTitle">
<span>菜单</span>
<span>是否添加</span>
</div>
<nz-tree [nzHideUnMatched]='true' [nzSearchValue]="searchValue" #nzTreeComponent [nzData]="nodes"
[nzExpandAll]="nzExpandAll" [nzExpandedKeys]="defaultExpandedKeys" [nzTreeTemplate]="nzTreeTemplate" nzDraggable
nzBlockNode (nzOnDrop)="nzEvent($event)" [nzBeforeDrop]="beforeDrop" [nzExpandedIcon]="multiExpandedIconTpl">
</nz-tree>
<ng-template #nzTreeTemplate let-node let-origin="origin">
<div class="nodebox">
<span class="name">{{ node.title }}</span>
<span class="operation">
<label nz-checkbox [(ngModel)]="checked">添加</label>
</span>
</div>
</ng-template>
<ng-template #multiExpandedIconTpl let-node let-origin="origin">
<ng-container *ngIf="node.children.length == 0; else elseTemplate">
</ng-container>
<ng-template #elseTemplate>
<i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'" class="ant-tree-switcher-line-icon"></i>
</ng-template>
</ng-template>
</div>

80
src/app/system-management/menu/menu.component.scss

@ -0,0 +1,80 @@
.orbox {
width: 100%;
height: 100%;
overflow-y: auto;
background: #fff;
box-sizing: border-box;
padding: 20px;
font-size: 15px;
}
.topbox {
width: 700px;
height: 36px;
display: flex;
align-items: center;
justify-content: space-between;
.lefttop {
span:nth-child(1) {
color: #000D21;
margin-right: 16px;
}
span:nth-child(2) {
color: rgba(36, 36, 36, 0.24);
}
}
.righttop {
height: 36px;
display: flex;
button {
margin-left: 16px;
}
nz-input-group {
height: 32px;
}
}
}
.treeTitle {
width: 700px;
height: 36px;
line-height: 36px;
display: flex;
justify-content: space-between;
color: #000D21;
box-sizing: border-box;
padding-left: 30px;
padding-right: 180px;
background: rgba(145, 204, 255, 0.2);
margin: 12px 0;
}
.nodebox {
font-size: 15px;
}
.operation {
position: absolute;
right: 0;
span {
margin-left: 40px;
}
span:nth-child(1),
span:nth-child(2),
span:nth-child(3) {
color: #2399FF;
}
.grey{
color: rgba(0, 13, 33, 0.48)!important;
}
}

25
src/app/system-management/menu/menu.component.spec.ts

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MenuComponent } from './menu.component';
describe('MenuComponent', () => {
let component: MenuComponent;
let fixture: ComponentFixture<MenuComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MenuComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MenuComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

233
src/app/system-management/menu/menu.component.ts

@ -0,0 +1,233 @@
import { HttpClient } from '@angular/common/http';
import { Component, OnInit, AfterViewInit, ViewChild, ViewContainerRef } from '@angular/core';
import { TreeService } from 'src/app/service/tree.service';
import { NzFormatEmitEvent, NzTreeComponent, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NzModalService } from 'ng-zorro-antd/modal';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzFormatBeforeDropEvent } from 'ng-zorro-antd/tree';
import { Observable, of } from 'rxjs';
import { delay } from 'rxjs/operators';
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit {
validateForm!: FormGroup;
constructor(private fb: FormBuilder, private http: HttpClient, private toTree: TreeService, private modal: NzModalService, private message: NzMessageService, private viewContainerRef: ViewContainerRef) { }
checked=true
ngOnInit(): void {
this.validateForm = this.fb.group({
search: [null]
});
this.getAllOrganization()
}
//搜索框提交
submitForm(): void {
for (const i in this.validateForm.controls) {
this.validateForm.controls[i].markAsDirty();
this.validateForm.controls[i].updateValueAndValidity();
}
}
//获取所有组织机构
searchValue = '';
nzExpandAll = false;
totalCount: string
allOrList: any
getAllOrganization() {
let OrganizationUnitId = sessionStorage.getItem('isGasStation') == 'true' ? JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id : JSON.parse(sessionStorage.getItem('userdata')).organization.id
let params = {
OrganizationUnitId: OrganizationUnitId,
IsContainsChildren: "true"
}
this.http.get('/api/services/app/Organization/GetAll', {
params: params
}).subscribe((data: any) => {
this.totalCount = data.result.totalCount
data.result.items.forEach(element => {
element.key = element.id
element.title = element.displayName
element.selectable = false
});
this.allOrList = data.result.items
this.nodes = [...this.toTree.toTree(data.result.items)]
this.defaultExpandedKeys = [this.nodes[0].id]
this.defaultExpandedKeys = [...this.defaultExpandedKeys]
})
}
@ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent;
defaultExpandedKeys = [];
nodes: any[] = []
deleteOr(item) {
console.log(item)
if (item.origin.children && item.origin.children.length != 0) {
this.message.create('warning', '请先删除所有子节点');
} else {
this.modal.confirm({
nzTitle: `确定要删除${item.title}这个机构吗?`,
nzOkText: '确定',
nzOkType: 'danger',
nzOnOk: () => {
this.http.delete('/api/services/app/Organization/Delete', {
params: {
Id: item.origin.id
}
}).subscribe(data => {
this.nzTreeComponent.getExpandedNodeList().forEach((item) => {
this.defaultExpandedKeys.push(item.key)
})
this.getAllOrganization()
this.message.create('success', '删除成功!');
})
},
nzCancelText: '取消',
nzOnCancel: () => {
}
});
}
}
nzEvent(event: NzFormatEmitEvent): void {
console.log('event', event)
if (this.isDrag) {
let parentId
if (this.pos == 0) {//目标节点内部
parentId = event.node.key
} else {
if (event.node.level == 0) {
parentId = null
} else {
parentId = event.node.origin.parentId
}
}
let body = {
id: event.dragNode.key,
parentId: parentId,
// code: instance.validateForm.value.code,
displayName: event.dragNode.origin.displayName,
isGasStation: event.dragNode.origin.isGasStation
}
this.http.put('/api/services/app/Organization/Update', body).subscribe(data => {
this.message.create('success', '拖拽成功!');
this.nzTreeComponent.getExpandedNodeList().forEach((item) => {
this.defaultExpandedKeys.push(item.key)
})
this.getAllOrganization()
return true
}, err => {
this.message.create('warning', '拖拽失败');
return false
})
// console.log('this.allOrList', this.allOrList)
// let orders = {}
// let originalData = JSON.parse(JSON.stringify(this.allOrList || [])) //tree原始数据
// let targetNodeData = []//拖动移入节点的数据,用于遍历求出放在该数组的第几位
//找到需要重新排序的数组
// if (this.pos == 0) {
// originalData.forEach(item => {
// if (item.parentId == event.node.key) {
// targetNodeData.push(item)
// }
// })
// } else {
// if (event.node.origin.parentId) {//如果拖动目标为非一级节点
// originalData.forEach(item => {
// if (item.parentId == event.node.origin.parentId) {
// targetNodeData.push(item)
// }
// })
// } else {//如果拖动目标为一级节点
// originalData.forEach(item => {
// if (!item.parentId) {
// targetNodeData.push(item)
// }
// })
// }
// }
// let idArr = []
// targetNodeData.forEach(i => {
// idArr.push(i.id)
// })
// if (this.pos == 0 && event.node.origin.children.length == 1) {
// // console.log("移入,没有兄弟")
// let key = event.dragNode.key
// orders[key] = 0
// parentId = event.node.key
// } else {
// let array = []
// targetNodeData.forEach(item => {
// if (item.id != event.dragNode.key) { //将拖动项先移除掉
// array.push(item)
// }
// })
// if (event.dragNode.isEnd[event.dragNode.isEnd.length - 1]) { //如果移入到最后一个
// // console.log("最后")
// array.push(event.dragNode.origin)
// } else if (event.dragNode.isStart[event.dragNode.isStart.length - 1]) {//如果移入到第一个
// // console.log("第一")
// array.unshift(event.dragNode.origin)
// } else {//如果移入中间位置
// // console.log("中间")
// array.splice(event.node.origin.order, 0, event.dragNode.origin)
// }
// array.forEach((item, key) => {
// orders[item.id] = key
// })
// console.log("移入,多个兄弟",orders)
// }
// let obj = {
// id: event.dragNode.origin.id,
// parentId: parentId,
// orders: orders
// }
// this.http.put("/api/DisposalNodes/Sort", obj).subscribe(data => {
// const config = new MatSnackBarConfig();
// config.verticalPosition = 'top';
// config.duration = 3000
// this.snackBar.open('排序成功', '确定', config)
// this.refurbishTreeData()
// })
}
}
isDrag //是否可以拖动
pos//放置位置
beforeDrop = (arg: NzFormatBeforeDropEvent) => {
console.log('arg', arg)
if (arg.node.level === 0) {//如果为数据节点则不允许拖到一级节点
this.message.create('warning', '不允许拖拽到一级节点');
this.isDrag = false
return of(false);
} else {
this.isDrag = true
this.pos = arg.pos
return of(true)
}
}
}

1
src/app/system-management/navigation/navigation.component.html

@ -20,6 +20,7 @@
<li [routerLink]="['/system/push']" routerLinkActive="router-link-active"><img src="../../../assets/images/icon/push.png" alt="">推送管理</li>
<li [routerLink]="['/system/updateOfLicense']" routerLinkActive="router-link-active"><img src="../../../assets/images/icon/license.png" alt="">经营类证照管理</li>
<li [routerLink]="['/system/fileOfLicense']" routerLinkActive="router-link-active"><img src="../../../assets/images/icon/license.png" alt="">资产类证照管理</li>
<li [routerLink]="['/system/menu']" routerLinkActive="router-link-active"><img src="../../../assets/images/icon/license.png" alt="">菜单管理</li>
</ul>
</div>
</nz-sider>

5
src/app/system-management/system-management-routing.module.ts

@ -9,7 +9,7 @@ import { AnalysisOfTheHostComponent } from './analysis-of-the-host/analysis-of-t
import { PushComponent } from './push/push.component';
import { UpdateOfLicenseComponent } from './update-of-license/update-of-license.component';
import { FileOfLicenseComponent } from './file-of-license/file-of-license.component';
import { MenuComponent } from './menu/menu.component'
const routes: Routes = [
{ path: 'organization', component: OrganizationComponent },
{ path: 'user', component: UserComponent },
@ -17,7 +17,8 @@ const routes: Routes = [
{ path: 'host', component: AnalysisOfTheHostComponent },
{ path: 'push', component: PushComponent },
{ path: 'fileOfLicense', component: FileOfLicenseComponent },
{ path: 'updateOfLicense', component: UpdateOfLicenseComponent }
{ path: 'updateOfLicense', component: UpdateOfLicenseComponent },
{ path: 'menu', component: MenuComponent }
];
@NgModule({

1
src/app/system-management/system-management.module.ts

@ -40,6 +40,7 @@ import { AddFileOfLicenseComponent } from './file-of-license/add-file-of-license
import { EditFileOfLicenseComponent } from './file-of-license/edit-file-of-license/edit-file-of-license.component';
import { AddUpdateOfLicenseComponent } from './update-of-license/add-update-of-license/add-update-of-license.component';
import { EditUpdateOfLicenseComponent } from './update-of-license/edit-update-of-license/edit-update-of-license.component';
import { MenuComponent } from './menu/menu.component';
@NgModule({
declarations: [OrganizationComponent, UserComponent, RoleComponent, NavigationComponent, AdduserComponent, EdituserComponent, AddroleComponent, EditroleComponent, AddorComponent, EditorComponent, AnalysisOfTheHostComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent, PushComponent, EditPushItemComponent, FileOfLicenseComponent, UpdateOfLicenseComponent, AddFileOfLicenseComponent, EditFileOfLicenseComponent, AddUpdateOfLicenseComponent, EditUpdateOfLicenseComponent],
imports: [

Loading…
Cancel
Save