我正在使用扩展表组件来显示在特定商店工作的服务员的列表。我需要做两件事:
1)我需要在最后一位服务员下插入新行,以对每个服务员的总列求和(请参见所附的屏幕截图)。
2)我需要计算运行总计,这类似于我想像的当前+以前的值。
这是我到目前为止的内容:
store-totals.list.view.html
<div class="page-section-header">
<h1 class="list-title">Store Tender Totals</h1>
</div>
<act-search-box
default-type="attendant"
search="vm.search"
type="vm.type"
placeholder="Enter a Store ID"
type-options="[
{ label: 'Terminal', value : 'terminal' },
{ label: 'Total', value: 'total' },
{ label: 'Attendant', value: 'attendant' }
]"
on-search="vm.getAttendants()">
</act-search-box>
<div class="page-section-below-search-box single-width" style="width:27%;">
<span style="float:left;margin-top:2.2%;font-size:14px;">Showing totals for</span>
<act-date-picker model="vm.date" placeholder="Select a date" on-change="vm.getAttendants()">
</act-date-picker>
</div>
<act-expanding-table
list="vm.attendantNames"
ng-hide="vm.emptyResult"
properties="[
{ type: 'attendantName', size: 2, label: 'Attendant Name'},
{ type: 'total', size: 2, label: 'Total', format:'currency'},
{ type: 'runningTotal', size:2, label: 'Running Total', format:'currency'}
]"
allow-selecting="true">
<div>
<div class="col-xs-12 form-section-header">
<h4>Tender Totals</h4>
</act-expanding-table>
<act-error-message ng-show="vm.errorMessage">{{ vm.errorMessage }}</act-error-message>
store-totals-list.controller.js
import { digest, showLoader } from 'act/services/events';
import 'act/components';
import Searcher from 'act/services/lists/searcher';
import * as moment from 'moment';
import * as api from '../services/totals';
import {header, dev} from 'act/services/logger';
import {goToError} from 'act/services/controller-helpers';
import '../components/store-total';
const defaultStartDate = moment().startOf('day');
export default class StoreTotalsController {
constructor() {
this.attendantNames = [];
this.stores = [];
this.emptyResult = true;
this.totals = 0;
}
getAttendants() {
showLoader('Searching');
const baseUrl = '/src/areas/store-totals/services/tender-total-data.json';
const getStores = new Request(baseUrl, {
method: 'GET'
});
fetch(getStores).then(function(response){
return response.json();
}).then(resp => {
if (!(resp[0] && resp[0].error)) {
this.attendantNames = resp.stores[0].attendants;
this.attendantNames.forEach(a=>{
this.totals += a.total;
console.log(this.totals);
})
this.emptyResult = false;
this.errorMessage = null;
} else {
this.errorMessage = resp[0].error.name;
}
digest();
showLoader(false);
});
}
searchIfReady() {
if (this.search && this.date && this.date.isValid()) {
this.getSearch();
}
}
updateDate(date) {
this.date = moment(date).startOf('day');
this.searchIfReady();
}
}
StoreTotalsController.$inject = ['$stateParams'];