Edit dialog details

This commit is contained in:
watcharanondh 2023-06-13 10:52:53 +07:00
parent f331ee3339
commit bdf1f7f0f7
2 changed files with 276 additions and 329 deletions

View file

@ -68,7 +68,7 @@ const getClass = (val: boolean) => {
};
};
const selectData = (props: TableName) => {
itemtest.value = props
itemPopUp.value = props
if (editvisible.value == true) {
editRow.value = false;
modalEdit.value = true;
@ -424,7 +424,7 @@ const rows = ref<TableName[]>([
},
]);
const itemtest = ref<object>({});
const itemPopUp = ref<object>({});
const clickCancel = async () => {
editvisible.value = false;
@ -459,30 +459,6 @@ const save = () => {
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>
<template>
<q-form ref="myForm">
@ -629,7 +605,7 @@ const clickSave = async () => {
</q-dialog>
<DialogCard v-model:Modal="modal" :getdetail="itemtest" :close="clickClose" />
<DialogCard v-model:Modal="modal" :getdetail="itemPopUp" :close="clickClose" />
<q-dialog v-model="modal_right" persistent>
@ -665,81 +641,4 @@ const clickSave = async () => {
margin-bottom: 0;
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>

View file

@ -1,265 +1,313 @@
<script setup lang="ts">
import { ref, reactive } from "vue";
import { ref } from "vue";
import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
const save = ref<boolean>(true);
const save = ref<boolean>(true);
const props = defineProps({
Modal: Boolean,
close: {
type: Function,
default: () => console.log("not function"),
},
getdetail:{
getdetail: {
type: Object,
required: true
}
});
const information = reactive<any>({
profileID: '',
fullName: '',
dateOfBirth: '',
gender: '',
address: '',
university: '',
degree: '',
major: '',
remark: '',
scoreAFull: null,
scoreA: null,
scoreBFull: null,
scoreB: null,
scoreCFull: null,
scoreC: null,
examResult: '',
examCount: null,
number: null,
});
interface CheckboxItem {
value: number;
label: string;
id: 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: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' },
{ 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)
console.log(selection.value)
};
</script>
<template>
<q-dialog v-model="props.Modal" full-height full-width>
<q-card >
<q-dialog v-model="props.Modal">
<q-card style="max-width: 100%;width:80%;">
<q-form ref="myForm">
<DialogHeader
:title="`รายละเอียดของ ${ props.getdetail.fullName}`"
:close="close"
/>
<div class="row">
<DialogHeader :title="`รายละเอียดของ ${props.getdetail.fullName}`" :close="close" />
</div>
<q-separator />
<q-card-section class="q-pa-sm">
<div class="q-card q-card--bordered q-card--flat q-pa-md q-my-md">
<div class="col-12 row items-center q-pa-sm" style="font-weight: bold; ">
อมลทวไป
<div class="contanier-box-main">
<div class="contanier-box-mini">
<q-card bordered class="card-panding">
<div class="row items-center q-pa-xs header-text">
อมลทวไป <span class="check-officer"><q-icon name="mdi-check" />
าราชการฯ กทม</span>
</div>
<div class="row q-pa-xs">
<div class="col-3 header-sub-text">
<div class="q-pb-md">
เลขทประจำตวประชาชน
</div>
<div class="q-pb-md">
/เดอน/เก
</div>
</div>
<div class="col-4 sub-text">
<div class="q-pb-md">
{{ props.getdetail.profileID }}
</div>
<div class="q-pb-md">
{{ props.getdetail.dateOfBirth }}
</div>
</div>
<div class="col-2 header-sub-text">
<div class="q-pb-md">
-นามสก
</div>
<div class="q-pb-md">
เพศ
</div>
</div>
<div class="col-3 sub-text">
<div class="q-pb-md">
{{ props.getdetail.fullName }}
</div>
<div class="q-pb-md">
{{ props.getdetail.gender }}
</div>
</div>
</div>
</q-card>
</div>
<div class="row">
<div class="col-3 q-pa-xs" style="color: gray; ">
เลขทประจำตวประชาชน
</div>
<div class="col-3 q-pa-xs" style="">
{{ props.getdetail.profileID }}
</div>
<div class="col-3 q-pa-xs" style="color: gray; ">
-นามสก
</div>
<div class="col-3 q-pa-xs" style="">
{{ props.getdetail.fullName }}
</div>
<div class="contanier-box-mini">
<q-card bordered class="card-panding">
<div class="row items-center q-pa-xs header-text">
ลำนำ
</div>
<div class="row q-pa-xs">
<div class="col-3 header-sub-text">
อย
</div>
<div class="col-9 header-sub-text">
{{ props.getdetail.address }}
</div>
</div>
</q-card>
</div>
<div class="row">
<div class="col-3 q-pa-xs" style="color: gray; ">
/เดอน/เก
</div>
<div class="col-3 q-pa-xs" style="">
{{ props.getdetail.dateOfBirth }}
</div>
<div class="col-3 q-pa-xs" style="color: gray; ">
เพศ
</div>
<div class="col-3 q-pa-xs" style="">
{{ props.getdetail.gender }}
</div>
</div>
</div>
<div class="q-card q-card--bordered q-card--flat q-pa-md q-my-md">
<div class="col-12 row items-center q-pa-xs" style="font-weight: bold; ">
ลำนำ
</div>
<div class="row">
<div class="col-3 q-pa-xs" style="color: gray; ">
อย
</div>
<div class="col q-pa-xs" >
{{ props.getdetail.address }}
</div>
<div class="contanier-box-mini">
<q-card bordered class="card-panding">
<div class="row items-center q-pa-xs header-text">
การศกษา
</div>
<div class="row q-pa-xs">
<div class="col-3 header-sub-text">
<div class="q-pb-md">
สถานศกษา
</div>
<div class="q-pb-md">
สาขาวชาเอก
</div>
</div>
<div class="col-4 sub-text">
<div class="q-pb-md">
{{ props.getdetail.university }}
</div>
<div class="q-pb-md">
{{ props.getdetail.major }}
</div>
</div>
<div class="col-2 header-sub-text">
<div class="q-pb-md">
การศกษา
</div>
<div class="q-pb-md">
นๆ
</div>
</div>
<div class="col-3 sub-text">
<div class="q-pb-md">
{{ props.getdetail.degree ? props.getdetail.degree : '-' }}
</div>
<div class="q-pb-md">
{{ props.getdetail.remark ? props.getdetail.remark : '-' }}
</div>
</div>
</div>
</q-card>
</div>
<div class="contanier-box-mini">
<q-card bordered class="card-panding">
<div class="row items-center q-pa-xs header-text">
การสอบ
</div>
<div class="row q-pa-xs">
<div class="col-6">
<q-card class="card-exam q-pa-sm">
<div class="row">
<div class="col-4 q-pa-xs header-sub-text-exam">
<div> ประเภท </div>
<div> ภาค </div>
<div> ภาค </div>
<div> ภาค </div>
<div> รวมทงหมด </div>
</div>
<div class="col-4 q-pa-xs">
<div class="header-sub-text-exam-2"> คะแนนทได</div>
<div class="sub-text-exam"> {{
props.getdetail.scoreResult.scoreAFull }}</div>
<div class="sub-text-exam"> {{
props.getdetail.scoreResult.scoreBFull }}</div>
<div class="sub-text-exam"> {{
props.getdetail.scoreResult.scoreCFull }}</div>
<div class="sub-text-exam"> {{
(props.getdetail.scoreResult.scoreSumFull) }}
</div>
</div>
<div class="col-4 q-pa-xs header-sub-text-exam-2">
<div class="header-sub-text-exam-2">ผลการสอบ</div>
<div class="sub-text-exam">{{ props.getdetail.scoreResult.scoreA
}}</div>
<div class="sub-text-exam">{{ props.getdetail.scoreResult.scoreB
}}</div>
<div class="sub-text-exam">{{ props.getdetail.scoreResult.scoreC
}}</div>
<div class="sub-text-exam">{{
(props.getdetail.scoreResult.scoreSum) }}</div>
</div>
</div>
</q-card>
</div>
<div class="col-1"></div>
<div class="col-5 q-pt-sm q-pl-lg">
<div class="row">
<div class="col-7 header-sub-text">
<div class="q-pb-sm">ผลการสอบ</div>
<div class="q-pb-sm">ลำดบทสอบได</div>
<div class="q-pb-sm">จำนวนครงทสมครสอบ</div>
</div>
<div class="col-5 sub-text-exam">
<div class="q-pb-sm">{{ props.getdetail.scoreResult.examResult }}
</div>
<div class="q-pb-sm">{{ props.getdetail.number }}</div>
<div class="q-pb-sm">{{ props.getdetail.examCount }}</div>
</div>
</div>
</div>
</div>
</q-card>
</div>
<div class="q-card q-card--bordered q-card--flat q-pa-md q-my-md">
<div class="col-12 row items-center q-pa-xs" style="font-weight: bold; ">
การศกษา
<div class="contanier-box-mini">
<q-card bordered class="card-panding">
<div class="col-12 row items-center q-pa-sm header-text">
การคดกรองคณสมบ
</div>
<div v-for="item of checkboxItems" :key="item.id" class="q-pa-sm">
<q-checkbox size="xs" v-model="selection" :val="item.id" :label="item.label" keep-color
color="teal" class="checkbox-group" />
<q-separator />
</div>
</q-card>
</div>
<div class="row">
<div class="col-3 q-pa-xs" style="color: gray; ">
สถานศกษา
</div>
<div class="col-3 q-pa-xs" style="">
{{ props.getdetail.university }}
</div>
<div class="col-3 q-pa-xs" style="color: gray; ">
การศกษา
</div>
<div class="col-3 q-pa-xs">
{{ props.getdetail.degree }}
</div>
</div>
<div class="row">
<div class="col-3 q-pa-xs" style="color: gray; ">
สาขาวชาเอก
</div>
<div class="col-3 q-pa-xs" style="">
{{ props.getdetail.major }}
</div>
<div class="col-3 q-pa-xs" style="color: gray; ">
นๆ
</div>
<div class="col-3 q-pa-xs" style="">
{{ props.getdetail.remark }}
</div>
</div>
</div>
<div class="q-card q-card--bordered q-card--flat q-pa-md q-my-md">
<div class="col-12 row items-center q-pa-xs" style="font-weight: bold; ">
การสอบ
</div>
<div class="row q-mx-md">
<div class="col-2 q-pa-xs" style="color: gray; ">
ประเภท
</div>
<div class="col-2 q-pa-xs" style="color: #259E75; ">
คะแนนเต
</div>
<div class="col-2 q-pa-xs" style="color: #259E75; ">
คะแนนทได
</div>
<div class="col-2 q-pa-xs" style="color: gray; ">
ผลการสอบ
</div>
<div class="col-2 q-pa-xs">
{{ props.getdetail.scoreResult.examResult }}
</div>
</div>
<div class="row q-mx-md ">
<div class="col-2 q-pa-xs" style="color: gray; ">
ภาค
</div>
<div class="col-2 q-pa-xs" style="font-weight: bold; ">
{{ props.getdetail.scoreResult.scoreAFull }}
</div>
<div class="col-2 q-pa-xs" style="font-weight: bold;">
{{ props.getdetail.scoreResult.scoreA }}
</div>
<div class="col-2 q-pa-xs" style="color: gray; ">
ลำดบทสอบได
</div>
<div class="col-2 q-pa-xs" style="font-weight: bold;">
{{ props.getdetail.number }}
</div>
</div>
<div class="row q-mx-md">
<div class="col-2 q-pa-xs" style="color: gray; ">
ภาค
</div>
<div class="col-2 q-pa-xs" style="font-weight: bold;">
{{ props.getdetail.scoreResult.scoreBFull }}
</div>
<div class="col-2 q-pa-xs" style="font-weight: bold;">
{{ props.getdetail.scoreResult.scoreB }}
</div>
<div class="col-2 q-pa-xs" style="color: gray; ">
จำนวนครงทสมครสอบ
</div>
<div class="col-2 q-pa-xs" style="font-weight: bold;">
{{ props.getdetail.examCount }}
</div>
</div>
<div class="row q-mx-md">
<div class="col-2 q-pa-xs" style="color: gray; ">
ภาค
</div>
<div class="col-2 q-pa-xs" style="font-weight: bold;">
{{ props.getdetail.scoreResult.scoreCFull }}
</div>
<div class="col-2 q-pa-xs" style="font-weight: bold;">
{{ props.getdetail.scoreResult.scoreCFull }}
</div>
</div>
<div class="row q-mx-md">
<div class="col-2 q-pa-xs" style="color: gray; ">
รวมทงหมด
</div>
<div class="col-2 q-pa-xs" style="font-weight: bold;">
{{ (props.getdetail.scoreResult.scoreSumFull) }}
</div>
<div class="col-2 q-pa-xs" style="font-weight: bold;">
{{ (props.getdetail.scoreResult.scoreSum) }}
</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-sm" style="font-weight: bold; ">
การคดกรองคณสมบ
</div>
<div >
<q-list >
<q-item>
<q-option-group v-model="selection" :options="checkboxItems" keep-color color="green" type="checkbox" style=""/>
</q-item>
<q-separator spaced inset />
</q-list>
</div>
</div>
</q-card-section>
<DialogFooter
:save="clickSave"
v-model:editvisible="save"
/>
</div>
<q-separator />
<div>
<DialogFooter :save="clickSave" v-model:editvisible="save" />
</div>
</q-form>
</q-card>
</q-dialog>
</template>
</template>
<style lang="scss" scoped>
.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>