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

Merge branch 'develop' into warunee-dev

Browse source 
# Conflicts:
#	src/modules/05_placement/components/PlacementTable.vue
#	src/modules/05_placement/router.ts
This commit is contained in:
Warunee Tamkoo 2023-06-09 09:28:33 +07:00
commit 8d1c124f46
8 changed files with 1109 additions and 219 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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>