ต่อ api บรรจุ

This commit is contained in:
Thanit Konmek 2023-07-13 09:10:43 +07:00
parent 78ca0ceff7
commit 211ee33310
14 changed files with 1142 additions and 799 deletions

View file

@ -29,6 +29,10 @@ const props = defineProps({
type: Function,
default: () => console.log("not function"),
},
fetch: {
type: Function,
default: () => console.log("not function"),
},
});
const emit = defineEmits(["update:statusEdit"]);

View file

@ -28,6 +28,10 @@ const props = defineProps({
type: String,
required: true,
},
fetch: {
type: Function,
default: () => console.log("not function"),
},
});
const $q = useQuasar();

View file

@ -27,6 +27,10 @@ const props = defineProps({
type: Function,
default: () => console.log("not function"),
},
fetch: {
type: Function,
default: () => console.log("not function"),
},
});
const emit = defineEmits(["update:statusEdit"]);
@ -198,56 +202,55 @@ const fetchHistory = async () => {
};
const fetchData = async () => {
familyData.value.childrens = [];
// loaderPage(true);
// await http
// .get(config.API.profileFamiId(route.params.id.toString()))
// .then((res) => {
// const data: ResponseObject = res.data.result;
// familyData.value.prefixC = "";
// familyData.value.prefixIdC = data.couplePrefixId;
// familyData.value.firstnameC = data.coupleFirstName;
// familyData.value.lastnameC = data.coupleLastName;
// familyData.value.lastnameCOld = data.coupleLastNameOld;
// familyData.value.occupationC = data.coupleCareer;
// familyData.value.prefixM = "";
// familyData.value.prefixIdM = data.fatherPrefixId;
// const data: ResponseObject = res.data.result;
// familyData.value.prefixC = "";
// familyData.value.prefixIdC = data.couplePrefixId;
// familyData.value.firstnameC = data.coupleFirstName;
// familyData.value.lastnameC = data.coupleLastName;
// familyData.value.lastnameCOld = data.coupleLastNameOld;
// familyData.value.occupationC = data.coupleCareer;
// familyData.value.prefixM = "";
// familyData.value.prefixIdM = data.fatherPrefixId;
// familyData.value.firstnameM = data.fatherFirstName;
// familyData.value.lastnameM = data.fatherLastName;
// familyData.value.occupationM = data.fatherCareer;
// familyData.value.prefixF = "";
// familyData.value.prefixIdF = data.motherPrefixId;
// familyData.value.firstnameM = data.fatherFirstName;
// familyData.value.lastnameM = data.fatherLastName;
// familyData.value.occupationM = data.fatherCareer;
// familyData.value.prefixF = "";
// familyData.value.prefixIdF = data.motherPrefixId;
// familyData.value.firstnameF = data.motherFirstName;
// familyData.value.lastnameF = data.motherLastName;
// familyData.value.occupationF = data.motherCareer;
// familyData.value.same = data.couple ? "1" : "0";
// familyData.value.firstnameF = data.motherFirstName;
// familyData.value.lastnameF = data.motherLastName;
// familyData.value.occupationF = data.motherCareer;
// familyData.value.same = data.couple ? "1" : "0";
// if (data.childrens.length > 0) {
// let dataChild: childrenFamily[] = [];
// data.childrens.map((row: childrenFamily, index: number) => {
// dataChild.push({
// id: `${index + 1}`,
// childrenPrefixId: row.childrenPrefixId,
// childrenFirstName: row.childrenFirstName,
// childrenLastName: row.childrenLastName,
// childrenCareer: row.childrenCareer,
// });
// });
// familyData.value.childrens = dataChild;
// } else {
// familyData.value.childrens = [];
// }
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(async () => {
// loaderPage(false);
// });
// if (data.childrens.length > 0) {
// let dataChild: childrenFamily[] = [];
// data.childrens.map((row: childrenFamily, index: number) => {
// dataChild.push({
// id: `${index + 1}`,
// childrenPrefixId: row.childrenPrefixId,
// childrenFirstName: row.childrenFirstName,
// childrenLastName: row.childrenLastName,
// childrenCareer: row.childrenCareer,
// });
// });
// familyData.value.childrens = dataChild;
// } else {
// familyData.value.childrens = [];
// }
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(async () => {
// loaderPage(false);
// });
};
const editData = async () => {
@ -1094,6 +1097,6 @@ const getClass = (val: boolean) => {
<style lang="scss" scoped>
.q-card {
box-shadow: 0px 0px 0px 0px !important;
box-shadow: 0px 0px 0px 0px !important;
}
</style>
</style>

View file

@ -2,26 +2,23 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import { useQuasar } from "quasar";
import type {
Information,
DataOption,
} from "@/modules/05_placement/components/PersonalDetail/profileType";
import { defaultInformation } from "@/modules/05_placement/components/PersonalDetail/profileType";
import type {
RequestItemsHistoryObject,
Columns,
} from "@/modules/05_placement/interface/request/Information";
import type { ResponseObject } from "@/modules/05_placement/interface/response/Information";
import type { InformationOps } from "@/modules/05_placement/interface/index/Main";
import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
import HistoryTable from "@/components/TableHistory.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRoute } from "vue-router";
import { useProfileDataStore } from "@/modules/05_placement/store";
import type { QTableColumn, QForm } from "quasar";
import type { QForm } from "quasar";
import type { PropType } from "vue";
const props = defineProps({
statusEdit: {
@ -32,6 +29,14 @@ const props = defineProps({
type: Function,
default: () => console.log("not function"),
},
fetch: {
type: Function,
default: () => console.log("not function"),
},
data: {
type: Object as PropType<Information>,
default: defaultInformation,
},
});
const emit = defineEmits(["update:statusEdit"]);
@ -47,16 +52,11 @@ const {
showLoader,
hideLoader,
} = mixin;
const dataStore = useDataStore();
const { loaderPage } = dataStore;
const profileStore = useProfileDataStore();
const { changeRetireText, changeBirth } = profileStore;
const edit = ref<boolean>(false);
const informaData = ref<Information>(defaultInformation);
const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว"); //
const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal
const informaData = ref<Information>(props.data);
const age = ref<boolean>(true);
const myform = ref<QForm | null>(null);
const Ops = ref<InformationOps>({
@ -89,214 +89,17 @@ const OpsFilter = ref<InformationOps>({
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
],
});
const columnsHistory = ref<QTableColumn[]>([
{
name: "citizenId",
align: "left",
label: "เลขบัตรประจำตัวประชาชน",
sortable: true,
field: "citizenId",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "prefix",
align: "left",
label: "คำนำหน้า",
sortable: true,
field: "prefix",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "firstName",
align: "left",
label: "ชื่อ",
sortable: true,
field: "firstName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "lastName",
align: "left",
label: "นามสกุล",
sortable: true,
field: "lastName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "birthDate",
align: "left",
label: "วัน/เดือน/ปี เกิด",
sortable: true,
field: "birthDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "gender",
align: "left",
label: "เพศ",
sortable: true,
field: "gender",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "relationship",
align: "left",
label: "สถานภาพ",
sortable: true,
field: "relationship",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "bloodGroup",
align: "left",
label: "หมู่เลือด",
sortable: true,
field: "bloodGroup",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "nationality",
align: "left",
label: "สัญชาติ",
sortable: true,
field: "nationality",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "race",
align: "left",
label: "เชื้อชาติ",
sortable: true,
field: "race",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "religion",
align: "left",
label: "ศาสนา",
sortable: true,
field: "religion",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "telephoneNumber",
align: "left",
label: "เบอร์โทร",
sortable: true,
field: "telephoneNumber",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "employeeType",
align: "left",
label: "ประเภทการจ้าง",
sortable: true,
field: "employeeType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "employeeClass",
align: "left",
label: "ประเภทลูกจ้าง",
sortable: true,
field: "employeeClass",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "createdFullName",
align: "left",
label: "ผู้ดำเนินการ",
sortable: true,
field: "createdFullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "createdAt",
align: "left",
label: "วันที่แก้ไข",
sortable: true,
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const visibleColumnsHistory = ref<String[]>([
"citizenId",
"prefix",
"firstName",
"lastName",
"birthDate",
"gender",
"relationship",
"bloodGroup",
"nationality",
"race",
"religion",
"telephoneNumber",
"employeeType",
"employeeClass",
"createdFullName",
"createdAt",
]);
onMounted(async () => {
// await fetchPerson();
// await fetchData();
await fetchPerson();
emit("update:statusEdit", false);
});
const onCancel = async () => {
// if (myform.value != null) {
// myform.value.reset();
// }
// await fetchData();
if (myform.value != null) {
myform.value.reset();
}
await props.fetch();
};
/**
@ -364,56 +167,6 @@ const fetchPerson = async () => {
});
};
/**
* งชนดอมลประวแกไขขอมลทเลอก
*/
const clickHistory = async () => {
modalHistory.value = true;
showLoader();
await http
.get(config.API.profileInforHisId(route.params.id.toString()))
.then((res) => {
let data = res.data.result;
rowsHistory.value = [];
data.map((e: RequestItemsHistoryObject) => {
rowsHistory.value.push({
citizenId: e.citizenId,
prefix: e.prefix,
firstName: e.firstName,
lastName: e.lastName,
birthDate: new Date(e.birthDate),
gender: e.gender,
relationship: e.relationship,
bloodGroup: e.bloodGroup,
nationality: e.nationality,
race: e.race,
religion: e.religion,
telephoneNumber: e.telephoneNumber,
employeeType:
e.employeeType == "gov"
? "งบประมาณเงินอุดหนุนรัฐบาล"
: e.employeeType == "bkk"
? "งบประมาณกรุงเทพมหานคร"
: "-",
employeeClass:
e.employeeClass == "perm"
? "ลูกจ้างประจำ"
: e.employeeClass == "temp"
? "ลูกจ้างชั่วคราว"
: "-",
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const filterSelector = (val: any, update: Function, refData: string) => {
switch (refData) {
case "prefixOps":
@ -472,7 +225,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
};
const handleDate = async (modelData: Date) => {
informaData.value.birthDate = modelData;
informaData.value.dateOfBirth = modelData;
await calRetire(modelData);
};
@ -500,91 +253,51 @@ const calRetire = async (birth: Date) => {
});
};
const fetchData = async () => {
const editData = async () => {
if (age.value == false) {
modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
return;
}
const body: any = {
citizenId: informaData.value.idCard,
prefixId: informaData.value.prefixId,
firstName: informaData.value.firstname,
lastName: informaData.value.lastname,
genderId: informaData.value.genderId,
nationality: informaData.value.nationality,
race: informaData.value.race,
religionId: informaData.value.religionId,
birthDate: informaData.value.dateOfBirth,
bloodGroupId: informaData.value.bloodGroupId,
relationshipId: informaData.value.relationshipId,
telephoneNumber: informaData.value.telephone,
};
showLoader();
await http
.get(config.API.profileInforId(route.params.id.toString()))
.then(async (res: any) => {
const data: ResponseObject = res.data.result;
informaData.value.cardid = data.citizenId;
informaData.value.prefix = "";
informaData.value.prefixId = data.prefixId;
informaData.value.firstname = data.firstName;
informaData.value.lastname = data.lastName;
informaData.value.birthDate = new Date(data.birthDate);
informaData.value.genderId = data.genderId;
informaData.value.bloodId = data.bloodGroupId;
informaData.value.nationality = data.nationality;
informaData.value.ethnicity = data.race;
informaData.value.statusId = data.relationshipId;
informaData.value.religionId = data.religionId;
informaData.value.tel = data.telephoneNumber;
informaData.value.age = data.age;
informaData.value.employeeType = data.employeeType;
informaData.value.employeeClass = data.employeeClass;
informaData.value.profileType = data.profileType;
await calRetire(new Date(dateToISO(new Date(data.birthDate))));
if (data.profileType == "officer" && columnsHistory.value.length >= 15) {
columnsHistory.value.splice(13, 1);
columnsHistory.value.splice(12, 1);
}
.put(
config.API.placementInformationId(route.params.personalId.toString()),
body
)
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
.finally(async () => {
edit.value = false;
emit("update:statusEdit", false);
await props.fetch();
await changeBirth(informaData.value.dateOfBirth ?? new Date());
});
};
const editData = async () => {
// if (age.value == false) {
// modalError($q, "", "");
// return;
// }
// const body: any = {
// citizenId: informaData.value.cardid,
// prefixId: informaData.value.prefixId,
// firstName: informaData.value.firstname,
// lastName: informaData.value.lastname,
// genderId: informaData.value.genderId,
// nationality: informaData.value.nationality,
// race: informaData.value.ethnicity,
// religionId: informaData.value.religionId,
// birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
// bloodGroupId: informaData.value.bloodId,
// relationshipId: informaData.value.statusId,
// telephoneNumber: informaData.value.tel,
// createdAt: new Date(),
// age: null,
// employeeType: informaData.value.employeeType,
// employeeClass: informaData.value.employeeClass,
// profileType: informaData.value.profileType,
// createdFullName: "-",
// };
// showLoader();
// await http
// .put(config.API.profileInforId(route.params.id.toString()), body)
// .then((res) => {
// success($q, "");
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(async () => {
// edit.value = false;
// emit("update:statusEdit", false);
// await fetchData();
// await changeBirth(informaData.value.birthDate ?? new Date());
// });
};
const saveData = async () => {
if (myform.value != null) {
await myform.value.validate().then(async (success: boolean) => {
if (success) {
await editData();
} else {
}
});
}
@ -621,7 +334,6 @@ const getClass = (val: boolean) => {
:changeBtn="changeBtn"
:disable="statusEdit"
:cancel="onCancel"
:historyClick="clickHistory"
/>
<q-form ref="myform" class="col-12">
<div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
@ -634,7 +346,7 @@ const getClass = (val: boolean) => {
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.cardid"
v-model="informaData.idCard"
maxlength="13"
:rules="[
(val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
@ -702,7 +414,7 @@ const getClass = (val: boolean) => {
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<datepicker
v-model="informaData.birthDate"
v-model="informaData.dateOfBirth"
:locale="'th'"
autoApply
:enableTimePicker="false"
@ -726,7 +438,7 @@ const getClass = (val: boolean) => {
lazy-rules
:readonly="!edit"
:borderless="!edit"
:model-value="date2Thai(informaData.birthDate)"
:model-value="date2Thai(informaData.dateOfBirth)"
:rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
:label="`${'วัน/เดือน/ปี เกิด'}`"
>
@ -793,7 +505,7 @@ const getClass = (val: boolean) => {
:outlined="edit"
dense
lazy-rules
v-model="informaData.statusId"
v-model="informaData.relationshipId"
emit-value
map-options
option-label="name"
@ -818,7 +530,7 @@ const getClass = (val: boolean) => {
:outlined="edit"
dense
lazy-rules
v-model="informaData.bloodId"
v-model="informaData.bloodGroupId"
emit-value
map-options
option-label="name"
@ -855,7 +567,7 @@ const getClass = (val: boolean) => {
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.ethnicity"
v-model="informaData.race"
:rules="[(val:string) => !!val || `${'กรุณากรอก เชื้อชาติ'}`]"
:label="`${'เชื้อชาติ'}`"
/>
@ -885,7 +597,7 @@ const getClass = (val: boolean) => {
) "
/>
</div>
<!-- <div class="col-xs-6 col-sm-3 col-md-3">
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
hide-bottom-space
:outlined="edit"
@ -895,7 +607,7 @@ const getClass = (val: boolean) => {
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
v-model="informaData.tel"
v-model="informaData.telephone"
:rules="[
(val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
(val:string) => val.length >= 10 || `${'กรุณากรอกข้อมูลเบอร์โทรให้ครบ'}`,
@ -903,90 +615,8 @@ const getClass = (val: boolean) => {
:label="`${'เบอร์โทร'}`"
mask="##########"
/>
</div> -->
<div
class="col-xs-6 col-sm-4 col-md-4"
v-if="informaData.profileType == 'employee'"
>
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทการจ้าง'}`]"
:outlined="edit"
dense
lazy-rules
v-model="informaData.employeeType"
emit-value
map-options
option-label="name"
:options="Ops.employeeTypeOps"
option-value="id"
:label="`${'ประเภทการจ้าง'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
) "
/>
</div>
<div
class="col-xs-6 col-sm-2 col-md-2"
v-if="informaData.profileType == 'employee'"
>
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทลูกจ้าง'}`]"
:outlined="edit"
dense
lazy-rules
v-model="informaData.employeeClass"
emit-value
map-options
option-label="name"
:options="Ops.employeeClassOps"
option-value="id"
:label="`${'ประเภทลูกจ้าง'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
) "
/>
</div>
</div>
</q-form>
</q-card>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div
v-if="col.name == 'birthDate' || col.name == 'createdAt'"
class="table_ellipsis"
>
{{ date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
</template>

View file

@ -43,7 +43,6 @@ const notiNoEdit = () => {
const closeModalError = () => {
modalNoEdit.value = false;
};
</script>
<template>
<div class="row col-12 items-center">
@ -51,7 +50,7 @@ const closeModalError = () => {
<Information :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
</div>
<div class="col-12 q-px-md"><q-separator size="4px"/></div>
<div class="col-12 q-px-md"><q-separator size="4px" /></div>
<div>
<Address :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
@ -60,7 +59,7 @@ const closeModalError = () => {
</template>
<style lang="scss" scoped>
.horizontal-line {
background-color: #F4F4F4;
background-color: #f4f4f4;
height: 5px;
}
</style>