442 lines
14 KiB
Vue
442 lines
14 KiB
Vue
<script setup lang="ts">
|
|
import { ref, reactive, onMounted, computed } from "vue";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useQuasar } from "quasar";
|
|
import { useRoute } from "vue-router";
|
|
import axios from "axios";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
|
|
/**
|
|
* importRtpe
|
|
*/
|
|
import type { FormData } from "@/modules/12_evaluatePersonal/interface/index/meeting";
|
|
|
|
/**
|
|
* use
|
|
*/
|
|
const route = useRoute();
|
|
const $q = useQuasar();
|
|
const {
|
|
messageError,
|
|
showLoader,
|
|
success,
|
|
date2Thai,
|
|
hideLoader,
|
|
dialogRemove,
|
|
} = useCounterMixin();
|
|
|
|
/**
|
|
* รับ props มาจาก page หลัก
|
|
*/
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
onSubmit: {
|
|
type: Function,
|
|
default: () => "",
|
|
},
|
|
});
|
|
const emit = defineEmits(["formDataReturn"]);
|
|
|
|
const id = ref<string>(route.params.id as string); //id การประชุม
|
|
const routeName = ref<string>(route.name as string);
|
|
const isReadonly = computed(() =>
|
|
routeName.value === "evaluateMeetingdetail" ? true : false
|
|
);
|
|
|
|
const formData = reactive<FormData>({
|
|
id: "",
|
|
rounded: "", //ครั้งที่
|
|
dateMeetingStart: null, //วันเวลาเริ่มต้นการประชุม
|
|
dateMeetingEnd: null, //วันเวลาสิ้นสุดการประชุม
|
|
consider: "", //ผลการพิจารณาของคณะกรรมการประเมินผลงานแต่ละคณะ
|
|
period: "", //ระยะเวลาในการแก้ไขผลงาน
|
|
title: "", //หัวข้อการประชุม
|
|
});
|
|
const file = ref<any>(); //ไฟล์อัปโหลด
|
|
const fileData = ref<any[]>([]); //รายการเอกสาร
|
|
const fileDataDownload = ref<any>([]); ///รายการเอกสาร
|
|
|
|
/** บันทึกข้อมูล */
|
|
function submit() {
|
|
props.onSubmit(formData);
|
|
}
|
|
|
|
/**
|
|
* function fetch ข้อมูลไฟล์เอกสารหลักฐาน
|
|
*/
|
|
async function fetchDataFile() {
|
|
if (id.value != undefined) {
|
|
showLoader();
|
|
http
|
|
.get(config.API.meetingFilebyId("การประชุม", id.value))
|
|
.then((res) => {
|
|
const dataFile = res.data;
|
|
fileData.value = dataFile;
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* function ดาวน์โหลดไฟล์เอกสารหลักฐาน
|
|
*/
|
|
function fetchDataFileDownload(pathName: string) {
|
|
if (id.value !== undefined) {
|
|
showLoader();
|
|
http
|
|
.get(config.API.meetingFileDowloadbyId("การประชุม", id.value, pathName))
|
|
.then((res) => {
|
|
const dataFile = res.data;
|
|
fileDataDownload.value = dataFile;
|
|
window.open(fileDataDownload.value.downloadUrl);
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* function สร้างลิงก์อัปโหลดไฟล์เอกสารหลักฐาน
|
|
*/
|
|
function uploadFile() {
|
|
if (file) {
|
|
const fileList = [
|
|
{
|
|
fileName: file.value.name,
|
|
metadata: {
|
|
tag: "value",
|
|
},
|
|
},
|
|
];
|
|
const requestBody = {
|
|
replace: false,
|
|
fileList: fileList,
|
|
};
|
|
showLoader();
|
|
http
|
|
.post(config.API.meetingFilebyId("การประชุม", id.value), requestBody)
|
|
.then((res) => {
|
|
const foundKey: string | undefined = Object.keys(res.data).find(
|
|
(key) =>
|
|
res.data[key]?.fileName !== undefined &&
|
|
res.data[key]?.fileName !== ""
|
|
);
|
|
foundKey && uploadfileURL(res.data[foundKey]?.uploadUrl, file.value);
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
hideLoader();
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* function อัปโหลดไฟล์เอกสารหลักฐาน
|
|
*/
|
|
function uploadfileURL(uploadUrl: string, newfile: any) {
|
|
axios
|
|
.put(uploadUrl, newfile, {
|
|
headers: {
|
|
"Content-Type": newfile.type,
|
|
},
|
|
})
|
|
.then(() => {
|
|
setTimeout(async () => {
|
|
await fetchDataFile();
|
|
await success($q, "อัปโหลไฟล์สำเร็จ");
|
|
file.value = undefined;
|
|
}, 500);
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* function ยืนยันการลบไฟล์เอกสารหลักฐาน
|
|
* @param fileName file
|
|
*/
|
|
function deleteFile(fileName: string) {
|
|
dialogRemove($q, () => {
|
|
showLoader();
|
|
http
|
|
.delete(
|
|
config.API.meetingFileDowloadbyId("การประชุม", id.value, fileName)
|
|
)
|
|
.then(() => {
|
|
setTimeout(async () => {
|
|
await fetchDataFile();
|
|
await success($q, `ลบไฟล์สำเร็จ`);
|
|
}, 1000);
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
hideLoader();
|
|
});
|
|
});
|
|
}
|
|
|
|
function inputEdit(val: boolean) {
|
|
return {
|
|
"full-width cursor-pointer ": val,
|
|
"full-width cursor-pointer inputgreen": !val,
|
|
};
|
|
}
|
|
|
|
/**Hook */
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
fetchDataFile();
|
|
if (props.data) {
|
|
formData.id = props.data.id;
|
|
formData.rounded = props.data.rounded;
|
|
formData.dateMeetingStart = props.data.dateMeetingStart;
|
|
formData.dateMeetingEnd = props.data.dateMeetingEnd;
|
|
formData.consider = props.data.consider;
|
|
formData.period = props.data.period;
|
|
formData.title = props.data.title;
|
|
}
|
|
}, 1000);
|
|
});
|
|
</script>
|
|
<template>
|
|
<q-form greedy @submit.prevent @validation-success="submit">
|
|
<q-card bordered>
|
|
<div class="col-12 row q-pa-md q-col-gutter-md">
|
|
<div class="col-3">
|
|
<q-input
|
|
:class="inputEdit(isReadonly)"
|
|
:readonly="isReadonly"
|
|
dense
|
|
outlined
|
|
v-model="formData.rounded"
|
|
label="ครั้งที่"
|
|
for="roundedRef"
|
|
hide-bottom-space
|
|
:rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกครั้งที่'}`]"
|
|
/>
|
|
</div>
|
|
<div class="col-3">
|
|
<datepicker
|
|
:readonly="isReadonly"
|
|
menu-class-name="modalfix"
|
|
v-model="formData.dateMeetingStart"
|
|
:locale="'th'"
|
|
autoApply
|
|
:enableTimePicker="true"
|
|
week-start="0"
|
|
:class="inputEdit(isReadonly)"
|
|
:max-date="formData.dateMeetingEnd"
|
|
>
|
|
<template #year="{ year }">{{ year + 543 }}</template>
|
|
<template #year-overlay-value="{ value }">{{
|
|
parseInt(value + 543)
|
|
}}</template>
|
|
<template #trigger>
|
|
<q-input
|
|
:readonly="isReadonly"
|
|
for="selectDate"
|
|
dense
|
|
outlined
|
|
:model-value="
|
|
formData.dateMeetingStart != null
|
|
? date2Thai(formData.dateMeetingStart, false, true)
|
|
: null
|
|
"
|
|
hide-bottom-space
|
|
:label="`${'วันเวลาเริ่มต้นการประชุม'}`"
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือกวันเวลาเริ่มต้นการประชุม'}`]"
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-icon name="event" class="cursor-pointer text-primary">
|
|
</q-icon>
|
|
</template>
|
|
</q-input>
|
|
</template>
|
|
</datepicker>
|
|
</div>
|
|
<div class="col-3">
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
v-model="formData.dateMeetingEnd"
|
|
:locale="'th'"
|
|
autoApply
|
|
:enableTimePicker="true"
|
|
week-start="0"
|
|
:min-date="formData.dateMeetingStart"
|
|
:class="inputEdit(isReadonly)"
|
|
:readonly="isReadonly"
|
|
>
|
|
<template #year="{ year }">{{ year + 543 }}</template>
|
|
<template #year-overlay-value="{ value }">{{
|
|
parseInt(value + 543)
|
|
}}</template>
|
|
<template #trigger>
|
|
<q-input
|
|
:readonly="isReadonly"
|
|
for="selectDate"
|
|
dense
|
|
outlined
|
|
:model-value="
|
|
formData.dateMeetingEnd != null
|
|
? date2Thai(formData.dateMeetingEnd, false, true)
|
|
: null
|
|
"
|
|
hide-bottom-space
|
|
:label="`${'วันเวลาสิ้นสุดการประชุม'}`"
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือกวันเวลาสิ้นสุดการประชุม'}`]"
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-icon name="event" class="cursor-pointer text-primary">
|
|
</q-icon>
|
|
</template>
|
|
</q-input>
|
|
</template>
|
|
</datepicker>
|
|
</div>
|
|
<div class="col-6">
|
|
<q-input
|
|
:class="inputEdit(isReadonly)"
|
|
:readonly="isReadonly"
|
|
dense
|
|
outlined
|
|
v-model="formData.title"
|
|
label="หัวข้อการประชุม"
|
|
for="titleRef"
|
|
hide-bottom-space
|
|
:rules="[(val: string) => !!val || `${'กรุณากรอกหัวข้อการประชุม'}`]"
|
|
/>
|
|
</div>
|
|
<div class="col-12">
|
|
<q-input
|
|
:class="inputEdit(isReadonly)"
|
|
:readonly="isReadonly"
|
|
dense
|
|
outlined
|
|
v-model="formData.consider"
|
|
label="ผลการพิจารณาของคณะกรรมการประเมินผลงานแต่ละคณะ"
|
|
for="considerRef"
|
|
hide-bottom-space
|
|
type="textarea"
|
|
:rules="[(val: string) => !!val || `${'กรุณากรอกผลการพิจารณาของคณะกรรมการประเมินผลงานแต่ละคณะ'}`]"
|
|
/>
|
|
</div>
|
|
<div class="col-12">
|
|
<q-input
|
|
:class="inputEdit(isReadonly)"
|
|
:readonly="isReadonly"
|
|
dense
|
|
outlined
|
|
v-model="formData.period"
|
|
label="ระยะเวลาในการแก้ไขผลงาน"
|
|
for="periodRef"
|
|
hide-bottom-space
|
|
type="textarea"
|
|
:rules="[(val: string) => !!val || `${'กรุณากรอกระยะเวลาในการแก้ไขผลงาน'}`]"
|
|
/>
|
|
</div>
|
|
<div class="col-sm-12 col-md-12" v-if="id">
|
|
<q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
|
|
<div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
|
|
อัปโหลดไฟล์เอกสารหลักฐาน
|
|
</div>
|
|
<div class="col-12"><q-separator /></div>
|
|
<div class="col-12 q-pa-sm row">
|
|
<q-file
|
|
:readonly="isReadonly"
|
|
for="inputFiles"
|
|
class="col-11"
|
|
outlined
|
|
dense
|
|
v-model="file"
|
|
@added="uploadFile"
|
|
label="ไฟล์เอกสารหลักฐาน"
|
|
accept=".pdf,.xlsx,.doc"
|
|
clearable
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-icon name="attach_file" color="primary" />
|
|
</template>
|
|
</q-file>
|
|
|
|
<div class="col-1 self-center text-center">
|
|
<q-btn
|
|
size="14px"
|
|
flat
|
|
round
|
|
dense
|
|
color="add"
|
|
icon="mdi-upload"
|
|
v-if="file"
|
|
@click="uploadFile"
|
|
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 q-pa-sm row" v-if="fileData.length > 0">
|
|
<q-list
|
|
v-for="data in fileData"
|
|
:key="data.id"
|
|
class="full-width"
|
|
bordered
|
|
separator
|
|
>
|
|
<q-item clickable v-ripple>
|
|
<q-item-section>{{ data.fileName }}</q-item-section>
|
|
<q-space />
|
|
<q-btn
|
|
flat
|
|
round
|
|
dense
|
|
color="blue"
|
|
icon="mdi-download"
|
|
@click="fetchDataFileDownload(data.fileName)"
|
|
><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
|
>
|
|
<q-btn
|
|
v-if="!isReadonly"
|
|
flat
|
|
round
|
|
dense
|
|
color="red"
|
|
class="q-ml-sm"
|
|
icon="mdi-delete-outline"
|
|
@click="deleteFile(data.fileName)"
|
|
><q-tooltip>ลบไฟล์</q-tooltip></q-btn
|
|
>
|
|
</q-item>
|
|
</q-list>
|
|
</div>
|
|
<div class="col-12 q-pa-sm" v-else>
|
|
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
|
|
<q-separator v-if="!isReadonly" />
|
|
<div class="row col-12 q-pa-sm" v-if="!isReadonly">
|
|
<q-space />
|
|
<q-btn
|
|
for="ButtonOnSubmit"
|
|
id="formSubmit"
|
|
color="secondary"
|
|
label="บันทึก"
|
|
type="submit"
|
|
><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
|
|
>
|
|
</div>
|
|
</q-card>
|
|
</q-form>
|
|
</template>
|