kely
1 year ago
50 changed files with 1061 additions and 241 deletions
@ -1,37 +1,88 @@ |
|||
<app-page> |
|||
<nz-calendar [(ngModel)]="date" [(nzMode)]="mode" (nzPanelChange)="panelChange($event)"> |
|||
<ul *nzDateCell="let date" class="events"> |
|||
@switch (date.getDate()) { |
|||
@case (8) { |
|||
@for (item of listDataMap.eight; track $index) { |
|||
<li> |
|||
<nz-badge [nzStatus]="item.type" [nzText]="item.content"></nz-badge> |
|||
</li> |
|||
<form nz-form> |
|||
<div class="flex mt-2"> |
|||
<div class="flex-1"> |
|||
<div nz-row [nzGutter]="12"> |
|||
<div nz-col nzSpan="6"> |
|||
<nz-form-item> |
|||
<nz-form-label>任务状态</nz-form-label> |
|||
<nz-form-control> |
|||
<nz-select nzShowSearch nzPlaceHolder="请选择" nzAllowClear> |
|||
<nz-option nzLabel="全部" nzValue="全部"></nz-option> |
|||
<nz-option nzLabel="审批中" nzValue="审批中"></nz-option> |
|||
<nz-option nzLabel="已完结" nzValue="进行中"></nz-option> |
|||
<nz-option nzLabel="已挂起" nzValue="已结束/" /> |
|||
<nz-option nzLabel="被驳回" nzValue="已结束/" /> |
|||
<nz-option nzLabel="已撤回" nzValue="已结束/" /> |
|||
</nz-select> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
</div> |
|||
<div nz-col nzSpan="6"> |
|||
<nz-form-item> |
|||
<nz-form-label>计划名称</nz-form-label> |
|||
<nz-form-control> |
|||
<input nz-input placeholder="请输入" /> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
</div> |
|||
<div nz-col nzSpan="6"> |
|||
<nz-form-item> |
|||
<nz-form-label>创建方式</nz-form-label> |
|||
<nz-form-control> |
|||
<nz-select nzShowSearch nzPlaceHolder="请选择" nzAllowClear> |
|||
<nz-option nzLabel="全部" nzValue="全部"></nz-option> |
|||
<nz-option nzLabel="计划创建" nzValue="审批中"></nz-option> |
|||
<nz-option nzLabel="手动创建" nzValue="进行中"></nz-option> |
|||
</nz-select> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class=""> |
|||
<nz-space> |
|||
<button *nzSpaceItem nz-button type="button" nzType="primary">查询</button> |
|||
<button *nzSpaceItem nz-button>重置</button> |
|||
</nz-space> |
|||
</div> |
|||
</div> |
|||
</form> |
|||
<nz-card> |
|||
<nz-calendar [(ngModel)]="date" [(nzMode)]="mode" (nzPanelChange)="panelChange($event)"> |
|||
<ul *nzDateCell="let date" class="events"> |
|||
@switch (date.getDate()) { |
|||
@case (8) { |
|||
@for (item of listDataMap.eight; track $index) { |
|||
<li> |
|||
<nz-badge [nzStatus]="item.type" [nzText]="item.content"></nz-badge> |
|||
</li> |
|||
} |
|||
} |
|||
} |
|||
@case (10) { |
|||
@for (item of listDataMap.ten; track $index) { |
|||
<li> |
|||
<nz-badge [nzStatus]="item.type" [nzText]="item.content"></nz-badge> |
|||
</li> |
|||
@case (10) { |
|||
@for (item of listDataMap.ten; track $index) { |
|||
<li> |
|||
<nz-badge [nzStatus]="item.type" [nzText]="item.content"></nz-badge> |
|||
</li> |
|||
} |
|||
} |
|||
} |
|||
@case (11) { |
|||
@for (item of listDataMap.eleven; track $index) { |
|||
<li> |
|||
<nz-badge [nzStatus]="item.type" [nzText]="item.content"></nz-badge> |
|||
</li> |
|||
@case (11) { |
|||
@for (item of listDataMap.eleven; track $index) { |
|||
<li> |
|||
<nz-badge [nzStatus]="item.type" [nzText]="item.content"></nz-badge> |
|||
</li> |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</ul> |
|||
<ng-container *nzMonthCell="let month"> |
|||
@if (getMonthData(month); as monthData) { |
|||
<div class="notes-month"> |
|||
<section>{{ monthData }}</section> |
|||
<span>Backlog number</span> |
|||
</div> |
|||
} |
|||
</ng-container> |
|||
</nz-calendar> |
|||
</ul> |
|||
<ng-container *nzMonthCell="let month"> |
|||
@if (getMonthData(month); as monthData) { |
|||
<div class="notes-month"> |
|||
<section>{{ monthData }}</section> |
|||
<span>Backlog number</span> |
|||
</div> |
|||
} |
|||
</ng-container> |
|||
</nz-calendar> |
|||
</nz-card> |
|||
</app-page> |
|||
|
|||
@ -1 +1 @@ |
|||
<p>maintenance-calendar works!</p> |
|||
<app-calendar-list type="maintenance" /> |
|||
|
|||
@ -1,12 +1,12 @@ |
|||
import { Component } from '@angular/core'; |
|||
import { Component } from '@angular/core' |
|||
import { CalendarListComponent } from 'app/components/plan-task/calendar-list/calendar-list.component' |
|||
import { SharedModule } from 'app/shared/shared.module' |
|||
|
|||
@Component({ |
|||
selector: 'app-maintenance-calendar', |
|||
standalone: true, |
|||
imports: [], |
|||
templateUrl: './maintenance-calendar.component.html', |
|||
styleUrl: './maintenance-calendar.component.less' |
|||
selector: 'app-maintenance-calendar', |
|||
standalone: true, |
|||
imports: [SharedModule, CalendarListComponent], |
|||
templateUrl: './maintenance-calendar.component.html', |
|||
styleUrl: './maintenance-calendar.component.less', |
|||
}) |
|||
export class MaintenanceCalendarComponent { |
|||
|
|||
} |
|||
export class MaintenanceCalendarComponent {} |
|||
|
|||
@ -1 +1 @@ |
|||
<p>maintenance-plan works!</p> |
|||
<app-plan-list type="maintenance" /> |
|||
|
|||
@ -1,12 +1,12 @@ |
|||
import { Component } from '@angular/core'; |
|||
import { Component } from '@angular/core' |
|||
import { PlanListComponent } from 'app/components/plan-task/plan-list/plan-list.component' |
|||
import { SharedModule } from 'app/shared/shared.module' |
|||
|
|||
@Component({ |
|||
selector: 'app-maintenance-plan', |
|||
standalone: true, |
|||
imports: [], |
|||
templateUrl: './maintenance-plan.component.html', |
|||
styleUrl: './maintenance-plan.component.less' |
|||
selector: 'app-maintenance-plan', |
|||
standalone: true, |
|||
imports: [SharedModule, PlanListComponent], |
|||
templateUrl: './maintenance-plan.component.html', |
|||
styleUrl: './maintenance-plan.component.less', |
|||
}) |
|||
export class MaintenancePlanComponent { |
|||
|
|||
} |
|||
export class MaintenancePlanComponent {} |
|||
|
|||
@ -1 +1 @@ |
|||
<p>maintenance-task works!</p> |
|||
<app-task-list type="maintenance" /> |
|||
|
|||
@ -1,12 +1,12 @@ |
|||
import { Component } from '@angular/core'; |
|||
import { Component } from '@angular/core' |
|||
import { TaskListComponent } from 'app/components/plan-task/task-list/task-list.component' |
|||
import { SharedModule } from 'app/shared/shared.module' |
|||
|
|||
@Component({ |
|||
selector: 'app-maintenance-task', |
|||
standalone: true, |
|||
imports: [], |
|||
templateUrl: './maintenance-task.component.html', |
|||
styleUrl: './maintenance-task.component.less' |
|||
selector: 'app-maintenance-task', |
|||
standalone: true, |
|||
imports: [SharedModule, TaskListComponent], |
|||
templateUrl: './maintenance-task.component.html', |
|||
styleUrl: './maintenance-task.component.less', |
|||
}) |
|||
export class MaintenanceTaskComponent { |
|||
|
|||
} |
|||
export class MaintenanceTaskComponent {} |
|||
|
|||
@ -1 +1 @@ |
|||
<p>stocktaking-calendar works!</p> |
|||
<app-calendar-list type="stocktaking" /> |
|||
|
|||
@ -1,12 +1,12 @@ |
|||
import { Component } from '@angular/core'; |
|||
import { Component } from '@angular/core' |
|||
import { CalendarListComponent } from 'app/components/plan-task/calendar-list/calendar-list.component' |
|||
import { SharedModule } from 'app/shared/shared.module' |
|||
|
|||
@Component({ |
|||
selector: 'app-stocktaking-calendar', |
|||
standalone: true, |
|||
imports: [], |
|||
templateUrl: './stocktaking-calendar.component.html', |
|||
styleUrl: './stocktaking-calendar.component.less' |
|||
selector: 'app-stocktaking-calendar', |
|||
standalone: true, |
|||
imports: [SharedModule, CalendarListComponent], |
|||
templateUrl: './stocktaking-calendar.component.html', |
|||
styleUrl: './stocktaking-calendar.component.less', |
|||
}) |
|||
export class StocktakingCalendarComponent { |
|||
|
|||
} |
|||
export class StocktakingCalendarComponent {} |
|||
|
|||
@ -1 +1 @@ |
|||
<p>stocktaking-plan works!</p> |
|||
<app-plan-list type="stocktaking" /> |
|||
|
|||
@ -1,12 +1,12 @@ |
|||
import { Component } from '@angular/core'; |
|||
import { Component } from '@angular/core' |
|||
import { PlanListComponent } from 'app/components/plan-task/plan-list/plan-list.component' |
|||
import { SharedModule } from 'app/shared/shared.module' |
|||
|
|||
@Component({ |
|||
selector: 'app-stocktaking-plan', |
|||
standalone: true, |
|||
imports: [], |
|||
templateUrl: './stocktaking-plan.component.html', |
|||
styleUrl: './stocktaking-plan.component.less' |
|||
selector: 'app-stocktaking-plan', |
|||
standalone: true, |
|||
imports: [SharedModule, PlanListComponent], |
|||
templateUrl: './stocktaking-plan.component.html', |
|||
styleUrl: './stocktaking-plan.component.less', |
|||
}) |
|||
export class StocktakingPlanComponent { |
|||
|
|||
} |
|||
export class StocktakingPlanComponent {} |
|||
|
|||
@ -1 +1 @@ |
|||
<p>stocktaking-task works!</p> |
|||
<app-task-list type="stocktaking" /> |
|||
|
|||
@ -1,12 +1,12 @@ |
|||
import { Component } from '@angular/core'; |
|||
import { Component } from '@angular/core' |
|||
import { TaskListComponent } from 'app/components/plan-task/task-list/task-list.component' |
|||
import { SharedModule } from 'app/shared/shared.module' |
|||
|
|||
@Component({ |
|||
selector: 'app-stocktaking-task', |
|||
standalone: true, |
|||
imports: [], |
|||
templateUrl: './stocktaking-task.component.html', |
|||
styleUrl: './stocktaking-task.component.less' |
|||
selector: 'app-stocktaking-task', |
|||
standalone: true, |
|||
imports: [SharedModule, TaskListComponent], |
|||
templateUrl: './stocktaking-task.component.html', |
|||
styleUrl: './stocktaking-task.component.less', |
|||
}) |
|||
export class StocktakingTaskComponent { |
|||
|
|||
} |
|||
export class StocktakingTaskComponent {} |
|||
|
|||
@ -0,0 +1 @@ |
|||
<p>flow-management works!</p> |
|||
@ -0,0 +1,12 @@ |
|||
import { Component } from '@angular/core'; |
|||
|
|||
@Component({ |
|||
selector: 'app-flow-management', |
|||
standalone: true, |
|||
imports: [], |
|||
templateUrl: './flow-management.component.html', |
|||
styleUrl: './flow-management.component.less' |
|||
}) |
|||
export class FlowManagementComponent { |
|||
|
|||
} |
|||
@ -0,0 +1 @@ |
|||
<p>flow-report works!</p> |
|||
@ -0,0 +1,12 @@ |
|||
import { Component } from '@angular/core'; |
|||
|
|||
@Component({ |
|||
selector: 'app-flow-report', |
|||
standalone: true, |
|||
imports: [], |
|||
templateUrl: './flow-report.component.html', |
|||
styleUrl: './flow-report.component.less' |
|||
}) |
|||
export class FlowReportComponent { |
|||
|
|||
} |
|||
@ -0,0 +1,44 @@ |
|||
<app-page> |
|||
<div class="flex-1 overflow-hidden"> |
|||
<app-server-paginated-table [options]="table" [formGroup]="queryForm" [renderColumn]="renderColumnTpl"> |
|||
<ng-template #renderColumnTpl let-data let-key="key" let-row="row"> |
|||
@switch (key) { |
|||
@case ('_useUser') { |
|||
{{ data?.userName ?? '-' }} |
|||
} |
|||
@case ('_warehouse') { |
|||
{{ data?.name ?? '-' }} |
|||
} |
|||
@case ('_position') { |
|||
{{ data?.name ?? '-' }} |
|||
} |
|||
@case ('_head') { |
|||
{{ data?.userName ?? '-' }} |
|||
} |
|||
@case ('_ownCompany') { |
|||
{{ data?.organizationName ?? '-' }} |
|||
} |
|||
@case ('_useOrganization') { |
|||
{{ data?.organizationName ?? '-' }} |
|||
} |
|||
@case ('_category') { |
|||
{{ data?.categoryName ?? '-' }} |
|||
} |
|||
@default { |
|||
{{ data }} |
|||
} |
|||
} |
|||
</ng-template> |
|||
<ng-container *appTableAction> |
|||
<nz-space> |
|||
<button *nzSpaceItem nz-button nzType="link" nzDanger="">删除</button> |
|||
</nz-space> |
|||
</ng-container> |
|||
<ng-container *appTableForm> |
|||
<app-query-item label="内容"> |
|||
<input nz-input placeholder="请输入" formControlName="logContent" /> |
|||
</app-query-item> |
|||
</ng-container> |
|||
</app-server-paginated-table> |
|||
</div> |
|||
</app-page> |
|||
@ -0,0 +1,57 @@ |
|||
import { Component, TemplateRef, ViewChild } from '@angular/core' |
|||
import { FormControl, FormGroup } from '@angular/forms' |
|||
|
|||
import { AnyObject, TableOption } from 'app/shared/components/server-paginated-table' |
|||
import { ApiService } from 'app/services' |
|||
import { SharedModule } from 'app/shared/shared.module' |
|||
import { format } from 'date-fns' |
|||
import { lastValueFrom, of } from 'rxjs' |
|||
import { NzSafeAny } from 'ng-zorro-antd/core/types' |
|||
import { NzModalService } from 'ng-zorro-antd/modal' |
|||
import { NzMessageService } from 'ng-zorro-antd/message' |
|||
import { BUSINESS_STATUS_MAP } from 'app/constants' |
|||
import { FormValidators } from 'app/utils' |
|||
|
|||
@Component({ |
|||
selector: 'app-flow-msg', |
|||
standalone: true, |
|||
imports: [SharedModule], |
|||
templateUrl: './flow-msg.component.html', |
|||
styleUrl: './flow-msg.component.less', |
|||
}) |
|||
export class FlowMsgComponent { |
|||
constructor( |
|||
private api: ApiService, |
|||
private modal: NzModalService, |
|||
private msg: NzMessageService, |
|||
) {} |
|||
|
|||
@ViewChild('createFormTpl') createFormTpl!: TemplateRef<{}> |
|||
|
|||
queryForm = new FormGroup({ |
|||
logContent: new FormControl(''), |
|||
logType: new FormControl(''), |
|||
createTime: new FormControl(''), |
|||
}) |
|||
|
|||
table = new TableOption(this.fetchData.bind(this)) |
|||
|
|||
ngOnInit(): void { |
|||
this.table |
|||
// .setConfig({
|
|||
// selectable: true,
|
|||
// rowKey: 'id',
|
|||
// })
|
|||
.setColumn([ |
|||
{ key: 'logId', title: '序号', visible: true }, |
|||
{ key: 'createTime', title: '时间', visible: true }, |
|||
{ key: 'logType', title: '类型', visible: true }, |
|||
{ key: 'logContent', title: '内容', visible: true }, |
|||
{ key: 'logContent', title: '待我处理', visible: true }, |
|||
]) |
|||
} |
|||
|
|||
fetchData(p: {}, q: AnyObject) { |
|||
return this.api.getAlarmMsg({ ...p, ...q }) |
|||
} |
|||
} |
|||
@ -0,0 +1,67 @@ |
|||
<div |
|||
class="menu bg-white shadow fixed left-0 top-12 bottom-0 z-20 w-48 flex-shrink-0 py-3 overflow-y-auto overflow-x-hidden" |
|||
> |
|||
<ul nz-menu nzMode="inline"> |
|||
<li |
|||
*appPermission="['asset-flow-home:view']" |
|||
nz-menu-item |
|||
[nzPaddingLeft]="12" |
|||
[routerLink]="['/msg/flow']" |
|||
nzMatchRouter |
|||
> |
|||
流程消息 |
|||
</li> |
|||
|
|||
<li |
|||
nzMatchRouter |
|||
[nzPaddingLeft]="12" |
|||
nz-submenu |
|||
nzTitle="预警中心" |
|||
[nzOpen]="openedSubmenu.startsWith('/msg/alert')" |
|||
*appPermission="['stocktaking-plan:view', 'stocktaking-job:view']" |
|||
> |
|||
<ul> |
|||
<li |
|||
*appPermission="['stocktaking-plan:view']" |
|||
nz-menu-item |
|||
[nzPaddingLeft]="24" |
|||
[routerLink]="['/msg/alert/borrow']" |
|||
nzMatchRouter |
|||
> |
|||
借用超期预警 |
|||
</li> |
|||
<li |
|||
*appPermission="['stocktaking-job:view']" |
|||
nz-menu-item |
|||
[nzPaddingLeft]="24" |
|||
[routerLink]="['/msg/alert/maintenance']" |
|||
nzMatchRouter |
|||
> |
|||
维保到期预警 |
|||
</li> |
|||
<li |
|||
*appPermission="['stocktaking-job:view']" |
|||
nz-menu-item |
|||
[nzPaddingLeft]="24" |
|||
[routerLink]="['/msg/alert/inventory']" |
|||
nzMatchRouter |
|||
> |
|||
库存安全预警 |
|||
</li> |
|||
</ul> |
|||
</li> |
|||
<li |
|||
*appPermission="['asset-flow-my-finished:view']" |
|||
nz-menu-item |
|||
[nzPaddingLeft]="12" |
|||
[routerLink]="['/msg/log']" |
|||
nzMatchRouter |
|||
> |
|||
系统日志 |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
|
|||
<div class="pl-48 overflow-hidden"> |
|||
<router-outlet></router-outlet> |
|||
</div> |
|||
@ -0,0 +1,24 @@ |
|||
import { Component } from '@angular/core' |
|||
import { Router } from '@angular/router' |
|||
import { SharedModule } from 'app/shared/shared.module' |
|||
|
|||
@Component({ |
|||
selector: 'app-flow-layout', |
|||
standalone: true, |
|||
imports: [SharedModule], |
|||
templateUrl: './msg-layout.component.html', |
|||
styleUrl: './msg-layout.component.less', |
|||
}) |
|||
export class MsgLayoutComponent { |
|||
constructor(private router: Router) { |
|||
this.openedSubmenu = this.router.url |
|||
} |
|||
|
|||
openedSubmenu = '' |
|||
|
|||
ngOnInit(): void {} |
|||
|
|||
onMenuOpenChange(open: boolean) { |
|||
this.openedSubmenu = open ? this.router.url : '' |
|||
} |
|||
} |
|||
@ -0,0 +1,44 @@ |
|||
<app-page> |
|||
<div class="flex-1 overflow-hidden"> |
|||
<app-server-paginated-table [options]="table" [formGroup]="queryForm" [renderColumn]="renderColumnTpl"> |
|||
<ng-template #renderColumnTpl let-data let-key="key" let-row="row"> |
|||
@switch (key) { |
|||
@case ('_useUser') { |
|||
{{ data?.userName ?? '-' }} |
|||
} |
|||
@case ('_warehouse') { |
|||
{{ data?.name ?? '-' }} |
|||
} |
|||
@case ('_position') { |
|||
{{ data?.name ?? '-' }} |
|||
} |
|||
@case ('_head') { |
|||
{{ data?.userName ?? '-' }} |
|||
} |
|||
@case ('_ownCompany') { |
|||
{{ data?.organizationName ?? '-' }} |
|||
} |
|||
@case ('_useOrganization') { |
|||
{{ data?.organizationName ?? '-' }} |
|||
} |
|||
@case ('_category') { |
|||
{{ data?.categoryName ?? '-' }} |
|||
} |
|||
@default { |
|||
{{ data }} |
|||
} |
|||
} |
|||
</ng-template> |
|||
<ng-container *appTableAction> |
|||
<nz-space> |
|||
<button *nzSpaceItem nz-button nzType="link" nzDanger="">删除</button> |
|||
</nz-space> |
|||
</ng-container> |
|||
<ng-container *appTableForm> |
|||
<app-query-item label="内容"> |
|||
<input nz-input placeholder="请输入" formControlName="logContent" /> |
|||
</app-query-item> |
|||
</ng-container> |
|||
</app-server-paginated-table> |
|||
</div> |
|||
</app-page> |
|||
@ -0,0 +1,56 @@ |
|||
import { Component, TemplateRef, ViewChild } from '@angular/core' |
|||
import { FormControl, FormGroup } from '@angular/forms' |
|||
|
|||
import { AnyObject, TableOption } from 'app/shared/components/server-paginated-table' |
|||
import { ApiService } from 'app/services' |
|||
import { SharedModule } from 'app/shared/shared.module' |
|||
import { format } from 'date-fns' |
|||
import { lastValueFrom, of } from 'rxjs' |
|||
import { NzSafeAny } from 'ng-zorro-antd/core/types' |
|||
import { NzModalService } from 'ng-zorro-antd/modal' |
|||
import { NzMessageService } from 'ng-zorro-antd/message' |
|||
import { BUSINESS_STATUS_MAP } from 'app/constants' |
|||
import { FormValidators } from 'app/utils' |
|||
|
|||
@Component({ |
|||
selector: 'app-alert-borrow', |
|||
standalone: true, |
|||
imports: [SharedModule], |
|||
templateUrl: './system-log.component.html', |
|||
styleUrl: './system-log.component.less', |
|||
}) |
|||
export class SystemLogComponent { |
|||
constructor( |
|||
private api: ApiService, |
|||
private modal: NzModalService, |
|||
private msg: NzMessageService, |
|||
) {} |
|||
|
|||
@ViewChild('createFormTpl') createFormTpl!: TemplateRef<{}> |
|||
|
|||
queryForm = new FormGroup({ |
|||
logContent: new FormControl(''), |
|||
logType: new FormControl(''), |
|||
createTime: new FormControl(''), |
|||
}) |
|||
|
|||
table = new TableOption(this.fetchData.bind(this)) |
|||
|
|||
ngOnInit(): void { |
|||
this.table |
|||
// .setConfig({
|
|||
// selectable: true,
|
|||
// rowKey: 'id',
|
|||
// })
|
|||
.setColumn([ |
|||
{ key: 'logId', title: '序号', visible: true }, |
|||
{ key: 'createTime', title: '时间', visible: true }, |
|||
{ key: 'logType', title: '类型', visible: true }, |
|||
{ key: 'logContent', title: '内容', visible: true }, |
|||
]) |
|||
} |
|||
|
|||
fetchData(p: {}, q: AnyObject) { |
|||
return this.api.getSysLog({ ...p, ...q }) |
|||
} |
|||
} |
|||
@ -1,33 +1,51 @@ |
|||
@if (drag) { |
|||
<div |
|||
class="dropUpload flex justify-center items-center h-full" |
|||
(drop)="handleDrop($event)" |
|||
(dragover)="suppress($event)" |
|||
(dragenter)="suppress($event)" |
|||
> |
|||
<input type="file" id="file" (change)="onFileChange($event)" /> |
|||
<div class="flex flex-col items-center"> |
|||
<i nz-icon nzType="cloud-upload" class="text-5xl mb-2"></i> |
|||
<div>{{ placeholder }}</div> |
|||
@if (!disabled) { |
|||
@if (drag) { |
|||
<div |
|||
class="dropUpload flex justify-center items-center h-full" |
|||
(drop)="handleDrop($event)" |
|||
(dragover)="suppress($event)" |
|||
(dragenter)="suppress($event)" |
|||
> |
|||
<input type="file" id="file" (change)="onFileChange($event)" /> |
|||
<div class="flex flex-col items-center"> |
|||
<i nz-icon nzType="cloud-upload" class="text-5xl mb-2"></i> |
|||
<div>{{ placeholder }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
} @else { |
|||
<button nz-button class="upload-btn"> |
|||
<i nz-icon nzType="upload"></i> |
|||
{{ placeholder }} |
|||
<input type="file" (change)="onFileChange($event)" /> |
|||
</button> |
|||
} @else { |
|||
<button nz-button class="upload-btn"> |
|||
<i nz-icon nzType="upload"></i> |
|||
{{ placeholder }} |
|||
<input type="file" (change)="onFileChange($event)" /> |
|||
</button> |
|||
} |
|||
} |
|||
@if (preview) { |
|||
<ul class="mt-2"> |
|||
<li> |
|||
<nz-card [nzBordered]="true" nzSize="small"> |
|||
<div class="flex"> |
|||
<div> |
|||
<a class="flex items-center" [href]="preview.url" target="_blank"> |
|||
<div class="w-16 h-16 overflow-hidden flex-shrink-0 flex items-center justify-center"> |
|||
@if (isImage(preview.name)) { |
|||
<img class="h-full object-cover" [src]="preview.url" /> |
|||
} @else { |
|||
<i nz-icon nzType="file" class="text-4xl"></i> |
|||
} |
|||
</div> |
|||
<div class="flex-1 pl-2"> |
|||
<div>{{ preview.name || preview.url }}</div> |
|||
</div> |
|||
</div> |
|||
<div class="flex-shrink-0"> |
|||
<a (click)="remove()"> |
|||
<i nz-icon nzType="delete"></i> |
|||
</a> |
|||
</div> |
|||
</a> |
|||
</nz-card> |
|||
</li> |
|||
</ul> |
|||
} @else { |
|||
@if (disabled) { |
|||
<nz-empty></nz-empty> |
|||
} |
|||
} |
|||
|
|||
Loading…
Reference in new issue