เพิ่ม editpage form การลา(ยังไม่เสร็จ)
ยังไม่เสร็จ -api muti upload -api บันทึกแก้ไข -issue ทีอยากปรึกษา บวชพิธีฮัจ ศึกษาดูงาน
This commit is contained in:
AnandaTon
parent
50de210ae3
commit
0b4a87e293
28 changed files with 5653 additions and 213 deletions
|
|
@ -23,4 +23,5 @@ export default {
|
||||||
leaveProfile: () => `${leave}/user/profile`,
|
leaveProfile: () => `${leave}/user/profile`,
|
||||||
leaveCheck: () => `${leave}/user/check`,
|
leaveCheck: () => `${leave}/user/check`,
|
||||||
leaveReport: (id: string) => `${leave}/report/${id}`,
|
leaveReport: (id: string) => `${leave}/report/${id}`,
|
||||||
|
leaveSendReport: () => `${leave}/report-template/docx`,
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -435,7 +435,7 @@ function resetEndDate(type: string) {
|
||||||
|
|
||||||
<div class="row col-12 q-pt-md">
|
<div class="row col-12 q-pt-md">
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -385,7 +385,7 @@ async function saveFormData() {
|
||||||
|
|
||||||
<div class="row col-12 q-pt-md">
|
<div class="row col-12 q-pt-md">
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -441,7 +441,7 @@ async function saveFormData() {
|
||||||
<q-separator class="q-mt-sm" />
|
<q-separator class="q-mt-sm" />
|
||||||
<div class="row col-12 q-pt-md">
|
<div class="row col-12 q-pt-md">
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -436,7 +436,7 @@ const isReadOnly = computed(() => {
|
||||||
<q-separator class="q-mt-sm" />
|
<q-separator class="q-mt-sm" />
|
||||||
<div class="row col-12 q-pt-md">
|
<div class="row col-12 q-pt-md">
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -539,7 +539,7 @@ function updateLeaveTotal() {
|
||||||
|
|
||||||
<div class="row col-12 q-pt-md">
|
<div class="row col-12 q-pt-md">
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -158,8 +158,6 @@ function updateLeaveTotal() {
|
||||||
formDataHaji.leaveTotal = newLeaveTotal
|
formDataHaji.leaveTotal = newLeaveTotal
|
||||||
console.log("test")
|
console.log("test")
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -350,7 +348,7 @@ function updateLeaveTotal() {
|
||||||
<q-separator class="q-mt-sm" />
|
<q-separator class="q-mt-sm" />
|
||||||
<div class="row col-12 q-pt-md">
|
<div class="row col-12 q-pt-md">
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -406,7 +406,7 @@ function updateLeaveTotal() {
|
||||||
<q-separator class="q-mt-sm" />
|
<q-separator class="q-mt-sm" />
|
||||||
<div class="row col-12 q-pt-md">
|
<div class="row col-12 q-pt-md">
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -522,7 +522,7 @@ const formattedleaveSalary = computed(() => {
|
||||||
<q-separator class="q-mt-sm" />
|
<q-separator class="q-mt-sm" />
|
||||||
<div class="row col-12 q-pt-md">
|
<div class="row col-12 q-pt-md">
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -500,7 +500,7 @@ const formattedSalary = computed(() => {
|
||||||
<q-separator class="q-mt-sm" />
|
<q-separator class="q-mt-sm" />
|
||||||
<div class="row col-12 q-pt-md">
|
<div class="row col-12 q-pt-md">
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -369,7 +369,7 @@ async function saveFormData() {
|
||||||
<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
|
<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
|
||||||
<div class="column q-mx-xs">
|
<div class="column q-mx-xs">
|
||||||
<div class="q-pl-sm text-weight-bold text-dark text-center">ดาวน์โหลด</div>
|
<div class="q-pl-sm text-weight-bold text-dark text-center">ดาวน์โหลด</div>
|
||||||
<q-btn color="primary" icon="download" label="ดาวน์โหลดแบบฟอร์ม" @click="onClickDownloadFile(formDataWorkInternational.typeId, 'dataStore.typeId')" />
|
<q-btn color="primary" icon="download" label="ดาวน์โหลดแบบฟอร์ม" @click="onClickDownloadFile('08dc05c8-4cfd-4603-81f8-92a401571717', 'แบบฟอร์ม')" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-10 col-sm-5 col-md-4 q-my-sm">
|
<div class="col-10 col-sm-5 col-md-4 q-my-sm">
|
||||||
|
|
@ -395,7 +395,7 @@ async function saveFormData() {
|
||||||
<q-separator class="q-mt-sm" />
|
<q-separator class="q-mt-sm" />
|
||||||
<div class="row col-12 q-pt-md">
|
<div class="row col-12 q-pt-md">
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
|
||||||
|
|
@ -575,7 +575,7 @@ function updateLeaveTotal() {
|
||||||
<q-separator class="q-mt-sm" />
|
<q-separator class="q-mt-sm" />
|
||||||
<div class="row col-12 q-pt-md">
|
<div class="row col-12 q-pt-md">
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -134,6 +134,41 @@ async function onClickDownloadFile(id: string, fileName: string) {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// //download function
|
||||||
|
// async function onClickUpload() {
|
||||||
|
// // showLoader();
|
||||||
|
// const data = {
|
||||||
|
// template: "leave16",
|
||||||
|
// reportName: "docx-report",
|
||||||
|
// data: {
|
||||||
|
// leaveWrote: "",
|
||||||
|
// dateSendLeave: "",
|
||||||
|
// leaveTypeName: "",
|
||||||
|
// dear: "",
|
||||||
|
// fullname: "",
|
||||||
|
// fullnameEng: "",
|
||||||
|
// positionName: "",
|
||||||
|
// positionLeaveName: "",
|
||||||
|
// organizationName: "",
|
||||||
|
// leaveDateStart: "",
|
||||||
|
// leaveDateEnd: "",
|
||||||
|
// },
|
||||||
|
// }
|
||||||
|
// await http
|
||||||
|
// .post(config.API.leaveReport())
|
||||||
|
// .then(async res => {
|
||||||
|
// console.log(res)
|
||||||
|
// const data = res.data.result
|
||||||
|
// await genReport(data, "รายงาน")
|
||||||
|
// })
|
||||||
|
// .catch(err => {
|
||||||
|
// messageError($q, err)
|
||||||
|
// })
|
||||||
|
// .finally(() => {
|
||||||
|
// // hideLoader();
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||||
*/
|
*/
|
||||||
|
|
@ -313,7 +348,7 @@ async function saveFormData() {
|
||||||
<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
|
<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
|
||||||
<div class="column q-mx-xs">
|
<div class="column q-mx-xs">
|
||||||
<div class="q-pl-sm text-weight-bold text-dark text-center">ดาวน์โหลด</div>
|
<div class="q-pl-sm text-weight-bold text-dark text-center">ดาวน์โหลด</div>
|
||||||
<q-btn color="primary" icon="download" label="ดาวน์โหลดแบบฟอร์ม" @click="onClickDownloadFile(formDataRehabilitation.typeId, ' dataStore.typeId')" />
|
<q-btn color="primary" icon="download" label="ดาวน์โหลดแบบฟอร์ม" @click="onClickDownloadFile('08dc05c8-4cfd-4603-81f8-92a401571717', 'แบบฟอร์ม')" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-10 col-sm-5 col-md-4 q-my-sm">
|
<div class="col-10 col-sm-5 col-md-4 q-my-sm">
|
||||||
|
|
@ -339,7 +374,7 @@ async function saveFormData() {
|
||||||
<q-separator class="q-mt-sm" />
|
<q-separator class="q-mt-sm" />
|
||||||
<div class="row col-12 q-pt-md">
|
<div class="row col-12 q-pt-md">
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
|
||||||
|
|
@ -1,81 +1,82 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted } from "vue";
|
import { ref, onMounted } from "vue"
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar"
|
||||||
import http from "@/plugins/http";
|
import http from "@/plugins/http"
|
||||||
import config from "@/app.config";
|
import config from "@/app.config"
|
||||||
|
import { useRouter, useRoute } from "vue-router"
|
||||||
|
|
||||||
/** import type*/
|
/** import type*/
|
||||||
import type { LeaveType } from "@/modules/05_leave/interface/response/leave";
|
import type { LeaveType } from "@/modules/05_leave/interface/response/leave"
|
||||||
|
|
||||||
/** import componest*/
|
/** import componest*/
|
||||||
import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue";
|
import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue"
|
||||||
import Table from "@/modules/05_leave/components/Table.vue";
|
import Table from "@/modules/05_leave/components/Table.vue"
|
||||||
|
|
||||||
/** import stort*/
|
/** import stort*/
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin"
|
||||||
import { useLeaveStore } from "@/modules/05_leave/store";
|
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||||
|
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin()
|
||||||
const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } =
|
const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } = mixin
|
||||||
mixin;
|
const LeaveData = useLeaveStore()
|
||||||
const LeaveData = useLeaveStore();
|
const router = useRouter()
|
||||||
|
const route = useRoute()
|
||||||
const $q = useQuasar();
|
const $q = useQuasar()
|
||||||
|
|
||||||
/** filter */
|
/** filter */
|
||||||
const year = ref<number>(new Date().getFullYear());
|
const year = ref<number>(new Date().getFullYear())
|
||||||
const type = ref<string>("00000000-0000-0000-0000-000000000000");
|
const type = ref<string>("00000000-0000-0000-0000-000000000000")
|
||||||
const status = ref<string>("ALL");
|
const status = ref<string>("ALL")
|
||||||
const filter = ref<string>("");
|
const filter = ref<string>("")
|
||||||
|
|
||||||
/** pagination*/
|
/** pagination*/
|
||||||
const maxPage = ref<number>(1);
|
const maxPage = ref<number>(1)
|
||||||
const page = ref<number>(1);
|
const page = ref<number>(1)
|
||||||
const pageSize = ref<number>(10);
|
const pageSize = ref<number>(10)
|
||||||
|
|
||||||
/** function เรียกข้อมูลการลา*/
|
/** function เรียกข้อมูลการลา*/
|
||||||
async function fetchDataTable() {
|
async function fetchDataTable() {
|
||||||
showLoader();
|
showLoader()
|
||||||
const body = {
|
const body = {
|
||||||
year: year.value, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
|
year: year.value, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
|
||||||
type: type.value, //*Id ประเภทการลา
|
type: type.value, //*Id ประเภทการลา
|
||||||
status: status.value, //*สถานะการของลา
|
status: status.value, //*สถานะการของลา
|
||||||
page: page.value.toString(), //*หน้า
|
page: page.value.toString(), //*หน้า
|
||||||
pageSize: pageSize.value.toString(), //*จำนวนแถวต่อหน้า
|
pageSize: pageSize.value.toString(), //*จำนวนแถวต่อหน้า
|
||||||
keyword: filter.value, //keyword ค้นหา
|
keyword: filter.value, //keyword ค้นหา
|
||||||
};
|
}
|
||||||
await http
|
await http
|
||||||
.post(config.API.leaveTableList(), body)
|
.post(config.API.leaveTableList(), body)
|
||||||
.then((res) => {
|
.then(res => {
|
||||||
const data = res.data.result.data;
|
const data = res.data.result.data
|
||||||
LeaveData.fetchListLeave(data);
|
LeaveData.fetchListLeave(data)
|
||||||
maxPage.value = Math.ceil(res.data.result.total / pageSize.value);
|
maxPage.value = Math.ceil(res.data.result.total / pageSize.value)
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch(err => {
|
||||||
messageError($q, err);
|
messageError($q, err)
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
hideLoader();
|
hideLoader()
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const leaveType = ref<LeaveType[]>();
|
const leaveType = ref<LeaveType[]>()
|
||||||
/** function เรียกประเภทการลา */
|
/** function เรียกประเภทการลา */
|
||||||
async function fectOptionType() {
|
async function fectOptionType() {
|
||||||
await http
|
await http
|
||||||
.get(config.API.leaveType())
|
.get(config.API.leaveType())
|
||||||
.then(async (res) => {
|
.then(async res => {
|
||||||
leaveType.value = res.data.result;
|
leaveType.value = res.data.result
|
||||||
LeaveData.fetchLeaveType(res.data.result);
|
LeaveData.fetchLeaveType(res.data.result)
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch(err => {
|
||||||
messageError($q, err);
|
messageError($q, err)
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const modal = ref<boolean>(false);
|
const modal = ref<boolean>(false)
|
||||||
const leaveId = ref<string>("");
|
const leaveId = ref<string>("")
|
||||||
const leaveStatus = ref<string>("");
|
const leaveStatus = ref<string>("")
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* function openPopupDateail
|
* function openPopupDateail
|
||||||
|
|
@ -83,14 +84,18 @@ const leaveStatus = ref<string>("");
|
||||||
* @param status การลา
|
* @param status การลา
|
||||||
*/
|
*/
|
||||||
const onClickView = async (id: string, status: string) => {
|
const onClickView = async (id: string, status: string) => {
|
||||||
modal.value = true;
|
modal.value = true
|
||||||
leaveId.value = id;
|
leaveId.value = id
|
||||||
leaveStatus.value = status;
|
leaveStatus.value = status
|
||||||
};
|
}
|
||||||
|
|
||||||
|
const onClickEdit = async (id: string, status: string) => {
|
||||||
|
router.push(`/leave/edit/${id}`)
|
||||||
|
}
|
||||||
|
|
||||||
/** function closePopup*/
|
/** function closePopup*/
|
||||||
async function onClickClose() {
|
async function onClickClose() {
|
||||||
modal.value = false;
|
modal.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -101,13 +106,13 @@ async function onClickClose() {
|
||||||
* @param k คำค้นหา
|
* @param k คำค้นหา
|
||||||
*/
|
*/
|
||||||
async function updateFilterTable(y: number, t: string, s: string, k: string) {
|
async function updateFilterTable(y: number, t: string, s: string, k: string) {
|
||||||
if (t && s) {
|
if (t && s) {
|
||||||
year.value = await y;
|
year.value = await y
|
||||||
type.value = await t;
|
type.value = await t
|
||||||
status.value = await s;
|
status.value = await s
|
||||||
filter.value = await k;
|
filter.value = await k
|
||||||
await fetchDataTable();
|
await fetchDataTable()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -116,122 +121,83 @@ async function updateFilterTable(y: number, t: string, s: string, k: string) {
|
||||||
* @param ps แถวต่อหน้า
|
* @param ps แถวต่อหน้า
|
||||||
*/
|
*/
|
||||||
async function updatePagination(p: number, ps: number) {
|
async function updatePagination(p: number, ps: number) {
|
||||||
(page.value = await p), (pageSize.value = await ps);
|
;(page.value = await p), (pageSize.value = await ps)
|
||||||
await fetchDataTable();
|
await fetchDataTable()
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
|
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
|
||||||
*/
|
*/
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await fetchDataTable();
|
await fetchDataTable()
|
||||||
await fectOptionType();
|
await fectOptionType()
|
||||||
});
|
})
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<Table
|
<Table
|
||||||
|
:rows="LeaveData.rows"
|
||||||
|
:columns="LeaveData.columns"
|
||||||
|
:visible-columns="LeaveData.visibleColumns"
|
||||||
|
v-model:inputfilter="filter"
|
||||||
|
v-model:inputvisible="LeaveData.visibleColumns"
|
||||||
|
:inputShow="true"
|
||||||
|
:grid="$q.screen.gt.xs ? false : true"
|
||||||
|
@update:filter="updateFilterTable"
|
||||||
|
@update:Pagination="updatePagination"
|
||||||
|
:maxPage="maxPage"
|
||||||
|
:pageSize="pageSize"
|
||||||
|
:leaveType="leaveType"
|
||||||
|
>
|
||||||
|
<template #columns="props">
|
||||||
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
|
<q-td key="no" :props="props" @click="onClickView(props.row.id, props.row.status)">
|
||||||
|
{{ (page - 1) * pageSize + props.rowIndex + 1 }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="leaveTypeName" :props="props" @click="onClickView(props.row.id, props.row.status)">
|
||||||
|
{{ props.row.leaveTypeName }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="dateSendLeave" :props="props" @click="onClickView(props.row.id, props.row.status)">
|
||||||
|
{{ props.row.dateSendLeave }}
|
||||||
|
</q-td>
|
||||||
|
|
||||||
:rows="LeaveData.rows"
|
<q-td key="status" :props="props">
|
||||||
:columns="LeaveData.columns"
|
<div class="col-12 row items-center">
|
||||||
:visible-columns="LeaveData.visibleColumns"
|
<div @click="onClickView(props.row.id, props.row.status)">
|
||||||
v-model:inputfilter="filter"
|
<q-icon v-if="props.row.status == 'APPROVE'" size="10px" color="light-green" name="mdi-circle" class="q-mr-sm" />
|
||||||
v-model:inputvisible="LeaveData.visibleColumns"
|
<q-icon v-else-if="props.row.status == 'REJECT'" size="10px" color="red-6" name="mdi-circle" class="q-mr-sm" />
|
||||||
:inputShow="true"
|
<q-icon v-else-if="props.row.status == 'PENDING'" size="10px" color="light-blue-14" name="mdi-circle" class="q-mr-sm" />
|
||||||
:grid="$q.screen.gt.xs ? false : true"
|
<q-icon v-else-if="props.row.status == 'NEW'" size="10px" color="orange" name="mdi-circle" class="q-mr-sm" />
|
||||||
@update:filter="updateFilterTable"
|
<q-icon v-if="props.row.status == 'DELETE'" size="10px" color="grey-10" name="mdi-circle" class="q-mr-sm" />
|
||||||
@update:Pagination="updatePagination"
|
|
||||||
:maxPage="maxPage"
|
|
||||||
:pageSize="pageSize"
|
|
||||||
:leaveType="leaveType"
|
|
||||||
>
|
|
||||||
<template #columns="props">
|
|
||||||
<q-tr :props="props" class="cursor-pointer">
|
|
||||||
<q-td
|
|
||||||
key="no"
|
|
||||||
:props="props"
|
|
||||||
@click="onClickView(props.row.id, props.row.status)"
|
|
||||||
>
|
|
||||||
{{ (page - 1) * pageSize + props.rowIndex + 1 }}
|
|
||||||
</q-td>
|
|
||||||
<q-td
|
|
||||||
key="leaveTypeName"
|
|
||||||
:props="props"
|
|
||||||
@click="onClickView(props.row.id, props.row.status)"
|
|
||||||
>
|
|
||||||
{{ props.row.leaveTypeName }}
|
|
||||||
</q-td>
|
|
||||||
<q-td
|
|
||||||
key="dateSendLeave"
|
|
||||||
:props="props"
|
|
||||||
@click="onClickView(props.row.id, props.row.status)"
|
|
||||||
>
|
|
||||||
{{ props.row.dateSendLeave }}
|
|
||||||
</q-td>
|
|
||||||
|
|
||||||
<q-td key="status" :props="props">
|
<span class="q-pr-md">{{ props.row.statusConvert }}</span>
|
||||||
<div class="col-12 row items-center">
|
</div>
|
||||||
<div @click="onClickView(props.row.id, props.row.status)">
|
<q-space />
|
||||||
<q-icon
|
<q-btn
|
||||||
v-if="props.row.status == 'APPROVE'"
|
v-if="props.row.status != 'DELETE' && props.row.status != 'REJECT' && props.row.status != 'CANCEL'"
|
||||||
size="10px"
|
label="ขอยกเลิก"
|
||||||
color="light-green"
|
@click="onClickView(props.row.id, 'CANCEL')"
|
||||||
name="mdi-circle"
|
size="13px"
|
||||||
class="q-mr-sm"
|
class="q-px-sm"
|
||||||
/>
|
outline
|
||||||
<q-icon
|
dense
|
||||||
v-else-if="props.row.status == 'REJECT'"
|
color="orange"
|
||||||
size="10px"
|
/>
|
||||||
color="red-6"
|
<q-space />
|
||||||
name="mdi-circle"
|
<q-btn
|
||||||
class="q-mr-sm"
|
v-if="props.row.status != 'DELETE' && props.row.status != 'REJECT' && props.row.status != 'CANCEL'"
|
||||||
/>
|
label="ขอยืนยันการลา"
|
||||||
<q-icon
|
@click="onClickEdit(props.row.id, 'CANCEL')"
|
||||||
v-else-if="props.row.status == 'PENDING'"
|
size="13px"
|
||||||
size="10px"
|
class="q-px-sm"
|
||||||
color="light-blue-14"
|
outline
|
||||||
name="mdi-circle"
|
dense
|
||||||
class="q-mr-sm"
|
color="primary"
|
||||||
/>
|
/>
|
||||||
<q-icon
|
</div>
|
||||||
v-else-if="props.row.status == 'NEW'"
|
</q-td>
|
||||||
size="10px"
|
</q-tr>
|
||||||
color="orange"
|
</template>
|
||||||
name="mdi-circle"
|
</Table>
|
||||||
class="q-mr-sm"
|
|
||||||
/>
|
|
||||||
<q-icon
|
|
||||||
v-if="props.row.status == 'DELETE'"
|
|
||||||
size="10px"
|
|
||||||
color="grey-10"
|
|
||||||
name="mdi-circle"
|
|
||||||
class="q-mr-sm"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<span class="q-pr-md">{{ props.row.statusConvert }}</span>
|
<DialogDetail :modal="modal" :leaveId="leaveId" :leaveStatus="leaveStatus" :onClickClose="onClickClose" :leaveType="leaveType" :fetchDataTable="fetchDataTable" />
|
||||||
</div>
|
|
||||||
<q-space />
|
|
||||||
<q-btn
|
|
||||||
v-if="props.row.status != 'DELETE' && props.row.status != 'REJECT' && props.row.status != 'CANCEL'"
|
|
||||||
label="ขอยกเลิก"
|
|
||||||
@click="onClickView(props.row.id, 'CANCEL')"
|
|
||||||
size="13px"
|
|
||||||
class="q-px-sm"
|
|
||||||
outline
|
|
||||||
dense
|
|
||||||
color="orange"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
</Table>
|
|
||||||
|
|
||||||
<DialogDetail
|
|
||||||
:modal="modal"
|
|
||||||
:leaveId="leaveId"
|
|
||||||
:leaveStatus="leaveStatus"
|
|
||||||
:onClickClose="onClickClose"
|
|
||||||
:leaveType="leaveType"
|
|
||||||
:fetchDataTable="fetchDataTable"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
142
src/modules/05_leave/components/formEdit/Form.vue
Normal file
142
src/modules/05_leave/components/formEdit/Form.vue
Normal file
|
|
@ -0,0 +1,142 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, onMounted } from "vue"
|
||||||
|
import { useCounterMixin } from "@/stores/mixin"
|
||||||
|
import { useQuasar } from "quasar"
|
||||||
|
import type { FormData } from "@/modules/05_leave/interface/request/AddAbsence"
|
||||||
|
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||||
|
import http from "@/plugins/http"
|
||||||
|
import config from "@/app.config"
|
||||||
|
|
||||||
|
const $q = useQuasar()
|
||||||
|
const mixin = useCounterMixin()
|
||||||
|
const dataStore = useLeaveStore()
|
||||||
|
const { date2Thai, success, messageError } = mixin
|
||||||
|
|
||||||
|
/** รับ props มาจากหน้าหลัก */
|
||||||
|
const props = defineProps({
|
||||||
|
model: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
leaveTypeId: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
onSubmit: {
|
||||||
|
type: Function,
|
||||||
|
default: () => "",
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
/** ข้อมูล v-model ของฟอร์ม */
|
||||||
|
// const formData = reactive<FormData>({
|
||||||
|
// dateStart: new Date(),
|
||||||
|
// subject: "เรื่อง",
|
||||||
|
// who: "เรียนผู้ใด",
|
||||||
|
// requestName: "ชื่อผู้ยื่น",
|
||||||
|
// position: "ตำแหน่ง",
|
||||||
|
// level: "ระดับ",
|
||||||
|
// ocRequest: "สังกัด",
|
||||||
|
// leaveabsentDaySummon: "2",
|
||||||
|
// leaveUse: "1",
|
||||||
|
// leaveRemaining: "1",
|
||||||
|
// })
|
||||||
|
/**
|
||||||
|
*ตัวแปร profile ที่จะส่งออก
|
||||||
|
*/
|
||||||
|
const dateSendLeave = ref<Date>() //วันที่ยื่นใบลา
|
||||||
|
const leaveTypeName = ref<string>("") //Name ประเภทการลา
|
||||||
|
const dear = ref<string>("") //เรียน
|
||||||
|
const fullName = ref<string>("") //คำนำหน้า ชื่อ นามสกุล ผู้ยื่นขอ
|
||||||
|
const positionName = ref<string>("") //ตำแหน่งผู้ยื่นขอ
|
||||||
|
const positionLevelName = ref<string>("") //ระดับผู้ยื่นขอ
|
||||||
|
const organizationName = ref<string>("") //สังกัดผู้ยื่นขอ
|
||||||
|
const leaveLimit = ref<number>(0) //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน(ภายในปีนั้น)
|
||||||
|
const leaveTotal = ref<number>(0) //ลาไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน(ภายในปีนั้น)
|
||||||
|
const leaveRemain = ref<number>(0) //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน(ภายในปีนั้น)
|
||||||
|
const restDayTotalOld = ref<number>(0) //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา
|
||||||
|
const birthDate = ref<Date>() //วันเกิด
|
||||||
|
const dateAppoint = ref<Date>() //วันที่เข้ารับราชการ
|
||||||
|
const salary = ref<number>(0) //เงินเดือนปัจจุบัน
|
||||||
|
const salaryText = ref<string>("") //เงินเดือนปัจจุบัน(ภาษาไทย)
|
||||||
|
const leaveLast = ref<any>()
|
||||||
|
const restDayCurrentTotal = ref<string>("")
|
||||||
|
//ดึงข้อมูล profile จาก API
|
||||||
|
async function fetchProfile() {
|
||||||
|
console.log(props.leaveTypeId)
|
||||||
|
|
||||||
|
await http
|
||||||
|
.post(config.API.leaveProfile(), { type: props.leaveTypeId })
|
||||||
|
.then((res: any) => {
|
||||||
|
const data = res.data.result
|
||||||
|
dateSendLeave.value = data.dateSendLeave
|
||||||
|
leaveTypeName.value = data.leaveTypeName
|
||||||
|
dear.value = data.dear
|
||||||
|
fullName.value = data.fullName
|
||||||
|
positionName.value = data.positionName
|
||||||
|
positionLevelName.value = data.positionLevelName
|
||||||
|
organizationName.value = data.organizationName
|
||||||
|
leaveLimit.value = data.leaveLimit
|
||||||
|
leaveTotal.value = data.leaveTotal
|
||||||
|
leaveRemain.value = data.leaveRemain
|
||||||
|
restDayTotalOld.value = data.restDayTotalOld
|
||||||
|
birthDate.value = data.birthDate
|
||||||
|
dateAppoint.value = data.dateAppoint
|
||||||
|
salary.value = data.salary
|
||||||
|
salaryText.value = data.salaryText
|
||||||
|
leaveLast.value = date2Thai(data.leaveLast) !== "0001-01-01T00:00:00" ? date2Thai(data.leaveLast) : "-"
|
||||||
|
restDayCurrentTotal.value = data.restDayCurrentTotal
|
||||||
|
})
|
||||||
|
.catch((e: any) => {
|
||||||
|
messageError($q, e)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await setTimeout(() => fetchProfile(), 500)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<q-card bordered class="q-pa-md bg-grey-1">
|
||||||
|
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||||
|
<datepicker class="col-12 col-sm-4" menu-class-name="modalfix" v-model="dateSendLeave" :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0" readonly>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
bg-color="white"
|
||||||
|
hide-bottom-space
|
||||||
|
readonly
|
||||||
|
class="full-width"
|
||||||
|
:model-value="dateSendLeave != null ? date2Thai(dateSendLeave) : null"
|
||||||
|
:label="`${'วันที่ยื่นใบลา'}`"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer inputblack" style="color: var(--black)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
<q-input class="col-12 col-sm-4" dense bg-color="white" outlined readonly v-model="leaveTypeName" label="เรื่อง" />
|
||||||
|
<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="dear" label="เรียน" />
|
||||||
|
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="fullName" label="ชื่อผู้ยื่นขอ" />
|
||||||
|
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="positionName" label="ตำแหน่งผู้ยื่นขอ" />
|
||||||
|
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="positionLevelName" label="ระดับผู้ยื่นขอ" />
|
||||||
|
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="organizationName" label="สังกัดผู้ยื่นขอ" />
|
||||||
|
<q-input v-if="leaveTypeName === 'ลาพักผ่อน'" class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="leaveLimit" label="จำนวนสิทธิ์การลาที่ได้รับ" />
|
||||||
|
<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="leaveTotal" label="จำนวนสิทธิ์การลาที่ใช้ไป" />
|
||||||
|
<q-input v-if="leaveTypeName === 'ลาพักผ่อน'" class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="leaveRemain" label="จำนวนสิทธิ์การลาคงเหลือ" />
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</template>
|
||||||
391
src/modules/05_leave/components/formEdit/formEdit_Birth.vue
Normal file
391
src/modules/05_leave/components/formEdit/formEdit_Birth.vue
Normal file
|
|
@ -0,0 +1,391 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, watch } from "vue"
|
||||||
|
import { useQuasar } from "quasar"
|
||||||
|
import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm"
|
||||||
|
import { useCounterMixin } from "@/stores/mixin"
|
||||||
|
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||||
|
import http from "@/plugins/http"
|
||||||
|
import config from "@/app.config"
|
||||||
|
import { useRouter } from "vue-router"
|
||||||
|
|
||||||
|
/** Use */
|
||||||
|
const dataStore = useLeaveStore()
|
||||||
|
const mixin = useCounterMixin()
|
||||||
|
const router = useRouter()
|
||||||
|
const $q = useQuasar()
|
||||||
|
const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin
|
||||||
|
const edit = ref<boolean>(true)
|
||||||
|
|
||||||
|
/** รับ props มาจากหน้าหลัก */
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
onSubmit: {
|
||||||
|
type: Function,
|
||||||
|
default: () => "",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
/** ข้อมูล v-model ของฟอร์ม */
|
||||||
|
const formDataBirth = reactive<any>({
|
||||||
|
type: dataStore.typeId,
|
||||||
|
leaveWrote: "",
|
||||||
|
leaveStartDate: null,
|
||||||
|
leaveEndDate: null,
|
||||||
|
leaveTotal: "",
|
||||||
|
leaveLast: "",
|
||||||
|
leaveNumber: "",
|
||||||
|
leaveAddress: "",
|
||||||
|
leaveDetail: "",
|
||||||
|
leaveDocument: [],
|
||||||
|
})
|
||||||
|
|
||||||
|
/** ตัวแปร ref สำหรับแสดง validate */
|
||||||
|
const leaveWroteRef = ref<object | null>(null)
|
||||||
|
const leaveStartDateRef = ref<object | null>(null)
|
||||||
|
const leaveEndDateRef = ref<object | null>(null)
|
||||||
|
const leaveTotalRef = ref<object | null>(null)
|
||||||
|
const leaveNumberRef = ref<object | null>(null)
|
||||||
|
const leaveAddressRef = ref<object | null>(null)
|
||||||
|
const leaveDetailRef = ref<object | null>(null)
|
||||||
|
const leaveDocumentRef = ref<object | null>(null)
|
||||||
|
|
||||||
|
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||||
|
const FormRef: FormRef = {
|
||||||
|
leaveWrote: leaveWroteRef,
|
||||||
|
leaveStartDate: leaveStartDateRef,
|
||||||
|
leaveEndDate: leaveEndDateRef,
|
||||||
|
leaveTotal: leaveTotalRef,
|
||||||
|
leaveNumber: leaveNumberRef,
|
||||||
|
leaveAddress: leaveAddressRef,
|
||||||
|
leaveDetail: leaveDetailRef,
|
||||||
|
leaveDocument: leaveDocumentRef,
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||||
|
watch(props.data, async () => {
|
||||||
|
// console.log("data==>", props.data)
|
||||||
|
formDataBirth.leaveWrote = props.data.leaveWrote
|
||||||
|
formDataBirth.leaveStartDate = props.data.leaveStartDate
|
||||||
|
formDataBirth.leaveEndDate = props.data.leaveEndDate
|
||||||
|
formDataBirth.leaveTotal = props.data.leaveTotal
|
||||||
|
formDataBirth.leaveNumber = props.data.leaveNumber
|
||||||
|
formDataBirth.leaveDetail = props.data.leaveDetail
|
||||||
|
formDataBirth.leaveDocument = props.data.leaveDocument
|
||||||
|
})
|
||||||
|
|
||||||
|
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||||
|
const nameFile = ref<string>("")
|
||||||
|
const fileDocDataUpload = ref<File[]>([])
|
||||||
|
async function fileUploadDoc(files: any) {
|
||||||
|
files.forEach((file: any) => {
|
||||||
|
fileDocDataUpload.value.push(file)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||||
|
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)) {
|
||||||
|
onSubmit()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ฟังก์ชั่น บันทึก */
|
||||||
|
const onSubmit = async () => {
|
||||||
|
dialogConfirm(
|
||||||
|
$q,
|
||||||
|
async () => {
|
||||||
|
await saveFormData()
|
||||||
|
},
|
||||||
|
"ยืนยันการยื่นใบลา",
|
||||||
|
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* check ว่าลาได้ไหม จาก api
|
||||||
|
* @param formData
|
||||||
|
*/
|
||||||
|
const isLeave = ref<boolean>(true)
|
||||||
|
async function FetchCheck() {
|
||||||
|
await http
|
||||||
|
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataBirth.leaveStartDate ?? null, EndLeaveDate: formDataBirth.leaveEndDate ?? null })
|
||||||
|
.then((res: any) => {
|
||||||
|
const data = res.data.result
|
||||||
|
isLeave.value = data.isLeave
|
||||||
|
if (data.isLeave === true) {
|
||||||
|
formDataBirth.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||||
|
// formDataBirth.leaveLast = data.sumDateWork
|
||||||
|
} else {
|
||||||
|
fails($q, "ไม่สามารถลาได้")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((e: any) => {
|
||||||
|
messageError($q, e)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||||
|
*/
|
||||||
|
async function saveFormData() {
|
||||||
|
const formData = new FormData()
|
||||||
|
// if (formDataBirth.leaveDocument.length > 0) {
|
||||||
|
// const blob = formDataBirth.leaveDocument.slice(0, formDataBirth.leaveDocument[0].size)
|
||||||
|
// const newFile = new File(blob, nameFile.value, {
|
||||||
|
// type: formDataBirth.leaveDocument[0].type,
|
||||||
|
// })
|
||||||
|
// formData.append("leaveDocument", newFile)
|
||||||
|
// }
|
||||||
|
formData.append("leaveDocument", formDataBirth.leaveDocument)
|
||||||
|
formData.append("type", formDataBirth.type)
|
||||||
|
formData.append("leaveStartDate", dateToISO(formDataBirth.leaveStartDate))
|
||||||
|
formData.append("leaveEndDate", dateToISO(formDataBirth.leaveEndDate))
|
||||||
|
formData.append("leaveWrote", formDataBirth.leaveWrote)
|
||||||
|
formData.append("leaveAddress", formDataBirth.leaveAddress)
|
||||||
|
formData.append("leaveNumber", formDataBirth.leaveNumber)
|
||||||
|
formData.append("leaveDetail", formDataBirth.leaveDetail)
|
||||||
|
|
||||||
|
await http
|
||||||
|
.post(config.API.leaveUser(), formData)
|
||||||
|
.then((res: any) => {
|
||||||
|
success($q, "บันทึกสำเร็จ")
|
||||||
|
router.push(`/leave`)
|
||||||
|
})
|
||||||
|
.catch((e: any) => {
|
||||||
|
messageError($q, e)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- ฟอร์มลาคลอดบุตร-->
|
||||||
|
<template>
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||||
|
</div>
|
||||||
|
<form @submit.prevent.stop="onValidate">
|
||||||
|
<q-card bordered class="q-pa-md bg-grey-1">
|
||||||
|
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
ref="leaveWroteRef"
|
||||||
|
for="leaveWroteRef"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
v-model="props.data.leaveWrote"
|
||||||
|
label="เขียนที่"
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
:readonly="!edit"
|
||||||
|
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<datepicker
|
||||||
|
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="props.data.leaveDateStart"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
hide-bottom-space
|
||||||
|
borderless
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
:readonly="!edit"
|
||||||
|
@update:model-value="props.data.leaveDateEnd = null"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
ref="leaveStartDateRef"
|
||||||
|
for="leaveStartDateRef"
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
:readonly="!edit"
|
||||||
|
class="full-width datepicker"
|
||||||
|
:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
|
||||||
|
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
|
||||||
|
<datepicker
|
||||||
|
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="props.data.leaveDateEnd"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
@update:model-value="FetchCheck()"
|
||||||
|
borderless
|
||||||
|
hide-bottom-space
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
:readonly="!props.data.leaveDateStart"
|
||||||
|
:min-date="props.data.leaveDateStart"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
ref="leaveEndDateRef"
|
||||||
|
for="leaveEndDateRef"
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
:readonly="!props.data.leaveDateStart"
|
||||||
|
class="full-width datepicker"
|
||||||
|
:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
|
||||||
|
:label="`${'ลาถึงวันที่'}`"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-md-3 col-sm-6"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
ref="leaveTotalRef"
|
||||||
|
for="leaveTotalRef"
|
||||||
|
v-model="props.data.leaveTotal"
|
||||||
|
label="จำนวนวันที่ลา"
|
||||||
|
bg-color="white"
|
||||||
|
readonly
|
||||||
|
hide-bottom-space
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-md-3 col-sm-6"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
ref="leaveLastRef"
|
||||||
|
for="leaveLastRef"
|
||||||
|
v-model="dataStore.leaveLast"
|
||||||
|
label="ลาครั้งสุดท้ายเมื่อวันที่"
|
||||||
|
readonly
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
/>
|
||||||
|
<div class="full-width">
|
||||||
|
<div class="q-col-gutter-sm row">
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
ref="leaveNumberRef"
|
||||||
|
for="leaveNumberRef"
|
||||||
|
v-model="props.data.leaveNumber"
|
||||||
|
mask="(###)-###-####"
|
||||||
|
unmasked-value
|
||||||
|
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||||
|
:readonly="!edit"
|
||||||
|
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
ref="leaveAddressRef"
|
||||||
|
for="leaveAddressRef"
|
||||||
|
v-model="props.data.leaveAddress"
|
||||||
|
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||||
|
:readonly="!edit"
|
||||||
|
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<q-input
|
||||||
|
type="textarea"
|
||||||
|
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
bg-color="white"
|
||||||
|
ref="leaveDetailRef"
|
||||||
|
for="leaveDetailRef"
|
||||||
|
v-model="props.data.leaveDetail"
|
||||||
|
label="รายละเอียด"
|
||||||
|
:readonly="!edit"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-file
|
||||||
|
for="leaveDocumentRef"
|
||||||
|
hide-bottom-space
|
||||||
|
v-model="props.data.leaveDocument"
|
||||||
|
@added="fileUploadDoc"
|
||||||
|
dense
|
||||||
|
bg-color="white"
|
||||||
|
label="เอกสารประกอบ"
|
||||||
|
outlined
|
||||||
|
use-chips
|
||||||
|
multiple
|
||||||
|
class="q-pl-sm col-12"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="attach_file" color="primary" />
|
||||||
|
</template>
|
||||||
|
</q-file>
|
||||||
|
|
||||||
|
<div class="col-12 row" v-if="!edit">
|
||||||
|
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||||
|
</div>
|
||||||
|
<q-card bordered flat class="full-width">
|
||||||
|
<q-list separator>
|
||||||
|
<q-item v-for="(file, index) in props.data.leaveDocument" :key="index" class="q-my-xs">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label class="full-width ellipsis">
|
||||||
|
{{ file.name }}
|
||||||
|
</q-item-label>
|
||||||
|
<q-item-label caption> </q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
|
<q-separator class="q-mt-sm" />
|
||||||
|
|
||||||
|
<div class="row col-12 q-pt-md">
|
||||||
|
<q-space />
|
||||||
|
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,570 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, watch, computed, onMounted } from "vue"
|
||||||
|
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/FollowSpouseForm"
|
||||||
|
import { useCounterMixin } from "@/stores/mixin"
|
||||||
|
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||||
|
import { useQuasar } from "quasar"
|
||||||
|
import http from "@/plugins/http"
|
||||||
|
import config from "@/app.config"
|
||||||
|
import { useRouter } from "vue-router"
|
||||||
|
|
||||||
|
/** Use */
|
||||||
|
const dataStore = useLeaveStore()
|
||||||
|
const $q = useQuasar()
|
||||||
|
const mixin = useCounterMixin()
|
||||||
|
const router = useRouter()
|
||||||
|
const { dialogConfirm, date2Thai, arabicNumberToText, calculateDurationYmd, dateToISO, fails, success, messageError } = mixin
|
||||||
|
const edit = ref<boolean>(true)
|
||||||
|
|
||||||
|
/** รับ props มาจากหน้าหลัก */
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
onSubmit: {
|
||||||
|
type: Function,
|
||||||
|
default: () => "",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
/** ข้อมูล v-model ของฟอร์ม */
|
||||||
|
const formDataFollowSpouse = reactive<any>({
|
||||||
|
type: dataStore.typeId,
|
||||||
|
leaveWrote: "",
|
||||||
|
leaveStartDate: null,
|
||||||
|
leaveEndDate: null,
|
||||||
|
leaveTotal: "", //จำนวนวันลา
|
||||||
|
leaveSalaryText: 25000,
|
||||||
|
leaveSalary: 25000, //เงินเดือนปัจจุบัน
|
||||||
|
coupleDayName: "", //ชื่อคู่สมรส
|
||||||
|
coupleDayPosition: "", //ตำแหน่งคู่สมรส
|
||||||
|
coupleDayLevel: "", //ระดับคู่สมรส
|
||||||
|
coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
|
||||||
|
followHistoryCountry: "ลาว", //ประวัติการลาติดตามคู่สมรส
|
||||||
|
followHistoryTime: "0 วัน",
|
||||||
|
followHistoryStart: new Date(),
|
||||||
|
followHistoryEnd: new Date(),
|
||||||
|
leaveDetail: "ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา ...ปี, ...เดือน, ...วัน", //รายละเอียดการลา
|
||||||
|
leaveDocument: [], //เอกสารปะกอบ
|
||||||
|
})
|
||||||
|
|
||||||
|
/** แปลงตัวแปร Salary */
|
||||||
|
const formattleaveSalaryText = arabicNumberToText(props.data.leaveSalaryText)
|
||||||
|
const formattSalary = computed(() => {
|
||||||
|
return props.data.leaveSalary !== null ? props.data.leaveSalary.toLocaleString("th-TH") : ""
|
||||||
|
})
|
||||||
|
|
||||||
|
/** ตัวแปร ref สำหรับแสดง validate */
|
||||||
|
const leaveWroteRef = ref<object | null>(null)
|
||||||
|
const leaveStartDateRef = ref<object | null>(null)
|
||||||
|
const leaveEndDateRef = ref<object | null>(null)
|
||||||
|
const leaveSalaryRef = ref<object | null>(null)
|
||||||
|
const leaveTotalRef = ref<object | null>(null)
|
||||||
|
const coupleDayNameRef = ref<object | null>(null)
|
||||||
|
const leaveAddressRef = ref<object | null>(null)
|
||||||
|
const leaveDetailRef = ref<object | null>(null)
|
||||||
|
const coupleDayPositionRef = ref<object | null>(null)
|
||||||
|
const coupleDayLevelRef = ref<object | null>(null)
|
||||||
|
const coupleDayLevelCountryRef = ref<object | null>(null)
|
||||||
|
const followHistoryCountryRef = ref<object | null>(null)
|
||||||
|
const followHistoryTimeRef = ref<object | null>(null)
|
||||||
|
const followHistoryStartRef = ref<object | null>(null)
|
||||||
|
const followHistoryEndRef = ref<object | null>(null)
|
||||||
|
const leaveDocumentRef = ref<object | null>(null)
|
||||||
|
|
||||||
|
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||||
|
const FormRef: FormRef = {
|
||||||
|
leaveWrote: leaveWroteRef, //เขียนที่***
|
||||||
|
leaveStartDate: leaveStartDateRef, //*วัน เดือน ปีเริ่มต้นลา
|
||||||
|
leaveEndDate: leaveEndDateRef, //*วัน เดือน ปีสิ้นสุดลา
|
||||||
|
leaveTotal: leaveTotalRef, //จำนวนวันลา
|
||||||
|
leaveSalary: leaveSalaryRef, //เงินเดือนปัจจุบัน
|
||||||
|
coupleDayName: coupleDayNameRef, //หมายเลขที่ติดต่อขณะลา
|
||||||
|
coupleDayPosition: coupleDayPositionRef, //ตำแหน่งคู่สมรส
|
||||||
|
coupleDayLevel: coupleDayLevelRef, //ระดับคู่สมรส
|
||||||
|
coupleDayLevelCountry: coupleDayLevelCountryRef, //ไปปฏิบัติราชการ ณ ประเทศ
|
||||||
|
followHistoryCountry: followHistoryCountryRef, //ประวัติการลาติดตามคู่สมรส
|
||||||
|
followHistoryEnd: followHistoryEndRef, //ประวัติการลาติดตามคู่สมรส
|
||||||
|
followHistoryTime: followHistoryTimeRef, //ประวัติการลาติดตามคู่สมรส
|
||||||
|
followHistoryStart: followHistoryStartRef, //ประวัติการลาติดตามคู่สมรส
|
||||||
|
leaveDetail: leaveDetailRef, //รายละเอียดการลา
|
||||||
|
leaveAddress: leaveAddressRef, //สถานที่ติดต่อขณะลา
|
||||||
|
leaveDocument: leaveDocumentRef,
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||||
|
watch(props.data, async () => {
|
||||||
|
// console.log("data==>", props.data)
|
||||||
|
formDataFollowSpouse.leaveWrote = props.data.leaveWrote
|
||||||
|
formDataFollowSpouse.leaveStartDate = props.data.leaveStartDate
|
||||||
|
formDataFollowSpouse.leaveEndDate = props.data.leaveEndDate
|
||||||
|
formDataFollowSpouse.leaveTotal = props.data.leaveTotal
|
||||||
|
formDataFollowSpouse.leaveDetail = props.data.leaveDetail
|
||||||
|
formDataFollowSpouse.leaveDocument = props.data.leaveDocument
|
||||||
|
})
|
||||||
|
|
||||||
|
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||||
|
const nameFile = ref<string>("")
|
||||||
|
const fileDocDataUpload = ref<File[]>([])
|
||||||
|
const fileUploadDoc = async (files: any) => {
|
||||||
|
files.forEach((file: any) => {
|
||||||
|
fileDocDataUpload.value.push(file)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||||
|
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)) {
|
||||||
|
onSubmit()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ฟังก์ชั่น บันทึก */
|
||||||
|
const onSubmit = async () => {
|
||||||
|
dialogConfirm(
|
||||||
|
$q,
|
||||||
|
async () => {
|
||||||
|
await saveFormData()
|
||||||
|
},
|
||||||
|
"ยืนยันการยื่นใบลา",
|
||||||
|
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* check ว่าลาได้ไหม จาก api
|
||||||
|
* @param formData
|
||||||
|
*/
|
||||||
|
const isLeave = ref<boolean>(true)
|
||||||
|
async function FetchCheck() {
|
||||||
|
await http
|
||||||
|
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataFollowSpouse.leaveStartDate ?? null, EndLeaveDate: formDataFollowSpouse.leaveEndDate ?? null })
|
||||||
|
.then((res: any) => {
|
||||||
|
const data = res.data.result
|
||||||
|
isLeave.value = data.isLeave
|
||||||
|
if (data.isLeave === true) {
|
||||||
|
formDataFollowSpouse.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||||
|
// formDataFollowSpouse.leaveLast = data.totalDate
|
||||||
|
} else {
|
||||||
|
fails($q, "ไม่สามารถลาได้")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((e: any) => {
|
||||||
|
messageError($q, e)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||||
|
*/
|
||||||
|
async function saveFormData() {
|
||||||
|
const formData = new FormData()
|
||||||
|
// if (formDataFollowSpouse.leaveDocument.length > 0) {
|
||||||
|
// const blob = formDataFollowSpouse.leaveDocument.slice(0, formDataFollowSpouse.leaveDocument[0].size)
|
||||||
|
// const newFile = new File(blob, nameFile.value, {
|
||||||
|
// type: formDataFollowSpouse.leaveDocument[0].type,
|
||||||
|
// })
|
||||||
|
// formData.append("leaveDocument", newFile)
|
||||||
|
// } //
|
||||||
|
formData.append("leaveDocument", formDataFollowSpouse.leaveDocument)
|
||||||
|
formData.append("type", formDataFollowSpouse.type) //
|
||||||
|
formData.append("leaveStartDate", dateToISO(formDataFollowSpouse.leaveStartDate)) //
|
||||||
|
formData.append("leaveEndDate", dateToISO(formDataFollowSpouse.leaveEndDate)) //
|
||||||
|
formData.append("followHistoryStart", dateToISO(formDataFollowSpouse.followHistoryStart)) //
|
||||||
|
formData.append("followHistoryEnd", dateToISO(formDataFollowSpouse.followHistoryEnd)) //
|
||||||
|
formData.append("leaveWrote", formDataFollowSpouse.leaveWrote) //
|
||||||
|
formData.append("leaveDetail", formDataFollowSpouse.leaveDetail) //
|
||||||
|
formData.append("leaveSalaryText", formDataFollowSpouse.leaveSalaryText) //
|
||||||
|
formData.append("leaveSalary", formDataFollowSpouse.leaveSalary) //
|
||||||
|
formData.append("followHistoryTime", formDataFollowSpouse.followHistoryTime) //
|
||||||
|
formData.append("followHistoryCountry", formDataFollowSpouse.followHistoryCountry) //
|
||||||
|
formData.append("coupleDayLevelCountry", formDataFollowSpouse.coupleDayLevelCountry) //
|
||||||
|
formData.append("coupleDayLevel", formDataFollowSpouse.coupleDayLevel) //
|
||||||
|
formData.append("coupleDayPosition", formDataFollowSpouse.coupleDayPosition) //
|
||||||
|
formData.append("coupleDayName", formDataFollowSpouse.coupleDayName) //
|
||||||
|
formData.append("leaveTotal", formDataFollowSpouse.leaveTotal) //
|
||||||
|
|
||||||
|
await http
|
||||||
|
.post(config.API.leaveUser(), formData)
|
||||||
|
.then((res: any) => {
|
||||||
|
success($q, "บันทึกสำเร็จ")
|
||||||
|
router.push(`/leave`)
|
||||||
|
})
|
||||||
|
.catch((e: any) => {
|
||||||
|
messageError($q, e)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function อัพเดทค่า LeaveTotal
|
||||||
|
*/
|
||||||
|
function updateLeaveTotal() {
|
||||||
|
const newLeaveTotal = calculateDurationYmd(formDataFollowSpouse.leaveStartDate, formDataFollowSpouse.leaveEndDate)
|
||||||
|
formDataFollowSpouse.leaveTotal = newLeaveTotal
|
||||||
|
console.log("test")
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||||
|
</div>
|
||||||
|
<form @submit.prevent.stop="onValidate">
|
||||||
|
<q-card bordered class="q-pa-md bg-grey-1">
|
||||||
|
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
ref="leaveWroteRef"
|
||||||
|
for="leaveWroteRef"
|
||||||
|
dense
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
outlined
|
||||||
|
v-model="props.data.leaveWrote"
|
||||||
|
label="เขียนที่"
|
||||||
|
:readonly="!edit"
|
||||||
|
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||||
|
/>
|
||||||
|
<datepicker
|
||||||
|
class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="props.data.leaveDateStart"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
hide-bottom-space
|
||||||
|
borderless
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
:readonly="!edit"
|
||||||
|
@update:model-value="props.data.leaveDateEnd = null"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
ref="leaveStartDateRef"
|
||||||
|
for="leaveStartDateRef"
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
:readonly="!edit"
|
||||||
|
class="full-width datepicker"
|
||||||
|
:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
|
||||||
|
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
|
||||||
|
<datepicker
|
||||||
|
class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="props.data.leaveDateEnd"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
borderless
|
||||||
|
hide-bottom-space
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
@update:model-value="updateLeaveTotal, FetchCheck()"
|
||||||
|
:readonly="!props.data.leaveDateStart"
|
||||||
|
:min-date="props.data.leaveDateStart"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
ref="leaveEndDateRef"
|
||||||
|
for="leaveEndDateRef"
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
:readonly="!props.data.leaveDateStart"
|
||||||
|
class="full-width datepicker"
|
||||||
|
:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
|
||||||
|
:label="`${'ลาถึงวันที่'}`"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-md-2 col-sm-6"
|
||||||
|
bg-color="white"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
ref="leaveTotalRef"
|
||||||
|
for="leaveTotalRef"
|
||||||
|
v-model="props.data.leaveTotal"
|
||||||
|
label="เป็นเวลา"
|
||||||
|
readonly
|
||||||
|
hide-bottom-space
|
||||||
|
/>
|
||||||
|
<div class="col-12 col-md-6 col-sm-12">
|
||||||
|
<q-input
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
class="col-12 col-sm-12"
|
||||||
|
ref="leaveSalaryRef"
|
||||||
|
for="leaveSalaryRef"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
v-model="formattSalary"
|
||||||
|
label="เงินเดือนปัจจุบัน"
|
||||||
|
readonly
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-md-6 col-sm-12">
|
||||||
|
<q-input
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
class="col-12 col-sm-12"
|
||||||
|
ref="leaveSalaryRef"
|
||||||
|
for="leaveSalaryRef"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
v-model="formattleaveSalaryText"
|
||||||
|
label="เงินเดือนปัจจุบัน"
|
||||||
|
readonly
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-3 col-sm-12">
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
hide-bottom-space
|
||||||
|
ref="coupleDayNameRef"
|
||||||
|
for="coupleDayNameRef"
|
||||||
|
dense
|
||||||
|
bg-color="white"
|
||||||
|
outlined
|
||||||
|
v-model="props.data.coupleDayName"
|
||||||
|
label="ชื่อคู่สมรส"
|
||||||
|
:readonly="!edit"
|
||||||
|
:rules="[val => !!val || `${'ชื่อคู่สมรส'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3 col-sm-12">
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
hide-bottom-space
|
||||||
|
ref="coupleDayPositionRef"
|
||||||
|
for="coupleDayPositionRef"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
bg-color="white"
|
||||||
|
v-model="props.data.coupleDayPosition"
|
||||||
|
label="ตำแหน่งคู่สมรส"
|
||||||
|
:readonly="!edit"
|
||||||
|
:rules="[val => !!val || `${'ตำแหน่งคู่สมรส'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3 col-sm-12">
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
ref="coupleDayLevelRef"
|
||||||
|
for="coupleDayLevelRef"
|
||||||
|
dense
|
||||||
|
hide-bottom-space
|
||||||
|
outlined
|
||||||
|
bg-color="white"
|
||||||
|
v-model="props.data.coupleDayLevel"
|
||||||
|
label="ระดับคู่สมรส"
|
||||||
|
:readonly="!edit"
|
||||||
|
:rules="[val => !!val || `${'ระดับคู่สมรส'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3 col-sm-12">
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
ref="coupleDayLevelCountryRef"
|
||||||
|
for="coupleDayLevelCountryRef"
|
||||||
|
hide-bottom-space
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
bg-color="white"
|
||||||
|
v-model="props.data.coupleDayLevelCountry"
|
||||||
|
label="ไปปฏิบัติราชการ ณ ประเทศ"
|
||||||
|
:readonly="!edit"
|
||||||
|
:rules="[val => !!val || `${'ปฏิบัติราชการ ณ ประเทศ'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="text-weight-bold text-dark col-12">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
|
||||||
|
<datepicker
|
||||||
|
class="col-12 col-md-3 col-sm-12"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="props.data.followHistoryStart"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
hide-bottom-space
|
||||||
|
borderless
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
readonly
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
ref="followHistoryStartRef"
|
||||||
|
for="followHistoryStartRef"
|
||||||
|
hide-bottom-space
|
||||||
|
readonly
|
||||||
|
bg-color="white"
|
||||||
|
class="full-width"
|
||||||
|
:model-value="props.data.followHistoryStart != null ? date2Thai(props.data.followHistoryStart) : null"
|
||||||
|
:label="`${'ตั้งแต่วันที่'}`"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกตั้งแต่วันที่'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
<datepicker
|
||||||
|
class="col-12 col-md-3 col-sm-12"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="props.data.followHistoryEnd"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
hide-bottom-space
|
||||||
|
borderless
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
readonly
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
ref="followHistoryEndRef"
|
||||||
|
for="followHistoryEndRef"
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
readonly
|
||||||
|
class="full-width"
|
||||||
|
:model-value="props.data.followHistoryEnd != null ? date2Thai(props.data.followHistoryEnd) : null"
|
||||||
|
:label="`${'ถึงวันที่'}`"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกถึงวันที่'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-md-3 col-sm-12"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
ref="followHistoryCountryRef"
|
||||||
|
for="followHistoryCountryRef"
|
||||||
|
v-model="props.data.followHistoryCountry"
|
||||||
|
label="ประเทศ"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกประเทศ'}`]"
|
||||||
|
readonly
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-md-3 col-sm-12"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
:readonly="props.data.followHistoryTime !== ''"
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
ref="followHistoryTimeRef"
|
||||||
|
for="followHistoryTimeRef"
|
||||||
|
v-model="props.data.followHistoryTime"
|
||||||
|
label="เป็นเวลา"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
hide-bottom-space
|
||||||
|
type="textarea"
|
||||||
|
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
dense
|
||||||
|
bg-color="white"
|
||||||
|
outlined
|
||||||
|
ref="leaveDetailRef"
|
||||||
|
for="leaveDetailRef"
|
||||||
|
v-model="props.data.leaveDetail"
|
||||||
|
label="รายละเอียด"
|
||||||
|
:readonly="!edit"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-file ref="fileRef" bg-color="white" v-model="props.data.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="attach_file" color="primary" />
|
||||||
|
</template>
|
||||||
|
</q-file>
|
||||||
|
|
||||||
|
<div class="col-12 row" v-if="!edit">
|
||||||
|
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||||
|
</div>
|
||||||
|
<q-card bordered flat class="full-width">
|
||||||
|
<q-list separator>
|
||||||
|
<q-item v-for="(file, index) in props.data.leaveDocument" :key="index" class="q-my-xs">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label class="full-width ellipsis">
|
||||||
|
{{ file.name }}
|
||||||
|
</q-item-label>
|
||||||
|
<q-item-label caption> </q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
|
<q-separator class="q-mt-sm" />
|
||||||
|
<div class="row col-12 q-pt-md">
|
||||||
|
<q-space />
|
||||||
|
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
354
src/modules/05_leave/components/formEdit/formEdit_Hajj.vue
Normal file
354
src/modules/05_leave/components/formEdit/formEdit_Hajj.vue
Normal file
|
|
@ -0,0 +1,354 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive, ref } from "vue"
|
||||||
|
import { useCounterMixin } from "@/stores/mixin"
|
||||||
|
import { useQuasar } from "quasar"
|
||||||
|
import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence"
|
||||||
|
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||||
|
import http from "@/plugins/http"
|
||||||
|
import config from "@/app.config"
|
||||||
|
import { useRouter } from "vue-router"
|
||||||
|
|
||||||
|
/** Use */
|
||||||
|
const router = useRouter()
|
||||||
|
const dataStore = useLeaveStore()
|
||||||
|
const $q = useQuasar()
|
||||||
|
const mixin = useCounterMixin()
|
||||||
|
const { date2Thai, dialogConfirm, calculateDurationYmd, fails, messageError, success, dateToISO } = mixin
|
||||||
|
const edit = ref<boolean>(true)
|
||||||
|
const files = ref<any>(null)
|
||||||
|
|
||||||
|
/** ตัวแปร ref สำหรับแสดง validate */
|
||||||
|
const leaveWroteRef = ref<object | null>(null)
|
||||||
|
const leavegovernmentDateRef = ref<object | null>(null)
|
||||||
|
const leaveStartDateRef = ref<object | null>(null)
|
||||||
|
const leaveEndDateRef = ref<object | null>(null)
|
||||||
|
const leaveDocumentRef = ref<object | null>(null)
|
||||||
|
|
||||||
|
/** รับ props มาจากหน้าหลัก */
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
onSubmit: {
|
||||||
|
type: Function,
|
||||||
|
default: () => "",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
/** ข้อมูล v-model ของฟอร์ม */
|
||||||
|
const formDataHaji = reactive<any>({
|
||||||
|
type: dataStore.typeId,
|
||||||
|
leaveWrote: "",
|
||||||
|
leavegovernmentDate: new Date(),
|
||||||
|
leaveStartDate: null,
|
||||||
|
leaveEndDate: null,
|
||||||
|
totalLeave: new Date(),
|
||||||
|
hajjDayStatus: "true",
|
||||||
|
leaveDocument: null,
|
||||||
|
})
|
||||||
|
|
||||||
|
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||||
|
const formRef: HajiForm = {
|
||||||
|
leaveWrote: leaveWroteRef,
|
||||||
|
leavegovernmentDate: leavegovernmentDateRef,
|
||||||
|
leaveStartDate: leaveStartDateRef,
|
||||||
|
leaveEndDate: leaveEndDateRef,
|
||||||
|
leaveDocument: leaveDocumentRef,
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||||
|
const nameFile = ref<string>("")
|
||||||
|
const fileDocDataUpload = ref<File[]>([])
|
||||||
|
const fileUploadDoc = async (files: any) => {
|
||||||
|
files.forEach((file: any) => {
|
||||||
|
fileDocDataUpload.value.push(file)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
||||||
|
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)) {
|
||||||
|
onSubmit()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ฟังก์ชั่น บันทึก */
|
||||||
|
const onSubmit = async () => {
|
||||||
|
dialogConfirm(
|
||||||
|
$q,
|
||||||
|
async () => {
|
||||||
|
await saveFormData()
|
||||||
|
},
|
||||||
|
"ยืนยันการยื่นใบลา",
|
||||||
|
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* check ว่าลาได้ไหม จาก api
|
||||||
|
* @param formData
|
||||||
|
*/
|
||||||
|
const isLeave = ref<boolean>(true)
|
||||||
|
async function FetchCheck() {
|
||||||
|
await http
|
||||||
|
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataHaji.leaveStartDate ?? null, EndLeaveDate: formDataHaji.leaveEndDate ?? null })
|
||||||
|
.then((res: any) => {
|
||||||
|
const data = res.data.result
|
||||||
|
isLeave.value = data.isLeave
|
||||||
|
if (data.isLeave === true) {
|
||||||
|
formDataHaji.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||||
|
// formDataHaji.leaveLast = data.totalDate
|
||||||
|
} else {
|
||||||
|
fails($q, "ไม่สามารถลาได้")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((e: any) => {
|
||||||
|
messageError($q, e)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||||
|
*/
|
||||||
|
async function saveFormData() {
|
||||||
|
const formData = new FormData()
|
||||||
|
// if (formDataHaji.leaveDocument.length > 0) {
|
||||||
|
// const blob = formDataHaji.leaveDocument.slice(0, formDataHaji.leaveDocument[0].size)
|
||||||
|
// const newFile = new File(blob, nameFile.value, {
|
||||||
|
// type: formDataHaji.leaveDocument[0].type,
|
||||||
|
// })
|
||||||
|
// formData.append("leaveDocument", newFile)
|
||||||
|
// }
|
||||||
|
formData.append("leaveDocument", formDataHaji.leaveDocument)
|
||||||
|
formData.append("type", formDataHaji.type)
|
||||||
|
formData.append("leaveStartDate", dateToISO(formDataHaji.leaveStartDate))
|
||||||
|
formData.append("leaveEndDate", dateToISO(formDataHaji.leaveEndDate))
|
||||||
|
formData.append("hajjDayStatus", formDataHaji.hajjDayStatus)
|
||||||
|
formData.append("leaveWrote", formDataHaji.leaveWrote)
|
||||||
|
formData.append("leaveDetail", formDataHaji.leaveDetail)
|
||||||
|
formData.append("leavegovernmentDate", dateToISO(formDataHaji.leavegovernmentDate))
|
||||||
|
|
||||||
|
await http
|
||||||
|
.post(config.API.leaveUser(), formData)
|
||||||
|
.then((res: any) => {
|
||||||
|
success($q, "บันทึกสำเร็จ")
|
||||||
|
router.push(`/leave`)
|
||||||
|
})
|
||||||
|
.catch((e: any) => {
|
||||||
|
messageError($q, e)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function อัพเดทค่า LeaveTotal
|
||||||
|
*/
|
||||||
|
function updateLeaveTotal() {
|
||||||
|
const newLeaveTotal = calculateDurationYmd(props.data.leaveStartDate, props.data.leaveEndDate)
|
||||||
|
props.data.leaveTotal = newLeaveTotal
|
||||||
|
console.log("test")
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||||
|
</div>
|
||||||
|
<form @submit.prevent="onValidate" class="full-width">
|
||||||
|
<q-card bordered class="q-pa-md bg-grey-1">
|
||||||
|
<div class="row q-pa-sm q-col-gutter-sm">
|
||||||
|
<q-input
|
||||||
|
v-model="props.data.leaveWrote"
|
||||||
|
ref="leaveWroteRef"
|
||||||
|
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
bg-color="white"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
label="เขียนที่"
|
||||||
|
hide-bottom-space
|
||||||
|
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="full-width">
|
||||||
|
<div class="q-col-gutter-sm row">
|
||||||
|
<datepicker
|
||||||
|
v-model="props.data.leaveDateStart"
|
||||||
|
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
autoApply
|
||||||
|
borderless
|
||||||
|
week-start="0"
|
||||||
|
:enableTimePicker="false"
|
||||||
|
:locale="'th'"
|
||||||
|
@update:model-value="props.data.leaveDateEnd = null"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
ref="leaveStartDateRef"
|
||||||
|
bg-color="white"
|
||||||
|
class="full-width datepicker"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||||
|
:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
|
||||||
|
<datepicker
|
||||||
|
v-model="props.data.leaveDateEnd"
|
||||||
|
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
autoApply
|
||||||
|
borderless
|
||||||
|
week-start="0"
|
||||||
|
:enableTimePicker="false"
|
||||||
|
:locale="'th'"
|
||||||
|
@update:model-value="updateLeaveTotal"
|
||||||
|
:readonly="!props.data.leaveDateStart"
|
||||||
|
:min-date="props.data.leaveDateStart"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
ref="leaveEndDateRef"
|
||||||
|
class="full-width datepicker"
|
||||||
|
bg-color="white"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
:readonly="!props.data.leaveDateStart"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'ลาถึงวันที่'}`"
|
||||||
|
@update:model-value="FetchCheck()"
|
||||||
|
:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-md-2 col-sm-6"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
bg-color="white"
|
||||||
|
ref="leaveTotalRef"
|
||||||
|
for="leaveTotalRef"
|
||||||
|
v-model="props.data.leaveTotal"
|
||||||
|
label="จำนวนวันที่ลา"
|
||||||
|
readonly
|
||||||
|
hide-bottom-space
|
||||||
|
/>
|
||||||
|
<datepicker
|
||||||
|
v-model="props.data.leavegovernmentDate"
|
||||||
|
class="col-12 col-md-4 col-sm-6"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
autoApply
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
week-start="0"
|
||||||
|
:locale="'th'"
|
||||||
|
:enableTimePicker="false"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
ref="leavegovernmentDateRef"
|
||||||
|
bg-color="white"
|
||||||
|
class="full-width"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
readonly
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'วันที่เข้ารับราชการ'}`"
|
||||||
|
:model-value="props.data.leavegovernmentDate != null ? date2Thai(props.data.leavegovernmentDate) : null"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark col-12">เคยไปประกอบพิธีฮัจญ์หรือไม่</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<q-radio v-model="props.data.hajjDayStatus" val="true" checked-icon="task_alt" label="เคย" />
|
||||||
|
<q-radio v-model="props.data.hajjDayStatus" val="false" checked-icon="task_alt" label="ไม่เคยไปประกอบพิธีฮัจญ์" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<q-input v-model="props.data.leaveDetail" class="col-12 q-mt-sm cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
|
||||||
|
|
||||||
|
<div class="col-12 col-sm-6">
|
||||||
|
<q-file v-model="props.data.leaveDocument" bg-color="white" label="เอกสารประกอบ" use-chips @added="fileUploadDoc" dense outlined multiple hide-bottom-space>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="attach_file" color="primary" />
|
||||||
|
</template>
|
||||||
|
</q-file>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 row" v-if="!edit">
|
||||||
|
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||||
|
</div>
|
||||||
|
<q-card bordered flat class="full-width">
|
||||||
|
<q-list separator>
|
||||||
|
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label class="full-width ellipsis">
|
||||||
|
{{ file.fileName }}
|
||||||
|
</q-item-label>
|
||||||
|
|
||||||
|
<q-item-label caption> </q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
<q-separator class="q-mt-sm" />
|
||||||
|
<div class="row col-12 q-pt-md">
|
||||||
|
<q-space />
|
||||||
|
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,436 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, watch } from "vue"
|
||||||
|
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/HelpWifeForm"
|
||||||
|
import { useCounterMixin } from "@/stores/mixin"
|
||||||
|
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||||
|
import http from "@/plugins/http"
|
||||||
|
import config from "@/app.config"
|
||||||
|
import { useQuasar } from "quasar"
|
||||||
|
import { useRouter } from "vue-router"
|
||||||
|
|
||||||
|
/** Use */
|
||||||
|
const dataStore = useLeaveStore()
|
||||||
|
const mixin = useCounterMixin()
|
||||||
|
const router = useRouter()
|
||||||
|
const $q = useQuasar()
|
||||||
|
const { date2Thai, calculateDurationYmd, dateToISO, dialogConfirm, fails, success, messageError } = mixin
|
||||||
|
const edit = ref<boolean>(true)
|
||||||
|
|
||||||
|
/** รับ props มาจากหน้าหลัก */
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
onSubmit: {
|
||||||
|
type: Function,
|
||||||
|
default: () => "",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
/** ข้อมูล v-model ของฟอร์ม */
|
||||||
|
const formDataHelpWife = reactive<any>({
|
||||||
|
type: dataStore.typeId,
|
||||||
|
leaveWrote: "",
|
||||||
|
wifeDayName: "",
|
||||||
|
wifeDayDateBorn: null,
|
||||||
|
leaveStartDate: null,
|
||||||
|
leaveEndDate: null,
|
||||||
|
leaveTotal: "",
|
||||||
|
leaveNumber: "",
|
||||||
|
leaveAddress: "",
|
||||||
|
leaveDetail: "",
|
||||||
|
leaveDocument: [],
|
||||||
|
})
|
||||||
|
|
||||||
|
/** ตัวแปร ref สำหรับแสดง validate */
|
||||||
|
const leaveWroteRef = ref<object | null>(null)
|
||||||
|
const wifeDayNameRef = ref<object | null>(null)
|
||||||
|
const wifeDayDateBornRef = ref<object | null>(null)
|
||||||
|
const leaveStartDateRef = ref<object | null>(null)
|
||||||
|
const leaveEndDateRef = ref<object | null>(null)
|
||||||
|
const leaveTotalRef = ref<object | null>(null)
|
||||||
|
const leaveNumberRef = ref<object | null>(null)
|
||||||
|
const leaveAddressRef = ref<object | null>(null)
|
||||||
|
const leaveDetailRef = ref<object | null>(null)
|
||||||
|
const leaveDocumentRef = ref<object | null>(null)
|
||||||
|
|
||||||
|
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||||
|
const FormRef: FormRef = {
|
||||||
|
leaveWrote: leaveWroteRef,
|
||||||
|
wifeDayName: wifeDayNameRef,
|
||||||
|
wifeDayDateBorn: wifeDayDateBornRef,
|
||||||
|
leaveStartDate: leaveStartDateRef,
|
||||||
|
leaveEndDate: leaveEndDateRef,
|
||||||
|
leaveTotal: leaveTotalRef,
|
||||||
|
leaveNumber: leaveNumberRef,
|
||||||
|
leaveAddress: leaveAddressRef,
|
||||||
|
leaveDetail: leaveDetailRef,
|
||||||
|
leaveDocument: leaveDocumentRef,
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||||
|
watch(props.data, async () => {
|
||||||
|
// console.log("data==>", props.data)
|
||||||
|
formDataHelpWife.leaveWrote = props.data.leaveWrote
|
||||||
|
formDataHelpWife.wifeDayName = props.data.wifeDayName
|
||||||
|
formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn
|
||||||
|
formDataHelpWife.leaveStartDate = props.data.leaveStartDate
|
||||||
|
formDataHelpWife.leaveEndDate = props.data.leaveEndDate
|
||||||
|
formDataHelpWife.leaveTotal = props.data.leaveTotal
|
||||||
|
formDataHelpWife.leaveNumber = props.data.leaveNumber
|
||||||
|
formDataHelpWife.leaveDetail = props.data.leaveDetail
|
||||||
|
formDataHelpWife.leaveDocument = props.data.leaveDocument
|
||||||
|
})
|
||||||
|
|
||||||
|
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||||
|
const nameFile = ref<string>("")
|
||||||
|
const fileDocDataUpload = ref<File[]>([])
|
||||||
|
const fileUploadDoc = async (files: any) => {
|
||||||
|
files.forEach((file: any) => {
|
||||||
|
fileDocDataUpload.value.push(file)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||||
|
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)) {
|
||||||
|
onSubmit()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function อัพเดทค่า LeaveTotal
|
||||||
|
*/
|
||||||
|
function updateLeaveTotal() {
|
||||||
|
const newLeaveTotal = calculateDurationYmd(formDataHelpWife.leaveStartDate, formDataHelpWife.leaveEndDate)
|
||||||
|
formDataHelpWife.leaveTotal = newLeaveTotal
|
||||||
|
console.log("test")
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ฟังก์ชั่น บันทึก */
|
||||||
|
const onSubmit = async () => {
|
||||||
|
dialogConfirm(
|
||||||
|
$q,
|
||||||
|
async () => {
|
||||||
|
await saveFormData()
|
||||||
|
},
|
||||||
|
"ยืนยันการยื่นใบลา",
|
||||||
|
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* check ว่าลาได้ไหม จาก api
|
||||||
|
* @param formData
|
||||||
|
*/
|
||||||
|
const isLeave = ref<boolean>(true)
|
||||||
|
async function FetchCheck() {
|
||||||
|
await http
|
||||||
|
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataHelpWife.leaveStartDate ?? null, EndLeaveDate: formDataHelpWife.leaveEndDate ?? null })
|
||||||
|
.then((res: any) => {
|
||||||
|
const data = res.data.result
|
||||||
|
isLeave.value = data.isLeave
|
||||||
|
if (data.isLeave === true) {
|
||||||
|
formDataHelpWife.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||||
|
// formDataHelpWife.leaveLast = data.totalDate
|
||||||
|
} else {
|
||||||
|
fails($q, "ไม่สามารถลาได้")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((e: any) => {
|
||||||
|
messageError($q, e)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||||
|
*/
|
||||||
|
async function saveFormData() {
|
||||||
|
const formData = new FormData()
|
||||||
|
// if (formDataHelpWife.leaveDocument.length > 0) {
|
||||||
|
// const blob = formDataHelpWife.leaveDocument.slice(0, formDataHelpWife.leaveDocument[0].size)
|
||||||
|
// const newFile = new File(blob, nameFile.value, {
|
||||||
|
// type: formDataHelpWife.leaveDocument[0].type,
|
||||||
|
// })
|
||||||
|
// formData.append("leaveDocument", newFile)
|
||||||
|
// }
|
||||||
|
formData.append("leaveDocument", formDataHelpWife.leaveDocument)
|
||||||
|
formData.append("type", formDataHelpWife.type)
|
||||||
|
formData.append("leaveStartDate", dateToISO(formDataHelpWife.leaveStartDate))
|
||||||
|
formData.append("leaveEndDate", dateToISO(formDataHelpWife.leaveEndDate))
|
||||||
|
formData.append("leaveWrote", formDataHelpWife.leaveWrote)
|
||||||
|
formData.append("leaveAddress", formDataHelpWife.leaveAddress)
|
||||||
|
formData.append("leaveNumber", formDataHelpWife.leaveNumber)
|
||||||
|
formData.append("leaveDetail", formDataHelpWife.leaveDetail)
|
||||||
|
formData.append("wifeDayName", formDataHelpWife.wifeDayName)
|
||||||
|
formData.append("wifeDayDateBorn", dateToISO(formDataHelpWife.wifeDayDateBorn))
|
||||||
|
await http
|
||||||
|
.post(config.API.leaveUser(), formData)
|
||||||
|
.then((res: any) => {
|
||||||
|
success($q, "บันทึกสำเร็จ")
|
||||||
|
router.push(`/leave`)
|
||||||
|
})
|
||||||
|
.catch((e: any) => {
|
||||||
|
messageError($q, e)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||||
|
</div>
|
||||||
|
<form @submit.prevent.stop="onValidate">
|
||||||
|
<q-card bordered class="q-pa-md bg-grey-1">
|
||||||
|
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
ref="leaveWroteRef"
|
||||||
|
for="leaveWroteRef"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
v-model="props.data.leaveWrote"
|
||||||
|
label="เขียนที่"
|
||||||
|
:readonly="!edit"
|
||||||
|
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||||
|
/>
|
||||||
|
<datepicker
|
||||||
|
class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="props.data.leaveDateStart"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
hide-bottom-space
|
||||||
|
borderless
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
:readonly="!edit"
|
||||||
|
@update:model-value="props.data.leaveDateEnd = null"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
ref="leaveStartDateRef"
|
||||||
|
for="leaveStartDateRef"
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
:readonly="!edit"
|
||||||
|
class="full-width datepicker"
|
||||||
|
:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
|
||||||
|
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
|
||||||
|
<datepicker
|
||||||
|
class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="props.data.leaveDateEnd"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
borderless
|
||||||
|
hide-bottom-space
|
||||||
|
:enableTimePicker="false"
|
||||||
|
@update:model-value="updateLeaveTotal, FetchCheck()"
|
||||||
|
week-start="0"
|
||||||
|
:readonly="!props.data.leaveDateStart"
|
||||||
|
:min-date="props.data.leaveDateStart"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
ref="leaveEndDateRef"
|
||||||
|
for="leaveEndDateRef"
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
:readonly="!props.data.leaveDateStart"
|
||||||
|
class="full-width datepicker"
|
||||||
|
:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
|
||||||
|
:label="`${'ลาถึงวันที่'}`"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-md-2 col-sm-6"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
ref="leaveTotalRef"
|
||||||
|
for="leaveTotalRef"
|
||||||
|
v-model="props.data.leaveTotal"
|
||||||
|
label="จำนวนวันที่ลา"
|
||||||
|
readonly
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
/>
|
||||||
|
<div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-sm-12"
|
||||||
|
ref="wifeDayNameRef"
|
||||||
|
for="wifeDayNameRef"
|
||||||
|
dense
|
||||||
|
bg-color="white"
|
||||||
|
outlined
|
||||||
|
hide-bottom-space
|
||||||
|
v-model="props.data.wifeDayName"
|
||||||
|
label="ชื่อภรรยา"
|
||||||
|
:readonly="!edit"
|
||||||
|
:rules="[val => !!val || `${'ชื่อภรรยา'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<datepicker
|
||||||
|
class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="props.data.wifeDayDateBorn"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
borderless
|
||||||
|
hide-bottom-space
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
:readonly="!edit"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
ref="wifeDayDateBornRef"
|
||||||
|
for="wifeDayDateBornRef"
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
:readonly="!edit"
|
||||||
|
class="full-width datepicker"
|
||||||
|
:model-value="props.data.wifeDayDateBorn != null ? date2Thai(props.data.wifeDayDateBorn) : null"
|
||||||
|
:label="`${'วันที่คลอด'}`"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกวันที่คลอด'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
<div class="full-width">
|
||||||
|
<div class="q-col-gutter-sm row">
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
ref="leaveNumberRef"
|
||||||
|
for="leaveNumberRef"
|
||||||
|
v-model="props.data.leaveNumber"
|
||||||
|
mask="(###)-###-####"
|
||||||
|
unmasked-value
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||||
|
:readonly="!edit"
|
||||||
|
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
ref="leaveAddressRef"
|
||||||
|
for="leaveAddressRef"
|
||||||
|
v-model="props.data.leaveAddress"
|
||||||
|
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||||
|
:readonly="!edit"
|
||||||
|
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<q-input
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
type="textarea"
|
||||||
|
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
ref="leaveDetailRef"
|
||||||
|
for="leaveDetailRef"
|
||||||
|
v-model="props.data.leaveDetail"
|
||||||
|
label="รายละเอียด"
|
||||||
|
:readonly="!edit"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-file bg-color="white" ref="leaveDocumentRef" v-model="props.data.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="attach_file" color="primary" />
|
||||||
|
</template>
|
||||||
|
</q-file>
|
||||||
|
|
||||||
|
<div class="col-12 row" v-if="!edit">
|
||||||
|
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||||
|
</div>
|
||||||
|
<q-card bordered flat class="full-width">
|
||||||
|
<q-list separator>
|
||||||
|
<q-item v-for="(file, index) in props.data.leaveDocument" :key="index" class="q-my-xs">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label class="full-width ellipsis">
|
||||||
|
{{ file.name }}
|
||||||
|
</q-item-label>
|
||||||
|
<q-item-label caption> </q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
|
<q-separator class="q-mt-sm" />
|
||||||
|
<div class="row col-12 q-pt-md">
|
||||||
|
<q-space />
|
||||||
|
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
412
src/modules/05_leave/components/formEdit/formEdit_Military.vue
Normal file
412
src/modules/05_leave/components/formEdit/formEdit_Military.vue
Normal file
|
|
@ -0,0 +1,412 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive, ref } from "vue"
|
||||||
|
import { useCounterMixin } from "@/stores/mixin"
|
||||||
|
import { useQuasar } from "quasar"
|
||||||
|
import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsence"
|
||||||
|
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||||
|
import http from "@/plugins/http"
|
||||||
|
import config from "@/app.config"
|
||||||
|
import { useRouter } from "vue-router"
|
||||||
|
|
||||||
|
/** Use */
|
||||||
|
const router = useRouter()
|
||||||
|
const dataStore = useLeaveStore()
|
||||||
|
const $q = useQuasar()
|
||||||
|
const mixin = useCounterMixin()
|
||||||
|
const { date2Thai, dialogConfirm, calculateDurationYmd, dateToISO, success, messageError, fails } = mixin
|
||||||
|
const edit = ref<boolean>(true)
|
||||||
|
const files = ref<any>(null)
|
||||||
|
|
||||||
|
/** ตัวแปร ref สำหรับแสดง validate */
|
||||||
|
const leaveStartDateRef = ref<object | null>(null)
|
||||||
|
const leaveEndDateRef = ref<object | null>(null)
|
||||||
|
const leaveWroteRef = ref<object | null>(null)
|
||||||
|
const absentDaySummonRef = ref<object | null>(null)
|
||||||
|
const absentDayLocationRef = ref<object | null>(null)
|
||||||
|
const absentDayRegistorDateRef = ref<object | null>(null)
|
||||||
|
const absentDayGetInRef = ref<object | null>(null)
|
||||||
|
const absentDayAtRef = ref<object | null>(null)
|
||||||
|
const leaveDetailRef = ref<object | null>(null)
|
||||||
|
|
||||||
|
/** รับ props มาจากหน้าหลัก */
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
onSubmit: {
|
||||||
|
type: Function,
|
||||||
|
default: () => "",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
/** ข้อมูล v-model ของฟอร์ม */
|
||||||
|
const formDataMilitary = reactive<any>({
|
||||||
|
type: dataStore.typeId,
|
||||||
|
leaveStartDate: null,
|
||||||
|
leaveEndDate: null,
|
||||||
|
leaveTotal: 0,
|
||||||
|
leaveDocument: null,
|
||||||
|
leaveWrote: "",
|
||||||
|
absentDaySummon: "",
|
||||||
|
absentDayLocation: "",
|
||||||
|
absentDayRegistorDate: null,
|
||||||
|
absentDayGetIn: "",
|
||||||
|
absentDayAt: "",
|
||||||
|
leaveDetail: "",
|
||||||
|
})
|
||||||
|
|
||||||
|
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||||
|
const nameFile = ref<string>("")
|
||||||
|
const fileDocDataUpload = ref<File[]>([])
|
||||||
|
const fileUploadDoc = async (files: any) => {
|
||||||
|
files.forEach((file: any) => {
|
||||||
|
fileDocDataUpload.value.push(file)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||||
|
const formRef: MilitaryForm = {
|
||||||
|
leaveStartDate: leaveStartDateRef,
|
||||||
|
leaveEndDate: leaveEndDateRef,
|
||||||
|
leaveWrote: leaveWroteRef,
|
||||||
|
absentDaySummon: absentDaySummonRef,
|
||||||
|
absentDayLocation: absentDayLocationRef,
|
||||||
|
absentDayRegistorDate: absentDayRegistorDateRef,
|
||||||
|
absentDayGetIn: absentDayGetInRef,
|
||||||
|
absentDayAt: absentDayAtRef,
|
||||||
|
leaveDetail: leaveDetailRef,
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
||||||
|
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)) {
|
||||||
|
onSubmit()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ฟังก์ชั่น บันทึก */
|
||||||
|
const onSubmit = async () => {
|
||||||
|
dialogConfirm(
|
||||||
|
$q,
|
||||||
|
async () => {
|
||||||
|
await saveFormData()
|
||||||
|
},
|
||||||
|
"ยืนยันการยื่นใบลา",
|
||||||
|
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* check ว่าลาได้ไหม จาก api
|
||||||
|
* @param formData
|
||||||
|
*/
|
||||||
|
const isLeave = ref<boolean>(true)
|
||||||
|
async function FetchCheck() {
|
||||||
|
await http
|
||||||
|
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataMilitary.leaveStartDate ?? null, EndLeaveDate: formDataMilitary.leaveEndDate ?? null })
|
||||||
|
.then((res: any) => {
|
||||||
|
const data = res.data.result
|
||||||
|
isLeave.value = data.isLeave
|
||||||
|
if (data.isLeave === true) {
|
||||||
|
formDataMilitary.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||||
|
// formDataMilitary.leaveLast = data.totalDate
|
||||||
|
} else {
|
||||||
|
fails($q, "ไม่สามารถลาได้")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((e: any) => {
|
||||||
|
messageError($q, e)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||||
|
*/
|
||||||
|
async function saveFormData() {
|
||||||
|
const formData = new FormData()
|
||||||
|
// if (formDataMilitary.leaveDocument.length > 0) {
|
||||||
|
// const blob = formDataMilitary.leaveDocument.slice(0, formDataMilitary.leaveDocument[0].size)
|
||||||
|
// const newFile = new File(blob, nameFile.value, {
|
||||||
|
// type: formDataMilitary.leaveDocument[0].type,
|
||||||
|
// })
|
||||||
|
// formData.append("leaveDocument", newFile)
|
||||||
|
// }
|
||||||
|
formData.append("leaveDocument", formDataMilitary.leaveDocument)
|
||||||
|
formData.append("type", formDataMilitary.type)
|
||||||
|
formData.append("leaveStartDate", dateToISO(formDataMilitary.leaveStartDate))
|
||||||
|
formData.append("leaveEndDate", dateToISO(formDataMilitary.leaveEndDate))
|
||||||
|
formData.append("absentDaySummon", formDataMilitary.absentDaySummon)
|
||||||
|
formData.append("absentDayLocation", formDataMilitary.absentDayLocation)
|
||||||
|
formData.append("absentDayRegistorDate", dateToISO(formDataMilitary.absentDayRegistorDate))
|
||||||
|
formData.append("absentDayGetIn", formDataMilitary.absentDayGetIn)
|
||||||
|
formData.append("absentDayAt", formDataMilitary.absentDayAt)
|
||||||
|
formData.append("leaveWrote", formDataMilitary.leaveWrote)
|
||||||
|
formData.append("leaveDetail", formDataMilitary.leaveDetail)
|
||||||
|
|
||||||
|
await http
|
||||||
|
.post(config.API.leaveUser(), formData)
|
||||||
|
.then((res: any) => {
|
||||||
|
success($q, "บันทึกสำเร็จ")
|
||||||
|
router.push(`/leave`)
|
||||||
|
})
|
||||||
|
.catch((e: any) => {
|
||||||
|
messageError($q, e)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function อัพเดทค่า LeaveTotal
|
||||||
|
*/
|
||||||
|
function updateLeaveTotal() {
|
||||||
|
const newLeaveTotal = calculateDurationYmd(props.data.leaveDateStart, props.data.leaveDateEnd)
|
||||||
|
props.data.leaveTotal = newLeaveTotal
|
||||||
|
console.log("test")
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||||
|
</div>
|
||||||
|
<form @submit.prevent="onValidate">
|
||||||
|
<q-card bordered class="q-pa-md bg-grey-1">
|
||||||
|
<div class="row q-pa-sm q-col-gutter-sm">
|
||||||
|
<q-input
|
||||||
|
ref="leaveWroteRef"
|
||||||
|
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
bg-color="white"
|
||||||
|
hide-bottom-space
|
||||||
|
v-model="props.data.leaveWrote"
|
||||||
|
label="เขียนที่"
|
||||||
|
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<datepicker
|
||||||
|
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="props.data.leaveDateStart"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
borderless
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
@update:model-value="props.data.leaveDateEnd = null"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
bg-color="white"
|
||||||
|
dense
|
||||||
|
ref="leaveStartDateRef"
|
||||||
|
hide-bottom-space
|
||||||
|
class="full-width datepicker"
|
||||||
|
:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
|
||||||
|
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
|
||||||
|
<datepicker
|
||||||
|
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="props.data.leaveDateEnd"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
borderless
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
@update:model-value="updateLeaveTotal, FetchCheck()"
|
||||||
|
:readonly="!props.data.leaveDateStart"
|
||||||
|
:min-date="props.data.leaveDateStart"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
ref="leaveEndDateRef"
|
||||||
|
bg-color="white"
|
||||||
|
hide-bottom-space
|
||||||
|
:readonly="!props.data.leaveDateStart"
|
||||||
|
class="full-width datepicker"
|
||||||
|
:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
|
||||||
|
:label="`${'ลาถึงวันที่'}`"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-md-2 col-sm-6"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
bg-color="white"
|
||||||
|
ref="leaveTotalRef"
|
||||||
|
for="leaveTotalRef"
|
||||||
|
v-model="props.data.leaveTotal"
|
||||||
|
label="จำนวนวันที่ลา"
|
||||||
|
readonly
|
||||||
|
hide-bottom-space
|
||||||
|
/>
|
||||||
|
<div class="full-width">
|
||||||
|
<div class="q-col-gutter-sm row">
|
||||||
|
<q-input
|
||||||
|
ref="absentDaySummonRef"
|
||||||
|
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||||
|
dense
|
||||||
|
bg-color="white"
|
||||||
|
outlined
|
||||||
|
v-model="props.data.absentDaySummon"
|
||||||
|
label="ได้รับหมายเรียกของ"
|
||||||
|
hide-bottom-space
|
||||||
|
:rules="[val => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
ref="atRef"
|
||||||
|
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||||
|
dense
|
||||||
|
bg-color="white"
|
||||||
|
outlined
|
||||||
|
v-model="props.data.absentDayLocation"
|
||||||
|
label="ที่"
|
||||||
|
hide-bottom-space
|
||||||
|
:rules="[val => !!val || `${'กรุณากรอกที่'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="full-width">
|
||||||
|
<div class="q-col-gutter-sm row">
|
||||||
|
<datepicker
|
||||||
|
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="props.data.absentDayRegistorDate"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
borderless
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
ref="absentDayRegistorDateRef"
|
||||||
|
bg-color="white"
|
||||||
|
hide-bottom-space
|
||||||
|
class="full-width datepicker"
|
||||||
|
:model-value="props.data.absentDayRegistorDate != null ? date2Thai(props.data.absentDayRegistorDate) : null"
|
||||||
|
:label="`${'ลงวันที่'}`"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกลงวันที่'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||||
|
dense
|
||||||
|
bg-color="white"
|
||||||
|
ref="absentDayGetInRef"
|
||||||
|
outlined
|
||||||
|
v-model="props.data.absentDayGetIn"
|
||||||
|
label="ให้เข้ารับการ"
|
||||||
|
hide-bottom-space
|
||||||
|
:rules="[val => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||||
|
dense
|
||||||
|
bg-color="white"
|
||||||
|
outlined
|
||||||
|
ref="absentDayAtRef"
|
||||||
|
v-model="props.data.absentDayAt"
|
||||||
|
label="ณ ที่"
|
||||||
|
hide-bottom-space
|
||||||
|
:rules="[val => !!val || `${'กรุณากรอก ณ ที่'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<q-input class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" dense bg-color="white" outlined v-model="props.data.leaveDetail" type="textarea" label="รายละเอียด" />
|
||||||
|
|
||||||
|
<div class="col-12 col-sm-6">
|
||||||
|
<q-file v-model="props.data.leaveDocument" dense label="เอกสารประกอบ" outlined bg-color="white" multiple hide-bottom-space use-chips @added="fileUploadDoc">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="attach_file" color="primary" />
|
||||||
|
</template>
|
||||||
|
</q-file>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 row" v-if="!edit">
|
||||||
|
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||||
|
</div>
|
||||||
|
<q-card bordered flat class="full-width">
|
||||||
|
<q-list separator>
|
||||||
|
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label class="full-width ellipsis">
|
||||||
|
{{ file.fileName }}
|
||||||
|
</q-item-label>
|
||||||
|
|
||||||
|
<q-item-label caption> </q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
<q-separator class="q-mt-sm" />
|
||||||
|
<div class="row col-12 q-pt-md">
|
||||||
|
<q-space />
|
||||||
|
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,545 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive, ref, watch } from "vue"
|
||||||
|
import { useCounterMixin } from "@/stores/mixin"
|
||||||
|
import { useQuasar } from "quasar"
|
||||||
|
import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbsence"
|
||||||
|
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||||
|
import http from "@/plugins/http"
|
||||||
|
import config from "@/app.config"
|
||||||
|
import { useRouter } from "vue-router"
|
||||||
|
|
||||||
|
/** Use */
|
||||||
|
const dataStore = useLeaveStore()
|
||||||
|
const $q = useQuasar()
|
||||||
|
const router = useRouter()
|
||||||
|
const mixin = useCounterMixin()
|
||||||
|
const { date2Thai, dialogConfirm, calculateDurationYmd, fails, dateToISO, success, messageError } = mixin
|
||||||
|
const edit = ref<boolean>(true)
|
||||||
|
const files = ref<any>(null)
|
||||||
|
|
||||||
|
/** รับ props มาจากหน้าหลัก */
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
onSubmit: {
|
||||||
|
type: Function,
|
||||||
|
default: () => "",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
/** ตัวแปร ref สำหรับแสดง validate */
|
||||||
|
const ordainDayLocationNumberRef = ref<object | null>(null)
|
||||||
|
const leaveWroteRef = ref<object | null>(null)
|
||||||
|
const leavebirthDateRef = ref<object | null>(null)
|
||||||
|
const leavegovernmentDateRef = ref<object | null>(null)
|
||||||
|
const totalLeaveRef = ref<object | null>(null)
|
||||||
|
const leaveEndDateRef = ref<object | null>(null)
|
||||||
|
const ordainDayOrdinationRef = ref<object | null>(null)
|
||||||
|
const leaveStartDateRef = ref<object | null>(null)
|
||||||
|
const ordainDayLocationAddressRef = ref<object | null>(null)
|
||||||
|
const ordainDayBuddhistLentAddressRef = ref<object | null>(null)
|
||||||
|
const ordainDayLocationNameRef = ref<object | null>(null)
|
||||||
|
const ordainDayBuddhistLentNameRef = ref<object | null>(null)
|
||||||
|
const leaveDocumentRef = ref<object | null>(null)
|
||||||
|
|
||||||
|
/** ข้อมูล v-model ของฟอร์ม */
|
||||||
|
const formDataOrdination = reactive<any>({
|
||||||
|
type: dataStore.typeId,
|
||||||
|
leaveWrote: "",
|
||||||
|
leavegovernmentDate: new Date(),
|
||||||
|
leavebirthDate: new Date(),
|
||||||
|
leaveStartDate: null,
|
||||||
|
leaveEndDate: null,
|
||||||
|
totalLeave: new Date(),
|
||||||
|
ordainDayOrdination: new Date(),
|
||||||
|
ordainDayLocationName: "",
|
||||||
|
ordainDayLocationNumber: null,
|
||||||
|
ordainDayLocationAddress: "",
|
||||||
|
ordainDayBuddhistLentName: "",
|
||||||
|
ordainDayBuddhistLentAddress: "",
|
||||||
|
ordainDayStatus: "true",
|
||||||
|
leaveDocument: null,
|
||||||
|
})
|
||||||
|
|
||||||
|
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||||
|
const formRef: OrdinationForm = {
|
||||||
|
leaveWrote: leaveWroteRef,
|
||||||
|
leavegovernmentDate: leavegovernmentDateRef,
|
||||||
|
leavebirthDate: leavebirthDateRef,
|
||||||
|
leaveStartDate: leaveStartDateRef,
|
||||||
|
leaveEndDate: leaveEndDateRef,
|
||||||
|
totalLeave: totalLeaveRef,
|
||||||
|
ordainDayOrdination: ordainDayOrdinationRef,
|
||||||
|
ordainDayLocationName: ordainDayLocationNameRef,
|
||||||
|
ordainDayLocationNumber: ordainDayLocationNumberRef,
|
||||||
|
ordainDayLocationAddress: ordainDayLocationAddressRef,
|
||||||
|
ordainDayBuddhistLentName: ordainDayBuddhistLentNameRef,
|
||||||
|
ordainDayBuddhistLentAddress: ordainDayBuddhistLentAddressRef,
|
||||||
|
leaveDocument: leaveDocumentRef,
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||||
|
const nameFile = ref<string>("")
|
||||||
|
const fileDocDataUpload = ref<File[]>([])
|
||||||
|
const fileUploadDoc = async (files: any) => {
|
||||||
|
files.forEach((file: any) => {
|
||||||
|
fileDocDataUpload.value.push(file)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// // Watch for changes in leaveEndDate and update leaveTotal accordingly
|
||||||
|
// watch(formDataOrdination.leaveEndDate, async () => {
|
||||||
|
// if (formDataOrdination.leaveStartDate !== undefined && formDataOrdination.leaveEndDate !== undefined) {
|
||||||
|
// const newLeaveTotal = calculateDurationYmd(formDataOrdination.leaveStartDate, formDataOrdination.leaveEndDate)
|
||||||
|
// formDataOrdination.leaveTotal = newLeaveTotal
|
||||||
|
// console.log(newLeaveTotal)
|
||||||
|
// }
|
||||||
|
// // Update the leaveTotal value
|
||||||
|
// console.log("test")
|
||||||
|
// })
|
||||||
|
|
||||||
|
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
||||||
|
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)) {
|
||||||
|
onSubmit()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ฟังก์ชั่น บันทึก */
|
||||||
|
const onSubmit = async () => {
|
||||||
|
dialogConfirm(
|
||||||
|
$q,
|
||||||
|
async () => {
|
||||||
|
await saveFormData()
|
||||||
|
},
|
||||||
|
"ยืนยันการยื่นใบลา",
|
||||||
|
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* check ว่าลาได้ไหม จาก api
|
||||||
|
* @param formData
|
||||||
|
*/
|
||||||
|
const isLeave = ref<boolean>(true)
|
||||||
|
async function FetchCheck() {
|
||||||
|
await http
|
||||||
|
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataOrdination.leaveStartDate ?? null, EndLeaveDate: formDataOrdination.leaveEndDate ?? null })
|
||||||
|
.then((res: any) => {
|
||||||
|
const data = res.data.result
|
||||||
|
isLeave.value = data.isLeave
|
||||||
|
if (data.isLeave === true) {
|
||||||
|
formDataOrdination.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||||
|
// formDataOrdination.leaveLast = data.totalDate
|
||||||
|
} else {
|
||||||
|
fails($q, "ไม่สามารถลาได้")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((e: any) => {
|
||||||
|
messageError($q, e)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||||
|
*/
|
||||||
|
async function saveFormData() {
|
||||||
|
const formData = new FormData()
|
||||||
|
// if (formDataOrdination.leaveDocument.length > 0) {
|
||||||
|
// const blob = formDataOrdination.leaveDocument.slice(0, formDataOrdination.leaveDocument[0].size)
|
||||||
|
// const newFile = new File(blob, nameFile.value, {
|
||||||
|
// type: formDataOrdination.leaveDocument[0].type,
|
||||||
|
// })
|
||||||
|
// formData.append("leaveDocument", newFile)
|
||||||
|
// }
|
||||||
|
formData.append("leaveDocument", formDataOrdination.leaveDocument)
|
||||||
|
formData.append("type", formDataOrdination.type)
|
||||||
|
formData.append("leaveStartDate", dateToISO(formDataOrdination.leaveStartDate))
|
||||||
|
formData.append("leaveEndDate", dateToISO(formDataOrdination.leaveEndDate))
|
||||||
|
formData.append("ordainDayOrdination", dateToISO(formDataOrdination.ordainDayOrdination))
|
||||||
|
formData.append("ordainDayLocationName", formDataOrdination.ordainDayLocationName)
|
||||||
|
formData.append("ordainDayLocationNumber", formDataOrdination.ordainDayLocationNumber)
|
||||||
|
formData.append("ordainDayLocationAddress", formDataOrdination.ordainDayLocationAddress)
|
||||||
|
formData.append("ordainDayBuddhistLentName", formDataOrdination.ordainDayBuddhistLentName)
|
||||||
|
formData.append("ordainDayBuddhistLentAddress", formDataOrdination.ordainDayBuddhistLentAddress)
|
||||||
|
formData.append("ordainDayStatus", formDataOrdination.ordainDayStatus)
|
||||||
|
formData.append("leaveWrote", formDataOrdination.leaveWrote)
|
||||||
|
formData.append("leaveDetail", formDataOrdination.leaveDetail)
|
||||||
|
formData.append("leavebirthDate", dateToISO(formDataOrdination.leavebirthDate))
|
||||||
|
formData.append("leavegovernmentDate", dateToISO(formDataOrdination.leavegovernmentDate))
|
||||||
|
await http
|
||||||
|
.post(config.API.leaveUser(), formData)
|
||||||
|
.then((res: any) => {
|
||||||
|
success($q, "บันทึกสำเร็จ")
|
||||||
|
router.push(`/leave`)
|
||||||
|
})
|
||||||
|
.catch((e: any) => {
|
||||||
|
messageError($q, e)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function อัพเดทค่า LeaveTotal
|
||||||
|
*/
|
||||||
|
function updateLeaveTotal() {
|
||||||
|
const newLeaveTotal = calculateDurationYmd(formDataOrdination.leaveStartDate, formDataOrdination.leaveEndDate)
|
||||||
|
formDataOrdination.leaveTotal = newLeaveTotal
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- ฟอร์ม ลาอุปสมบท -->
|
||||||
|
<template>
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||||
|
</div>
|
||||||
|
<form @submit.prevent="onValidate" class="full-width">
|
||||||
|
<q-card bordered class="q-pa-md bg-grey-1">
|
||||||
|
<div class="row q-pa-sm q-col-gutter-sm">
|
||||||
|
<q-input
|
||||||
|
ref="leaveWroteRef"
|
||||||
|
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
bg-color="white"
|
||||||
|
hide-bottom-space
|
||||||
|
v-model="props.data.leaveWrote"
|
||||||
|
label="เขียนที่"
|
||||||
|
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<datepicker
|
||||||
|
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="props.data.leaveDateStart"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
borderless
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
@update:model-value="props.data.leaveDateEnd = null"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
bg-color="white"
|
||||||
|
dense
|
||||||
|
ref="leaveStartDateRef"
|
||||||
|
hide-bottom-space
|
||||||
|
class="full-width datepicker"
|
||||||
|
:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
|
||||||
|
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
|
||||||
|
<datepicker
|
||||||
|
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="props.data.leaveDateEnd"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
borderless
|
||||||
|
@update:model-value="updateLeaveTotal, FetchCheck()"
|
||||||
|
:readonly="!props.data.leaveDateStart"
|
||||||
|
:enableTimePicker="false"
|
||||||
|
:min-date="props.data.leaveDateStart"
|
||||||
|
week-start="0"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
ref="leaveEndDateRef"
|
||||||
|
bg-color="white"
|
||||||
|
hide-bottom-space
|
||||||
|
class="full-width datepicker"
|
||||||
|
:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
|
||||||
|
:label="`${'ลาถึงวันที่'}`"
|
||||||
|
:readonly="!props.data.leaveDateStart"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-md-2 col-sm-6"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
bg-color="white"
|
||||||
|
ref="leaveTotalRef"
|
||||||
|
for="leaveTotalRef"
|
||||||
|
v-model="props.data.leaveTotal"
|
||||||
|
label="จำนวนวันที่ลา"
|
||||||
|
readonly
|
||||||
|
hide-bottom-space
|
||||||
|
/>
|
||||||
|
<div class="full-width">
|
||||||
|
<div class="q-col-gutter-sm row">
|
||||||
|
<datepicker
|
||||||
|
class="col-12 col-md-4 col-sm-6"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="props.data.leavegovernmentDate"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
borderless
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
readonly
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
ref="leavegovernmentDateRef"
|
||||||
|
dense
|
||||||
|
bg-color="white"
|
||||||
|
hide-bottom-space
|
||||||
|
readonly
|
||||||
|
class="full-width"
|
||||||
|
:model-value="props.data.leavegovernmentDate != null ? date2Thai(props.data.leavegovernmentDate) : null"
|
||||||
|
:label="`${'วันที่เข้ารับราชการ'}`"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
|
||||||
|
<datepicker
|
||||||
|
class="col-12 col-md-4 col-sm-6"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="props.data.leavebirthDate"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
ref="leavebirthDateRef"
|
||||||
|
dense
|
||||||
|
bg-color="white"
|
||||||
|
hide-bottom-space
|
||||||
|
readonly
|
||||||
|
class="full-width"
|
||||||
|
:model-value="props.data.leavebirthDate != null ? date2Thai(props.data.leavebirthDate) : null"
|
||||||
|
:label="`${'วันเดือนปีเกิด'}`"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกวันเดือนปีเกิด'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark col-12">เคยบวชหรือไม่</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<q-radio v-model="props.data.ordainDayStatus" val="true" label="เคยบวช" checked-icon="task_alt " hide-bottom-space />
|
||||||
|
<q-radio v-model="props.data.ordainDayStatus" val="false" label="ไม่เคยบวช" checked-icon="task_alt" hide-bottom-space />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-weight-bold text-dark col-12">สถานที่บวช</div>
|
||||||
|
<datepicker
|
||||||
|
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="props.data.ordainDayOrdination"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
full-width
|
||||||
|
borderless
|
||||||
|
hide-bottom-space
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
ref="ordainDayOrdinationRef"
|
||||||
|
dense
|
||||||
|
bg-color="white"
|
||||||
|
hide-bottom-space
|
||||||
|
class="full-width datepicker"
|
||||||
|
:model-value="props.data.ordainDayOrdination != null ? date2Thai(props.data.ordainDayOrdination) : null"
|
||||||
|
:label="`${'วันอุปสมบท'}`"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกวันอุปสมบท'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||||
|
dense
|
||||||
|
hide-bottom-space
|
||||||
|
ref="ordainDayLocationNameRef"
|
||||||
|
bg-color="white"
|
||||||
|
outlined
|
||||||
|
full-width
|
||||||
|
v-model="props.data.ordainDayLocationName"
|
||||||
|
label="ชื่อวัด"
|
||||||
|
:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||||
|
ref="ordainDayLocationNumberRef"
|
||||||
|
dense
|
||||||
|
full-width
|
||||||
|
outlined
|
||||||
|
v-model="props.data.ordainDayLocationNumber"
|
||||||
|
bg-color="white"
|
||||||
|
mask="(###)-###-####"
|
||||||
|
unmasked-value
|
||||||
|
hide-bottom-space
|
||||||
|
label="หมายเลขโทรศัพท์"
|
||||||
|
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
dense
|
||||||
|
ref="ordainDayLocationAddressRef"
|
||||||
|
bg-color="white"
|
||||||
|
outlined
|
||||||
|
hide-bottom-space
|
||||||
|
v-model="props.data.ordainDayLocationAddress"
|
||||||
|
label="ที่อยู่"
|
||||||
|
:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
|
||||||
|
type="textarea"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark col-12">สถานที่จำพรรษา</div>
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||||
|
dense
|
||||||
|
ref="ordainDayBuddhistLentNameRef"
|
||||||
|
bg-color="white"
|
||||||
|
hide-bottom-space
|
||||||
|
outlined
|
||||||
|
v-model="props.data.ordainDayBuddhistLentName"
|
||||||
|
label="ชื่อวัด"
|
||||||
|
:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
class="col-12 cursor-pointer inputgreen"
|
||||||
|
dense
|
||||||
|
ref="ordainDayBuddhistLentAddressRef"
|
||||||
|
bg-color="white"
|
||||||
|
outlined
|
||||||
|
v-model="props.data.ordainDayBuddhistLentAddress"
|
||||||
|
label="ที่อยู่"
|
||||||
|
:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
|
||||||
|
type="textarea"
|
||||||
|
hide-bottom-space
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
type="textarea"
|
||||||
|
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
dense
|
||||||
|
bg-color="white"
|
||||||
|
outlined
|
||||||
|
ref="leaveDetailRef"
|
||||||
|
for="leaveDetailRef"
|
||||||
|
v-model="props.data.leaveDetail"
|
||||||
|
label="รายละเอียด"
|
||||||
|
:readonly="!edit"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="col-12 col-sm-6">
|
||||||
|
<q-file ref="leaveDocumentRef" v-model="props.data.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined bg-color="white" multiple use-chips>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="attach_file" color="primary" />
|
||||||
|
</template>
|
||||||
|
</q-file>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 row" v-if="!edit">
|
||||||
|
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||||
|
</div>
|
||||||
|
<q-card bordered flat class="full-width">
|
||||||
|
<q-list separator>
|
||||||
|
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label class="full-width ellipsis">
|
||||||
|
{{ file.fileName }}
|
||||||
|
</q-item-label>
|
||||||
|
|
||||||
|
<q-item-label caption> </q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
|
<q-separator class="q-mt-sm" />
|
||||||
|
|
||||||
|
<div class="row col-12 q-pt-md">
|
||||||
|
<q-space />
|
||||||
|
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,338 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive, ref } from "vue"
|
||||||
|
import { useCounterMixin } from "@/stores/mixin"
|
||||||
|
import { useQuasar } from "quasar"
|
||||||
|
import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence"
|
||||||
|
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||||
|
import http from "@/plugins/http"
|
||||||
|
import config from "@/app.config"
|
||||||
|
import { useRouter } from "vue-router"
|
||||||
|
import genReport from "@/plugins/genreport"
|
||||||
|
|
||||||
|
/** Use */
|
||||||
|
const dataStore = useLeaveStore()
|
||||||
|
const $q = useQuasar()
|
||||||
|
const mixin = useCounterMixin()
|
||||||
|
const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError } = mixin
|
||||||
|
const router = useRouter()
|
||||||
|
const edit = ref<boolean>(true)
|
||||||
|
const isSave = ref<boolean>(false)
|
||||||
|
const files = ref<any>(null)
|
||||||
|
|
||||||
|
/** ตัวแปร ref สำหรับแสดง validate */
|
||||||
|
const leaveStartDateRef = ref<object | null>(null)
|
||||||
|
const leaveEndDateRef = ref<object | null>(null)
|
||||||
|
const leaveWroteRef = ref<object | null>(null)
|
||||||
|
|
||||||
|
/** รับ props มาจากหน้าหลัก */
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
onSubmit: {
|
||||||
|
type: Function,
|
||||||
|
default: () => "",
|
||||||
|
},
|
||||||
|
leaveId: {
|
||||||
|
type: String,
|
||||||
|
require: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
// /** ข้อมูล v-model ของฟอร์ม */
|
||||||
|
// const formDataRehabilitation = reactive<any>({
|
||||||
|
// type: dataStore.typeId,
|
||||||
|
// leaveWrote: "",
|
||||||
|
// leaveStartDate: null,
|
||||||
|
// leaveEndDate: null,
|
||||||
|
// leaveDocument: "",
|
||||||
|
// leaveDetail: "",
|
||||||
|
// leaveDraftDocument: null,
|
||||||
|
// })
|
||||||
|
|
||||||
|
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||||
|
const formRef: RehabilitationForm = {
|
||||||
|
leaveStartDate: leaveStartDateRef,
|
||||||
|
leaveEndDate: leaveEndDateRef,
|
||||||
|
leaveWrote: leaveWroteRef,
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
||||||
|
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)) {
|
||||||
|
onSubmit()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||||
|
const nameFile = ref<string>("")
|
||||||
|
const nameFileDraft = ref<string>("")
|
||||||
|
const fileDocDataUpload = ref<File[]>([])
|
||||||
|
const fileUploadDoc = async (files: any) => {
|
||||||
|
files.forEach((file: any) => {
|
||||||
|
fileDocDataUpload.value.push(file)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ฟังก์ชั่น บันทึก */
|
||||||
|
const onSubmit = async () => {
|
||||||
|
dialogConfirm(
|
||||||
|
$q,
|
||||||
|
async () => {
|
||||||
|
// await saveFormData()
|
||||||
|
},
|
||||||
|
"ยืนยันการยื่นใบลา",
|
||||||
|
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* check ว่าลาได้ไหม จาก api
|
||||||
|
* @param formData
|
||||||
|
*/
|
||||||
|
const isLeave = ref<boolean>(true)
|
||||||
|
async function FetchCheck() {
|
||||||
|
await http
|
||||||
|
.post(config.API.leaveCheck(), { type: props.data.leaveTypeId ?? null, StartLeaveDate: props.data.leaveDateStart ?? null, EndLeaveDate: props.data.leaveDateEnd ?? null })
|
||||||
|
.then((res: any) => {
|
||||||
|
const data = res.data.result
|
||||||
|
isLeave.value = data.isLeave
|
||||||
|
if (data.isLeave === true) {
|
||||||
|
props.data.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||||
|
} else {
|
||||||
|
fails($q, "ไม่สามารถลาได้")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((e: any) => {
|
||||||
|
messageError($q, e)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(props.leaveId)
|
||||||
|
|
||||||
|
//download function
|
||||||
|
async function onClickDownloadFile(id: string, fileName: string) {
|
||||||
|
// showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.leaveReport(id))
|
||||||
|
.then(async res => {
|
||||||
|
console.log(res)
|
||||||
|
const data = res.data.result
|
||||||
|
await genReport(data, fileName)
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
messageError($q, err)
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
// hideLoader();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// /**
|
||||||
|
// * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||||
|
// */
|
||||||
|
// async function saveFormData() {
|
||||||
|
// const formData = new FormData()
|
||||||
|
// formData.append("leaveDraftDocument", formDataRehabilitation.leaveDraftDocument)
|
||||||
|
// formData.append("leaveDocument", formDataRehabilitation.leaveDocument)
|
||||||
|
// formData.append("type", formDataRehabilitation.type) //
|
||||||
|
// formData.append("leaveStartDate", dateToISO(formDataRehabilitation.leaveStartDate)) //
|
||||||
|
// formData.append("leaveEndDate", dateToISO(formDataRehabilitation.leaveEndDate)) //
|
||||||
|
// formData.append("leaveWrote", formDataRehabilitation.leaveWrote) //
|
||||||
|
// formData.append("leaveDetail", formDataRehabilitation.leaveDetail) //
|
||||||
|
|
||||||
|
// await http
|
||||||
|
// .post(config.API.leaveUser(), formData)
|
||||||
|
// .then((res: any) => {
|
||||||
|
// success($q, "บันทึกสำเร็จ")
|
||||||
|
|
||||||
|
// router.push(`/leave`)
|
||||||
|
// })
|
||||||
|
// .catch((e: any) => {
|
||||||
|
// messageError($q, e)
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<form @submit.prevent="onValidate">
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<q-icon name="mdi-numeric-2-circle" size="20px" color="primary" />
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark header">แก้ไขข้อมูล</div>
|
||||||
|
</div>
|
||||||
|
<q-card bordered class="q-pa-md bg-grey-1">
|
||||||
|
<div class="row q-pa-sm q-col-gutter-sm">
|
||||||
|
<q-input
|
||||||
|
v-model="props.data.leaveWrote"
|
||||||
|
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
ref="leaveWroteRef"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
bg-color="white"
|
||||||
|
label="เขียนที่"
|
||||||
|
hide-bottom-space
|
||||||
|
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||||
|
/>
|
||||||
|
<datepicker
|
||||||
|
v-model="props.data.leaveDateStart"
|
||||||
|
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
autoApply
|
||||||
|
borderless
|
||||||
|
week-start="0"
|
||||||
|
:enableTimePicker="false"
|
||||||
|
:locale="'th'"
|
||||||
|
@update:model-value="props.data.leaveEndDate = null"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
ref="leaveStartDateRef"
|
||||||
|
class="full-width datepicker"
|
||||||
|
bg-color="white"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
|
||||||
|
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
|
||||||
|
<datepicker
|
||||||
|
v-model="props.data.leaveDateEnd"
|
||||||
|
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
autoApply
|
||||||
|
borderless
|
||||||
|
week-start="0"
|
||||||
|
:locale="'th'"
|
||||||
|
@update:model-value="FetchCheck()"
|
||||||
|
:readonly="!props.data.leaveDateStart"
|
||||||
|
:enableTimePicker="false"
|
||||||
|
:min-date="props.data.leaveDateStart"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
ref="leaveEndDateRef"
|
||||||
|
class="full-width datepicker"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
bg-color="white"
|
||||||
|
hide-bottom-space
|
||||||
|
:readonly="!props.data.leaveDateEnd"
|
||||||
|
:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
|
||||||
|
:label="`${'ลาถึงวันที่'}`"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
|
||||||
|
<q-input v-model="props.data.leaveDetail" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
|
||||||
|
|
||||||
|
<div class="col-12 col-sm-6">
|
||||||
|
<q-file v-model="props.data.leaveDocument" @added="fileUploadDoc" use-chips bg-color="white" dense outlined multiple label="เอกสารประกอบ">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="attach_file" color="primary" />
|
||||||
|
</template>
|
||||||
|
</q-file>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 row" v-if="!edit">
|
||||||
|
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||||
|
</div>
|
||||||
|
<q-card bordered flat class="full-width">
|
||||||
|
<q-list separator>
|
||||||
|
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label class="full-width ellipsis">
|
||||||
|
{{ file.fileName }}
|
||||||
|
</q-item-label>
|
||||||
|
|
||||||
|
<q-item-label caption> </q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
|
<div class="q-mt-md">
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
|
||||||
|
</div>
|
||||||
|
<q-card class="bg-grey-1 q-pa-sm" bordered>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
|
||||||
|
<div class="column q-mx-xs">
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark text-center">ดาวน์โหลด</div>
|
||||||
|
<q-btn
|
||||||
|
color="primary"
|
||||||
|
icon="download"
|
||||||
|
label="ดาวน์โหลดแบบฟอร์ม"
|
||||||
|
@click="onClickDownloadFile('08dc01fd-51b0-4fbc-8447-ecad084a15b8', 'ฟอร์มการลาไปฟื้นฟูสมรรถภาพด้านอาชีพ')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-10 col-sm-5 col-md-4 q-my-sm">
|
||||||
|
<div class="column q-mx-xs">
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark text-center">อัปโหลด</div>
|
||||||
|
<q-file v-model="props.data.leaveDraftDocument" use-chips dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept="application/pdf">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="attach_file" color="primary" />
|
||||||
|
</template>
|
||||||
|
</q-file>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-1 self-end q-mb-sm">
|
||||||
|
<q-btn v-if="props.data.leaveDraftDocument != ''" flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"><q-tooltip>อัปโหลด</q-tooltip></q-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="!isSave">
|
||||||
|
<q-separator class="q-mt-sm" />
|
||||||
|
<div class="row col-12 q-pt-md">
|
||||||
|
<q-space />
|
||||||
|
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
445
src/modules/05_leave/components/formEdit/formEdit_Sick.vue
Normal file
445
src/modules/05_leave/components/formEdit/formEdit_Sick.vue
Normal file
|
|
@ -0,0 +1,445 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, watch, computed } from "vue"
|
||||||
|
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/SickForm"
|
||||||
|
import { useCounterMixin } from "@/stores/mixin"
|
||||||
|
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||||
|
import http from "@/plugins/http"
|
||||||
|
import config from "@/app.config"
|
||||||
|
import { useQuasar } from "quasar"
|
||||||
|
import { useRouter } from "vue-router"
|
||||||
|
|
||||||
|
/** Use */
|
||||||
|
const dataStore = useLeaveStore()
|
||||||
|
const $q = useQuasar()
|
||||||
|
const mixin = useCounterMixin()
|
||||||
|
const router = useRouter()
|
||||||
|
const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails, showLoader, hideLoader } = mixin
|
||||||
|
const edit = ref<boolean>(true)
|
||||||
|
|
||||||
|
/** รับ props มาจากหน้าหลัก */
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
onSubmit: {
|
||||||
|
type: Function,
|
||||||
|
default: () => "",
|
||||||
|
},
|
||||||
|
leaveId: {
|
||||||
|
type: String,
|
||||||
|
require: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
/** ข้อมูล v-model ของฟอร์ม */
|
||||||
|
const formDataSick = reactive<any>({
|
||||||
|
type: dataStore.typeId,
|
||||||
|
leaveWrote: "",
|
||||||
|
leaveStartDate: null,
|
||||||
|
leaveEndDate: null,
|
||||||
|
leaveRange: "ALL",
|
||||||
|
leaveTotal: "",
|
||||||
|
leaveLast: null,
|
||||||
|
leaveNumber: "",
|
||||||
|
leaveAddress: "",
|
||||||
|
leaveDetail: "",
|
||||||
|
leaveDocument: [],
|
||||||
|
})
|
||||||
|
|
||||||
|
/** ตัวแปร ref สำหรับแสดง validate */
|
||||||
|
const leaveWroteRef = ref<object | null>(null)
|
||||||
|
const leaveStartDateRef = ref<object | null>(null)
|
||||||
|
const leaveEndDateRef = ref<object | null>(null)
|
||||||
|
const leaveRangeRef = ref<object | null>(null)
|
||||||
|
const leaveTotalRef = ref<object | null>(null)
|
||||||
|
const leaveLastRef = ref<object | null>(null)
|
||||||
|
const leaveNumberRef = ref<object | null>(null)
|
||||||
|
const leaveAddressRef = ref<object | null>(null)
|
||||||
|
const leaveDetailRef = ref<object | null>(null)
|
||||||
|
|
||||||
|
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||||
|
const FormRef: FormRef = {
|
||||||
|
leaveWrote: leaveWroteRef,
|
||||||
|
leaveStartDate: leaveStartDateRef,
|
||||||
|
leaveEndDate: leaveEndDateRef,
|
||||||
|
leaveRange: leaveRangeRef,
|
||||||
|
leaveTotal: leaveTotalRef,
|
||||||
|
leaveNumber: leaveNumberRef,
|
||||||
|
leaveAddress: leaveAddressRef,
|
||||||
|
leaveDetail: leaveDetailRef,
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||||
|
watch(props.data, async () => {
|
||||||
|
// console.log("data==>", props.data)
|
||||||
|
formDataSick.leaveWrote = props.data.leaveWrote
|
||||||
|
formDataSick.leaveStartDate = props.data.leaveStartDate
|
||||||
|
formDataSick.leaveEndDate = props.data.leaveEndDate
|
||||||
|
formDataSick.contractTel = props.data.contractTel
|
||||||
|
formDataSick.leaveTotal = props.data.leaveTotal
|
||||||
|
formDataSick.leaveNumber = props.data.leaveNumber
|
||||||
|
formDataSick.leaveDetail = props.data.leaveDetail
|
||||||
|
formDataSick.leaveDocument = props.data.leaveDocument
|
||||||
|
})
|
||||||
|
|
||||||
|
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||||
|
const nameFile = ref<string>("")
|
||||||
|
const fileDocDataUpload = ref<File[]>([])
|
||||||
|
async function fileUploadDoc(files: any) {
|
||||||
|
files.forEach((file: any) => {
|
||||||
|
fileDocDataUpload.value.push(file)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function รีเซทค่า leaveStartDate เเละ leaveEndDate
|
||||||
|
*/
|
||||||
|
function resetDate() {
|
||||||
|
if (formDataSick.leaveRange === "MORNING" || formDataSick.leaveRange === "AFTERNOON") {
|
||||||
|
formDataSick.leaveStartDate = null
|
||||||
|
formDataSick.leaveEndDate = null
|
||||||
|
}
|
||||||
|
console.log("testnull")
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||||
|
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)) {
|
||||||
|
onSubmit()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ฟังก์ชั่น บันทึก */
|
||||||
|
const onSubmit = async () => {
|
||||||
|
dialogConfirm(
|
||||||
|
$q,
|
||||||
|
async () => {
|
||||||
|
await saveFormData()
|
||||||
|
},
|
||||||
|
"ยืนยันการยื่นใบลา",
|
||||||
|
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||||
|
*/
|
||||||
|
async function saveFormData() {
|
||||||
|
showLoader()
|
||||||
|
const formData = new FormData()
|
||||||
|
// if (formDataSick.leaveDocument.length > 0) {
|
||||||
|
// const blob = formDataSick.leaveDocument.slice(
|
||||||
|
// 0,
|
||||||
|
// formDataSick.leaveDocument[0].size
|
||||||
|
// );
|
||||||
|
// const newFile = new File(blob, nameFile.value, {
|
||||||
|
// type: formDataSick.leaveDocument[0].type,
|
||||||
|
// });
|
||||||
|
// formData.append("leaveDocument", newFile);
|
||||||
|
// }
|
||||||
|
|
||||||
|
formData.append("leaveDocument", formDataSick.leaveDocument)
|
||||||
|
formData.append("type", formDataSick.type)
|
||||||
|
formData.append("leaveRange", formDataSick.leaveRange)
|
||||||
|
formData.append("leaveStartDate", dateToISO(formDataSick.leaveDateStart))
|
||||||
|
formData.append("leaveEndDate", dateToISO(formDataSick.leaveDateEnd))
|
||||||
|
formData.append("leaveWrote", formDataSick.leaveWrote)
|
||||||
|
formData.append("leaveAddress", formDataSick.leaveAddress)
|
||||||
|
formData.append("leaveNumber", formDataSick.leaveNumber)
|
||||||
|
formData.append("leaveDetail", formDataSick.leaveDetail)
|
||||||
|
await http
|
||||||
|
.post(config.API.leaveUser(), formData)
|
||||||
|
.then(() => {
|
||||||
|
success($q, "บันทึกสำเร็จ")
|
||||||
|
router.push(`/leave`)
|
||||||
|
})
|
||||||
|
.catch((e: any) => {
|
||||||
|
messageError($q, e)
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* check ว่าลาได้ไหม จาก api
|
||||||
|
* @param formData
|
||||||
|
*/
|
||||||
|
const isLeave = ref<boolean>(true)
|
||||||
|
async function FetchCheck() {
|
||||||
|
await http
|
||||||
|
.post(config.API.leaveCheck(), {
|
||||||
|
type: props.data.leaveTypeId ?? null,
|
||||||
|
StartLeaveDate: formDataSick.leaveDateStart ?? null,
|
||||||
|
EndLeaveDate: formDataSick.leaveDateEnd ?? null,
|
||||||
|
})
|
||||||
|
.then((res: any) => {
|
||||||
|
const data = res.data.result
|
||||||
|
isLeave.value = data.isLeave
|
||||||
|
if (data.isLeave === true) {
|
||||||
|
formDataSick.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||||
|
} else {
|
||||||
|
fails($q, "ไม่สามารถลาได้")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((e: any) => {
|
||||||
|
messageError($q, e)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน
|
||||||
|
*/
|
||||||
|
const isReadOnly = computed(() => {
|
||||||
|
const conditionleaveRange = formDataSick.leaveRange === "MORNING" || formDataSick.leaveRange === "AFTERNOON"
|
||||||
|
if (conditionleaveRange) {
|
||||||
|
formDataSick.leaveEndDate = formDataSick.leaveStartDate // Set formDataSick.leaveEndDate to null
|
||||||
|
formDataSick.leaveTotal = 0.5
|
||||||
|
} else {
|
||||||
|
formDataSick.leaveTotal = null
|
||||||
|
}
|
||||||
|
return conditionleaveRange
|
||||||
|
})
|
||||||
|
|
||||||
|
function inputEdit(val: boolean) {
|
||||||
|
return {
|
||||||
|
"full-width cursor-pointer ": val,
|
||||||
|
"full-width cursor-pointer inputgreen": !val,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetEndDate(type: string) {
|
||||||
|
if (type === "day") {
|
||||||
|
formDataSick.EndLeaveDate === null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- ฟอร์มลาป่วย และลากิจส่วนตัว -->
|
||||||
|
<template>
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล{{ dataStore.leaveLast }}</div>
|
||||||
|
</div>
|
||||||
|
<form @submit.prevent.stop="onValidate">
|
||||||
|
<q-card bordered class="q-pa-md bg-grey-1">
|
||||||
|
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
ref="leaveWroteRef"
|
||||||
|
for="leaveWroteRef"
|
||||||
|
dense
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
outlined
|
||||||
|
v-model="props.data.leaveWrote"
|
||||||
|
label="เขียนที่"
|
||||||
|
:readonly="!edit"
|
||||||
|
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="col-12 col-md-4 col-sm-12">
|
||||||
|
<q-radio v-model="props.data.leaveRange" val="ALL" label="ลาทั้งวัน" checked-icon="task_alt" />
|
||||||
|
<q-radio v-model="props.data.leaveRange" val="MORNING" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
|
||||||
|
<q-radio v-model="props.data.leaveRange" val="AFTERNOON" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
|
||||||
|
</div>
|
||||||
|
<div class="full-width">
|
||||||
|
<div class="q-col-gutter-sm row">
|
||||||
|
<datepicker
|
||||||
|
class="col-12 col-md-3 col-sm-6"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="props.data.leaveDateStart"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
borderless
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
:readonly="!edit"
|
||||||
|
@update:model-value="props.data.leaveEndDate = null"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
ref="leaveStartDateRef"
|
||||||
|
for="leaveStartDateRef"
|
||||||
|
hide-bottom-space
|
||||||
|
:readonly="!edit"
|
||||||
|
bg-color="white"
|
||||||
|
class="full-width cursor-pointer inputgreen"
|
||||||
|
:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
|
||||||
|
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||||
|
style="color: var(--q-primary)"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
|
||||||
|
<datepicker
|
||||||
|
class="col-12 col-md-3 col-sm-6"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="props.data.leaveDateEnd"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
borderless
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
:readonly="!props.data.leaveDateStart"
|
||||||
|
@update:model-value="FetchCheck(), isReadOnly"
|
||||||
|
:min-date="props.data.leaveDateStart"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
ref="leaveEndDateRef"
|
||||||
|
for="leaveEndDateRef"
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
:readonly="!props.data.leaveDateStart"
|
||||||
|
:class="inputEdit(isReadOnly)"
|
||||||
|
:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
|
||||||
|
:label="`${'ลาถึงวันที่'}`"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-md-3 col-sm-6"
|
||||||
|
dense
|
||||||
|
bg-color="white"
|
||||||
|
outlined
|
||||||
|
ref="leaveTotalRef"
|
||||||
|
for="leaveTotalRef"
|
||||||
|
v-model="props.data.leaveTotal"
|
||||||
|
label="จำนวนวันที่ลา"
|
||||||
|
readonly
|
||||||
|
hide-bottom-space
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-md-3 col-sm-6"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
ref="leaveLastRef"
|
||||||
|
for="leaveLastRef"
|
||||||
|
v-model="dataStore.leaveLast"
|
||||||
|
label="ลาครั้งสุดท้ายเมื่อวันที่"
|
||||||
|
readonly
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="full-width">
|
||||||
|
<div class="q-col-gutter-sm row">
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
ref="leaveNumberRef"
|
||||||
|
for="leaveNumberRef"
|
||||||
|
v-model="props.data.leaveNumber"
|
||||||
|
mask="(###)-###-####"
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
unmasked-value
|
||||||
|
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||||
|
:readonly="!edit"
|
||||||
|
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
ref="leaveAddressRef"
|
||||||
|
for="leaveAddressRef"
|
||||||
|
v-model="props.data.leaveAddress"
|
||||||
|
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||||
|
:readonly="!edit"
|
||||||
|
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<q-input
|
||||||
|
type="textarea"
|
||||||
|
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
ref="leaveDetailRef"
|
||||||
|
for="leaveDetailRef"
|
||||||
|
v-model="props.data.leaveDetail"
|
||||||
|
label="รายละเอียด"
|
||||||
|
:readonly="!edit"
|
||||||
|
bg-color="white"
|
||||||
|
/>
|
||||||
|
<div class="full-width">
|
||||||
|
<div class="q-col-gutter-sm row">
|
||||||
|
<q-file for="leaveDocumentRef" v-model="props.data.leaveDocument" dense label="เอกสารประกอบ" outlined use-chips bg-color="white" class="col-12 q-pl-sm col-12">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="attach_file" color="primary" />
|
||||||
|
</template>
|
||||||
|
</q-file>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-sm-6 row" v-if="!edit">
|
||||||
|
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||||
|
</div>
|
||||||
|
<q-card bordered flat class="full-width">
|
||||||
|
<q-list separator>
|
||||||
|
<q-item v-for="(file, index) in props.data.leaveDocument" :key="index" class="q-my-xs">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label class="full-width ellipsis">
|
||||||
|
{{ file.name }}
|
||||||
|
</q-item-label>
|
||||||
|
<q-item-label caption> </q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
|
<q-separator class="q-mt-sm" />
|
||||||
|
|
||||||
|
<div class="row col-12 q-pt-md">
|
||||||
|
<q-space />
|
||||||
|
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
528
src/modules/05_leave/components/formEdit/formEdit_Study.vue
Normal file
528
src/modules/05_leave/components/formEdit/formEdit_Study.vue
Normal file
|
|
@ -0,0 +1,528 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive, ref, computed } from "vue"
|
||||||
|
import { useCounterMixin } from "@/stores/mixin"
|
||||||
|
import { useQuasar } from "quasar"
|
||||||
|
import type { studyDaySubjectForm } from "@/modules/05_leave/interface/request/AddAbsence"
|
||||||
|
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||||
|
import http from "@/plugins/http"
|
||||||
|
import config from "@/app.config"
|
||||||
|
import { useRouter } from "vue-router"
|
||||||
|
|
||||||
|
/** Use */
|
||||||
|
const dataStore = useLeaveStore()
|
||||||
|
const $q = useQuasar()
|
||||||
|
const router = useRouter()
|
||||||
|
const mixin = useCounterMixin()
|
||||||
|
const { date2Thai, dialogConfirm, calculateDurationYmd, fails, dateToISO, success, messageError, arabicNumberToText } = mixin
|
||||||
|
const edit = ref<boolean>(true)
|
||||||
|
const files = ref<any>(null)
|
||||||
|
|
||||||
|
/** ตัวแปร ref สำหรับแสดง validate */
|
||||||
|
const leaveStartDateRef = ref<object | null>(null)
|
||||||
|
const leaveEndDateRef = ref<object | null>(null)
|
||||||
|
const leavebirthDateRef = ref<object | null>(null)
|
||||||
|
const leavegovernmentDateRef = ref<object | null>(null)
|
||||||
|
const leaveSalaryRef = ref<object | null>(null)
|
||||||
|
const leaveNumberRef = ref<object | null>(null)
|
||||||
|
const leaveAddressRef = ref<object | null>(null)
|
||||||
|
const studyDayScholarshipRef = ref<object | null>(null)
|
||||||
|
const studyDayCountryRef = ref<object | null>(null)
|
||||||
|
const studyDayUniversityNameRef = ref<object | null>(null)
|
||||||
|
const studyDayDegreeLevelRef = ref<object | null>(null)
|
||||||
|
const studyDaySubjectRef = ref<object | null>(null)
|
||||||
|
const leaveWroteRef = ref<object | null>(null)
|
||||||
|
|
||||||
|
/** รับ props มาจากหน้าหลัก */
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
onSubmit: {
|
||||||
|
type: Function,
|
||||||
|
default: () => "",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
/** ข้อมูล v-model ของฟอร์ม */
|
||||||
|
const formDataStudy = reactive<any>({
|
||||||
|
type: dataStore.typeId, //
|
||||||
|
leaveWrote: "", //
|
||||||
|
leaveStartDate: null,
|
||||||
|
leaveEndDate: null,
|
||||||
|
leavebirthDate: new Date(),
|
||||||
|
leavegovernmentDate: new Date(),
|
||||||
|
leaveSalary: 10000,
|
||||||
|
leaveSalaryText: arabicNumberToText(10000),
|
||||||
|
leaveNumber: "",
|
||||||
|
leaveAddress: "",
|
||||||
|
studyDayScholarship: "",
|
||||||
|
studyDayCountry: "",
|
||||||
|
studyDayUniversityName: "", //
|
||||||
|
studyDayDegreeLevel: "", //
|
||||||
|
studyDaySubject: "", //
|
||||||
|
leaveDocument: "", //
|
||||||
|
leaveDetail: "",
|
||||||
|
leaveTotal: "",
|
||||||
|
})
|
||||||
|
|
||||||
|
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||||
|
const formRef: studyDaySubjectForm = {
|
||||||
|
leaveStartDate: leaveStartDateRef,
|
||||||
|
leaveEndDate: leaveEndDateRef,
|
||||||
|
leavebirthDate: leavebirthDateRef,
|
||||||
|
leavegovernmentDate: leavegovernmentDateRef,
|
||||||
|
leaveSalary: leaveSalaryRef,
|
||||||
|
leaveNumber: leaveNumberRef,
|
||||||
|
leaveAddress: leaveAddressRef,
|
||||||
|
studyDayScholarship: studyDayScholarshipRef,
|
||||||
|
studyDayCountry: studyDayCountryRef,
|
||||||
|
studyDayUniversityName: studyDayUniversityNameRef,
|
||||||
|
studyDayDegreeLevel: studyDayDegreeLevelRef,
|
||||||
|
studyDaySubject: studyDaySubjectRef,
|
||||||
|
leaveWrote: leaveWroteRef,
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||||
|
const nameFile = ref<string>("")
|
||||||
|
const fileDocDataUpload = ref<File[]>([])
|
||||||
|
const fileUploadDoc = async (files: any) => {
|
||||||
|
files.forEach((file: any) => {
|
||||||
|
fileDocDataUpload.value.push(file)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
||||||
|
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)) {
|
||||||
|
onSubmit()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ฟังก์ชั่น บันทึก */
|
||||||
|
const onSubmit = async () => {
|
||||||
|
dialogConfirm(
|
||||||
|
$q,
|
||||||
|
async () => {
|
||||||
|
await saveFormData()
|
||||||
|
},
|
||||||
|
"ยืนยันการยื่นใบลา",
|
||||||
|
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* check ว่าลาได้ไหม จาก api
|
||||||
|
* @param formData
|
||||||
|
*/
|
||||||
|
const isLeave = ref<boolean>(true)
|
||||||
|
async function FetchCheck() {
|
||||||
|
await http
|
||||||
|
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataStudy.leaveStartDate ?? null, EndLeaveDate: formDataStudy.leaveEndDate ?? null })
|
||||||
|
.then((res: any) => {
|
||||||
|
const data = res.data.result
|
||||||
|
isLeave.value = data.isLeave
|
||||||
|
if (data.isLeave === true) {
|
||||||
|
formDataStudy.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||||
|
// formDataStudy.leaveLast = data.totalDate
|
||||||
|
} else {
|
||||||
|
fails($q, "ไม่สามารถลาได้")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((e: any) => {
|
||||||
|
messageError($q, e)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
async function saveFormData() {
|
||||||
|
const formData = new FormData()
|
||||||
|
// if (formDataStudy.leaveDocument.length > 0) {
|
||||||
|
// const blob = formDataStudy.leaveDocument.slice(0, formDataStudy.leaveDocument[0].size)
|
||||||
|
// const newFile = new File(blob, nameFile.value, {
|
||||||
|
// type: formDataStudy.leaveDocument[0].type,
|
||||||
|
// })
|
||||||
|
// formData.append("leaveDocument", newFile)
|
||||||
|
// }
|
||||||
|
formData.append("leaveDocument", formDataStudy.leaveDocument)
|
||||||
|
formData.append("type", formDataStudy.type) //
|
||||||
|
formData.append("leaveStartDate", dateToISO(formDataStudy.leaveStartDate)) //
|
||||||
|
formData.append("leaveEndDate", dateToISO(formDataStudy.leaveEndDate)) //
|
||||||
|
formData.append("studyDaySubject", formDataStudy.studyDaySubject)
|
||||||
|
formData.append("studyDayDegreeLevel", formDataStudy.studyDayDegreeLevel)
|
||||||
|
formData.append("leavegovernmentDate", dateToISO(formDataStudy.leavegovernmentDate))
|
||||||
|
formData.append("leavebirthDate", dateToISO(formDataStudy.leavebirthDate))
|
||||||
|
formData.append("studyDayUniversityName", formDataStudy.studyDayUniversityName)
|
||||||
|
formData.append("studyDayCountry", formDataStudy.studyDayCountry)
|
||||||
|
formData.append("leaveWrote", formDataStudy.leaveWrote) //
|
||||||
|
formData.append("leaveDetail", formDataStudy.leaveDetail) //
|
||||||
|
formData.append("studyDayScholarship", formDataStudy.studyDayScholarship)
|
||||||
|
formData.append("leaveAddress", formDataStudy.leaveAddress) //
|
||||||
|
formData.append("leaveNumber", formDataStudy.leaveNumber) //
|
||||||
|
|
||||||
|
await http
|
||||||
|
.post(config.API.leaveUser(), formData)
|
||||||
|
.then((res: any) => {
|
||||||
|
success($q, "บันทึกสำเร็จ")
|
||||||
|
router.push(`/leave`)
|
||||||
|
})
|
||||||
|
.catch((e: any) => {
|
||||||
|
messageError($q, e)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function อัพเดทค่า LeaveTotal
|
||||||
|
*/
|
||||||
|
function updateLeaveTotal() {
|
||||||
|
const newLeaveTotal = calculateDurationYmd(formDataStudy.leaveStartDate, formDataStudy.leaveEndDate)
|
||||||
|
formDataStudy.leaveTotal = newLeaveTotal
|
||||||
|
console.log("test")
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* แปลงตัวเลขเงินเดือน
|
||||||
|
*/
|
||||||
|
const formattedleaveSalary = computed(() => {
|
||||||
|
return dataStore.salary !== null ? dataStore.salary.toLocaleString("th-TH") : ""
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||||
|
</div>
|
||||||
|
<form @submit.prevent="onValidate">
|
||||||
|
<q-card bordered class="q-pa-md bg-grey-1">
|
||||||
|
<div class="row q-pa-sm q-col-gutter-sm">
|
||||||
|
<q-input
|
||||||
|
v-model="props.data.leaveWrote"
|
||||||
|
ref="leaveWroteRef"
|
||||||
|
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
bg-color="white"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
label="เขียนที่"
|
||||||
|
hide-bottom-space
|
||||||
|
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<datepicker
|
||||||
|
v-model="props.data.leaveDateStart"
|
||||||
|
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
autoApply
|
||||||
|
borderless
|
||||||
|
week-start="0"
|
||||||
|
:enableTimePicker="false"
|
||||||
|
:locale="'th'"
|
||||||
|
@update:model-value="props.data.leaveDateEnd = null"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
ref="leaveStartDateRef"
|
||||||
|
class="full-width datepicker"
|
||||||
|
bg-color="white"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||||
|
:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
|
||||||
|
<datepicker
|
||||||
|
v-model="props.data.leaveDateEnd"
|
||||||
|
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
autoApply
|
||||||
|
borderless
|
||||||
|
week-start="0"
|
||||||
|
:locale="'th'"
|
||||||
|
@update:model-value="updateLeaveTotal, FetchCheck()"
|
||||||
|
:readonly="!props.data.leaveDateStart"
|
||||||
|
:enableTimePicker="false"
|
||||||
|
:min-date="props.data.leaveDateStart"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
ref="leaveEndDateRef"
|
||||||
|
class="full-width datepicker"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
lazy-rules
|
||||||
|
bg-color="white"
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'ลาถึงวันที่'}`"
|
||||||
|
:readonly="!props.data.leaveDateStart"
|
||||||
|
:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-md-2 col-sm-6"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
bg-color="white"
|
||||||
|
ref="leaveTotalRef"
|
||||||
|
for="leaveTotalRef"
|
||||||
|
v-model="props.data.leaveTotal"
|
||||||
|
label="มีกำหนด"
|
||||||
|
readonly
|
||||||
|
hide-bottom-space
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="full-width">
|
||||||
|
<div class="q-col-gutter-sm row">
|
||||||
|
<datepicker
|
||||||
|
v-model="props.data.leavegovernmentDate"
|
||||||
|
class="col-12 col-md-3 col-sm-6"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
autoApply
|
||||||
|
borderless
|
||||||
|
week-start="0"
|
||||||
|
readonly
|
||||||
|
:enableTimePicker="false"
|
||||||
|
:locale="'th'"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
ref="leavegovernmentDateRef"
|
||||||
|
class="full-width"
|
||||||
|
bg-color="white"
|
||||||
|
outlined
|
||||||
|
readonly
|
||||||
|
dense
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'วันที่เข้ารับราชการ'}`"
|
||||||
|
:model-value="dataStore.dateAppoint != null ? date2Thai(dataStore.dateAppoint) : null"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
|
||||||
|
<datepicker
|
||||||
|
v-model="props.data.leavebirthDate"
|
||||||
|
class="col-12 col-md-3 col-sm-6"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
autoApply
|
||||||
|
borderless
|
||||||
|
readonly
|
||||||
|
week-start="0"
|
||||||
|
:enableTimePicker="false"
|
||||||
|
:locale="'th'"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
ref="leavebirthDateRef"
|
||||||
|
class="full-width"
|
||||||
|
bg-color="white"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
readonly
|
||||||
|
hide-bottom-space
|
||||||
|
:label="`${'วันเดือนปีเกิด'}`"
|
||||||
|
:model-value="dataStore.birthDate != null ? date2Thai(dataStore.birthDate) : null"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
|
||||||
|
<q-input v-model="formattedleaveSalary" ref="leaveSalaryRef" class="col-12 col-sm-6 col-md-3" bg-color="white" dense outlined readonly label="เงินเดือนปัจจุบัน" />
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
v-model="dataStore.salaryText"
|
||||||
|
ref="leaveSalaryRef"
|
||||||
|
class="col-12 col-sm-6 col-md-3"
|
||||||
|
bg-color="white"
|
||||||
|
dense
|
||||||
|
readonly
|
||||||
|
outlined
|
||||||
|
label="เงินเดือนปัจจุบัน (ตัวอักษร)"
|
||||||
|
hide-bottom-space
|
||||||
|
:rules="[val => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="full-width">
|
||||||
|
<div class="q-col-gutter-sm row">
|
||||||
|
<q-input
|
||||||
|
v-model="props.data.studyDayUniversityName"
|
||||||
|
ref="studyDayUniversityNameRef"
|
||||||
|
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||||
|
bg-color="white"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
label="ชื่อสถานศึกษา"
|
||||||
|
hide-bottom-space
|
||||||
|
:rules="[val => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
v-model="props.data.studyDayDegreeLevel"
|
||||||
|
ref="studyDayDegreeLevelRef"
|
||||||
|
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||||
|
bg-color="white"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
label="ชั้นปริญญา"
|
||||||
|
hide-bottom-space
|
||||||
|
:rules="[val => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
v-model="props.data.studyDaySubject"
|
||||||
|
ref="studyDaySubjectRef"
|
||||||
|
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||||
|
bg-color="white"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
label="ศึกษาวิชา"
|
||||||
|
hide-bottom-space
|
||||||
|
:rules="[val => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
v-model="props.data.studyDayCountry"
|
||||||
|
ref="studyDayCountryRef"
|
||||||
|
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||||
|
bg-color="white"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
label="ประเทศ"
|
||||||
|
hide-bottom-space
|
||||||
|
:rules="[val => !!val || `${'กรุณากรอกประเทศ'}`]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
v-model="props.data.studyDayScholarship"
|
||||||
|
ref="studyDayScholarshipRef"
|
||||||
|
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||||
|
bg-color="white"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
label="ด้วยทุน"
|
||||||
|
hide-bottom-space
|
||||||
|
:rules="[val => !!val || `${'กรุณากรอกด้วยทุน'}`]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
v-model="props.data.leaveNumber"
|
||||||
|
ref="leaveNumberRef"
|
||||||
|
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||||
|
bg-color="white"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
unmasked-value
|
||||||
|
hide-bottom-space
|
||||||
|
mask="(###)-###-####"
|
||||||
|
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||||
|
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
v-model="props.data.leaveAddress"
|
||||||
|
ref="leaveAddressRef"
|
||||||
|
class="col-12 cursor-pointer inputgreen"
|
||||||
|
bg-color="white"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||||
|
hide-bottom-space
|
||||||
|
:rules="[val => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<q-input v-model="props.data.leaveDetail" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
|
||||||
|
|
||||||
|
<div class="col-12 col-sm-6">
|
||||||
|
<q-file v-model="props.data.leaveDocument" bg-color="white" dense outlined multiple use-chips @added="fileUploadDoc" label="เอกสารประกอบ">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="attach_file" color="primary" />
|
||||||
|
</template>
|
||||||
|
</q-file>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 row" v-if="!edit">
|
||||||
|
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||||
|
</div>
|
||||||
|
<q-card bordered flat class="full-width">
|
||||||
|
<q-list separator>
|
||||||
|
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label class="full-width ellipsis">
|
||||||
|
{{ file.fileName }}
|
||||||
|
</q-item-label>
|
||||||
|
|
||||||
|
<q-item-label caption> </q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
<q-separator class="q-mt-sm" />
|
||||||
|
<div class="row col-12 q-pt-md">
|
||||||
|
<q-space />
|
||||||
|
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
431
src/modules/05_leave/components/formEdit/formEdit_Vacation.vue
Normal file
431
src/modules/05_leave/components/formEdit/formEdit_Vacation.vue
Normal file
|
|
@ -0,0 +1,431 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, watch, computed } from "vue"
|
||||||
|
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/VacationForm"
|
||||||
|
import { useCounterMixin } from "@/stores/mixin"
|
||||||
|
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||||
|
import http from "@/plugins/http"
|
||||||
|
import config from "@/app.config"
|
||||||
|
import { useQuasar } from "quasar"
|
||||||
|
import { useRouter } from "vue-router"
|
||||||
|
|
||||||
|
/** Use */
|
||||||
|
const $q = useQuasar()
|
||||||
|
const dataStore = useLeaveStore()
|
||||||
|
const mixin = useCounterMixin()
|
||||||
|
const router = useRouter()
|
||||||
|
const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin
|
||||||
|
const edit = ref<boolean>(true)
|
||||||
|
|
||||||
|
/** รับ props มาจากหน้าหลัก */
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
onSubmit: {
|
||||||
|
type: Function,
|
||||||
|
default: () => "",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
/** ข้อมูล v-model ของฟอร์ม */
|
||||||
|
const formDataVacation = reactive<any>({
|
||||||
|
type: dataStore.typeId,
|
||||||
|
leaveWrote: "",
|
||||||
|
leaveRange: "ALL",
|
||||||
|
restDayOldTotal: "",
|
||||||
|
restDayCurrentTotal: "",
|
||||||
|
leaveStartDate: null,
|
||||||
|
leaveEndDate: null,
|
||||||
|
leaveTotal: "",
|
||||||
|
leaveNumber: "",
|
||||||
|
leaveAddress: "",
|
||||||
|
leaveDetail: "",
|
||||||
|
leaveDocument: [],
|
||||||
|
})
|
||||||
|
|
||||||
|
/** ตัวแปร ref สำหรับแสดง validate */
|
||||||
|
const leaveWroteRef = ref<object | null>(null)
|
||||||
|
const restDayOldTotalRef = ref<object | null>(null)
|
||||||
|
const restDayCurrentTotalRef = ref<object | null>(null)
|
||||||
|
const leaveRangeRef = ref<object | null>(null)
|
||||||
|
const leaveStartDateRef = ref<object | null>(null)
|
||||||
|
const leaveEndDateRef = ref<object | null>(null)
|
||||||
|
const leaveTotalRef = ref<object | null>(null)
|
||||||
|
const leaveNumberRef = ref<object | null>(null)
|
||||||
|
const leaveAddressRef = ref<object | null>(null)
|
||||||
|
const leaveDetailRef = ref<object | null>(null)
|
||||||
|
const leaveDocumentRef = ref<object | null>(null)
|
||||||
|
|
||||||
|
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||||
|
const FormRef: FormRef = {
|
||||||
|
leaveWrote: leaveWroteRef,
|
||||||
|
leaveRange: leaveRangeRef,
|
||||||
|
restDayOldTotal: restDayOldTotalRef,
|
||||||
|
restDayCurrentTotal: restDayCurrentTotalRef,
|
||||||
|
leaveStartDate: leaveStartDateRef,
|
||||||
|
leaveEndDate: leaveEndDateRef,
|
||||||
|
leaveTotal: leaveTotalRef,
|
||||||
|
leaveNumber: leaveNumberRef,
|
||||||
|
leaveAddress: leaveAddressRef,
|
||||||
|
leaveDetail: leaveDetailRef,
|
||||||
|
leaveDocument: leaveDocumentRef,
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||||
|
watch(props.data, async () => {
|
||||||
|
// console.log("data==>", props.data)
|
||||||
|
formDataVacation.leaveWrote = props.data.leaveWrote
|
||||||
|
formDataVacation.restDayOldTotal = props.data.restDayOldTotal
|
||||||
|
formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal
|
||||||
|
formDataVacation.leaveStartDate = props.data.leaveStartDate
|
||||||
|
formDataVacation.leaveEndDate = props.data.leaveEndDate
|
||||||
|
formDataVacation.leaveTotal = props.data.leaveTotal
|
||||||
|
formDataVacation.leaveNumber = props.data.leaveNumber
|
||||||
|
formDataVacation.leaveDetail = props.data.leaveDetail
|
||||||
|
formDataVacation.leaveDocument = props.data.leaveDocument
|
||||||
|
})
|
||||||
|
|
||||||
|
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||||
|
const nameFile = ref<string>("")
|
||||||
|
const fileDocDataUpload = ref<File[]>([])
|
||||||
|
const fileUploadDoc = async (files: any) => {
|
||||||
|
files.forEach((file: any) => {
|
||||||
|
fileDocDataUpload.value.push(file)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||||
|
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)) {
|
||||||
|
onSubmit()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ฟังก์ชั่น บันทึก */
|
||||||
|
const onSubmit = async () => {
|
||||||
|
dialogConfirm(
|
||||||
|
$q,
|
||||||
|
async () => {
|
||||||
|
await saveFormData()
|
||||||
|
},
|
||||||
|
"ยืนยันการยื่นใบลา",
|
||||||
|
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||||
|
)
|
||||||
|
|
||||||
|
console.log("save")
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* check ว่าลาได้ไหม จาก api
|
||||||
|
* @param formData
|
||||||
|
*/
|
||||||
|
const isLeave = ref<boolean>(true)
|
||||||
|
async function FetchCheck() {
|
||||||
|
await http
|
||||||
|
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataVacation.leaveStartDate ?? null, EndLeaveDate: formDataVacation.leaveEndDate ?? null })
|
||||||
|
.then((res: any) => {
|
||||||
|
const data = res.data.result
|
||||||
|
isLeave.value = data.isLeave
|
||||||
|
if (data.isLeave === true) {
|
||||||
|
formDataVacation.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||||
|
// formDataVacation.leaveLast = data.totalDate
|
||||||
|
} else {
|
||||||
|
fails($q, "ไม่สามารถลาได้")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((e: any) => {
|
||||||
|
messageError($q, e)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||||
|
*/
|
||||||
|
async function saveFormData() {
|
||||||
|
const formData = new FormData()
|
||||||
|
// if (formDataVacation.leaveDocument.length > 0) {
|
||||||
|
// const blob = formDataVacation.leaveDocument.slice(0, formDataVacation.leaveDocument[0].size)
|
||||||
|
// const newFile = new File(blob, nameFile.value, {
|
||||||
|
// type: formDataVacation.leaveDocument[0].type,
|
||||||
|
// })
|
||||||
|
// formData.append("leaveDocument", newFile)
|
||||||
|
// }
|
||||||
|
formData.append("leaveDocument", formDataVacation.leaveDocument)
|
||||||
|
formData.append("type", formDataVacation.type)
|
||||||
|
formData.append("leaveRange", formDataVacation.leaveRange)
|
||||||
|
formData.append("leaveStartDate", dateToISO(formDataVacation.leaveStartDate))
|
||||||
|
formData.append("leaveEndDate", dateToISO(formDataVacation.leaveEndDate))
|
||||||
|
formData.append("leaveWrote", formDataVacation.leaveWrote)
|
||||||
|
formData.append("leaveAddress", formDataVacation.leaveAddress)
|
||||||
|
formData.append("leaveNumber", formDataVacation.leaveNumber)
|
||||||
|
formData.append("leaveDetail", formDataVacation.leaveDetail)
|
||||||
|
await http
|
||||||
|
.post(config.API.leaveUser(), formData)
|
||||||
|
.then((res: any) => {
|
||||||
|
success($q, "บันทึกสำเร็จ")
|
||||||
|
router.push(`/leave`)
|
||||||
|
})
|
||||||
|
.catch((e: any) => {
|
||||||
|
messageError($q, e)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function รีเซทค่า leaveStartDate เเละ leaveEndDate
|
||||||
|
*/
|
||||||
|
function resetDate() {
|
||||||
|
if (formDataVacation.leaveRange === "MORNING" || formDataVacation.leaveRange === "AFTERNOON") {
|
||||||
|
formDataVacation.leaveStartDate = null
|
||||||
|
formDataVacation.leaveEndDate = null
|
||||||
|
}
|
||||||
|
console.log("testnull")
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ฟังก์ชั่นแปลงค่า ครึ่งวัน/ทั้งวัน */
|
||||||
|
const isReadOnly = computed(() => {
|
||||||
|
const conditionleaveRange = formDataVacation.leaveRange === "MORNING" || formDataVacation.leaveRange === "AFTERNOON"
|
||||||
|
if (conditionleaveRange) {
|
||||||
|
formDataVacation.leaveEndDate = formDataVacation.leaveStartDate // Set formDataVacation.leaveEndDate to null
|
||||||
|
formDataVacation.leaveTotal = 0.5
|
||||||
|
} else {
|
||||||
|
formDataVacation.leaveTotal = null
|
||||||
|
}
|
||||||
|
return conditionleaveRange
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||||
|
</div>
|
||||||
|
<form @submit.prevent.stop="onValidate">
|
||||||
|
<q-card bordered class="q-pa-md bg-grey-1">
|
||||||
|
<div class="row q-pa-sm q-col-gutter-sm">
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
ref="leaveWroteRef"
|
||||||
|
for="leaveWroteRef"
|
||||||
|
dense
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
outlined
|
||||||
|
v-model="props.data.leaveWrote"
|
||||||
|
label="เขียนที่"
|
||||||
|
:readonly="!edit"
|
||||||
|
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||||
|
/>
|
||||||
|
<div class="col-12 col-md-4 col-sm-6">
|
||||||
|
<q-radio v-model="props.data.leaveRange" val="ALL" label="ลาทั้งวัน" checked-icon="task_alt" />
|
||||||
|
<q-radio v-model="props.data.leaveRange" val="MORNING" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
|
||||||
|
<q-radio v-model="props.data.leaveRange" val="AFTERNOON" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
|
||||||
|
</div>
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-md-4 col-sm-6"
|
||||||
|
ref="restDayOldTotalRef"
|
||||||
|
for="restDayOldTotalRef"
|
||||||
|
dense
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
readonly
|
||||||
|
outlined
|
||||||
|
v-model="dataStore.restDayTotalOld"
|
||||||
|
label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-md-4 col-sm-6"
|
||||||
|
ref="restDayCurrentTotalRef"
|
||||||
|
for="restDayCurrentTotalRef"
|
||||||
|
dense
|
||||||
|
readonly
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
outlined
|
||||||
|
v-model="dataStore.leaveRemain"
|
||||||
|
label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<datepicker
|
||||||
|
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="props.data.leaveDateStart"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
hide-bottom-space
|
||||||
|
borderless
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
:readonly="!edit"
|
||||||
|
@update:model-value="props.data.leaveDateEnd = null"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
ref="leaveStartDateRef"
|
||||||
|
for="leaveStartDateRef"
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
:readonly="!edit"
|
||||||
|
class="full-width datepicker"
|
||||||
|
:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
|
||||||
|
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
|
||||||
|
<datepicker
|
||||||
|
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="props.data.leaveDateEnd"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
hide-bottom-space
|
||||||
|
@update:model-value="FetchCheck()"
|
||||||
|
borderless
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
:readonly="isReadOnly"
|
||||||
|
:min-date="props.data.leaveDateStart"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
ref="leaveEndDateRef"
|
||||||
|
for="leaveEndDateRef"
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
class="full-width datepicker"
|
||||||
|
:readonly="isReadOnly"
|
||||||
|
:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
|
||||||
|
:label="`${'ลาถึงวันที่'}`"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-md-2 col-sm-6"
|
||||||
|
bg-color="white"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
ref="leaveTotalRef"
|
||||||
|
for="leaveTotalRef"
|
||||||
|
v-model="props.data.leaveTotal"
|
||||||
|
label="จำนวนวันที่ลา"
|
||||||
|
readonly
|
||||||
|
hide-bottom-space
|
||||||
|
/>
|
||||||
|
<div class="full-width">
|
||||||
|
<div class="q-col-gutter-sm row">
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
ref="leaveNumberRef"
|
||||||
|
for="leaveNumberRef"
|
||||||
|
v-model="props.data.leaveNumber"
|
||||||
|
mask="(###)-###-####"
|
||||||
|
unmasked-value
|
||||||
|
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||||
|
:readonly="!edit"
|
||||||
|
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
ref="leaveAddressRef"
|
||||||
|
for="leaveAddressRef"
|
||||||
|
v-model="props.data.leaveAddress"
|
||||||
|
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||||
|
:readonly="!edit"
|
||||||
|
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<q-input
|
||||||
|
type="textarea"
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
ref="leaveDetailRef"
|
||||||
|
for="leaveDetailRef"
|
||||||
|
v-model="props.data.leaveDetail"
|
||||||
|
label="รายละเอียด"
|
||||||
|
:readonly="!edit"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-file ref="leaveDocumentRef" bg-color="white" v-model="props.data.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="attach_file" color="primary" />
|
||||||
|
</template>
|
||||||
|
</q-file>
|
||||||
|
|
||||||
|
<div class="col-12 row" v-if="!edit">
|
||||||
|
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||||
|
</div>
|
||||||
|
<q-card bordered flat class="full-width">
|
||||||
|
<q-list separator>
|
||||||
|
<q-item v-for="(file, index) in props.data.leaveDocument" :key="index" class="q-my-xs">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label class="full-width ellipsis">
|
||||||
|
{{ file.name }}
|
||||||
|
</q-item-label>
|
||||||
|
<q-item-label caption> </q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
|
<q-separator class="q-mt-sm" />
|
||||||
|
<div class="row col-12 q-pt-md">
|
||||||
|
<q-space />
|
||||||
|
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,407 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, watch } from "vue"
|
||||||
|
import type { FormRef } from "@/modules/05_leave/interface/request/WorkInternationalForm"
|
||||||
|
import { useCounterMixin } from "@/stores/mixin"
|
||||||
|
import { useQuasar } from "quasar"
|
||||||
|
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||||
|
import http from "@/plugins/http"
|
||||||
|
import config from "@/app.config"
|
||||||
|
import { useRouter } from "vue-router"
|
||||||
|
import genReport from "@/plugins/genreport"
|
||||||
|
|
||||||
|
/** Use */
|
||||||
|
const dataStore = useLeaveStore()
|
||||||
|
const $q = useQuasar()
|
||||||
|
const mixin = useCounterMixin()
|
||||||
|
const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError } = mixin
|
||||||
|
const edit = ref<boolean>(true)
|
||||||
|
const router = useRouter()
|
||||||
|
const isSave = ref<boolean>(false)
|
||||||
|
|
||||||
|
/** รับ props มาจากหน้าหลัก */
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
onSubmit: {
|
||||||
|
type: Function,
|
||||||
|
default: () => "",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
/** ข้อมูล v-model ของฟอร์ม */
|
||||||
|
const formDataWorkInternational = reactive<any>({
|
||||||
|
type: dataStore.typeId,
|
||||||
|
leaveWrote: "",
|
||||||
|
leaveStartDate: null,
|
||||||
|
leaveEndDate: null,
|
||||||
|
leaveDetail: "",
|
||||||
|
leaveDocument: [],
|
||||||
|
leaveDraftDocument: null,
|
||||||
|
})
|
||||||
|
|
||||||
|
/** ตัวแปร ref สำหรับแสดง validate */
|
||||||
|
const leaveWroteRef = ref<object | null>(null)
|
||||||
|
const leaveStartDateRef = ref<object | null>(null)
|
||||||
|
const leaveEndDateRef = ref<object | null>(null)
|
||||||
|
const leaveDetailRef = ref<object | null>(null)
|
||||||
|
const leaveDocumentRef = ref<object | null>(null)
|
||||||
|
|
||||||
|
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||||
|
const FormRef: FormRef = {
|
||||||
|
leaveWrote: leaveWroteRef,
|
||||||
|
leaveStartDate: leaveStartDateRef,
|
||||||
|
leaveEndDate: leaveEndDateRef,
|
||||||
|
leaveDetail: leaveDetailRef,
|
||||||
|
leaveDocument: leaveDocumentRef,
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||||
|
watch(props.data, async () => {
|
||||||
|
// console.log("data==>", props.data)
|
||||||
|
formDataWorkInternational.leaveWrote = props.data.leaveWrote
|
||||||
|
formDataWorkInternational.leaveStartDate = props.data.leaveStartDate
|
||||||
|
formDataWorkInternational.leaveEndDate = props.data.leaveEndDate
|
||||||
|
formDataWorkInternational.leaveDetail = props.data.leaveDetail
|
||||||
|
formDataWorkInternational.leaveDocument = props.data.leaveDocument
|
||||||
|
formDataWorkInternational.leaveDraftDocument = props.data.leaveDraftDocument
|
||||||
|
})
|
||||||
|
|
||||||
|
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||||
|
const nameFile = ref<string>("")
|
||||||
|
const nameFileDraft = ref<string>("")
|
||||||
|
const fileDocDataUpload = ref<File[]>([])
|
||||||
|
const fileUploadDoc = async (files: any) => {
|
||||||
|
files.forEach((file: any) => {
|
||||||
|
fileDocDataUpload.value.push(file)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||||
|
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)) {
|
||||||
|
onSubmit()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ฟังก์ชั่น บันทึก */
|
||||||
|
const onSubmit = async () => {
|
||||||
|
dialogConfirm(
|
||||||
|
$q,
|
||||||
|
async () => {
|
||||||
|
await saveFormData()
|
||||||
|
},
|
||||||
|
"ยืนยันการยื่นใบลา",
|
||||||
|
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
//download function
|
||||||
|
async function onClickDownloadFile(id: string, fileName: string) {
|
||||||
|
// showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.leaveReport(id))
|
||||||
|
.then(async res => {
|
||||||
|
console.log(res)
|
||||||
|
const data = res.data.result
|
||||||
|
await genReport(data, fileName)
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
messageError($q, err)
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
// hideLoader();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* check ว่าลาได้ไหม จาก api
|
||||||
|
* @param formData
|
||||||
|
*/
|
||||||
|
const isLeave = ref<boolean>(true)
|
||||||
|
async function FetchCheck() {
|
||||||
|
await http
|
||||||
|
.post(config.API.leaveCheck(), {
|
||||||
|
type: dataStore.typeId ?? null,
|
||||||
|
StartLeaveDate: formDataWorkInternational.leaveStartDate ?? null,
|
||||||
|
EndLeaveDate: formDataWorkInternational.leaveEndDate ?? null,
|
||||||
|
})
|
||||||
|
.then((res: any) => {
|
||||||
|
const data = res.data.result
|
||||||
|
isLeave.value = data.isLeave
|
||||||
|
if (data.isLeave === true) {
|
||||||
|
formDataWorkInternational.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||||
|
// formDataWorkInternational.leaveLast = data.totalDate
|
||||||
|
} else {
|
||||||
|
fails($q, "ไม่สามารถลาได้")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((e: any) => {
|
||||||
|
messageError($q, e)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||||
|
*/
|
||||||
|
async function saveFormData() {
|
||||||
|
const formData = new FormData()
|
||||||
|
// //
|
||||||
|
// if (formDataWorkInternational.leaveDocument.length > 0) {
|
||||||
|
// const blob = formDataWorkInternational.leaveDocument.slice(0, formDataWorkInternational.leaveDocument[0].size)
|
||||||
|
// const newFile = new File(blob, nameFile.value, {
|
||||||
|
// type: formDataWorkInternational.leaveDocument[0].type,
|
||||||
|
// })
|
||||||
|
// formData.append("leaveDocument", newFile)
|
||||||
|
// }
|
||||||
|
// //
|
||||||
|
// if (formDataWorkInternational.leaveDraftDocument.length > 0) {
|
||||||
|
// const blobDrafe = formDataWorkInternational.leaveDraftDocument.slice(0, formDataWorkInternational.leaveDraftDocument[0].size)
|
||||||
|
// const newFileDraft = new File(blobDrafe, nameFileDraft.value, {
|
||||||
|
// type: formDataWorkInternational.leaveDraftDocument[0].type,
|
||||||
|
// })
|
||||||
|
// formData.append("leaveDraftDocument", newFileDraft) //
|
||||||
|
// }
|
||||||
|
formData.append("leaveDocument", formDataWorkInternational.leaveDocument)
|
||||||
|
formData.append("leaveDraftDocument", formDataWorkInternational.leaveDraftDocument)
|
||||||
|
formData.append("type", formDataWorkInternational.type) //
|
||||||
|
formData.append("leaveStartDate", dateToISO(formDataWorkInternational.leaveStartDate)) //
|
||||||
|
formData.append("leaveEndDate", dateToISO(formDataWorkInternational.leaveEndDate)) //
|
||||||
|
formData.append("leaveWrote", formDataWorkInternational.leaveWrote) //
|
||||||
|
formData.append("leaveDetail", formDataWorkInternational.leaveDetail) //
|
||||||
|
|
||||||
|
await http
|
||||||
|
.post(config.API.leaveUser(), formData)
|
||||||
|
.then((res: any) => {
|
||||||
|
success($q, "บันทึกสำเร็จ")
|
||||||
|
router.push(`/leave`)
|
||||||
|
})
|
||||||
|
.catch((e: any) => {
|
||||||
|
messageError($q, e)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||||
|
</div>
|
||||||
|
<form @submit.prevent.stop="onValidate">
|
||||||
|
<q-card bordered class="q-pa-md bg-grey-1">
|
||||||
|
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||||
|
<q-input
|
||||||
|
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
ref="leaveWroteRef"
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
for="leaveWroteRef"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
v-model="props.data.leaveWrote"
|
||||||
|
label="เขียนที่"
|
||||||
|
:readonly="!edit"
|
||||||
|
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<datepicker
|
||||||
|
class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="props.data.leaveDateStart"
|
||||||
|
:locale="'th'"
|
||||||
|
hide-bottom-space
|
||||||
|
autoApply
|
||||||
|
borderless
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
:readonly="!edit"
|
||||||
|
@update:model-value="formDataWorkInternational.leaveEndDate = null"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
ref="leaveStartDateRef"
|
||||||
|
for="leaveStartDateRef"
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
:readonly="!edit"
|
||||||
|
class="full-width datepicker"
|
||||||
|
:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
|
||||||
|
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
|
||||||
|
<datepicker
|
||||||
|
class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="props.data.leaveDateEnd"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
hide-bottom-space
|
||||||
|
borderless
|
||||||
|
:enableTimePicker="false"
|
||||||
|
@update:model-value="FetchCheck()"
|
||||||
|
week-start="0"
|
||||||
|
:readonly="!props.data.leaveDateStart"
|
||||||
|
:min-date="props.data.leaveDateStart"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
ref="leaveEndDateRef"
|
||||||
|
for="leaveEndDateRef"
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
:readonly="!props.data.leaveDateStart"
|
||||||
|
class="full-width datepicker"
|
||||||
|
:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
|
||||||
|
:label="`${'ลาถึงวันที่'}`"
|
||||||
|
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
<!-- <q-input
|
||||||
|
class="col-md-3 col-sm-12"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
ref="leaveTotalRef"
|
||||||
|
for="leaveTotalRef"
|
||||||
|
type="number"
|
||||||
|
v-model="formDataWorkInternational.leaveTotal"
|
||||||
|
label="จำนวนวันที่ลา"
|
||||||
|
readonly
|
||||||
|
:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
|
||||||
|
/> -->
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
hide-bottom-space
|
||||||
|
type="textarea"
|
||||||
|
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||||
|
dense
|
||||||
|
bg-color="white"
|
||||||
|
outlined
|
||||||
|
ref="leaveDetailRef"
|
||||||
|
for="leaveDetailRef"
|
||||||
|
v-model="props.data.leaveDetail"
|
||||||
|
label="รายละเอียด"
|
||||||
|
:readonly="!edit"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-file
|
||||||
|
ref="fileRef"
|
||||||
|
bg-color="white"
|
||||||
|
v-model="formDataWorkInternational.leaveDocument"
|
||||||
|
@added="fileUploadDoc"
|
||||||
|
dense
|
||||||
|
label="เอกสารประกอบ"
|
||||||
|
outlined
|
||||||
|
use-chips
|
||||||
|
multiple
|
||||||
|
class="q-pl-sm col-12"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="attach_file" color="primary" />
|
||||||
|
</template>
|
||||||
|
</q-file>
|
||||||
|
|
||||||
|
<div class="col-12 row" v-if="!edit">
|
||||||
|
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||||
|
</div>
|
||||||
|
<q-card bordered flat class="full-width">
|
||||||
|
<q-list separator>
|
||||||
|
<q-item v-for="(file, index) in formDataWorkInternational.leaveDocument" :key="index" class="q-my-xs">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label class="full-width ellipsis">
|
||||||
|
{{ file.name }}
|
||||||
|
</q-item-label>
|
||||||
|
<q-item-label caption> </q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
|
<div class="q-mt-md">
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
|
||||||
|
</div>
|
||||||
|
<q-card class="bg-grey-1 q-pa-sm" bordered>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
|
||||||
|
<div class="column q-mx-xs">
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark text-center">ดาวน์โหลด{{ formDataWorkInternational.typeId }}</div>
|
||||||
|
<q-btn
|
||||||
|
color="primary"
|
||||||
|
icon="download"
|
||||||
|
label="ดาวน์โหลดแบบฟอร์ม"
|
||||||
|
@click="onClickDownloadFile('08dc01fd-51b0-4fbc-8447-ecad084a15b8', 'ฟอร์มการลาไปฟื้นฟูสมรรถภาพด้านอาชีพ')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-10 col-sm-5 col-md-4 q-my-sm">
|
||||||
|
<div class="column q-mx-xs">
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark text-center">อัปโหลด</div>
|
||||||
|
<q-file v-model="formDataWorkInternational.leaveDraftDocument" dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept=".pdf">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="attach_file" color="primary" />
|
||||||
|
</template>
|
||||||
|
</q-file>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-1 self-end q-mb-sm">
|
||||||
|
<q-btn v-if="formDataWorkInternational.leaveDraftDocument != null" use-chips flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
|
||||||
|
><q-tooltip>อัปโหลด</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="!isSave">
|
||||||
|
<q-separator class="q-mt-sm" />
|
||||||
|
<div class="row col-12 q-pt-md">
|
||||||
|
<q-space />
|
||||||
|
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
|
|
@ -1,29 +1,40 @@
|
||||||
/**
|
/**
|
||||||
* Router leave
|
* Router leave
|
||||||
*/
|
*/
|
||||||
const leave = () => import("@/modules/05_leave/views/Main.vue");
|
const leave = () => import("@/modules/05_leave/views/Main.vue")
|
||||||
|
|
||||||
const addAbsence = () => import("@/modules/05_leave/views/AddPage.vue");
|
const addAbsence = () => import("@/modules/05_leave/views/AddPage.vue")
|
||||||
|
|
||||||
|
const editAbsence = () => import("@/modules/05_leave/views/EditPage.vue")
|
||||||
|
|
||||||
/* const Checkout = () => import("@/modules/04_checkin/views/Checkout.vue");
|
/* const Checkout = () => import("@/modules/04_checkin/views/Checkout.vue");
|
||||||
*/
|
*/
|
||||||
export default [
|
export default [
|
||||||
{
|
{
|
||||||
path: "/leave",
|
path: "/leave",
|
||||||
name: "leave",
|
name: "leave",
|
||||||
component: leave,
|
component: leave,
|
||||||
meta: {
|
meta: {
|
||||||
Auth: true,
|
Auth: true,
|
||||||
Key: [7],
|
Key: [7],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/leave/add",
|
path: "/leave/add",
|
||||||
name: "addAbsence",
|
name: "addAbsence",
|
||||||
component: addAbsence,
|
component: addAbsence,
|
||||||
meta: {
|
meta: {
|
||||||
Auth: true,
|
Auth: true,
|
||||||
Key: [7],
|
Key: [7],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
];
|
{
|
||||||
|
path: "/leave/edit/:id",
|
||||||
|
name: "editAbsence",
|
||||||
|
component: editAbsence,
|
||||||
|
meta: {
|
||||||
|
Auth: true,
|
||||||
|
Key: [7],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
|
||||||
430
src/modules/05_leave/views/EditPage.vue
Normal file
430
src/modules/05_leave/views/EditPage.vue
Normal file
|
|
@ -0,0 +1,430 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, reactive } from "vue"
|
||||||
|
|
||||||
|
//import form
|
||||||
|
import FormPart2 from "@/modules/05_leave/components/formEdit/Form.vue"
|
||||||
|
import WorkInternational from "../components/formEdit/formEdit_WorkInternational.vue"
|
||||||
|
import Rehabilitation from "../components/formEdit/formEdit_Rehabilitation.vue"
|
||||||
|
import Sick from "../components/formEdit/formEdit_Sick.vue"
|
||||||
|
import FollowSpouse from "../components/formEdit/formEdit_FollowSpouse.vue"
|
||||||
|
import Birth from "../components/formEdit/formEdit_Birth.vue"
|
||||||
|
import Vacation from "../components/formEdit/formEdit_Vacation.vue"
|
||||||
|
import HelpWifeBirth from "../components/formEdit/formEdit_HelpWifeBirth.vue"
|
||||||
|
import Ordination from "../components/formEdit/formEdit_Ordinationvue.vue"
|
||||||
|
import Haji from "../components/formEdit/formEdit_Hajj.vue"
|
||||||
|
import Millitary from "../components/formEdit/formEdit_Military.vue"
|
||||||
|
import Study from "../components/formEdit/formEdit_Study.vue"
|
||||||
|
|
||||||
|
import { useCounterMixin } from "@/stores/mixin"
|
||||||
|
import { useQuasar } from "quasar"
|
||||||
|
import { useRoute } from "vue-router"
|
||||||
|
import router from "@/router"
|
||||||
|
import http from "@/plugins/http"
|
||||||
|
import config from "@/app.config"
|
||||||
|
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const personalId = ref<string>(route.params.id as string)
|
||||||
|
console.log(personalId.value)
|
||||||
|
const leaveId = ref<string>("")
|
||||||
|
const dataStore = useLeaveStore()
|
||||||
|
const $q = useQuasar()
|
||||||
|
const mixin = useCounterMixin()
|
||||||
|
const { messageError, showLoader, hideLoader, dialogConfirm, success, date2Thai, dateToISO } = mixin
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
modal: {
|
||||||
|
type: Boolean,
|
||||||
|
require: true,
|
||||||
|
},
|
||||||
|
leaveId: {
|
||||||
|
type: String,
|
||||||
|
require: true,
|
||||||
|
},
|
||||||
|
onClickClose: {
|
||||||
|
type: Function,
|
||||||
|
require: true,
|
||||||
|
},
|
||||||
|
leaveType: {
|
||||||
|
type: Object,
|
||||||
|
require: true,
|
||||||
|
},
|
||||||
|
leaveStatus: {
|
||||||
|
type: String,
|
||||||
|
require: true,
|
||||||
|
},
|
||||||
|
fetchDataTable: {
|
||||||
|
type: Function,
|
||||||
|
require: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const titleName = ref<string>("")
|
||||||
|
const model = ref<string>("")
|
||||||
|
const modelSpecific = ref<string>("")
|
||||||
|
/** Form รายละเอียดข้อมูล*/
|
||||||
|
const formData = reactive<any>({
|
||||||
|
id: "", //Id การยื่นขอลา
|
||||||
|
leaveTypeName: "", // Name ประเภทการลา
|
||||||
|
leaveTypeId: "", //Id ประเภทการลา
|
||||||
|
fullname: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
|
||||||
|
dateSendLeave: new Date(), // วันที่ยืนใบลา
|
||||||
|
status: "", //สถานะการของลา
|
||||||
|
leaveDateStart: new Date(), //วันเริ่มการลา
|
||||||
|
leaveDateEnd: new Date(), //วันสิ้นสุดการลา
|
||||||
|
leaveCount: 0, //จำนวนวันลา
|
||||||
|
leaveWrote: "", //เขียนที่
|
||||||
|
leaveAddress: "", //สถานที่ติดต่อขณะลา
|
||||||
|
leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
|
||||||
|
leaveDetail: "", //รายละเอียดการลา
|
||||||
|
leaveDocument: "", //อัปโหลดเอกสารประกอบรายละเอียด
|
||||||
|
leaveDraftDocument: "", //อัปโหลดแบบฟอร์มการลา
|
||||||
|
leaveLastStart: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
|
||||||
|
leaveLastEnd: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
|
||||||
|
leaveTotal: 0, //จำนวนวันที่ลา(Auto)
|
||||||
|
leavebirthDate: new Date(), //วันเดือนปีเกิด(Auto)
|
||||||
|
leavegovernmentDate: new Date(), //วันที่เข้ารับราชการ(Auto)
|
||||||
|
leaveSalary: 0, //เงินเดือนปัจจุบัน(Auto)
|
||||||
|
leaveSalaryText: "", //เงินเดือนปัจจุบัน(เขียนเป็นคำอ่าน)
|
||||||
|
leaveTypeDay: "", //ประเภทการลาในวันนั้นเช่น
|
||||||
|
wifeDayName: "", //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
|
||||||
|
wifeDayDateBorn: new Date(), //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
|
||||||
|
restDayOldTotal: 0, //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
|
||||||
|
restDayCurrentTotal: 0, //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
|
||||||
|
ordainDayStatus: "", //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
|
||||||
|
ordainDayLocationName: "", //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
|
||||||
|
ordainDayLocationAddress: "", //สถานที่บวช ที่อยู่(ลาอุปสมบท)
|
||||||
|
ordainDayLocationNumber: "", //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
|
||||||
|
ordainDayOrdination: new Date(), //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
|
||||||
|
ordainDayBuddhistLentName: "", //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
|
||||||
|
ordainDayBuddhistLentAddress: "", //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
|
||||||
|
hajjDayStatus: "", //เคย/ไม่เคยไปประกอบพิธีฮัจญ์ (ให้เลือก) (ลาประกอบพิธีฮัจญ์)
|
||||||
|
absentDaySummon: "", //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||||
|
absentDayLocation: "", //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||||
|
absentDayRegistorDate: new Date(), //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||||
|
absentDayGetIn: "", //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||||
|
absentDayAt: "", //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||||
|
studyDaySubject: "", //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||||
|
studyDayDegreeLevel: "", //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||||
|
studyDayUniversityName: "", //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||||
|
studyDayTrainingSubject: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||||
|
studyDayTrainingName: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||||
|
studyDayCountry: "", //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||||
|
studyDayScholarship: "", //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||||
|
coupleDayName: "", //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
|
||||||
|
coupleDayPosition: "", //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
|
||||||
|
coupleDayLevel: "", //ระดับคู่สมรส (ลาติดตามคู่สมรส)
|
||||||
|
coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
|
||||||
|
coupleDayCountryHistory: "", //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
|
||||||
|
coupleDayTotalHistory: "", //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
|
||||||
|
coupleDayStartDateHistory: new Date(), //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
|
||||||
|
coupleDayEndDateHistory: new Date(), //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
|
||||||
|
coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
|
||||||
|
approveStep: "",
|
||||||
|
dear: "",
|
||||||
|
})
|
||||||
|
|
||||||
|
/**เมื่อเริ่มโหลดหน้า
|
||||||
|
* เรียกใช้งาน fetchData เพื่อดึงข้อมูล
|
||||||
|
*/
|
||||||
|
onMounted(() => {
|
||||||
|
fetchDataDetail(personalId.value)
|
||||||
|
dataStore.fetchProfile()
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* get ข้อมูลเก่ากรณีแก้ไขข้อมูล
|
||||||
|
*/
|
||||||
|
const data = reactive<any>({
|
||||||
|
id: "", //Id การยื่นขอลา
|
||||||
|
leaveTypeName: "", // Name ประเภทการลา
|
||||||
|
leaveTypeId: "", //Id ประเภทการลา
|
||||||
|
fullname: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
|
||||||
|
dateSendLeave: new Date(), // วันที่ยืนใบลา
|
||||||
|
status: "", //สถานะการของลา
|
||||||
|
leaveDateStart: new Date(), //วันเริ่มการลา
|
||||||
|
leaveDateEnd: new Date(), //วันสิ้นสุดการลา
|
||||||
|
leaveCount: 0, //จำนวนวันลา
|
||||||
|
leaveWrote: "", //เขียนที่
|
||||||
|
leaveAddress: "", //สถานที่ติดต่อขณะลา
|
||||||
|
leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
|
||||||
|
leaveDetail: "", //รายละเอียดการลา
|
||||||
|
leaveDocument: "", //อัปโหลดเอกสารประกอบรายละเอียด
|
||||||
|
leaveDraftDocument: "", //อัปโหลดแบบฟอร์มการลา
|
||||||
|
leaveLastStart: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
|
||||||
|
leaveLastEnd: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
|
||||||
|
leaveTotal: 0, //จำนวนวันที่ลา(Auto)
|
||||||
|
leavebirthDate: new Date(), //วันเดือนปีเกิด(Auto)
|
||||||
|
leavegovernmentDate: new Date(), //วันที่เข้ารับราชการ(Auto)
|
||||||
|
leaveSalary: 0, //เงินเดือนปัจจุบัน(Auto)
|
||||||
|
leaveSalaryText: "", //เงินเดือนปัจจุบัน(เขียนเป็นคำอ่าน)
|
||||||
|
leaveTypeDay: "", //ประเภทการลาในวันนั้นเช่น
|
||||||
|
wifeDayName: "", //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
|
||||||
|
wifeDayDateBorn: new Date(), //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
|
||||||
|
restDayOldTotal: 0, //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
|
||||||
|
restDayCurrentTotal: 0, //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
|
||||||
|
ordainDayStatus: "", //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
|
||||||
|
ordainDayLocationName: "", //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
|
||||||
|
ordainDayLocationAddress: "", //สถานที่บวช ที่อยู่(ลาอุปสมบท)
|
||||||
|
ordainDayLocationNumber: "", //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
|
||||||
|
ordainDayOrdination: new Date(), //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
|
||||||
|
ordainDayBuddhistLentName: "", //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
|
||||||
|
ordainDayBuddhistLentAddress: "", //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
|
||||||
|
hajjDayStatus: "", //เคย/ไม่เคยไปประกอบพิธีฮัจญ์ (ให้เลือก) (ลาประกอบพิธีฮัจญ์)
|
||||||
|
absentDaySummon: "", //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||||
|
absentDayLocation: "", //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||||
|
absentDayRegistorDate: new Date(), //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||||
|
absentDayGetIn: "", //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||||
|
absentDayAt: "", //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||||
|
studyDaySubject: "", //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||||
|
studyDayDegreeLevel: "", //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||||
|
studyDayUniversityName: "", //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||||
|
studyDayTrainingSubject: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||||
|
studyDayTrainingName: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||||
|
studyDayCountry: "", //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||||
|
studyDayScholarship: "", //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||||
|
coupleDayName: "", //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
|
||||||
|
coupleDayPosition: "", //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
|
||||||
|
coupleDayLevel: "", //ระดับคู่สมรส (ลาติดตามคู่สมรส)
|
||||||
|
coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
|
||||||
|
coupleDayCountryHistory: "", //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
|
||||||
|
coupleDayTotalHistory: "", //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
|
||||||
|
coupleDayStartDateHistory: new Date(), //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
|
||||||
|
coupleDayEndDateHistory: new Date(), //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
|
||||||
|
coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
|
||||||
|
approveStep: "",
|
||||||
|
dear: "",
|
||||||
|
})
|
||||||
|
/**
|
||||||
|
* function เรียกข้อมูลการลา
|
||||||
|
* @param id การลา
|
||||||
|
*/
|
||||||
|
async function fetchDataDetail(id: string) {
|
||||||
|
showLoader()
|
||||||
|
await http
|
||||||
|
.get(config.API.leaveUserId(id), {})
|
||||||
|
.then(res => {
|
||||||
|
const data = res.data.result
|
||||||
|
titleName.value = data.fullName ?? "-"
|
||||||
|
formData.id = data.id ?? "-"
|
||||||
|
formData.leaveTypeName = data.leaveTypeName ?? "-"
|
||||||
|
formData.leaveTypeId = data.leaveTypeId ?? "-"
|
||||||
|
formData.fullname = data.fullName ?? "-"
|
||||||
|
formData.dateSendLeave = data.dateSendLeave && date2Thai(data.dateSendLeave)
|
||||||
|
formData.status = data.status ?? "-"
|
||||||
|
formData.leaveDateStart = data.leaveStartDate && date2Thai(data.leaveStartDate)
|
||||||
|
console.log(formData.leaveDateStart)
|
||||||
|
formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate)
|
||||||
|
console.log(formData.leaveDateEnd)
|
||||||
|
formData.leaveCount = data.leaveTotal ?? "-"
|
||||||
|
formData.leaveWrote = data.leaveWrote ?? "-"
|
||||||
|
formData.leaveAddress = data.leaveAddress ?? "-"
|
||||||
|
formData.leaveNumber = data.leaveNumber ?? "-"
|
||||||
|
formData.leaveDetail = data.leaveDetail ?? "-"
|
||||||
|
formData.leaveDocument = data.leaveDocument
|
||||||
|
formData.leaveDraftDocument = data.leaveDraftDocument
|
||||||
|
formData.leaveLastStart = data.leaveLastStart && date2Thai(data.leaveLastStart)
|
||||||
|
formData.leaveLastEnd = data.leaveLastStart && date2Thai(data.leaveLastEnd)
|
||||||
|
formData.leaveTotal = data.leaveTotal
|
||||||
|
formData.leavebirthDate = data.leaveBirthDate && date2Thai(data.leaveBirthDate)
|
||||||
|
formData.leavegovernmentDate = data.leaveGovernmentDate && date2Thai(data.leaveGovernmentDate)
|
||||||
|
formData.leaveSalary = data.leaveSalary ?? "-"
|
||||||
|
formData.leaveSalaryText = data.leaveSalaryText ?? "-"
|
||||||
|
formData.wifeDayName = data.wifeDayName ?? "-"
|
||||||
|
formData.wifeDayDateBorn = data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn)
|
||||||
|
formData.restDayOldTotal = data.restDayOldTotal ?? "-"
|
||||||
|
formData.restDayCurrentTotal = data.restDayCurrentTotal ?? "-"
|
||||||
|
formData.ordainDayStatus = data.ordainDayStatus ? "เคย" : "ไม่เคยบวช"
|
||||||
|
formData.ordainDayLocationName = data.ordainDayLocationName ?? "-"
|
||||||
|
formData.ordainDayLocationAddress = data.ordainDayLocationAddress ?? "-"
|
||||||
|
formData.ordainDayLocationNumber = data.ordainDayLocationNumber ?? "-"
|
||||||
|
formData.ordainDayOrdination = data.ordainDayOrdination && date2Thai(data.ordainDayOrdination)
|
||||||
|
formData.ordainDayBuddhistLentName = data.ordainDayBuddhistLentName ?? "-"
|
||||||
|
formData.ordainDayBuddhistLentAddress = data.ordainDayBuddhistLentAddress ?? "-"
|
||||||
|
formData.hajjDayStatus = data.hajjDayStatus ? "เคย" : "ไม่เคยไปประกอบพิธีฮัจญ์"
|
||||||
|
formData.absentDaySummon = data.absentDaySummon ?? "-"
|
||||||
|
formData.absentDayLocation = data.absentDayLocation ?? "-"
|
||||||
|
formData.absentDayRegistorDate = data.absentDayRegistorDate && date2Thai(data.absentDayRegistorDate)
|
||||||
|
formData.absentDayGetIn = data.absentDayGetIn ?? "-"
|
||||||
|
formData.absentDayAt = data.absentDayAt ?? "-"
|
||||||
|
formData.studyDaySubject = data.studyDaySubject ?? "-"
|
||||||
|
formData.studyDayDegreeLevel = data.studyDayDegreeLevel ?? "-"
|
||||||
|
formData.studyDayUniversityName = data.studyDayUniversityName ?? "-"
|
||||||
|
formData.studyDayTrainingSubject = data.studyDayTrainingSubject ?? "-" ?? "-"
|
||||||
|
formData.studyDayTrainingName = data.studyDayTrainingName ?? "-"
|
||||||
|
formData.studyDayCountry = data.studyDayCountry ?? "-"
|
||||||
|
formData.studyDayScholarship = data.studyDayScholarship ?? "-"
|
||||||
|
formData.coupleDayName = data.coupleDayName ?? "-"
|
||||||
|
formData.coupleDayPosition = data.coupleDayPosition ?? "-"
|
||||||
|
formData.coupleDayLevel = data.coupleDayLevel ?? "-"
|
||||||
|
formData.coupleDayLevelCountry = data.coupleDayLevelCountry ?? "-"
|
||||||
|
formData.coupleDayCountryHistory = data.coupleDayCountryHistory ?? "-"
|
||||||
|
formData.coupleDayTotalHistory = data.coupleDayTotalHistory ?? "-"
|
||||||
|
formData.coupleDayStartDateHistory = data.coupleDayStartDateHistory && date2Thai(data.coupleDayStartDateHistory)
|
||||||
|
formData.coupleDayEndDateHistory = data.coupleDayEndDateHistory && date2Thai(data.coupleDayEndDateHistory)
|
||||||
|
formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory ?? "-"
|
||||||
|
formData.approveStep = data.approveStep ?? "-"
|
||||||
|
formData.dear = data.dear ?? "-"
|
||||||
|
checkLeaveType(formData.leaveTypeId, formData.leaveTypeName)
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
props.onClickClose?.()
|
||||||
|
messageError($q, err)
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
console.log(formData)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function check ประเภทการลา
|
||||||
|
* @param leaveTypeId ประเภทการลา
|
||||||
|
* @param leaveTypeName ประเภทการลา
|
||||||
|
*/
|
||||||
|
/**checkForm Form การลา*/
|
||||||
|
const checkForm = ref<string>("")
|
||||||
|
function checkLeaveType(leaveTypeId: string, leaveTypeName: string) {
|
||||||
|
if (props.leaveType) {
|
||||||
|
const filtertype = props.leaveType.find((e: any) => e.id === leaveTypeId)
|
||||||
|
const type = filtertype.code
|
||||||
|
if (type === "LV-001" || type === "LV-002" || type === "LV-003") {
|
||||||
|
checkForm.value = "FormLeave"
|
||||||
|
} else if (type === "LV-004") {
|
||||||
|
checkForm.value = "FormChildbirth"
|
||||||
|
} else if (type === "LV-005") {
|
||||||
|
checkForm.value = "FormHoliday"
|
||||||
|
} else if (type === "LV-006") {
|
||||||
|
checkForm.value = "FormUpasom"
|
||||||
|
} else if (type === "LV-006" && leaveTypeName === "พิธีฮัจญ์ฯ") {
|
||||||
|
checkForm.value = "FormHajj"
|
||||||
|
} else if (type === "LV-007") {
|
||||||
|
checkForm.value = "FormCheckSelect"
|
||||||
|
} else if (type === "LV-008" && leaveTypeName === "ลาไปศีกษา") {
|
||||||
|
checkForm.value = "FormStudy"
|
||||||
|
} else if (type === "LV-008") {
|
||||||
|
checkForm.value = "FormLeaveToTraining"
|
||||||
|
} else if (type === "LV-009") {
|
||||||
|
checkForm.value = "FormLeaveToWorkInternational"
|
||||||
|
} else if (type === "LV-010") {
|
||||||
|
checkForm.value = "FormSpouse"
|
||||||
|
} else if (type === "LV-011") {
|
||||||
|
checkForm.value = "FormVocationalRehabilitation"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* บันทึกข้อมูลที่เเก้ไข
|
||||||
|
* @param id ระบุ บุคคล
|
||||||
|
*/
|
||||||
|
function onSubmit(formData: FormData) {
|
||||||
|
// dialogConfirm($q, () => putData(formData));
|
||||||
|
console.log(personalId.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
// function putData(formData: any) {
|
||||||
|
// showLoader();
|
||||||
|
// http
|
||||||
|
// .put(config.API.meetingById(personalId.value), {
|
||||||
|
// round: formData.rounded ?? "",
|
||||||
|
// tittle: formData.title,
|
||||||
|
// dateStart: dateToISO(formData.dateMeetingStart),
|
||||||
|
// dateEnd: dateToISO(formData.dateMeetingEnd),
|
||||||
|
// result: formData.consider,
|
||||||
|
// duration: formData.period,
|
||||||
|
// })
|
||||||
|
// .then((res) => {
|
||||||
|
// success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
// })
|
||||||
|
// .catch((e) => {
|
||||||
|
// messageError($q, e);
|
||||||
|
// })
|
||||||
|
// .finally(async () => {
|
||||||
|
// hideLoader();
|
||||||
|
// router.push(`/evaluate/meeting`);
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="col-12 row justify-center">
|
||||||
|
<div class="col-xs-12 col-sm-12 col-md-11">
|
||||||
|
<div class="toptitle text-white col-12 row items-center">
|
||||||
|
<q-btn to="/leave" icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" />
|
||||||
|
<div>แก้ไขยื่นใบลา {{ formData.leaveTypeName }} {{ leaveId }}</div>
|
||||||
|
</div>
|
||||||
|
<q-form ref="myform" class="col-12">
|
||||||
|
<q-card bordered>
|
||||||
|
<div class="col-12 row q-col-gutter-md q-pa-md">
|
||||||
|
<div class="col-xs-12 col-sm-12">
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<q-icon name="mdi-numeric-1-circle" size="20px" color="primary" />
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark">เลือกประเภทการลา</div>
|
||||||
|
</div>
|
||||||
|
<div class="q-py-sm q-px-lg">
|
||||||
|
<div class="row">
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
class="col-12 col-sm-6 col-md-4 inputgreen"
|
||||||
|
outlined
|
||||||
|
v-model="formData.leaveTypeName"
|
||||||
|
option-value="code"
|
||||||
|
option-label="name"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
prefix="ประเภทใบลา :"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="row q-mt-sm">
|
||||||
|
<div class="col-12 col-sm-6 col-md-3" v-if="model === 'LV-006' || model === 'LV-008'">
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
v-model="modelSpecific"
|
||||||
|
:options="model === 'LV-006' ? dataStore.optionsOrdination : dataStore.optionsSpecific"
|
||||||
|
option-value="code"
|
||||||
|
option-label="name"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
prefix="ประเภทการลา :"
|
||||||
|
@update:model-value="dataStore.typeConvert(model, modelSpecific)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- v-if (ลาอุปสมบทหรือลาประกอบพิธีฮัจญ์||ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน) -->
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<q-icon name="mdi-numeric-2-circle" size="20px" color="primary" />
|
||||||
|
<div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการลา</div>
|
||||||
|
</div>
|
||||||
|
<FormPart2 :model="model" :data="formData" :leaveTypeId="formData.leaveTypeId" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<Sick :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาป่วย' || formData.leaveTypeName === 'ลากิจส่วนตัว'" :data="formData" :leaveId="leaveId" />
|
||||||
|
<Birth :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาคลอดบุตร'" :data="formData" :leaveId="leaveId" />
|
||||||
|
<HelpWifeBirth :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาไปช่วยเหลือภริยาที่คลอดบุตร'" :data="formData" :leaveId="leaveId" />
|
||||||
|
<Vacation :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาพักผ่อน'" :data="formData" :leaveId="leaveId" />
|
||||||
|
<Ordination :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาอุปสมบทหรือการลาประกอบพิธีฮัจญ์ฯ'" :data="formData" :leaveId="leaveId" />
|
||||||
|
<Haji :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาอุปสมบทหรือการลาประกอบพิธีฮัจญ์ฯ'" :data="formData" :leaveId="leaveId" />
|
||||||
|
<Millitary :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล'" :data="formData" :leaveId="leaveId" />
|
||||||
|
<WorkInternational ::on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาไปปฏิบัติงานในองค์การระหว่างประเทศ'" :data="formData" :leaveId="leaveId" />
|
||||||
|
<Study :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน'" :data="formData" :leaveId="leaveId" />
|
||||||
|
<FollowSpouse :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาติดตามคู่สมรส'" :data="formData" :leaveId="leaveId" />
|
||||||
|
<Rehabilitation :on-submit="onSubmit" v-if="formData.leaveTypeName === 'ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ'" :data="formData" :leaveId="leaveId" />
|
||||||
|
</div>
|
||||||
|
<!-- <div class="toptitle col-12 row items-center">
|
||||||
|
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="" class="q-mr-sm" @click="router.push(`/evaluate/meeting`)" />
|
||||||
|
<div class="text-white q-pl-sm">ยื่นขอลา {{ formData.leaveTypeName }} {{ leaveId }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<WorkInternational v-if="checkForm === 'FormLeaveToWorkInternational'" :on-submit="onSubmit" :data="formData" />
|
||||||
|
v-if="checkForm === 'FormVocationalRehabilitation'" -->
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</q-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue