| | | 1 | | @using OzonOrdersWeb.ViewModels.OzonClientViewModels |
| | | 2 | | @model CreateOzonClientViewModel |
| | | 3 | | @{ |
| | 0 | 4 | | ViewData["Title"] = "Создание клиента"; |
| | 0 | 5 | | Layout = "~/Views/Shared/_Layout.cshtml"; |
| | 0 | 6 | | var status = (string?)ViewData["CreateInfo"]; |
| | | 7 | | } |
| | | 8 | | |
| | | 9 | | <link rel="stylesheet" href="~/css/Studio2/OzonClients/ozon-clients-form.css" asp-append-version="true"/> |
| | | 10 | | |
| | 0 | 11 | | @await Html.PartialAsync("_BsxGridShell") |
| | | 12 | | |
| | | 13 | | <div class="container py-3 oc-form-page bsx-surface"> |
| | | 14 | | <a asp-action="Index" class="oc-form-back mb-3 d-inline-flex"> |
| | | 15 | | <i class="fas fa-arrow-left"></i>К списку клиентов |
| | | 16 | | </a> |
| | | 17 | | |
| | | 18 | | <div class="oc-form-hero"> |
| | | 19 | | <h1><i class="fas fa-plus me-2 text-primary"></i>Новый клиент</h1> |
| | | 20 | | <div class="subtitle">Учётная запись маркетплейса и настройки API</div> |
| | | 21 | | <div class="subtitle-help"> |
| | | 22 | | Выберите тип (Ozon или Yandex) — откроются поля API. Ключи берутся в личном кабинете продавца. |
| | | 23 | | После создания клиент появится в фильтрах заказов и в фоновых заданиях (отчёты, остатки Bitrix). |
| | | 24 | | </div> |
| | | 25 | | </div> |
| | | 26 | | |
| | | 27 | | <div class="oc-form-card"> |
| | 0 | 28 | | @if (status != null) |
| | | 29 | | { |
| | | 30 | | <div class="alert alert-danger alert-dismissible fade show mb-3" role="alert"> |
| | 0 | 31 | | <i class="fas fa-exclamation-circle me-2"></i>@status |
| | | 32 | | <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Закрыть"></button> |
| | | 33 | | </div> |
| | | 34 | | } |
| | | 35 | | |
| | | 36 | | <div class="oc-intro"> |
| | | 37 | | <i class="fas fa-circle-info"></i> |
| | | 38 | | <div class="oc-intro-text"> |
| | | 39 | | <strong>Название</strong> — как клиент отображается в Studio2 (можно короткий псевдоним). |
| | | 40 | | <strong>ИНН</strong> — юрлицо продавца в 1С для проводок «отгрузка клиенту». |
| | | 41 | | <strong>Склад Bitrix</strong> — склад 1С по умолчанию для документов этого клиента |
| | | 42 | | (детальная привязка складов Ozon — в <a asp-area="Studio2" asp-controller="WarehouseMapping" asp-action= |
| | | 43 | | </div> |
| | | 44 | | </div> |
| | | 45 | | |
| | | 46 | | <form asp-area="Studio2" asp-action="Create" asp-controller="OzonClients" id="createForm" method="post"> |
| | | 47 | | <div asp-validation-summary="ModelOnly" class="text-danger small mb-2"></div> |
| | | 48 | | |
| | | 49 | | <div class="oc-form-section"> |
| | | 50 | | <div class="oc-form-card-header"> |
| | | 51 | | <h2><i class="fas fa-user me-2 text-muted"></i>Основные данные</h2> |
| | | 52 | | </div> |
| | | 53 | | <div class="oc-form-grid"> |
| | | 54 | | <div> |
| | | 55 | | <label asp-for="OzonClient.Name" class="form-label">Название<span class="oc-required-mark">*</sp |
| | | 56 | | <input asp-for="OzonClient.Name" class="form-control form-control-sm" autocomplete="off" placeho |
| | | 57 | | <div class="oc-field-hint">Отображается в заказах, фильтрах и расписаниях фоновых заданий.</div> |
| | | 58 | | <span asp-validation-for="OzonClient.Name" class="text-danger small"></span> |
| | | 59 | | </div> |
| | | 60 | | <div> |
| | | 61 | | <label asp-for="OzonClient.ClientType" class="form-label">Тип клиента<span class="oc-required-ma |
| | | 62 | | <select asp-for="OzonClient.ClientType" class="form-select form-select-sm" |
| | | 63 | | asp-items="Model.ClientTypes" id="ClientTypeSelect"></select> |
| | | 64 | | <div class="oc-field-hint">Ozon — Seller API; Yandex — OAuth и список кампаний; остальные — без |
| | | 65 | | <span asp-validation-for="OzonClient.ClientType" class="text-danger small"></span> |
| | | 66 | | <div id="clientTypePreview" class="oc-client-type-preview" style="display: none;"> |
| | | 67 | | <span>Выбрано:</span> |
| | | 68 | | <span id="clientTypeBadge" class="badge"></span> |
| | | 69 | | </div> |
| | | 70 | | </div> |
| | | 71 | | <div> |
| | | 72 | | <label asp-for="OzonClient.CurrencyCode" class="form-label">Валюта отчётов</label> |
| | | 73 | | <select asp-for="OzonClient.CurrencyCode" class="form-select form-select-sm" asp-items="Model.Cu |
| | | 74 | | <div class="oc-field-hint">Валюта цен в отчётах маркетплейса — для пересчёта закупки в рубли.</d |
| | | 75 | | <span asp-validation-for="OzonClient.CurrencyCode" class="text-danger small"></span> |
| | | 76 | | </div> |
| | | 77 | | <div> |
| | | 78 | | <label asp-for="OzonClient.INNCode" class="form-label">ИНН юрлица</label> |
| | | 79 | | <div class="oc-inn-search"> |
| | | 80 | | <input type="text" class="form-control form-control-sm" id="innSearch" |
| | | 81 | | placeholder="ИНН или название в 1С…" autocomplete="off"/> |
| | | 82 | | <input type="hidden" asp-for="OzonClient.INNCode" id="innHidden"/> |
| | | 83 | | <div class="oc-inn-results inn-ac-results" id="innResults"></div> |
| | | 84 | | </div> |
| | | 85 | | <div class="oc-field-hint">Контрагент в 1С Fresh — для отгрузок клиенту и сверки с Ozon. Можно з |
| | | 86 | | <span asp-validation-for="OzonClient.INNCode" class="text-danger small"></span> |
| | | 87 | | </div> |
| | | 88 | | <div> |
| | | 89 | | <label asp-for="OzonClient.WarehouseName" class="form-label">Склад Bitrix (1С)</label> |
| | | 90 | | <select asp-for="OzonClient.WarehouseName" class="form-select form-select-sm" asp-items="Model.B |
| | | 91 | | <option value="">Выберите склад…</option> |
| | | 92 | | </select> |
| | | 93 | | <div class="oc-field-hint">Склад 1С по умолчанию для документов этого клиента. Список — из разре |
| | | 94 | | <span asp-validation-for="OzonClient.WarehouseName" class="text-danger small"></span> |
| | | 95 | | </div> |
| | | 96 | | </div> |
| | | 97 | | </div> |
| | | 98 | | |
| | | 99 | | <div id="ozonApiClientFields" class="oc-form-section oc-form-section--muted" style="display: none;"> |
| | | 100 | | <div class="oc-form-card-header border-0 pb-2 mb-2"> |
| | | 101 | | <h2> |
| | | 102 | | <i class="fas fa-shopping-bag me-2 text-muted"></i>Ozon API |
| | | 103 | | <span class="oc-platform-badge oc-platform-badge--ozon">OZON</span> |
| | | 104 | | </h2> |
| | | 105 | | </div> |
| | | 106 | | <div class="oc-form-grid"> |
| | | 107 | | <div class="oc-field-mono"> |
| | | 108 | | <label asp-for="OzonClient.ClientId" class="form-label">Client ID<span class="oc-required-mark"> |
| | | 109 | | <div class="input-group input-group-sm oc-input-actions"> |
| | | 110 | | <input asp-for="OzonClient.ClientId" class="form-control" id="ClientId" placeholder="Из личн |
| | | 111 | | <button class="btn btn-outline-secondary" type="button" |
| | | 112 | | id="copyOzonClientIdBtn" title="Копировать Client ID"> |
| | | 113 | | <i class="fas fa-copy"></i> |
| | | 114 | | </button> |
| | | 115 | | </div> |
| | | 116 | | <div class="oc-field-hint">Настройки → Seller API → Client-Id. Передаётся в заголовке каждого за |
| | | 117 | | <span asp-validation-for="OzonClient.ClientId" class="text-danger small"></span> |
| | | 118 | | </div> |
| | | 119 | | <div class="oc-field-mono"> |
| | | 120 | | <label asp-for="OzonClient.ApiKey" class="form-label">API Key<span class="oc-required-mark">*</s |
| | | 121 | | <div class="input-group input-group-sm oc-input-actions"> |
| | | 122 | | <input asp-for="OzonClient.ApiKey" class="form-control" id="ApiKey" type="password"/> |
| | | 123 | | <button class="btn btn-outline-secondary" type="button" |
| | | 124 | | id="copyOzonApiKeyBtn" title="Копировать API Key"> |
| | | 125 | | <i class="fas fa-copy"></i> |
| | | 126 | | </button> |
| | | 127 | | <button class="btn btn-outline-secondary" type="button" |
| | | 128 | | id="toggleOzonApiKey" title="Показать/скрыть"> |
| | | 129 | | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" |
| | | 130 | | fill="currentColor" class="bi bi-eye-fill" viewBox="0 0 16 16"> |
| | | 131 | | <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0"/> |
| | | 132 | | <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8m8 3.5a3.5 3.5 0 1 0 0-7 3.5 |
| | | 133 | | </svg> |
| | | 134 | | </button> |
| | | 135 | | </div> |
| | | 136 | | <div class="oc-field-hint">Секретный ключ Seller API. Хранится в БД в зашифрованном виде. Не пер |
| | | 137 | | <span asp-validation-for="OzonClient.ApiKey" class="text-danger small"></span> |
| | | 138 | | </div> |
| | | 139 | | </div> |
| | | 140 | | </div> |
| | | 141 | | |
| | | 142 | | <div id="yandexApiClientFields" class="oc-form-section oc-form-section--muted" style="display: none;"> |
| | | 143 | | <div class="oc-form-card-header border-0 pb-2 mb-2"> |
| | | 144 | | <h2> |
| | | 145 | | <i class="fas fa-shopping-cart me-2 text-muted"></i>Yandex API |
| | | 146 | | <span class="oc-platform-badge oc-platform-badge--yandex">YANDEX</span> |
| | | 147 | | </h2> |
| | | 148 | | </div> |
| | | 149 | | <div class="oc-form-grid"> |
| | | 150 | | <div> |
| | | 151 | | <label for="OzonClient_ClientId_Yandex" class="form-label">Кампания Yandex<span class="oc-requir |
| | | 152 | | <select id="OzonClient_ClientId_Yandex" name="OzonClient.ClientId" class="form-select form-selec |
| | 0 | 153 | | @foreach (var client in Model.YandexClients) |
| | | 154 | | { |
| | 0 | 155 | | <option value="@client.CompanyId">@client.BusinessName (@client.BusinessId / @client.War |
| | | 156 | | } |
| | | 157 | | </select> |
| | | 158 | | <div class="oc-field-hint">Список кампаний загружается по OAuth-токену Yandex Market из настроек |
| | | 159 | | </div> |
| | | 160 | | <div class="oc-field-mono"> |
| | | 161 | | <label asp-for="OzonClient.ApiKey" class="form-label">OAuth API Key</label> |
| | | 162 | | <div class="input-group input-group-sm oc-input-actions"> |
| | | 163 | | <input class="form-control" id="ApiKeyYandexDisplay" value="@Model.YandexApiKey" type="passw |
| | 0 | 164 | | <input asp-for="OzonClient.ApiKey" type="hidden" id="ApiKeyYandex" value="@Model.YandexApiKe |
| | | 165 | | <button class="btn btn-outline-secondary" type="button" |
| | | 166 | | id="copyYandexApiKeyBtn" title="Копировать API Key"> |
| | | 167 | | <i class="fas fa-copy"></i> |
| | | 168 | | </button> |
| | | 169 | | <button class="btn btn-outline-secondary" type="button" |
| | | 170 | | id="toggleApiKeyYandexDisplay" title="Показать/скрыть"> |
| | | 171 | | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" |
| | | 172 | | fill="currentColor" class="bi bi-eye-fill" viewBox="0 0 16 16"> |
| | | 173 | | <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0"/> |
| | | 174 | | <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8m8 3.5a3.5 3.5 0 1 0 0-7 3.5 |
| | | 175 | | </svg> |
| | | 176 | | </button> |
| | | 177 | | </div> |
| | | 178 | | <div class="oc-field-hint">Токен доступа Yandex Market — подставляется из конфигурации при выбор |
| | | 179 | | <span asp-validation-for="OzonClient.ApiKey" class="text-danger small"></span> |
| | | 180 | | </div> |
| | | 181 | | </div> |
| | | 182 | | </div> |
| | | 183 | | |
| | | 184 | | <div class="oc-form-actions"> |
| | | 185 | | <button type="submit" class="btn btn-primary btn-sm"> |
| | | 186 | | <i class="fas fa-plus me-1"></i>Создать клиента |
| | | 187 | | </button> |
| | | 188 | | <a asp-action="Index" class="btn btn-outline-secondary btn-sm"> |
| | | 189 | | <i class="fas fa-times me-1"></i>Отмена |
| | | 190 | | </a> |
| | | 191 | | </div> |
| | | 192 | | </form> |
| | | 193 | | </div> |
| | | 194 | | </div> |
| | | 195 | | |
| | | 196 | | @section Scripts { |
| | 0 | 197 | | @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); } |
| | | 198 | | <script src="~/js/inn-autocomplete.js" asp-append-version="true"></script> |
| | | 199 | | <script src="~/js/Studio2/OzonClients/form.js" asp-append-version="true"></script> |
| | | 200 | | <script> |
| | | 201 | | document.addEventListener('DOMContentLoaded', function () { |
| | | 202 | | window.innAutocomplete({ |
| | | 203 | | searchInputId: 'innSearch', |
| | | 204 | | hiddenInputId: 'innHidden', |
| | | 205 | | resultsId: 'innResults', |
| | | 206 | | endpoint: '/Studio2/OzonClients/SearchCounterparties' |
| | | 207 | | }); |
| | | 208 | | window.OzonClientForm.initCreate(); |
| | | 209 | | }); |
| | | 210 | | </script> |
| | | 211 | | } |