improve person inport excell
This commit is contained in:
parent
33cf15dedc
commit
789618927d
|
|
@ -1,109 +1,343 @@
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import axios from 'axios';
|
|
||||||
import Swal from 'sweetalert2';
|
|
||||||
import { defineComponent } from 'vue'
|
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
export default defineComponent({
|
import axios from 'axios'
|
||||||
name: "person-import-excel",
|
import Swal from 'sweetalert2'
|
||||||
props: {
|
|
||||||
windowsState: Object
|
interface Props {
|
||||||
},
|
windowsState: {
|
||||||
data: () => {
|
submited: boolean
|
||||||
return {
|
}
|
||||||
loading: ref(false),
|
}
|
||||||
file: null
|
|
||||||
}
|
const props = defineProps<Props>()
|
||||||
},
|
|
||||||
methods: {
|
const loading = ref(false)
|
||||||
addFile(e) {
|
const file = ref<File | null>(null)
|
||||||
this.file = e.target.files[0];
|
const fileInput = ref<HTMLInputElement | null>(null)
|
||||||
},
|
const dialog = ref(false)
|
||||||
submit() {
|
const dragOver = ref(false)
|
||||||
if (this.file === null) {
|
|
||||||
Swal.fire({
|
const addFile = (event: Event) => {
|
||||||
text: 'فایل انتخاب نشده است',
|
const target = event.target as HTMLInputElement
|
||||||
icon: 'error',
|
if (target.files && target.files.length > 0) {
|
||||||
confirmButtonText: 'قبول'
|
file.value = target.files[0]
|
||||||
});
|
}
|
||||||
}
|
}
|
||||||
else {
|
|
||||||
//send excel file to server
|
const handleDrop = (event: DragEvent) => {
|
||||||
let formData = new FormData();
|
event.preventDefault()
|
||||||
formData.append('file', this.file);
|
dragOver.value = false
|
||||||
axios.post('/api/person/import/excel', formData,
|
|
||||||
{
|
const dataTransfer = event.dataTransfer
|
||||||
headers: {
|
if (dataTransfer?.files && dataTransfer.files.length > 0) {
|
||||||
'Content-Type': 'multipart/form-data'
|
const droppedFile = dataTransfer.files[0]
|
||||||
}
|
if (droppedFile.type.includes('excel') || droppedFile.type.includes('spreadsheet') ||
|
||||||
}).then(() => {
|
droppedFile.name.endsWith('.xlsx') || droppedFile.name.endsWith('.xls')) {
|
||||||
Swal.fire({
|
file.value = droppedFile
|
||||||
text: 'فایل با موفقیت ثبت شد.',
|
} else {
|
||||||
icon: 'success',
|
Swal.fire({
|
||||||
confirmButtonText: 'قبول'
|
text: 'فقط فایل‌های Excel قابل قبول هستند',
|
||||||
}).then((resp) => {
|
icon: 'warning',
|
||||||
this.$refs.Close.click();
|
confirmButtonText: 'قبول'
|
||||||
this.$props.windowsState.submited = true;
|
})
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
Swal.fire({
|
|
||||||
text: 'متاسفانه خطایی به وجود آمد.',
|
|
||||||
icon: 'error',
|
|
||||||
confirmButtonText: 'قبول'
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
|
|
||||||
|
const handleDragOver = (event: DragEvent) => {
|
||||||
|
event.preventDefault()
|
||||||
|
dragOver.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDragLeave = (event: DragEvent) => {
|
||||||
|
event.preventDefault()
|
||||||
|
dragOver.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
const downloadTemplate = () => {
|
||||||
|
const apiUrl = window.location.origin
|
||||||
|
const link = document.createElement('a')
|
||||||
|
link.href = `${apiUrl}/imports/persons-import.xlsx`
|
||||||
|
link.download = 'persons-import-template.xlsx'
|
||||||
|
link.target = '_blank'
|
||||||
|
if (document.body) {
|
||||||
|
document.body.appendChild(link)
|
||||||
|
link.click()
|
||||||
|
document.body.removeChild(link)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const submit = async () => {
|
||||||
|
if (!file.value) {
|
||||||
|
await Swal.fire({
|
||||||
|
text: 'فایل انتخاب نشده است',
|
||||||
|
icon: 'warning',
|
||||||
|
confirmButtonText: 'قبول'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate file type
|
||||||
|
const validTypes = [
|
||||||
|
'application/vnd.ms-excel',
|
||||||
|
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||||||
|
'application/vnd.ms-excel.sheet.macroEnabled.12'
|
||||||
|
]
|
||||||
|
|
||||||
|
if (!validTypes.includes(file.value.type) &&
|
||||||
|
!file.value.name.endsWith('.xlsx') &&
|
||||||
|
!file.value.name.endsWith('.xls')) {
|
||||||
|
await Swal.fire({
|
||||||
|
text: 'فقط فایل‌های Excel قابل قبول هستند',
|
||||||
|
icon: 'error',
|
||||||
|
confirmButtonText: 'قبول'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
loading.value = true
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append('file', file.value)
|
||||||
|
|
||||||
|
try {
|
||||||
|
await axios.post('/api/person/import/excel', formData, {
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'multipart/form-data'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const result = await Swal.fire({
|
||||||
|
text: 'فایل با موفقیت وارد شد و اطلاعات اشخاص ثبت گردید.',
|
||||||
|
icon: 'success',
|
||||||
|
confirmButtonText: 'قبول'
|
||||||
|
})
|
||||||
|
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
props.windowsState.submited = true
|
||||||
|
dialog.value = false
|
||||||
|
file.value = null
|
||||||
|
if (fileInput.value) fileInput.value.value = ''
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('Import error:', error)
|
||||||
|
const errorMessage = error.response?.data?.message || 'متاسفانه خطایی در وارد کردن فایل به وجود آمد.'
|
||||||
|
await Swal.fire({
|
||||||
|
text: errorMessage,
|
||||||
|
icon: 'error',
|
||||||
|
confirmButtonText: 'قبول'
|
||||||
|
})
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const closeDialog = () => {
|
||||||
|
if (!loading.value) {
|
||||||
|
dialog.value = false
|
||||||
|
file.value = null
|
||||||
|
if (fileInput.value) fileInput.value.value = ''
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<!-- Button trigger modal -->
|
<div>
|
||||||
<v-tooltip :text="$t('dialog.import_excel')" location="bottom">
|
<!-- Import Button -->
|
||||||
<template v-slot:activator="{ props }">
|
<v-tooltip :text="$t('dialog.import_excel')" location="bottom">
|
||||||
<v-btn v-bind="props" icon="mdi-table-arrow-left" color="primary" data-bs-toggle="modal"
|
<template v-slot:activator="{ props }">
|
||||||
data-bs-target="#importexcel">
|
<v-btn
|
||||||
</v-btn>
|
v-bind="props"
|
||||||
</template>
|
icon="mdi-table-arrow-left"
|
||||||
</v-tooltip>
|
color="primary"
|
||||||
|
@click="dialog = true"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</v-tooltip>
|
||||||
|
|
||||||
<!-- Modal -->
|
<!-- Import Dialog -->
|
||||||
<div class="modal modal-lg fade" id="importexcel" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
|
<v-dialog v-model="dialog" max-width="700" persistent>
|
||||||
aria-labelledby="importexcelLabel" aria-hidden="true">
|
<v-card>
|
||||||
<div class="modal-dialog">
|
<!-- Dialog Header -->
|
||||||
<div class="modal-content">
|
<v-toolbar color="primary" title="درون ریزی اشخاص از اکسل">
|
||||||
<div class="modal-header bg-primary-light text-white">
|
<v-spacer />
|
||||||
<h1 class="modal-title fs-5" id="importexcelLabel">وارد کردن از اکسل</h1>
|
<v-btn
|
||||||
<div class="block-options">
|
icon="mdi-close"
|
||||||
<button type="button" class="btn-close text-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
variant="text"
|
||||||
</div>
|
color="white"
|
||||||
</div>
|
@click="closeDialog"
|
||||||
<div class="modal-body">
|
:disabled="loading"
|
||||||
<ul>
|
/>
|
||||||
<li>برای وارد کردن لیست افراد در اکسل ابتدا فایل نمونه را دریافت نمایید سپس مطابق الگو اطلاعات را تکمیل کنید
|
</v-toolbar>
|
||||||
در مرحله بعدی با انتخاب فایل نسبت به ورود از لیست اقدام کنید</li>
|
|
||||||
<li>
|
<v-card-text class="pt-6">
|
||||||
<a :href="this.$filters.getApiUrl() + '/imports/persons-import.xlsx'" target="_blank">دریافت فایل
|
<!-- Instructions Section -->
|
||||||
نمونه</a>
|
<v-card variant="outlined" class="mb-6">
|
||||||
</li>
|
<v-card-text>
|
||||||
</ul>
|
<v-list density="compact">
|
||||||
<form @submit.prevent="submit()">
|
<v-list-item prepend-icon="mdi-numeric-1-circle" class="px-0">
|
||||||
<div class="mb-3">
|
<v-list-item-title class="text-body-2">
|
||||||
<label for="formFileSm" class="form-label">انتخاب فایل</label>
|
ابتدا فایل نمونه را دریافت کنید و مطابق الگو اطلاعات را تکمیل نمایید
|
||||||
<input @change="addFile" class="custom-file-input form-control" id="formFileSm" type="file"
|
</v-list-item-title>
|
||||||
accept="application/vnd.ms-excel,application/vnd.ms-excel.sheet.macroEnabled.12,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
|
</v-list-item>
|
||||||
</div>
|
|
||||||
<div class="mb-3">
|
<v-list-item prepend-icon="mdi-numeric-2-circle" class="px-0">
|
||||||
<button type="submit" class="btn btn-primary">
|
<v-list-item-title class="text-body-2">
|
||||||
وارد کردن
|
فایل تکمیل شده را انتخاب کرده و روی دکمه "وارد کردن" کلیک کنید
|
||||||
</button>
|
</v-list-item-title>
|
||||||
</div>
|
</v-list-item>
|
||||||
</form>
|
|
||||||
</div>
|
<v-list-item prepend-icon="mdi-numeric-3-circle" class="px-0">
|
||||||
</div>
|
<v-list-item-title class="text-body-2">
|
||||||
</div>
|
سیستم اطلاعات را بررسی کرده و در صورت صحت، اشخاص را ثبت می‌کند
|
||||||
|
</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</v-card-text>
|
||||||
|
</v-card>
|
||||||
|
|
||||||
|
<!-- Template Download Section -->
|
||||||
|
<v-card variant="outlined" class="mb-6">
|
||||||
|
<v-card-text>
|
||||||
|
<div class="d-flex align-center justify-space-between">
|
||||||
|
<div class="d-flex align-center">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 class="text-subtitle-1 font-weight-medium">فایل نمونه</h4>
|
||||||
|
<p class="text-body-2 text-grey-darken-1 mb-0">
|
||||||
|
فایل نمونه شامل ستون‌های مورد نیاز برای وارد کردن اشخاص
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<v-btn
|
||||||
|
color="success"
|
||||||
|
variant="outlined"
|
||||||
|
prepend-icon="mdi-download"
|
||||||
|
@click="downloadTemplate"
|
||||||
|
:disabled="loading"
|
||||||
|
>
|
||||||
|
دریافت فایل نمونه
|
||||||
|
</v-btn>
|
||||||
|
</div>
|
||||||
|
</v-card-text>
|
||||||
|
</v-card>
|
||||||
|
|
||||||
|
<!-- File Upload Section -->
|
||||||
|
<v-card variant="outlined">
|
||||||
|
<v-card-title>
|
||||||
|
<h4 class="text-subtitle-1 font-weight-medium">انتخاب فایل</h4>
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
<!-- Drag & Drop Area -->
|
||||||
|
<div
|
||||||
|
class="upload-area"
|
||||||
|
:class="{ 'drag-over': dragOver }"
|
||||||
|
@drop="handleDrop"
|
||||||
|
@dragover="handleDragOver"
|
||||||
|
@dragleave="handleDragLeave"
|
||||||
|
>
|
||||||
|
<v-file-input
|
||||||
|
ref="fileInput"
|
||||||
|
v-model="file"
|
||||||
|
label="فایل Excel را انتخاب کنید یا اینجا رها کنید"
|
||||||
|
accept=".xls,.xlsx,.xlsm"
|
||||||
|
@change="addFile"
|
||||||
|
variant="outlined"
|
||||||
|
prepend-icon="mdi-file-excel"
|
||||||
|
show-size
|
||||||
|
counter
|
||||||
|
:disabled="loading"
|
||||||
|
hide-details
|
||||||
|
class="upload-input"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div v-if="!file" class="upload-placeholder">
|
||||||
|
<v-icon size="48" color="grey-lighten-1">mdi-cloud-upload</v-icon>
|
||||||
|
<p class="text-body-2 text-grey-darken-1 mt-2">
|
||||||
|
فایل Excel را اینجا بکشید و رها کنید یا کلیک کنید
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- File Info -->
|
||||||
|
<div v-if="file" class="mt-4">
|
||||||
|
<v-alert type="info" variant="tonal" class="mb-0">
|
||||||
|
<div class="d-flex align-center">
|
||||||
|
<v-icon class="mr-2">mdi-file-check</v-icon>
|
||||||
|
<div>
|
||||||
|
<strong>{{ file.name }}</strong>
|
||||||
|
<div class="text-caption">
|
||||||
|
اندازه: {{ (file.size / 1024).toFixed(1) }} KB
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</v-alert>
|
||||||
|
</div>
|
||||||
|
</v-card-text>
|
||||||
|
</v-card>
|
||||||
|
</v-card-text>
|
||||||
|
|
||||||
|
<!-- Dialog Actions -->
|
||||||
|
<v-card-actions class="pa-6 pt-0">
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
color="grey-darken-1"
|
||||||
|
variant="text"
|
||||||
|
@click="closeDialog"
|
||||||
|
:disabled="loading"
|
||||||
|
>
|
||||||
|
انصراف
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
color="primary"
|
||||||
|
@click="submit"
|
||||||
|
:loading="loading"
|
||||||
|
:disabled="!file || loading"
|
||||||
|
prepend-icon="mdi-upload"
|
||||||
|
>
|
||||||
|
وارد کردن
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped>
|
||||||
|
.upload-area {
|
||||||
|
position: relative;
|
||||||
|
border: 2px dashed #e0e0e0;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
background-color: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-area.drag-over {
|
||||||
|
border-color: #1976d2;
|
||||||
|
background-color: #e3f2fd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-input {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-placeholder {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-list-item {
|
||||||
|
min-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-list-item-title {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.25;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in a new issue