| | | 1 | | @model OzonOrdersWeb.Areas.Studio2.ViewModels.MultipleTransactionPagesViewModel |
| | | 2 | | |
| | | 3 | | @{ |
| | 0 | 4 | | ViewData["Title"] = "Страницы по складам"; |
| | 0 | 5 | | var initialOneCOperationDate = Model.OneCOperationDate.ToString("yyyy-MM-ddTHH:mm"); |
| | 0 | 6 | | var displayOneCOperationDate = Model.OneCOperationDate.ToString("dd.MM.yyyy HH:mm"); |
| | | 7 | | } |
| | | 8 | | |
| | | 9 | | <style> |
| | | 10 | | .transaction-date-panel { |
| | | 11 | | border: 1px solid #d7e3f4; |
| | | 12 | | border-radius: 1rem; |
| | | 13 | | padding: 1rem 1.25rem; |
| | | 14 | | background: linear-gradient(135deg, #f7fbff, #eef5ff 55%, #ffffff); |
| | | 15 | | box-shadow: 0 0.55rem 1.3rem rgba(13, 110, 253, 0.08); |
| | | 16 | | } |
| | | 17 | | |
| | | 18 | | .transaction-date-panel-label { |
| | | 19 | | font-size: 0.8rem; |
| | | 20 | | font-weight: 700; |
| | | 21 | | letter-spacing: 0.08em; |
| | | 22 | | text-transform: uppercase; |
| | | 23 | | color: #0d6efd; |
| | | 24 | | } |
| | | 25 | | |
| | | 26 | | .transaction-date-panel-value { |
| | | 27 | | font-size: 1.05rem; |
| | | 28 | | font-weight: 700; |
| | | 29 | | color: #1f2a37; |
| | | 30 | | } |
| | | 31 | | |
| | | 32 | | .transaction-date-panel-note { |
| | | 33 | | color: #5c6b7a; |
| | | 34 | | } |
| | | 35 | | |
| | | 36 | | .warehouse-groups-grid { |
| | | 37 | | display: grid; |
| | | 38 | | grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
| | | 39 | | gap: 1rem; |
| | | 40 | | } |
| | | 41 | | |
| | | 42 | | .warehouse-group-card { |
| | | 43 | | border: 1px solid #dee2e6; |
| | | 44 | | border-radius: 1rem; |
| | | 45 | | padding: 0.85rem; |
| | | 46 | | background: linear-gradient(180deg, #fff, #f8f9fa); |
| | | 47 | | box-shadow: 0 0.45rem 1.1rem rgba(0, 0, 0, 0.06); |
| | | 48 | | transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; |
| | | 49 | | color: #212529; |
| | | 50 | | } |
| | | 51 | | |
| | | 52 | | .warehouse-group-card * { |
| | | 53 | | color: inherit; |
| | | 54 | | } |
| | | 55 | | |
| | | 56 | | .warehouse-group-card:hover { |
| | | 57 | | transform: translateY(-2px); |
| | | 58 | | box-shadow: 0 0.7rem 1.4rem rgba(0, 0, 0, 0.08); |
| | | 59 | | } |
| | | 60 | | |
| | | 61 | | .warehouse-group-card.is-warning { |
| | | 62 | | border-color: #f0ad4e; |
| | | 63 | | background: linear-gradient(180deg, #fff8e8, #fffdf7); |
| | | 64 | | } |
| | | 65 | | |
| | | 66 | | .warehouse-group-card.is-processed { |
| | | 67 | | border-color: #198754; |
| | | 68 | | background: linear-gradient(180deg, #edf9f0, #ffffff); |
| | | 69 | | } |
| | | 70 | | |
| | | 71 | | .warehouse-group-card.is-disabled { |
| | | 72 | | border-color: #dc3545; |
| | | 73 | | background: linear-gradient(180deg, #fff5f5, #fff); |
| | | 74 | | } |
| | | 75 | | |
| | | 76 | | .warehouse-card-title { |
| | | 77 | | font-size: 1rem; |
| | | 78 | | font-weight: 700; |
| | | 79 | | margin: 0; |
| | | 80 | | color: #212529; |
| | | 81 | | } |
| | | 82 | | |
| | | 83 | | .warehouse-card-meta { |
| | | 84 | | display: flex; |
| | | 85 | | gap: 0.5rem; |
| | | 86 | | flex-wrap: wrap; |
| | | 87 | | margin-top: 0.55rem; |
| | | 88 | | margin-bottom: 0.55rem; |
| | | 89 | | } |
| | | 90 | | |
| | | 91 | | .warehouse-card-action { |
| | | 92 | | display: inline-flex; |
| | | 93 | | align-items: center; |
| | | 94 | | gap: 0.45rem; |
| | | 95 | | text-decoration: none; |
| | | 96 | | color: #0d6efd; |
| | | 97 | | } |
| | | 98 | | |
| | | 99 | | .warehouse-card-action:hover { |
| | | 100 | | color: #0a58ca; |
| | | 101 | | } |
| | | 102 | | |
| | | 103 | | .warehouse-card-actions { |
| | | 104 | | display: flex; |
| | | 105 | | align-items: center; |
| | | 106 | | gap: 0.6rem; |
| | | 107 | | flex-wrap: wrap; |
| | | 108 | | } |
| | | 109 | | |
| | | 110 | | .warehouse-card-note { |
| | | 111 | | font-size: 0.83rem; |
| | | 112 | | line-height: 1.35; |
| | | 113 | | color: #6c757d; |
| | | 114 | | margin-bottom: 0.6rem; |
| | | 115 | | } |
| | | 116 | | |
| | | 117 | | .warehouse-card-note.is-danger { |
| | | 118 | | color: #b02a37; |
| | | 119 | | font-weight: 600; |
| | | 120 | | } |
| | | 121 | | |
| | | 122 | | .warehouse-preview-button { |
| | | 123 | | width: 2.25rem; |
| | | 124 | | height: 2.25rem; |
| | | 125 | | display: inline-flex; |
| | | 126 | | align-items: center; |
| | | 127 | | justify-content: center; |
| | | 128 | | border-radius: 0.65rem; |
| | | 129 | | border: 1px solid #dee2e6; |
| | | 130 | | background: #fff; |
| | | 131 | | color: #495057; |
| | | 132 | | } |
| | | 133 | | |
| | | 134 | | .warehouse-preview-button:hover { |
| | | 135 | | background: #f8f9fa; |
| | | 136 | | color: #212529; |
| | | 137 | | border-color: #adb5bd; |
| | | 138 | | } |
| | | 139 | | |
| | | 140 | | .warehouse-preview-table td, |
| | | 141 | | .warehouse-preview-table th { |
| | | 142 | | vertical-align: middle; |
| | | 143 | | } |
| | | 144 | | |
| | | 145 | | .warehouse-preview-modal .modal-content { |
| | | 146 | | border: 1px solid #dee2e6; |
| | | 147 | | border-radius: 1rem; |
| | | 148 | | background: linear-gradient(180deg, #fff, #f8f9fa); |
| | | 149 | | box-shadow: 0 0.7rem 1.4rem rgba(0, 0, 0, 0.08); |
| | | 150 | | } |
| | | 151 | | |
| | | 152 | | .warehouse-preview-modal .modal-header { |
| | | 153 | | border-bottom: 1px solid #e9ecef; |
| | | 154 | | padding: 1rem 1.1rem; |
| | | 155 | | background: transparent; |
| | | 156 | | } |
| | | 157 | | |
| | | 158 | | .warehouse-preview-modal .modal-body { |
| | | 159 | | padding: 0.95rem 1.1rem 1.1rem; |
| | | 160 | | } |
| | | 161 | | |
| | | 162 | | .warehouse-preview-shell { |
| | | 163 | | border: 1px solid #dee2e6; |
| | | 164 | | border-radius: 0.8rem; |
| | | 165 | | background: #fff; |
| | | 166 | | overflow: hidden; |
| | | 167 | | } |
| | | 168 | | |
| | | 169 | | .warehouse-preview-table { |
| | | 170 | | margin-bottom: 0; |
| | | 171 | | } |
| | | 172 | | |
| | | 173 | | .warehouse-preview-table thead th { |
| | | 174 | | background: #f8f9fa; |
| | | 175 | | font-weight: 600; |
| | | 176 | | color: #495057; |
| | | 177 | | border-bottom-width: 1px; |
| | | 178 | | } |
| | | 179 | | |
| | | 180 | | .warehouse-preview-table tbody tr:nth-child(even) { |
| | | 181 | | background: #fcfcfd; |
| | | 182 | | } |
| | | 183 | | |
| | | 184 | | .warehouse-preview-table tbody tr.table-success { |
| | | 185 | | background: #edf9f0; |
| | | 186 | | } |
| | | 187 | | |
| | | 188 | | .warehouse-status-chip { |
| | | 189 | | display: inline-flex; |
| | | 190 | | align-items: center; |
| | | 191 | | min-height: 1.9rem; |
| | | 192 | | padding: 0.2rem 0.7rem; |
| | | 193 | | border-radius: 999px; |
| | | 194 | | border: 1px solid rgba(0, 0, 0, 0.08); |
| | | 195 | | font-size: 0.82rem; |
| | | 196 | | font-weight: 600; |
| | | 197 | | color: #212529; |
| | | 198 | | } |
| | | 199 | | </style> |
| | | 200 | | |
| | | 201 | | <div class="container mt-4"> |
| | | 202 | | <div class="transaction-date-panel mb-4"> |
| | | 203 | | <div class="row g-3 align-items-end"> |
| | | 204 | | <div class="col-lg-4 col-md-5"> |
| | | 205 | | <div class="transaction-date-panel-label mb-2">Единая дата проведения в 1С</div> |
| | | 206 | | <input id="oneCOperationDate" |
| | | 207 | | type="datetime-local" |
| | | 208 | | class="form-control form-control-lg" |
| | | 209 | | value="@initialOneCOperationDate" /> |
| | | 210 | | </div> |
| | | 211 | | <div class="col-lg-8 col-md-7"> |
| | 0 | 212 | | <div class="transaction-date-panel-value" id="oneCOperationDatePreview">@displayOneCOperationDate МСК</d |
| | | 213 | | <div class="transaction-date-panel-note small mt-1">Это значение будет автоматически подставлено во все |
| | | 214 | | </div> |
| | | 215 | | </div> |
| | | 216 | | </div> |
| | | 217 | | |
| | | 218 | | <div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-4"> |
| | | 219 | | <div> |
| | | 220 | | <h2 class="mb-1">Создано несколько страниц по складам</h2> |
| | | 221 | | <p class="text-muted mb-0">Группы разбиты по складу. После перехода карточка будет отмечена как обработанная |
| | | 222 | | </div> |
| | 0 | 223 | | <span class="badge rounded-pill text-bg-primary fs-6">Групп: @Model.WarehousePages.Count</span> |
| | | 224 | | </div> |
| | | 225 | | |
| | | 226 | | <div class="warehouse-groups-grid"> |
| | 0 | 227 | | @foreach (var transactionPage in Model.WarehousePages) |
| | | 228 | | { |
| | 0 | 229 | | var cardClasses = "warehouse-group-card"; |
| | 0 | 230 | | if (transactionPage.HasWarnings) |
| | | 231 | | { |
| | 0 | 232 | | cardClasses += " is-warning"; |
| | | 233 | | } |
| | 0 | 234 | | if (!transactionPage.CanOpen) |
| | | 235 | | { |
| | 0 | 236 | | cardClasses += " is-disabled"; |
| | | 237 | | } |
| | | 238 | | |
| | 0 | 239 | | <article class="@cardClasses" data-group-card data-group-key="@transactionPage.GroupKey"> |
| | | 240 | | <div class="d-flex justify-content-between gap-3 align-items-start"> |
| | | 241 | | <div> |
| | 0 | 242 | | <h3 class="warehouse-card-title">@transactionPage.WarehouseName</h3> |
| | | 243 | | </div> |
| | | 244 | | <span class="badge rounded-pill @(transactionPage.CanOpen ? "text-bg-secondary" : "text-bg-danger")" |
| | 0 | 245 | | @(transactionPage.CanOpen ? "Готово" : "Нужно проверить") |
| | | 246 | | </span> |
| | | 247 | | </div> |
| | | 248 | | |
| | | 249 | | <div class="warehouse-card-meta"> |
| | 0 | 250 | | <span class="badge text-bg-light border">Заказов: @transactionPage.OrdersCount</span> |
| | 0 | 251 | | @if (transactionPage.ProcessedOrdersCount > 0) |
| | | 252 | | { |
| | 0 | 253 | | <span class="badge text-bg-light border">К проведению: @transactionPage.AvailableOrdersCount</sp |
| | | 254 | | } |
| | 0 | 255 | | @if (transactionPage.StatusOnlyOrdersCount > 0) |
| | | 256 | | { |
| | 0 | 257 | | <span class="badge text-bg-info">Только статус: @transactionPage.StatusOnlyOrdersCount</span> |
| | | 258 | | } |
| | 0 | 259 | | @if (transactionPage.HasWarnings) |
| | | 260 | | { |
| | | 261 | | <span class="badge text-bg-warning">Есть предупреждение</span> |
| | | 262 | | } |
| | | 263 | | <span class="badge text-bg-success d-none" data-processed-badge>Обработано</span> |
| | | 264 | | </div> |
| | | 265 | | |
| | 0 | 266 | | @if (transactionPage.HasWarnings) |
| | | 267 | | { |
| | | 268 | | <div class="warehouse-card-note @(transactionPage.AvailableOrdersCount == 0 ? "is-danger" : string.E |
| | 0 | 269 | | @transactionPage.WarningText |
| | | 270 | | </div> |
| | | 271 | | } |
| | | 272 | | |
| | 0 | 273 | | @if (transactionPage.CanOpen) |
| | | 274 | | { |
| | | 275 | | <div class="warehouse-card-actions"> |
| | | 276 | | <button type="button" |
| | | 277 | | class="warehouse-preview-button" |
| | | 278 | | data-bs-toggle="modal" |
| | | 279 | | data-bs-target="#ordersPreviewModal" |
| | 0 | 280 | | data-warehouse-preview='@Html.Raw(System.Text.Json.JsonSerializer.Serialize(transactionP |
| | 0 | 281 | | data-warehouse-name="@transactionPage.WarehouseName" |
| | | 282 | | title="Предпросмотр заказов" |
| | | 283 | | aria-label="Предпросмотр заказов"> |
| | | 284 | | <i class="fas fa-eye"></i> |
| | | 285 | | </button> |
| | | 286 | | |
| | | 287 | | <a href="@transactionPage.Url" |
| | | 288 | | target="_blank" |
| | | 289 | | class="btn btn-outline-primary warehouse-card-action transaction-link" |
| | 0 | 290 | | data-group-key="@transactionPage.GroupKey"> |
| | | 291 | | <span>Открыть страницу</span> |
| | | 292 | | </a> |
| | | 293 | | </div> |
| | | 294 | | } |
| | | 295 | | else |
| | | 296 | | { |
| | | 297 | | <div class="warehouse-card-actions"> |
| | | 298 | | <button type="button" |
| | | 299 | | class="warehouse-preview-button" |
| | | 300 | | data-bs-toggle="modal" |
| | | 301 | | data-bs-target="#ordersPreviewModal" |
| | 0 | 302 | | data-warehouse-preview='@Html.Raw(System.Text.Json.JsonSerializer.Serialize(transactionP |
| | 0 | 303 | | data-warehouse-name="@transactionPage.WarehouseName" |
| | | 304 | | title="Предпросмотр заказов" |
| | | 305 | | aria-label="Предпросмотр заказов"> |
| | | 306 | | <i class="fas fa-eye"></i> |
| | | 307 | | </button> |
| | | 308 | | </div> |
| | | 309 | | } |
| | | 310 | | </article> |
| | | 311 | | } |
| | | 312 | | </div> |
| | | 313 | | </div> |
| | | 314 | | |
| | | 315 | | <div class="modal fade warehouse-preview-modal" id="ordersPreviewModal" tabindex="-1" aria-labelledby="ordersPreviewModa |
| | | 316 | | <div class="modal-dialog modal-lg modal-dialog-scrollable"> |
| | | 317 | | <div class="modal-content"> |
| | | 318 | | <div class="modal-header"> |
| | | 319 | | <div> |
| | | 320 | | <h5 class="modal-title" id="ordersPreviewModalLabel">Заказы в группе</h5> |
| | | 321 | | <div class="small text-muted" id="ordersPreviewModalMeta"></div> |
| | | 322 | | </div> |
| | | 323 | | <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> |
| | | 324 | | </div> |
| | | 325 | | <div class="modal-body"> |
| | | 326 | | <div class="table-responsive warehouse-preview-shell"> |
| | | 327 | | <table class="table table-sm table-bordered warehouse-preview-table mb-0"> |
| | | 328 | | <thead> |
| | | 329 | | <tr> |
| | | 330 | | <th>Заказ</th> |
| | | 331 | | <th>Артикул</th> |
| | | 332 | | <th>Статус</th> |
| | | 333 | | </tr> |
| | | 334 | | </thead> |
| | | 335 | | <tbody id="ordersPreviewModalBody"></tbody> |
| | | 336 | | </table> |
| | | 337 | | </div> |
| | | 338 | | </div> |
| | | 339 | | </div> |
| | | 340 | | </div> |
| | | 341 | | </div> |
| | | 342 | | |
| | | 343 | | <script> |
| | | 344 | | function formatOneCOperationDate(value) { |
| | | 345 | | if (!value) { |
| | | 346 | | return 'Дата не выбрана'; |
| | | 347 | | } |
| | | 348 | | |
| | | 349 | | const date = new Date(value); |
| | | 350 | | if (Number.isNaN(date.getTime())) { |
| | | 351 | | return value; |
| | | 352 | | } |
| | | 353 | | |
| | | 354 | | return new Intl.DateTimeFormat('ru-RU', { |
| | | 355 | | day: '2-digit', |
| | | 356 | | month: '2-digit', |
| | | 357 | | year: 'numeric', |
| | | 358 | | hour: '2-digit', |
| | | 359 | | minute: '2-digit' |
| | | 360 | | }).format(date) + ' МСК'; |
| | | 361 | | } |
| | | 362 | | |
| | | 363 | | function updateTransactionLinks(dateValue) { |
| | | 364 | | document.querySelectorAll('.transaction-link').forEach(function (link) { |
| | | 365 | | const url = new URL(link.href, window.location.origin); |
| | | 366 | | if (dateValue) { |
| | | 367 | | url.searchParams.set('oneCOperationDate', dateValue); |
| | | 368 | | } else { |
| | | 369 | | url.searchParams.delete('oneCOperationDate'); |
| | | 370 | | } |
| | | 371 | | |
| | | 372 | | link.href = url.pathname + url.search; |
| | | 373 | | }); |
| | | 374 | | |
| | | 375 | | const preview = document.getElementById('oneCOperationDatePreview'); |
| | | 376 | | if (preview) { |
| | | 377 | | preview.textContent = formatOneCOperationDate(dateValue); |
| | | 378 | | } |
| | | 379 | | } |
| | | 380 | | |
| | | 381 | | function markGroupCardProcessed(groupKey) { |
| | | 382 | | if (!groupKey) { |
| | | 383 | | return; |
| | | 384 | | } |
| | | 385 | | |
| | | 386 | | document.querySelectorAll('[data-group-card]').forEach(function (card) { |
| | | 387 | | if (card.getAttribute('data-group-key') !== groupKey) { |
| | | 388 | | return; |
| | | 389 | | } |
| | | 390 | | |
| | | 391 | | card.classList.add('is-processed'); |
| | | 392 | | const badge = card.querySelector('[data-processed-badge]'); |
| | | 393 | | if (badge) { |
| | | 394 | | badge.classList.remove('d-none'); |
| | | 395 | | } |
| | | 396 | | }); |
| | | 397 | | } |
| | | 398 | | |
| | | 399 | | document.querySelectorAll('.transaction-link').forEach(function (link) { |
| | | 400 | | link.addEventListener('click', function () { |
| | | 401 | | const groupKey = this.getAttribute('data-group-key'); |
| | | 402 | | markGroupCardProcessed(groupKey); |
| | | 403 | | }); |
| | | 404 | | }); |
| | | 405 | | |
| | | 406 | | const ordersPreviewModal = document.getElementById('ordersPreviewModal'); |
| | | 407 | | if (ordersPreviewModal) { |
| | | 408 | | ordersPreviewModal.addEventListener('show.bs.modal', function (event) { |
| | | 409 | | const trigger = event.relatedTarget; |
| | | 410 | | const modalBody = document.getElementById('ordersPreviewModalBody'); |
| | | 411 | | const modalMeta = document.getElementById('ordersPreviewModalMeta'); |
| | | 412 | | if (!trigger || !modalBody || !modalMeta) { |
| | | 413 | | return; |
| | | 414 | | } |
| | | 415 | | |
| | | 416 | | const warehouseName = trigger.getAttribute('data-warehouse-name') || 'Группа'; |
| | | 417 | | const payload = trigger.getAttribute('data-warehouse-preview') || '[]'; |
| | | 418 | | let orders = []; |
| | | 419 | | try { |
| | | 420 | | orders = JSON.parse(payload); |
| | | 421 | | } catch { |
| | | 422 | | orders = []; |
| | | 423 | | } |
| | | 424 | | |
| | | 425 | | modalMeta.textContent = `${warehouseName}. Заказов: ${orders.length}`; |
| | | 426 | | modalBody.innerHTML = orders.map(function (order) { |
| | | 427 | | const rowClass = order.IsAlreadyProcessed ? 'table-success' : (order.IsStatusOnlyChange ? 'table-info' : |
| | | 428 | | const statusSuffix = order.IsAlreadyProcessed |
| | | 429 | | ? ' (уже проведен)' |
| | | 430 | | : (order.IsStatusOnlyChange ? ' (только смена статуса)' : ''); |
| | | 431 | | const statusColor = order.StatusColor || '#e9ecef'; |
| | | 432 | | return `<tr class="${rowClass}"><td>${order.ShipmentNumber || ''}</td><td>${order.Article || ''}</td><td |
| | | 433 | | }).join('') || St2EmptyState.tableRow(3, { title: 'Нет заказов для предпросмотра', description: 'Для выбранн |
| | | 434 | | }); |
| | | 435 | | } |
| | | 436 | | |
| | | 437 | | const oneCOperationDateInput = document.getElementById('oneCOperationDate'); |
| | | 438 | | if (oneCOperationDateInput) { |
| | | 439 | | updateTransactionLinks(oneCOperationDateInput.value); |
| | | 440 | | oneCOperationDateInput.addEventListener('input', function () { |
| | | 441 | | updateTransactionLinks(this.value); |
| | | 442 | | }); |
| | | 443 | | oneCOperationDateInput.addEventListener('change', function () { |
| | | 444 | | updateTransactionLinks(this.value); |
| | | 445 | | }); |
| | | 446 | | } |
| | | 447 | | </script> |