468 lines
14 KiB
Vue
468 lines
14 KiB
Vue
<script setup lang="ts">
|
|
import { ref, reactive, watch, onMounted } from "vue";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useQuasar } from "quasar";
|
|
import { useRoute } from "vue-router";
|
|
import type {
|
|
FormData,
|
|
FormRef,
|
|
FileOj,
|
|
} from "@/modules/12_evaluatePersonal/interface/index/meeting";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
const route = useRoute();
|
|
const id = ref<string>(route.params.id as string);
|
|
const $q = useQuasar();
|
|
const mixin = useCounterMixin();
|
|
const {
|
|
messageError,
|
|
showLoader,
|
|
dialogMessageNotify,
|
|
dialogConfirm,
|
|
success,
|
|
date2Thai,
|
|
hideLoader,
|
|
dialogRemove,
|
|
} = mixin;
|
|
/**
|
|
* รับ props มาจาก page หลัก
|
|
*/
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
onSubmit: {
|
|
type: Function,
|
|
default: () => "",
|
|
},
|
|
});
|
|
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
|
|
const emit = defineEmits(["formDataReturn"]);
|
|
/**
|
|
* ข้อมูลรหัสบัตรประชาชน
|
|
*/
|
|
//
|
|
const idCard = ref<string>("");
|
|
const file = ref<any>();
|
|
const fileOj = reactive<FileOj[]>([]);
|
|
|
|
const formData = reactive<FormData>({
|
|
id: "",
|
|
rounded: "",
|
|
dateMeeting: "",
|
|
dateMeetingStart: null,
|
|
dateMeetingEnd: null,
|
|
consider: "",
|
|
period: "",
|
|
title: "",
|
|
// file: fileOj,
|
|
});
|
|
|
|
/**
|
|
* เช็คข้อมูลจาก props
|
|
* เมื่อมีข้อมูล
|
|
* เก็บข้อมูลลง formData
|
|
*/
|
|
watch(props.data, async () => {
|
|
// console.log("data==>", 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;
|
|
});
|
|
|
|
/**
|
|
* ตรวจสอบข้อมูลก่อนส่งไปยัง api
|
|
*/
|
|
const roundedRef = ref<object | null>(null);
|
|
const dateMeetingStartRef = ref<object | null>(null);
|
|
const dateMeetingEndRef = ref<object | null>(null);
|
|
const considerRef = ref<object | null>(null);
|
|
const periodRef = ref<object | null>(null);
|
|
const titleRef = ref<object | null>(null);
|
|
|
|
const formRef: FormRef = {
|
|
rounded: roundedRef,
|
|
dateMeetingStartRef: dateMeetingStartRef,
|
|
dateMeetingEndRef: dateMeetingEndRef,
|
|
consider: considerRef,
|
|
period: periodRef,
|
|
title: titleRef,
|
|
};
|
|
|
|
/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
|
function onValidate() {
|
|
const hasError = [];
|
|
for (const key in formRef) {
|
|
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
|
const property = formRef[key];
|
|
if (property.value && typeof property.value.validate === "function") {
|
|
const isValid = property.value.validate();
|
|
hasError.push(isValid);
|
|
}
|
|
}
|
|
}
|
|
if (hasError.every((result) => result === true)) {
|
|
props.onSubmit(formData);
|
|
}
|
|
}
|
|
|
|
const fileData = ref<any>([]);
|
|
/**
|
|
* ดึงค่าจาก api
|
|
*/
|
|
const fetchDataFile = async () => {
|
|
if (id.value != undefined) {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.meetingFilebyId("การประชุม", id.value))
|
|
.then((res) => {
|
|
const dataFile = res.data;
|
|
// const dataFile = res.data.result;
|
|
fileData.value = dataFile;
|
|
})
|
|
.catch((e) => {
|
|
// messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
};
|
|
|
|
/**
|
|
* function download
|
|
*/
|
|
const fileDataDownload = ref<any>([]);
|
|
const fetchDataFileDownload = async (pathName: string) => {
|
|
console.log(fileData.value[0].fileName);
|
|
if (id.value !== undefined) {
|
|
showLoader();
|
|
console.log(fileData.value[0].fileName);
|
|
await 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();
|
|
});
|
|
}
|
|
};
|
|
|
|
/**
|
|
* addFiles
|
|
*/
|
|
function uploadFile() {
|
|
fetchDataFile();
|
|
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) => {})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(async () => {
|
|
hideLoader();
|
|
file.value = null;
|
|
setTimeout(() => fetchDataFile(), 500);
|
|
});
|
|
}
|
|
}
|
|
|
|
function deleteFile(id: string) {
|
|
dialogRemove($q, () => confirmDelete(id));
|
|
}
|
|
|
|
/**
|
|
* ยืนยัน ลบ ไฟล์
|
|
* @param id id file
|
|
*/
|
|
function confirmDelete(fileName: string) {
|
|
showLoader();
|
|
http
|
|
.delete(config.API.meetingFileDowloadbyId("การประชุม", id.value, fileName))
|
|
.then((res) => {
|
|
success($q, `ลบไฟล์สำเร็จ`);
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
setTimeout(() => fetchDataFile(), 1000);
|
|
});
|
|
}
|
|
|
|
//checkDate
|
|
function checkDate() {
|
|
if (formData.dateMeetingEnd !== null && formData.dateMeetingStart !== null) {
|
|
if (formData.dateMeetingEnd <= formData.dateMeetingStart) {
|
|
formData.dateMeetingEnd = null;
|
|
}
|
|
} else {
|
|
console.log("One or both dates are null");
|
|
}
|
|
}
|
|
|
|
function inputEdit(val: boolean) {
|
|
return {
|
|
"full-width cursor-pointer ": val,
|
|
"full-width cursor-pointer inputgreen": !val,
|
|
};
|
|
}
|
|
|
|
/**Hook */
|
|
onMounted(() => {
|
|
setTimeout(() => fetchDataFile(), 500);
|
|
// fetchDataFileDownload();
|
|
});
|
|
</script>
|
|
<template>
|
|
<form @submit.prevent.stop="onValidate">
|
|
<q-card bordered>
|
|
<div class="col-12 row q-pa-md q-col-gutter-md">
|
|
<div class="col-3">
|
|
<q-input
|
|
:class="inputEdit(isReadonly)"
|
|
dense
|
|
outlined
|
|
v-model="formData.rounded"
|
|
label="ครั้งที่"
|
|
ref="roundedRef"
|
|
for="roundedRef"
|
|
hide-bottom-space
|
|
:rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกครั้งที่'}`]"
|
|
/>
|
|
</div>
|
|
<div class="col-3">
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
v-model="formData.dateMeetingStart"
|
|
:locale="'th'"
|
|
autoApply
|
|
:enableTimePicker="true"
|
|
week-start="0"
|
|
@update:model-value="checkDate"
|
|
>
|
|
<template #year="{ year }">{{ year + 543 }}</template>
|
|
<template #year-overlay-value="{ value }">{{
|
|
parseInt(value + 543)
|
|
}}</template>
|
|
<template #trigger>
|
|
<q-input
|
|
for="selectDate"
|
|
dense
|
|
outlined
|
|
lazy-rules
|
|
:model-value="
|
|
formData.dateMeetingStart != null
|
|
? date2Thai(formData.dateMeetingStart, false, true)
|
|
: null
|
|
"
|
|
hide-bottom-space
|
|
:label="`${'วันเวลาที่เริ่มต้นการประชุม'}`"
|
|
>
|
|
<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"
|
|
>
|
|
<template #year="{ year }">{{ year + 543 }}</template>
|
|
<template #year-overlay-value="{ value }">{{
|
|
parseInt(value + 543)
|
|
}}</template>
|
|
<template #trigger>
|
|
<q-input
|
|
for="selectDate"
|
|
dense
|
|
outlined
|
|
lazy-rules
|
|
:model-value="
|
|
formData.dateMeetingEnd != null
|
|
? date2Thai(formData.dateMeetingEnd, false, true)
|
|
: null
|
|
"
|
|
hide-bottom-space
|
|
:label="`${'วันเวลาที่สิ้นสุด'}`"
|
|
>
|
|
<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)"
|
|
dense
|
|
outlined
|
|
v-model="formData.title"
|
|
label="หัวข้อการประชุม"
|
|
ref="titleRef"
|
|
for="titleRef"
|
|
hide-bottom-space
|
|
:rules="[(val: string) => !!val || `${'กรุณากรอกหัวข้อการประชุม'}`]"
|
|
/>
|
|
</div>
|
|
<div class="col-12">
|
|
<q-input
|
|
:class="inputEdit(isReadonly)"
|
|
dense
|
|
outlined
|
|
v-model="formData.consider"
|
|
label="ผลการพิจารณาของคณะกรรมการประเมินผลงานแต่ละคณะ"
|
|
ref="considerRef"
|
|
for="considerRef"
|
|
hide-bottom-space
|
|
type="textarea"
|
|
:rules="[(val: string) => !!val || `${'กรุณากรอกผลการพิจารณาของคณะกรรมการประเมินผลงานแต่ละคณะ'}`]"
|
|
/>
|
|
</div>
|
|
<div class="col-12">
|
|
<q-input
|
|
:class="inputEdit(isReadonly)"
|
|
dense
|
|
outlined
|
|
v-model="formData.period"
|
|
label="ระยะเวลาในการแก้ไขผลงาน"
|
|
ref="periodRef"
|
|
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
|
|
for="inputFiles"
|
|
class="col-11"
|
|
outlined
|
|
dense
|
|
v-model="file"
|
|
@added="uploadFile"
|
|
label="ไฟล์เอกสารหลักฐาน"
|
|
hide-bottom-space
|
|
lazy-rules
|
|
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">
|
|
<!-- v-if="file.length > 0" v-else -->
|
|
<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
|
|
size="12px"
|
|
flat
|
|
round
|
|
dense
|
|
color="blue"
|
|
icon="mdi-download"
|
|
@click="fetchDataFileDownload(data.fileName)"
|
|
><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
|
>
|
|
<q-btn
|
|
size="12px"
|
|
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 />
|
|
<div class="row col-12 q-pa-sm">
|
|
<q-space />
|
|
<q-btn
|
|
for="ButtonOnSubmit"
|
|
id="formSubmit"
|
|
color="secondary"
|
|
label="บันทึก"
|
|
type="submit"
|
|
><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
|
|
>
|
|
</div>
|
|
</q-card>
|
|
</form>
|
|
</template>
|