bixi
Version:
企业级中后台前端解决方案
115 lines (113 loc) • 5.72 kB
HTML
<form nz-form [formGroup]="form">
<nz-table #editRowTable [nzData]="_rows" [nzFrontPagination]="false" [nzShowPagination]="false"
nzSize="small" [nzScroll]="{ y: scroll.y }" nzTableLayout="fixed" nzEllipsis>
<thead>
<tr>
<th *ngFor="let col of cols">
{{col.name}}
<i *ngIf="col.titleTipContent" nz-icon
[nzType]="col.titleTipIcon ? col.titleTipIcon : 'question-circle'" nzTheme="outline"
nz-tooltip [nzTooltipTitle]="col.titleTipContent"></i>
</th>
<th nzWidth="150px">{{editTranstions.options}}</th>
</tr>
</thead>
<tbody cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListData]="_rows">
<ng-container *ngFor="let row of editRowTable.data; index as index">
<tr class="bixi-editable-row" cdkDrag [cdkDragDisabled]="!dragable || isEditing"
[cdkDragPreviewClass]="['bixi-editable-row-preview']">
<ng-container *ngFor="let col of cols">
<td *ngIf="(col.editable !== false); else normalCol">
<div class="bixi-editable-cell" *ngIf="editRowIndex !== index; else editTD">
<span class="bixi-ellipsis" nz-tooltip [nzTooltipTitle]="row[col.key]">
<ng-container *ngIf="col.type !== 'select'; else selectText">
{{row[col.key]}}
</ng-container>
<ng-template #selectText>
<ng-container *ngIf="col.options | async as options">
{{getSelectOptionName(options, row[col.key])}}
</ng-container>
</ng-template>
</span>
</div>
<ng-template #editTD>
<div class="bixi-editable-active">
<nz-form-item>
<nz-form-control [ngSwitch]="col.type">
<ng-container *ngSwitchCase="'select'">
<nz-select #editContent [formControlName]="col.key"
[nzPlaceHolder]="editTranstions.input"
(ngModelChange)="onChange($event, col.key)">
<nz-option *ngFor="let option of col.options | async"
[nzValue]="option.value" [nzLabel]="option.name">
</nz-option>
</nz-select>
</ng-container>
<ng-container *ngSwitchCase="'template'">
<input type="text" nz-input class="template-agent-input"
[value]="row[col.key]" [formControlName]="col.key">
<editable-col-template [row]="editRow" [col]="col" [formGroup]="form">
</editable-col-template>
</ng-container>
<ng-container *ngSwitchDefault>
<nz-input-group>
<nz-input-group [nzSuffix]="suffixIconClear">
<input type="text" nz-input [(ngModel)]="row[col.key]" #editContent
[formControlName]="col.key"
(ngModelChange)="onChange($event, col.key)">
</nz-input-group>
<ng-template #suffixIconClear>
<span (click)="onClear(editContent, col.key)" class="bixi-input-btn">
<i nz-icon nzType="close-circle" nzTheme="fill"></i>
</span>
</ng-template>
</nz-input-group>
</ng-container>
</nz-form-control>
</nz-form-item>
</div>
</ng-template>
</td>
<ng-template #normalCol>
<td>
<div class="bixi-normal-cell">
<span class="bixi-ellipsis" nz-tooltip [nzTooltipTitle]="row[col.key]">
{{ row[col.key] }}
</span>
</div>
</td>
</ng-template>
</ng-container>
<td class="bixi-table-actions">
<ng-container *ngIf="editRowIndex === index">
<span class="bixi-action-btn" [class.bixi-editable-disable]="!editDirty"
(click)="onConfirm()">{{editTranstions.save}}</span>
<span class="bixi-action-btn" (click)="onCancel()">{{editTranstions.cancel}}</span>
</ng-container>
<ng-container *ngIf="editRowIndex !== index">
<span class="bixi-action-btn" [hidden]="editRowIndex === index"
[class.bixi-editable-disable]="isEditing"
(click)="startEdit(row, index)">{{editTranstions.edit}}</span>
<span class="bixi-action-btn" [hidden]="editRowIndex === index" nz-popconfirm
[class.bixi-editable-disable]="isEditing"
[nzPopconfirmTitle]="editTranstions.deleteConfirm" nzPopconfirmPlacement="bottom"
(nzOnConfirm)="onDelete(index)">{{editTranstions.delete}}</span>
</ng-container>
</td>
</tr>
</ng-container>
</tbody>
</nz-table>
</form>
<div class="bixi-editable-footer" *ngIf="(footer !== null)" (click)="onAddRow()"
[class.bixi-editable-disable]="isEditing">
<ng-container *ngIf="footer; else defaultFooter">
<ng-template *nzStringTemplateOutlet="footer"></ng-template>
</ng-container>
<ng-template #defaultFooter>
<div class="bixi-editable-add-btn" [class.bixi-editable-disable]="isEditing">
<i nz-icon nzType="plus" nzTheme="outline"></i>
{{addText}}
</div>
</ng-template>
</div>