hrms-mgt/src/modules/07_insignia/components/3_result/DialogForm.vue
2023-11-03 13:27:16 +07:00

712 lines
24 KiB
Vue

<script setup lang="ts">
import { ref, watch, computed } from "vue";
import { QForm, useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useResultDataStore } from "@/modules/07_insignia/storeResult";
import http from "@/plugins/http";
import config from "@/app.config";
import type { DataOption } from "@/modules/04_registry/components/profileType";
import DialogHeader from "@/components/DialogHeader.vue";
const DataStore = useResultDataStore();
const $q = useQuasar();
const myForm = ref<QForm>();
const mixin = useCounterMixin();
const {
date2Thai,
dialogConfirm,
success,
messageError,
showLoader,
hideLoader,
notifyError,
} = mixin;
const status = ref<string>("");
const Advertise = ref<string>("");
const issue = ref<string>("");
const brand = ref<string>("");
const cardid = ref<string>("");
const fullName = ref<string>("");
const volume = ref<string>("");
const episode = ref<string>("");
const duty = ref<string>("");
const announced = ref<string>("");
const position = ref<string>("");
const payment = ref<string>("");
const addressPayment = ref<string | null>(null);
const affiliationRequest = ref<string>("");
const affiliationReceived = ref<string>("");
const receivedate = ref<Date | null>();
const announceDate = ref<Date | null>();
const invoiceDate = ref<Date | null>(null);
const filterinsigniaOp2 = ref<any>(DataStore.insigniaOp2)
const employeeClass = ref<string>("");
const employeeClassOps = ref<DataOption[]>([
{ id: "officer", name: "ข้าราชการ กทม.สามัญ" },
{ id: "employee", name: "ลูกจ้างประจำ" },
]);
const listPerson = ref<any>([]);
const paymentOp = [
{ label: "จัดส่งทางไปรษณีย์", value: "จัดส่งทางไปรษณีย์" },
{ label: "มารับด้วยตัวเอง", value: "มารับด้วยตัวเอง" },
];
// reset วันที่ประกาศราชกิจจานุเบกษา
const clearAnnounceExam = () => {
announceDate.value = null;
};
// reset วันที่ได้รับพระราชทานเครื่องราชอิสริยาภรณ์
const clearDateReceivedate = () => {
receivedate.value = null;
};
// reset วันที่จ่ายใบกำกับ
const clearDateInvoiceDate = () => {
invoiceDate.value = null;
};
const props = defineProps({
modal: Boolean,
save: {
type: Function,
},
close: {
type: Function,
},
roundId: {
type: String,
},
action: {
type: String,
},
personId: {
type: String,
},
profileType: {
type: String,
},
});
// เปิด popup เพิ่มราชชื่อบันทึกผล
watch(props, () => {
if (props.modal === true) {
employeeClass.value = "";
cardid.value = "";
fullName.value = "";
position.value = "";
Advertise.value = "";
brand.value = "";
receivedate.value = null;
issue.value = "";
affiliationRequest.value = "";
affiliationReceived.value = "";
announceDate.value = null;
volume.value = "";
episode.value = "";
duty.value = "";
announced.value = "";
invoiceDate.value = null;
payment.value = "";
if (props.personId !== undefined) {
if (props.action === "editData") {
fectDataByid(props.personId); // เมือแก้ไข เรียกข้อมูลบันทึกผล
}
}
}
});
const disbleStatus = computed(() => {
if (employeeClass.value !== "") {
return false;
} else return true;
});
// เลือกประเภทลูกจ้าง
const selectType = async () => {
showLoader();
cardid.value = "";
fullName.value = "";
position.value = "";
Advertise.value = "";
brand.value = "";
receivedate.value = null;
issue.value = "";
affiliationRequest.value = "";
affiliationReceived.value = "";
announceDate.value = null;
volume.value = "";
episode.value = "";
duty.value = "";
announced.value = "";
invoiceDate.value = null;
payment.value = "";
await fecthlistPerson();
};
// เรียกหน่วยงาน
const fecthlistPerson = async () => {
await http
.get(config.API.profileOrganizRoot)
.then((res) => {
const id = res.data.result[0].id;
if (id !== "") {
findlist(id); // id หน่วยงานไปเรียกราชชื่อ
}
})
.catch((e) => {
messageError($q, e);
});
};
// เรียกราชชื่อลูกจ้างตาม id หน่วยงาน
const findlist = async (id: string) => {
let data = [{}];
// ข้าราชการ
if (employeeClass.value === "officer") {
data = [{ criteriaType: "is_retire", criteriaValue: "false" }];
// ลูกจ้างประจำ
} else if (employeeClass.value === "employee") {
data = [
{ criteriaType: "is_retire", criteriaValue: "false" },
{ criteriaType: "employee_class", criteriaValue: "perm" },
];
}
await http
.post(config.API.profileSearchNewOcIdType(id, employeeClass.value), {
criterias: data,
})
.then((res) => {
listPerson.value = res.data.result;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
// เรียกข้อมูลบันทึกผลตาม id
const fectDataByid = async (id: string) => {
showLoader();
if (props.profileType !== undefined) {
employeeClass.value = props.profileType.toString();
}
await http
.get(config.API.noteByid(id))
.then((res) => {
let data = res.data.result;
cardid.value = data.citizenId;
fullName.value = data.fullName;
position.value = data.position;
Advertise.value = data.number;
brand.value = data.requestInsigniaId;
receivedate.value = data.dateReceive;
issue.value = data.issue;
affiliationRequest.value = data.organizationOrganizationSend;
affiliationReceived.value = data.organizationOrganizationReceive;
announceDate.value = data.date;
volume.value = data.volumeNo;
episode.value = data.section;
duty.value = data.page;
announced.value = data.no;
invoiceDate.value = data.datePayment;
payment.value = data.typePayment;
addressPayment.value = data.address;
status.value = data.status;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
};
// บักทึกผล
const clickSave = async () => {
let body = {
citizanId: cardid.value, // เลขบัตร
insigniaId: brand.value, // insigniaID
number: Advertise.value,
issue: issue.value,
dateReceive: receivedate.value, // วันที่ได้รับเครื่องราชฯ
organizationOrganizationSend: affiliationRequest.value,
organizationOrganizationReceive: affiliationReceived.value,
date: announceDate.value, // วันที่กิจนุเบก
volumeNo: volume.value, // เล่ม
section: episode.value, //ตอนที่
page: duty.value, //หน้าที่
no: announced.value,
datePayment: invoiceDate.value, //วันที่จ่าย
typePayment: payment.value, // รูปแบบการจ่าย
address: addressPayment.value, //ที่อยู่
};
// เช็คค่าว่าง
await myForm.value!.validate().then((result: boolean) => {
if (result) {
dialogConfirm($q, async () => {
await addNote(body);
});
}
});
};
// เพิ่มแก้ ข้อมูลบันทึกผล
const addNote = async (body: any) => {
if (props.roundId !== undefined) {
await http
.put(config.API.noteAdd(props.roundId), body)
.then(() => {
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
if (props.close) {
props.close();
}
});
}
};
// หาเลขบัตรประจำตัวประชาชน
const searchcardid = () => {
if (cardid.value.length === 13) {
let data = listPerson.value.find((e: any) => e.citizenId === cardid.value);
if (data) {
fullName.value = data.fullname; // ชื่อ
position.value = data.positionEmployeePosition; // ตำแหน่ง
} else notifyError($q, "ไม่พบข้อมูลเลขบัตรประชาชนนี้");
}
};
const filterSelector = (val: any, update: Function, name: any) => {
update(() => {
const needle = val.toLowerCase();
if (name === 'insigniaOp2') {
brand.value = ''
filterinsigniaOp2.value = DataStore.insigniaOp2.filter(
(v: any) => v.name.toLowerCase().indexOf(needle) > -1
);
}
}
)
}
</script>
<template>
<q-dialog v-model="props.modal" persistent>
<q-card style="min-width: 900px" class="q-pb-md">
<DialogHeader tittle="บันทึกผล" :close="props.close" />
<q-separator />
<q-form ref="myForm">
<div class="q-pa-md bg-grey-1">
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-4">
<q-select
:rules="[
(val) => !!val || 'กรุณาเลือก ขรก.สามัญ/ลูกจ้างประจำ',
]"
hide-bottom-space
:options="employeeClassOps"
dense
borderless
option-label="name"
option-value="id"
emit-value
map-options
outlined
v-model="employeeClass"
:label="`ขรก.สามัญ/ลูกจ้างประจำ`"
@update:model-value="selectType"
:disable="status !== ''"
lazy-rules
/>
</div>
<div class="col-12 text-weight-bold text-grey">
รายละเอยดขอม
</div>
<div class="col-xs-12 col-sm-4">
<q-input
:disable="
disbleStatus || status == 'DONE' || status == 'PENDING'
"
hide-bottom-space
outlined
class="inputgreen"
v-model="cardid"
dense
lazy-rules
:rules="[
(val:string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
(val:string) =>
val.length >= 13 ||
`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
]"
label="เลขประจำตัวประชาชน"
maxlength="13"
mask="#############"
@keyup="searchcardid"
/>
</div>
<div class="col-xs-6 col-sm-4">
<q-input
disable
hide-bottom-space
outlined
dense
lazy-rules
class="inputgreen"
borderless
v-model="fullName"
:label="`${'ชื่อ-นามสกุล'}`"
/>
</div>
<div class="col-xs-12 col-sm-4">
<q-input
disable
hide-bottom-space
outlined
dense
lazy-rules
class="inputgreen"
borderless
v-model="position"
:label="`ตำเเหน่ง`"
/>
</div>
<div class="col-6"></div>
<div class="col-12 q-my-xs"><q-separator size="2px" /></div>
<div class="col-12 text-weight-bold text-grey">
รายละเอยดตำเเหน
</div>
<div class="col-xs-12 col-sm-6">
<q-input
:disable="disbleStatus || status == 'DONE'"
:rules="[
(val) =>
!!val ||
'กรุณากรอกหมายเลขประกาศนีย์บัตรกำกับเครื่องราชอิสริยาภรณ์',
]"
hide-bottom-space
dense
borderless
outlined
v-model="Advertise"
lazy-rules
label="หมายเลขประกาศนีย์บัตรกำกับเครื่องราชอิสริยาภรณ์"
/>
</div>
<div class="col-xs-12 col-sm-6">
<q-select
:disable="disbleStatus || status == 'DONE'"
v-model="brand"
dense
outlined
lazy-rules
hide-bottom-space
:label="`${'ชั้นตราเครื่องราชอิสริยาภรณ์'}`"
emit-value
map-options
option-label="name"
:options="filterinsigniaOp2"
option-value="id"
:readonly="false"
use-input
:borderless="false"
style="min-width: 150px"
:rules="[
(val) => !!val || 'กรุณากรอกชื่อชั้นตราเครื่องราชอิสริยาภรณ์',
]"
@filter="(inputValue:any,doneFn:Function) =>
filterSelector(inputValue, doneFn,'insigniaOp2') "
/>
</div>
<div class="col-xs-12 col-sm-6">
<datepicker
menu-class-name="modalfix"
v-model="receivedate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:readonly="disbleStatus || status == 'DONE'"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
:disable="disbleStatus || status == 'DONE'"
dense
borderless
outlined
:rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
lazy-rules
hide-bottom-space
:model-value="
receivedate != null ? date2Thai(receivedate) : undefined
"
:label="`${'วันที่ได้รับพระราชทานเครื่องราชอิสริยาภรณ์'}`"
clearable
@clear="clearDateReceivedate"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
color="primary"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-6">
<q-input
:disable="disbleStatus || status == 'DONE'"
:rules="[(val) => !!val || 'กรุณากรอกทะเบียนฐานนันดร']"
hide-bottom-space
dense
borderless
outlined
v-model="issue"
label="ทะเบียนฐานนันดร"
lazy-rules
/>
</div>
<div class="col-xs-12 col-sm-6">
<q-input
:disable="
disbleStatus || status == 'DONE' || status == 'PENDING'
"
:rules="[(val) => !!val || 'กรุณากรอกสังกัด']"
hide-bottom-space
dense
lazy-rules
borderless
outlined
v-model="affiliationRequest"
label="สังกัด ณ วันที่ขอพระราชทานเครื่องราชอิสริยาภรณ์"
/>
</div>
<div class="col-xs-12 col-sm-6">
<q-input
:disable="
disbleStatus || status == 'DONE' || status == 'PENDING'
"
:rules="[(val) => !!val || 'กรุณากรอกสังกัด']"
hide-bottom-space
dense
borderless
outlined
v-model="affiliationReceived"
label="สังกัด ณ วันที่ได้รับประกาศนียบัตรกำกับเครื่องราชอิสริยาภรณ์"
lazy-rules
/>
</div>
<div class="col-12 q-my-xs"><q-separator size="2px" /></div>
<div class="col-12 text-weight-bold text-grey">
ประกาศราชกจจานเบกษา
</div>
<div class="col-xs-12 col-sm-4">
<datepicker
menu-class-name="modalfix"
v-model="announceDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:readonly="disbleStatus || status == 'DONE'"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
:disable="disbleStatus || status == 'DONE'"
dense
borderless
outlined
lazy-rules
:rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
hide-bottom-space
:model-value="
announceDate != null ? date2Thai(announceDate) : undefined
"
:label="`${'วันที่'}`"
clearable
@clear="clearAnnounceExam"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
color="primary"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-4">
<q-input
:disable="disbleStatus || status == 'DONE'"
hide-bottom-space
outlined
dense
lazy-rules
class="inputgreen"
borderless
v-model="volume"
:label="`เล่มที่`"
:rules="[(val) => !!val || 'กรุณากรอกเล่มที่']"
/>
</div>
<div class="col-xs-12 col-sm-4">
<q-input
:disable="disbleStatus || status == 'DONE'"
hide-bottom-space
outlined
dense
lazy-rules
class="inputgreen"
borderless
v-model="episode"
:label="`ตอนที่`"
:rules="[(val) => !!val || 'กรุณากรอกตอนที่']"
/>
</div>
<div class="col-xs-12 col-sm-6">
<q-input
:disable="disbleStatus || status == 'DONE'"
hide-bottom-space
outlined
dense
lazy-rules
class="inputgreen"
borderless
v-model="duty"
:label="`หน้าที่`"
:rules="[(val) => !!val || 'กรุณากรอกหน้าที่']"
/>
</div>
<div class="col-xs-12 col-sm-6">
<q-input
:disable="disbleStatus || status == 'DONE'"
hide-bottom-space
outlined
dense
lazy-rules
class="inputgreen"
borderless
v-model="announced"
:label="`ลำดับที่`"
:rules="[(val) => !!val || 'กรุณากรอกลำดับที่']"
/>
</div>
<div class="col-12 q-my-xs"><q-separator size="2px" /></div>
<div class="col-12 text-weight-bold text-grey">
ผลการจายใบกำก
</div>
<div class="col-xs-12 col-sm-6">
<datepicker
menu-class-name="modalfix"
v-model="invoiceDate"
: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
:disable="disbleStatus"
dense
borderless
outlined
lazy-rules
hide-bottom-space
:model-value="
invoiceDate != null ? date2Thai(invoiceDate) : undefined
"
:label="`${'วันที่จ่ายใบกำกับ'}`"
clearable
@clear="clearDateInvoiceDate"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
color="primary"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-6">
<q-select
:disable="disbleStatus"
hide-bottom-space
:options="paymentOp"
class="col-xs-12 col-sm-6"
dense
borderless
option-label="label"
option-value="value"
outlined
emit-value
lazy-rules
map-options
v-model="payment"
:label="`เลือกรูปแบบการจ่าย`"
/>
</div>
<div v-if="payment === 'จัดส่งทางไปรษณีย์'" class="col-12">
<q-input
:disable="disbleStatus"
label="ที่อยู่ที่จ่าย"
class="bg-white"
dense
lazy-rules
borderless
outlined
v-model="addressPayment"
type="textarea"
/>
</div>
</div>
</div>
</q-form>
<q-separator />
<div class="q-pa-md">
<div class="row justify-end">
<q-btn label="บันทึก" @click="clickSave" color="public"
><q-tooltip>นท</q-tooltip></q-btn
>
</div>
</div>
</q-card>
</q-dialog>
</template>