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

Merge branch 'develop-champ' into develop

Browse source
This commit is contained in:
watcharanondh 2023-06-13 10:02:22 +07:00
commit f331ee3339
3 changed files with 334 additions and 230 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/modules/05_placement/components/pass/DialogFooter.vue
View file

@ -1,21 +1,4 @@
<template>
<q-card-actions class="text-primary">
<q-space />
<q-btn v-if="!editvisible" flat round :disabled="editvisible" :color="editvisible ? 'grey-7' : 'primary'"
@click="edit" icon="mdi-pencil-outline">
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
<div v-else>
<q-btn flat round :disabled="!editvisible" :color="!editvisible ? 'grey-7' : 'public'" @click="checkSave"
icon="mdi-content-save-outline">
<q-tooltip>บันทึก</q-tooltip>
</q-btn>
</div>
</q-card-actions>
</template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, useAttrs } from "vue";
const props = defineProps({ const props = defineProps({
editvisible: Boolean, editvisible: Boolean,
@ -59,3 +42,18 @@ const checkSave = () => {
}; };
</script> </script>
<template>
<q-card-actions class="text-primary">
<q-space />
<q-btn v-if="!editvisible" flat round :disabled="editvisible" :color="editvisible ? 'grey-7' : 'primary'"
@click="edit" icon="mdi-pencil-outline">
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
<div v-else>
<q-btn flat round :disabled="!editvisible" :color="!editvisible ? 'grey-7' : 'public'" @click="checkSave"
icon="mdi-content-save-outline">
<q-tooltip>บันทึก</q-tooltip>
</q-btn>
</div>
</q-card-actions>
</template>

35
src/modules/05_placement/components/pass/DialogHeader.vue
View file

@ -1,19 +1,4 @@
<template>
<q-toolbar>
<q-toolbar-title class="text-subtitle2 text-bold">{{ title }}</q-toolbar-title>
<q-btn
icon="close"
unelevated
round
dense
@click="close"
style="color: #ff8080; background-color: #ffdede"
/>
</q-toolbar>
</template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, useAttrs } from "vue";
const props = defineProps({ const props = defineProps({
title: String, title: String,
close: { close: {
@ -24,5 +9,23 @@ const props = defineProps({
const close = async () => { const close = async () => {
props.close(); props.close();
}; };
</script> </script>
<template>
<q-toolbar class="header-main">
<q-toolbar-title class="header-text">{{ title }}</q-toolbar-title>
<q-btn icon="close" unelevated round dense @click="close" style="color: #ff8080; background-color: #ffdede" />
</q-toolbar>
</template>
<style scoped lang="scss">
.header-main {
padding: 16px 0px 16px 27px;
}
.header-text {
font-size: 18px;
font-weight: 600;
line-height: 26px;
color: #35373C;
}
</style>

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

@ -13,7 +13,7 @@ import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const editvisible = ref<boolean>(false); const editvisible = ref<boolean>(false);
const myForm = ref<QForm | null>(null); const myForm = ref<QForm | null>(null);
const edit = ref<boolean>(false); const edit = ref<boolean>(true);
const visibleColumns = ref<String[]>([]); const visibleColumns = ref<String[]>([]);
const store = usePlacementDataStore(); const store = usePlacementDataStore();
const filter = ref<string>(""); const filter = ref<string>("");
@ -211,15 +211,15 @@ const rows = ref<TableName[]>([
number: 3, number: 3,
examCount: 5, examCount: 5,
scoreResult: { scoreResult: {
scoreAFull: 200, scoreAFull: 200,
scoreA: 133, scoreA: 133,
scoreBFull: 200, scoreBFull: 200,
scoreB: 149, scoreB: 149,
scoreCFull: 100, scoreCFull: 100,
scoreC: 0, scoreC: 0,
scoreSumFull: 500, scoreSumFull: 500,
scoreSum: 282, scoreSum: 282,
examResult: "ผ่าน" examResult: "ผ่าน"
}, },
}, },
{ {
@ -244,15 +244,15 @@ const rows = ref<TableName[]>([
number: 3, number: 3,
examCount: 5, examCount: 5,
scoreResult: { scoreResult: {
scoreAFull: 200, scoreAFull: 200,
scoreA: 133, scoreA: 133,
scoreBFull: 200, scoreBFull: 200,
scoreB: 149, scoreB: 149,
scoreCFull: 100, scoreCFull: 100,
scoreC: 0, scoreC: 0,
scoreSumFull: 500, scoreSumFull: 500,
scoreSum: 282, scoreSum: 282,
examResult: "ผ่าน" examResult: "ผ่าน"
}, },
}, },
{ {
@ -277,15 +277,15 @@ const rows = ref<TableName[]>([
number: 3, number: 3,
examCount: 5, examCount: 5,
scoreResult: { scoreResult: {
scoreAFull: 200, scoreAFull: 200,
scoreA: 133, scoreA: 133,
scoreBFull: 200, scoreBFull: 200,
scoreB: 149, scoreB: 149,
scoreCFull: 100, scoreCFull: 100,
scoreC: 0, scoreC: 0,
scoreSumFull: 500, scoreSumFull: 500,
scoreSum: 282, scoreSum: 282,
examResult: "ผ่าน" examResult: "ผ่าน"
}, },
}, },
@ -311,15 +311,15 @@ const rows = ref<TableName[]>([
number: 3, number: 3,
examCount: 5, examCount: 5,
scoreResult: { scoreResult: {
scoreAFull: 200, scoreAFull: 200,
scoreA: 133, scoreA: 133,
scoreBFull: 200, scoreBFull: 200,
scoreB: 149, scoreB: 149,
scoreCFull: 100, scoreCFull: 100,
scoreC: 0, scoreC: 0,
scoreSumFull: 500, scoreSumFull: 500,
scoreSum: 282, scoreSum: 282,
examResult: "ผ่าน" examResult: "ผ่าน"
}, },
}, },
@ -345,15 +345,15 @@ const rows = ref<TableName[]>([
number: 3, number: 3,
examCount: 5, examCount: 5,
scoreResult: { scoreResult: {
scoreAFull: 200, scoreAFull: 200,
scoreA: 133, scoreA: 133,
scoreBFull: 200, scoreBFull: 200,
scoreB: 149, scoreB: 149,
scoreCFull: 100, scoreCFull: 100,
scoreC: 0, scoreC: 0,
scoreSumFull: 500, scoreSumFull: 500,
scoreSum: 282, scoreSum: 282,
examResult: "ผ่าน" examResult: "ผ่าน"
}, },
}, },
{ {
@ -378,15 +378,15 @@ const rows = ref<TableName[]>([
number: 3, number: 3,
examCount: 5, examCount: 5,
scoreResult: { scoreResult: {
scoreAFull: 200, scoreAFull: 200,
scoreA: 133, scoreA: 133,
scoreBFull: 200, scoreBFull: 200,
scoreB: 149, scoreB: 149,
scoreCFull: 100, scoreCFull: 100,
scoreC: 0, scoreC: 0,
scoreSumFull: 500, scoreSumFull: 500,
scoreSum: 282, scoreSum: 282,
examResult: "ผ่าน" examResult: "ผ่าน"
}, },
}, },
{ {
@ -411,15 +411,15 @@ const rows = ref<TableName[]>([
number: 3, number: 3,
examCount: 5, examCount: 5,
scoreResult: { scoreResult: {
scoreAFull: 200, scoreAFull: 200,
scoreA: 133, scoreA: 133,
scoreBFull: 200, scoreBFull: 200,
scoreB: 149, scoreB: 149,
scoreCFull: 100, scoreCFull: 100,
scoreC: 0, scoreC: 0,
scoreSumFull: 500, scoreSumFull: 500,
scoreSum: 282, scoreSum: 282,
examResult: "ผ่าน" examResult: "ผ่าน"
}, },
}, },
]); ]);
@ -459,152 +459,178 @@ const save = () => {
console.log("rows===>", rows.value) console.log("rows===>", rows.value)
} }
// modal detail
interface CheckboxItem {
id: number;
label: string;
}
const selection = ref([]);
const checkboxItems: CheckboxItem[] = [
{ id: 1, label: 'ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง' },
{ id: 2, label: 'ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.' },
{ id: 3, label: 'ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
{ id: 4, label: 'ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม' },
{ id: 5, label: 'ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง' },
{ id: 6, label: 'ไม่เป็นบุคคลล้มละลาย' },
{ id: 7, label: 'ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ' },
{ id: 8, label: 'ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ' },
{ id: 9, label: 'เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
{ id: 10, label: 'เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
{ id: 11, label: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' },
];
const clickSave = async () => {
console.log(selection.value)
};
</script> </script>
<template> <template>
<q-form ref="myForm"> <q-form ref="myForm">
<Table :rows="rows" :columns="columns" :filter="filter" :visible-columns="visibleColumns" v-model:inputfilter="filter" <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" v-model:inputvisible="visibleColumns" v-model:editvisible="editvisible" :cancel="clickCancel" :history="true"
:boss="true" :saveNoDraft="true" :add="save"> :boss="true" :saveNoDraft="true" :add="save">
<template #columns="props"> <template #columns="props">
<q-tr :props="props"> <q-tr :props="props">
<q-icon class="q-mr-sm" size="15px" color="primary" name="mdi-bookmark" v-if="props.row.isDirector"></q-icon> <q-icon class="q-mr-sm" size="15px" color="primary" name="mdi-bookmark" v-if="props.row.isDirector"></q-icon>
<q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row)" <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row)"
class="cursor-pointer"> class="cursor-pointer">
<div v-if="col.name == 'BMAOfficer'" class="table_ellipsis"> <div v-if="col.name == 'BMAOfficer'" class="table_ellipsis">
<div> <div>
<q-icon v-if="col.value == false" name="mdi-close" color="grey-5" class="text-h5" /> <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" /> <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
</div> </div>
</div> </div>
<div v-else-if="col.name == 'Name'" class="table_ellipsis"> <div v-else-if="col.name == 'Name'" class="table_ellipsis">
{{ col.value }} {{ col.value }}
<p>{{ props.row.fullName }}</p> <p>{{ props.row.fullName }}</p>
</div> </div>
<div v-else-if="col.name == 'Unit'" class="table_ellipsis"> <div v-else-if="col.name == 'Unit'" class="table_ellipsis">
<div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'"> <div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
<div @click="openAppointModal"> <div @click="openAppointModal">
<q-input hide-bottom-space outlined dense lazy-rules v-model="props.row.Unit"> <q-input hide-bottom-space outlined dense lazy-rules v-model="props.row.Unit">
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="bookmark" color="primary" /> <q-icon name="bookmark" color="primary" />
</template> </template>
</q-input> </q-input>
</div> </div>
</div> </div>
<div v-else-if="props.row.Status == 'ยังไม่บรรจุ' || props.row.Status == 'สละสิทธิ์'">-</div> <div v-else-if="props.row.Status == 'ยังไม่บรรจุ' || props.row.Status == 'สละสิทธิ์'">-</div>
<div v-else> <div v-else>
{{ props.row.examResult }} {{ props.row.examResult }}
<p>{{ col.value }}</p> <p>{{ col.value }}</p>
</div> </div>
</div> </div>
<div v-else-if="col.name == 'ReportingDate' && col.value != '-'" class="table_ellipsis"> <div v-else-if="col.name == 'ReportingDate' && col.value != '-'" class="table_ellipsis">
<div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'"> <div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
<datepicker :locale="'th'" autoApply :enableTimePicker="false" week-start="0" <datepicker :locale="'th'" autoApply :enableTimePicker="false" week-start="0"
v-model="props.row.ReportingDate"> v-model="props.row.ReportingDate">
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input hide-bottom-space outlined dense lazy-rules :model-value="mixin.date2Thai(col.value)"> <q-input hide-bottom-space outlined dense lazy-rules :model-value="mixin.date2Thai(col.value)">
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div v-else-if="props.row.Status == 'ยังไม่บรรจุ' || props.row.Status == 'สละสิทธิ์'">-</div> <div v-else-if="props.row.Status == 'ยังไม่บรรจุ' || props.row.Status == 'สละสิทธิ์'">-</div>
<div v-else> <div v-else>
{{ mixin.date2Thai(col.value) }} {{ mixin.date2Thai(col.value) }}
</div> </div>
</div> </div>
<div v-else class="table_ellipsis"> <div v-else class="table_ellipsis">
{{ col.value }} {{ col.value }}
</div> </div>
</q-td> </q-td>
<q-td auto-width> <q-td auto-width>
<div v-if="props.row.Status === 'บรรจุเเล้ว' || props.row.Status === 'สละสิทธิ์'"> <div v-if="props.row.Status === 'บรรจุเเล้ว' || props.row.Status === 'สละสิทธิ์'">
<div></div> <div></div>
</div> </div>
<div v-else-if="props.row.Status === 'ยังไม่บรรจุ'"> <div v-else-if="props.row.Status === 'ยังไม่บรรจุ'">
<q-btn color="blue" flat dense round size="14px" icon="mdi-account-alert" <q-btn color="blue" flat dense round size="14px" icon="mdi-account-alert"
@click="editDetail(props.row, 'wait')" /> @click="editDetail(props.row, 'wait')" />
<q-btn color="red" flat dense round size="14px" icon="mdi-account-remove" <q-btn color="red" flat dense round size="14px" icon="mdi-account-remove"
@click="editDetail(props.row, 'cancel')" /> @click="editDetail(props.row, 'cancel')" />
</div> </div>
<div v-else align="right"> <div v-else align="right">
<q-btn color="red" flat dense round size="14px" icon="mdi-account-remove" <q-btn color="red" flat dense round size="14px" icon="mdi-account-remove"
@click="editDetail(props.row, 'cancel')" /> @click="editDetail(props.row, 'cancel')" />
</div> </div>
</q-td> </q-td>
</q-tr> </q-tr>
</template> </template>
</Table> </Table>
</q-form> </q-form>
<q-dialog v-model="appointModal" persistent> <q-dialog v-model="appointModal" persistent>
<q-card style="width: 800px"> <q-card style="width: 800px">
<q-form ref="myForm"> <q-form ref="myForm">
<DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="clickClose" /> <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="clickClose" />
<q-separator /> <q-separator />
<q-card-section> <q-card-section>
<div class="row q-col-gutter-xs"> <div class="row q-col-gutter-xs">
<div class="col"> <div class="col">
<q-select outlined dense v-model="appoint.Code" label="รหัสส่วนราชการ" /> <q-select outlined dense v-model="appoint.Code" label="รหัสส่วนราชการ" />
</div> </div>
<div class="col"> <div class="col">
<q-select outlined dense v-model="appoint.UnitName" label="ชื่อหน่วยงาน" /> <q-select outlined dense v-model="appoint.UnitName" label="ชื่อหน่วยงาน" />
</div> </div>
</div> </div>
<div class="row q-col-gutter-xs q-pt-xs"> <div class="row q-col-gutter-xs q-pt-xs">
<div class="col"> <div class="col">
<q-select outlined dense v-model="appoint.PositionNo" label="ตำแหน่งเลขที่" /> <q-select outlined dense v-model="appoint.PositionNo" label="ตำแหน่งเลขที่" />
</div> </div>
<div class="col"> <div class="col">
<q-select outlined dense v-model="appoint.PositionType" label="ประเภทตำแหน่ง" /> <q-select outlined dense v-model="appoint.PositionType" label="ประเภทตำแหน่ง" />
</div> </div>
</div> </div>
<div class="row q-col-gutter-xs q-pt-xs"> <div class="row q-col-gutter-xs q-pt-xs">
<div class="col"> <div class="col">
<q-select outlined dense v-model="appoint.PositionManage" label="ตำแหน่งทางการบริหาร" /> <q-select outlined dense v-model="appoint.PositionManage" label="ตำแหน่งทางการบริหาร" />
</div> </div>
<div class="col"> <div class="col">
<q-select outlined dense v-model="appoint.PositionTypeManage" label="ด้านทางบริหาร" /> <q-select outlined dense v-model="appoint.PositionTypeManage" label="ด้านทางบริหาร" />
</div> </div>
</div> </div>
<div class="row q-col-gutter-xs q-pt-xs"> <div class="row q-col-gutter-xs q-pt-xs">
<div class="col"> <div class="col">
<q-select outlined dense v-model="appoint.PositionLine" label="ตำแหน่งในสายงาน" /> <q-select outlined dense v-model="appoint.PositionLine" label="ตำแหน่งในสายงาน" />
</div> </div>
<div class="col"> <div class="col">
<q-select outlined dense v-model="appoint.Major" label="ด้าน/สาขา" /> <q-select outlined dense v-model="appoint.Major" label="ด้าน/สาขา" />
</div> </div>
</div> </div>
<div class="row q-col-gutter-xs q-pt-xs"> <div class="row q-col-gutter-xs q-pt-xs">
<div class="col-6"> <div class="col-6">
<q-select outlined dense v-model="appoint.PositionLevel" label="ระดับตำแหน่ง" /> <q-select outlined dense v-model="appoint.PositionLevel" label="ระดับตำแหน่ง" />
</div> </div>
</div> </div>
</q-card-section> </q-card-section>
<q-separator /> <q-separator />
<DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit" :save="saveAppoint" /> <DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit" :save="saveAppoint" />
</q-form> </q-form>
</q-card> </q-card>
</q-dialog> </q-dialog>
<DialogCard v-model:Modal="modal" :getdetail="itemtest" :close="clickClose" />
<DialogCard v-model:Modal="modal" :getdetail="itemtest" :close="clickClose"/>
<q-dialog v-model="modal_right" persistent> <q-dialog v-model="modal_right" persistent>
<q-card style="width: 800px"> <q-card style="width: 800px">
@ -639,4 +665,81 @@ const save = () => {
margin-bottom: 0; margin-bottom: 0;
color: #818181; color: #818181;
} }
.icon-officer {
color: #00AA86;
padding-left: 20px;
}
.check-officer {
font-size: 17px;
font-weight: 500;
line-height: 26px;
color: #00AA86;
padding-left: 20px;
}
.contanier-box-main {
padding: 10px 21px 10px 21px;
}
.contanier-box-mini {
padding: 10px 0px 10px 0px;
}
.card-panding {
padding: 15px 21px 15px 21px;
}
.header-text {
font-size: 18px;
font-weight: 600;
color: #4F4F4F;
}
.header-sub-text {
font-size: 16px;
font-weight: 400;
line-height: 150%;
color: #818181;
}
.sub-text {
font-weight: 400;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.0025em;
color: #35373C;
}
.card-exam {
border-radius: 5px;
background: #FAFAFA;
}
.header-sub-text-exam {
font-size: 15px;
font-weight: 500;
line-height: 150%;
color: #818181;
}
.header-sub-text-exam-2 {
font-size: 15px;
font-weight: 500;
line-height: 150%;
color: #00AA86;
}
.sub-text-exam {
font-size: 15px;
font-weight: 500;
color: #000000;
}
.checkbox-group {
font-size: 16px;
font-weight: 400;
color: #35373C;
}
</style> </style>