kely
2 years ago
47 changed files with 872 additions and 222 deletions
@ -0,0 +1,28 @@ |
|||
<div> |
|||
<h2>流程记录</h2> |
|||
<div class="mt-4 p-3"> |
|||
<nz-timeline> |
|||
@for (item of flowRecords; track $index) { |
|||
<nz-timeline-item [nzDot]="item.finishTime ? undefined : dotTemplate"> |
|||
<div> |
|||
{{ item.createTime }} |
|||
<span> |
|||
{{ item.comment?.comment }} |
|||
</span> |
|||
</div> |
|||
<div>任务名称：{{ item.taskName }}</div> |
|||
<div>审批人：{{ item?.assigneeName ?? '-' }}</div> |
|||
@if (item.finishTime) { |
|||
<div> |
|||
<span> 流程完成时间：{{ item.finishTime }} </span> |
|||
<span> 用时：{{ item.duration }} </span> |
|||
</div> |
|||
} |
|||
</nz-timeline-item> |
|||
} |
|||
</nz-timeline> |
|||
<ng-template #dotTemplate> |
|||
<span nz-icon nzType="clock-circle-o" style="font-size: 16px"></span> |
|||
</ng-template> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,27 @@ |
|||
import { Component, Input, OnInit } from '@angular/core' |
|||
import { ApiService } from 'app/services' |
|||
import { SharedModule } from 'app/shared/shared.module' |
|||
import { NzSafeAny } from 'ng-zorro-antd/core/types' |
|||
|
|||
@Component({ |
|||
selector: 'app-flow-result', |
|||
standalone: true, |
|||
imports: [SharedModule], |
|||
templateUrl: './flow-result.component.html', |
|||
styleUrl: './flow-result.component.less', |
|||
}) |
|||
export class FlowResultComponent implements OnInit { |
|||
constructor(private api: ApiService) {} |
|||
|
|||
@Input() flow: NzSafeAny = null |
|||
|
|||
flowRecords: NzSafeAny[] = [] |
|||
|
|||
ngOnInit(): void { |
|||
if (this.flow) { |
|||
this.api.getFlowRecord(this.flow.deployId, this.flow.procInsId).subscribe((res) => { |
|||
this.flowRecords = res.body.flowList |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,88 @@ |
|||
.dashboard { |
|||
.statistic { |
|||
@apply flex; |
|||
|
|||
|
|||
} |
|||
|
|||
.icon { |
|||
display: block; |
|||
width: 48px; |
|||
height: 48px; |
|||
border-radius: 50%; |
|||
background-color: #1890ff; |
|||
color: #fff; |
|||
font-size: 20px; |
|||
@apply flex items-center justify-center mr-2 flex-shrink-0; |
|||
} |
|||
|
|||
[nz-carousel-content] { |
|||
text-align: center; |
|||
height: 160px !important; |
|||
|
|||
|
|||
} |
|||
|
|||
::ng-deep { |
|||
.ant-carousel .slick-dots-bottom { |
|||
bottom: 0; |
|||
} |
|||
|
|||
.ant-carousel .slick-dots li button { |
|||
background-color: rgba(0, 0, 0, .35); |
|||
} |
|||
|
|||
.ant-carousel .slick-dots li.slick-active button { |
|||
background-color: #1890ff; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.example-list { |
|||
width: 500px; |
|||
max-width: 100%; |
|||
border: solid 1px #ccc; |
|||
min-height: 30px; |
|||
display: block; |
|||
background: white; |
|||
border-radius: 4px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.example-box { |
|||
padding: 6px 10px; |
|||
border-bottom: solid 1px #ccc; |
|||
color: rgba(0, 0, 0, 0.87); |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
|
|||
box-sizing: border-box; |
|||
cursor: move; |
|||
background: white; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.cdk-drag-preview { |
|||
box-sizing: border-box; |
|||
border-radius: 4px; |
|||
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), |
|||
0 8px 10px 1px rgba(0, 0, 0, 0.14), |
|||
0 3px 14px 2px rgba(0, 0, 0, 0.12); |
|||
} |
|||
|
|||
.cdk-drag-placeholder { |
|||
opacity: 0; |
|||
} |
|||
|
|||
.cdk-drag-animating { |
|||
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); |
|||
} |
|||
|
|||
.example-box:last-child { |
|||
border: none; |
|||
} |
|||
|
|||
.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) { |
|||
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); |
|||
} |
|||
Loading…
Reference in new issue