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

Merge branch 'develop' into work

Browse source
This commit is contained in:
Kittapath 2023-07-13 12:14:40 +07:00
commit dbd67bbd7e
19 changed files with 1496 additions and 1077 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/api/05_placement/api.placement.ts
View file

@ -1,5 +1,5 @@
import env from "../index"
const placement = `${env.API_URI}/Placement/placement`
import env from "../index";
const placement = `${env.API_PLACEMENT_URI}/Placement/placement`;
const orgTree = `${env.API_URI_ORG_TREE}`;
export default {
@ -15,4 +15,33 @@ export default {
placementPass: () => `${placement}/pass`,
placementDefermentInfo: (id: string) => `${placement}/pass/deferment/${id}`,
placementDisclaimInfo: (id: string) => `${placement}/pass/disclaim/${id}`,
};
//personal
placementPersonalId: (personalId: string) =>
`${placement}/personal/${personalId}`,
//personal
placementPropertyId: (personalId: string) =>
`${placement}/property/${personalId}`,
//information
placementInformationId: (personalId: string) =>
`${placement}/information/${personalId}`,
//address
placementAddressId: (personalId: string) =>
`${placement}/address/${personalId}`,
//family
placementFamilyId: (personalId: string) =>
`${placement}/family/${personalId}`,
//certificate
placementCertId: (personalId: string) =>
`${placement}/certificate/${personalId}`,
placementCertDetailId: (personalId: string, certificateId: string) =>
`${placement}/certificate/${personalId}/${certificateId}`,
//education
placementEducationId: (id: string) => `${placement}/education/${id}`,
};

5
src/api/index.ts
View file

@ -20,6 +20,7 @@ const config = ref<any>({
API_CANDIDATE_URI: "https://bma-ehr.frappet.synology.me/api/v1",
// API_REPORT_URI: "https://localhost:7187/api/v1",
API_REPORT_URI: "https://bma-ehr.frappet.synology.me/api/v1",
API_PLACEMENT_URI: "https://localhost:7260/api",
API_URI_ORG_TREE:
"https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230712_172702.json",
MEET_URI: "meet.frappet.com",
@ -59,6 +60,9 @@ const MEET_URI = ref<string>(config.value[env.value].MEET_URI);
const API_URI_PROFILE_SERVICE = ref<string>(
config.value[env.value].API_URI_PROFILE_SERVICE
);
const API_PLACEMENT_URI = ref<string>(
config.value[env.value].API_PLACEMENT_URI
);
const API_URI_ORG_TREE = ref<string>(config.value[env.value].API_URI_ORG_TREE);
export default {
@ -70,6 +74,7 @@ export default {
API_URI_ORG_SERVICE: API_URI_ORG_SERVICE.value,
API_URI_ORG_EMPLOYEE_SERVICE: API_URI_ORG_EMPLOYEE_SERVICE.value,
API_URI_PROFILE_SERVICE: API_URI_PROFILE_SERVICE.value,
API_PLACEMENT_URI: API_PLACEMENT_URI.value,
API_URI_ORG_TREE: API_URI_ORG_TREE.value,
MEET_URI: MEET_URI.value,
};

7
src/modules/04_registry/components/Information/layout.vue
View file

@ -1,6 +1,11 @@
<template>
<Information :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
<Government :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
<Government
:notiNoEdit="notiNoEdit"
v-model:statusEdit="statusEdit"
profileType="profileType"
employeeClass="employeeClass"
/>
<Address :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
<Family :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
<!-- <Certicate v-model:statusEdit="statusEdit" :profileType="profileType" /> -->

41
src/modules/05_placement/components/Main.vue
View file

@ -125,12 +125,30 @@ onMounted(async () => {
});
const fetchPlacementData = async (val: number) => {
showLoader();
rows.value = [];
http
.get(config.API.MainDetail(val))
.then((res) => {
dataPlacement.value = res.data.result;
DataStore.DataMainOrig = dataPlacement.value;
rows.value = DataStore.DataMainOrig;
console.log(DataStore.DataMainOrig);
// rows.value = DataStore.DataMainOrig;
DataStore.DataMainOrig.map((e: any) => {
rows.value.push({
id: e.id,
examRound: e.examRound,
examOrder: e.examOrder,
examTypeName: e.examTypeName,
examTypeValue: e.examTypeValue,
accountEndDate: date2Thai(e.accountEndDate),
accountExpirationDate: date2Thai(e.accountExpirationDate),
accountStartDate: date2Thai(e.accountStartDate),
fiscalYear: e.fiscalYear,
numberOfCandidates: e.numberOfCandidates,
});
});
examTypeFilter();
examTimeFilter();
expiredAccountFilter();
@ -218,13 +236,28 @@ const examTypeFilter = () => {
};
//--------------|ฟิลเตอร์|--------------------------------------//
const searchFilterTable = async () => {
rows.value = [];
if (examType.value !== undefined && examType.value !== null) {
await DataStore.DataUpdateMain(
examTime.value,
examType.value,
expiredAccount.value
);
rows.value = DataStore.DataMainUpdate;
// rows.value = DataStore.DataMainUpdate;
DataStore.DataMainUpdate.map((e: any) => {
rows.value.push({
id: e.id,
examRound: e.examRound,
examOrder: e.examOrder,
examTypeName: e.examTypeName,
examTypeValue: e.examTypeValue,
accountEndDate: date2Thai(e.accountEndDate),
accountExpirationDate: date2Thai(e.accountExpirationDate),
accountStartDate: date2Thai(e.accountStartDate),
fiscalYear: e.fiscalYear,
numberOfCandidates: e.numberOfCandidates,
});
});
}
};
@ -416,10 +449,10 @@ const paginationLabel = (start: number, end: number, total: number) => {
{{ props.row.examTypeName }}
</q-td>
<q-td key="accountStartDate" :props="props">
{{ date2Thai(props.row.accountStartDate) }}
{{ props.row.accountStartDate }}
</q-td>
<q-td key="accountExpirationDate" :props="props">
{{ date2Thai(props.row.accountExpirationDate) }}
{{ props.row.accountExpirationDate }}
</q-td>
</q-tr>
</template>

10
src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
View file

@ -616,7 +616,7 @@ const fiscalYearFilter = async () => {
};
const OrderType = ref<string>("");
const OrderTypeOption = reactive<DataOption[]>([{ id: "", name: "ทั้งหมด" }]);
const OrderTypeOption = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
const addedOrderTypeValues: string[] = [];
const OrderTypeFilter = async () => {
// API
@ -640,7 +640,8 @@ const OrderTypeFilter = async () => {
// }
if (!addedOrderTypeValues.includes(OrderTypeValue)) {
OrderTypeOption.push({
id: OrderTypeValue,
// id: OrderTypeValue ?? 0,
id: OrderTypeOption.length,
name: OrderTypeValue,
});
addedOrderTypeValues.push(OrderTypeValue);
@ -658,7 +659,7 @@ const OrderStatus = ref<string>("");
const OrderStatusText = ref<FormOrderPlacementMainData[]>(
DataStore.DataMainOrigOrder
);
const OrderStatusOption = reactive<DataOption[]>([{ id: "", name: "ทั้งหมด" }]);
const OrderStatusOption = reactive<DataOption[]>([{ id: 1, name: "ทั้งหมด" }]);
const addedOrderStatusValues: string[] = [];
const OrderStatusFilter = async () => {
// API
@ -686,7 +687,8 @@ const OrderStatusFilter = async () => {
if (!addedOrderStatusValues.includes(OrderStatusValue)) {
OrderStatusOption.push({
id: OrderStatusValue,
// id: OrderStatusValue,
id: OrderStatusOption.length,
name: OrderStatusValue,
});
addedOrderStatusValues.push(OrderStatusValue);

12
src/modules/05_placement/components/OrderPlacement/step/step01.vue
View file

@ -449,14 +449,14 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
case "typeOrderOption":
update(() => {
typeOrderOption.value = typeOrderOptionFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;
case "byOrderOption":
update(() => {
byOrderOption.value = byOrderOptionFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;
@ -464,7 +464,7 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
case "registerOption":
update(() => {
registerOption.value = registerOptionFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;
@ -472,7 +472,7 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
case "announceOption":
update(() => {
announceOption.value = announceOptionFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;
@ -480,14 +480,14 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
case "positionOption":
update(() => {
positionOption.value = positionOptionFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;
case "testOption":
update(() => {
testOption.value = testOptionFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;

235
src/modules/05_placement/components/OrderPlacement/step/step04.vue
View file

@ -22,11 +22,15 @@
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
<q-item-section avatar
><q-icon color="red" name="mdi-file-pdf"
/></q-item-section>
<q-item-section>ไฟล์ .PDF</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
<q-item-section avatar
><q-icon color="blue" name="mdi-file-word"
/></q-item-section>
<q-item-section>ไฟล์ .docx</q-item-section>
</q-item>
</q-list>
@ -47,82 +51,84 @@
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
<q-item-section avatar
><q-icon color="red" name="mdi-file-pdf"
/></q-item-section>
<q-item-section>ไฟล์ .PDF</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
<q-item-section avatar
><q-icon color="green-7" name="mdi-file-excel"
/></q-item-section>
<q-item-section>ไฟล์ .xls</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
<q-space />
<q-btn
class="text-dark"
flat
dense
icon="mdi-fullscreen"
color="add"
@click="dialog = true"
/>
</div>
<q-separator style="margin-top: -1px; z-index: 1;" />
<q-separator style="margin-top: -1px; z-index: 1" />
<q-card bordered class="card-pdf q-ma-md q-pa-md">
<div
class="justify-between items-center align-center q-pb-sm row"
<div class="justify-between items-center align-center q-pb-sm row">
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-icon name="mdi-chevron-left" />
</q-btn>
<q-icon name="mdi-chevron-left" />
</q-btn>
<span class="body-2 grey--text">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<span class="body-2 grey--text">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
<div class="pdfWidth">
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
</div>
<div
class="justify-between items-center align-center q-pt-sm row"
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-icon name="mdi-chevron-left" />
</q-btn>
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
<div class="pdfWidth">
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
</div>
<div class="justify-between items-center align-center q-pt-sm row">
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-icon name="mdi-chevron-left" />
</q-btn>
<span class="body-2 grey--text">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<span class="body-2 grey--text">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
</q-card>
<!-- <div class="card-pdf q-ma-md q-pa-md" v-if="tab == 'main'">
<pdf-viewer v-model:PDFV="vuePDFRef" />
</div> -->
<!-- <div class="card-pdf q-ma-md q-pa-md" v-else>
<pdf-viewer v-model:PDFV="vuePDFRef" />
</div> -->
<!-- <pdf-viewer /> -->
</template>
<template v-slot:separator>
@ -275,6 +281,21 @@
</div>
</div>
</fieldset>
<div class="flex justify-around">
<q-btn
unelevated
label="ออกคำสั่ง"
:color="validateForm() ? 'public' : 'grey'"
:disable="!validateForm()"
/>
<q-btn
class="text-dark"
unelevated
label="ส่งไปลงนาม"
color="grey"
disable
/>
</div>
</div>
</q-form>
</template>
@ -302,9 +323,97 @@
</q-btn>
<!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
<q-tooltip>ต่อไป</q-tooltip>
</q-btn> -->
<q-tooltip>ต่อไป</q-tooltip>
</q-btn> -->
</div>
<q-dialog
v-model="dialog"
persistent
:maximized="true"
transition-show="slide-up"
transition-hide="slide-down"
>
<q-card class="bg-white text-white">
<!-- <q-bar>
<q-space />
<q-btn dense flat icon="close" v-close-popup>
<q-tooltip>ปิดหน้าต่าง</q-tooltip>
</q-btn>
</q-bar> -->
<div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
<q-btn
icon="close"
unelevated
round
dense
style="color: #ff8080; background-color: #ffdede"
size="12px"
v-close-popup
/>
</div>
<q-card-section bordered class="card-pdf q-ma-md q-pa-md">
<div class="justify-between items-center align-center q-pb-sm row">
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-icon name="mdi-chevron-left" />
</q-btn>
<span class="body-2 grey--text text-black">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
<div class="pdfWidth">
<VuePDF
ref="vuePDFRef"
:pdf="pdfSrc"
:page="page"
fit-parent
:scale="0.1"
/>
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
</div>
<div class="justify-between items-center align-center q-pt-sm row">
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-icon name="mdi-chevron-left" />
</q-btn>
<span class="body-2 grey--text text-black">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
</q-card-section>
</q-card>
</q-dialog>
</div>
</template>
<script setup lang="ts">
@ -317,6 +426,8 @@ import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const dialog = ref<boolean>(false);
// onUnmounted(() => {
// window.removeEventListener("resize", (e: any) => {
// myEventHandler(e);

343
src/modules/05_placement/components/PersonalDetail/Detail.vue
View file

@ -3,89 +3,330 @@
import { onMounted, reactive, ref } from "vue";
import { useDataStore } from "@/stores/data";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
import Informationvue from "@/modules/05_placement/components/PersonalDetail/Information/layout.vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import Informationvue from "@/modules/05_placement/components/PersonalDetail/Information/Information.vue";
import Addressvue from "@/modules/05_placement/components/PersonalDetail/Information/Address.vue";
import EducationVue from "@/modules/05_placement/components/PersonalDetail/Education.vue";
import Certicate from "@/modules/05_placement/components/PersonalDetail/Information/Certicate.vue";
import ExamResult from "@/modules/05_placement/components/PersonalDetail/ExamResult.vue";
import Qualification from "@/modules/05_placement/components/PersonalDetail/Qualification.vue";
import Family from "@/modules/05_placement/components/PersonalDetail/Information/Family.vue";
import Familyvue from "@/modules/05_placement/components/PersonalDetail/Information/Family.vue";
import type {
Property,
PointExam,
Education,
Family,
Address,
} from "@/modules/05_placement/interface/index/Main";
import type { Information } from "@/modules/05_placement/components/PersonalDetail/profileType";
const $q = useQuasar(); // show dialog
const router = useRouter();
const store = useDataStore();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { showLoader, hideLoader, messageError } = mixin;
const { changeTab } = store;
const statusEdit = ref<boolean>(false);
const profileType = ref<string>("");
const route = useRoute();
const examId = ref<string>(route.params.personalId.toString());
const examId = ref<string>(
route.params.personalId ? route.params.personalId.toString() : ""
);
const FormData = reactive<any>({
fullName: examId,
const ExamDataDefualt: PointExam = {
pointA: 0,
pointB: 0,
pointC: 0,
pointTotalA: 0,
pointTotalB: 0,
pointTotalC: 0,
point: 0,
pointTotal: 0,
examNumber: 0,
examRound: 0,
pass: "",
};
const InformationDataDefualt: Information = {
idCard: "",
prefix: "",
prefixId: "",
fullName: "",
firstname: "",
lastname: "",
nationality: "",
race: "",
dateOfBirth: new Date(),
age: "",
telephone: "",
gender: "",
genderId: "",
relationship: "",
relationshipId: "",
bloodGroup: "",
bloodGroupId: "",
religion: "",
religionId: "",
};
const FamilyDataDefualt: Family = {
couple: false,
marryPrefix: "",
marryPrefixId: "",
marryFirstName: "",
marryLastName: "",
marryOccupation: "",
fatherPrefix: "",
fatherPrefixId: "",
fatherFirstName: "",
fatherLastName: "",
fatherOccupation: "",
motherPrefix: "",
motherPrefixId: "",
motherFirstName: "",
motherLastName: "",
motherOccupation: "",
};
const AddressDataDefualt: Address = {
registSubDistrict: "",
registSubDistrictId: "",
registZipCode: "",
registDistrict: "",
registDistrictId: "",
registProvince: "",
registProvinceId: "",
currentSubDistrict: "",
currentSubDistrictId: "",
currentZipCode: "",
currentDistrict: "",
currentDistrictId: "",
currentProvince: "",
currentProvinceId: "",
registSame: false,
};
const personalData = ref({
id: "",
fullName: "",
});
const QualificationData = ref<Property[]>([]);
const ExamData = ref<PointExam>(ExamDataDefualt);
const InformationData = ref<Information>(InformationDataDefualt);
const EducationData = ref<Education[]>([]);
const FamilyData = ref<Family>(FamilyDataDefualt);
const AddressData = ref<Address>(AddressDataDefualt);
onMounted(async () => {
// await checkProfileData();
// await fetchData();
await changeTab("information");
// await checkProfileData();
await fetchData();
await changeTab("information");
});
const fetchData = async () => {
showLoader();
await http
.get(config.API.placementPersonalId(examId.value))
.then((res: any) => {
const data = res.data.result;
// data.value = data;
console.log(data);
personalData.value.fullName = data.fullName;
personalData.value.id = data.personalId;
InformationData.value.idCard = data.idCard;
InformationData.value.fullName = data.fullName;
InformationData.value.firstname = data.firstname;
InformationData.value.lastname = data.lastname;
InformationData.value.nationality = data.nationality;
InformationData.value.race = data.race;
InformationData.value.genderId = data.genderId;
InformationData.value.prefixId = data.prefixId;
InformationData.value.relationshipId = data.relationshipId;
InformationData.value.religionId = data.religionId;
InformationData.value.bloodGroupId = data.bloodGroupId;
InformationData.value.dateOfBirth = new Date(data.dateOfBirth);
InformationData.value.age = data.age;
InformationData.value.telephone = data.telephone;
AddressData.value.registSame = data.registSame ?? false;
AddressData.value.registSubDistrict = data.registSubDistrict ?? "";
AddressData.value.registSubDistrictId = data.registSubDistrictId ?? "";
AddressData.value.registZipCode = data.registZipCode ?? "";
AddressData.value.registDistrict = data.registDistrict ?? "";
AddressData.value.registDistrictId = data.registDistrictId ?? "";
AddressData.value.registProvince = data.registProvince ?? "";
AddressData.value.registProvinceId = data.registProvinceId ?? "";
AddressData.value.currentSubDistrict = data.currentSubDistrict ?? "";
AddressData.value.currentSubDistrictId = data.currentSubDistrictId ?? "";
AddressData.value.currentZipCode = data.currentZipCode ?? "";
AddressData.value.currentDistrict = data.currentDistrict ?? "";
AddressData.value.currentDistrictId = data.currentDistrictId ?? "";
AddressData.value.currentProvince = data.currentProvince ?? "";
AddressData.value.currentProvinceId = data.currentProvinceId ?? "";
FamilyData.value.couple = data.couple ?? false;
FamilyData.value.marryPrefix = data.marryPrefix ?? "";
FamilyData.value.marryPrefixId = data.marryPrefixId ?? "";
FamilyData.value.marryFirstName = data.marryFirstName ?? "";
FamilyData.value.marryLastName = data.marryLastName ?? "";
FamilyData.value.marryOccupation = data.marryOccupation ?? "";
FamilyData.value.fatherPrefix = data.fatherPrefix ?? "";
FamilyData.value.fatherPrefixId = data.fatherPrefixId ?? "";
FamilyData.value.fatherFirstName = data.fatherFirstName ?? "";
FamilyData.value.fatherLastName = data.fatherLastName ?? "";
FamilyData.value.fatherOccupation = data.fatherOccupation ?? "";
FamilyData.value.motherPrefix = data.motherPrefix ?? "";
FamilyData.value.motherPrefixId = data.motherPrefixId ?? "";
FamilyData.value.motherFirstName = data.motherFirstName ?? "";
FamilyData.value.motherLastName = data.motherLastName ?? "";
FamilyData.value.motherOccupation = data.motherOccupation ?? "";
ExamData.value.pointA = data.pointA;
ExamData.value.pointB = data.pointB;
ExamData.value.pointC = data.pointC;
ExamData.value.point = data.point;
ExamData.value.pointTotalA = data.pointTotalA;
ExamData.value.pointTotalB = data.pointTotalB;
ExamData.value.pointTotalC = data.pointTotalC;
ExamData.value.pointTotal = data.pointTotal;
ExamData.value.examNumber = data.examNumber;
ExamData.value.examRound = data.examRound;
ExamData.value.pass = data.pass;
QualificationData.value = data.isProperty;
let listRow: Education[] = [];
data.education.map((row: any) => {
listRow.push({
id: row.id ?? "",
educationLevel: row.educationLevel ?? "",
institute: row.institute ?? "",
degree: row.degree ?? "",
field: row.field ?? "",
gpa: row.gpa ?? "",
country: row.country ?? "",
duration: row.duration ?? "",
other: row.other ?? "",
fundName: row.fundName ?? "",
durationYear: row.durationYear ?? 0,
finishDate: row.finishDate ?? new Date(),
isDate: row.isDate ?? "",
startDate: row.startDate ?? 0,
endDate: row.endDate ?? 0,
positionPath: row.positionPath ?? "",
isEducation: row.isEducation ?? "",
});
});
EducationData.value = listRow;
})
.catch((e: any) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
</script>
<template>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row q-pb-sm">
<div class="header-text">
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm"
@click="router.go(-1)" />
รายละเอียดของ {{ FormData.fullName }}
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row q-pb-sm">
<div class="header-text">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.go(-1)"
/>
รายละเอียดของ {{ personalData.fullName }}
</div>
<div class="q-pb-lg">
<q-card class="row q-pb-lg">
<div id="information" name="1" class="col-12 q-pa-sm">
<Informationvue v-model:statusEdit="statusEdit" :profileType="profileType" />
</div>
</div>
<div class="q-pb-lg">
<q-card class="row q-pb-lg">
<div id="information" name="1" class="col-12 q-pa-sm">
<Informationvue
v-model:statusEdit="statusEdit"
v-model:data="InformationData"
:fetch="fetchData"
/>
<div class="col-12 q-px-md"><q-separator size="4px" /></div>
<Addressvue
v-model:statusEdit="statusEdit"
v-model:data="AddressData"
:fetch="fetchData"
/>
</div>
<div id="family" name="10" class="col-12 q-pa-sm" >
<div class="col-12 q-px-md"><q-separator size="4px"/></div>
<Family v-model:statusEdit="statusEdit" />
</div>
<div id="family" name="10" class="col-12 q-pa-sm">
<div class="col-12 q-px-md"><q-separator size="4px" /></div>
<Familyvue
v-model:statusEdit="statusEdit"
v-model:data="FamilyData"
:fetch="fetchData"
/>
</div>
<div id="certicate" name="2" class="col-12 q-pa-sm" >
<div class="col-12 q-px-md"><q-separator size="4px"/></div>
<Certicate v-model:statusEdit="statusEdit" :profileType="profileType" />
</div>
<div id="certicate" name="2" class="col-12 q-pa-sm">
<div class="col-12 q-px-md"><q-separator size="4px" /></div>
<Certicate
v-model:statusEdit="statusEdit"
:profileType="profileType"
v-model:data="InformationData"
:fetch="fetchData"
/>
</div>
<div id="education" name="3" class="col-12 q-pa-sm" >
<div class="col-12 q-px-md"><q-separator size="4px"/></div>
<EducationVue v-model:statusEdit="statusEdit" />
</div>
<div id="education" name="3" class="col-12 q-pa-sm">
<div class="col-12 q-px-md"><q-separator size="4px" /></div>
<EducationVue
v-model:statusEdit="statusEdit"
v-model:data="EducationData"
:fetch="fetchData"
/>
</div>
<div id="examresult" name="4" class="col-12 q-pa-sm" >
<div class="col-12 q-px-md"><q-separator size="4px"/></div>
<ExamResult />
</div>
<div id="examresult" name="4" class="col-12 q-pa-sm">
<div class="col-12 q-px-md"><q-separator size="4px" /></div>
<ExamResult v-model:data="ExamData" />
</div>
<div id="qualification" name="5" class="col-12 q-pa-sm" >
<div class="col-12 q-px-md"><q-separator size="4px"/></div>
<Qualification v-model:statusEdit="statusEdit" />
</div>
</q-card>
</div>
<div id="qualification" name="5" class="col-12 q-pa-sm">
<div class="col-12 q-px-md"><q-separator size="4px" /></div>
<Qualification
v-model:statusEdit="statusEdit"
v-model:data="QualificationData"
:fetch="fetchData"
/>
</div>
</q-card>
</div>
</template>
<style lang="scss" scoped>
.header-text {
font-size: 24px;
font-weight: 700;
line-height: 32px;
letter-spacing: 0.0025em;
color: #35373C;
font-size: 24px;
font-weight: 700;
line-height: 32px;
letter-spacing: 0.0025em;
color: #35373c;
}
.information:target {
padding-top: 84px;
padding-top: 84px;
}
.horizontal-line {
background-color: #F4F4F4;
height: 5px;
background-color: #f4f4f4;
height: 5px;
}
</style>
</style>

111
src/modules/05_placement/components/PersonalDetail/Education.vue
View file

@ -13,18 +13,31 @@ import type {
DataProps,
} from "@/modules/05_placement/interface/request/Education";
import type { ResponseObject } from "@/modules/05_placement/interface/response/Education";
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
import HistoryTable from "@/components/TableHistory.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type { EduOps } from "@/modules/05_placement/interface/index/Main";
import type {
EduOps,
Education,
DataOption,
optionData,
} from "@/modules/05_placement/interface/index/Main";
import type { QTableProps } from "quasar";
import type { PropType } from "vue";
const props = defineProps({
statusEdit: {
type: Boolean,
required: true,
},
fetch: {
type: Function,
default: () => console.log("not function"),
},
data: {
type: Array as PropType<Education[]>,
default: [],
},
});
const $q = useQuasar();
@ -74,9 +87,9 @@ const tittleHistory = ref<string>("ประวัติแก้ไขประ
const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
const profileId = ref<string>('');
const profileId = ref<string>("");
// const profileId = ref<string>(route.params.id.toString());
const rows = ref<RequestItemsObject[]>([]);
const rows = ref<Education[]>(props.data);
const filter = ref<string>(""); //search data table
const visibleColumns = ref<String[]>([]);
profileData.education.columns.length == 0
@ -459,8 +472,8 @@ watch(visibleColumns, async (count: String[], prevCount: String[]) => {
});
onMounted(async () => {
// await fetchLevel();
// await fetchPositionPath();
await fetchLevel();
await fetchPositionPath();
// await fetchData();
});
@ -470,8 +483,8 @@ const fetchLevel = async () => {
.get(config.API.educationLevel)
.then((res) => {
const data = res.data.result;
let option: DataOption[] = [];
data.map((r: DataOption) => {
let option: optionData[] = [];
data.map((r: optionData) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
Ops.value.levelOptions = option;
@ -491,8 +504,8 @@ const fetchPositionPath = async () => {
.get(config.API.positionPath)
.then((res) => {
const data = res.data.result;
let option: DataOption[] = [];
data.map((r: DataOption) => {
let option: optionData[] = [];
data.map((r: optionData) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
Ops.value.positionPathOptions = option;
@ -511,7 +524,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
case "levelOptions":
update(() => {
Ops.value.levelOptions = OpsFilter.value.levelOptions.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: optionData) => v.name.indexOf(val) > -1
);
});
break;
@ -519,7 +532,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
update(() => {
Ops.value.positionPathOptions =
OpsFilter.value.positionPathOptions.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: optionData) => v.name.indexOf(val) > -1
);
});
break;
@ -536,27 +549,27 @@ const fetchData = async () => {
let data = res.data.result;
rows.value = [];
data.map((e: ResponseObject) => {
rows.value.push({
id: e.id,
level: e.educationLevel,
levelId: e.educationLevelId,
positionPath: e.positionPath,
positionPathId: e.positionPathId,
institute: e.institute,
degree: e.degree,
field: e.field,
gpa: e.gpa,
country: e.country,
duration: e.duration,
durationYear: e.durationYear,
other: e.other,
fundName: e.fundName,
finishDate: new Date(e.finishDate),
startDate: new Date(e.startDate).getFullYear(),
endDate: new Date(e.endDate).getFullYear(),
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
// rows.value.push({
// id: e.id,
// level: e.educationLevel,
// levelId: e.educationLevelId,
// positionPath: e.positionPath,
// positionPathId: e.positionPathId,
// institute: e.institute,
// degree: e.degree,
// field: e.field,
// gpa: e.gpa,
// country: e.country,
// duration: e.duration,
// durationYear: e.durationYear,
// other: e.other,
// fundName: e.fundName,
// finishDate: new Date(e.finishDate),
// startDate: new Date(e.startDate).getFullYear(),
// endDate: new Date(e.endDate).getFullYear(),
// createdFullName: e.createdFullName,
// createdAt: new Date(e.createdAt),
// });
});
})
.catch((e) => {
@ -591,22 +604,22 @@ const clickNext = async () => {
* กดดูข้อมูลต่อไป
*/
const getData = () => {
const row = rows.value[rowIndex.value];
levelId.value = row.levelId;
positionPathId.value = row.positionPathId;
institute.value = row.institute;
degree.value = row.degree;
field.value = row.field;
gpa.value = row.gpa;
country.value = row.country;
duration.value = row.duration;
durationYear.value = row.durationYear;
other.value = row.other;
fundName.value = row.fundName;
finishDate.value = row.finishDate;
startDate.value = row.startDate;
endDate.value = row.endDate;
id.value = row.id;
// const row = rows.value[rowIndex.value];
// levelId.value = row.levelId;
// positionPathId.value = row.positionPathId;
// institute.value = row.institute;
// degree.value = row.degree;
// field.value = row.field;
// gpa.value = row.gpa;
// country.value = row.country;
// duration.value = row.duration;
// durationYear.value = row.durationYear;
// other.value = row.other;
// fundName.value = row.fundName;
// finishDate.value = row.finishDate;
// startDate.value = row.startDate;
// endDate.value = row.endDate;
// id.value = row.id;
};
/**

178
src/modules/05_placement/components/PersonalDetail/ExamResult.vue
View file

@ -1,101 +1,137 @@
<script setup lang="ts">
import type { PropType } from "vue";
import type { PointExam } from "@/modules/05_placement/interface/index/Main";
const props = defineProps({
data: {
type: Object as PropType<PointExam>,
default: {
pointA: 0,
pointB: 0,
pointC: 0,
pointTotalA: 0,
pointTotalB: 0,
pointTotalC: 0,
point: 0,
pointTotal: 0,
examNumber: 0,
examRound: 0,
pass: "",
},
},
});
</script>
<template>
<div class="row col-12 q-px-lg q-pt-lg q-pb-sm no-border">
<q-icon name="mdi-briefcase-edit" size="1.5em" color="grey-5" class="q-pr-md" />
<span class="text-bold text-subtitle2">ผลการสอบ</span>
</div>
<div class="row q-px-md">
<div class="col-7">
<q-card class="card-exam">
<div class="row q-px-md q-py-sm">
<div class="col q-pa-xs header-sub-text-exam">
<div class="q-pb-xs"> ประเภท </div>
<div class="q-pb-xs"> ภาค ก </div>
<div class="q-pb-xs"> ภาค ข </div>
<div class="q-pb-xs"> ภาค ค </div>
<div> รวมทั้งหมด </div>
</div>
<div class="col q-pa-xs">
<div class="header-sub-text-exam-2 q-pb-xs">คะแนนเต็ม</div>
<div class="sub-text-exam q-pb-xs">200</div>
<div class="sub-text-exam q-pb-xs">200</div>
<div class="sub-text-exam q-pb-xs">100</div>
<div class="sub-text-exam ">500</div>
</div>
<div class="col q-pa-xs header-sub-text-exam-2">
<div class="header-sub-text-exam-2 q-pb-xs">คะแนนที่ได้</div>
<div class="sub-text-exam q-pb-xs">133</div>
<div class="sub-text-exam q-pb-xs">149</div>
<div class="sub-text-exam q-pb-xs">100</div>
<div class="sub-text-exam q-pb-xs">382</div>
</div>
</div>
</q-card>
</div>
<div class="col q-pl-xl">
<q-card class="q-pt-xs">
<div class="header-text-right q-px-xs">ผลการสอบ</div>
<div class="sub-text-right q-px-xs q-pb-sm">ผ่าน</div>
<div class="header-text-right q-px-xs">ลำดับที่สอบได้</div>
<div class="sub-text-right q-px-xs q-pb-sm">3</div>
<div class="header-text-right q-px-xs">จำนวนครั้งที่สมัครสอบ</div>
<div class="sub-text-right q-px-xs q-pb-sm">5</div>
</q-card>
<div class="row col-12 q-px-lg q-pt-lg q-pb-sm no-border">
<q-icon
name="mdi-briefcase-edit"
size="1.5em"
color="grey-5"
class="q-pr-md"
/>
<span class="text-bold text-subtitle2">ผลการสอบ</span>
</div>
<div class="row q-px-md">
<div class="col-7">
<q-card class="card-exam">
<div class="row q-px-md q-py-sm">
<div class="col q-pa-xs header-sub-text-exam">
<div class="q-pb-xs">ประเภท</div>
<div class="q-pb-xs">ภาค ก</div>
<div class="q-pb-xs">ภาค ข</div>
<div class="q-pb-xs">ภาค ค</div>
<div>รวมทั้งหมด</div>
</div>
<div class="col q-pa-xs">
<div class="header-sub-text-exam-2 q-pb-xs">คะแนนเต็ม</div>
<div class="sub-text-exam q-pb-xs">
{{ props.data.pointTotalA }}
</div>
<div class="sub-text-exam q-pb-xs">
{{ props.data.pointTotalB }}
</div>
<div class="sub-text-exam q-pb-xs">
{{ props.data.pointTotalC }}
</div>
<div class="sub-text-exam">{{ props.data.pointTotal }}</div>
</div>
<div class="col q-pa-xs header-sub-text-exam-2">
<div class="header-sub-text-exam-2 q-pb-xs">คะแนนที่ได้</div>
<div class="sub-text-exam q-pb-xs">{{ props.data.pointA }}</div>
<div class="sub-text-exam q-pb-xs">{{ props.data.pointB }}</div>
<div class="sub-text-exam q-pb-xs">{{ props.data.pointC }}</div>
<div class="sub-text-exam q-pb-xs">{{ props.data.point }}</div>
</div>
</div>
</q-card>
</div>
<div class="col q-pl-xl">
<q-card class="q-pt-xs">
<div class="header-text-right q-px-xs">ผลการสอบ</div>
<div class="sub-text-right q-px-xs q-pb-sm">{{ props.data.pass }}</div>
<div class="header-text-right q-px-xs">ลำดับที่สอบได้</div>
<div class="sub-text-right q-px-xs q-pb-sm">
{{ props.data.examNumber }}
</div>
<div class="header-text-right q-px-xs">จำนวนครั้งที่สมัครสอบ</div>
<div class="sub-text-right q-px-xs q-pb-sm">
{{ props.data.examRound }}
</div>
</q-card>
</div>
</div>
</template>
<style lang="scss" scoped>
.header-text {
font-size: 18px;
font-weight: 600;
color: #4F4F4F;
font-size: 18px;
font-weight: 600;
color: #4f4f4f;
}
.header-text-right {
font-size: 14px;
font-weight: 400;
line-height: 150%;
color: #818181;
font-size: 14px;
font-weight: 400;
line-height: 150%;
color: #818181;
}
.sub-text-right {
font-size: 14px;
font-weight: 600;
line-height: 150%;
color: #000000;
font-size: 14px;
font-weight: 600;
line-height: 150%;
color: #000000;
}
.sub-text {
font-weight: 400;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.0025em;
color: #35373C;
font-weight: 400;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.0025em;
color: #35373c;
}
.card-exam {
border-radius: 5px;
background: #FAFAFA;
border-radius: 5px;
background: #fafafa;
}
.header-sub-text-exam {
font-size: 15px;
font-weight: 500;
line-height: 150%;
color: #818181;
font-size: 15px;
font-weight: 500;
line-height: 150%;
color: #818181;
}
.header-sub-text-exam-2 {
font-size: 15px;
font-weight: 500;
line-height: 150%;
color: #00AA86;
font-size: 15px;
font-weight: 500;
line-height: 150%;
color: #00aa86;
}
.sub-text-exam {
font-size: 15px;
font-weight: 500;
color: #000000;
font-size: 15px;
font-weight: 500;
color: #000000;
}
</style>
</style>

48
src/modules/05_placement/components/PersonalDetail/Information/Address.vue
View file

@ -8,7 +8,6 @@ import http from "@/plugins/http";
import config from "@/app.config";
import type {
Address,
DataOption,
zipCodeOption,
} from "@/modules/05_placement/components/PersonalDetail/profileType";
import { defaultAddress } from "@/modules/05_placement/components/PersonalDetail/profileType";
@ -17,8 +16,15 @@ import type { RequestItemsHistoryObject } from "@/modules//05_placement/interfac
import type { ResponseObject } from "@/modules//05_placement/interface/response/Address";
import HistoryTable from "@/components/TableHistory.vue";
import { useRoute } from "vue-router";
import type { AddressOps } from "@/modules//05_placement/interface/index/Main";
import { AddressDataDefualt } from "@/modules//05_placement/interface/index/Main";
import type {
AddressOps,
Address as AddressType,
optionData,
} from "@/modules//05_placement/interface/index/Main";
import type { QTableProps } from "quasar";
import type { PropType } from "vue";
const props = defineProps({
statusEdit: {
@ -29,6 +35,14 @@ const props = defineProps({
type: Function,
default: () => console.log("not function"),
},
fetch: {
type: Function,
default: () => console.log("not function"),
},
data: {
type: Object as PropType<AddressType>,
default: AddressDataDefualt,
},
});
const emit = defineEmits(["update:statusEdit"]);
@ -232,35 +246,35 @@ const filterSelector = (val: any, update: Function, refData: string) => {
case "provinceOps":
update(() => {
Ops.value.provinceOps = OpsFilter.value.provinceOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: optionData) => v.name.indexOf(val) > -1
);
});
break;
case "districtOps":
update(() => {
Ops.value.districtOps = OpsFilter.value.districtOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: optionData) => v.name.indexOf(val) > -1
);
});
break;
case "districtCOps":
update(() => {
Ops.value.districtCOps = OpsFilter.value.districtCOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: optionData) => v.name.indexOf(val) > -1
);
});
break;
case "subdistrictOps":
update(() => {
Ops.value.subdistrictOps = OpsFilter.value.subdistrictOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: optionData) => v.name.indexOf(val) > -1
);
});
break;
case "subdistrictCOps":
update(() => {
Ops.value.subdistrictCOps = OpsFilter.value.subdistrictCOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: optionData) => v.name.indexOf(val) > -1
);
});
break;
@ -450,7 +464,7 @@ const fetchProvince = async () => {
.get(config.API.province)
.then((res) => {
const data = res.data.result;
let option: DataOption[] = [];
let option: optionData[] = [];
data.map((r: any) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
@ -472,17 +486,17 @@ const fetchDistrict = async (id: string | null, position: string) => {
.get(config.API.listDistrict(id))
.then((res) => {
const data = res.data.result;
let option: DataOption[] = [];
let option: optionData[] = [];
data.map((r: any) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
if (position == "1") {
Ops.value.districtOps = option;
OpsFilter.value.districtOps = option;
} else {
Ops.value.districtCOps = option;
OpsFilter.value.districtCOps = option;
}
// if (position == "1") {
// Ops.value.districtOps = option;
// OpsFilter.value.districtOps = option;
// } else {
// Ops.value.districtCOps = option;
// OpsFilter.value.districtCOps = option;
// }
})
.catch((e) => {
messageError($q, e);
@ -831,4 +845,4 @@ const getClass = (val: boolean) => {
</q-tr>
</template>
</HistoryTable>
</template>
</template>

4
src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue
View file

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

143
src/modules/05_placement/components/PersonalDetail/Information/Family.vue
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"]);
@ -121,13 +125,13 @@ const fetchPrefix = async () => {
};
const addChildren = async () => {
familyData.value.childrens.push({
id: `${familyData.value.childrens.length + 1}`,
childrenPrefixId: "",
childrenFirstName: "",
childrenLastName: "",
childrenCareer: "",
});
// familyData.value.childrens.push({
// id: `${familyData.value.childrens.length + 1}`,
// childrenPrefixId: "",
// childrenFirstName: "",
// childrenLastName: "",
// childrenCareer: "",
// });
familyData.value.childrens.sort(
(a: childrenFamily, b: childrenFamily) => Number(b.id) - Number(a.id)
@ -150,26 +154,26 @@ const fetchHistory = async () => {
.then((res) => {
const data: ResponseObject[] = res.data.result;
data.map((row: ResponseObject) => {
const arrayData: ResponseHistory = {
couple: row.couple ? "1" : "0",
couplePrefixId: row.couplePrefixId,
coupleFirstName: row.coupleFirstName,
coupleLastName: row.coupleLastName,
coupleLastNameOld: row.coupleLastNameOld,
coupleCareer: row.coupleCareer,
fatherPrefixId: row.fatherPrefixId,
fatherFirstName: row.fatherFirstName,
fatherLastName: row.fatherLastName,
fatherCareer: row.fatherCareer,
motherPrefixId: row.motherPrefixId,
motherFirstName: row.motherFirstName,
motherLastName: row.motherLastName,
motherCareer: row.motherCareer,
childrens: row.childrens,
createdFullName: row.createdFullName,
createdAt: new Date(row.createdAt),
};
familyDataHistory.value.push(arrayData);
// const arrayData: ResponseHistory = {
// couple: row.couple ? "1" : "0",
// couplePrefixId: row.couplePrefixId,
// coupleFirstName: row.coupleFirstName,
// coupleLastName: row.coupleLastName,
// coupleLastNameOld: row.coupleLastNameOld,
// coupleCareer: row.coupleCareer,
// fatherPrefixId: row.fatherPrefixId,
// fatherFirstName: row.fatherFirstName,
// fatherLastName: row.fatherLastName,
// fatherCareer: row.fatherCareer,
// motherPrefixId: row.motherPrefixId,
// motherFirstName: row.motherFirstName,
// motherLastName: row.motherLastName,
// motherCareer: row.motherCareer,
// childrens: row.childrens,
// createdFullName: row.createdFullName,
// createdAt: new Date(row.createdAt),
// };
// familyDataHistory.value.push(arrayData);
});
})
.catch((e) => {
@ -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>

530
src/modules/05_placement/components/PersonalDetail/Information/Information.vue
View file

@ -2,26 +2,26 @@
<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";
InformationOps,
optionData,
} 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 +32,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 +55,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 +92,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();
};
/**
@ -308,51 +114,52 @@ const fetchPerson = async () => {
.get(config.API.person)
.then((res) => {
const data = res.data.result;
let optionbloodGroups: DataOption[] = [];
let optionbloodGroups: optionData[] = [];
console.log(data);
data.bloodGroups.map((r: any) => {
optionbloodGroups.push({
id: r.id.toString(),
name: r.name.toString(),
id: r.id ?? "",
name: r.name ?? "",
});
});
Ops.value.bloodOps = optionbloodGroups;
OpsFilter.value.bloodOps = optionbloodGroups;
let optiongenders: DataOption[] = [];
let optiongenders: optionData[] = [];
data.genders.map((r: any) => {
optiongenders.push({
id: r.id.toString(),
name: r.name.toString(),
id: r.id ?? "",
name: r.name ?? "",
});
});
Ops.value.genderOps = optiongenders;
OpsFilter.value.genderOps = optiongenders;
let optionprefixs: DataOption[] = [];
let optionprefixs: optionData[] = [];
data.prefixs.map((r: any) => {
optionprefixs.push({
id: r.id.toString(),
name: r.name.toString(),
id: r.id ?? "",
name: r.name ?? "",
});
});
Ops.value.prefixOps = optionprefixs;
OpsFilter.value.prefixOps = optionprefixs;
let optionrelationships: DataOption[] = [];
let optionrelationships: optionData[] = [];
data.relationships.map((r: any) => {
optionrelationships.push({
id: r.id.toString(),
name: r.name.toString(),
id: r.id ?? "",
name: r.name ?? "",
});
});
Ops.value.statusOps = optionrelationships;
OpsFilter.value.statusOps = optionrelationships;
let optionreligions: DataOption[] = [];
let optionreligions: optionData[] = [];
data.religions.map((r: any) => {
optionreligions.push({
id: r.id.toString(),
name: r.name.toString(),
id: r.id ?? "",
name: r.name ?? "",
});
});
Ops.value.religionOps = optionreligions;
@ -364,56 +171,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 +229,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 +257,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 +338,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 +350,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 +418,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 +442,11 @@ const getClass = (val: boolean) => {
lazy-rules
:readonly="!edit"
:borderless="!edit"
:model-value="date2Thai(informaData.birthDate)"
:model-value="
informaData.dateOfBirth
? date2Thai(informaData.dateOfBirth)
: ''
"
:rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
:label="`${'วัน/เดือน/ปี เกิด'}`"
>
@ -793,7 +513,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 +538,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 +575,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 +605,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 +615,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 +623,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>

5
src/modules/05_placement/components/PersonalDetail/Information/layout.vue
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>

108
src/modules/05_placement/components/PersonalDetail/Qualification.vue
View file

@ -1,46 +1,69 @@
<script setup lang="ts">
import { ref } from 'vue';
import type { CheckboxItem } from "@/modules/05_placement/interface/index/Main";
import type { QForm } from 'quasar';
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useRoute } from "vue-router";
import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type { PropType } from "vue";
import type { Property } from "@/modules/05_placement/interface/index/Main";
const $q = useQuasar();
const mixin = useCounterMixin();
const {
modalError,
} = mixin;
const route = useRoute();
const { showLoader, hideLoader, messageError, success } = mixin;
const props = defineProps({
statusEdit: {
type: Boolean,
required: true,
},
notiNoEdit: {
data: {
type: Array as PropType<Property[]>,
default: [],
},
fetch: {
type: Function,
default: () => console.log("not function"),
},
});
const emit = defineEmits(["update:statusEdit"]);
const emit = defineEmits(["update:statusEdit", "update:data"]);
const edit = ref<boolean>(false);
const myform = ref<QForm | null>(null);
onMounted(() => {
emit("update:statusEdit", false);
});
const saveData = async () => {
if (myform.value != null) {
await myform.value.validate().then(async (success: boolean) => {
if (success) {
await editData();
} else {
}
showLoader();
await http
.put(
config.API.placementPropertyId(route.params.personalId.toString()),
props.data
)
.then((res: any) => {
success($q, "แก้ไขข้อมูลสำเร็จ");
})
.catch((e: any) => {
messageError($q, e);
})
.finally(async () => {
await props.fetch();
edit.value = false;
hideLoader();
changeBtn();
});
}
};
const changeBtn = async () => {
if (edit.value == true) {
if (props.statusEdit === true) {
edit.value = false;
props.notiNoEdit();
} else {
emit("update:statusEdit", true);
}
@ -49,43 +72,34 @@ const changeBtn = async () => {
}
};
const editData = async () => {
modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
}
const onCancel = async () => {
if (myform.value != null) {
myform.value.reset();
}
// await fetchData();
await props.fetch();
};
const selection = ref([]);
const checkboxItems: CheckboxItem[] = [
{ id: 1, label: 'ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง' },
{ id: 2, label: 'ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.' },
{ id: 3, label: 'ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
{ id: 4, label: 'ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม' },
{ id: 5, label: 'ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง' },
{ id: 6, label: 'ไม่เป็นบุคคลล้มละลาย' },
{ id: 7, label: 'ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ' },
{ id: 8, label: 'ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ' },
{ id: 9, label: 'เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
{ id: 10, label: 'เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
{ id: 11, label: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' },
]
</script>
<template>
<div class="row col-12 q-px-lg q-pt-lg q-pb-sm no-border">
<HeaderTop v-model:edit="edit" header="การคัดกรองคุณสมบัติ" icon="mdi-account-search" :save="saveData"
:history="false" :changeBtn="changeBtn" :disable="statusEdit" :cancel="onCancel" />
<HeaderTop
v-model:edit="edit"
header="การคัดกรองคุณสมบัติ"
icon="mdi-account-search"
:save="saveData"
:history="false"
:changeBtn="changeBtn"
:disable="statusEdit"
:cancel="onCancel"
/>
</div>
<div class="row q-px-lg">
<div v-for="item of checkboxItems" :key="item.id" class="col-12 q-pt-sm">
<q-checkbox size="xs" v-model="selection" :val="item.id" :label="item.label" keep-color color="gray-5"
:disable="!statusEdit" />
<div v-for="item of props.data" :key="item.name" class="col-12 q-pt-sm">
<q-checkbox
size="xs"
v-model="item.value"
:label="item.name"
keep-color
color="gray-5"
:disable="!statusEdit"
/>
<q-separator />
</div>
</div>
</template>
</template>

48
src/modules/05_placement/components/PersonalDetail/profileType.ts
View file

@ -8,23 +8,25 @@ interface ChangeActive {
//ข้อมูลส่วนตัว
interface Information {
cardid: string | null;
idCard: string | null;
prefix: string | null;
age: string | null;
prefixId: string | null;
fullName: string | null;
firstname: string | null;
lastname: string | null;
birthDate: Date;
genderId: string | null;
bloodId: string | null;
nationality: string | null;
ethnicity: string | null;
statusId: string | null;
race: string | null;
dateOfBirth: Date | null;
age: string | null;
telephone: string | null;
gender: string | null;
genderId: string | null;
relationship: string | null;
relationshipId: string | null;
bloodGroup: string | null;
bloodGroupId: string | null;
religion: string | null;
religionId: string | null;
tel: string | null;
employeeType: string | null;
employeeClass: string | null;
profileType: string | null;
}
interface Family {
@ -119,23 +121,25 @@ const defaultAddress: Address = {
};
const defaultInformation: Information = {
cardid: null,
age: null,
idCard: null,
prefix: null,
prefixId: null,
fullName: null,
firstname: null,
lastname: null,
birthDate: new Date(),
genderId: null,
bloodId: null,
nationality: null,
ethnicity: null,
statusId: null,
race: null,
dateOfBirth: new Date(),
age: null,
telephone: null,
gender: null,
genderId: null,
relationship: null,
relationshipId: null,
bloodGroup: null,
bloodGroupId: null,
religion: null,
religionId: null,
tel: null,
employeeType: null,
employeeClass: null,
profileType: null,
};
const defaultFamily: Family = {

571
src/modules/05_placement/components/pass/Table.vue
View file

@ -18,11 +18,11 @@ import router from "@/router";
let roleAdmin = ref<boolean>(false);
const props = defineProps({
statCard:{
type:Function,
statCard: {
type: Function,
default: () => console.log("getStat"),
}
})
},
});
const edit = ref<boolean>(true);
const modal = ref<boolean>(false); //modal ขอผ่อนผัน + สละสิทธิ์
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
@ -41,13 +41,7 @@ const files = ref<any>(null);
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const $q = useQuasar(); // show dialog
const {
messageError,
showLoader,
hideLoader,
dateText,
success
} = mixin;
const { messageError, showLoader, hideLoader, dateText, success } = mixin;
const route = useRoute();
const examId = route.params.examId;
@ -144,22 +138,42 @@ const getTable = async () => {
.get(config.API.redirectToPage(examIdString))
.then((res: any) => {
const dataArray: PartialTableName[] = res.data.result;
rows.value = []
rows.value = [];
dataArray.map((data) => {
const rowData = {
personalId: data.personalId,
idCard: data.idCard,
fullName: data.fullName,
fullName: data.fullName + ' ' + data.idCard,
name: data.fullName,
profilePhoto: data.profilePhoto,
organizationName: data.organizationName,
organizationName: data.organizationName + ' ' + data.organizationShortName + ' ' + data.positionNumber + ' ' + data.positionPath,
orgName: data.organizationName,
organizationShortName: data.organizationShortName,
positionNumber: data.positionNumber,
positionPath: data.positionPath,
reportingDate: dateText(new Date(data.reportingDate)),
number: data.number,
bmaOfficer: data.bmaOfficer == 'OFFICER' ? 'ขรก.กทม. สามัญ' : data.bmaOfficer == 'EMPLOYEE_PERM' ? 'ลูกจ้างประจำ' : data.bmaOfficer == 'EMPLOYEE_TEMP' ? 'ลูกจ้างชั่วคราว' : data.bmaOfficer == null ? 'บุคคลภายนอก' : '-',
bmaOfficer:
data.bmaOfficer == "OFFICER"
? "ขรก.กทม. สามัญ"
: data.bmaOfficer == "EMPLOYEE_PERM"
? "ลูกจ้างประจำ"
: data.bmaOfficer == "EMPLOYEE_TEMP"
? "ลูกจ้างชั่วคราว"
: data.bmaOfficer == null
? "บุคคลภายนอก"
: "-",
statusId: data.statusId,
statusName: data.statusId == 'UN-CONTAIN' ? 'ยังไม่บรรจุ' : data.statusId == 'PREPARE-CONTAIN' ? 'เตรียมบรรจุ' : data.statusId == 'CONTAIN' ? 'บรรจุแล้ว' : data.statusId == 'DISCLAIM' ? 'สละสิทธิ์' : '-',
statusName:
data.statusId == "UN-CONTAIN"
? "ยังไม่บรรจุ"
: data.statusId == "PREPARE-CONTAIN"
? "เตรียมบรรจุ"
: data.statusId == "CONTAIN"
? "บรรจุแล้ว"
: data.statusId == "DISCLAIM"
? "สละสิทธิ์"
: "-",
deferment: data.deferment,
};
@ -179,7 +193,7 @@ const appointModal = ref<boolean>(false);
const saveDeferment = async () => {
myForm.value.validate().then(async (result: boolean) => {
if (result) {
showLoader()
showLoader();
const formData = new FormData();
formData.append("personalId", personalId.value);
formData.append("note", userNote.value);
@ -196,7 +210,7 @@ const saveDeferment = async () => {
.finally(async () => {
await getTable();
props.statCard();
userNote.value = ""
userNote.value = "";
modalDefermentDisclaim.value = false;
hideLoader();
});
@ -207,7 +221,7 @@ const saveDeferment = async () => {
const saveDisclaim = async () => {
myForm.value.validate().then(async (result: boolean) => {
if (result) {
showLoader()
showLoader();
const dataPost = {
note: userNote.value,
personId: personalId.value,
@ -220,11 +234,13 @@ const saveDisclaim = async () => {
note: dataPost.note,
personalId: dataPost.personId,
})
.then(() => { success($q, "บันทึกสำเร็จ"); })
.then(() => {
success($q, "บันทึกสำเร็จ");
})
.finally(async () => {
await getTable();
props.statCard();
userNote.value = ""
userNote.value = "";
modalDefermentDisclaim.value = false;
hideLoader();
});
@ -245,7 +261,7 @@ const getClass = (val: boolean) => {
const selectData = (pid: string) => {
if (roleAdmin.value === true) {
personalId.value = pid
personalId.value = pid;
modal.value = true;
} else {
router.push("/placement/detail/" + pid);
@ -255,7 +271,7 @@ const selectData = (pid: string) => {
const getNumFile = ref(0);
const dataInfo = reactive({
reason: "",
reliefDoc: ""
reliefDoc: "",
});
const editDetail = (
@ -276,12 +292,11 @@ const editDetail = (
modalDisclaim.value = false;
modalDefermentDisclaim.value = true;
} else if (action === "defermentInfo") {
http
.get(config.API.placementDefermentInfo(props.personalId))
.then((res: any) => {
dataInfo.reason = res.data.result.reliefReason;
dataInfo.reliefDoc = res.data.result.reliefDoc
dataInfo.reliefDoc = res.data.result.reliefDoc;
})
.catch((e) => {
messageError($q, e);
@ -313,8 +328,8 @@ const openAppointModal = (pid: string) => {
const clickCloseModalTree = async () => {
await getTable();
appointModal.value = false
}
appointModal.value = false;
};
const validateData = async () => {
checkValidate.value = true;
@ -370,188 +385,334 @@ const pagination = ref({
</script>
<template>
<q-form ref="myForm">
<Table :expired-account="expiredAccount" :rows="rows" :columns="columns" :filter="filter"
:visible-columns="visibleColumns" v-model:inputfilter="filter" v-model:inputvisible="visibleColumns"
v-model:editvisible="editvisible" v-model:expiredaccountfilter="expiredAccount" :history="true" :boss="true"
:saveNoDraft="true" :role-admin="roleAdmin">
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row.personalId)"
class="cursor-pointer">
<template v-if="col.name === 'position'">
{{ props.rowIndex + 1 }}
</template>
<template v-else-if="col.name === 'fullName'" class="table_ellipsis">
<div class="row col-12 text-no-wrap items-center">
<img v-if="props.row.avatar == null" src="@/assets/avatar_user.jpg" class="col-4 img-info" />
<img v-else :src="props.row.avatar" class="col-4 img-info" />
<div class="col-4">
<div class="text-weight-medium">{{ props.row.fullName }}</div>
<div class="text-weight-light">{{ props.row.idCard }}</div>
</div>
</div>
</template>
<template v-else-if="col.name === 'number'">
<div class="text-weight-medium">
{{ props.row.number !== null ? props.row.number : "-" }}
</div>
</template>
<q-form ref="myForm">
<Table
:expired-account="expiredAccount"
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
v-model:editvisible="editvisible"
v-model:expiredaccountfilter="expiredAccount"
:history="true"
:boss="true"
:saveNoDraft="true"
:role-admin="roleAdmin"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props.row.personalId)"
class="cursor-pointer"
>
<template v-if="col.name === 'position'">
{{ props.rowIndex + 1 }}
</template>
<template
v-else-if="col.name === 'fullName'"
class="table_ellipsis"
>
<div class="row col-12 text-no-wrap items-center">
<img
v-if="props.row.avatar == null"
src="@/assets/avatar_user.jpg"
class="col-4 img-info"
/>
<img v-else :src="props.row.avatar" class="col-4 img-info" />
<div class="col-4">
<div class="text-weight-medium">{{ props.row.name }}</div>
<div class="text-weight-light">{{ props.row.idCard }}</div>
</div>
</div>
</template>
<template v-else-if="col.name === 'number'">
<div class="text-weight-medium">
{{ props.row.number !== null ? props.row.number : "-" }}
</div>
</template>
<template v-else-if="col.name === 'organizationName'">
<div v-if="props.row.organizationName !== null ||
props.row.positionPath !== null
">
<div class="col-4">
<div class="text-weight-medium">
{{
props.row.organizationName !== null
? props.row.organizationName
: "-"
}}
{{
props.row.organizationShortName !== null
? `(${props.row.organizationShortName})`
: ""
}}
</div>
<div class="text-weight-light">
{{
props.row.positionPath !== null
? props.row.positionPath
: "-"
}}
{{
props.row.positionNumber !== null
? `(${props.row.positionNumber})`
: ""
}}
</div>
</div>
</div>
<div v-else>
<div class="col-4">
<div class="text-weight-medium">-</div>
</div>
</div>
</template>
<template v-else-if="col.name === 'reportingDate' && col.value !== '-'">
<div class="text-weight-medium">
{{ props.row.reportingDate }}
</div>
</template>
<template v-else-if="col.name === 'bmaOfficer'">
<div class="text-weight-medium">
{{ props.row.bmaOfficer !== null ? props.row.bmaOfficer : "-" }}
</div>
</template>
<template v-else-if="col.name === 'statusName'">
<div class="text-weight-medium">
{{ props.row.statusName }}
</div>
</template>
</q-td>
<q-td auto-width>
<q-btn icon="mdi-dots-vertical" size="12px" color="grey-7" flat round dense>
<q-menu transition-show="jump-down" transition-hide="jump-up">
<q-list dense style="min-width: 100px">
<q-item v-if="roleAdmin && props.row.statusId === 'UN-CONTAIN'" clickable v-close-popup
@click="openAppointModal(props.row.personalId)">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-icon color="primary" size="xs" name="mdi-bookmark-outline" />
</q-item-section>
<q-item-section>เลือกหน่วยงานที่รับบรรจุ</q-item-section>
</q-item>
<q-separator />
<q-item v-if="roleAdmin && props.row.statusId === 'UN-CONTAIN'" clickable v-close-popup
@click="editDetail(props.row, 'deferment')">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-icon color="blue" size="xs" name="mdi-account-alert-outline" />
</q-item-section>
<q-item-section>ขอผ่อนผัน</q-item-section>
</q-item>
<q-item v-else-if="props.row.deferment === true && props.row.statusId != 'DISCLAIM'" clickable v-close-popup
@click="editDetail(props.row, 'defermentInfo')">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-icon color="blue" size="xs" name="mdi-account-details-outline" />
</q-item-section>
<q-item-section>ข้อมูลการผ่อนผัน</q-item-section>
</q-item>
<q-separator />
<q-item v-if="props.row.statusId === 'UN-CONTAIN' ||
props.row.statusId === 'PREPARE-CONTAIN'
" clickable v-close-popup
@click="editDetail(props.row, 'disclaim')">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
</q-item-section>
<q-item-section>สละสิทธิ์</q-item-section>
</q-item>
<q-item v-else-if="props.row.statusId === 'DISCLAIM'" clickable v-close-popup
@click="editDetail(props.row, 'disclaimInfo')">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
</q-item-section>
<q-item-section>ข้อมูลการสละสิทธิ์</q-item-section>
</q-item>
<template v-else-if="col.name === 'organizationName'">
<div
v-if="props.row.orgName !== null ||
props.row.positionPath !== null
"
>
<div class="col-4">
<div class="text-weight-medium">
{{
props.row.orgName !== null
? props.row.orgName
: "-"
}}
{{
props.row.organizationShortName !== null
? `(${props.row.organizationShortName})`
: ""
}}
</div>
<div class="text-weight-light">
{{
props.row.positionPath !== null
? props.row.positionPath
: "-"
}}
{{
props.row.positionNumber !== null
? `(${props.row.positionNumber})`
: ""
}}
</div>
</div>
</div>
<div v-else>
<div class="col-4">
<div class="text-weight-medium">-</div>
</div>
</div>
</template>
<template
v-else-if="col.name === 'reportingDate' && col.value !== '-'"
>
<div class="text-weight-medium">
{{ props.row.reportingDate }}
</div>
</template>
<template v-else-if="col.name === 'bmaOfficer'">
<div class="text-weight-medium">
{{ props.row.bmaOfficer !== null ? props.row.bmaOfficer : "-" }}
</div>
</template>
<template v-else-if="col.name === 'statusName'">
<div class="text-weight-medium">
{{ props.row.statusName }}
</div>
</template>
</q-td>
<q-td auto-width>
<q-btn
icon="mdi-dots-vertical"
size="12px"
color="grey-7"
flat
round
dense
>
<q-menu transition-show="jump-down" transition-hide="jump-up">
<q-list dense style="min-width: 100px">
<q-item
v-if="roleAdmin && props.row.statusId === 'UN-CONTAIN'"
clickable
v-close-popup
@click="openAppointModal(props.row.personalId)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-icon
color="primary"
size="xs"
name="mdi-bookmark-outline"
/>
</q-item-section>
<q-item-section>เลือกหน่วยงานที่รับบรรจุ</q-item-section>
</q-item>
<q-separator />
<q-item
v-if="roleAdmin && props.row.statusId === 'UN-CONTAIN'"
clickable
v-close-popup
@click="editDetail(props.row, 'deferment')"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-icon
color="blue"
size="xs"
name="mdi-account-alert-outline"
/>
</q-item-section>
<q-item-section>ขอผ่อนผัน</q-item-section>
</q-item>
<q-item
v-else-if="
props.row.deferment === true &&
props.row.statusId != 'DISCLAIM'
"
clickable
v-close-popup
@click="editDetail(props.row, 'defermentInfo')"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-icon
color="blue"
size="xs"
name="mdi-account-details-outline"
/>
</q-item-section>
<q-item-section>ข้อมูลการผ่อนผัน</q-item-section>
</q-item>
<q-separator />
<q-item
v-if="
props.row.statusId === 'UN-CONTAIN' ||
props.row.statusId === 'PREPARE-CONTAIN'
"
clickable
v-close-popup
@click="editDetail(props.row, 'disclaim')"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-icon
color="pink"
size="xs"
name="mdi-account-cancel-outline"
/>
</q-item-section>
<q-item-section>สละสิทธิ์</q-item-section>
</q-item>
<q-item
v-else-if="props.row.statusId === 'DISCLAIM'"
clickable
v-close-popup
@click="editDetail(props.row, 'disclaimInfo')"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-icon
color="pink"
size="xs"
name="mdi-account-cancel-outline"
/>
</q-item-section>
<q-item-section>ข้อมูลการสละสิทธิ์</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-td>
</q-tr>
</template>
</Table>
</q-form>
</q-list>
</q-menu>
</q-btn>
</q-td>
</q-tr>
</template>
</Table>
</q-form>
<!-- เลือกหน่วยงานที่บรรจุ -->
<DialogOrgTree
v-model:modal="appointModal"
:personalId="personalId"
:close="clickCloseModalTree"
/>
<!-- เลือกหน่วยงานที่บรรจุ -->
<DialogOrgTree v-model:modal="appointModal" :personalId="personalId" :close="clickCloseModalTree" />
<!-- popup ขอผ่อนผัน / สละสิทธิ์ -->
<q-form ref="myForm">
<DialogCard
v-model:Modal="modal"
:personal-id="personalId"
:close="clickClose"
:validate="validateData"
/>
</q-form>
<q-dialog v-model="modalDefermentDisclaim" persistent>
<q-card style="width: 800px">
<q-form ref="myForm">
<DialogHeader
:title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`"
:close="clickClose"
/>
<q-separator />
<q-card-section class="q-p-sm">
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
:readonly="!edit"
:borderless="!edit"
v-model="userNote"
:label="`${'กรอกเหตุผล'}`"
@update:model-value="clickEditRow"
type="textarea"
/>
<q-file
v-if="getNumFile === 1"
v-model="files"
dense
:label="`${'เลือกไฟล์เอกสารหลักฐาน'}`"
outlined
use-chips
:rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
multiple
@update:model-value="clickEditRow"
class="q-py-sm"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
</q-card-section>
<q-separator />
<DialogFooter
:editvisible="true"
:validate="validateData"
:save="modalDisclaim ? saveDisclaim : saveDeferment"
/>
</q-form>
</q-card>
</q-dialog>
<!-- popup ขอผ่อนผัน / สละสิทธิ์ -->
<q-form ref="myForm">
<DialogCard v-model:Modal="modal" :personal-id="personalId" :close="clickClose" :validate="validateData" />
</q-form>
<q-dialog v-model="modalDefermentDisclaim" persistent>
<q-card style="width: 800px">
<q-form ref="myForm">
<DialogHeader :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm">
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules
:rules="[(val) => !!val || 'กรุณากรอกเหตุผล']" :readonly="!edit" :borderless="!edit" v-model="userNote"
:label="`${'กรอกเหตุผล'}`" @update:model-value="clickEditRow" type="textarea" />
<q-file v-if="getNumFile === 1" v-model="files" dense :label="`${'เลือกไฟล์เอกสารหลักฐาน'}`" outlined
use-chips :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']" multiple
@update:model-value="clickEditRow" class="q-py-sm">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
</q-card-section>
<q-separator />
<DialogFooter :editvisible="true" :validate="validateData" :save="modalDisclaim ? saveDisclaim : saveDeferment" />
</q-form>
</q-card>
</q-dialog>
<!-- dialog ข้อมูลขอผ่อนผัน / สละสิทธิ์ -->
<q-dialog v-model="modalwaitInfo" persistent>
<q-card style="width: 500px; max-width: 500px">
<q-form ref="myForm">
<DialogHeader :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm">
<div class="row">
<div class="col-3 text-grey-7">เหตุผล</div>
<div class="col-4">{{ dataInfo.reason }}</div>
</div>
<div v-if="!modalDisclaim" class="row q-pt-md">
<div class="col-3 text-grey-7 q-mt-sm">เอกสารหลักฐาน</div>
<div class="col-2 q-mt-sm">
<q-btn type="a" :href="dataInfo.reliefDoc" color="primary" flat dense round size="14px" icon="mdi-download" target="_blank" />
</div>
<!-- dialog ข้อมูลขอผ่อนผัน / สละสิทธิ์ -->
<q-dialog v-model="modalwaitInfo" persistent>
<q-card style="width: 500px; max-width: 500px">
<q-form ref="myForm">
<DialogHeader
:title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`"
:close="clickClose"
/>
<q-separator />
<q-card-section class="q-p-sm">
<div class="row">
<div class="col-3 text-grey-7">เหตุผล</div>
<div class="col-4">{{ dataInfo.reason }}</div>
</div>
<div v-if="!modalDisclaim" class="row q-pt-md">
<div class="col-3 text-grey-7 q-mt-sm">เอกสารหลักฐาน</div>
<div class="col-2 q-mt-sm">
<q-btn
type="a"
:href="dataInfo.reliefDoc"
color="primary"
flat
dense
round
size="14px"
icon="mdi-download"
target="_blank"
/>
</div>
</div>
</q-card-section>
<q-separator />

139
src/modules/05_placement/interface/index/Main.ts
View file

@ -1,12 +1,12 @@
import type { zipCodeOption } from "../../components/PersonalDetail/profileType";
interface DataOption {
id: number|null;
name:string|null;
id: number;
name: string;
disable?: boolean;
}
interface DataOption1 {
id: string|null;
name:string|null;
id: string | null;
name: string | null;
disable?: boolean;
}
interface DataOptionInsignia {
@ -15,25 +15,30 @@ interface DataOptionInsignia {
typeName: string;
}
interface optionData {
id: string;
name: string;
}
interface EduOps {
levelOptions: DataOption[];
positionPathOptions: DataOption[];
levelOptions: optionData[];
positionPathOptions: optionData[];
}
interface InformationOps {
prefixOps: DataOption[];
genderOps: DataOption[];
bloodOps: DataOption[];
statusOps: DataOption[];
religionOps: DataOption[];
employeeClassOps: DataOption[];
employeeTypeOps: DataOption[];
prefixOps: optionData[];
genderOps: optionData[];
bloodOps: optionData[];
statusOps: optionData[];
religionOps: optionData[];
employeeClassOps: optionData[];
employeeTypeOps: optionData[];
}
interface AddressOps {
provinceOps: DataOption[];
districtOps: DataOption[];
districtCOps: DataOption[];
provinceOps: optionData[];
districtOps: optionData[];
districtCOps: optionData[];
subdistrictOps: zipCodeOption[];
subdistrictCOps: zipCodeOption[];
}
@ -57,6 +62,100 @@ interface CheckboxItem {
label: string;
}
interface Property {
name: string;
value: boolean;
}
interface PointExam {
pointA: number;
pointB: number;
pointC: number;
pointTotalA: number;
pointTotalB: number;
pointTotalC: number;
point: number;
pointTotal: number;
examNumber: number;
examRound: number;
pass: string | null;
}
interface Education {
id: string;
educationLevel: string;
institute: string;
degree: string;
field: string;
gpa: string;
country: string;
duration: string;
other: string;
fundName: string;
durationYear: number;
finishDate: Date;
isDate: string;
startDate: number;
endDate: number;
positionPath: string;
isEducation: string;
}
interface Family {
couple: boolean;
marryPrefix: string;
marryPrefixId: string;
marryFirstName: string;
marryLastName: string;
marryOccupation: string;
fatherPrefix: string;
fatherPrefixId: string;
fatherFirstName: string;
fatherLastName: string;
fatherOccupation: string;
motherPrefix: string;
motherPrefixId: string;
motherFirstName: string;
motherLastName: string;
motherOccupation: string;
}
interface Address {
registSubDistrict: string;
registSubDistrictId: string;
registZipCode: string;
registDistrict: string;
registDistrictId: string;
registProvince: string;
registProvinceId: string;
currentSubDistrict: string;
currentSubDistrictId: string;
currentZipCode: string;
currentDistrict: string;
currentDistrictId: string;
currentProvince: string;
currentProvinceId: string;
registSame: boolean;
}
const AddressDataDefualt: Address = {
registSubDistrict: "",
registSubDistrictId: "",
registZipCode: "",
registDistrict: "",
registDistrictId: "",
registProvince: "",
registProvinceId: "",
currentSubDistrict: "",
currentSubDistrictId: "",
currentZipCode: "",
currentDistrict: "",
currentDistrictId: "",
currentProvince: "",
currentProvinceId: "",
registSame: false,
};
export type {
DataOption,
DataOptionInsignia,
@ -68,4 +167,12 @@ export type {
DataOption1,
InsigniaOps,
CheckboxItem,
Property,
PointExam,
Education,
Family,
Address,
optionData,
};
export { AddressDataDefualt };