任务调整弹窗

src/app/home/home.module.ts

@@ -57,6 +57,8 @@ import { NzSpinModule } from 'ng-zorro-antd/spin';
 import { AllotPersonComponent } from './task/da-subordinate-audit/allot-person/allot-person.component';
 import { ChangePasswordComponent } from './change-password/change-password.component';
 import { NzUploadModule } from 'ng-zorro-antd/upload';
+import { NzCardModule } from 'ng-zorro-antd/card';
+import { PlanAdjustmentComponent } from './task/da-oneself-plan/plan-adjustment/plan-adjustment.component';
 @NgModule({
   declarations: [
     NavComponent,
@@ -89,7 +91,8 @@ import { NzUploadModule } from 'ng-zorro-antd/upload';
     LookTaskComponent,
     UnitEditComponent,
     AllotPersonComponent,
-    ChangePasswordComponent
+    ChangePasswordComponent,
+    PlanAdjustmentComponent
   ],
   imports: [
     CommonModule,
@@ -119,6 +122,7 @@ import { NzUploadModule } from 'ng-zorro-antd/upload';
     NzRadioModule,
     NzDatePickerModule,
     NzSpinModule,
+    NzCardModule,
     NzUploadModule
   ],
   entryComponents: [AddroleComponent, EditroleComponent, AdduserComponent, EdituserComponent, AddorComponent, EditorComponent, ApplyComponent, ApplyLookComponent, LookTaskComponent, AllotPersonComponent]

src/app/home/task/da-oneself-plan/da-oneself-plan.component.html

@@ -85,7 +85,7 @@
                             <nz-progress nzStrokeLinecap="square" nzStrokeWidth="16"
                                 nzStrokeColor="#42B983" [nzPercent]="30"></nz-progress>
                         </div>
-                        <button nz-button nzType="primary">任务下派</button>
+                        <button nz-button nzType="primary" (click)="adjustment()">任务调整</button>
                         <span (click)="expandcarditem(item)" class="expand blue">
                             {{item.isExpand ? '收起' :'展开'}}
                             <i nz-icon [nzType]="item.isExpand ? 'down' : 'up'" nzTheme="outline"></i>

src/app/home/task/da-oneself-plan/da-oneself-plan.component.ts

@@ -1,5 +1,8 @@
-import { Component, OnInit } from '@angular/core';
-
+import { Component, OnInit,ViewContainerRef } from '@angular/core';
+import { NzMessageService } from 'ng-zorro-antd/message';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import {PlanAdjustmentComponent} from './plan-adjustment/plan-adjustment.component'
 @Component({
   selector: 'app-da-oneself-plan',
   templateUrl: './da-oneself-plan.component.html',
@@ -7,8 +10,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DaOneselfPlanComponent implements OnInit {
 
-  constructor() { }
-
+  constructor(private modal: NzModalService,private message: NzMessageService,private viewContainerRef: ViewContainerRef) { }
+  validateForm!: FormGroup;
   ngOnInit(): void {
   }
   months = [
@@ -68,4 +71,22 @@ export class DaOneselfPlanComponent implements OnInit {
   expandcarditem(item) {
     item.isExpand = !item.isExpand
   }
+  nodes: any = []
+  BuildingTypes
+  adjustment(){
+    const modal = this.modal.create({
+      nzTitle: "任务调整",
+      nzContent: PlanAdjustmentComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 900,
+      nzComponentParams: {
+       
+      },
+      nzOnOk: async () => {
+        console.log(123);
+      }
+    });
+    const instance = modal.getContentComponent();
+
+  }
 }

src/app/home/task/da-oneself-plan/plan-adjustment/plan-adjustment.component.html

@@ -0,0 +1,35 @@
+<div class="box">
+    <div style="border: 1px solid #E4E7EC; padding: 20px; width:400px; margin: 0 20px;">
+        <div class="title"><span>未接任务</span><span>任务总数：{{taskNumber}}/8</span></div>
+        <div class="missed">
+            <div *ngFor="let item of list" class="item">
+                <i [style]="'background:'+item.class+';'">&nbsp;&nbsp;</i>
+                <span>{{item.tag}}</span>
+                <div (click)="aaa(data)" class="checked" *ngFor="let data of item.item">
+                    <label [nzDisabled]="task" nz-checkbox [(ngModel)]="data.checked" (change)="aaa(data)">{{data.name}}</label>
+                </div>
+
+            </div>
+        </div>
+    </div>
+    <div style="border: 1px solid #E4E7EC; padding: 20px; width:400px; margin: 0 20px;" >
+        <div class="title">已接任务</div>
+        <div class="missed">
+            <div *ngFor="let item2 of list" class="item">
+                <div>
+                    <i [style]="'background:'+item2.class+';'">&nbsp;&nbsp;</i>
+                    <span>{{item2.tag}}</span>
+                </div>
+                <div *ngFor="let data of item2.item">
+                    <div class="received checked" *ngIf="data.checked">
+                        <div class="name">{{data.name}}</div>
+                        <div><i nz-icon nzType="close" nzTheme="outline" (click)="bbb(data)"></i></div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+    
+    
+</div>

src/app/home/task/da-oneself-plan/plan-adjustment/plan-adjustment.component.scss

@@ -0,0 +1,28 @@
+.box {
+    display: flex;
+}
+.title{
+    span{
+        margin-right: 14px;
+    }
+}
+.missed {
+    .item {
+        margin: 20px 0;
+        border-bottom: 1px dotted #C7CAD0;
+        i {
+            width: 4px;
+            height: 12px;
+            margin-right: 5px;
+        }
+        .checked{
+            margin: 10px 0;
+        }
+    }
+    .received{
+        display: flex;
+        .name{
+            flex: 1;
+        }
+    }
+}

src/app/home/task/da-oneself-plan/plan-adjustment/plan-adjustment.component.ts

@@ -0,0 +1,67 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-plan-adjustment',
+  templateUrl: './plan-adjustment.component.html',
+  styleUrls: ['./plan-adjustment.component.scss']
+})
+export class PlanAdjustmentComponent implements OnInit {
+
+  constructor() { }
+  list = [
+    {
+      tag: "行政许可",
+      class: "#42B983",
+      item: [
+        {
+          name: "想啥吃啥餐饮有限公司",
+          checked: false
+        },
+        {
+          name: "想啥吃啥餐饮有限公司",
+          checked: false
+        }
+      ]
+    },
+    {
+      tag: "双随机",
+      class: "#1D9DFF",
+      item: [
+        {
+          name: "想啥吃啥餐饮有限公司",
+          checked: false
+        }
+      ]
+    },
+  ]
+  list2 = [
+
+  ]
+  taskNumber=0
+  task=false
+  ngOnInit(): void {
+  }
+  aaa(data) {
+    if(data.checked){
+      this.list2.push({meu:this.list2.length,data})
+      console.log(this.list2);
+      this.taskNumber=this.list2.length
+      if(this.taskNumber==8){
+        this.task=true
+      }
+    }else{
+      this.bbb(data)
+    }
+  }
+  bbb(e) {
+    console.log(e);
+    e.checked=false
+    for (let index = 0; index < this.list2.length; index++) {
+      if(e==this.list2[index].data){
+        this.list2.splice(this.list2[index].meu,1)
+        this.taskNumber=this.list2.length
+      }
+      
+    }
+  }
+}