130 lines
5.0 KiB
Plaintext
130 lines
5.0 KiB
Plaintext
@using Contracts.ViewModels
|
|
|
|
@model ProductViewModel;
|
|
|
|
@{
|
|
ViewData["Title"] = "CreateProduct";
|
|
ViewBag.Details = Model.DetailProducts;
|
|
}
|
|
<div class="text-center">
|
|
<h2 class="display-4">Создание изделия</h2>
|
|
</div>
|
|
<form method="post">
|
|
<div class="row">
|
|
<div class="col-4">Название:</div>
|
|
<div class="col-8"><input type="text" name="title" id="title" /></div>
|
|
</div>
|
|
<div class="container">
|
|
<div>Детали</div>
|
|
<div class="table-responsive-lg">
|
|
<table id="detailsTable" class="display">
|
|
<thead>
|
|
<tr>
|
|
<th>Название</th>
|
|
<th>Количество</th>
|
|
<th>Стоимость</th>
|
|
<th>Удалить</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach (var detail in ViewBag.Details)
|
|
{
|
|
<tr data-detail-id="@detail.Value.Item1.Id">
|
|
<td>
|
|
<input type="hidden" name="detailIds" value="@detail.Key" />
|
|
@detail.Value.Item1.Name
|
|
</td>
|
|
<td>
|
|
<input type="number" name="counts" value="@detail.Value.Item2" min="0" class="form-control detail-count" data-cost="@detail.Value.Item1.Cost" />
|
|
</td>
|
|
<td>@detail.Value.Item1.Cost</td>
|
|
<td>
|
|
<button type="button" class="deleteDetail" data-detail-id="@detail.Value.Item1.Id">Удалить</button>
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<select id="detailSelect" class="form-control">
|
|
<option value="">Выберите деталь</option>
|
|
@foreach (var detail in ViewBag.AllDetails)
|
|
{
|
|
<option value="@detail.Id" data-cost="@detail.Cost">@detail.Name</option>
|
|
}
|
|
</select>
|
|
<button type="button" id="addDetail" class="btn btn-secondary">Добавить деталь</button>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4">Сумма:</div>
|
|
<div class="col-8"><input type="text" id="sum" name="sum" readonly /></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-8"></div>
|
|
<div class="col-4"><input type="submit" value="Сохранить" class="btn btn-primary" /></div>
|
|
</div>
|
|
</form>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js"></script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
function updateSum() {
|
|
var sum = 0;
|
|
$('#detailsTable tbody tr').each(function () {
|
|
var count = $(this).find('input[name="counts"]').val();
|
|
var cost = $(this).find('input[name="counts"]').data('cost');
|
|
sum += count * cost;
|
|
});
|
|
$('#sum').val(sum.toFixed(2));
|
|
}
|
|
|
|
$('.deleteDetail').click(function () {
|
|
var row = $(this).closest('tr');
|
|
row.remove();
|
|
updateSum();
|
|
});
|
|
|
|
$(document).on('change', '.detail-count', function () {
|
|
updateSum();
|
|
});
|
|
|
|
$('#addDetail').click(function () {
|
|
var selectedDetail = $('#detailSelect option:selected');
|
|
if (selectedDetail.val()) {
|
|
var detailId = selectedDetail.val();
|
|
var detailName = selectedDetail.text();
|
|
var detailCost = selectedDetail.data('cost');
|
|
|
|
var newRow = `
|
|
<tr data-detail-id="${detailId}">
|
|
<td>
|
|
<input type="hidden" name="detailIds" value="${detailId}" />
|
|
${detailName}
|
|
</td>
|
|
<td><input type="number" name="counts" value="0" min="0" class="form-control detail-count" data-cost="${detailCost}" /></td>
|
|
<td>${detailCost}</td>
|
|
<td><button type="button" class="deleteDetail" data-detail-id="${detailId}">Удалить</button></td>
|
|
</tr>
|
|
`;
|
|
$('#detailsTable tbody').append(newRow);
|
|
|
|
$('.deleteDetail').off('click').on('click', function () {
|
|
var row = $(this).closest('tr');
|
|
row.remove();
|
|
updateSum();
|
|
});
|
|
|
|
$('.detail-count').off('change').on('change', function () {
|
|
updateSum();
|
|
});
|
|
|
|
$('#detailSelect').val('');
|
|
} else {
|
|
alert('Выберите деталь для добавления');
|
|
}
|
|
});
|
|
updateSum();
|
|
});
|
|
</script>
|