Merge branch 'develop' into warunee-dev
# Conflicts: # src/modules/05_placement/components/PlacementTable.vue # src/modules/05_placement/router.ts
This commit is contained in:
commit
8d1c124f46
8 changed files with 1109 additions and 219 deletions
|
|
@ -48,6 +48,7 @@
|
|||
:visible-columns="visibleColumns"
|
||||
v-model:inputfilter="filter"
|
||||
v-model:inputvisible="visibleColumns"
|
||||
v-model:pagination="pagination"
|
||||
:nornmalData="false"
|
||||
:conclude="true"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { ref, reactive } from "vue";
|
||||
import Table from "@/modules/05_placement/components/pass/TableView.vue";
|
||||
import { useQuasar, QForm } from "quasar";
|
||||
import type { TableName } from "@/modules/05_placement/interface/request/placement";
|
||||
|
|
@ -38,6 +38,27 @@ const appoint = ref<any>({
|
|||
PositionLevel: ''
|
||||
});
|
||||
|
||||
const information = reactive<any>({
|
||||
cardId: '',
|
||||
fullname: '',
|
||||
birthday: '',
|
||||
gender: '',
|
||||
address: '',
|
||||
school: '',
|
||||
degree: '',
|
||||
department: '',
|
||||
other: '',
|
||||
A1: null,
|
||||
A2: null,
|
||||
B1: null,
|
||||
B2: null,
|
||||
C1: null,
|
||||
C2: null,
|
||||
status: '',
|
||||
range: null,
|
||||
total: null
|
||||
});
|
||||
|
||||
const saveAppoint = () => {
|
||||
console.log("save appoint===>", appoint.value);
|
||||
}
|
||||
|
|
@ -66,25 +87,46 @@ const getClass = (val: boolean) => {
|
|||
};
|
||||
};
|
||||
const selectData = (props: TableName) => {
|
||||
if (editvisible.value == true) {
|
||||
// editRow.value = false;
|
||||
// modalEdit.value = true;
|
||||
modal.value = false;
|
||||
// edit.value = true;
|
||||
// position.value = props.position;
|
||||
Name.value = props.Name;
|
||||
// ExamOrder.value = props.ExamOrder;
|
||||
// Unit.value = props.Unit;
|
||||
// ReportingDate.value = props.ReportingDate;
|
||||
// BMAOfficer.value = props.BMAOfficer;
|
||||
// Status.value = props.Status;
|
||||
// checkList.value = props.checkList;
|
||||
} else {
|
||||
// editRow.value = false;
|
||||
// modalEdit.value = true;
|
||||
modal.value = true;
|
||||
// edit.value = true;
|
||||
}
|
||||
information.cardId = '4016500103241'
|
||||
information.fullname = props.Name
|
||||
information.birthday = '17 ก.พ. 2535'
|
||||
information.gender = 'หญิง'
|
||||
information.address = '200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170'
|
||||
information.school = 'มหาวิทยาลัยมหาสารคาม'
|
||||
information.degree = 'การศึกษาบัณฑิต'
|
||||
information.department = 'เทคโนโลยีสื่อสารการศึกษา'
|
||||
information.other = 'ใบอนุญาตประกอบวิชาชีพ'
|
||||
information.A1 = 200
|
||||
information.A2 = 133
|
||||
information.B1 = 200
|
||||
information.B2 = 149
|
||||
information.C1 = 100
|
||||
information.C2 = 382
|
||||
information.status = 'ผ่าน'
|
||||
information.range = 3
|
||||
information.total = 5
|
||||
Name.value = props.Name;
|
||||
modal.value = true;
|
||||
|
||||
// if (editvisible.value == true) {
|
||||
// // editRow.value = false;
|
||||
// // modalEdit.value = true;
|
||||
// modal.value = false;
|
||||
// // edit.value = true;
|
||||
// // position.value = props.position;
|
||||
// Name.value = props.Name;
|
||||
// // ExamOrder.value = props.ExamOrder;
|
||||
// // Unit.value = props.Unit;
|
||||
// // ReportingDate.value = props.ReportingDate;
|
||||
// // BMAOfficer.value = props.BMAOfficer;
|
||||
// // Status.value = props.Status;
|
||||
// // checkList.value = props.checkList;
|
||||
// } else {
|
||||
// // editRow.value = false;
|
||||
// // modalEdit.value = true;
|
||||
// modal.value = true;
|
||||
// // edit.value = true;
|
||||
// }
|
||||
};
|
||||
|
||||
const getNumFile = ref(0);
|
||||
|
|
@ -320,160 +362,372 @@ const clickClose = async () => {
|
|||
const save = () => {
|
||||
console.log("rows===>", rows.value)
|
||||
}
|
||||
|
||||
// modal detail
|
||||
interface CheckboxItem {
|
||||
value: number;
|
||||
label: string;
|
||||
}
|
||||
|
||||
const selection = ref([]);
|
||||
const checkboxItems: CheckboxItem[] = [
|
||||
{ value: 1, label: 'ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง' },
|
||||
{ value: 2, label: 'ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.' },
|
||||
{ value: 3, label: 'ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
|
||||
{ value: 4, label: 'ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม' },
|
||||
{ value: 5, label: 'ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง' },
|
||||
{ value: 6, label: 'ไม่เป็นบุคคลล้มละลาย' },
|
||||
{ value: 7, label: 'ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ' },
|
||||
{ value: 8, label: 'ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ' },
|
||||
{ value: 9, label: 'เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
|
||||
{ value: 10, label: 'เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
|
||||
{ value: 11, label: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' },
|
||||
];
|
||||
|
||||
const clickSave = async () => {
|
||||
console.log(selection.value)
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<q-form ref="myForm">
|
||||
<Table :rows="rows" :columns="columns" :filter="filter" :visible-columns="visibleColumns" v-model:inputfilter="filter"
|
||||
v-model:inputvisible="visibleColumns" v-model:editvisible="editvisible" :cancel="clickCancel" :history="true"
|
||||
:boss="true" :saveNoDraft="true" :add="save">
|
||||
<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-form ref="myForm">
|
||||
<Table :rows="rows" :columns="columns" :filter="filter" :visible-columns="visibleColumns" v-model:inputfilter="filter"
|
||||
v-model:inputvisible="visibleColumns" v-model:editvisible="editvisible" :cancel="clickCancel" :history="true"
|
||||
:boss="true" :saveNoDraft="true" :add="save">
|
||||
<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-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row)"
|
||||
class="cursor-pointer">
|
||||
<div v-if="col.name == 'BMAOfficer'" class="table_ellipsis">
|
||||
<div>
|
||||
<q-icon v-if="col.value == false" name="mdi-close" color="grey-5" class="text-h5" />
|
||||
<q-icon v-else name="mdi-check" color="positive" class="text-h5" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="col.name == 'Name'" class="table_ellipsis">
|
||||
{{ col.value }}
|
||||
<p>{{ props.row.Id }}</p>
|
||||
</div>
|
||||
<div v-else-if="col.name == 'Unit'" class="table_ellipsis">
|
||||
<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 == 'BMAOfficer'" class="table_ellipsis">
|
||||
<div>
|
||||
<q-icon v-if="col.value == false" name="mdi-close" color="grey-5" class="text-h5" />
|
||||
<q-icon v-else name="mdi-check" color="positive" class="text-h5" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="col.name == 'Name'" class="table_ellipsis">
|
||||
{{ col.value }}
|
||||
<p>{{ props.row.Id }}</p>
|
||||
</div>
|
||||
<div v-else-if="col.name == 'Unit'" class="table_ellipsis">
|
||||
|
||||
<div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
|
||||
<div @click="openAppointModal">
|
||||
<q-input hide-bottom-space outlined dense lazy-rules v-model="props.row.Unit">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="bookmark" color="primary" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="props.row.Status == 'ยังไม่บรรจุ' || props.row.Status == 'สละสิทธิ์'">-</div>
|
||||
<div v-else>
|
||||
{{ props.row.UnitGroup }}
|
||||
<p>{{ col.value }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="col.name == 'ReportingDate' && col.value != '-'" class="table_ellipsis">
|
||||
<div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
|
||||
<datepicker :locale="'th'" autoApply :enableTimePicker="false" week-start="0"
|
||||
v-model="props.row.ReportingDate">
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input hide-bottom-space outlined dense lazy-rules :model-value="mixin.date2Thai(col.value)">
|
||||
<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 v-else-if="props.row.Status == 'ยังไม่บรรจุ' || props.row.Status == 'สละสิทธิ์'">-</div>
|
||||
<div v-else>
|
||||
{{ mixin.date2Thai(col.value) }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="table_ellipsis">
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<div v-if="props.row.Status === 'บรรจุเเล้ว' || props.row.Status === 'สละสิทธิ์'">
|
||||
<div></div>
|
||||
</div>
|
||||
<div v-else-if="props.row.Status === 'ยังไม่บรรจุ'">
|
||||
<q-btn color="blue" flat dense round size="14px" icon="mdi-account-alert"
|
||||
@click="editDetail(props.row, 'wait')" />
|
||||
<q-btn color="red" flat dense round size="14px" icon="mdi-account-remove"
|
||||
@click="editDetail(props.row, 'cancel')" />
|
||||
</div>
|
||||
<div v-else align="right">
|
||||
<q-btn color="red" flat dense round size="14px" icon="mdi-account-remove"
|
||||
@click="editDetail(props.row, 'cancel')" />
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</Table>
|
||||
</q-form>
|
||||
<div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
|
||||
<div @click="openAppointModal">
|
||||
<q-input hide-bottom-space outlined dense lazy-rules v-model="props.row.Unit">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="bookmark" color="primary" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="props.row.Status == 'ยังไม่บรรจุ' || props.row.Status == 'สละสิทธิ์'">-</div>
|
||||
<div v-else>
|
||||
{{ props.row.UnitGroup }}
|
||||
<p>{{ col.value }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="col.name == 'ReportingDate' && col.value != '-'" class="table_ellipsis">
|
||||
<div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
|
||||
<datepicker :locale="'th'" autoApply :enableTimePicker="false" week-start="0"
|
||||
v-model="props.row.ReportingDate">
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input hide-bottom-space outlined dense lazy-rules :model-value="mixin.date2Thai(col.value)">
|
||||
<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 v-else-if="props.row.Status == 'ยังไม่บรรจุ' || props.row.Status == 'สละสิทธิ์'">-</div>
|
||||
<div v-else>
|
||||
{{ mixin.date2Thai(col.value) }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="table_ellipsis">
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<div v-if="props.row.Status === 'บรรจุเเล้ว' || props.row.Status === 'สละสิทธิ์'">
|
||||
<div></div>
|
||||
</div>
|
||||
<div v-else-if="props.row.Status === 'ยังไม่บรรจุ'">
|
||||
<q-btn color="blue" flat dense round size="14px" icon="mdi-account-alert"
|
||||
@click="editDetail(props.row, 'wait')" />
|
||||
<q-btn color="red" flat dense round size="14px" icon="mdi-account-remove"
|
||||
@click="editDetail(props.row, 'cancel')" />
|
||||
</div>
|
||||
<div v-else align="right">
|
||||
<q-btn color="red" flat dense round size="14px" icon="mdi-account-remove"
|
||||
@click="editDetail(props.row, 'cancel')" />
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</Table>
|
||||
</q-form>
|
||||
|
||||
<q-dialog v-model="appointModal" persistent>
|
||||
<q-card style="width: 800px">
|
||||
<q-form ref="myForm">
|
||||
<DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="clickClose" />
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<q-dialog v-model="appointModal" persistent>
|
||||
<q-card style="width: 800px">
|
||||
<q-form ref="myForm">
|
||||
<DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="clickClose" />
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
|
||||
<div class="row q-col-gutter-xs">
|
||||
<div class="col">
|
||||
<q-select outlined dense v-model="appoint.Code" label="รหัสส่วนราชการ" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-select outlined dense v-model="appoint.UnitName" label="ชื่อหน่วยงาน" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-col-gutter-xs">
|
||||
<div class="col">
|
||||
<q-select outlined dense v-model="appoint.Code" label="รหัสส่วนราชการ" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-select outlined dense v-model="appoint.UnitName" label="ชื่อหน่วยงาน" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-col-gutter-xs q-pt-xs">
|
||||
<div class="col">
|
||||
<q-select outlined dense v-model="appoint.PositionNo" label="ตำแหน่งเลขที่" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-select outlined dense v-model="appoint.PositionType" label="ประเภทตำแหน่ง" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-col-gutter-xs q-pt-xs">
|
||||
<div class="col">
|
||||
<q-select outlined dense v-model="appoint.PositionNo" label="ตำแหน่งเลขที่" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-select outlined dense v-model="appoint.PositionType" label="ประเภทตำแหน่ง" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-col-gutter-xs q-pt-xs">
|
||||
<div class="col">
|
||||
<q-select outlined dense v-model="appoint.PositionManage" label="ตำแหน่งทางการบริหาร" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-select outlined dense v-model="appoint.PositionTypeManage" label="ด้านทางบริหาร" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-col-gutter-xs q-pt-xs">
|
||||
<div class="col">
|
||||
<q-select outlined dense v-model="appoint.PositionManage" label="ตำแหน่งทางการบริหาร" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-select outlined dense v-model="appoint.PositionTypeManage" label="ด้านทางบริหาร" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-col-gutter-xs q-pt-xs">
|
||||
<div class="col">
|
||||
<q-select outlined dense v-model="appoint.PositionLine" label="ตำแหน่งในสายงาน" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-select outlined dense v-model="appoint.Major" label="ด้าน/สาขา" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-col-gutter-xs q-pt-xs">
|
||||
<div class="col">
|
||||
<q-select outlined dense v-model="appoint.PositionLine" label="ตำแหน่งในสายงาน" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-select outlined dense v-model="appoint.Major" label="ด้าน/สาขา" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-col-gutter-xs q-pt-xs">
|
||||
<div class="col-6">
|
||||
<q-select outlined dense v-model="appoint.PositionLevel" label="ระดับตำแหน่ง" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-col-gutter-xs q-pt-xs">
|
||||
<div class="col-6">
|
||||
<q-select outlined dense v-model="appoint.PositionLevel" label="ระดับตำแหน่ง" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-card-section>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
<DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit" :save="saveAppoint" />
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
<q-separator />
|
||||
<DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit" :save="saveAppoint" />
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="width: 800px">
|
||||
<q-form ref="myForm">
|
||||
<!-- :title="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
|
||||
<DialogHeader :title="`รายละเอียดของ${Name}`" :close="clickClose" />
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-sm"> text 5 </q-card-section>
|
||||
<q-separator />
|
||||
<DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit" />
|
||||
<q-dialog v-model="modal" full-height full-width>
|
||||
<q-card>
|
||||
<q-form ref="myForm">
|
||||
<!-- :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
|
||||
<DialogHeader
|
||||
:title="`รายละเอียดของ ${Name}`"
|
||||
:close="clickClose"
|
||||
/>
|
||||
<q-separator />
|
||||
<q-card-section class="q-pa-sm">
|
||||
|
||||
<div class="q-card q-card--bordered q-card--flat q-pa-sm">
|
||||
<div class="col-12 row items-center q-pa-xs" style="font-weight: bold; font-size: 18px;">
|
||||
ข้อมูลทั่วไป
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
|
||||
เลขที่ประจำตัวประชาชน
|
||||
</div>
|
||||
<div class="col-3 q-pa-xs" style="font-size: 18px;">
|
||||
{{ information.cardId }}
|
||||
</div>
|
||||
<div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
|
||||
ชื่อ-นามสกุล
|
||||
</div>
|
||||
<div class="col-3 q-pa-xs" style="font-size: 18px;">
|
||||
{{ information.fullname }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
|
||||
วัน/เดือน/ปีเกิด
|
||||
</div>
|
||||
<div class="col-3 q-pa-xs" style="font-size: 18px;">
|
||||
{{ information.birthday }}
|
||||
</div>
|
||||
<div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
|
||||
เพศ
|
||||
</div>
|
||||
<div class="col-3 q-pa-xs" style="font-size: 18px;">
|
||||
{{ information.gender }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="q-card q-card--bordered q-card--flat q-pa-sm">
|
||||
<div class="col-12 row items-center q-pa-xs" style="font-weight: bold; font-size: 18px;">
|
||||
ภูมิลำนำ
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
|
||||
ที่อยู่
|
||||
</div>
|
||||
<div class="col q-pa-xs" style="color: gray; font-size: 18px;">
|
||||
{{ information.address }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="q-card q-card--bordered q-card--flat q-pa-sm">
|
||||
<div class="col-12 row items-center q-pa-xs" style="font-weight: bold; font-size: 18px;">
|
||||
การศึกษา
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
|
||||
สถานศึกษา
|
||||
</div>
|
||||
<div class="col-3 q-pa-xs" style="font-size: 18px;">
|
||||
{{ information.school }}
|
||||
</div>
|
||||
<div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
|
||||
วุฒิการศึกษา
|
||||
</div>
|
||||
<div class="col-3 q-pa-xs">
|
||||
{{ information.deegree }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
|
||||
สาขาวิชาเอก
|
||||
</div>
|
||||
<div class="col-3 q-pa-xs" style="font-size: 18px;">
|
||||
{{ information.department }}
|
||||
</div>
|
||||
<div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
|
||||
อื่นๆ
|
||||
</div>
|
||||
<div class="col-3 q-pa-xs" style="font-size: 18px;">
|
||||
{{ information.other }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bright -->
|
||||
<div class="q-card q-card--bordered q-card--flat q-pa-sm">
|
||||
<div class="col-12 row items-center q-pa-xs" style="font-weight: bold; font-size: 18px;">
|
||||
การสอบ
|
||||
</div>
|
||||
<div class="row">
|
||||
<!-- text-align: center; -->
|
||||
<div class="col-2 q-pa-xs" style="color: gray; font-size: 18px;">
|
||||
ประเภท
|
||||
</div>
|
||||
<div class="col-2 q-pa-xs" style="color: #259E75; font-size: 18px;">
|
||||
คะแนนเต็ม
|
||||
</div>
|
||||
<div class="col-2 q-pa-xs" style="color: #259E75; font-size: 18px;">
|
||||
คะแนนที่ได้
|
||||
</div>
|
||||
<div class="col-2 q-pa-xs" style="color: gray; font-size: 19px;">
|
||||
ผลการสอบ
|
||||
</div>
|
||||
<div class="col-2 q-pa-xs">
|
||||
{{ information.status }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-2 q-pa-xs" style="color: gray; font-size: 18px;">
|
||||
ภาค ก
|
||||
</div>
|
||||
<div class="col-2 q-pa-xs" style="font-weight: bold; ">
|
||||
{{ information.A1 }}
|
||||
</div>
|
||||
<div class="col-2 q-pa-xs" style="font-weight: bold;">
|
||||
{{ information.A2 }}
|
||||
</div>
|
||||
<div class="col-2 q-pa-xs" style="color: gray; font-size: 19px;">
|
||||
ลำดับที่สอบได้
|
||||
</div>
|
||||
<div class="col-2 q-pa-xs" style="font-weight: bold;">
|
||||
{{ information.range }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-2 q-pa-xs" style="color: gray; font-size: 18px;">
|
||||
ภาค ข
|
||||
</div>
|
||||
<div class="col-2 q-pa-xs" style="font-weight: bold;">
|
||||
{{ information.B1 }}
|
||||
</div>
|
||||
<div class="col-2 q-pa-xs" style="font-weight: bold;">
|
||||
{{ information.B2 }}
|
||||
</div>
|
||||
<div class="col-2 q-pa-xs" style="color: gray; font-size: 19px;">
|
||||
จำนวนครั้งที่สมัครสอบ
|
||||
</div>
|
||||
<div class="col-2 q-pa-xs" style="font-weight: bold;">
|
||||
{{ information.total }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-2 q-pa-xs" style="color: gray; font-size: 18px;">
|
||||
ภาค ค
|
||||
</div>
|
||||
<div class="col-2 q-pa-xs" style="font-weight: bold;">
|
||||
{{ information.C1 }}
|
||||
</div>
|
||||
<div class="col-2 q-pa-xs" style="font-weight: bold;">
|
||||
{{ information.C2 }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-2 q-pa-xs" style="color: gray; font-size: 18px;">
|
||||
รวมทั้งหมด
|
||||
</div>
|
||||
<div class="col-2 q-pa-xs" style="font-weight: bold;">
|
||||
{{ (information.A1 + information.B1 + information.C1) }}
|
||||
</div>
|
||||
<div class="col-2 q-pa-xs" style="font-weight: bold;">
|
||||
{{ (information.A2 + information.B2 + information.C2) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bright -->
|
||||
<div class="q-card q-card--bordered q-card--flat q-pa-sm">
|
||||
<div class="col-12 row items-center q-pa-sm" style="font-weight: bold; font-size: 18px;">
|
||||
การคัดกรองคุณสมบัติ
|
||||
</div>
|
||||
<div >
|
||||
<q-list >
|
||||
<q-item>
|
||||
<q-option-group v-model="selection" :options="checkboxItems" keep-color color="green" type="checkbox" style="font-size: 18px;"/>
|
||||
</q-item>
|
||||
<q-separator spaced inset />
|
||||
</q-list>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-card-section>
|
||||
<DialogFooter
|
||||
:save="clickSave"
|
||||
v-model:editvisible="edit"
|
||||
v-model:modalEdit="modalEdit"
|
||||
/>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
|
|
|||
|
|
@ -1 +1,7 @@
|
|||
export type {};
|
||||
interface DataOption {
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
|
||||
export type { DataOption };
|
||||
|
|
|
|||
|
|
@ -1 +1,15 @@
|
|||
export type {};
|
||||
// ข้อมูลรายการสอบแข่งขัน/คัดเลือก
|
||||
interface FormPlacementMainData {
|
||||
id: number;
|
||||
ExamRound: string;
|
||||
ExamOrder: number;
|
||||
FiscalYear: number;
|
||||
NumberofCandidates: number;
|
||||
ExamType: number;
|
||||
AccountExpirationDate: string;
|
||||
isExpired?: boolean;
|
||||
}
|
||||
|
||||
|
||||
|
||||
export type { FormPlacementMainData };
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
*/
|
||||
|
||||
const Main = () => import("@/modules/05_placement/views/Main.vue");
|
||||
const PlacementDetail = () =>
|
||||
import("@/modules/05_placement/components/pass/Detail.vue");
|
||||
const PlacementDetail = () => import("@/modules/05_placement/components/pass/Detail.vue");
|
||||
const Domination = () => import("@/modules/05_placement/views/Domination.vue");
|
||||
|
||||
export default [
|
||||
{
|
||||
|
|
@ -27,5 +27,25 @@ export default [
|
|||
Role: "placement",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/placement/detail",
|
||||
name: "placementDetail",
|
||||
component: PlacementDetail,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [7],
|
||||
Role: "placement",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/domination",
|
||||
name: "domination",
|
||||
component: Domination,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [7],
|
||||
Role: "placement",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { defineStore } from "pinia";
|
||||
import { ref, computed } from "vue";
|
||||
import { ref } from "vue";
|
||||
import type { FormPlacementMainData } from "@/modules/05_placement/interface/request/Main"
|
||||
export const useProfileDataStore = defineStore("placement", () => {
|
||||
return {};
|
||||
});
|
||||
|
|
@ -25,8 +26,20 @@ export const usePlacementDataStore = defineStore("placement", () => {
|
|||
);
|
||||
}
|
||||
|
||||
let DataMainOrig = ref<FormPlacementMainData[]>([]) // ข้อมูลหลัก
|
||||
let DataMainUpdate = ref<FormPlacementMainData[]>([]) // ข้อมูลเปลี่ยนแปลง
|
||||
const DataMain = (val: any) => (DataMainOrig.value = val)
|
||||
const DataUpdateMain = (val: any) => {
|
||||
DataMainUpdate.value = [];
|
||||
DataMainUpdate.value = val;
|
||||
}
|
||||
|
||||
return {
|
||||
placementData,
|
||||
changePlacementColumns,
|
||||
DataMainOrig,
|
||||
DataMainUpdate,
|
||||
DataMain,
|
||||
DataUpdateMain,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
496
src/modules/05_placement/views/Domination.vue
Normal file
496
src/modules/05_placement/views/Domination.vue
Normal file
|
|
@ -0,0 +1,496 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, useAttrs } from 'vue';
|
||||
import type { QTableProps } from 'quasar';
|
||||
import type { FormPlacementMainData } from "@/modules/05_placement/interface/request/Main";
|
||||
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { usePlacementDataStore } from "@/modules/05_placement/store";
|
||||
import router from '@/router';
|
||||
|
||||
const DataStore = usePlacementDataStore()
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { dateText } = mixin;
|
||||
|
||||
// แปลงเวลา ค.ศ ให้เป็น พ.ศ
|
||||
const textDate = (value: Date) => {
|
||||
return dateText(value);
|
||||
};
|
||||
|
||||
// หัวตาราง
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "id",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
field: "id",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "ExamRound",
|
||||
align: "left",
|
||||
label: "รอบการสอบ",
|
||||
sortable: true,
|
||||
field: "ExamRound",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "ExamOrder",
|
||||
align: "left",
|
||||
label: "ครั้งที่",
|
||||
sortable: true,
|
||||
field: "ExamOrder",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "FiscalYear",
|
||||
align: "left",
|
||||
label: "ปีงบประมาณ",
|
||||
sortable: true,
|
||||
field: "FiscalYear",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "NumberofCandidates",
|
||||
align: "left",
|
||||
label: "จำนวนผู้สอบได้",
|
||||
sortable: false,
|
||||
field: "NumberofCandidates",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "ExamType",
|
||||
align: "left",
|
||||
label: "ประเภทการสอบ",
|
||||
sortable: false,
|
||||
field: "ExamType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "AccountExpirationDate",
|
||||
align: "left",
|
||||
label: "วันที่บัญชีหมดอายุ",
|
||||
sortable: true,
|
||||
field: "AccountExpirationDate",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
|
||||
]);
|
||||
|
||||
// ข้อมูลตาราง (จำลอง)
|
||||
const rows = ref<FormPlacementMainData[]>([{
|
||||
id: 1,
|
||||
ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
|
||||
ExamOrder: 3,
|
||||
FiscalYear: 2023,
|
||||
NumberofCandidates: 8,
|
||||
ExamType: 1,
|
||||
AccountExpirationDate: "2023-02-28T14:47:04.1785384Z"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
|
||||
ExamOrder: 2,
|
||||
FiscalYear: 2023,
|
||||
NumberofCandidates: 12,
|
||||
ExamType: 1,
|
||||
AccountExpirationDate: "2023-02-28T14:47:04.1785384Z"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
|
||||
ExamOrder: 2,
|
||||
FiscalYear: 2023,
|
||||
NumberofCandidates: 20,
|
||||
ExamType: 1,
|
||||
AccountExpirationDate: "2023-01-31T14:47:04.1785384Z"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
|
||||
ExamOrder: 2,
|
||||
FiscalYear: 2022,
|
||||
NumberofCandidates: 16,
|
||||
ExamType: 2,
|
||||
AccountExpirationDate: "2023-11-30T14:47:04.1785384Z"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
|
||||
ExamOrder: 1,
|
||||
FiscalYear: 2021,
|
||||
NumberofCandidates: 20,
|
||||
ExamType: 2,
|
||||
AccountExpirationDate: "2024-05-21T14:47:04.1785384Z",
|
||||
},
|
||||
]);
|
||||
|
||||
let OriginalData = ref<FormPlacementMainData[]>([]);
|
||||
let UpdataData = ref<FormPlacementMainData[]>([]);
|
||||
|
||||
const OriginalDataFetch = async () => {
|
||||
await DataStore.DataMain(rows.value)
|
||||
OriginalData.value = await DataStore.DataMainOrig
|
||||
UpdataData.value = OriginalData.value
|
||||
}
|
||||
|
||||
onMounted( async () => {
|
||||
await OriginalDataFetch()
|
||||
fiscalyearfilter()
|
||||
examTimefilter()
|
||||
examTypefilter()
|
||||
})
|
||||
|
||||
// ดูรายการสอบแข่งขัน หน้าต่อไป
|
||||
const redirectToPage = (id:number) => {
|
||||
router.push({
|
||||
name: 'placementDetail',
|
||||
params: {
|
||||
id: id
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// เลือกปีงบประมาณ
|
||||
const fiscalyear = ref<number | null>(0);
|
||||
const fiscalyearOP = reactive<DataOption[]>([{id: 0, name: 'ทั้งหมด'}]);
|
||||
const addedFiscalYearValues: number[] = [];
|
||||
const fiscalyearfilter = async () => {
|
||||
for (let data of OriginalData.value) {
|
||||
const year = data.FiscalYear + 543;
|
||||
if (!addedFiscalYearValues.includes(year)) {
|
||||
fiscalyearOP.push({ id: year, name: year.toString() });
|
||||
addedFiscalYearValues.push(year);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// เลือกปีงบประมาณตาม API
|
||||
const searchFiscalyear = () => {
|
||||
// API
|
||||
console.log('Input value changed:', fiscalyear.value);
|
||||
};
|
||||
|
||||
// ค้นหาในตาราง
|
||||
const filterKeyword = ref<string>("");
|
||||
const filterRef = ref<any>(null);
|
||||
const resetFilter = () => {
|
||||
filterKeyword.value = "";
|
||||
filterRef.value.focus();
|
||||
};
|
||||
|
||||
const attrs = ref<any>(useAttrs());
|
||||
const visibleColumns = ref<string[]>([ 'id', 'ExamRound', 'ExamOrder', 'FiscalYear', 'NumberofCandidates', 'ExamType', 'AccountExpirationDate']) //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
||||
|
||||
// ครั้งที่สอบ
|
||||
const examTime = ref<number | null>(null);
|
||||
const examTimeOP = ref<number[]>([]);
|
||||
const examTimefilter = async () => {
|
||||
for (let data of OriginalData.value) {
|
||||
if (!examTimeOP.value.includes(data.ExamOrder)) {
|
||||
examTimeOP.value.push(data.ExamOrder);
|
||||
}
|
||||
}
|
||||
examTimeOP.value.sort((a, b) => a - b); // เรียงลำดับ
|
||||
}
|
||||
|
||||
// แสดงครั้งที่สอบตามที่เลือก
|
||||
const searchExamTime = async () => {
|
||||
if (examTime.value !== null) {
|
||||
const selectExamTime = OriginalData.value.filter((data: { ExamOrder: number | null; }) => data.ExamOrder === examTime.value);
|
||||
await DataStore.DataUpdateMain(selectExamTime);
|
||||
UpdataData.value = DataStore.DataMainUpdate
|
||||
} else {
|
||||
OriginalDataFetch();
|
||||
}
|
||||
};
|
||||
|
||||
// ประเภทการสอบ
|
||||
const examType = ref<number | null>(0);
|
||||
const examTypeOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
|
||||
const addedExamTypeValues: number[] = [];
|
||||
const examTypefilter = async () => {
|
||||
for (let data of OriginalData.value) {
|
||||
const examTypeValue = data.ExamType;
|
||||
if (examTypeValue == 1 && !addedExamTypeValues.includes(1)) {
|
||||
examTypeOP.push({ id: 1, name: "คัดเลือก" });
|
||||
addedExamTypeValues.push(1);
|
||||
} else if (examTypeValue == 2 && !addedExamTypeValues.includes(2)) {
|
||||
examTypeOP.push({ id: 2, name: "สอบแข่งขัน" });
|
||||
addedExamTypeValues.push(2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// แสดงประเภทการสอบตามที่เลือก
|
||||
const searchExamType = async () => {
|
||||
if (examType.value !== null) {
|
||||
const selectExamType = OriginalData.value.filter((data: { ExamType: number | null; }) => {
|
||||
if (examType.value === 0) {
|
||||
OriginalDataFetch();
|
||||
return data.ExamType === 1 || data.ExamType === 2;
|
||||
} else {
|
||||
return data.ExamType === examType.value;
|
||||
}
|
||||
});
|
||||
await DataStore.DataUpdateMain(selectExamType);
|
||||
UpdataData.value = DataStore.DataMainUpdate
|
||||
}
|
||||
};
|
||||
|
||||
// บัญชีหมดอายุ
|
||||
const expiredAccount = ref<boolean>(false);
|
||||
const searchExpiredAccount = async () => {
|
||||
const currentDate = new Date();
|
||||
const updatedRows = OriginalData.value.map((data) => {
|
||||
let expirationDate = new Date(data.AccountExpirationDate);
|
||||
let isExpired = expirationDate < currentDate;
|
||||
|
||||
return { ...data, isExpired };
|
||||
});
|
||||
if (expiredAccount.value) {
|
||||
const expiredRows = updatedRows.filter((data) => data.isExpired);
|
||||
await DataStore.DataUpdateMain(expiredRows);
|
||||
UpdataData.value = DataStore.DataMainUpdate
|
||||
} else {
|
||||
OriginalDataFetch();
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
รายการสอบแข่งขัน / คัดเลือก
|
||||
</div>
|
||||
<div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm">
|
||||
<div class="row q-pa-md" >
|
||||
<div class="col-xs-12 col-sm-3 col-md-2">
|
||||
<q-select
|
||||
v-model="fiscalyear"
|
||||
label="ปีงบประมาณ"
|
||||
dense
|
||||
clearable
|
||||
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="searchFiscalyear"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-6"></div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-2">
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="filterKeyword"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-2">
|
||||
<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="gt-xs q-ml-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
|
||||
<q-card bordered class="col-12 filter-card">
|
||||
<div class="row q-pa-sm">
|
||||
<div class="col-xs-12 col-sm-3 col-md-2 q-pl-sm">
|
||||
<q-select
|
||||
v-model="examTime"
|
||||
label="ครั้งที่"
|
||||
dense
|
||||
clearable
|
||||
emit-value
|
||||
map-options
|
||||
:options="examTimeOP"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
:outlined="true"
|
||||
:hide-dropdown-icon="false"
|
||||
@update:model-value="searchExamTime"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-2 q-pl-sm">
|
||||
<q-select
|
||||
v-model="examType"
|
||||
label="ประเภทการสอบ"
|
||||
dense
|
||||
clearable
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="examTypeOP"
|
||||
option-value="id"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
:outlined="true"
|
||||
:hide-dropdown-icon="false"
|
||||
@update:model-value="searchExamType"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-3">
|
||||
<q-toggle
|
||||
v-model="expiredAccount"
|
||||
class="toggle-expired-account"
|
||||
color="blue"
|
||||
label="แสดงบัญชีหมดอายุ"
|
||||
@update:model-value="searchExpiredAccount"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
|
||||
<q-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="UpdataData"
|
||||
:filter="filterKeyword"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
class="custom-header-table"
|
||||
v-bind="attrs"
|
||||
:visible-columns="visibleColumns"
|
||||
:pagination-label="paginationLabel"
|
||||
>
|
||||
<template v-slot:body="props" >
|
||||
<q-tr :props="props" class="cursor-pointer" @click="redirectToPage(props.row.id)">
|
||||
<q-td key="id" :props="props">
|
||||
{{ props.row.id }}
|
||||
</q-td>
|
||||
<q-td key="ExamRound" :props="props">
|
||||
{{ props.row.ExamRound }}
|
||||
</q-td>
|
||||
<q-td key="ExamOrder" :props="props">
|
||||
{{ props.row.ExamOrder }}
|
||||
</q-td>
|
||||
<q-td key="FiscalYear" :props="props">
|
||||
{{ props.row.FiscalYear + 543 }}
|
||||
</q-td>
|
||||
<q-td key="NumberofCandidates" :props="props">
|
||||
{{ props.row.NumberofCandidates }}
|
||||
</q-td>
|
||||
<q-td key="ExamType" :props="props">
|
||||
{{ props.row.ExamType == 1 ? 'คัดเลือก' : 'สอบแข่งขัน' }}
|
||||
</q-td>
|
||||
<q-td key="AccountExpirationDate" :props="props">
|
||||
{{ textDate(props.row.AccountExpirationDate) }}
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scope>
|
||||
.filter-card {
|
||||
background-color: #EDEDED;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
|
@ -1,8 +1,14 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, useAttrs, watch } from 'vue';
|
||||
import { onMounted, reactive, ref, useAttrs } from 'vue';
|
||||
import type { QTableProps } from 'quasar';
|
||||
import type { FormPlacementMainData } from "@/modules/05_placement/interface/request/Main";
|
||||
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { usePlacementDataStore } from "@/modules/05_placement/store";
|
||||
import router from '@/router';
|
||||
|
||||
const DataStore = usePlacementDataStore()
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { dateText } = mixin;
|
||||
|
||||
|
|
@ -11,6 +17,7 @@ const textDate = (value: Date) => {
|
|||
return dateText(value);
|
||||
};
|
||||
|
||||
// หัวตาราง
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "id",
|
||||
|
|
@ -85,53 +92,72 @@ const columns = ref<QTableProps["columns"]>([
|
|||
},
|
||||
|
||||
]);
|
||||
const rows = [{
|
||||
|
||||
// ข้อมูลตาราง (จำลอง)
|
||||
const rows = ref<FormPlacementMainData[]>([{
|
||||
id: 1,
|
||||
ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
|
||||
ExamOrder: 3,
|
||||
FiscalYear: 2566,
|
||||
FiscalYear: 2023,
|
||||
NumberofCandidates: 8,
|
||||
ExamType: 0,
|
||||
ExamType: 1,
|
||||
AccountExpirationDate: "2023-02-28T14:47:04.1785384Z"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
|
||||
ExamOrder: 2,
|
||||
FiscalYear: 2566,
|
||||
FiscalYear: 2023,
|
||||
NumberofCandidates: 12,
|
||||
ExamType: 0,
|
||||
ExamType: 1,
|
||||
AccountExpirationDate: "2023-02-28T14:47:04.1785384Z"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
|
||||
ExamOrder: 2,
|
||||
FiscalYear: 2566,
|
||||
FiscalYear: 2023,
|
||||
NumberofCandidates: 20,
|
||||
ExamType: 0,
|
||||
ExamType: 1,
|
||||
AccountExpirationDate: "2023-01-31T14:47:04.1785384Z"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
|
||||
ExamOrder: 2,
|
||||
FiscalYear: 2566,
|
||||
FiscalYear: 2022,
|
||||
NumberofCandidates: 16,
|
||||
ExamType: 1,
|
||||
ExamType: 2,
|
||||
AccountExpirationDate: "2023-11-30T14:47:04.1785384Z"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
|
||||
ExamOrder: 1,
|
||||
FiscalYear: 2566,
|
||||
FiscalYear: 2021,
|
||||
NumberofCandidates: 20,
|
||||
ExamType: 1,
|
||||
AccountExpirationDate: "2023-05-21T14:47:04.1785384Z",
|
||||
ExamType: 2,
|
||||
AccountExpirationDate: "2024-05-21T14:47:04.1785384Z",
|
||||
},
|
||||
];
|
||||
]);
|
||||
|
||||
let OriginalData = ref<FormPlacementMainData[]>([]);
|
||||
let UpdataData = ref<FormPlacementMainData[]>([]);
|
||||
|
||||
const OriginalDataFetch = async () => {
|
||||
await DataStore.DataMain(rows.value)
|
||||
OriginalData.value = await DataStore.DataMainOrig
|
||||
UpdataData.value = OriginalData.value
|
||||
}
|
||||
|
||||
onMounted( async () => {
|
||||
await OriginalDataFetch()
|
||||
fiscalyearfilter()
|
||||
examTimefilter()
|
||||
examTypefilter()
|
||||
})
|
||||
|
||||
// ดูรายการสอบแข่งขัน หน้าต่อไป
|
||||
const redirectToPage = (id:number) => {
|
||||
router.push({
|
||||
name: 'placementDetail',
|
||||
|
|
@ -141,54 +167,111 @@ const redirectToPage = (id:number) => {
|
|||
});
|
||||
};
|
||||
|
||||
|
||||
interface DataOption {
|
||||
id: number;
|
||||
name: string;
|
||||
// เลือกปีงบประมาณ
|
||||
const fiscalyear = ref<number | null>(0);
|
||||
const fiscalyearOP = reactive<DataOption[]>([{id: 0, name: 'ทั้งหมด'}]);
|
||||
const addedFiscalYearValues: number[] = [];
|
||||
const fiscalyearfilter = async () => {
|
||||
for (let data of OriginalData.value) {
|
||||
const year = data.FiscalYear + 543;
|
||||
if (!addedFiscalYearValues.includes(year)) {
|
||||
fiscalyearOP.push({ id: year, name: year.toString() });
|
||||
addedFiscalYearValues.push(year);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const fiscalyear = ref<string>(""); // เลือกปีงบประมาณ
|
||||
const fiscalyearOP = ref<DataOption[]>([
|
||||
{id: 1, name: "2566"},
|
||||
{id: 2, name: "2565"},
|
||||
{id: 3, name: "2564"},
|
||||
]);
|
||||
// เลือกปีงบประมาณตาม API
|
||||
const searchFiscalyear = () => {
|
||||
// API
|
||||
console.log('Input value changed:', fiscalyear.value);
|
||||
};
|
||||
|
||||
|
||||
const filterInput = ref<string>(""); // ค้นหา
|
||||
// ค้นหาในตาราง
|
||||
const filterKeyword = ref<string>("");
|
||||
const filterRef = ref<any>(null);
|
||||
const resetFilter = () => {
|
||||
filterInput.value = "";
|
||||
filterKeyword.value = "";
|
||||
filterRef.value.focus();
|
||||
};
|
||||
|
||||
const attrs = ref<any>(useAttrs());
|
||||
const visibleColumns = ref<string[]>([ 'id', 'ExamRound', 'ExamOrder', 'FiscalYear', 'NumberofCandidates', 'ExamType', 'AccountExpirationDate']) //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
||||
|
||||
// ครั้งที่สอบ
|
||||
const examTime = ref<number | null>(null);
|
||||
const examTimeOP = ref<number[]>([]);
|
||||
const examTimefilter = async () => {
|
||||
for (let data of OriginalData.value) {
|
||||
if (!examTimeOP.value.includes(data.ExamOrder)) {
|
||||
examTimeOP.value.push(data.ExamOrder);
|
||||
}
|
||||
}
|
||||
examTimeOP.value.sort((a, b) => a - b); // เรียงลำดับ
|
||||
}
|
||||
|
||||
const examTime = ref<string>(""); // ครั้งที่สอบ
|
||||
const examTimeOP = ref<DataOption[]>([]);
|
||||
examTimeOP.value = rows.map((item) => ({
|
||||
id: item.id,
|
||||
name: item.ExamOrder.toString(),
|
||||
}));
|
||||
examTimeOP.value.sort((a, b) => {
|
||||
return parseInt(a.name) - parseInt(b.name);
|
||||
});
|
||||
// console.log(examTimeOP.value);
|
||||
// แสดงครั้งที่สอบตามที่เลือก
|
||||
const searchExamTime = async () => {
|
||||
if (examTime.value !== null) {
|
||||
const selectExamTime = OriginalData.value.filter((data: { ExamOrder: number | null; }) => data.ExamOrder === examTime.value);
|
||||
await DataStore.DataUpdateMain(selectExamTime);
|
||||
UpdataData.value = DataStore.DataMainUpdate
|
||||
} else {
|
||||
OriginalDataFetch();
|
||||
}
|
||||
};
|
||||
|
||||
// ประเภทการสอบ
|
||||
const examType = ref<number | null>(0);
|
||||
const examTypeOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
|
||||
const addedExamTypeValues: number[] = [];
|
||||
const examTypefilter = async () => {
|
||||
for (let data of OriginalData.value) {
|
||||
const examTypeValue = data.ExamType;
|
||||
if (examTypeValue == 1 && !addedExamTypeValues.includes(1)) {
|
||||
examTypeOP.push({ id: 1, name: "คัดเลือก" });
|
||||
addedExamTypeValues.push(1);
|
||||
} else if (examTypeValue == 2 && !addedExamTypeValues.includes(2)) {
|
||||
examTypeOP.push({ id: 2, name: "สอบแข่งขัน" });
|
||||
addedExamTypeValues.push(2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const examType = ref<string>(""); // ประเภทการสอบ
|
||||
const examTypeOP = ref<DataOption[]>([
|
||||
{id: 0, name: "แข่งขัน"},
|
||||
{id: 1, name: "คัดเลือก"},
|
||||
]);
|
||||
// แสดงประเภทการสอบตามที่เลือก
|
||||
const searchExamType = async () => {
|
||||
if (examType.value !== null) {
|
||||
const selectExamType = OriginalData.value.filter((data: { ExamType: number | null; }) => {
|
||||
if (examType.value === 0) {
|
||||
OriginalDataFetch();
|
||||
return data.ExamType === 1 || data.ExamType === 2;
|
||||
} else {
|
||||
return data.ExamType === examType.value;
|
||||
}
|
||||
});
|
||||
await DataStore.DataUpdateMain(selectExamType);
|
||||
UpdataData.value = DataStore.DataMainUpdate
|
||||
}
|
||||
};
|
||||
|
||||
// บัญชีหมดอายุ
|
||||
const expiredAccount = ref<boolean>(false);
|
||||
const searchExpiredAccount = async () => {
|
||||
const currentDate = new Date();
|
||||
const updatedRows = OriginalData.value.map((data) => {
|
||||
let expirationDate = new Date(data.AccountExpirationDate);
|
||||
let isExpired = expirationDate < currentDate;
|
||||
|
||||
const expiredAccount = ref<boolean>(false); // บัญชีหมดอายุ
|
||||
return { ...data, isExpired };
|
||||
});
|
||||
if (expiredAccount.value) {
|
||||
const expiredRows = updatedRows.filter((data) => data.isExpired);
|
||||
await DataStore.DataUpdateMain(expiredRows);
|
||||
UpdataData.value = DataStore.DataMainUpdate
|
||||
} else {
|
||||
OriginalDataFetch();
|
||||
}
|
||||
};
|
||||
|
||||
const paging = ref<boolean>(true);
|
||||
const paginationLabel = (start: string, end: string, total: string) => {
|
||||
|
|
@ -214,16 +297,16 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
clearable
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="fiscalyearOP"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
:outlined="true"
|
||||
:hide-dropdown-icon="false"
|
||||
@change="searchFiscalyear"
|
||||
@update:model-value="searchFiscalyear"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-6"></div>
|
||||
|
|
@ -231,7 +314,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="filterInput"
|
||||
v-model="filterKeyword"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
debounce="300"
|
||||
|
|
@ -239,9 +322,9 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
class="q-ml-sm"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="filterInput == ''" name="search" />
|
||||
<q-icon v-if="filterKeyword == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="filterInput !== ''"
|
||||
v-if="filterKeyword !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
|
|
@ -278,15 +361,16 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
clearable
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="examTimeOP"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
:outlined="true"
|
||||
:hide-dropdown-icon="false"
|
||||
@update:model-value="searchExamTime"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-2 q-pl-sm">
|
||||
|
|
@ -306,6 +390,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
:borderless="false"
|
||||
:outlined="true"
|
||||
:hide-dropdown-icon="false"
|
||||
@update:model-value="searchExamType"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-3">
|
||||
|
|
@ -314,6 +399,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
class="toggle-expired-account"
|
||||
color="blue"
|
||||
label="แสดงบัญชีหมดอายุ"
|
||||
@update:model-value="searchExpiredAccount"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -323,14 +409,14 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
<q-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
:rows="UpdataData"
|
||||
:filter="filterKeyword"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
class="custom-header-table"
|
||||
v-bind="attrs"
|
||||
:filter="filterInput"
|
||||
:visible-columns="visibleColumns"
|
||||
:pagination-label="paginationLabel"
|
||||
>
|
||||
|
|
@ -346,13 +432,13 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
{{ props.row.ExamOrder }}
|
||||
</q-td>
|
||||
<q-td key="FiscalYear" :props="props">
|
||||
{{ props.row.FiscalYear }}
|
||||
{{ props.row.FiscalYear + 543 }}
|
||||
</q-td>
|
||||
<q-td key="NumberofCandidates" :props="props">
|
||||
{{ props.row.NumberofCandidates }}
|
||||
</q-td>
|
||||
<q-td key="ExamType" :props="props">
|
||||
{{ props.row.ExamType == 1 ? 'สอบแข่งขัน' : 'คัดเลือก' }}
|
||||
{{ props.row.ExamType == 1 ? 'คัดเลือก' : 'สอบแข่งขัน' }}
|
||||
</q-td>
|
||||
<q-td key="AccountExpirationDate" :props="props">
|
||||
{{ textDate(props.row.AccountExpirationDate) }}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue