Переделан дизайн документа списания на одноколоночный layout
- Убрана правая боковая панель с формой - Перенесён поиск товаров и форма в центральную карточку 'Добавить позицию в документ' - Форма теперь располагается горизонтально под поиском - Кнопка изменена на явную: 'Добавить в документ' с иконкой check-circle - Добавлена подсказка об использовании поиска - Улучшена визуальная иерархия: информация о документе → добавление позиции → таблица позиций - Более простой и понятный UX для пользователей
This commit is contained in:
@@ -27,8 +27,9 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<div class="row g-3">
|
<div class="row g-3">
|
||||||
<!-- Основная информация -->
|
<!-- Основной контент - одна колонка -->
|
||||||
<div class="col-lg-8">
|
<div class="col-12">
|
||||||
|
<!-- Информация о документе -->
|
||||||
<div class="card border-0 shadow-sm mb-3">
|
<div class="card border-0 shadow-sm mb-3">
|
||||||
<div class="card-header bg-light py-3 d-flex justify-content-between align-items-center">
|
<div class="card-header bg-light py-3 d-flex justify-content-between align-items-center">
|
||||||
<h5 class="mb-0">
|
<h5 class="mb-0">
|
||||||
@@ -96,6 +97,77 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Добавление позиции -->
|
||||||
|
{% if document.can_edit %}
|
||||||
|
<div class="card border-0 shadow-sm mb-3">
|
||||||
|
<div class="card-header bg-light py-3">
|
||||||
|
<h6 class="mb-0"><i class="bi bi-plus-square me-2"></i>Добавить позицию в документ</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<!-- Компонент поиска товаров -->
|
||||||
|
<div class="mb-3">
|
||||||
|
{% include 'products/components/product_search_picker.html' with container_id='writeoff-document-picker' title='Найти товар для списания' warehouse_id=document.warehouse.id filter_in_stock_only=True categories=categories tags=tags add_button_text='Выбрать товар' multi_select=False show_select_all=False content_height='250px' %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Информация о выбранном товаре -->
|
||||||
|
<div id="selected-product-info" class="alert alert-info mb-3" style="display: none;">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<img id="selected-product-photo" src="" alt="" class="rounded me-2" style="width: 50px; height: 50px; object-fit: cover; display: none;">
|
||||||
|
<div class="flex-grow-1">
|
||||||
|
<strong id="selected-product-name" class="d-block"></strong>
|
||||||
|
<small class="text-muted" id="selected-product-sku"></small>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn btn-sm btn-outline-secondary" id="clear-selected-product" title="Очистить">
|
||||||
|
<i class="bi bi-x"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Форма добавления позиции -->
|
||||||
|
<form method="post" action="{% url 'inventory:writeoff-document-add-item' document.pk %}" id="add-item-form">
|
||||||
|
{% csrf_token %}
|
||||||
|
|
||||||
|
<div class="row g-3">
|
||||||
|
<div class="col-md-3">
|
||||||
|
<label for="id_product" class="form-label">Товар <span class="text-danger">*</span></label>
|
||||||
|
{{ item_form.product }}
|
||||||
|
{% if item_form.product.errors %}
|
||||||
|
<div class="text-danger small">{{ item_form.product.errors.0 }}</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-2">
|
||||||
|
<label for="id_quantity" class="form-label">Количество <span class="text-danger">*</span></label>
|
||||||
|
{{ item_form.quantity }}
|
||||||
|
{% if item_form.quantity.errors %}
|
||||||
|
<div class="text-danger small">{{ item_form.quantity.errors.0 }}</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-3">
|
||||||
|
<label for="id_reason" class="form-label">Причина</label>
|
||||||
|
{{ item_form.reason }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-4">
|
||||||
|
<label for="id_notes" class="form-label">Примечания</label>
|
||||||
|
{{ item_form.notes }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-3">
|
||||||
|
<button type="submit" class="btn btn-primary">
|
||||||
|
<i class="bi bi-check-circle me-1"></i>Добавить в документ
|
||||||
|
</button>
|
||||||
|
<small class="text-muted ms-3">
|
||||||
|
<i class="bi bi-info-circle"></i> Используйте поиск выше для быстрого выбора товара
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
<!-- Таблица позиций -->
|
<!-- Таблица позиций -->
|
||||||
<div class="card border-0 shadow-sm">
|
<div class="card border-0 shadow-sm">
|
||||||
<div class="card-header bg-light py-3">
|
<div class="card-header bg-light py-3">
|
||||||
@@ -162,75 +234,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Боковая панель: добавление позиции -->
|
|
||||||
{% if document.can_edit %}
|
|
||||||
<div class="col-lg-4">
|
|
||||||
<!-- Компонент поиска товаров -->
|
|
||||||
<div class="mb-3">
|
|
||||||
{% include 'products/components/product_search_picker.html' with container_id='writeoff-document-picker' title='Поиск товара для списания' warehouse_id=document.warehouse.id filter_in_stock_only=True categories=categories tags=tags add_button_text='Выбрать товар' multi_select=False show_select_all=False content_height='300px' %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Форма добавления позиции -->
|
|
||||||
<div class="card border-0 shadow-sm sticky-top" style="top: 1rem;">
|
|
||||||
<div class="card-header bg-light py-3">
|
|
||||||
<h6 class="mb-0"><i class="bi bi-plus-circle me-2"></i>Добавить товар</h6>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<!-- Информация о выбранном товаре -->
|
|
||||||
<div id="selected-product-info" class="alert alert-info mb-3" style="display: none;">
|
|
||||||
<div class="d-flex align-items-center">
|
|
||||||
<img id="selected-product-photo" src="" alt="" class="rounded me-2" style="width: 40px; height: 40px; object-fit: cover; display: none;">
|
|
||||||
<div class="flex-grow-1">
|
|
||||||
<strong id="selected-product-name" class="d-block"></strong>
|
|
||||||
<small class="text-muted" id="selected-product-sku"></small>
|
|
||||||
</div>
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary" id="clear-selected-product" title="Очистить">
|
|
||||||
<i class="bi bi-x"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form method="post" action="{% url 'inventory:writeoff-document-add-item' document.pk %}" id="add-item-form">
|
|
||||||
{% csrf_token %}
|
|
||||||
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="id_product" class="form-label">Товар <span class="text-danger">*</span></label>
|
|
||||||
{{ item_form.product }}
|
|
||||||
{% if item_form.product.errors %}
|
|
||||||
<div class="text-danger small">{{ item_form.product.errors.0 }}</div>
|
|
||||||
{% endif %}
|
|
||||||
<small class="text-muted d-block mt-1">
|
|
||||||
<i class="bi bi-info-circle"></i> Используйте поиск выше для удобного выбора
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="id_quantity" class="form-label">Количество <span class="text-danger">*</span></label>
|
|
||||||
{{ item_form.quantity }}
|
|
||||||
{% if item_form.quantity.errors %}
|
|
||||||
<div class="text-danger small">{{ item_form.quantity.errors.0 }}</div>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="id_reason" class="form-label">Причина</label>
|
|
||||||
{{ item_form.reason }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="id_notes" class="form-label">Примечания</label>
|
|
||||||
{{ item_form.notes }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="submit" class="btn btn-primary w-100">
|
|
||||||
<i class="bi bi-plus-lg me-1"></i>Добавить
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user