html
<nz-table #colSpanTable [nzData]="data" nzBordered [nzShowPagination]="false" [nzFrontPagination]="false" [nzScroll]="{ x: '1200px', y: '500px' }">
<thead>
<tr>
<th nzLeft nzWidth="100px">序号</th>
<th nzLeft nzWidth="150px">大区</th>
<th nzWidth="150px">风场</th>
<th nzWidth="150px">机型</th>
<th nzWidth="150px">机位</th>
<th nzWidth="150px">维护项</th>
<th nzWidth="180px">耗品物料编码</th>
<th nzWidth="180px">耗品物料描述</th>
<th nzWidth="150px">耗品型号</th>
<th nzWidth="150px">单车用量/年</th>
<th nzWidth="150px">单位</th>
<th nzWidth="150px">创建人</th>
<th nzWidth="150px">更新人</th>
<th nzWidth="180px">更新时间</th>
<th nzWidth="180px">创建时间</th>
<!-- <th nzWidth="180px" *ngFor="let column of tableColumnItems">
{{column.title}}
</th> -->
<th nzRight nzWidth="100px">操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of colSpanTable.data; index as i">
<td nzLeft>{{i + 1}}</td>
<!-- <td [rowspan]="data.count" >{{data.fanModel}}</td> -->
<!-- <td*ngFor="let column of tableColumnItems" title="{{data[column.field]}}">
<div class="content">{{data[column.field]}}</div>
</td> -->
<td nzLeft [attr.rowspan]="data.wfFarmRegionNumber" *ngIf="data.wfFarmRegionNumber">{{data.wfFarmRegion}}</td>
<td [attr.rowspan]="data.wfFarmNameNumber" *ngIf="data.wfFarmNameNumber">{{data.wfFarmName}}</td>
<td [attr.rowspan]="data.fanModelNumber" *ngIf="data.fanModelNumber">{{data.fanModel}}</td>
<td [attr.rowspan]="data.fanSeatStrNumber" *ngIf="data.fanSeatStrNumber">{{data.fanSeatStr}}</td>
<td>{{data.maintenanceItem}}</td>
<td>{{data.materialCode}}</td>
<td>{{data.materialDescription}}</td>
<td>{{data.materialModel}}</td>
<td>{{data.costYear}}</td>
<td>{{data.unit}}</td>
<td>{{data.createUserNickName}}</td>
<td>{{data.updateUserNickName}}</td>
<td>{{data.updateTime | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
<td>{{data.createTime | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
<td nzRight>
<span nz-popconfirm
nzPopconfirmTitle="是否确认删除?"
nzPopconfirmPlacement="top"
(nzOnConfirm)="del(data)" style="color: #329DFF; font-size:12px;cursor: pointer;">删除</span>
</td>
</tr>
</tbody>
</nz-table>
ts
searchAction = (params): Observable<any> => {
return this.dataSrv.search({...params}).pipe(
tap((res) => {
if(res['data']) {
let arr = []
arr = this.handleSpan(res.data, 'wfFarmRegion','wfFarmRegionNumber');
arr = this.handleSpan(res.data, 'wfFarmName','wfFarmNameNumber');
arr = this.handleSpan(res.data, 'fanModel','fanModelNumber');
arr = this.handleSpan(res.data, 'fanSeatStr','fanSeatStrNumber');
this.data = arr
console.log(res.data,'列表数据')
}
})
);
};
handleSpan(result,name,type) {
result.forEach((ele) => {
if(type == 'wfFarmRegionNumber') {
ele.wfFarmRegionNumber = 1
}else if(type == 'wfFarmNameNumber'){
ele.wfFarmNameNumber = 1
}else if ( type == 'fanModelNumber') {
ele.fanModelNumber = 1
}else if (type == 'fanSeatStrNumber') {
ele.fanSeatStrNumber = 1
}
});
for (let i = 0; i < result.length; i++) {
const element = result[i];
for (let j = i + 1; j < result.length; j++) {
if (element[name]=== result[j][name]) {
if(type == 'wfFarmRegionNumber') {
element.wfFarmRegionNumber++;
result[j].wfFarmRegionNumber = 0;
} else if(type == 'wfFarmNameNumber') {
element.wfFarmNameNumber++;
result[j].wfFarmNameNumber = 0;
}else if(type == 'fanModelNumber') {
element.fanModelNumber++;
result[j].fanModelNumber = 0;
}else if (type == 'fanSeatStrNumber') {
element.fanSeatStrNumber++;
result[j].fanSeatStrNumber = 0;
}
if(j==result.length-1){
return result;
}
} else {
i = j - 1;
break;
}
}
}
return result;
}
del(item) {
this.appListPage.loading = true;
let params = {
wfFarmSheId: item.wfFarmSheId,
maintenanceItemDictSheId: item.maintenanceItemDictSheId,
mdMaterialSheId: item.mdMaterialSheId,
fanSeatStr: item.fanSeatStr
}
this.dataSrv.delete(params).pipe(
finalize(() => this.appListPage.loading = false),
).subscribe((res) => {
if (res && res['success']) {
this._message.success('删除成功~');
this.appListPage.search();
}
});
}