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

ต่อ api บรรจุ

Browse source
This commit is contained in:
Thanit Konmek 2023-07-13 09:10:43 +07:00
parent 78ca0ceff7
commit 211ee33310
14 changed files with 1142 additions and 799 deletions
Download patch file Download diff file Expand all files Collapse all files

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.ts";
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>

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

@ -13,18 +13,30 @@ 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,
} 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 +86,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 +471,8 @@ watch(visibleColumns, async (count: String[], prevCount: String[]) => {
});
onMounted(async () => {
// await fetchLevel();
// await fetchPositionPath();
await fetchLevel();
await fetchPositionPath();
// await fetchData();
});

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>

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

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

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();

89
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"]);
@ -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>

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

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

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 = {

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

@ -164,7 +164,7 @@ const fetchPosition = async () => {
});
// positionLevelOptionsFilter.value = optionPositionLevels;
})
.catch((e: any) => { })
.catch((e: any) => {})
.finally(() => {
hideLoader();
});
@ -300,7 +300,7 @@ const selectData = (props: TableName) => {
if (roleAdmin.value === true) {
modal.value = true;
} else {
router.push("/placement/detail/08db7322-5712-4626-8a76-e2d28cd1a13b");
router.push("/placement/detail/0a846508-4932-40de-9a9e-5b519492217c");
}
};
const onSelected = async (id: string) => {
@ -356,15 +356,15 @@ const editDetail = (
};
placementData.mappingPosition.columns.length == 0
? (visibleColumns.value = [
"position",
"Name",
"ExamOrder",
"Unit",
"ReportingDate",
"BMAOfficer",
"Status",
"checkList",
])
"position",
"Name",
"ExamOrder",
"Unit",
"ReportingDate",
"BMAOfficer",
"Status",
"checkList",
])
: (visibleColumns.value = placementData.mappingPosition.columns);
const columns = ref<QTableProps["columns"]>([
{
@ -1023,9 +1023,7 @@ const save = () => {
onMounted(async () => {
if (keycloak.tokenParsed != null) {
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
console.log("roleAdmin===>", roleAdmin)
console.log("roleAdmin===>", roleAdmin);
}
await fetchPosition();
@ -1077,27 +1075,53 @@ const listKeyId = (data: any) => {
const expiredAccount = ref<boolean>(false);
watch(expiredAccount, () => {
console.log("expiredAccount===>", expiredAccount.value);
});
</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" :add="save" :role-admin="roleAdmin">
<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"
:add="save"
:role-admin="roleAdmin"
>
<template #columns="props">
<q-tr :props="props">
<q-icon class="q-mr-sm" size="15px" color="primary" name="mdi-bookmark" v-if="props.row.isDirector"></q-icon>
<q-icon
class="q-mr-sm"
size="15px"
color="primary"
name="mdi-bookmark"
v-if="props.row.isDirector"
></q-icon>
<q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row)"
class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props.row)"
class="cursor-pointer"
>
<div v-if="col.name == 'Name'" class="table_ellipsis">
{{ col.value }}
<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-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">
@ -1110,9 +1134,12 @@ watch(expiredAccount, () => {
</div>
</div>
<div v-else-if="col.name == 'Unit'" class="table_ellipsis">
<div v-if="props.row.Status == 'ยังไม่บรรจุ' ||
props.row.Status == 'สละสิทธิ์'
">
<div
v-if="
props.row.Status == 'ยังไม่บรรจุ' ||
props.row.Status == 'สละสิทธิ์'
"
>
-
</div>
<div v-else>
@ -1120,7 +1147,10 @@ watch(expiredAccount, () => {
<p>{{ col.value }}</p>
</div>
</div>
<div v-else-if="col.name == 'ReportingDate' && col.value != '-'" class="table_ellipsis">
<div
v-else-if="col.name == 'ReportingDate' && col.value != '-'"
class="table_ellipsis"
>
{{ mixin.date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
@ -1128,39 +1158,86 @@ watch(expiredAccount, () => {
</div>
</q-td>
<q-td auto-width>
<q-btn v-if="props.row.Status !== 'สละสิทธิ์' &&
props.row.Status !== 'บรรจุเเล้ว'
" icon="mdi-dots-vertical" size="12px" color="grey-7" flat round dense>
<q-btn
v-if="
props.row.Status !== 'สละสิทธิ์' &&
props.row.Status !== 'บรรจุเเล้ว'
"
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 === true && props.row.Status === 'ยังไม่บรรจุ'" clickable v-close-popup
@click="openAppointModal">
<q-item
v-if="
roleAdmin === true && props.row.Status === 'ยังไม่บรรจุ'
"
clickable
v-close-popup
@click="openAppointModal"
>
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-icon color="primary" size="xs" name="mdi-bookmark-outline" />
<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 === true && props.row.Status === 'ยังไม่บรรจุ'" clickable v-close-popup
@click="editDetail(props.row, 'wait')">
<q-item
v-if="
roleAdmin === true && props.row.Status === 'ยังไม่บรรจุ'
"
clickable
v-close-popup
@click="editDetail(props.row, 'wait')"
>
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-icon color="blue" size="xs" name="mdi-account-alert-outline" />
<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.Status === 'ขอผ่อนผัน'" clickable v-close-popup
@click="editDetail(props.row, 'waitInfo')">
<q-item
v-else-if="props.row.Status === 'ขอผ่อนผัน'"
clickable
v-close-popup
@click="editDetail(props.row, 'waitInfo')"
>
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-icon color="blue" size="xs" name="mdi-account-details-outline" />
<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.Status === 'ยังไม่บรรจุ' ||
props.row.Status === 'เตรียมบรรจุ'
" clickable v-close-popup @click="editDetail(props.row, 'cancel')">
<q-item
v-if="
props.row.Status === 'ยังไม่บรรจุ' ||
props.row.Status === 'เตรียมบรรจุ'
"
clickable
v-close-popup
@click="editDetail(props.row, 'cancel')"
>
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
<q-icon
color="pink"
size="xs"
name="mdi-account-cancel-outline"
/>
</q-item-section>
<q-item-section>สละสิทธิ์</q-item-section>
</q-item>
@ -1183,25 +1260,50 @@ watch(expiredAccount, () => {
<div class="col-xs-12 col-sm-6 row">
<q-card flat bordered class="fit q-pa-sm">
<q-scroll-area visible style="height: 70vh">
<q-input outlined dense v-model="search" placeholder="ค้นหา" class="q-mb-sm">
<q-input
outlined
dense
v-model="search"
placeholder="ค้นหา"
class="q-mb-sm"
>
<template v-slot:append>
<q-icon name="mdi-magnify" />
</template>
</q-input>
<q-tree no-transition ref="qtreeEdit" :nodes="nodesTree" node-key="keyId" @lazy-load="onLazyLoad" dense>
<q-tree
no-transition
ref="qtreeEdit"
:nodes="nodesTree"
node-key="keyId"
@lazy-load="onLazyLoad"
dense
>
<!--organization บรรทัดแสดงชื่อหน่วยงาน & ปุ่ม + -->
<template v-slot:header-organization="prop">
<div class="col">
<div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
<div
class="row items-center q-px-xs q-pt-xs q-gutter-sm"
>
<!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
<div class="text-weight-medium">
{{ prop.node.organizationName }}
</div>
<!--แสดง Total Count PositionNum-->
<q-badge rounded color="grey-2" text-color="dark" :label="prop.node.totalPositionCount" />
<q-badge v-if="prop.node.totalPositionVacant > 0" rounded color="red" outline
:label="prop.node.totalPositionVacant" />
<q-badge
rounded
color="grey-2"
text-color="dark"
:label="prop.node.totalPositionCount"
/>
<q-badge
v-if="prop.node.totalPositionVacant > 0"
rounded
color="red"
outline
:label="prop.node.totalPositionVacant"
/>
<q-space />
</div>
@ -1214,31 +1316,51 @@ watch(expiredAccount, () => {
</div>
</template>
<template v-slot:header-person="prop">
<q-item clickable :active="clickAction === prop.node.keyId" @click="
clickAction =
prop.node.name == `ว่าง` ||
<q-item
clickable
:active="clickAction === prop.node.keyId"
@click="
clickAction =
prop.node.name == `ว่าง` ||
prop.node.name == `N/A` ||
prop.node.name == null
? listKeyId(prop)
: ''
"
active-class="my-list-link text-primary text-weight-medium"
:class="
prop.node.name == `ว่าง` ||
prop.node.name == `N/A` ||
prop.node.name == null
? listKeyId(prop)
: ''
" active-class="my-list-link text-primary text-weight-medium" :class="prop.node.name == `ว่าง` ||
prop.node.name == `N/A` ||
prop.node.name == null
? 'row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list'
: 'row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list disabled'
">
<img v-if="prop.node.avatar == '' ||
prop.node.avatar ==
'https://cdn.quasar.dev/img/boy-avatar.png'
" src="@/assets/avatar_user.jpg" class="col-xs-1 col-sm-2"
style="width: 28px; height: 28px; border-radius: 50%" />
<img v-else :src="prop.node.avatar" class="col-xs-1 col-sm-2"
style="width: 28px; height: 28px; border-radius: 50%" />
? 'row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list'
: 'row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list disabled'
"
>
<img
v-if="
prop.node.avatar == '' ||
prop.node.avatar ==
'https://cdn.quasar.dev/img/boy-avatar.png'
"
src="@/assets/avatar_user.jpg"
class="col-xs-1 col-sm-2"
style="width: 28px; height: 28px; border-radius: 50%"
/>
<img
v-else
:src="prop.node.avatar"
class="col-xs-1 col-sm-2"
style="width: 28px; height: 28px; border-radius: 50%"
/>
<!--=====ตำแหน่งว่าง สีแดง=====-->
<div v-if="prop.node.name == `ว่าง` ||
prop.node.name == `N/A` ||
prop.node.name == null
" class="q-px-sm text-weight-medium text-red">
<div
v-if="
prop.node.name == `ว่าง` ||
prop.node.name == `N/A` ||
prop.node.name == null
"
class="q-px-sm text-weight-medium text-red"
>
ว่าง
</div>
<!--=====หัวหน้า สีเขียว=====-->
@ -1263,8 +1385,13 @@ watch(expiredAccount, () => {
<div class="q-pr-sm">
{{ prop.node.positionLevel }}
</div>
<q-icon v-if="prop.node.positionLeaderFlag" class="q-mr-sm" size="15px" color="primary"
name="mdi-bookmark"></q-icon>
<q-icon
v-if="prop.node.positionLeaderFlag"
class="q-mr-sm"
size="15px"
color="primary"
name="mdi-bookmark"
></q-icon>
<q-space />
</q-item>
@ -1279,24 +1406,46 @@ watch(expiredAccount, () => {
<div class="row col-12 q-col-gutter-xs">
<div class="col-xs-12 col-sm-12 col-md-12"></div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker menu-class-name="modalfix" :readonly="!edit" v-model="date" :locale="'th'" autoApply
:enableTimePicker="false" @update:modelValue="clickEditRow" week-start="0">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="date"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :borderless="!edit"
:model-value="date2Thai(date)" :rules="[
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="date2Thai(date)"
:rules="[
(val: string) =>
!!val ||
`${'วันที่รายงานตัว'}`,
]" :label="`${'วันที่รายงานตัว'}`" hide-bottom-space>
]"
:label="`${'วันที่รายงานตัว'}`"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" :style="edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
">
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
@ -1305,58 +1454,145 @@ watch(expiredAccount, () => {
</div>
<q-space />
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input disable standout readonly class="custom-input" dense lazy-rules v-model="posNoId"
:label="`${'เลขที่ตำแหน่ง'}`" />
<q-input
disable
standout
readonly
class="custom-input"
dense
lazy-rules
v-model="posNoId"
:label="`${'เลขที่ตำแหน่ง'}`"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input disable readonly class="custom-input" standout dense lazy-rules v-model="positionId"
:label="`${'ตำแหน่ง'}`" />
<q-input
disable
readonly
class="custom-input"
standout
dense
lazy-rules
v-model="positionId"
:label="`${'ตำแหน่ง'}`"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-select :class="getClass(edit)" :outlined="edit" :readonly="!edit" class="custom-input" standout
dense hide-bottom-space lazy-rules v-model="positionPathSideId"
:rules="[(val: string) => !!val || `${'ด้าน/สาขา'}`]" :label="`${'ด้าน/สาขา'}`" />
<q-select
:class="getClass(edit)"
:outlined="edit"
:readonly="!edit"
class="custom-input"
standout
dense
hide-bottom-space
lazy-rules
v-model="positionPathSideId"
:rules="[(val: string) => !!val || `${'ด้าน/สาขา'}`]"
:label="`${'ด้าน/สาขา'}`"
/>
</div>
<!-- :rules="[(val:string) => !!val || `${'กรุณาเลือกด้าน/สาขา'}`]" -->
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input disable readonly class="custom-input" standout dense lazy-rules v-model="positionTypeId"
:label="`${'ประเภทตำแหน่ง'}`" />
<q-input
disable
readonly
class="custom-input"
standout
dense
lazy-rules
v-model="positionTypeId"
:label="`${'ประเภทตำแหน่ง'}`"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input disable readonly class="custom-input" standout dense lazy-rules v-model="positionLineId"
:label="`${'สายงาน'}`" />
<q-input
disable
readonly
class="custom-input"
standout
dense
lazy-rules
v-model="positionLineId"
:label="`${'สายงาน'}`"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-select :class="getClass(edit)" :outlined="edit" :readonly="!edit" class="custom-input" standout
dense lazy-rules :options="positionLevelOptions" v-model="positionLevelId" :label="`${'ระดับ'}`"
hide-bottom-space :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]" emit-value
map-options />
<q-select
:class="getClass(edit)"
:outlined="edit"
:readonly="!edit"
class="custom-input"
standout
dense
lazy-rules
:options="positionLevelOptions"
v-model="positionLevelId"
:label="`${'ระดับ'}`"
hide-bottom-space
:rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]"
emit-value
map-options
/>
</div>
<div class="col-sx-12 col-sm-12 col-md-12">
<q-separator inset size="2px" class="q-my-md" />
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
:borderless="!edit" v-model="amount" :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
:label="`${'เงินเดือน'}`" @update:modelValue="clickEditRow" type="number" hide-bottom-space />
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="amount"
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
:label="`${'เงินเดือน'}`"
@update:modelValue="clickEditRow"
type="number"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
:borderless="!edit" v-model="positionSalaryAmount" :rules="[
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="positionSalaryAmount"
:rules="[
(val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
]" :label="`${'เงินประจำตำแหน่ง'}`" @update:modelValue="clickEditRow" type="number"
hide-bottom-space />
]"
:label="`${'เงินประจำตำแหน่ง'}`"
@update:modelValue="clickEditRow"
type="number"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
:borderless="!edit" v-model="mouthSalaryAmount" :rules="[
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="mouthSalaryAmount"
:rules="[
(val) =>
!!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
]" :label="`${'เงินค่าตอบแทนรายเดือน'}`" @update:modelValue="clickEditRow" type="number"
hide-bottom-space />
]"
:label="`${'เงินค่าตอบแทนรายเดือน'}`"
@update:modelValue="clickEditRow"
type="number"
hide-bottom-space
/>
</div>
</div>
</q-scroll-area>
@ -1366,29 +1602,59 @@ watch(expiredAccount, () => {
</q-card-section>
<q-separator />
<DialogFooter v-model:editvisible="edit" :validate="validateData" v-model:modalEdit="modalEdit"
:save="saveAppoint" />
<DialogFooter
v-model:editvisible="edit"
:validate="validateData"
v-model:modalEdit="modalEdit"
:save="saveAppoint"
/>
</q-form>
</q-card>
</q-dialog>
<q-form ref="myForm">
<DialogCard v-model:Modal="modal" :getdetail="itemtest" :close="clickClose" :validate="validateData" />
<DialogCard
v-model:Modal="modal"
:getdetail="itemtest"
:close="clickClose"
:validate="validateData"
/>
</q-form>
<q-dialog v-model="modal_right" persistent>
<q-card style="width: 800px">
<q-form ref="myForm">
<DialogHeader :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`" :close="clickClose" />
<DialogHeader
:title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${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="positionMasterUserNote" :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">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
:readonly="!edit"
:borderless="!edit"
v-model="positionMasterUserNote"
: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>
@ -1396,8 +1662,12 @@ watch(expiredAccount, () => {
</div>
</q-card-section>
<q-separator />
<DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit" :validate="validateData"
:save="modalEdit ? savePostpone : saveDisclaim" />
<DialogFooter
v-model:editvisible="edit"
v-model:modalEdit="modalEdit"
:validate="validateData"
:save="modalEdit ? savePostpone : saveDisclaim"
/>
</q-form>
</q-card>
</q-dialog>
@ -1406,7 +1676,10 @@ watch(expiredAccount, () => {
<q-dialog v-model="modalwaitInfo" persistent>
<q-card style="width: 500px; max-width: 500px">
<q-form ref="myForm">
<DialogHeader :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`" :close="clickClose" />
<DialogHeader
:title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`"
:close="clickClose"
/>
<q-separator />
<q-card-section class="q-p-sm">
<div class="row">
@ -1416,7 +1689,14 @@ watch(expiredAccount, () => {
<div class="row q-pt-md">
<div class="col-3 text-grey-7 q-mt-sm">เอกสารหลักฐาน</div>
<div class="col-2 q-mt-sm">กรอกเหตุผล</div>
<q-btn color="primary" flat dense round size="14px" icon="mdi-download" />
<q-btn
color="primary"
flat
dense
round
size="14px"
icon="mdi-download"
/>
</div>
</q-card-section>
<q-separator />

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

@ -53,6 +53,82 @@ 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;
}
export type {
DataOption,
DataOptionInsignia,
@ -63,4 +139,9 @@ export type {
EduOps,
InsigniaOps,
CheckboxItem,
Property,
PointExam,
Education,
Family,
Address,
};