hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

popup เพิ่มข้อมูลทะเบียนประวัติ ข้าราชการ

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-01-29 17:38:49 +07:00
parent d7a79c2169
commit 0c02d66e20
8 changed files with 767 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/api/registry/api.profile.ts
View file

@ -193,4 +193,7 @@ export default {
`${profile}employment/history/${employmentId}`,
searchPersonal: () => `${profile}search-personal`,
//สร้างข้อมูลราชการ
createProfileOfficer: () => `${profile}information/officer`,
};

623
src/components/DialogAddEmployee.vue Normal file
View file

@ -0,0 +1,623 @@
divdivdiv
<script setup lang="ts">
import { ref, watch } from "vue";
import { useQuasar } from "quasar";
import config from "@/app.config";
import http from "@/plugins/http";
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,
} = 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: null,
genderId: null,
bloodId: null,
nationality: null,
ethnicity: null,
statusId: null,
religionId: null,
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);
informaData.value.birthDate = null;
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) {
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 != undefined)
formData.append(
"birthDate",
dateToISO(informaData.value.birthDate) ?? dateToISO(new Date())
);
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, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
modal.value = false;
await changeBirth(informaData.value.birthDate ?? new Date());
hideLoader();
});
};
/*** 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();
});
};
</script>
<template>
<q-dialog v-model="modal">
<q-card style="min-width: 60vw">
<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>
</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="`${'เบอร์โทร'}`"
:rules="[
(val: string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
(val: string) =>
val.length >= 10 ||
`${'กรุณากรอกเบอร์โทรให้ครบ'}`,
]"
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>

2
src/modules/02_organizational/views/MainTree.vue
View file

@ -61,7 +61,7 @@
color="grey-6"
@click="goToUserRegistry()"
/>
<q-tooltip>ทะเบียนประวัติ</q-tooltip>
<q-tooltip>ทะเบียนประวัติd</q-tooltip>
</q-btn>
</div>
<div class="q-pl-lg q-pt-sm q-gutter-xs textSub">

119
src/modules/02_organizationalNew/components/listView.vue
View file

@ -27,9 +27,128 @@ async function fetchDataTree() {
lazy: true,
},
];
// const data = [
// {
// orgRootId: "00000000-0000-0000-0000-000000000000",
// orgLevel: 0,
// orgRootName: "ปลัดกรุงเทพ",
// orgRootShortName: "ก.น.",
// orgRootCode: "04",
// orgCode: "0400",
// orgRootOrder: 1,
// orgRootPhoneEx: "0849562355",
// orgRootPhoneIn: "0845124512",
// orgRootFax: "021576452",
// orgRevisionId: "00000000-0000-0000-0000-000000000000",
// orgChild1: [
// {
// orgChild1Id: "00000000-0000-0000-0000-000000000000",
// orgLevel: 1,
// orgChild1Name: "ปลัดกรุงเทพ",
// orgChild1ShortName: "ก.น.",
// orgChild1Code: "01",
// orgCode: "0401",
// orgChild1Order: 1,
// orgRootCode: "04",
// orgChild1PhoneEx: "0849562355",
// orgChild1PhoneIn: "0845124512",
// orgChild1Fax: "021576452",
// orgRevisionId: "00000000-0000-0000-0000-000000000000",
// orgChild2: [
// {
// orgChild2Id: "00000000-0000-0000-0000-000000000000",
// orgLevel: 2,
// orgChild2Name: "ปลัดกรุงเทพ",
// orgChild2ShortName: "ก.น.",
// orgChild2Code: "01",
// orgCode: "0401",
// orgChild2Order: 1,
// orgRootCode: "04",
// orgChild2PhoneEx: "0849562355",
// orgChild2PhoneIn: "0845124512",
// orgChild2Fax: "021576452",
// orgRevisionId: "00000000-0000-0000-0000-000000000000",
// orgChild3: [
// {
// orgChild3Id: "00000000-0000-0000-0000-000000000000",
// orgLevel: 3,
// orgChild3Name: "ปลัดกรุงเทพ",
// orgChild3ShortName: "ก.น.",
// orgChild3Code: "01",
// orgCode: "0401",
// orgChild3Order: 1,
// orgRootCode: "04",
// orgChild3PhoneEx: "0849562355",
// orgChild3PhoneIn: "0845124512",
// orgChild3Fax: "021576452",
// orgRevisionId: "00000000-0000-0000-0000-000000000000",
// lazy: true,
// orgChild4: [
// {
// orgChild4Id: "00000000-0000-0000-0000-000000000000",
// orgLevel: 4,
// orgChild4Name: "ปลัดกรุงเทพ",
// orgChild4ShortName: "ก.น.",
// orgChild4Code: "01",
// orgCode: "0401",
// orgChild4Order: 1,
// orgChild4PhoneEx: "0849562355",
// orgChild4PhoneIn: "0845124512",
// orgChild4Fax: "021576452",
// orgRevisionId: "00000000-0000-0000-0000-000000000000",
// lazy: true,
// orgRootCode: "04",
// },
// ],
// },
// ],
// },
// ],
// },
// ],
// },
// {
// orgRootId: "00000000-0000-0000-0000-000000000001",
// orgLevel: 0,
// orgRootName: "ปลัดกรุงเทพ2",
// orgRootShortName: "ก.น.",
// orgRootCode: "04",
// orgCode: "0400",
// orgRootOrder: 1,
// orgRootPhoneEx: "0849562355",
// orgRootPhoneIn: "0845124512",
// orgRootFax: "021576452",
// orgRevisionId: "00000000-0000-0000-0000-000000000000",
// orgChild1: [
// {
// orgChild1Id: "00000000-0000-0000-0000-000000000000",
// orgLevel: 1,
// orgChild1Name: "ปลัดกรุงเทพ2",
// orgChild1ShortName: "ก.น.",
// orgChild1Code: "01",
// orgCode: "0401",
// orgChild1Order: 1,
// orgRootCode: "04",
// orgChild1PhoneEx: "0849562355",
// orgChild1PhoneIn: "0845124512",
// orgChild1Fax: "021576452",
// orgRevisionId: "00000000-0000-0000-0000-000000000000",
// orgChild2: [],
// },
// ],
// },
// ];
nodeTree.value = data;
console.log(nodeTree.value);
}
onMounted(() => {
fetchDataTree();
});

9
src/modules/02_organizationalNew/components/mainTree.vue
View file

@ -134,14 +134,7 @@ const updateSelected = (target: any) => {
};
const onLazyLoad = (details: { node: any; key: any; done: any; fail: any }) => {
// call fail() if any error occurs
// setTimeout(() => {
// simulate loading and setting an empty node
// if (details.key.indexOf("data empty") > -1) {
// details.done([]);
// return;
// }
console.log(details.node.organizationName);
if (details.node.organizationId == "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx01") {
details.done([

18
src/modules/04_registry/components/TableProfile.vue
View file

@ -20,6 +20,17 @@
<q-space />
<div class="items-center row col-12 q-gutter-x-sm">
<PopupHistory />
<q-btn
color="primary"
dense
flat
round
@click="ocClickAddEmployee"
icon="add"
>
<q-tooltip>เพิ่มข้อมูลทะเบียนประวัติ ข้าราชการ</q-tooltip>
</q-btn>
<q-btn
size="13px"
color="grey-7"
@ -431,12 +442,14 @@
<slot v-bind="props" name="columns"></slot>
</template>
</q-table>
<PopupADdEmployee v-model:modal="modalEmployee" />
</template>
<script setup lang="ts">
import { ref, useAttrs } from "vue";
import type { Pagination } from "@/modules/04_registry/interface/index/Main";
import type { DataOption } from "@/modules/04_registry/components/profileType";
import PopupHistory from "./PopupHistory.vue";
import PopupADdEmployee from "@/components/DialogAddEmployee.vue";
const attrs = ref<any>(useAttrs());
const table = ref<any>(null);
@ -607,6 +620,11 @@ const resetFilter = () => {
emit("update:inputfilter", "");
filterRef.value.focus();
};
const modalEmployee = ref<boolean>(false);
function ocClickAddEmployee() {
modalEmployee.value = !modalEmployee.value;
}
</script>
<style lang="scss">
.icon-color {

1
src/modules/04_registry/views/Main.vue
View file

@ -48,6 +48,7 @@
</div>
</q-scroll-area>
</q-drawer>
<q-page-container class="q-ma-sm">
<ProfileTable
style="height: 77vh"

2
src/modules/08_registryEmployee/components/AddEmployee/Main.vue
View file

@ -296,7 +296,7 @@ const saveData = async () => {
// post เพิ่มข้อมูลทะเบียนประวัติไปที่ api
const addData = async () => {
const formData = new FormData();
if (fileData.value != null) formData.append("File", fileData.value); //แก้ไขรูป
// 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)