82 lines
3.9 KiB
PHP
82 lines
3.9 KiB
PHP
<x-wireui:modal-card title="{{ __('artists.ImportData') }}" blur wire:model.defer="showModal" hide-close>
|
||
|
||
{{-- 說明區塊 --}}
|
||
<div class="mb-4 p-4 bg-gray-100 border border-gray-300 rounded text-sm text-gray-700">
|
||
<p class="font-semibold mb-2">匯入格式說明</p>
|
||
<p class="mb-2">請依下列表格格式準備 Excel 或 CSV 檔案：</p>
|
||
|
||
<div class="overflow-x-auto mb-2">
|
||
<table class="min-w-full text-sm text-left border border-collapse border-gray-300">
|
||
<thead class="bg-gray-200">
|
||
<tr>
|
||
<th class="border border-gray-300 px-3 py-1">欄位名稱</th>
|
||
<th class="border border-gray-300 px-3 py-1">說明</th>
|
||
<th class="border border-gray-300 px-3 py-1">範例</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="border border-gray-300 px-3 py-1">歌手姓名</td>
|
||
<td class="border border-gray-300 px-3 py-1">歌手姓名唯一</td>
|
||
<td class="border border-gray-300 px-3 py-1">田馥甄</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="border border-gray-300 px-3 py-1">歌手注音</td>
|
||
<td class="border border-gray-300 px-3 py-1">歌手注音第一字碼</td>
|
||
<td class="border border-gray-300 px-3 py-1">ㄊㄈㄓ</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="border border-gray-300 px-3 py-1">歌手分類</td>
|
||
<td class="border border-gray-300 px-3 py-1">男、女、團、外、其他</td>
|
||
<td class="border border-gray-300 px-3 py-1">女</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="border border-gray-300 px-3 py-1">狀態</td>
|
||
<td class="border border-gray-300 px-3 py-1">是否啟用（1：啟用，0：停用）</td>
|
||
<td class="border border-gray-300 px-3 py-1">1</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="border border-gray-300 px-3 py-1">歌手筆畫</td>
|
||
<td class="border border-gray-300 px-3 py-1">字首筆劃</td>
|
||
<td class="border border-gray-300 px-3 py-1">5</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
{{-- 檔案上傳 --}}
|
||
<div x-data="{
|
||
fileName: '',
|
||
updateFileInfo(event) {
|
||
const file = event.target.files[0];
|
||
if (file) this.fileName = file.name+ '('+(file.size / 1024 / 1024).toFixed(2) + ' MB'+')';
|
||
}
|
||
}"
|
||
>
|
||
<div x-show="$wire.file === null" >
|
||
<input type="file" wire:model="file" accept=".csv, .xls, .xlsx" class="mb-2 w-full" @change="updateFileInfo" />
|
||
<p class="text-xs text-gray-500 mb-2" >
|
||
系統限制：最大上傳 {{ $maxUploadSize }}
|
||
</p>
|
||
</div>
|
||
<!-- 檔案資訊顯示 -->
|
||
<div wire:loading.remove wire:target="file" class="text-sm text-green-600 flex items-center space-x-1" x-show="$wire.file != null">
|
||
<x-wireui:icon name="check-circle" class="w-5 h-5 text-green-500" />
|
||
<strong x-text="fileName"></strong>
|
||
</div>
|
||
<!-- 上傳中提示 -->
|
||
<div wire:loading wire:target="file" class="text-sm text-blue-500">
|
||
檔案上傳中，請稍候...
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<x-slot name="footer">
|
||
<div class="flex justify-between w-full">
|
||
<x-wireui:button flat label="{{ __('artists.cancel') }}" wire:click="closeModal" />
|
||
<x-wireui:button primary label="{{ __('artists.submit') }}" wire:click="import" />
|
||
</div>
|
||
</x-slot>
|
||
</x-wireui:modal-card> |