670 lines
21 KiB
Vue
670 lines
21 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch, computed } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
import config from "@/app.config";
|
|
import http from "@/plugins/http";
|
|
import moment from "moment";
|
|
import type { QForm } from "quasar";
|
|
|
|
import Header from "@/components/DialogHeader.vue";
|
|
import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
const profileStore = useProfileDataStore();
|
|
const { changeRetireText, changeBirth } = profileStore;
|
|
const {
|
|
date2Thai,
|
|
dialogMessage,
|
|
showLoader,
|
|
hideLoader,
|
|
messageError,
|
|
dateToISO,
|
|
dialogConfirm,
|
|
success,
|
|
convertDate,
|
|
} = useCounterMixin();
|
|
const $q = useQuasar();
|
|
|
|
const dateBefore = ref<Date>(new Date());
|
|
|
|
const informaData = ref<any>({
|
|
cardid: null,
|
|
age: null,
|
|
prefix: null,
|
|
prefixId: null,
|
|
firstname: null,
|
|
lastname: null,
|
|
birthDate: "",
|
|
genderId: null,
|
|
bloodId: null,
|
|
nationality: "ไทย",
|
|
ethnicity: "ไทย",
|
|
statusId: null,
|
|
religionId: "ceaec498-71b4-4f82-b5a2-7d6ec988b753",
|
|
tel: null,
|
|
employeeType: null,
|
|
employeeClass: null,
|
|
profileType: null,
|
|
});
|
|
|
|
const Ops = ref<any>({
|
|
prefixOps: [],
|
|
prefixOldOps: [],
|
|
genderOps: [],
|
|
bloodOps: [],
|
|
statusOps: [],
|
|
religionOps: [],
|
|
employeeClassOps: [],
|
|
employeeTypeOps: [],
|
|
});
|
|
|
|
// ข้อมูลเมื่อเลือกแล้ว
|
|
const OpsFilter = ref<any>({
|
|
prefixOps: [],
|
|
prefixOldOps: [],
|
|
genderOps: [],
|
|
bloodOps: [],
|
|
statusOps: [],
|
|
religionOps: [],
|
|
employeeClassOps: [],
|
|
employeeTypeOps: [],
|
|
});
|
|
const modal = defineModel<boolean>("modal", { required: true });
|
|
|
|
watch(
|
|
() => modal.value,
|
|
() => {
|
|
modal.value && fetchPerson();
|
|
}
|
|
);
|
|
|
|
// ตรวจสอบเลขประจำตัวประชาชน
|
|
const defaultCitizenData = ref<string>("");
|
|
const changeCardID = async (value: string | number | null) => {
|
|
if (value != null && typeof value == "string") {
|
|
if (value.length == 13 && value != defaultCitizenData.value) {
|
|
await checkCitizen(value);
|
|
}
|
|
}
|
|
};
|
|
|
|
const checkCitizen = async (id: string) => {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.profileCitizenId(id))
|
|
.then((res) => {
|
|
const data = res.data.result.citizen;
|
|
|
|
if (!data) {
|
|
dialogMessage(
|
|
$q,
|
|
"ข้อความแจ้งเตือน",
|
|
"เลขประจำตัวประชาชนนี้มีการใช้งานแล้ว",
|
|
"warning",
|
|
undefined,
|
|
"orange",
|
|
undefined,
|
|
undefined,
|
|
true
|
|
);
|
|
informaData.value.cardid = defaultCitizenData.value;
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
};
|
|
|
|
// filter list ข้อมูลต่างๆ
|
|
const filterSelector = (val: any, update: Function, refData: string) => {
|
|
switch (refData) {
|
|
case "prefixOps":
|
|
update(() => {
|
|
Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
|
|
(v: any) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "genderOps":
|
|
update(() => {
|
|
Ops.value.genderOps = OpsFilter.value.genderOps.filter(
|
|
(v: any) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "bloodOps":
|
|
update(() => {
|
|
Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
|
|
(v: any) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "statusOps":
|
|
update(() => {
|
|
Ops.value.statusOps = OpsFilter.value.statusOps.filter(
|
|
(v: any) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "religionOps":
|
|
update(() => {
|
|
Ops.value.religionOps = OpsFilter.value.religionOps.filter(
|
|
(v: any) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
|
|
const calculateMaxDate = () => {
|
|
const today = new Date();
|
|
today.setDate(today.getDate() - 1);
|
|
return today;
|
|
};
|
|
|
|
// เช็คเรื่องการเกษียณ
|
|
const calRetire = async (birth: Date) => {
|
|
const body = {
|
|
birthDate: dateToISO(birth),
|
|
};
|
|
if (dateToISO(dateBefore.value) != dateToISO(birth)) {
|
|
showLoader();
|
|
await http
|
|
.post(config.API.profileCalRetire, body)
|
|
.then((res: any) => {
|
|
const data = res.data.result;
|
|
informaData.value.age = data.age;
|
|
informaData.value.birthDate = birth;
|
|
changeRetireText(data.retireDate);
|
|
dateBefore.value = birth;
|
|
})
|
|
.catch((e: any) => {
|
|
messageError($q, e);
|
|
inputBirthDate.value = "";
|
|
informaData.value.birthDate = "";
|
|
informaData.value.age = "";
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
};
|
|
|
|
// หลังจากกดปุ่มบันทึกเช็ค validate ก่อน
|
|
const myform = ref<QForm | null>(null);
|
|
const saveData = async () => {
|
|
if (myform.value != null) {
|
|
await myform.value.validate().then(async (saveDataTest: Boolean) => {
|
|
if (saveDataTest) {
|
|
if (inputBirthDate.value === "") dayChecked.value = true;
|
|
else dialogConfirm($q, () => addData()); // validate ผ่านส่งไปบันทึกที่ api
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
const fileData = ref<any>();
|
|
const addData = async () => {
|
|
const formData = new FormData();
|
|
if (fileData.value != null) formData.append("File", fileData.value); //แก้ไขรูป
|
|
if (informaData.value.cardid != undefined)
|
|
formData.append("citizenId", informaData.value.cardid);
|
|
if (informaData.value.prefixId != undefined)
|
|
formData.append("prefixId", informaData.value.prefixId);
|
|
if (informaData.value.firstname != undefined)
|
|
formData.append("firstName", informaData.value.firstname);
|
|
if (informaData.value.lastname != undefined)
|
|
formData.append("lastName", informaData.value.lastname);
|
|
if (informaData.value.genderId != undefined)
|
|
formData.append("genderId", informaData.value.genderId);
|
|
if (informaData.value.nationality != undefined)
|
|
formData.append("nationality", informaData.value.nationality);
|
|
if (informaData.value.ethnicity != undefined)
|
|
formData.append("race", informaData.value.ethnicity);
|
|
if (informaData.value.religionId != undefined)
|
|
formData.append("religionId", informaData.value.religionId);
|
|
if (informaData.value.birthDate != "")
|
|
formData.append("birthDate", dateToISO(informaData.value.birthDate));
|
|
if (informaData.value.bloodId != undefined)
|
|
formData.append("bloodGroupId", informaData.value.bloodId);
|
|
if (informaData.value.statusId != undefined)
|
|
formData.append("relationshipId", informaData.value.statusId);
|
|
if (informaData.value.tel != undefined)
|
|
formData.append("telephoneNumber", informaData.value.tel);
|
|
if (informaData.value.employeeType != undefined)
|
|
formData.append("employeeType", informaData.value.employeeType);
|
|
if (informaData.value.employeeClass != undefined)
|
|
formData.append("employeeClass", informaData.value.employeeClass);
|
|
|
|
showLoader();
|
|
await http
|
|
.post(config.API.createProfileOfficer(), formData)
|
|
.then((res) => {
|
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
clearForm();
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(async () => {
|
|
modal.value = false;
|
|
await changeBirth(informaData.value.birthDate ?? new Date());
|
|
hideLoader();
|
|
});
|
|
};
|
|
|
|
function clearForm() {
|
|
informaData.value = {
|
|
cardid: null,
|
|
age: null,
|
|
prefix: null,
|
|
prefixId: null,
|
|
firstname: null,
|
|
lastname: null,
|
|
birthDate: null,
|
|
genderId: null,
|
|
bloodId: null,
|
|
nationality: "ไทย",
|
|
ethnicity: "ไทย",
|
|
statusId: null,
|
|
religionId: "ceaec498-71b4-4f82-b5a2-7d6ec988b753",
|
|
tel: null,
|
|
employeeType: null,
|
|
employeeClass: null,
|
|
profileType: null,
|
|
};
|
|
}
|
|
|
|
/*** get รายการข้อมูลเกี่ยวกับบุคคล (dropdown list) */
|
|
const fetchPerson = async () => {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.person)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
let optionbloodGroups: any[] = [];
|
|
data.bloodGroups.map((r: any) => {
|
|
optionbloodGroups.push({
|
|
id: r.id.toString(),
|
|
name: r.name.toString(),
|
|
});
|
|
});
|
|
Ops.value.bloodOps = optionbloodGroups;
|
|
OpsFilter.value.bloodOps = optionbloodGroups;
|
|
|
|
let optiongenders: any[] = [];
|
|
data.genders.map((r: any) => {
|
|
optiongenders.push({
|
|
id: r.id.toString(),
|
|
name: r.name.toString(),
|
|
});
|
|
});
|
|
Ops.value.genderOps = optiongenders;
|
|
OpsFilter.value.genderOps = optiongenders;
|
|
|
|
let optionprefixs: any[] = [];
|
|
data.prefixs.map((r: any) => {
|
|
optionprefixs.push({
|
|
id: r.id.toString(),
|
|
name: r.name.toString(),
|
|
});
|
|
});
|
|
Ops.value.prefixOps = optionprefixs;
|
|
OpsFilter.value.prefixOps = optionprefixs;
|
|
|
|
let optionrelationships: any[] = [];
|
|
data.relationships.map((r: any) => {
|
|
optionrelationships.push({
|
|
id: r.id.toString(),
|
|
name: r.name.toString(),
|
|
});
|
|
});
|
|
Ops.value.statusOps = optionrelationships;
|
|
OpsFilter.value.statusOps = optionrelationships;
|
|
|
|
let optionreligions: any[] = [];
|
|
data.religions.map((r: any) => {
|
|
optionreligions.push({
|
|
id: r.id.toString(),
|
|
name: r.name.toString(),
|
|
});
|
|
});
|
|
Ops.value.religionOps = optionreligions;
|
|
OpsFilter.value.religionOps = optionreligions;
|
|
})
|
|
.catch((e: any) => {})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
};
|
|
|
|
// change date input
|
|
const inputBirthDate = ref<string>("");
|
|
const dayChecked = ref<boolean>(false);
|
|
watch(
|
|
() => inputBirthDate.value,
|
|
(value: string) => {
|
|
if (value.length === 10) {
|
|
const dateVal = convertDate(value);
|
|
|
|
if (dateVal.isValid) {
|
|
dayChecked.value = false;
|
|
calRetire(new Date(dateVal.value));
|
|
} else {
|
|
dayChecked.value = true;
|
|
inputBirthDate.value = "";
|
|
informaData.value.age = "";
|
|
}
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<q-dialog v-model="modal" persistent>
|
|
<q-card style="min-width: 75vw">
|
|
<Header
|
|
tittle="เพิ่มข้อมูลทะเบียนประวัติข้าราชการ กทม.สามัญ"
|
|
:close="() => (modal = false)"
|
|
/>
|
|
<q-separator />
|
|
|
|
<q-card-section class="q-pt-none">
|
|
<HeaderTop header="ข้อมูลส่วนตัว" icon="mdi-account" />
|
|
<q-form ref="myform" class="col-12 q-pt-md">
|
|
<div class="row">
|
|
<div class="row col-12 q-col-gutter-x-sm q-mb-xs">
|
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
|
<q-input
|
|
hide-bottom-space
|
|
outlined
|
|
v-model="informaData.cardid"
|
|
dense
|
|
@update:model-value="changeCardID"
|
|
for="#cardId"
|
|
lazy-rules
|
|
:rules="[
|
|
(val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
|
|
(val: string) =>
|
|
val.length >= 13 ||
|
|
`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
|
|
]"
|
|
label="เลขประจำตัวประชาชน"
|
|
maxlength="13"
|
|
mask="#############"
|
|
/>
|
|
<!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,]" -->
|
|
</div>
|
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
|
<selector
|
|
for="#prefixId"
|
|
hide-bottom-space
|
|
outlined
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
|
|
dense
|
|
lazy-rules
|
|
v-model="informaData.prefixId"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="Ops.prefixOps"
|
|
option-value="id"
|
|
:label="`${'คำนำหน้าชื่อ'}`"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="(inputValue: any, doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps')"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
|
<q-input
|
|
for="#firstname"
|
|
hide-bottom-space
|
|
outlined
|
|
dense
|
|
lazy-rules
|
|
v-model="informaData.firstname"
|
|
:rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
|
:label="`${'ชื่อ'}`"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
|
<q-input
|
|
for="#lastname"
|
|
hide-bottom-space
|
|
outlined
|
|
dense
|
|
lazy-rules
|
|
v-model="informaData.lastname"
|
|
:rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
|
:label="`${'นามสกุล'}`"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row col-12 q-col-gutter-x-sm q-mb-xs">
|
|
<div class="col-xs-6 col-sm-2 col-md-2">
|
|
<!-- <datepicker
|
|
v-model="informaData.birthDate"
|
|
:locale="'th'"
|
|
autoApply
|
|
:enableTimePicker="false"
|
|
week-start="0"
|
|
:max-date="calculateMaxDate()"
|
|
@update:model-value="calRetire"
|
|
>
|
|
<template #year="{ year }">
|
|
{{ year + 543 }}
|
|
</template>
|
|
<template #year-overlay-value="{ value }">
|
|
{{ parseInt(value + 543) }}
|
|
</template>
|
|
<template #trigger>
|
|
<q-input
|
|
for="#birthDate"
|
|
hide-bottom-space
|
|
outlined
|
|
dense
|
|
lazy-rules
|
|
:model-value="
|
|
informaData.birthDate == null
|
|
? null
|
|
: date2Thai(informaData.birthDate)
|
|
"
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
|
|
:label="`${'วัน/เดือน/ปี เกิด'}`"
|
|
>
|
|
<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
|
|
outlined
|
|
v-model="inputBirthDate"
|
|
label="วัน/เดือน/ปี เกิด"
|
|
mask="##/##/####"
|
|
dense
|
|
:error="dayChecked"
|
|
error-message="กรุณากรอกวัน/เดือน/ปี เกิด"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-2 col-md-2">
|
|
<q-input
|
|
hide-bottom-space
|
|
dense
|
|
lazy-rules
|
|
readonly
|
|
borderless
|
|
style="padding: 0 12px"
|
|
:model-value="informaData.age"
|
|
:label="`${'อายุ'}`"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-2 col-md-2">
|
|
<selector
|
|
for="#genderId"
|
|
hide-bottom-space
|
|
outlined
|
|
dense
|
|
lazy-rules
|
|
v-model="informaData.genderId"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="Ops.genderOps"
|
|
option-value="id"
|
|
:label="`${'เพศ'}`"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="(inputValue: any,
|
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
|
|
)"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-2 col-md-2">
|
|
<selector
|
|
for="#statusId"
|
|
hide-bottom-space
|
|
outlined
|
|
dense
|
|
lazy-rules
|
|
v-model="informaData.statusId"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="Ops.statusOps"
|
|
option-value="id"
|
|
:label="`${'สถานภาพ'}`"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="(inputValue: any,
|
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
|
|
)"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-2 col-md-2">
|
|
<q-input
|
|
for="#nationality"
|
|
hide-bottom-space
|
|
outlined
|
|
dense
|
|
lazy-rules
|
|
v-model="informaData.nationality"
|
|
:label="`${'สัญชาติ'}`"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-2 col-md-2">
|
|
<q-input
|
|
for="#ethnicity"
|
|
hide-bottom-space
|
|
outlined
|
|
dense
|
|
lazy-rules
|
|
v-model="informaData.ethnicity"
|
|
:label="`${'เชื้อชาติ'}`"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row col-12 q-col-gutter-x-sm q-mb-xs">
|
|
<div class="col-xs-6 col-sm-2 col-md-2">
|
|
<selector
|
|
for="#religionId"
|
|
hide-bottom-space
|
|
outlined
|
|
dense
|
|
lazy-rules
|
|
v-model="informaData.religionId"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="Ops.religionOps"
|
|
option-value="id"
|
|
:label="`${'ศาสนา'}`"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="(inputValue: any,
|
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
|
|
)"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-2 col-md-2">
|
|
<selector
|
|
for="#bloodId"
|
|
hide-bottom-space
|
|
outlined
|
|
dense
|
|
lazy-rules
|
|
v-model="informaData.bloodId"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="Ops.bloodOps"
|
|
option-value="id"
|
|
:label="`${'หมู่เลือด'}`"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="(inputValue: any,
|
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
|
|
)"
|
|
clearable
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-2 col-md-2">
|
|
<q-input
|
|
for="#tel"
|
|
hide-bottom-space
|
|
outlined
|
|
dense
|
|
lazy-rules
|
|
type="tel"
|
|
v-model="informaData.tel"
|
|
:label="`${'เบอร์โทร'}`"
|
|
mask="##########"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-form>
|
|
<!-- <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div> -->
|
|
<!-- <div class="row col-12"> -->
|
|
<!-- <q-space /> -->
|
|
<!-- <q-btn
|
|
for="#submitForm"
|
|
unelevated
|
|
dense
|
|
class="q-px-md items-center"
|
|
color="light-blue-10"
|
|
label="บันทึก"
|
|
@click="saveData"
|
|
/> -->
|
|
<!-- </div> -->
|
|
</q-card-section>
|
|
<q-separator />
|
|
|
|
<q-card-actions align="right" class="bg-white text-teal">
|
|
<!-- <q-btn flat label="OK" v-close-popup /> -->
|
|
<q-btn
|
|
for="#submitForm"
|
|
unelevated
|
|
dense
|
|
class="q-px-md items-center"
|
|
color="light-blue-10"
|
|
label="บันทึก"
|
|
@click="saveData"
|
|
/>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<style scoped></style>
|