6 changed files with 467 additions and 309 deletions
@ -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+';'"> </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+';'"> </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> |
@ -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; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,70 @@ |
|||||||
|
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.task){ |
||||||
|
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 |
||||||
|
if(this.taskNumber!=8){ |
||||||
|
this.task=false |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
Loading…
Reference in new issue