|
Сообщение от vandalv
|
|
как цену, общую стоимость, количество, товары отдельными полями добавить
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>
<style>
table {
border-collapse: collapse;
border: 1px solid gray;
}
td {
border: 1px solid gray;
padding: 2px 5px;
text-align: center;
}
table td[colspan='2'] {
padding: 0;
box-sizing: border-box;
}
table table {
width: 100%;
}
table table td:last-child {
text-align: right;
}
table table tr:last-child td:last-child {
color: #ff0000;
}
</style>
</head>
<body>
<div id="grid-holder"></div>
<script type="text/template" id="grid-template">
<table>
<thead>
<tr>
<th>№</th>
<th>дата</th>
</tr>
</thead>
<tbody>
<% for(var i = 0; i < list.length; i++) { %>
<tr><td>
<%=i + 1%>
</td>
<td>
<%=new Date(list[i].data).toLocaleDateString()%>
</td>
</tr>
<tr><td colspan=2>
<table>
<thead>
<tr>
<th>артикул</th>
<th>название</th>
<th>цена</th>
<th>количество</th>
<th>сумма</th>
</tr>
</thead>
<tbody>
<% for(var k = 0; k < list[i].produkt.length; k++) { %>
<tr>
<td>
<%=list[i].produkt[k].num%>
</td>
<td>
<%=list[i].produkt[k].name%>
</td>
<td>
<%=list[i].produkt[k].price%>
</td>
<td>
<%=list[i].produkt[k].count%>
</td>
<td>
<%=(list[i].produkt[k].price * list[i].produkt[k].count).toFixed(2)%>
</td>
</tr>
<% } %>
<tr>
<td colspan = 4>
всего
</td>
<td>
<%=list[i].total%>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<% } %>
</td></tr>
</tbody>
</table>
</script>
<script>
function randomValueBetween(min, max) {
return Math.random() * (max - min) + min;
}
function randomDate(
date1 = '01-01-2017',
date2 = new Date().toLocaleDateString()
) {
date1 = new Date(date1).getTime();
date2 = new Date(date2).getTime();
return randomValueBetween(date2, date1);
}
function getElem(arr) {
return arr[randomValueBetween(0, arr.length) | 0];
}
var vegString = [
'Apple',
'Apricots',
'Avocado',
'Banana',
'Blackberries',
];
var bases = Array.from({ length: 10 }, _ => {
var total = 0,
produkt = Array.from({ length: 5 }, _ => {
var num = randomValueBetween(100, 999) | 0,
name = getElem(vegString),
price = randomValueBetween(1, 100).toFixed(2),
count = randomValueBetween(1, 100) | 0;
total += price * count;
return { num, name, price, count };
}),
data = randomDate();
total = total.toFixed(2);
return { data, total, produkt };
});
var tmpl = document.getElementById('grid-template').innerHTML.trim();
tmpl = _.template(tmpl);
function appendTable(list) {
document
.getElementById('grid-holder')
.insertAdjacentHTML('beforeEnd', tmpl({ list }));
}
function appendTitle(txt) {
document
.getElementById('grid-holder')
.insertAdjacentHTML('beforeEnd', `<h1>${txt}</h1>`);
}
appendTitle('исходный массив фактур');
appendTable(bases);
appendTitle('5 фактур по найбольшей стоимости');
var sortTotal = bases
.slice(0)
.sort((a, b) => a.total - b.total)
.slice(-5);
appendTable(sortTotal);
appendTitle('фактуры по возрастанию стоимости, в которых есть Avocado');
var filterAvocadoSortTotal = bases
.filter(base => base.produkt.some(el => el.name == 'Avocado'))
.sort((a, b) => a.total - b.total);
appendTable(filterAvocadoSortTotal);
appendTitle('фактуры за 2018 год, по возрастанию даты');
var filterDataSort = bases
.filter(base => new Date(base.data).getFullYear() == 2018)
.sort((a, b) => a.data - b.data);
appendTable(filterDataSort);
appendTitle('фактуры за первые полгода 2019 год, по возрастанию даты');
var dataStart = new Date(2019, 0, 1, 0, 0, 0, 0),
dataEnd = new Date(2019, 6, 0, 0, 0, 0, 0);
var filter2019Sort = bases
.filter(base => base.data >= dataStart && base.data <= dataEnd)
.sort((a, b) => a.data - b.data);
appendTable(filter2019Sort);
appendTitle(
'3 фактуры с минимальной суммой и сортировкой товара по названию'
);
var filterMinSortName = bases
.slice(0)
.sort((a, b) => a.total - b.total)
.slice(0, 3);
var collator = new Intl.Collator(['en', 'ru'], { numeric: true });
filterMinSortName.forEach(
base =>
(base.produkt = base.produkt
.slice(0)
.sort((a, b) => collator.compare(a.name, b.name)))
);
appendTable(filterMinSortName);
appendTitle(
'3 фактуры с минимальной общей суммой и сортировкой товара по сумме'
);
var filterMinSortAmount = bases
.slice(0)
.sort((a, b) => a.total - b.total)
.slice(0, 3);
filterMinSortAmount.forEach(
base =>
(base.produkt = base.produkt
.slice(0)
.sort((a, b) =>
(a.price * a.count - b.price * b.count)
))
);
appendTable(filterMinSortAmount);
</script>
</body>
</html>