178 lines
4.4 KiB
Vue
178 lines
4.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { storeToRefs } from 'pinia'
|
|
import { useTreeDataStore } from '@/stores/tree-data'
|
|
|
|
const { currentPath } = storeToRefs(useTreeDataStore())
|
|
const { uploadFile, checkFile } = useTreeDataStore()
|
|
|
|
const inputFile = ref<File>()
|
|
const fileTitle = ref<string>('')
|
|
const fileDesc = ref<string>('')
|
|
const fileCategory = ref<string>('')
|
|
const fileKeyword = ref<string>('')
|
|
const notification = ref<boolean>(false)
|
|
const emit = defineEmits(['update:drawerFile'])
|
|
const props = withDefaults(defineProps<{ drawerFile: boolean }>(), {
|
|
drawerFile: false,
|
|
})
|
|
|
|
async function handleSubmit(continueUpload:boolean = false) {
|
|
if (!inputFile.value) return
|
|
// getFile(p)
|
|
if (checkFile(inputFile.value.name) || continueUpload ) {
|
|
await uploadFile(currentPath.value, inputFile.value, {
|
|
title: fileTitle.value,
|
|
description: fileDesc.value,
|
|
keyword: [fileKeyword.value],
|
|
category: [fileCategory.value],
|
|
})
|
|
} else notification.value = true
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<q-drawer
|
|
class="q-pa-md"
|
|
side="right"
|
|
v-model="props.drawerFile"
|
|
bordered
|
|
:width="300"
|
|
:breakpoint="500"
|
|
overlay
|
|
>
|
|
<q-toolbar class="q-mb-md q-pa-none">
|
|
<q-toolbar-title>
|
|
<span class="text-weight-bold">สร้างเอกสาร</span>
|
|
</q-toolbar-title>
|
|
<q-btn
|
|
flat
|
|
round
|
|
dense
|
|
icon="close"
|
|
v-close-popup
|
|
color="red"
|
|
@click="() => $emit('update:drawerFile')"
|
|
/>
|
|
</q-toolbar>
|
|
<span class="text-weight-bold">อัพโหลดไฟล์</span>
|
|
<q-file
|
|
v-model="inputFile"
|
|
class="q-my-md"
|
|
label="Pick files"
|
|
dense
|
|
outlined
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-icon name="attach_file" />
|
|
</template>
|
|
</q-file>
|
|
<span class="text-weight-bold">ชื่อเรื่อง</span>
|
|
<q-input
|
|
class="q-my-md"
|
|
outlined
|
|
v-model="fileTitle"
|
|
placeholder="กรอกชื่อเรื่อง"
|
|
dense
|
|
/>
|
|
<span class="text-weight-bold">รายละเอียดของเอกสาร</span>
|
|
<q-input
|
|
class="q-my-md"
|
|
outlined
|
|
type="textarea"
|
|
v-model="fileDesc"
|
|
placeholder="กรอกรายละเอียด"
|
|
dense
|
|
/>
|
|
<span class="text-weight-bold">กลุ่ม/หมวดหมู่</span>
|
|
<q-input
|
|
class="q-my-md"
|
|
outlined
|
|
v-model="fileCategory"
|
|
placeholder="เลือกกลุ่ม/หมวดหมู่"
|
|
dense
|
|
/>
|
|
<span class="text-weight-bold">คำสำคัญ</span>
|
|
<q-input
|
|
class="q-my-md"
|
|
outlined
|
|
v-model="fileKeyword"
|
|
placeholder="กรอกคำสำคัญ"
|
|
dense
|
|
/>
|
|
<q-btn
|
|
class="q-px-md"
|
|
label="บันทึก"
|
|
type="submit"
|
|
color="primary"
|
|
dense
|
|
@click="
|
|
() => {
|
|
$emit('update:drawerFile')
|
|
handleSubmit()
|
|
}
|
|
"
|
|
/>
|
|
</q-drawer>
|
|
|
|
<q-btn label="Click me" color="primary" @click="notification = true" />
|
|
|
|
<q-dialog
|
|
v-model="notification"
|
|
persistent
|
|
transition-show="scale"
|
|
transition-hide="scale"
|
|
>
|
|
<q-card style="width: 400px">
|
|
<q-card-section>
|
|
<div class="text-h6">เตือนพบไฟล์ชื่อซ้ำในระบบ</div>
|
|
</q-card-section>
|
|
|
|
<q-card-section class="q-pt-none">
|
|
ถ้าดำเนินการต่อจะอัพข้อมูลทับกับอันเก่า
|
|
</q-card-section>
|
|
|
|
<q-card-actions align="right" class="bg-white text-red">
|
|
<q-space />
|
|
<q-btn flat label="ยกเลิก" v-close-popup />
|
|
|
|
<q-btn
|
|
flat
|
|
label="ดำเนินการต่อ"
|
|
v-close-popup
|
|
class="text-teal"
|
|
@click="()=> handleSubmit(true)"
|
|
/>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.box {
|
|
display: inline-block;
|
|
border: 2px solid #f1f2f4;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dashed {
|
|
opacity: 0.4;
|
|
display: inline-block;
|
|
border: 2px solid #babdc3;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
border-style: dashed;
|
|
}
|
|
|
|
.add-icon {
|
|
margin: auto auto;
|
|
}
|
|
|
|
.add-button {
|
|
position: absolute;
|
|
top: 75px;
|
|
right: 45px;
|
|
background-color: white;
|
|
}
|
|
</style>
|