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

Merge branch 'develop' into nice_dev

Browse source 
# Conflicts:
#	src/modules/07_insignia/router.ts
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-07-17 14:59:24 +07:00
commit d62883f5a1
27 changed files with 2182 additions and 952 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
src/assets/05_modules.pdf Normal file
View file

Binary file not shown.

88
src/components/Table.vue Normal file
View file

@ -0,0 +1,88 @@
<template>
<q-table
ref="table"
flat
bordered
class="custom-header-table"
v-bind="attrs"
virtual-scroll
:virtual-scroll-sticky-size-start="48"
dense
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
<template v-for="(_, slot) in slots" v-slot:[slot]="scope">
<slot :name="slot" v-bind="scope || {}" />
</template>
</q-table>
</template>
<script setup lang="ts">
import { ref, useAttrs, useSlots } from "vue";
const attrs = ref<any>(useAttrs());
const slots = ref<any>(useSlots());
const props = defineProps({
paging: {
type: Boolean,
defualt: false,
},
});
const pagination = ref({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
});
const paginationLabel = (start: string, end: string, total: string) => {
if (props.paging == true)
return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
else return start + "-" + end + " ใน " + total;
};
</script>
<style lang="scss">
.icon-color {
color: #4154b3;
}
.custom-header-table {
height: auto;
.q-table tr:nth-child(odd) td {
background: white;
}
.q-table tr:nth-child(even) td {
background: #f8f8f8;
}
.q-table thead tr {
background: #ecebeb;
}
.q-table thead tr th {
position: sticky;
z-index: 1;
}
/* this will be the loading indicator */
.q-table thead tr:last-child th {
/* height of all previous header rows */
top: 48px;
}
.q-table thead tr:first-child th {
top: 0;
}
}
</style>

5
src/main.ts
View file

@ -70,6 +70,11 @@ app.component(
defineAsyncComponent(() => import("@/components/Selector.vue"))
);
app.component(
"d-table",
defineAsyncComponent(() => import("@/components/Table.vue"))
);
app.config.globalProperties.$http = http;
app.mount("#app");

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

@ -299,7 +299,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
รายการสอบแข่งขัน / คัดเลือก
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row q-col-gutter-md">
<div class="row q-col-gutter-sm">
<div class="row col-12 q-col-gutter-sm">
<q-select
class="col-xs-12 col-sm-3 col-md-2"
@ -422,7 +422,8 @@ const paginationLabel = (start: number, end: number, total: number) => {
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
color="primary"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"

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

@ -534,7 +534,7 @@ const OriginalDataFetch = async () => {
// ดูรายการหน้าต่อไป
const redirectToPage = (id?: number) => {
router.push({ name: "placementDetail" });
// router.push({ name: "placementDetail" });
router.push(`/placement/order/detail`);
};

110
src/modules/05_placement/components/OrderPlacement/step/step02.vue
View file

@ -46,9 +46,7 @@
/>
</div>
</div>
<q-table
flat
bordered
<d-table
:rows="rows"
:columns="columns"
:visible-columns="visibleColumns"
@ -56,9 +54,6 @@
row-key="name"
selection="multiple"
v-model:selected="selected"
class="custom-header-table"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header-selection="scope">
<q-checkbox
@ -70,20 +65,6 @@
</template>
<template v-slot:body-selection="scope">
<!-- <q-checkbox
keep-color
color="primary"
dense
:model-value="scope.selected"
@update:model-value="
(val, evt) => {
Object.getOwnPropertyDescriptor(scope, 'selected').set(
val,
evt
);
}
"
/> -->
<q-checkbox
keep-color
color="primary"
@ -97,56 +78,13 @@
<div v-if="props.col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<!-- <div v-else-if="props.col.name == 'educate'">
<q-select
:class="getClass(true)"
hide-bottom-space
multiple
:outlined="true"
dense
lazy-rules
:readonly="!true"
:borderless="!true"
v-model="props.value"
:rules="[(val:any) => !!val || `${'กรุณาเลือกวุฒิการศึกษา'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกวุฒิการศึกษา'}`]"
:label="`${'เลือกวุฒิการศึกษา'}`"
emit-value
map-options
option-label="name"
:options="[]"
option-value="id"
input-debounce="0"
color="primary"
>
<template v-slot:prepend>
<q-icon name="cast_for_education" color="primary" />
</template>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-black">
ไม่พบข้อมูลที่ค้นหา
</q-item-section>
</q-item>
</template>
</q-select>
</div> -->
<div v-else @click="click(props)">
{{ props.value }}
</div>
</q-td>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
color="primary"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</d-table>
</div>
<q-separator />
<div class="flex justify-end q-pa-sm q-gutter-sm">
@ -229,7 +167,7 @@ const columns = ref<QTableProps["columns"]>([
},
]);
const rows = [
const rows = ref<any>([
{
no: "0ac56905-1a74-4606-a120-233340adde95",
name: "นางนัทธ์ เหล่าสกุล",
@ -296,7 +234,7 @@ const rows = [
idcard: "6598455632145",
educate: "ปริญญาตรี",
},
];
]);
const selected = ref([]);
const pagination = ref({
sortBy: "desc",
@ -331,13 +269,6 @@ const selectData = (row: any) => {};
const refresh = () => {};
const paginationLabel = (start: number, end: number, total: number) => {
// if (props.paging == true)
// return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
// else
return start + "-" + end + " ใน " + total;
};
const resetFilter = () => {
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
filter.value = "";
@ -351,33 +282,4 @@ const getClass = (val: boolean) => {
};
};
</script>
<style lang="scss">
.icon-color {
color: #4154b3;
}
.custom-header-table {
.q-table tr:nth-child(odd) td {
background: white;
}
.q-table tr:nth-child(even) td {
background: #f8f8f8;
}
.q-table thead tr {
background: #ecebeb;
}
.q-table thead tr th {
position: sticky;
z-index: 1;
}
/* this will be the loading indicator */
.q-table thead tr:last-child th {
/* height of all previous header rows */
top: 48px;
}
.q-table thead tr:first-child th {
top: 0;
}
}
</style>
<style lang="scss"></style>

74
src/modules/05_placement/components/OrderPlacement/step/step03.vue
View file

@ -46,18 +46,12 @@
/>
</div>
</div>
<q-table
flat
bordered
dense
<d-table
:rows="rows"
:columns="columns"
:visible-columns="visibleColumns"
:filter="filter"
row-key="name"
class="custom-header-table"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -127,18 +121,7 @@
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
color="primary"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</d-table>
</div>
<q-separator />
<div class="flex justify-end q-pa-sm q-gutter-sm">
@ -245,10 +228,7 @@
/>
</div>
</div>
<q-table
flat
bordered
dense
<d-table
:rows="rowsModal"
:columns="columnsModal"
:visible-columns="visibleColumnsModal"
@ -256,9 +236,6 @@
row-key="name"
selection="multiple"
v-model:selected="selectedModal"
class="custom-header-table"
:pagination-label="paginationLabel"
v-model:pagination="paginationModal"
>
<template v-slot:header-selection="scope">
<q-checkbox
@ -303,18 +280,7 @@
</div>
</q-td>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="paginationModal.page"
color="primary"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</d-table>
</div>
</div>
</q-card-section>
@ -715,34 +681,4 @@ const onSelected = async (id: string) => {
const deleteData = async (id: string) => {};
</script>
<style lang="scss">
.icon-color {
color: #4154b3;
}
.custom-header-table {
height: auto;
.q-table tr:nth-child(odd) td {
background: white;
}
.q-table tr:nth-child(even) td {
background: #f8f8f8;
}
.q-table thead tr {
background: #ecebeb;
}
.q-table thead tr th {
position: sticky;
z-index: 1;
}
/* this will be the loading indicator */
.q-table thead tr:last-child th {
/* height of all previous header rows */
top: 48px;
}
.q-table thead tr:first-child th {
top: 0;
}
}
</style>
<style lang="scss"></style>

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

@ -439,9 +439,7 @@ onMounted(async () => {
// myEventHandler(e);
// });
const pdfData = usePDF(
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
);
const pdfData = usePDF("/src/assets/05_modules.pdf");
setTimeout(() => {
pdfSrc.value = pdfData.pdf.value;

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

@ -101,6 +101,13 @@ onMounted(async () => {
await changeTab("information");
});
const guidCheck = (id: string) => {
if (id == "00000000-0000-0000-0000-000000000000") {
return null;
}
return id;
};
const fetchData = async () => {
showLoader();
await http
@ -118,11 +125,12 @@ const fetchData = async () => {
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.genderId = guidCheck(data.genderId) ?? "";
InformationData.value.prefixId = guidCheck(data.prefixId) ?? "";
InformationData.value.relationshipId =
guidCheck(data.relationshipId) ?? "";
InformationData.value.religionId = guidCheck(data.religionId) ?? "";
InformationData.value.bloodGroupId = guidCheck(data.bloodGroupId) ?? "";
InformationData.value.dateOfBirth = new Date(data.dateOfBirth);
InformationData.value.age = data.age;
InformationData.value.telephone = data.telephone;
@ -131,33 +139,39 @@ const fetchData = async () => {
AddressData.value.currentAddress = data.currentAddress ?? "";
AddressData.value.registSame = data.registSame ? "1" : "0";
AddressData.value.registSubDistrict = data.registSubDistrict ?? "";
AddressData.value.registSubDistrictId = data.registSubDistrictId ?? "";
AddressData.value.registSubDistrictId =
guidCheck(data.registSubDistrictId) ?? "";
AddressData.value.registZipCode = data.registZipCode ?? "";
AddressData.value.registDistrict = data.registDistrict ?? "";
AddressData.value.registDistrictId = data.registDistrictId ?? "";
AddressData.value.registDistrictId =
guidCheck(data.registDistrictId) ?? "";
AddressData.value.registProvince = data.registProvince ?? "";
AddressData.value.registProvinceId = data.registProvinceId ?? "";
AddressData.value.registProvinceId =
guidCheck(data.registProvinceId) ?? "";
AddressData.value.currentSubDistrict = data.currentSubDistrict ?? "";
AddressData.value.currentSubDistrictId = data.currentSubDistrictId ?? "";
AddressData.value.currentSubDistrictId =
guidCheck(data.currentSubDistrictId) ?? "";
AddressData.value.currentZipCode = data.currentZipCode ?? "";
AddressData.value.currentDistrict = data.currentDistrict ?? "";
AddressData.value.currentDistrictId = data.currentDistrictId ?? "";
AddressData.value.currentDistrictId =
guidCheck(data.currentDistrictId) ?? "";
AddressData.value.currentProvince = data.currentProvince ?? "";
AddressData.value.currentProvinceId = data.currentProvinceId ?? "";
AddressData.value.currentProvinceId =
guidCheck(data.currentProvinceId) ?? "";
FamilyData.value.couple = data.couple ? "1" : "0";
FamilyData.value.marryPrefix = data.marryPrefix ?? "";
FamilyData.value.marryPrefixId = data.marryPrefixId ?? "";
FamilyData.value.marryPrefixId = guidCheck(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.fatherPrefixId = guidCheck(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.motherPrefixId = guidCheck(data.motherPrefixId) ?? "";
FamilyData.value.motherFirstName = data.motherFirstName ?? "";
FamilyData.value.motherLastName = data.motherLastName ?? "";
FamilyData.value.motherOccupation = data.motherOccupation ?? "";
@ -179,8 +193,9 @@ const fetchData = async () => {
let listRow: Education[] = [];
data.education.map((row: any) => {
listRow.push({
id: row.id ?? "",
id: guidCheck(row.id) ?? "",
educationLevel: row.educationLevel ?? "",
educationLevelId: guidCheck(row.educationLevelId) ?? "",
institute: row.institute ?? "",
degree: row.degree ?? "",
field: row.field ?? "",
@ -191,11 +206,11 @@ const fetchData = async () => {
fundName: row.fundName ?? "",
durationYear: row.durationYear ?? 0,
finishDate: row.finishDate ?? new Date(),
isDate: row.isDate ?? "",
startDate: row.startDate ? new Date(row.startDate).getFullYear() : 0,
endDate: row.endDate ? new Date(row.endDate).getFullYear() : 0,
isDate: row.isDate ? "true" : "false",
startDate: row.startDate ? new Date(row.startDate) : new Date(),
endDate: row.endDate ? new Date(row.endDate) : new Date(),
positionPath: row.positionPath ?? "",
isEducation: row.isEducation ?? "",
isEducation: row.isEducation ? true : false,
});
});
EducationData.value = listRow;
@ -204,8 +219,8 @@ const fetchData = async () => {
data.certificates.map((row: any) => {
listCert.push({
id: row.id ?? "",
certificateNo: row.certificateNo ?? "",
id: guidCheck(row.id) ?? "",
certificateNo: guidCheck(row.certificateNo) ?? "",
issuer: row.issuer ?? "",
issueDate: new Date(row.issueDate) ?? new Date(),
expireDate: new Date(row.expireDate) ?? new Date(),

68
src/modules/05_placement/components/PersonalDetail/DialogFooter.vue
View file

@ -4,6 +4,7 @@ const props = defineProps({
next: Boolean,
previous: Boolean,
modalEdit: Boolean,
delete: Boolean,
clickNext: {
type: Function,
default: () => console.log("not function"),
@ -67,57 +68,64 @@ const clickPrevious = async () => {
</script>
<template>
<q-card-actions class="text-primary q-py-sm">
<q-btn
flat round
icon="mdi-menu-left"
@click="clickPrevious"
v-if="modalEdit == true"
<q-btn
flat
round
icon="mdi-menu-left"
@click="clickPrevious"
v-if="modalEdit == true"
:disable="previous == false"
:color="!previous ? 'grey-7' : 'public'" />
<q-btn
flat round
icon="mdi-menu-right"
@click="clickNext"
v-if="modalEdit == true" :disable="next == false"
:color="!next ? 'grey-7' : 'public'" />
:color="!previous ? 'grey-7' : 'public'"
/>
<q-btn
flat
round
icon="mdi-menu-right"
@click="clickNext"
v-if="modalEdit == true"
:disable="next == false"
:color="!next ? 'grey-7' : 'public'"
/>
<q-space />
<q-btn
v-if="modalEdit == true"
<q-btn
v-if="modalEdit == true"
unelevated
label="ลบข้อมูล"
color="red"
@click="clickDelete"
color="red"
@click="clickDelete"
><!-- icon="mdi-delete"
<q-tooltip>ลบข้อมูล</q-tooltip> -->
</q-btn>
<q-btn
<q-btn
v-show="editvisible"
flat
:disabled="!editvisible"
:outline="!editvisible"
flat
:disabled="!editvisible"
:outline="!editvisible"
:color="!editvisible ? 'grey-7' : 'red'"
@click="cancel()"
@click="cancel()"
label="ยกเลิกแก้ไข"
v-if="modalEdit == true">
v-if="modalEdit == true"
>
<!-- icon="mdi-undo"
<q-tooltip>ยกเลิก</q-tooltip> -->
</q-btn>
<q-btn
v-if="!editvisible"
<q-btn
v-if="!editvisible"
outline
label="แก้ไขข้อมูล"
:disabled="editvisible"
:disabled="editvisible"
:color="editvisible ? 'grey-7' : 'primary'"
@click="edit">
@click="edit"
>
<!-- icon="mdi-pencil-outline"
<q-tooltip></q-tooltip> -->
</q-btn>
<q-btn
<q-btn
v-if="editvisible"
unelevated
:disabled="!editvisible"
:color="!editvisible ? 'grey-7' : 'public'"
:disabled="!editvisible"
:color="!editvisible ? 'grey-7' : 'public'"
@click="checkSave"
label="บันทึก"
><!-- icon="mdi-content-save-outline"

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

@ -57,6 +57,8 @@ const OpsFilter = ref<EduOps>({
levelOptions: [],
positionPathOptions: [],
});
const isDate = ref<string>("true");
const isEducation = ref<boolean>();
const positionPathId = ref<string>();
const institute = ref<string>();
const degree = ref<string>();
@ -69,7 +71,9 @@ const other = ref<string>();
const fundName = ref<string>();
const finishDate = ref<Date>(new Date());
const startDate = ref<number>(new Date().getFullYear());
const startDate2 = ref<Date>(new Date());
const endDate = ref<number>(new Date().getFullYear());
const endDate2 = ref<Date>(new Date());
const minDate = ref<Date>();
const myForm = ref<any>(); //form data input
const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
@ -80,13 +84,9 @@ const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่
const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
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>(route.params.id.toString());
const rows = ref<Education[]>(props.data);
const filter = ref<string>(""); //search data table
const visibleColumns = ref<String[]>([]);
@ -102,7 +102,7 @@ profileData.education.columns.length == 0
"durationYear",
"other",
"fundName",
"positionPath",
// "positionPath",
"finishDate",
"startDate",
"endDate",
@ -164,17 +164,17 @@ const columns = ref<QTableProps["columns"]>([
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionPath",
align: "left",
label: "เป็นวุฒิการศึกษาในตำแหน่ง",
sortable: true,
field: "positionPath",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
// {
// name: "positionPath",
// align: "left",
// label: "เป็นวุฒิการศึกษาในตำแหน่ง",
// sortable: true,
// field: "positionPath",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
{
name: "degree",
align: "left",
@ -264,202 +264,6 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const columnsHistory = ref<QTableProps["columns"]>([
{
name: "level",
align: "left",
label: "ระดับศึกษา",
sortable: true,
field: "level",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "institute",
align: "left",
label: "สถานศึกษา",
sortable: true,
field: "institute",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "startDate",
align: "left",
label: "ตั้งแต่",
sortable: true,
field: "startDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "endDate",
align: "left",
label: "ถึง",
sortable: true,
field: "endDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "finishDate",
align: "left",
label: "วันที่สำเร็จการศึกษา",
sortable: true,
field: "finishDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionPath",
align: "left",
label: "เป็นวุฒิการศึกษาในตำแหน่ง",
sortable: true,
field: "positionPath",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "degree",
align: "left",
label: "วุฒิการศึกษา",
sortable: true,
field: "degree",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "field",
align: "left",
label: "สาขาวิชา/ทาง",
sortable: true,
field: "field",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "fundName",
align: "left",
label: "ทุน",
sortable: true,
field: "fundName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "gpa",
align: "left",
label: "เกรดเฉลี่ย",
sortable: true,
field: "gpa",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "country",
align: "left",
label: "ประเทศ",
sortable: true,
field: "country",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "other",
align: "left",
label: "ข้อมูลการติดต่อ",
sortable: true,
field: "other",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "duration",
align: "left",
label: "ระยะเวลา",
sortable: true,
field: "duration",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "durationYear",
align: "left",
label: "ระยะเวลาหลักสูตร",
sortable: true,
field: "durationYear",
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[]>([
"level",
"institute",
"degree",
"field",
"gpa",
"country",
"duration",
"durationYear",
"other",
"positionPath",
"fundName",
"finishDate",
"startDate",
"endDate",
"createdFullName",
"createdAt",
]);
watch(startDate, (count, prevCount) => {
minDate.value = new Date(`${startDate.value}-01-01`);
@ -498,24 +302,30 @@ const fetchLevel = async () => {
};
const fetchPositionPath = async () => {
showLoader();
await http
.get(config.API.positionPath)
.then((res) => {
const data = res.data.result;
let option: optionData[] = [];
data.map((r: optionData) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
Ops.value.positionPathOptions = option;
OpsFilter.value.positionPathOptions = option;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
let option: any = [];
option.push({ id: true, name: "ใช่" });
option.push({ id: false, name: "ไม่ใช่" });
Ops.value.positionPathOptions = option;
OpsFilter.value.positionPathOptions = option;
/////////////////////////////////
// showLoader();
// await http
// .get(config.API.positionPath)
// .then((res) => {
// const data = res.data.result;
// let option: optionData[] = [];
// data.map((r: optionData) => {
// option.push({ id: r.id.toString(), name: r.name.toString() });
// });
// Ops.value.positionPathOptions = option;
// OpsFilter.value.positionPathOptions = option;
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(() => {
// hideLoader();
// });
};
const filterSelector = (val: any, update: Function, refData: string) => {
@ -565,18 +375,11 @@ const clickNext = async () => {
*/
const getData = () => {
const row = rows.value[rowIndex.value];
const filter = OpsFilter.value.levelOptions.filter(
(r: any) => r.name == row.educationLevel
);
const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
(r: any) => r.name == row.positionPath
);
const result = filter.length > 0 ? filter[0].id : "";
const resultPath =
filterPositionPath.length > 0 ? filterPositionPath[0].id : "";
levelId.value = result;
positionPathId.value = resultPath;
levelId.value = row.educationLevelId;
isDate.value = row.isDate;
isEducation.value = row.isEducation;
// positionPathId.value = resultPath;
institute.value = row.institute;
degree.value = row.degree;
field.value = row.field;
@ -587,8 +390,17 @@ const getData = () => {
other.value = row.other;
fundName.value = row.fundName;
finishDate.value = row.finishDate;
startDate.value = row.startDate;
endDate.value = row.endDate;
startDate.value =
row.isDate == "false"
? new Date(row.startDate).getFullYear()
: new Date().getFullYear();
endDate.value =
row.isDate == "false"
? new Date(row.endDate).getFullYear()
: new Date().getFullYear();
startDate2.value =
row.isDate == "true" ? new Date(row.startDate) : new Date();
endDate2.value = row.isDate == "true" ? new Date(row.endDate) : new Date();
id.value = row.id;
};
@ -660,8 +472,15 @@ const saveData = async () => {
other: other.value,
fundName: fundName.value,
finishDate: dateToISO(finishDate.value),
startDate: new Date(`${startDate.value}-01-01`),
endDate: new Date(`${endDate.value}-01-01`),
startDate:
isDate.value == "true"
? new Date(startDate2.value)
: new Date(`${startDate.value}-01-01`),
endDate:
isDate.value == "true"
? new Date(endDate2.value)
: new Date(`${endDate.value}-01-01`),
isDate: isDate.value == "true",
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
@ -703,8 +522,15 @@ const editData = async () => {
other: other.value,
fundName: fundName.value,
finishDate: new Date(finishDate.value),
startDate: new Date(`${startDate.value}-01-01`),
endDate: new Date(`${endDate.value}-01-01`),
startDate:
isDate.value == "true"
? new Date(startDate2.value)
: new Date(`${startDate.value}-01-01`),
endDate:
isDate.value == "true"
? new Date(endDate2.value)
: new Date(`${endDate.value}-01-01`),
isDate: isDate.value == "true",
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
@ -780,24 +606,14 @@ const clickClose = async () => {
* @param _props ค่า props ใน row ที่เลือก
*/
const selectData = async (_props: DataProps) => {
const filter = OpsFilter.value.levelOptions.filter(
(r: any) => r.name == _props.row.educationLevel
);
const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
(r: any) => r.name == _props.row.positionPath
);
const result = filter.length > 0 ? filter[0].id : "";
const resultPath =
filterPositionPath.length > 0 ? filterPositionPath[0].id : "";
// console.log(_props.row);
modalEdit.value = true;
modal.value = true;
edit.value = false;
rawItem.value = _props.row;
rowIndex.value = _props.rowIndex;
levelId.value = result;
positionPathId.value = resultPath;
levelId.value = _props.row.educationLevelId;
// positionPathId.value = resultPath;
// levelId.value = _props.row.levelId;
// positionPathId.value = _props.row.positionPathId;
institute.value = _props.row.institute;
@ -810,9 +626,13 @@ const selectData = async (_props: DataProps) => {
other.value = _props.row.other;
fundName.value = _props.row.fundName;
finishDate.value = _props.row.finishDate;
startDate.value = _props.row.startDate;
endDate.value = _props.row.endDate;
startDate.value = new Date(_props.row.startDate).getFullYear();
endDate.value = new Date(_props.row.endDate).getFullYear();
startDate2.value = new Date(_props.row.startDate);
endDate2.value = new Date(_props.row.endDate);
id.value = _props.row.id;
isDate.value = _props.row.isDate;
isEducation.value = _props.row.isEducation;
await checkRowPage();
};
@ -837,6 +657,8 @@ const addData = () => {
finishDate.value = new Date();
startDate.value = new Date().getFullYear();
endDate.value = new Date().getFullYear();
startDate2.value = new Date();
endDate2.value = new Date();
};
/**
@ -868,50 +690,6 @@ const clickEditRow = () => {
editRow.value = true;
};
/**
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
* @param row ข้อมูล row ที่ดูประวัติการแก้ไข
*/
const clickHistory = async (row: RequestItemsObject) => {
modalHistory.value = true;
showLoader();
await http
.get(config.API.profileEduHisId(row.id))
.then((res) => {
let data = res.data.result;
rowsHistory.value = [];
data.map((e: ResponseObject) => {
rowsHistory.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) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
/**
* validate input ใน dialog
*/
@ -956,14 +734,18 @@ const getClass = (val: boolean) => {
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
@click="selectData(props)"
>
<div
v-if="col.name == 'startDate' || col.name == 'endDate'"
class="table_ellipsis"
>
{{ col.value + 543 }}
{{
props.row.isDate == "true"
? date2Thai(col.value)
: new Date(col.value).getFullYear() + 543
}}
</div>
<div v-else-if="col.name == 'finishDate'" class="table_ellipsis">
{{ date2Thai(col.value) }}
@ -972,7 +754,7 @@ const getClass = (val: boolean) => {
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<!-- <q-td auto-width>
<q-btn
color="info"
flat
@ -982,13 +764,12 @@ const getClass = (val: boolean) => {
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-td> -->
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
@ -1038,94 +819,219 @@ const getClass = (val: boolean) => {
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="startDate"
:locale="'th'"
autoApply
year-picker
: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"
<div class="col-12">
<q-card flat bordered class="q-px-sm q-pb-sm borderCard">
<div class="row col-12 q-gutter-md q-py-sm text-grey-7">
<q-radio
v-model="isDate"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="false"
label="ปี"
dense
lazy-rules
:borderless="!edit"
:model-value="startDate + 543"
:rules="[(val) => !!val || `${'กรุณาเลือกปีตั้งแต่'}`]"
hide-bottom-space
:label="`${'ตั้งแต่'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
v-model="endDate"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
:min-date="minDate"
:readonly="!edit"
@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"
:disable="!edit"
/>
<q-radio
v-model="isDate"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="true"
label="วัน/เดือน/ปี"
dense
lazy-rules
:borderless="!edit"
:model-value="endDate + 543"
:rules="[(val) => !!val || `${'กรุณาเลือกปีถึง'}`]"
hide-bottom-space
:label="`${'ถึง'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
:disable="!edit"
/>
</div>
<div class="col-12 row q-col-gutter-sm">
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
v-if="isDate === 'false'"
menu-class-name="modalfix"
:readonly="!edit"
v-model="startDate"
:locale="'th'"
autoApply
year-picker
: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="startDate + 543"
:rules="[
(val) =>
!!val || `${'กรุณาเลือกปีที่เริ่มต้นศึกษา'}`,
]"
hide-bottom-space
:label="`${'ปีที่เริ่มต้นศึกษา'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
v-else
menu-class-name="modalfix"
:readonly="!edit"
v-model="startDate2"
: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(startDate2)"
:rules="[
(val) =>
!!val ||
`${'กรุณาเลือกวัน เดือน ปี ที่เริ่มต้นศึกษา'}`,
]"
hide-bottom-space
:label="`${'วัน เดือน ปี ที่เริ่มต้นศึกษา'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
v-if="isDate === 'false'"
menu-class-name="modalfix"
v-model="endDate"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
:min-date="minDate"
:readonly="!edit"
@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="endDate + 543"
:rules="[
(val) => !!val || `${'กรุณาเลือกปีที่จบการศึกษา'}`,
]"
hide-bottom-space
:label="`${'ปีที่จบการศึกษา'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
v-else
menu-class-name="modalfix"
:readonly="!edit"
v-model="endDate2"
: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(endDate2)"
:rules="[
(val) =>
!!val ||
`${'กรุณาเลือกวัน เดือน ปี ที่จบการศึกษา'}`,
]"
hide-bottom-space
:label="`${'วัน เดือน ปี ที่จบการศึกษา'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
</q-card>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
@ -1172,7 +1078,7 @@ const getClass = (val: boolean) => {
</template>
</datepicker>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<!-- <div class="col-xs-6 col-sm-6 col-md-6">
<selector
:class="getClass(edit)"
:outlined="edit"
@ -1180,8 +1086,7 @@ const getClass = (val: boolean) => {
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="positionPathId"
:rules="[(val:string) => !!val || `${'กรุณาเลือกเป็นวุฒิการศึกษาในตำแหน่ง'}`]"
v-model="isEducation"
hide-bottom-space
:label="`${'เป็นวุฒิการศึกษาในตำแหน่ง'}`"
@update:modelValue="clickEditRow"
@ -1196,7 +1101,7 @@ const getClass = (val: boolean) => {
doneFn:Function) => filterSelector(inputValue, doneFn,'positionPathOptions'
) "
/>
</div>
</div> -->
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
@ -1326,6 +1231,7 @@ const getClass = (val: boolean) => {
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
:delete="isEducation"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
@ -1334,38 +1240,6 @@ const getClass = (val: boolean) => {
</q-form>
</q-card>
</q-dialog>
<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 == 'startDate' || col.name == 'endDate'"
class="table_ellipsis"
>
{{ col.value + 543 }}
</div>
<div
v-else-if="col.name == 'finishDate' || 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>
<style lang="scss">

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

@ -601,7 +601,7 @@ const getClass = (val: boolean) => {
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<!-- <q-td auto-width>
<q-btn
color="info"
flat
@ -611,7 +611,7 @@ const getClass = (val: boolean) => {
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-td> -->
</q-tr>
</template>
</ProfileTable>

2
src/modules/05_placement/components/PersonalList/OrgTree.vue
View file

@ -75,7 +75,7 @@ const loadTreeData = async () => {
};
function filterByPersonIdNull(obj: any) {
if (obj.name === null) {
if (obj.name === null && obj.isCondition != true) {
return true;
}
if (obj.children && obj.children.length > 0) {

2
src/modules/05_placement/components/PersonalList/TableView.vue
View file

@ -23,7 +23,7 @@
<q-table ref="table" flat bordered class="custom-header-table" v-bind="attrs" virtual-scroll
:virtual-scroll-sticky-size-start="48" dense :pagination-label="paginationLabel" v-model:pagination="pagination">
<template v-slot:pagination="scope">
<q-pagination v-model="pagination.page" color="primary" :max="scope.pagesNumber" :max-pages="5" size="sm"
<q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber" :max-pages="5" size="sm"
boundary-links direction-links></q-pagination>
</template>
<template v-slot:header="props">

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

@ -84,6 +84,7 @@ interface PointExam {
interface Education {
id: string;
educationLevel: string;
educationLevelId: string;
institute: string;
degree: string;
field: string;
@ -95,10 +96,10 @@ interface Education {
durationYear: number;
finishDate: Date;
isDate: string;
startDate: number;
endDate: number;
startDate: Date;
endDate: Date;
positionPath: string;
isEducation: string;
isEducation: boolean;
}
interface Family {

3
src/modules/05_placement/interface/request/Education.ts
View file

@ -7,6 +7,7 @@ interface DataProps {
interface RequestItemsObject {
id: string;
educationLevel: string;
educationLevelId: string;
level: string;
levelId: string;
positionPath: string;
@ -25,6 +26,8 @@ interface RequestItemsObject {
endDate: number;
createdFullName: string;
createdAt: Date;
isDate: string;
isEducation: boolean;
}
//columns

323
src/modules/06_retirement/views/Main.vue
View file

@ -2,168 +2,169 @@
<div class="toptitle text-dark col-12 row items-center">
ประกาศเกษียณอายุราชการ
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row q-col-gutter-sm">
<div class="row col-12 q-col-gutter-sm">
<q-select
class="col-xs-12 col-sm-3 col-md-1"
v-model="fiscalyear"
label="ปีงบประมาณ"
dense
emit-value
map-options
:options="fiscalyearOP"
option-value="id"
option-label="name"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
@update:model-value="searchFilterTable"
/>
<div>
<q-btn
@click="clickAdd()"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
</q-btn>
<q-menu>
<q-list style="min-width: 100px">
<q-item clickable @click="clickAdd">
<q-item-section>ขรก.กทม.สามัญ</q-item-section>
</q-item>
<q-item clickable @click="clickAdd">
<q-item-section>ลูกจ้างประจำ</q-item-section>
</q-item>
</q-list>
</q-menu>
</div>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12">
<div class="q-pa-sm">
<q-tabs
v-model="tab"
<q-card flat bordered class="col-12 q-mt-sm">
<div class="row col-12">
<q-tabs
v-model="tab"
dense
class="text-grey"
active-color="primary"
active-class="bg-teal-1"
indicator-color="primary"
align="left"
>
<q-tab name="samun" label="ขรก.กทม.สามัญ" />
<q-tab name="employee" label="ลูกจ้างประจำ" />
</q-tabs>
</div>
<q-separator/>
<div class="col-12 row q-pa-md">
<div class="row col-12">
<div class="row col-12 q-col-gutter-sm">
<q-select
v-model="fiscalyear"
label="ปีงบประมาณ"
dense
class="text-grey"
active-color="primary"
indicator-color="primary"
align="left"
narrow-indicator
>
<q-tab name="samun" label="ขรก.กทม.สามัญ" />
<q-tab name="employee" label="ลูกจ้างประจำ" />
</q-tabs>
</div>
emit-value
map-options
:options="fiscalyearOP"
option-value="id"
option-label="name"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
style="min-width: 150px;"
@update:model-value="searchFilterTable"
/>
<div>
<q-btn
@click="clickAdd()"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
</q-btn>
<!-- <q-menu>
<q-list style="min-width: 100px">
<q-item clickable @click="clickAdd">
<q-item-section>ขรก.กทม.สามัญ</q-item-section>
</q-item>
<q-item clickable @click="clickAdd">
<q-item-section>ลูกจ้างประจำ</q-item-section>
</q-item>
</q-list>
</q-menu> -->
</div>
<q-space />
<q-space />
<q-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="name"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
<q-td key="Date" :props="props">
{{ props.row.Date }}
</q-td>
<q-td key="retireNumber" :props="props">
{{ props.row.retireNumber }}
</q-td>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
color="red"
@click="clickDelete(props.row.id)"
icon="mdi-delete"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="primary"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12 q-pt-sm">
<q-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="name"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
<q-td key="Date" :props="props">
{{ props.row.Date }}
</q-td>
<q-td key="retireNumber" :props="props">
{{ props.row.retireNumber }}
</q-td>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
color="red"
@click="clickDelete(props.row.id)"
icon="mdi-delete"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="primary"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
</div>
</div>
</q-card>
@ -176,8 +177,6 @@ import type {
FormMainProbation,
FormMainProbation2,
} from "@/modules/05_placement/interface/request/Main";
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
import router from "@/router";
import { useQuasar } from "quasar";
const $q = useQuasar(); //ใช้ noti quasar

516
src/modules/07_insignia/components/Coin.vue Normal file
View file

@ -0,0 +1,516 @@
<template>
<div class="toptitle text-dark col-12 row items-center">
<!-- <q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.go(-1)"
/> -->
ประวัติการยื่นขอพระราชทานเหรียญจักรพรรดิมาลา
</div>
<q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders">
<q-tabs
v-model="tab"
align="left"
class="bg-white text-grey"
active-color="primary"
indicator-color="primary"
>
<q-tab name="yes" label="คนที่ยื่นขอ" />
<q-tab name="no" label="คนที่ไม่ยื่นขอ" />
</q-tabs>
<q-separator />
<div class="q-py-md q-px-lg">
<!-- <div>
<label class="q-mr-sm">รอบ</label>
<q-btn
flat
round
de
color="grey"
icon="mdi-menu-left"
:class="getArrow(arrow)"
@click="clickRound"
/>
</div>
<Transition>
<div v-if="arrow" class="bg-base rounded-borders q-pa-md">
<div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
<div class="col-xs-6 col-md-2">
<datepicker
menu-class-name="modalfix"
v-model="dateGoverment"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker bg-white"
:model-value="
dateGoverment != null ? date2Thai(dateGoverment) : null
"
:label="`${'วันที่ประกาศราชกิจจานุเบกษา'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-6 col-md-2">
<datepicker
menu-class-name="modalfix"
v-model="dateReceiver"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker bg-white"
:model-value="
dateReceiver != null ? date2Thai(dateReceiver) : null
"
:label="`${'วันที่ได้รับ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-6 col-md-2">
<q-input
class="bg-white"
outlined
dense
lazy-rules
v-model="issue"
:label="`${'ฉบับ'}`"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-md-2">
<q-input
class="bg-white"
outlined
dense
lazy-rules
v-model="book"
:label="`${'เล่มที่'}`"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-md-2">
<q-input
class="bg-white"
outlined
dense
lazy-rules
v-model="volume"
:label="`${'เล่ม'}`"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-md-2">
<q-input
class="bg-white"
outlined
dense
lazy-rules
v-model="section"
:label="`${'ตอนที่'}`"
hide-bottom-space
/>
</div>
<div class="col-xs-12 col-md-6">
<q-file
class="bg-white"
outlined
dense
v-model="government"
label="ราชกิจจานุเบกษา"
hide-bottom-space
lazy-rules
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-xs-12 col-md-6">
<q-file
class="bg-white"
outlined
dense
v-model="document"
label="เอกสารประกอบ"
hide-bottom-space
lazy-rules
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
</div>
</div>
</Transition> -->
<div :class="marginTop(arrow)">
<div class="col-12 row q-pb-sm items-center">
<selector
outlined
dense
lazy-rules
v-model="capYears"
hide-bottom-space
:label="`${'ปีงบประมาณ'}`"
emit-value
map-options
option-label="name"
:options="capYearsOption"
option-value="id"
use-input
input-debounce="0"
style="min-width: 150px"
class="gt-xs q-ml-sm"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'capYearsOption'
) "
/>
<q-space />
<div class="items-center" style="display: flex">
<!-- ค้นหาข้อความใน table -->
<q-input
standout
dense
v-model="filter"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
style="max-width: 200px"
class="q-ml-sm"
>
<template v-slot:append>
<q-icon v-if="filter == ''" name="search" />
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<!-- แสดงคอลัมน์ใน table -->
<q-select
v-model="visibleColumns"
:display-value="$q.lang.table.columns"
multiple
outlined
dense
:options="columns"
options-dense
option-value="name"
map-options
emit-value
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</div>
</div>
<d-table
:rows="rows"
:columns="columns"
:visible-columns="visibleColumns"
:filter="filter"
row-key="name"
>
<template v-slot:body-cell="props">
<q-td :props="props">
<div v-if="props.col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else>
{{ props.value }}
</div>
</q-td>
</template>
</d-table>
</div>
</div>
</q-card>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
// import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
import type { QTableProps, QInput } from "quasar";
// const router = useRouter();
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const tab = ref<string>("yes");
const arrow = ref<boolean>(false);
// const dateGoverment = ref<Date>(new Date());
// const dateReceiver = ref<Date>(new Date());
// const issue = ref<string>("");
// const book = ref<string>("");
// const volume = ref<string>("");
// const section = ref<string>("");
// const government = ref<any>(null);
// const document = ref<any>(null);
const capYears = ref<string>("");
const capYearsOption = ref<DataOption[]>([]);
const capYearsOptionFilter = ref<DataOption[]>([]);
const visibleColumns = ref<String[]>([
"no",
"cardid",
"name",
"position",
"range",
"salary",
"zone",
"school",
"date",
]);
const filterRef = ref<QInput>();
const filter = ref<string>("");
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
field: "no",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "cardid",
align: "left",
label: "เลขประจำตัวประชาชน",
field: "cardid",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "name",
align: "left",
label: "ชื่อ - นามสกุล",
field: "name",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "position",
align: "left",
label: "ตำแหน่ง",
field: "position",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "range",
align: "left",
label: "อันดับ",
field: "range",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "salary",
align: "left",
label: "เงินเดือน",
field: "salary",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "zone",
align: "left",
label: "เขต",
field: "zone",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "school",
align: "left",
label: "โรงเรียน",
field: "school",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "date",
align: "left",
label: "วันที่ยื่นขอ",
field: "date",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const rows = ref<any>([
{
no: "1",
cardid: "1XXXXXXXXXXXX",
name: "นางสาวรัชภรณ์ ภักดี",
position: "กกก",
range: "1",
salary: "XXXXXX",
zone: "1",
school: "โรงเรียน",
date: date2Thai(new Date()),
},
{
no: "2",
cardid: "1XXXXXXXXXXXX",
name: "นางสาวรัชภรณ์ ภักดี",
position: "กกก",
range: "1",
salary: "XXXXXX",
zone: "1",
school: "โรงเรียน",
date: date2Thai(new Date()),
},
{
no: "3",
cardid: "1XXXXXXXXXXXX",
name: "นางสาวรัชภรณ์ ภักดี",
position: "กกก",
range: "1",
salary: "XXXXXX",
zone: "1",
school: "โรงเรียน",
date: date2Thai(new Date()),
},
]);
onMounted(() => {
const op2: DataOption[] = [
{ id: "1", name: "2566" },
{ id: "2", name: "2565" },
{ id: "3", name: "2564" },
];
capYearsOption.value = op2;
capYearsOptionFilter.value = op2;
});
const clickRound = () => {
arrow.value = !arrow.value;
};
const resetFilter = () => {
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
filter.value = "";
filterRef.value!.focus();
};
const filterSelector = (val: any, update: Function, filtername: string) => {
switch (filtername) {
case "capYearsOption":
update(() => {
capYearsOption.value = capYearsOptionFilter.value.filter(
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;
default:
break;
}
};
// const getArrow = (val: boolean) => {
// return {
// "arrow cursor-pointer": !val,
// "arrow-active cursor-pointer": val,
// };
// };
const marginTop = (val: boolean) => {
return {
"": !val,
"q-mt-md": val,
};
};
</script>
<style lang="scss" scoped>
.arrow {
transition: transform 0.5s;
}
.arrow-active {
transition: transform 0.5s;
transform: rotate(-90deg);
}
.bg-base {
background-color: #efefef;
}
.v-enter-active,
.v-leave-active {
transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
</style>

502
src/modules/07_insignia/components/ResultInsignia.vue Normal file
View file

@ -0,0 +1,502 @@
<template>
<div class="toptitle text-dark col-12 row items-center">
<!-- <q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.go(-1)"
/> -->
บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์
</div>
<q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders">
<q-tabs
v-model="tab"
align="left"
class="bg-white text-grey"
active-color="primary"
indicator-color="primary"
>
<q-tab name="hight" label="ขั้นสายสะพาน" />
<q-tab name="low" label="ขั้นต่ำกว่าสายสะพาน" />
</q-tabs>
<q-separator />
<div class="q-py-md q-px-lg">
<div>
<label class="q-mr-sm">รอบ</label>
<q-btn
flat
round
de
color="grey"
icon="mdi-menu-left"
:class="getArrow(arrow)"
@click="clickRound"
/>
</div>
<Transition>
<div v-if="arrow" class="bg-base rounded-borders q-pa-md">
<div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
<div class="col-xs-6 col-md-2">
<datepicker
menu-class-name="modalfix"
v-model="dateGoverment"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker bg-white"
:model-value="
dateGoverment != null ? date2Thai(dateGoverment) : null
"
:label="`${'วันที่ประกาศราชกิจจานุเบกษา'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-6 col-md-2">
<datepicker
menu-class-name="modalfix"
v-model="dateReceiver"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker bg-white"
:model-value="
dateReceiver != null ? date2Thai(dateReceiver) : null
"
:label="`${'วันที่ได้รับ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-6 col-md-2">
<q-input
class="bg-white"
outlined
dense
lazy-rules
v-model="issue"
:label="`${'ฉบับ'}`"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-md-2">
<q-input
class="bg-white"
outlined
dense
lazy-rules
v-model="book"
:label="`${'เล่มที่'}`"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-md-2">
<q-input
class="bg-white"
outlined
dense
lazy-rules
v-model="volume"
:label="`${'เล่ม'}`"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-md-2">
<q-input
class="bg-white"
outlined
dense
lazy-rules
v-model="section"
:label="`${'ตอนที่'}`"
hide-bottom-space
/>
</div>
<div class="col-xs-12 col-md-6">
<q-file
class="bg-white"
outlined
dense
v-model="government"
label="ราชกิจจานุเบกษา"
hide-bottom-space
lazy-rules
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-xs-12 col-md-6">
<q-file
class="bg-white"
outlined
dense
v-model="document"
label="เอกสารประกอบ"
hide-bottom-space
lazy-rules
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
</div>
</div>
</Transition>
<div :class="marginTop(arrow)">
<div class="col-12 row q-pb-sm items-center">
<selector
outlined
dense
lazy-rules
v-model="selectType"
hide-bottom-space
:label="`${'ประเภทเครื่องราชฯ'}`"
emit-value
map-options
option-label="name"
:options="selectTypeOption"
option-value="id"
use-input
input-debounce="0"
style="min-width: 150px"
class="gt-xs q-ml-sm"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'selectTypeOption'
) "
/>
<selector
outlined
dense
lazy-rules
v-model="selectStatus"
hide-bottom-space
:label="`${'สถานะการบันทึก'}`"
emit-value
map-options
option-label="name"
:options="selectStatusOption"
option-value="id"
use-input
input-debounce="0"
style="min-width: 150px"
class="gt-xs q-ml-sm"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'selectStatusOption'
) "
/>
<q-space />
<div class="items-center" style="display: flex">
<!-- ค้นหาข้อความใน table -->
<q-input
standout
dense
v-model="filter"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
style="max-width: 200px"
class="q-ml-sm"
>
<template v-slot:append>
<q-icon v-if="filter == ''" name="search" />
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<!-- แสดงคอลัมน์ใน table -->
<q-select
v-model="visibleColumns"
:display-value="$q.lang.table.columns"
multiple
outlined
dense
:options="columns"
options-dense
option-value="name"
map-options
emit-value
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</div>
</div>
<d-table
:rows="rows"
:columns="columns"
:visible-columns="visibleColumns"
:filter="filter"
row-key="name"
>
<template v-slot:body-cell="props">
<q-td :props="props">
<div v-if="props.col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else>
{{ props.value }}
</div>
</q-td>
</template>
</d-table>
</div>
</div>
</q-card>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
// import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
import type { QTableProps, QInput } from "quasar";
// const router = useRouter();
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const tab = ref<string>("hight");
const arrow = ref<boolean>(false);
const dateGoverment = ref<Date>(new Date());
const dateReceiver = ref<Date>(new Date());
const issue = ref<string>("");
const book = ref<string>("");
const volume = ref<string>("");
const section = ref<string>("");
const government = ref<any>(null);
const document = ref<any>(null);
const selectStatus = ref<string>("");
const selectStatusOption = ref<DataOption[]>([]);
const selectStatusOptionFilter = ref<DataOption[]>([]);
const selectType = ref<string>("");
const selectTypeOption = ref<DataOption[]>([]);
const selectTypeOptionFilter = ref<DataOption[]>([]);
const visibleColumns = ref<String[]>([
"no",
"status",
"name",
"type",
"page",
"number",
]);
const filterRef = ref<QInput>();
const filter = ref<string>("");
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
field: "no",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "status",
align: "left",
label: "สถานะ",
field: "status",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "name",
align: "left",
label: "ชื่อ - สกุล",
field: "name",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "type",
align: "left",
label: "ประเภทเครื่องราชฯ",
field: "type",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "page",
align: "left",
label: "หน้าในราชกิจนุเบกษา",
field: "page",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "number",
align: "left",
label: "ลำดับที่ในราชกิจจานุเบกษา",
field: "number",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const rows = ref<any>([
{
no: "1",
status: "รอบันทึกข้อมูล",
name: "นางสาวรัชภรณ์ ภักดี",
type: "ทั้งหมด",
page: "8",
number: "11",
},
{
no: "2",
status: "บันทึกลง ก.พ. 7 แล้ว",
name: "นางสาวภาพรรณ ลออ",
type: "ทั้งหมด",
page: "12",
number: "11",
},
]);
onMounted(() => {
const op1: DataOption[] = [{ id: "1", name: "ทั้งหมด" }];
const op2: DataOption[] = [
{ id: "1", name: "ทั้งหมด" },
{ id: "2", name: "รอบันทึกข้อมูล" },
{ id: "3", name: "บันทึกลง ก.พ. 7 แล้ว" },
];
selectTypeOption.value = op1;
selectTypeOptionFilter.value = op1;
selectStatusOption.value = op2;
selectStatusOptionFilter.value = op2;
});
const clickRound = () => {
arrow.value = !arrow.value;
};
const resetFilter = () => {
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
filter.value = "";
filterRef.value!.focus();
};
const filterSelector = (val: any, update: Function, filtername: string) => {
switch (filtername) {
case "selectTypeOption":
update(() => {
selectTypeOption.value = selectTypeOptionFilter.value.filter(
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;
case "selectStatusOption":
update(() => {
selectStatusOption.value = selectStatusOptionFilter.value.filter(
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;
default:
break;
}
};
const getArrow = (val: boolean) => {
return {
"arrow cursor-pointer": !val,
"arrow-active cursor-pointer": val,
};
};
const marginTop = (val: boolean) => {
return {
"": !val,
"q-mt-md": val,
};
};
</script>
<style lang="scss" scoped>
.arrow {
transition: transform 0.5s;
}
.arrow-active {
transition: transform 0.5s;
transform: rotate(-90deg);
}
.bg-base {
background-color: #efefef;
}
.v-enter-active,
.v-leave-active {
transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
</style>

23
src/modules/07_insignia/router.ts
View file

@ -5,6 +5,9 @@
const Main = () => import("@/modules/07_insignia/views/Main.vue");
const ReportView = () => import("../07_insignia/components/report/ReportView.vue")
const report_01 = () => import("../07_insignia/components/report/Report_01.vue")
const ResultInsignia = () =>
import("@/modules/07_insignia/components/ResultInsignia.vue");
const Coin = () => import("@/modules/07_insignia/components/Coin.vue");
export default [
{
@ -24,6 +27,15 @@ export default [
meta: {
Auth: true,
Key: [7.1],
},
},
{
path: "/insignia/result-insignia",
name: "result-insignia",
component: ResultInsignia,
meta: {
Auth: true,
Key: [7],
Role: "insignia",
},
},
@ -37,5 +49,14 @@ export default [
Role: "insignia",
},
},
{
path: "/insignia/coin",
name: "coin",
component: Coin,
meta: {
Auth: true,
Key: [7],
Role: "insignia",
},
},
];

0
src/modules/07_insignia/views/1_Proposals/addProposals.vue Normal file
View file

364
src/modules/07_insignia/views/1_Proposals/listProposals.vue Normal file
View file

@ -0,0 +1,364 @@
<template>
<div class="toptitle text-dark col-12 row items-center">
รายการรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row q-col-gutter-sm">
<div class="row col-12 q-col-gutter-sm">
<div>
<q-btn
@click="clickAdd()"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<q-tooltip>เพิ่มรายการรอบการเสนอขอ</q-tooltip>
</q-btn>
</div>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12">
<q-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="Order"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td key="round" :props="props">
{{ props.row.round }}
</q-td>
<q-td key="year" :props="props">
{{ props.row.year }}
</q-td>
<q-td key="startDate" :props="props">
{{ props.row.startDate }}
</q-td>
<q-td key="endDate" :props="props">
{{ props.row.endDate }}
</q-td>
<q-td key="status" :props="props">
<q-icon
v-if="props.row.status == 'ยังไม่ได้เสนอ'"
name="mdi-close"
color="grey-5"
class="text-h5"
/>
<q-icon
v-else
name="mdi-check"
color="positive"
class="text-h5"
/>
</q-td>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
color="indigo"
@click.stop.prevent="clickProposals(props.row.id)"
icon="mdi-clipboard-arrow-down"
>
<q-tooltip>ดาวน์โหลดเอกสารประกอบ</q-tooltip>
</q-btn>
</q-td>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
color="red"
@click="clickDelete(props.row.id)"
icon="mdi-delete"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
</div>
</q-card>
</template>
<script setup lang="ts">
import { ref, useAttrs } from "vue";
import type { QTableProps } from "quasar";
import router from "@/router";
import { useQuasar } from "quasar";
const $q = useQuasar(); //ใช้ noti quasar
const modal = ref<boolean>(false);
const pagination = ref({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
});
const visibleColumns = ref<string[]>([
"round",
"year",
"startDate",
"endDate",
"status",
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
// หัวตาราง
const columns = ref<QTableProps["columns"]>([
{
name: "round",
align: "left",
label: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "year",
align: "left",
label: "ปีที่เสนอ",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "startDate",
align: "left",
label: "วันที่เริ่มต้น",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "endDate",
align: "left",
label: "วันที่สิ้นสุด",
sortable: true,
field: "level",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "status",
align: "left",
label: "สถานะ",
sortable: true,
field: "institution",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
// ข้อมูลตาราง (จำลอง)
const rows = ref<any[]>([
{
round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
year: "2566",
startDate: "2566",
endDate: "31 พ.ค. 2566",
status: "เสนอเเล้ว",
},
{
round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
year: "2566",
startDate: "2566",
endDate: "31 พ.ค. 2566",
status: "เสนอเเล้ว",
},
{
round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
year: "2566",
startDate: "2566",
endDate: "31 พ.ค. 2566",
status: "เสนอเเล้ว",
},
{
round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
year: "2566",
startDate: "2566",
endDate: "31 พ.ค. 2566",
status: "ยังไม่ได้เสนอ",
},
{
round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
year: "2566",
startDate: "2566",
endDate: "31 พ.ค. 2566",
status: "เสนอเเล้ว",
},
]);
// หัวตาราง2
const clickDelete = (id: string) => {
$q.dialog({
title: "ยืนยันการลบข้อมูล",
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {})
.onCancel(() => {})
.onDismiss(() => {});
};
const clickAdd = () => {
modal.value = true;
};
const clickClose = async () => {
modal.value = false;
};
// ค้นหาในตาราง
const filterKeyword = ref<string>("");
const filterRef = ref<any>(null);
const resetFilter = () => {
filterKeyword.value = "";
filterRef.value.focus();
};
const filterKeyword2 = ref<string>("");
const filterRef2 = ref<any>(null);
const resetFilter2 = () => {
filterKeyword2.value = "";
filterRef2.value.focus();
};
const attrs = ref<any>(useAttrs());
const paging = ref<boolean>(true);
const paginationLabel = (start: string, end: string, total: string) => {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
};
</script>
<style lang="scss" scope>
.filter-card {
background-color: #f1f1f1b0;
}
.toggle-expired-account {
font-size: 12px;
font-weight: 400;
font-size: 15px;
line-height: 150%;
color: #35373c;
}
.icon-color {
color: #4154b3;
}
.custom-header-table {
max-height: 64vh;
.q-table tr:nth-child(odd) td {
background: white;
}
.q-table tr:nth-child(even) td {
background: #f8f8f8;
}
.q-table thead tr {
background: #ecebeb;
}
.q-table thead tr th {
position: sticky;
z-index: 1;
}
/* this will be the loading indicator */
.q-table thead tr:last-child th {
/* height of all previous header rows */
top: 48px;
}
.q-table thead tr:first-child th {
top: 0;
}
}
</style>

2
src/modules/08_registryEmployee/router.ts
View file

@ -14,7 +14,7 @@ const Detail = defineAsyncComponent(
export default [
{
path: "/registry-employee",
path: "/registryEmployee",
name: "registryEmployee",
component: Main,
meta: {

8
src/modules/08_registryEmployee/views/Detail.vue
View file

@ -150,10 +150,10 @@
<div class="row items-center text-dark q-ml-md">
<div class="column">
<div class="text-bold q-pb-xs text-name">
{{ "เพิ่มข้อมูลทะเบียนประวัติ" }}
เพิ่มข้อมูลทะเบียนประวัติ
</div>
<div class="text-bold q-pb-xs text-sub">
{{ "ลูกจ้างชั่วคราว" }}
ลูกจ้างชั่วคราว
</div>
</div>
</div>
@ -1000,12 +1000,12 @@ const Retire = async () => {
}
.text-name {
font-size: 1.5em;
font-size: 1.3em;
overflow: hidden;
}
.text-sub {
font-size: 1.5em;
font-size: 1.2em;
overflow: hidden;
color: var(--q-primary);
}

216
src/modules/08_registryEmployee/views/Main.vue
View file

@ -2,9 +2,8 @@
<div class="toptitle text-dark col-12 row items-center">
รายชื่อลูกจ้างชั่วคราว
</div>
<div>
<div class="q-pa-md" style="min-height: 70vh; overflow-y: scroll">
<div class="col-12 row q-py-sm items-center">
<q-card flat bordered class="q-pa-md">
<div class="col-12 row items-center">
<q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
</q-btn>
@ -49,116 +48,111 @@
/>
</div>
</div>
<q-table
flat
bordered
dense
:rows="rows"
:columns="columns"
:visible-columns="visibleColumns"
:filter="filter"
row-key="name"
class="custom-header-table"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
<q-td key="positionNum" :props="props">
{{ props.row.positionNum }}
</q-td>
<q-td key="name" :props="props">
{{ props.row.name }}
</q-td>
<q-td key="position" :props="props">
{{ props.row.position }}
</q-td>
<q-td key="path" :props="props">
{{ props.row.path }}
</q-td>
<q-td key="type" :props="props">
{{ props.row.type }}
</q-td>
<q-td key="level" :props="props">
{{ props.row.level }}
</q-td>
<q-td key="affiliation" :props="props">
{{ props.row.affiliation }}
</q-td>
<q-td key="yearly" :props="props">
{{ props.row.yearly }}
</q-td>
<q-td key="pay" :props="props">
{{ props.row.pay }}
</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: 150px">
<q-item
clickable
v-close-popup
@click="editDetail(props.row)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
<div class="col-12 q-pt-sm">
<q-table
flat
bordered
dense
:rows="rows"
:columns="columns"
:visible-columns="visibleColumns"
:filter="filter"
row-key="name"
class="custom-header-table"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
<q-td key="positionNum" :props="props">
{{ props.row.positionNum }}
</q-td>
<q-td key="name" :props="props">
{{ props.row.name }}
</q-td>
<q-td key="position" :props="props">
{{ props.row.position }}
</q-td>
<q-td key="path" :props="props">
{{ props.row.path }}
</q-td>
<q-td key="type" :props="props">
{{ props.row.type }}
</q-td>
<q-td key="level" :props="props">
{{ props.row.level }}
</q-td>
<q-td key="affiliation" :props="props">
{{ props.row.affiliation }}
</q-td>
<q-td key="yearly" :props="props">
{{ props.row.yearly }}
</q-td>
<q-td key="pay" :props="props">
{{ props.row.pay }}
</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: 160px">
<q-item
clickable
v-close-popup
@click="editDetail(props.row)"
>
</q-item-section>
<q-item-section>กำหนดตำแหน่ง</q-item-section>
</q-item>
<q-separator />
<q-item clickable v-close-popup @click="clickDelete('test')">
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
</q-item-section>
<q-item-section>ลบ</q-item-section>
</q-item>
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-icon color="blue" size="xs" name="mdi-account-settings" />
</q-item-section>
<q-item-section>กำหนดตำแหน่ง</q-item-section>
</q-item>
<q-separator />
<q-item clickable v-close-popup @click="clickDelete('test')">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-icon color="red" size="xs" name="mdi-delete" />
</q-item-section>
<q-item-section>ลบ</q-item-section>
</q-item>
<q-separator />
</q-list>
</q-menu>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
color="primary"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
<q-separator />
</div>
<q-separator />
</q-list>
</q-menu>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
</q-card>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";

3
src/style/quasar-variables.sass
View file

@ -68,6 +68,9 @@ div
$separator-color: #EDEDED !default
.bg-teal-1
background: #e0f2f1a6 !important
.table_ellipsis
max-width: 200px
white-space: nowrap

4
src/views/MainLayout.vue
View file

@ -559,7 +559,7 @@ if (keycloak.tokenParsed != null) {
v-ripple
:active="link === menuItem.label"
@click="link = menuItem.label"
active-class="text-primary menuActiveMini"
active-class="text-primary menuActiveMini text-weight-medium"
v-if="menuItem.key == 3 || menuItem.key == 5"
>
<div class="row items-center no-wrap">
@ -939,7 +939,7 @@ if (keycloak.tokenParsed != null) {
background: #1e2529d9;
} */
.font-400{
font-weight: 400 !important;
font-weight: 400 ;
}
.expan2 .menuSubHover {
padding-left: 30%;