78 lines
1.8 KiB
Vue
78 lines
1.8 KiB
Vue
<template>
|
|
<div class="q-pa-md">
|
|
<q-uploader
|
|
:on-finish="uploadFinished"
|
|
style="max-width: 400px"
|
|
:url="uploadUrl"
|
|
:label="title"
|
|
accept=".csv,.xlsx"
|
|
:on-rejected="onRejected"
|
|
field-name="file"
|
|
></q-uploader>
|
|
</div>
|
|
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { createUploaderComponent, useQuasar } from 'quasar';
|
|
|
|
|
|
const $q=useQuasar();
|
|
|
|
/**
|
|
* ファイルアップロードを拒否する時の処理
|
|
* @param rejectedEntries
|
|
*/
|
|
function onRejected (rejectedEntries:any) {
|
|
// Notify plugin needs to be installed
|
|
// https://quasar.dev/quasar-plugins/notify#Installation
|
|
$q.notify({
|
|
type: 'negative',
|
|
message: `CSVおよびExcelファイルを選択してください。`
|
|
})
|
|
}
|
|
|
|
/**
|
|
* ファイルアップロード成功時の処理
|
|
*/
|
|
function onUploadFinished({xhr}:{xhr:XMLHttpRequest}){
|
|
let msg="ファイルのアップロードが完了しました。";
|
|
if(xhr && xhr.response){
|
|
msg=`${msg} (${xhr.responseText})`;
|
|
}
|
|
$q.notify({
|
|
type: 'positive',
|
|
caption:"通知",
|
|
message: msg
|
|
});
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @param info ファイルアップロード失敗時の処理
|
|
*/
|
|
function onFailed({files,xhr}:{files: readonly any[],xhr:any}){
|
|
let msg ="ファイルアップロードが失敗しました。";
|
|
if(xhr && xhr.status){
|
|
msg=`${msg} (${xhr.status }:${xhr.statusText})`
|
|
}
|
|
$q.notify({
|
|
type:"negative",
|
|
message:msg
|
|
});
|
|
}
|
|
interface Props {
|
|
title: string;
|
|
uploadUrl:string;
|
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
title:"設計書から導入する(csv or excel)",
|
|
uploadUrl:process.env.KAB_BACKEND_URL
|
|
});
|
|
|
|
|
|
|
|
</script>
|
|
<style lang="scss">
|
|
|
|
</style>
|