diff --git a/src/app/key-unit/key-unit-management/key-unit-management.component.ts b/src/app/key-unit/key-unit-management/key-unit-management.component.ts index 3b3fd10..72cdf68 100644 --- a/src/app/key-unit/key-unit-management/key-unit-management.component.ts +++ b/src/app/key-unit/key-unit-management/key-unit-management.component.ts @@ -891,7 +891,7 @@ export class KeyUnitManagementComponent implements OnInit { console.log(element); const dialogRef = this.dialog.open(UploadDrillComponent, { width: "700px", - data: { unitInfo: element }, + data: { unitInfo: element, isEditMode: true }, }); dialogRef.afterClosed().subscribe((result) => { diff --git a/src/app/key-unit/key-unit-management/upload-drill/upload-drill.component.html b/src/app/key-unit/key-unit-management/upload-drill/upload-drill.component.html index 1247ec7..0e7afc6 100644 --- a/src/app/key-unit/key-unit-management/upload-drill/upload-drill.component.html +++ b/src/app/key-unit/key-unit-management/upload-drill/upload-drill.component.html @@ -1,4 +1,4 @@ -

上传演练记录

+

演练记录

@@ -30,21 +30,24 @@
带队人员: - +
熟悉时间: - +
调研照片:
- - + +
    -
  • - +
  • + cancel
    • @@ -61,11 +64,12 @@
    水源照片:
    - - + +
      -
    • - +
    • + cancel
      • @@ -75,11 +79,12 @@
      疏散通道:
      - - + +
        -
      • - +
      • + cancel
        • @@ -89,11 +94,13 @@
        消控室:
        - - + +
          -
        • - +
        • + cancel
          • diff --git a/src/app/key-unit/key-unit-management/upload-drill/upload-drill.component.ts b/src/app/key-unit/key-unit-management/upload-drill/upload-drill.component.ts index 0628272..731c91b 100644 --- a/src/app/key-unit/key-unit-management/upload-drill/upload-drill.component.ts +++ b/src/app/key-unit/key-unit-management/upload-drill/upload-drill.component.ts @@ -4,6 +4,7 @@ import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog"; import { ObjectsService } from "@src/app/services/objects.service"; import { DatePipe } from "@angular/common"; import { MatSnackBar } from "@angular/material/snack-bar"; +import Viewer from "viewerjs"; @Component({ selector: "app-upload-drill", templateUrl: "./upload-drill.component.html", @@ -20,8 +21,11 @@ export class UploadDrillComponent implements OnInit { public snackBar: MatSnackBar ) {} + isEditMode = true; + ngOnInit(): void { console.log(this.data); + this.isEditMode = this.data.isEditMode; this.getData(); } @@ -128,6 +132,11 @@ export class UploadDrillComponent implements OnInit { drillId; isLoadingSave = false; save() { + if (!this.isEditMode) { + this.dialogRef.close(); + return; + } + if (!this.teamLeader || !this.time) { this.snackBar.open("请输入带队人员和熟悉时间", "确定", { verticalPosition: "top", @@ -146,7 +155,6 @@ export class UploadDrillComponent implements OnInit { escapeRoute: JSON.stringify(this.routePhoto), fireControlRoom: JSON.stringify(this.fireControlPhoto), }; - console.log(body); if (this.isHttpPost) { this.http.post("/api/DrillRecords", body).subscribe((data: any) => { this.drillId = data.id; @@ -172,4 +180,24 @@ export class UploadDrillComponent implements OnInit { }); } } + + //查看图片 + viewImg(url) { + let dom = document.getElementById(`viewerjs`); + let pObjs = dom.childNodes; + let node = document.createElement("img"); + node.style.display = "none"; + node.src = url; + node.id = "img"; + dom.appendChild(node); + setTimeout(() => { + let viewer = new Viewer(document.getElementById(`viewerjs`), { + hidden: () => { + dom.removeChild(pObjs[0]); + viewer.destroy(); + }, + }); + node.click(); + }, 0); + } } diff --git a/src/app/plan-management/drill-record/drill-record.component.html b/src/app/plan-management/drill-record/drill-record.component.html index 1602a4a..06c529f 100644 --- a/src/app/plan-management/drill-record/drill-record.component.html +++ b/src/app/plan-management/drill-record/drill-record.component.html @@ -1,63 +1,59 @@
          -
          -
          - -
          - - - - -
          -
          - - - - -
          -
          - - -
          + +
          + 单位名称: + +
          +
          + 组织机构: + + +
          +
          + 熟悉时间: + +
          +
          + +
          -
          -
          -
          - - - - - - - - - - - - - - - - - - - - - - - - -
          演练对象{{element.name}}演练时间{{element.time1}}演练时段{{element.time2}}演练形式{{element.type}}操作 - 查看 - 详情 -
          - - - -
          +
          + + + + + + + + + + + + + + + + + + + + + + + +
          演练对象{{element.company.name}}组织机构{{element.company.organizationName}}带队人员{{element.teamLeader}}演练时间{{element.startTime | date:'yyyy-MM-dd HH:mm'}} - + {{element.endTime | date:'yyyy-MM-dd HH:mm'}}操作 + 查看 + +
          + +
          \ No newline at end of file diff --git a/src/app/plan-management/drill-record/drill-record.component.scss b/src/app/plan-management/drill-record/drill-record.component.scss index 06606f0..c191340 100644 --- a/src/app/plan-management/drill-record/drill-record.component.scss +++ b/src/app/plan-management/drill-record/drill-record.component.scss @@ -6,153 +6,41 @@ .header { width: 100%; - padding: 12px 10px; box-sizing: border-box; + padding: 20px 30px 8px 30px; .queryBox { - box-sizing: border-box; - padding: 5px 0 0 5px; - // margin-left: 50px; display: flex; - flex-direction: row; flex-wrap: wrap; align-items: center; - // justify-content:center; .queryField { - margin: 0 10px; + display: flex; + align-items: center; + margin-right: 20px; - input { - width: 180px; - height: 22px; - line-height: 22px; - border-radius: 3px; - } - - @media screen and (max-device-width:1400px)and (min-device-width:1200px) { - - //margin: 3px 10px; - mat-form-field { - width: 180px; - } - } - - @media screen and (max-device-width:1200px) { - - //margin: 3px 0 3px 10px; - mat-form-field { - width: 110px; - } + span { + display: inline-block; + width: 80px; } } - - } - - //queryBox - .butclass { - button { - width: 80px; - height: 36px; - font-size: 16px; - } - } - - .ordiv { - position: relative; - - .organizationbox { - width: 450px; - height: 200px; - background: white; - position: absolute; - top: 48px; - left: 77px; - z-index: 999; - border: 1px solid grey; - overflow-y: auto; - - li { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - mat-tree-node { - cursor: pointer; - white-space: pre; - } - - mat-tree-node:hover { - background: rgba(225, 225, 225, 0.8); - } - - .closediv { - z-index: 100; - position: absolute; - right: 0; - top: 0; - width: 30px; - height: 30px; - cursor: pointer; - line-height: 30px; - text-align: center; - } - - .closediv:hover { - background: rgba(225, 225, 225, 0.8); + .btnbox{ + button{ + margin-right: 12px; } } - } -} -.body { - .buttonbox { - padding-left: 50px; +} - button { - margin: 0 10px - } +.tablebox { + table { + width: 100%; + margin-top: 15px; } - .tablebox { - .add { - cursor: auto; - text-decoration: none; - display: block; - width: 40px; - height: 20px; - background: #1AE2AC; - font-size: 12px; - line-height: 20px; - color: #FFFFFF; - margin-left: 50px; - } - - .weihu { - cursor: auto; - text-decoration: none; - display: block; - width: 64px; - height: 20px; - background: #FFC94B; - font-size: 12px; - color: #FFFFFF; - line-height: 20px; - margin-left: 40px; - } - - table { - width: 100%; - // margin-left: 2%; - margin-top: 15px; - } - - mat-paginator { - width: 100%; - // margin-left: 2%; - // margin-top: 30px; - } + mat-paginator { + width: 100%; } } @@ -164,8 +52,7 @@ .operate { span { - color: blue; - margin: 0 3px; + color: #40a9ff; cursor: pointer; } } diff --git a/src/app/plan-management/drill-record/drill-record.component.ts b/src/app/plan-management/drill-record/drill-record.component.ts index 4c7cde0..b4f9718 100644 --- a/src/app/plan-management/drill-record/drill-record.component.ts +++ b/src/app/plan-management/drill-record/drill-record.component.ts @@ -1,114 +1,141 @@ import { Component, OnInit, ViewChild, Inject } from "@angular/core"; import { HttpClient } from "@angular/common/http"; -import { - MatTreeFlatDataSource, - MatTreeFlattener, -} from "@angular/material/tree"; import { MatPaginator } from "@angular/material/paginator"; -import { FlatTreeControl } from "@angular/cdk/tree"; -import { FormControl } from "@angular/forms"; import { Router, ActivatedRoute } from "@angular/router"; import { PageEvent } from "@angular/material/paginator"; import { MatDialog } from "@angular/material/dialog"; import { MatSnackBar } from "@angular/material/snack-bar"; import { TreeService } from "../../http-interceptors/tree.service"; +import { DatePipe } from "@angular/common"; +import { UploadDrillComponent } from "@src/app/key-unit/key-unit-management/upload-drill/upload-drill.component"; @Component({ selector: "app-drill-record", templateUrl: "./drill-record.component.html", styleUrls: ["./drill-record.component.scss"], + providers: [DatePipe], }) export class DrillRecordComponent implements OnInit { constructor( private http: HttpClient, - private router: Router, - private route: ActivatedRoute, - private tree: TreeService, public dialog: MatDialog, - public snackBar: MatSnackBar + public snackBar: MatSnackBar, + private datePipe: DatePipe ) {} - private _transformer = (node, level: number) => { - //初始化tree - return { - expandable: !!node.children && node.children.length > 0, - name: node.name, - level: level, - id: node.id, - parentId: node.parentId, - children: node.children, - }; - }; - treeControl = new FlatTreeControl( - (node) => node.level, - (node) => node.expandable - ); - treeFlattener = new MatTreeFlattener( - this._transformer, - (node) => node.level, - (node) => node.expandable, - (node) => node.children - ); - dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); - myControl = new FormControl(); - hasChild = (_: number, node: any) => node.expandable; //分页 @ViewChild(MatPaginator, { static: true }) pageEvent: PageEvent; paginator: MatPaginator; - length: any = 4; //共多少条数据 - pageSize: any = 10; //每页条数 - pageSizeOptions: number[] = [10]; //设置每页条数 - PageNumber: any = 1; //第几页 - - displayedColumns: string[] = ["name", "time1", "time2", "type", "operate"]; - allorganizations: any; //所有组织机构 - allunittype: any; //所有单位类型 + displayedColumns: string[] = ["name", "or", "people", "time", "operate"]; tabledataSource: any; //表格数据 - IsNewData = ""; //维护更新活新增 - preparelevels: any; ngOnInit(): void { - this.tabledataSource = [ - { - name: "中保大厦有限公司", - time1: "2023-5-18 07:19", - time2: "2023.5.18-2023.5.19", - type: "二维预案演练", - }, - { - name: "上海通高制造有限公司", - time1: "2023-5-19 09:09", - time2: "2023.5.19-2023.5.19", - type: "二维预案演练", - }, - { - name: "怡莲超市", - time1: "2023-5-20 08:23", - time2: "2023.5.20-2023.5.21", - type: "二维预案演练", - }, - { - name: "永兴商务广场", - time1: "2023-5-25 12:50", - time2: "2023.5.25-2023.5.26", - type: "二维预案演练", - }, - ]; + this.getOrganizations(); + } + + //获得所有组织机构 + allorganizations: any; //所有组织机构 + getOrganizations() { + this.http.get("/api/Organizations").subscribe((data: any) => { + this.allorganizations = data; + this.getpresentOrganization(); + }); + } + + //得到当前单位所在组织机构的tree型数据 + expandKeys = []; + nodes = []; + organizationId; + getpresentOrganization() { + this.allorganizations.forEach((item) => { + item.key = item.id; + item.title = item.name; + item.children = []; + this.allorganizations.forEach((element) => { + if (element.parentId == item.id) { + item.children.push(element); + } + if (item.children.length === 0) { + item.isLeaf = true; + } else { + item.isLeaf = false; + } + }); + }); + this.http.get("/api/Account/Profiles").subscribe((data: any) => { + this.allorganizations.forEach((item) => { + if (item.name == data.organizationName) { + this.expandKeys = [item.id]; + this.organizationId = item.id; + this.orId = item.id; + this.nodes = [...[item]]; + this.getTabledataSource(); + } + }); + }); + } + + length: any; //共多少条数据 + pageSize: any = 10; //每页条数 + PageNumber: any = 1; //第几页 + getTabledataSource() { + let params = { + OrganizationId: this.orId, + CompanyName: this.name || "", + StartTime: this.time + ? this.datePipe.transform(this.time[0], "yyyy-MM-ddT00:00:00") + : "2020-01-01T00:00:00", + EndTime: this.time + ? this.datePipe.transform(this.time[1], "yyyy-MM-ddT23:59:59") + : "2030-01-01T00:00:00", + PageNumber: this.PageNumber, + PageSize: this.pageSize, + }; + this.http + .get("/api/DrillRecords", { params: params }) + .subscribe((data: any) => { + this.tabledataSource = data.items; + this.length = data.totalCount; + }); } //分页事件 chagePage(e) { this.PageNumber = e.pageIndex + 1; + this.getTabledataSource(); } name; + orId; time; //查询 - onSubmit(e) { + onSubmit() { this.PageNumber = 1; this.pageEvent.pageIndex = 0; + this.getTabledataSource(); } //重置 - reset() {} + reset() { + this.name = ""; + this.orId = this.organizationId; + this.time = null; + this.onSubmit(); + } + look(element) { + this.dialog.open(UploadDrillComponent, { + width: "700px", + data: { unitInfo: element.company, isEditMode: false }, + }); + } + delete(element) { + if (confirm("确认删除此记录吗")) { + this.http + .delete(`/api/DrillRecords/${element.id}`) + .subscribe((data: any) => { + alert('删除成功') + this.getTabledataSource(); + }); + } + } } diff --git a/src/app/plan-management/plan-management.module.ts b/src/app/plan-management/plan-management.module.ts index 28c6fea..668124f 100644 --- a/src/app/plan-management/plan-management.module.ts +++ b/src/app/plan-management/plan-management.module.ts @@ -1,91 +1,145 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { PlanManagementRoutingModule } from './plan-management-routing.module'; -import { ReactiveFormsModule, FormsModule } from '@angular/forms'; -import { A11yModule } from '@angular/cdk/a11y'; -import { DragDropModule } from '@angular/cdk/drag-drop'; -import { PortalModule } from '@angular/cdk/portal'; -import { ScrollingModule } from '@angular/cdk/scrolling'; -import { CdkStepperModule } from '@angular/cdk/stepper'; -import { CdkTableModule } from '@angular/cdk/table'; -import { CdkTreeModule } from '@angular/cdk/tree'; -import { MatAutocompleteModule } from '@angular/material/autocomplete'; -import { MatBadgeModule } from '@angular/material/badge'; -import { MatBottomSheetModule } from '@angular/material/bottom-sheet'; -import { MatButtonModule } from '@angular/material/button'; -import { MatButtonToggleModule } from '@angular/material/button-toggle'; -import { MatCardModule } from '@angular/material/card'; -import { MatCheckboxModule } from '@angular/material/checkbox'; -import { MatChipsModule } from '@angular/material/chips'; -import { MatStepperModule } from '@angular/material/stepper'; -import { MatDatepickerModule } from '@angular/material/datepicker'; -import { MatDialogModule } from '@angular/material/dialog'; -import { MatDividerModule } from '@angular/material/divider'; -import { MatExpansionModule } from '@angular/material/expansion'; -import { MatGridListModule } from '@angular/material/grid-list'; -import { MatIconModule } from '@angular/material/icon'; -import { MatInputModule } from '@angular/material/input'; -import { MatListModule } from '@angular/material/list'; -import { MatMenuModule } from '@angular/material/menu'; -import { MatNativeDateModule, MatRippleModule } from '@angular/material/core'; -import { MatPaginatorModule } from '@angular/material/paginator'; -import { MatProgressBarModule } from '@angular/material/progress-bar'; -import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; -import { MatRadioModule } from '@angular/material/radio'; -import { MatSelectModule } from '@angular/material/select'; -import { MatSidenavModule } from '@angular/material/sidenav'; -import { MatSliderModule } from '@angular/material/slider'; -import { MatSlideToggleModule } from '@angular/material/slide-toggle'; -import { MatSnackBarModule } from '@angular/material/snack-bar'; -import { MatSortModule } from '@angular/material/sort'; -import { MatTableModule } from '@angular/material/table'; -import { MatTabsModule } from '@angular/material/tabs'; -import { MatToolbarModule } from '@angular/material/toolbar'; -import { MatTooltipModule } from '@angular/material/tooltip'; -import { MatTreeModule } from '@angular/material/tree'; - -import { EntryPlanComponent } from './entry-plan/entry-plan.component'; -import { PassPlanComponent, UnitInfo } from './pass-plan/pass-plan.component'; -import { OpenPlanComponent } from './open-plan/open-plan.component'; -import { EntryPlanLookComponent, AddPlanone, DownloadFile, AuditResult, ChangeName, ImgDetails } from './entry-plan-look/entry-plan-look.component'; -import { PlanType, AuditSatus, PlanLevel, state } from '../pipes/boolean.pipe'; -import { WebLookComponent } from './web-look/web-look.component'; -import { OnetwoEntryPlanComponent } from './onetwo-entry-plan/onetwo-entry-plan.component'; -import { newunitComponent } from './onetwo-entry-plan/onetwo-entry-plan.component'; -import { MeetPlanComponent } from './meet-plan/meet-plan.component'; -import { newunitMeet } from './meet-plan/meet-plan.component'; -import { TypePlanComponent } from './type-plan/type-plan.component'; -import { newunitType } from './type-plan/type-plan.component'; -import { PsViewer } from './entry-plan-look/entry-plan-look.component' -import { onetwoAuditResult } from './onetwo-entry-plan/onetwo-entry-plan.component'; -import { meetAuditResult } from './meet-plan/meet-plan.component'; -import { typeAuditResult } from './type-plan/type-plan.component'; -import { MaintainUpComponent } from './maintain-up/maintain-up.component' -import { GkPsViewer } from './pass-plan/pass-plan.component' -import { GkhtmlPsViewer } from './open-plan/open-plan.component'; -import { ReinforcePlanComponent } from './reinforce-plan/reinforce-plan.component'; -import { CreatePlanOnlineFiveComponent, OpenPlanToolDialog } from './create-plan-online-five/create-plan-online-five.component'; -import { CreatePlanOnlineThreeComponent } from './create-plan-online-three/create-plan-online-three.component' -import { UiModule } from '../ui/ui.module'; -import { TreeDiagramModule } from '../ui/ng-tree-diagram/src/ng-tree-diagram'; -import { KeyUnitModule } from '../key-unit/key-unit.module'; -import { yinYong } from './create-plan-online-five/create-plan-online-five.component' -import { newTitle } from './create-plan-online-five/create-plan-online-five.component' -import { disaster } from './create-plan-online-five/create-plan-online-five.component' -import { updataHl } from './create-plan-online-five/create-plan-online-five.component' -import {ChangeUrl} from './entry-plan-look/entry-plan-look.component' -import {adddwsurveys} from './create-plan-online-five/create-plan-online-five.component' -import { editUpload } from './entry-plan-look/entry-plan-look.component' -import { wenbenUpload } from './entry-plan-look/entry-plan-look.component'; -import { EditPlanCategoryComponent } from './entry-plan-look/edit-plan-category/edit-plan-category.component'; -import { SixFamiliarityComponent } from './six-familiarity/six-familiarity.component'; -import { DrillRecordComponent } from './drill-record/drill-record.component' +import { NgModule } from "@angular/core"; +import { CommonModule } from "@angular/common"; +import { PlanManagementRoutingModule } from "./plan-management-routing.module"; +import { ReactiveFormsModule, FormsModule } from "@angular/forms"; +import { A11yModule } from "@angular/cdk/a11y"; +import { DragDropModule } from "@angular/cdk/drag-drop"; +import { PortalModule } from "@angular/cdk/portal"; +import { ScrollingModule } from "@angular/cdk/scrolling"; +import { CdkStepperModule } from "@angular/cdk/stepper"; +import { CdkTableModule } from "@angular/cdk/table"; +import { CdkTreeModule } from "@angular/cdk/tree"; +import { MatAutocompleteModule } from "@angular/material/autocomplete"; +import { MatBadgeModule } from "@angular/material/badge"; +import { MatBottomSheetModule } from "@angular/material/bottom-sheet"; +import { MatButtonModule } from "@angular/material/button"; +import { MatButtonToggleModule } from "@angular/material/button-toggle"; +import { MatCardModule } from "@angular/material/card"; +import { MatCheckboxModule } from "@angular/material/checkbox"; +import { MatChipsModule } from "@angular/material/chips"; +import { MatStepperModule } from "@angular/material/stepper"; +import { MatDatepickerModule } from "@angular/material/datepicker"; +import { MatDialogModule } from "@angular/material/dialog"; +import { MatDividerModule } from "@angular/material/divider"; +import { MatExpansionModule } from "@angular/material/expansion"; +import { MatGridListModule } from "@angular/material/grid-list"; +import { MatIconModule } from "@angular/material/icon"; +import { MatInputModule } from "@angular/material/input"; +import { MatListModule } from "@angular/material/list"; +import { MatMenuModule } from "@angular/material/menu"; +import { MatNativeDateModule, MatRippleModule } from "@angular/material/core"; +import { MatPaginatorModule } from "@angular/material/paginator"; +import { MatProgressBarModule } from "@angular/material/progress-bar"; +import { MatProgressSpinnerModule } from "@angular/material/progress-spinner"; +import { MatRadioModule } from "@angular/material/radio"; +import { MatSelectModule } from "@angular/material/select"; +import { MatSidenavModule } from "@angular/material/sidenav"; +import { MatSliderModule } from "@angular/material/slider"; +import { MatSlideToggleModule } from "@angular/material/slide-toggle"; +import { MatSnackBarModule } from "@angular/material/snack-bar"; +import { MatSortModule } from "@angular/material/sort"; +import { MatTableModule } from "@angular/material/table"; +import { MatTabsModule } from "@angular/material/tabs"; +import { MatToolbarModule } from "@angular/material/toolbar"; +import { MatTooltipModule } from "@angular/material/tooltip"; +import { MatTreeModule } from "@angular/material/tree"; +import { EntryPlanComponent } from "./entry-plan/entry-plan.component"; +import { PassPlanComponent, UnitInfo } from "./pass-plan/pass-plan.component"; +import { OpenPlanComponent } from "./open-plan/open-plan.component"; +import { + EntryPlanLookComponent, + AddPlanone, + DownloadFile, + AuditResult, + ChangeName, + ImgDetails, +} from "./entry-plan-look/entry-plan-look.component"; +import { PlanType, AuditSatus, PlanLevel, state } from "../pipes/boolean.pipe"; +import { WebLookComponent } from "./web-look/web-look.component"; +import { OnetwoEntryPlanComponent } from "./onetwo-entry-plan/onetwo-entry-plan.component"; +import { newunitComponent } from "./onetwo-entry-plan/onetwo-entry-plan.component"; +import { MeetPlanComponent } from "./meet-plan/meet-plan.component"; +import { newunitMeet } from "./meet-plan/meet-plan.component"; +import { TypePlanComponent } from "./type-plan/type-plan.component"; +import { newunitType } from "./type-plan/type-plan.component"; +import { PsViewer } from "./entry-plan-look/entry-plan-look.component"; +import { onetwoAuditResult } from "./onetwo-entry-plan/onetwo-entry-plan.component"; +import { meetAuditResult } from "./meet-plan/meet-plan.component"; +import { typeAuditResult } from "./type-plan/type-plan.component"; +import { MaintainUpComponent } from "./maintain-up/maintain-up.component"; +import { GkPsViewer } from "./pass-plan/pass-plan.component"; +import { GkhtmlPsViewer } from "./open-plan/open-plan.component"; +import { ReinforcePlanComponent } from "./reinforce-plan/reinforce-plan.component"; +import { + CreatePlanOnlineFiveComponent, + OpenPlanToolDialog, +} from "./create-plan-online-five/create-plan-online-five.component"; +import { CreatePlanOnlineThreeComponent } from "./create-plan-online-three/create-plan-online-three.component"; +import { UiModule } from "../ui/ui.module"; +import { TreeDiagramModule } from "../ui/ng-tree-diagram/src/ng-tree-diagram"; +import { KeyUnitModule } from "../key-unit/key-unit.module"; +import { yinYong } from "./create-plan-online-five/create-plan-online-five.component"; +import { newTitle } from "./create-plan-online-five/create-plan-online-five.component"; +import { disaster } from "./create-plan-online-five/create-plan-online-five.component"; +import { updataHl } from "./create-plan-online-five/create-plan-online-five.component"; +import { ChangeUrl } from "./entry-plan-look/entry-plan-look.component"; +import { adddwsurveys } from "./create-plan-online-five/create-plan-online-five.component"; +import { editUpload } from "./entry-plan-look/entry-plan-look.component"; +import { wenbenUpload } from "./entry-plan-look/entry-plan-look.component"; +import { EditPlanCategoryComponent } from "./entry-plan-look/edit-plan-category/edit-plan-category.component"; +import { SixFamiliarityComponent } from "./six-familiarity/six-familiarity.component"; +import { DrillRecordComponent } from "./drill-record/drill-record.component"; +import { NzDatePickerModule } from "ng-zorro-antd/date-picker"; +import { NzInputModule } from "ng-zorro-antd/input"; +import { NzButtonModule } from "ng-zorro-antd/button"; +import { NzTreeSelectModule } from "ng-zorro-antd/tree-select"; @NgModule({ - declarations: [EntryPlanComponent, PassPlanComponent, OpenPlanComponent, EntryPlanLookComponent, AddPlanone, PlanType, AuditSatus, PlanLevel, DownloadFile, AuditResult, ChangeName, - WebLookComponent, OnetwoEntryPlanComponent, newunitComponent, MeetPlanComponent, newunitMeet, TypePlanComponent, newunitType, PsViewer, onetwoAuditResult, meetAuditResult, - typeAuditResult, MaintainUpComponent, GkPsViewer, GkhtmlPsViewer, UnitInfo, ReinforcePlanComponent, state, ImgDetails, CreatePlanOnlineFiveComponent, CreatePlanOnlineThreeComponent, - OpenPlanToolDialog,yinYong,newTitle,disaster,updataHl,ChangeUrl,adddwsurveys,editUpload,wenbenUpload, EditPlanCategoryComponent, SixFamiliarityComponent, DrillRecordComponent], + declarations: [ + EntryPlanComponent, + PassPlanComponent, + OpenPlanComponent, + EntryPlanLookComponent, + AddPlanone, + PlanType, + AuditSatus, + PlanLevel, + DownloadFile, + AuditResult, + ChangeName, + WebLookComponent, + OnetwoEntryPlanComponent, + newunitComponent, + MeetPlanComponent, + newunitMeet, + TypePlanComponent, + newunitType, + PsViewer, + onetwoAuditResult, + meetAuditResult, + typeAuditResult, + MaintainUpComponent, + GkPsViewer, + GkhtmlPsViewer, + UnitInfo, + ReinforcePlanComponent, + state, + ImgDetails, + CreatePlanOnlineFiveComponent, + CreatePlanOnlineThreeComponent, + OpenPlanToolDialog, + yinYong, + newTitle, + disaster, + updataHl, + ChangeUrl, + adddwsurveys, + editUpload, + wenbenUpload, + EditPlanCategoryComponent, + SixFamiliarityComponent, + DrillRecordComponent, + ], imports: [ CommonModule, PlanManagementRoutingModule, @@ -135,8 +189,12 @@ import { DrillRecordComponent } from './drill-record/drill-record.component' MatTreeModule, UiModule, TreeDiagramModule, - KeyUnitModule + KeyUnitModule, + NzDatePickerModule, + NzInputModule, + NzButtonModule, + NzTreeSelectModule, ], - exports: [PlanType, AuditSatus, PlanLevel, state] + exports: [PlanType, AuditSatus, PlanLevel, state], }) -export class PlanManagementModule { } +export class PlanManagementModule {} diff --git a/src/app/ui/navmenus/navmenus.component.ts b/src/app/ui/navmenus/navmenus.component.ts index 8ea10f4..40ea2cb 100644 --- a/src/app/ui/navmenus/navmenus.component.ts +++ b/src/app/ui/navmenus/navmenus.component.ts @@ -1,18 +1,23 @@ -import { Component, OnInit,Inject } from '@angular/core'; -import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; -import {FlatTreeControl} from '@angular/cdk/tree'; -import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; -import {FormControl} from '@angular/forms'; -import { HttpClient } from '@angular/common/http'; -import { TreeService } from '../../http-interceptors/tree.service' -import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; - - +import { Component, OnInit, Inject } from "@angular/core"; +import { + MatTreeFlatDataSource, + MatTreeFlattener, +} from "@angular/material/tree"; +import { FlatTreeControl } from "@angular/cdk/tree"; +import { + MatDialog, + MatDialogRef, + MAT_DIALOG_DATA, +} from "@angular/material/dialog"; +import { FormControl } from "@angular/forms"; +import { HttpClient } from "@angular/common/http"; +import { TreeService } from "../../http-interceptors/tree.service"; +import { MatSnackBar, MatSnackBarConfig } from "@angular/material/snack-bar"; @Component({ - selector: 'app-navmenus', - templateUrl: './navmenus.component.html', - styleUrls: ['./navmenus.component.scss'] + selector: "app-navmenus", + templateUrl: "./navmenus.component.html", + styleUrls: ["./navmenus.component.scss"], }) export class NavmenusComponent implements OnInit { newdata = []; @@ -23,108 +28,132 @@ export class NavmenusComponent implements OnInit { level: level, id: node.id, parentId: node.parentId, - children:node.children, - url:node.url, - icon:node.icon + children: node.children, + url: node.url, + icon: node.icon, }; - } - treeControl = new FlatTreeControl(node => node.level, node => node.expandable); - treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children); + }; + treeControl = new FlatTreeControl( + (node) => node.level, + (node) => node.expandable + ); + treeFlattener = new MatTreeFlattener( + this._transformer, + (node) => node.level, + (node) => node.expandable, + (node) => node.children + ); dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); - constructor(private http: HttpClient,public dialog: MatDialog,private tree:TreeService,public snackBar: MatSnackBar) { } - getlist = ():void=>{ - this.http.get('/api/NavMenus').subscribe((data: any[])=>{ - this.newdata = this.tree.toTree(data) + constructor( + private http: HttpClient, + public dialog: MatDialog, + private tree: TreeService, + public snackBar: MatSnackBar + ) {} + getlist = (): void => { + this.http.get("/api/NavMenus").subscribe((data: any[]) => { + this.newdata = this.tree.toTree(data); const nodes = this.treeControl.dataNodes; - const expandNodes = []; - nodes.forEach((item) => { - if(item.expandable && this.treeControl.isExpanded(item)){ - expandNodes.push(item.id); - } - }); - this.dataSource.data = this.newdata; - let newNodes = this.treeControl.dataNodes; - newNodes = newNodes.filter(n => { - return expandNodes.indexOf(n.id) >= 0; - }); - newNodes.forEach(item => { - this.treeControl.expand(item); - }); - - }) - } - treedata:any + const expandNodes = []; + nodes.forEach((item) => { + if (item.expandable && this.treeControl.isExpanded(item)) { + expandNodes.push(item.id); + } + }); + this.dataSource.data = this.newdata; + let newNodes = this.treeControl.dataNodes; + newNodes = newNodes.filter((n) => { + return expandNodes.indexOf(n.id) >= 0; + }); + newNodes.forEach((item) => { + this.treeControl.expand(item); + }); + }); + }; + treedata: any; //初始化页面时渲染出tree ngOnInit() { - this.http.get('/api/NavMenus').subscribe((data: any[])=>{ + this.http.get("/api/NavMenus").subscribe((data: any[]) => { // console.log(111,this.data) // this.treedata = this.tree.toTree(data) - let _data = this.tree.toTree(data) - this.dataSource.data = _data - this.treedata = _data - }) + let _data = this.tree.toTree(data); + this.dataSource.data = _data; + this.treedata = _data; + }); } hasChild = (_: number, node: any) => node.expandable; - + //弹出创建窗口按钮 - createauthority(value){ - const dialogRef = this.dialog.open(CreateMenus, {//调用open方法打开对话框并且携带参数过去 - width: '260px', - data: {id:value.id,children:value.children,icon:value.icon,url:value.url} + createauthority(value) { + const dialogRef = this.dialog.open(CreateMenus, { + //调用open方法打开对话框并且携带参数过去 + width: "260px", + data: { + id: value.id, + children: value.children, + icon: value.icon, + url: value.url, + }, + }); + dialogRef.afterClosed().subscribe((data) => { + this.newdata = []; + this.getlist(); }); - dialogRef.afterClosed().subscribe( - data=>{ - this.newdata = [] - this.getlist() - } - ); } //删除按钮 - deleted(authority){ - var isdeleted = confirm("确定要删除此用户吗？") - if(isdeleted){ + deleted(authority) { + var isdeleted = confirm("确定要删除此用户吗？"); + if (isdeleted) { //请求删除接口 - this.newdata = [] - this.http.delete(`/api/NavMenus/${authority.id}`).subscribe( data=>{ - this.getlist() - }) + this.newdata = []; + this.http.delete(`/api/NavMenus/${authority.id}`).subscribe((data) => { + this.getlist(); + }); } } //编辑按钮 - edit(value){ - const dialogRef = this.dialog.open(EditMenus, {//调用open方法打开对话框并且携带参数过去 - width: '260px', - data: {id:value.id,parentId:value.parentId,order:value.order,node:value} + edit(value) { + const dialogRef = this.dialog.open(EditMenus, { + //调用open方法打开对话框并且携带参数过去 + width: "260px", + data: { + id: value.id, + parentId: value.parentId, + order: value.order, + node: value, + }, + }); + dialogRef.afterClosed().subscribe((data) => { + this.newdata = []; + this.getlist(); }); - dialogRef.afterClosed().subscribe( - data=>{ - this.newdata = [] - this.getlist() - } - ); } } //创建组件 @Component({ - selector: 'createmenus', - templateUrl: './createmenus.component.html', - styleUrls: ['./navmenus.component.scss'] + selector: "createmenus", + templateUrl: "./createmenus.component.html", + styleUrls: ["./navmenus.component.scss"], }) export class CreateMenus { myControl = new FormControl(); //注入MatDialogRef，可以用来关闭对话框 //要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注入令牌 - constructor(private http: HttpClient,public dialogRef: MatDialogRef, - public snackBar: MatSnackBar,@Inject(MAT_DIALOG_DATA) public data) {} + constructor( + private http: HttpClient, + public dialogRef: MatDialogRef, + public snackBar: MatSnackBar, + @Inject(MAT_DIALOG_DATA) public data + ) {} onNoClick(): void { this.dialogRef.close(); } - onSubmit(value){ + onSubmit(value) { if(this.data.children){ this.http.post( - '/api/NavMenus', + '/api/NavMenus', { id: '', name: value.name, @@ -135,7 +164,7 @@ export class CreateMenus { } ).subscribe( data=>{ - this.dialogRef.close(); + this.dialogRef.close(); }, err=>{ const config = new MatSnackBarConfig(); @@ -146,7 +175,7 @@ export class CreateMenus { ) }else{ this.http.post( - '/api/NavMenus', + '/api/NavMenus', { id: '', name: value.name, @@ -157,7 +186,7 @@ export class CreateMenus { } ).subscribe( data=>{ - this.dialogRef.close(); + this.dialogRef.close(); }, err=>{ const config = new MatSnackBarConfig(); @@ -167,26 +196,48 @@ export class CreateMenus { } ) } - + // this.http + // .post("/api/NavMenus", { + // id: "", + // name: '预案熟悉', + // icon:'featured_play_list', + // // url: value.url, + // order: 4, + // parentId: null, + // }) + // .subscribe( + // (data) => { + // this.dialogRef.close(); + // }, + // (err) => { + // const config = new MatSnackBarConfig(); + // config.verticalPosition = "top"; + // config.duration = 3000; + // this.snackBar.open("请填写正确格式", "确定", config); + // } + // ); } } - - //编辑组件 @Component({ - selector: 'editmenus', - templateUrl: './editmenus.component.html', - styleUrls: ['./navmenus.component.scss'] + selector: "editmenus", + templateUrl: "./editmenus.component.html", + styleUrls: ["./navmenus.component.scss"], }) export class EditMenus { myControl = new FormControl(); //注入MatDialogRef，可以用来关闭对话框 //要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注入令牌 - constructor(private http: HttpClient,public dialogRef: MatDialogRef,public snackBar: MatSnackBar,@Inject(MAT_DIALOG_DATA) public data) {} - menuname:any //菜单名称 - menuiconurl:any //菜单图标地址 - menuweburl:any //菜单地址 + constructor( + private http: HttpClient, + public dialogRef: MatDialogRef, + public snackBar: MatSnackBar, + @Inject(MAT_DIALOG_DATA) public data + ) {} + menuname: any; //菜单名称 + menuiconurl: any; //菜单图标地址 + menuweburl: any; //菜单地址 ngOnInit(): void { this.menuname = this.data.node.name; this.menuiconurl = this.data.node.icon; @@ -195,33 +246,32 @@ export class EditMenus { onNoClick(): void { this.dialogRef.close(); } - onSubmit(value){ - if(value.icon){ - this.data.icon = value.icon + onSubmit(value) { + if (value.icon) { + this.data.icon = value.icon; } - if(value.url){ - this.data.url = value.url + if (value.url) { + this.data.url = value.url; } - this.http.put( - ` /api/NavMenus/${this.data.id}`, - { + this.http + .put(` /api/NavMenus/${this.data.id}`, { id: this.data.id, name: value.name, icon: this.data.icon, url: this.data.url, - order:this.data.order, - parentId: this.data.parentId - } - ).subscribe( - data=>{ - this.dialogRef.close(); - }, - err=>{ - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('请填写正确格式','确定',config); - } - ) + order: this.data.order, + parentId: this.data.parentId, + }) + .subscribe( + (data) => { + this.dialogRef.close(); + }, + (err) => { + const config = new MatSnackBarConfig(); + config.verticalPosition = "top"; + config.duration = 3000; + this.snackBar.open("请填写正确格式", "确定", config); + } + ); } -} \ No newline at end of file +} diff --git a/src/index.html b/src/index.html index 49446f5..fac3faa 100644 --- a/src/index.html +++ b/src/index.html @@ -14,6 +14,7 @@ + diff --git a/src/styles.scss b/src/styles.scss index a9b41c2..a7998ed 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -522,3 +522,7 @@ td { justify-content: center; } } + +.maxHeightTreeSelect { + max-height: 280px; +} \ No newline at end of file