s5l.ru-crm/app/pages/Admin/Import/index.pug

div(class="import-page")
  h1 Импорт товаров
  
  div(class="import-steps")
    div(class="import-step" :class="{'import-step--active': currentStep === 1}")
      span(class="import-step__number") 1
      span Загрузка файла
    div(class="import-step" :class="{'import-step--active': currentStep === 2}")
      span(class="import-step__number") 2
      span Настройка полей
    div(class="import-step" :class="{'import-step--active': currentStep === 3}")
      span(class="import-step__number") 3
      span Предпросмотр
    div(class="import-step" :class="{'import-step--active': currentStep === 4}")
      span(class="import-step__number") 4
      span Импорт
  
  div(class="import-content")
    //- Шаг 1: Загрузка файла
    div(v-if="currentStep === 1" class="import-step-content")
      file-upload(
        accept=".csv,.xlsx"
        :multiple="false"
        @select="onFileSelect"
        @upload="startProcessing"
      )
      div(v-if="selectedFile" class="file-info")
        h3 Выбранный файл: {{ selectedFile.name }}
        p Размер: {{ (selectedFile.size / 1024 / 1024).toFixed(2) }} MB
        ui-button(@click="nextStep" type="primary") Далее
    
    //- Шаг 2: Настройка полей
    div(v-if="currentStep === 2" class="import-step-content")
      h3 Настройка соответствия полей
      div(class="field-mapping")
        div(
          v-for="(csvField, index) in csvFields"
          :key="index"
          class="field-mapping__row"
        )
          span(class="field-mapping__csv-field") {{ csvField }}
          select(v-model="fieldMapping[csvField]" class="field-mapping__select")
            option(value="") Не импортировать
            option(value="name") Название товара
            option(value="sku") Артикул
            option(value="price") Цена
            option(value="oldPrice") Цена до скидки
            option(value="brand") Бренд
            option(value="category") Категория
            option(value="description") Описание
            option(value="weight") Вес
            option(value="volume") Объем
      
      div(class="import-actions")
        ui-button(@click="prevStep" type="outline") Назад
        ui-button(@click="validateMapping" type="primary") Далее
    
    //- Шаг 3: Предпросмотр
    div(v-if="currentStep === 3" class="import-step-content")
      h3 Предпросмотр данных
      div(class="preview-info")
        p Найдено товаров: {{ previewData.length }}
        p Будут созданы категории: {{ newCategories.length }}
      
      data-table(
        :data="previewData.slice(0, 10)"
        :columns="previewColumns"
        :loading="previewLoading"
      )
      
      div(class="import-actions")
        ui-button(@click="prevStep" type="outline") Назад
        ui-button(@click="startImport" type="primary") Начать импорт
    
    //- Шаг 4: Импорт
    div(v-if="currentStep === 4" class="import-step-content")
      h3 Процесс импорта
      div(class="import-progress")
        div(class="import-progress__bar")
          div(
            class="import-progress__fill"
            :style="{ width: importProgress + '%' }"
          )
        div(class="import-progress__text")
          | {{ importProgress }}% ({{ processedItems }} из {{ totalItems }})
        
        div(v-if="importStats" class="import-stats")
          div(class="import-stat")
            span Успешно: 
            strong {{ importStats.success }}
          div(class="import-stat")
            span С ошибками: 
            strong {{ importStats.errors }}
          div(class="import-stat")
            span Новые категории: 
            strong {{ importStats.newCategories }}
      
      div(v-if="importErrors.length > 0" class="import-errors")
        h4 Ошибки импорта:
        div(
          v-for="(error, index) in importErrors"
          :key="index"
          class="import-error"
        )
          strong Строка {{ error.row }}: 
          span {{ error.message }}
      
      div(class="import-actions")
        ui-button(
          v-if="importComplete"
          @click="resetImport"
          type="primary"
        ) Новый импорт
        ui-button(
          v-else
          @click="cancelImport"
          type="danger"
          :disabled="importing"
        ) Отменить