450 lines
14 KiB
Vue
450 lines
14 KiB
Vue
<script setup lang="ts">
|
|
import { ref, reactive, watch } from "vue";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useQuasar } from "quasar";
|
|
import type {
|
|
FormData,
|
|
FormRef,
|
|
FileOj,
|
|
} from "@/modules/12_evaluatePersonal/interface/index/meeting";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
|
|
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 idCardRef = ref<any>(null);
|
|
|
|
const fileOj = reactive<FileOj[]>([]);
|
|
|
|
const formData = reactive<FormData>({
|
|
rounded: "",
|
|
dateMeeting: "",
|
|
dateMeetingStart: null,
|
|
dateMeetingEnd: null,
|
|
consider: "",
|
|
period: "",
|
|
title: "",
|
|
file: fileOj,
|
|
});
|
|
|
|
/**
|
|
* เช็คข้อมูลจาก props
|
|
* เมื่อมีข้อมูล
|
|
* เก็บข้อมูลลง formData
|
|
*/
|
|
watch(props.data, async () => {
|
|
// console.log("data==>", props.data)
|
|
formData.rounded = props.data.rounded;
|
|
formData.dateMeeting = props.data.dateMeeting;
|
|
formData.consider = props.data.consider;
|
|
formData.period = props.data.period;
|
|
formData.title = props.data.title;
|
|
});
|
|
|
|
/**
|
|
* เพิ่มบุคลากร
|
|
*/
|
|
function addEmployee() {
|
|
if (idCard.value.length === 13) {
|
|
console.log("idCard===>", idCard.value);
|
|
showLoader();
|
|
http
|
|
.post(config.API.profileSearchPersonal(), {
|
|
fieldName: "idcard",
|
|
keyword: idCard.value,
|
|
})
|
|
.then((res) => {
|
|
const dataApi = res.data.result;
|
|
if (dataApi.length > 0) {
|
|
const dataList = dataApi[0];
|
|
formData.rounded = dataList.rounded;
|
|
formData.dateMeeting = dataList.dateMeeting;
|
|
formData.consider = dataList.consider;
|
|
formData.period = dataList.period;
|
|
} else {
|
|
dialogMessageNotify($q, "ไม่มีข้อมูลบุคคลากรที่ต้องการค้นหา");
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(async () => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
if (idCard.value.length !== 13) {
|
|
hideLoader();
|
|
dialogMessageNotify($q, "กรุณากรอกเลขบัตรประชาชนให้ครบ 13 หลัก");
|
|
} else {
|
|
console.log("nodata");
|
|
}
|
|
}
|
|
|
|
/**
|
|
* ตรวจสอบข้อมูลก่อนส่งไปยัง api
|
|
*/
|
|
const roundedRef = ref<object | null>(null);
|
|
const dateMeetingRef = 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,
|
|
dateMeeting: dateMeetingRef,
|
|
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);
|
|
}
|
|
}
|
|
|
|
function uploadFile() {
|
|
// const Data = new FormData();
|
|
// Data.append("file", formData.file);
|
|
// showLoader();
|
|
// http
|
|
// .put(config.API.appealUpLoadFile(formData.id), Data)
|
|
// .then((res) => {
|
|
// console.log(res);
|
|
// success($q, "อัปโหลดไฟล์สำเร็จ");
|
|
// props.getData();
|
|
// // router.push(`/discipline/complaints`);
|
|
// })
|
|
// .catch((e) => {
|
|
// messageError($q, e);
|
|
// })
|
|
// .finally(async () => {
|
|
// hideLoader();
|
|
// formData.file = null;
|
|
// });
|
|
}
|
|
|
|
function downloadFile(link: string) {
|
|
window.open(link, "_blank");
|
|
}
|
|
|
|
function deleteFile(id: string) {
|
|
dialogRemove($q, () => confirmDelete(id));
|
|
}
|
|
|
|
/**
|
|
* ยืนยัน ลบ ไฟล์
|
|
* @param id id file
|
|
*/
|
|
function confirmDelete(id: string) {
|
|
// showLoader();
|
|
// http
|
|
// .delete(config.API.appealDeleteFile(formData.id, id))
|
|
// .then((res) => {
|
|
// success($q, `ลบไฟล์สำเร็จ`);
|
|
// })
|
|
// .catch((e) => {
|
|
// messageError($q, e);
|
|
// })
|
|
// .finally(() => {
|
|
// props.getData();
|
|
// });
|
|
}
|
|
|
|
//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,
|
|
};
|
|
}
|
|
</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">
|
|
<!-- <q-input
|
|
:class="inputEdit(isReadonly)"
|
|
dense
|
|
outlined
|
|
v-model="formData.dateMeeting"
|
|
label="วันเวลาในการประชุม"
|
|
ref="dateMeetingRef"
|
|
for="dateMeetingRef"
|
|
hide-bottom-space
|
|
:rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกวันเวลาในการประชุม'}`]"
|
|
/> -->
|
|
<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">
|
|
<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="formData.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
|
|
v-if="formData.file && isReadonly"
|
|
size="14px"
|
|
flat
|
|
round
|
|
dense
|
|
color="add"
|
|
icon="mdi-upload"
|
|
@click="uploadFile"
|
|
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="formData.file.length > 0" class="col-12 q-pa-sm row">
|
|
<q-list
|
|
v-for="data in formData.file"
|
|
: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="downloadFile(data.pathName)"
|
|
><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.id)"
|
|
><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>
|