| | | 1 | | @using OzonOrdersWeb.ViewModels.MatchFileDataViewModel |
| | | 2 | | |
| | | 3 | | @model ExtendMatchedDataViewModel |
| | | 4 | | <style> |
| | | 5 | | .modal { |
| | | 6 | | display: none; |
| | | 7 | | position: fixed; |
| | | 8 | | z-index: 1; |
| | | 9 | | left: 0; |
| | | 10 | | top: 0; |
| | | 11 | | width: 100%; |
| | | 12 | | height: 100%; |
| | | 13 | | overflow: auto; |
| | | 14 | | background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон */ |
| | | 15 | | } |
| | | 16 | | |
| | | 17 | | .modal-content { |
| | | 18 | | background-color: #fefefe; |
| | | 19 | | margin: 15% auto; |
| | | 20 | | padding: 20px; |
| | | 21 | | border: 1px solid #888; |
| | | 22 | | width: 80%; /* Ширина контента */ |
| | | 23 | | } |
| | | 24 | | |
| | | 25 | | .progress { |
| | | 26 | | margin: 20px 0; /* Отступы сверху и снизу */ |
| | | 27 | | } |
| | | 28 | | </style> |
| | | 29 | | |
| | | 30 | | @{ |
| | 0 | 31 | | string errorResult = ViewData["ErrorResult"] as string ?? ""; |
| | | 32 | | } |
| | | 33 | | |
| | 0 | 34 | | @if (errorResult != null) |
| | | 35 | | { |
| | | 36 | | <div class="alert alert-dismissible alert-danger"> |
| | | 37 | | <button type="button" class="btn-close" data-bs-dismiss="alert"></button> |
| | 0 | 38 | | <p>@Html.Raw(errorResult)</p> |
| | | 39 | | </div> |
| | | 40 | | } |
| | | 41 | | |
| | | 42 | | <div class="container mt-5"> |
| | | 43 | | <h1 class="mb-4">Дополнить сопоставление</h1> |
| | | 44 | | <hr /> |
| | | 45 | | |
| | 0 | 46 | | @using (Html.BeginForm("ExtendMatchedData", "MatchFileData", FormMethod.Post, new { enctype = "multipart/form-data", |
| | | 47 | | { |
| | | 48 | | <div class="row"> |
| | | 49 | | <!-- Файл 1 --> |
| | | 50 | | <div class="col-md-6"> |
| | | 51 | | <div class="mb-3"> |
| | | 52 | | <label for="fileInput1" class="form-label"> |
| | | 53 | | <h2> |
| | | 54 | | Заказы |
| | | 55 | | </h2> |
| | 0 | 56 | | <b>@Model.MainFileName</b> |
| | | 57 | | </label> |
| | | 58 | | <input type="file" class="form-control" id="fileInput1" name="file1" accept=".xlsx,.csv" required> |
| | | 59 | | <div class="invalid-feedback"> |
| | | 60 | | <h2> |
| | | 61 | | Заказы |
| | | 62 | | </h2> |
| | | 63 | | </div> |
| | | 64 | | </div> |
| | | 65 | | <div id="startInputs1" style="display: none;"> |
| | | 66 | | <div class="mb-3"> |
| | | 67 | | <label for="startRowInput1" class="form-label">Начальная строка (файл 1)</label> |
| | | 68 | | <input type="number" class="form-control" id="startRowInput1" name="startRow1" value="1"> |
| | | 69 | | </div> |
| | | 70 | | <div class="mb-3"> |
| | | 71 | | <label for="startColumnInput1" class="form-label">Начальный столбец (файл 1)</label> |
| | | 72 | | <input type="number" class="form-control" id="startColumnInput1" name="startColumn1" value="1"> |
| | | 73 | | </div> |
| | | 74 | | </div> |
| | | 75 | | </div> |
| | | 76 | | |
| | | 77 | | <div class="col-md-6"> |
| | | 78 | | <div class="mb-3"> |
| | | 79 | | <label for="fileInput2" class="form-label"> |
| | | 80 | | <h2> |
| | | 81 | | Платежи |
| | | 82 | | </h2> |
| | 0 | 83 | | <b>@Model.ScondaryFileName</b> |
| | | 84 | | </label> |
| | | 85 | | <input type="file" class="form-control" id="fileInput2" name="file2" accept=".xlsx,.csv" required> |
| | | 86 | | <div class="invalid-feedback"> |
| | | 87 | | Пожалуйста, выберите файл для загрузки. |
| | | 88 | | </div> |
| | | 89 | | </div> |
| | | 90 | | <div id="startInputs2" style="display: none;"> |
| | | 91 | | <div class="mb-3"> |
| | | 92 | | <label for="startRowInput2" class="form-label">Начальная строка (файл 2)</label> |
| | | 93 | | <input type="number" class="form-control" id="startRowInput2" name="startRow2" value="1"> |
| | | 94 | | </div> |
| | | 95 | | <div class="mb-3"> |
| | | 96 | | <label for="startColumnInput2" class="form-label">Начальный столбец (файл 2)</label> |
| | | 97 | | <input type="number" class="form-control" id="startColumnInput2" name="startColumn2" value="1"> |
| | | 98 | | </div> |
| | | 99 | | </div> |
| | | 100 | | </div> |
| | | 101 | | </div> |
| | | 102 | | <div id="matchingFieldsContainer"> |
| | | 103 | | <div class="row mb-3"> |
| | | 104 | | <div class="col-md-6"> |
| | | 105 | | <label for="matchColumn1" class="form-label">Сопоставление 1</label> |
| | | 106 | | <input type="text" class="form-control" name="matchingColumns[0].Item1" required placeholder="Введит |
| | | 107 | | </div> |
| | | 108 | | |
| | | 109 | | <div class="col-md-6"> |
| | | 110 | | <label for="matchColumn2" class="form-label">Сопоставление 1</label> |
| | | 111 | | <input type="text" class="form-control" name="matchingColumns[0].Item2" required placeholder="Введит |
| | | 112 | | </div> |
| | | 113 | | </div> |
| | | 114 | | </div> |
| | | 115 | | |
| | | 116 | | <button type="button" id="addMatchingFields" class="btn btn-link mb-3">Добавить сопоставление</button> |
| | | 117 | | <input type="hidden" name="id" value="@Model.Id" /> |
| | | 118 | | |
| | | 119 | | <div class="row"> |
| | | 120 | | <div class="col-md-12"> |
| | | 121 | | <button type="submit" class="btn btn-primary" id="submitButton" disabled>Загрузить и сопоставить</button |
| | | 122 | | </div> |
| | | 123 | | </div> |
| | 0 | 124 | | } |
| | | 125 | | |
| | 0 | 126 | | @if (!string.IsNullOrEmpty(ViewBag.Message)) |
| | | 127 | | { |
| | | 128 | | <div class="alert alert-info mt-4"> |
| | 0 | 129 | | @ViewBag.Message |
| | | 130 | | </div> |
| | | 131 | | } |
| | | 132 | | </div> |
| | | 133 | | |
| | | 134 | | <script> |
| | | 135 | | let matchCount = 1; // Счетчик сопоставлений |
| | | 136 | | |
| | | 137 | | function handleFileInput(fileInputId, startInputsId) { |
| | | 138 | | var fileInput = document.getElementById(fileInputId); |
| | | 139 | | fileInput.addEventListener('change', function () { |
| | | 140 | | var file = this.files[0]; |
| | | 141 | | if (file) { |
| | | 142 | | var extension = file.name.split('.').pop().toLowerCase(); |
| | | 143 | | if (extension === 'csv' || extension === 'xlsx') { |
| | | 144 | | document.getElementById(startInputsId).style.display = 'block'; |
| | | 145 | | } else { |
| | | 146 | | document.getElementById(startInputsId).style.display = 'none'; |
| | | 147 | | } |
| | | 148 | | } |
| | | 149 | | updateSubmitButtonState(); |
| | | 150 | | }); |
| | | 151 | | } |
| | | 152 | | |
| | | 153 | | function updateSubmitButtonState() { |
| | | 154 | | const fileInput1 = document.getElementById('fileInput1').value; |
| | | 155 | | const fileInput2 = document.getElementById('fileInput2').value; |
| | | 156 | | |
| | | 157 | | const submitButton = document.getElementById('submitButton'); |
| | | 158 | | |
| | | 159 | | // Enable the button only if both file inputs are filled |
| | | 160 | | if (fileInput1 && fileInput2) { |
| | | 161 | | submitButton.disabled = false; |
| | | 162 | | } else { |
| | | 163 | | submitButton.disabled = true; |
| | | 164 | | } |
| | | 165 | | } |
| | | 166 | | function updateMatchingFields() { |
| | | 167 | | const fileInput1 = document.getElementById('fileInput1').value; |
| | | 168 | | const fileInput2 = document.getElementById('fileInput2').value; |
| | | 169 | | |
| | | 170 | | const matchingFieldsContainer = document.getElementById('matchingFieldsContainer'); |
| | | 171 | | const submitButton = document.getElementById('submitButton'); |
| | | 172 | | |
| | | 173 | | // Show the matching fields container if both file inputs have files |
| | | 174 | | if (fileInput1 && fileInput2) { |
| | | 175 | | matchingFieldsContainer.style.display = 'block'; |
| | | 176 | | submitButton.disabled = false; // Enable submit button when both files are selected |
| | | 177 | | } else { |
| | | 178 | | matchingFieldsContainer.style.display = 'none'; |
| | | 179 | | submitButton.disabled = true; // Disable submit button if any file is not selected |
| | | 180 | | } |
| | | 181 | | } |
| | | 182 | | |
| | | 183 | | |
| | | 184 | | document.getElementById('addMatchingFields').addEventListener('click', function () { |
| | | 185 | | const container = document.getElementById('matchingFieldsContainer'); |
| | | 186 | | |
| | | 187 | | const newFields = ` |
| | | 188 | | <div class="row mb-3"> |
| | | 189 | | <div class="col-md-6"> |
| | | 190 | | <label for="matchColumn${matchCount + 1}" class="form-label">Сопоставление ${matchCount + 1} |
| | | 191 | | <input type="text" class="form-control" name="matchingColumns[${matchCount}].Item1" required |
| | | 192 | | </div> |
| | | 193 | | <div class="col-md-6"> |
| | | 194 | | <label for="matchColumn${matchCount + 1}" class="form-label">Сопоставление ${matchCount + 1} |
| | | 195 | | <input type="text" class="form-control" name="matchingColumns[${matchCount}].Item2" required |
| | | 196 | | </div> |
| | | 197 | | </div> |
| | | 198 | | `; |
| | | 199 | | container.insertAdjacentHTML('beforeend', newFields); |
| | | 200 | | matchCount++; // Увеличиваем счетчик |
| | | 201 | | }); |
| | | 202 | | |
| | | 203 | | // Attach change event listeners |
| | | 204 | | handleFileInput('fileInput1', 'startInputs1'); |
| | | 205 | | handleFileInput('fileInput2', 'startInputs2'); |
| | | 206 | | </script> |
| | | 207 | | <script> |
| | | 208 | | // Функция для показа/скрытия списка при клике на заголовок |
| | | 209 | | document.getElementById('toggleList').addEventListener('click', function () { |
| | | 210 | | const listContainer = document.getElementById('fileListContainer'); |
| | | 211 | | if (listContainer.style.display === 'none' || listContainer.style.display === '') { |
| | | 212 | | listContainer.style.display = 'block'; // Показать список |
| | | 213 | | } else { |
| | | 214 | | listContainer.style.display = 'none'; // Скрыть список |
| | | 215 | | } |
| | | 216 | | }); |
| | | 217 | | </script> |