85 lines
2.3 KiB
Vue
85 lines
2.3 KiB
Vue
<template>
|
|
<div class="q-pa-md">
|
|
<q-uploader
|
|
style="max-width: 400px"
|
|
:url="uploadUrl"
|
|
:label="title"
|
|
:headers="headers"
|
|
accept=".csv,.xlsx"
|
|
v-on:rejected="onRejected"
|
|
v-on:uploaded="onUploadFinished"
|
|
v-on:failed="onFailed"
|
|
field-name="files"
|
|
></q-uploader>
|
|
</div>
|
|
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { createUploaderComponent, useQuasar } from 'quasar';
|
|
import { useAuthStore } from 'src/stores/useAuthStore';
|
|
import { ref } from 'vue';
|
|
const $q=useQuasar();
|
|
const authStore = useAuthStore();
|
|
const emit =defineEmits(['uploaded']);
|
|
/**
|
|
* ファイルアップロードを拒否する時の処理
|
|
* @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
|
|
});
|
|
setTimeout(() => {
|
|
emit('uploaded',xhr.responseText);
|
|
}, 2000);
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @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 headers = ref([{name:"Authorization",value:'Bearer ' + authStore.token}]);
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
title:"設計書から導入する(csv or excel)",
|
|
uploadUrl: `${process.env.KAB_BACKEND_URL}api/v1/createappfromexcel?format=1`
|
|
|
|
});
|
|
</script>
|
|
<style lang="scss">
|
|
|
|
</style>
|