106 lines
2.4 KiB
Vue
106 lines
2.4 KiB
Vue
<template>
|
|
<div class="q-pa-md">
|
|
<q-uploader
|
|
style="max-width: 400px"
|
|
:url="uploadUrl"
|
|
:label="title"
|
|
:headers="headers"
|
|
accept=".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 { useQuasar } from 'quasar';
|
|
import { useAuthStore } from 'src/stores/useAuthStore';
|
|
import { ref } from 'vue';
|
|
|
|
const $q = useQuasar();
|
|
const authStore = useAuthStore();
|
|
const emit = defineEmits(['uploaded']);
|
|
|
|
interface Props {
|
|
title?: string;
|
|
uploadUrl?: string;
|
|
}
|
|
|
|
const headers = ref([
|
|
{ name: 'Authorization', value: 'Bearer ' + authStore.token },
|
|
]);
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
title: '設計書から導入する(Excel)',
|
|
uploadUrl: `${process.env.KAB_BACKEND_URL}api/v1/createappfromexcel?format=1`,
|
|
});
|
|
|
|
/**
|
|
* ファイルアップロードを拒否する時の処理
|
|
* @param rejectedEntries
|
|
*/
|
|
function onRejected(rejectedEntries: any) {
|
|
// Notify plugin needs to be installed
|
|
// https://quasar.dev/quasar-plugins/notify#Installation
|
|
$q.notify({
|
|
type: 'negative',
|
|
message: '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);
|
|
}
|
|
|
|
/**
|
|
* 例外発生時、responseからエラー情報を取得する
|
|
* @param xhr
|
|
*/
|
|
function getResponseError(xhr: XMLHttpRequest) {
|
|
try {
|
|
const resp = JSON.parse(xhr.responseText);
|
|
return 'detail' in resp ? resp.detail : '';
|
|
} catch (err) {
|
|
return xhr.responseText;
|
|
}
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @param info ファイルアップロード失敗時の処理
|
|
*/
|
|
function onFailed({
|
|
files,
|
|
xhr,
|
|
}: {
|
|
files: readonly any[];
|
|
xhr: XMLHttpRequest;
|
|
}) {
|
|
let msg = 'ファイルアップロードが失敗しました。';
|
|
if (xhr && xhr.status) {
|
|
const detail = getResponseError(xhr);
|
|
msg = `${msg} (${xhr.status}:${detail})`;
|
|
}
|
|
$q.notify({
|
|
type: 'negative',
|
|
message: msg,
|
|
});
|
|
}
|
|
</script>
|
|
<style lang="scss"></style>
|