ImportExcel
Zona de upload de arquivos Excel (.xlsx) e CSV com drag-and-drop e click para selecionar. Faz upload HTTP e lê o conteúdo localmente com a lib XLSX em paralelo. Suporta limite de linhas (maxRowsToImport) e dialog de confirmação (confirmMessage) antes de abrir o file picker.
Básico (sem limite de linhas)
Clique abre o file picker diretamente. Parse local com XLSX e upload HTTP em paralelo. onSuccess (callback) recebe dados parseados; @on-success (evento) recebe a resposta HTTP.
Arraste um Arquivo Excel ou Procure Aqui
Com Confirmação e Limite de Linhas
confirmMessage exibe dialog de confirmação antes de abrir o file picker. maxRowsToImport rejeita arquivos que excedam o limite com $vs.notify warning. Em todos os usos reais, ambos aparecem juntos.
Arraste um Arquivo Excel ou Procure Aqui
Apenas Limite de Linhas
maxRowsToImport sem confirmMessage. Arquivo acima do limite é rejeitado com $vs.notify warning após o upload. Sem uso real nessa combinação — todos os usos reais com limite também usam confirmação.
Arraste um Arquivo Excel ou Procure Aqui
API
Exemplo completo
<!-- onSuccess: callback local com {header, results, meta} dos dados parseados -->
<!-- @on-success: evento após upload HTTP bem-sucedido (AxiosResponse) -->
<!-- Diferença crucial: onSuccess=prop (dados locais XLSX), @on-success=evento (resposta do servidor) -->
<import-excel
:action="uploadApiUrl"
fileName="file"
:headers="{ Authorization: 'Bearer ' + bearer }"
:onSuccess="loadDataInTable"
@on-success="successUploadSheet"
@on-error="errorUploadSheet"
:maxRowsToImport="1000"
confirmMessage="Ao importar, os dados existentes serão substituídos. Deseja continuar?"
/>Props
| Nome | Tipo | Default | Obrig. | Descrição |
|---|---|---|---|---|
onSuccess |
Function | — | Sim | Callback chamado quando o arquivo é lido localmente com sucesso. Recebe { header, results, meta } com os dados do Excel parseados pelo XLSX. |
fileName |
String | — | Sim | Nome do campo no FormData para o upload HTTP (ex: 'file', 'excel'). |
action |
String | null | Não | URL para upload do arquivo via axios POST. Obrigatório quando se quer persistir o arquivo no servidor. |
headers |
Object | null | Não | Headers HTTP extras para o request de upload (ex: { Authorization: 'Bearer ...' }). |
maxRowsToImport |
Number | undefined | Não | Limite máximo de linhas. Se exceder: remove o arquivo do bucket e exibe $vs.notify warning. Quando undefined: sem limite. |
confirmMessage |
String | undefined | Não | Texto do vs-dialog de confirmação exibido antes de abrir o file picker. Quando undefined, abre o picker diretamente. |
Eventos
| Evento | Payload | Descrição |
|---|---|---|
@on-success |
AxiosResponse | Emitido após upload HTTP bem-sucedido. Payload: response completo do axios. |
@on-error |
AxiosResponse (error.response) | Emitido em caso de erro no upload HTTP. |
Formato de dados locais (onSuccess)
| Campo | Tipo | Descrição |
|---|---|---|
header | String[] | Nomes das colunas (primeira linha do Excel) |
results | Object[] | Uma entrada por linha. Chaves = headers. Datas convertidas para toLocaleDateString(). Campo extra __rowNum__ adicionado. |
meta | Object | { sheetName: String } — nome da primeira aba do workbook |
Dependências
xlsx— parse de planilhas (XLSX.read,sheet_to_json)axios— upload HTTP$vs.loading,$vs.notify,$vs.dialog(Vuesax 3)feather-icon(UploadCloudIcon)removeFileFromBucket(util interna) — remove arquivo do bucket quando limite excedido
Onde é usado
src/views/campaigns/ViewCampaign.vuesrc/views/customer-groups/CustomerCategoryForm.vuesrc/views/orders/products/ImportProductModal.vuesrc/views/customer-bases/CustomerBasesForm.vuesrc/views/configs/DynamicSettings.vue
onSuccess é uma prop-callback que recebe os dados locais parseados pelo XLSX (para preview na tela). @on-success é um evento Vue emitido após o upload HTTP ter sido confirmado pelo servidor. O pai precisa de ambos para exibir preview local e confirmar a persistência no servidor.