dialog detail => Done
This commit is contained in:
watcharanondh
parent
d6010bf0f1
commit
8704c1ff39
3 changed files with 434 additions and 375 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,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>("");
|
||||||
|
|
@ -365,23 +365,23 @@ const save = () => {
|
||||||
|
|
||||||
// modal detail
|
// modal detail
|
||||||
interface CheckboxItem {
|
interface CheckboxItem {
|
||||||
value: number;
|
id: number;
|
||||||
label: string;
|
label: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const selection = ref([]);
|
const selection = ref([]);
|
||||||
const checkboxItems: CheckboxItem[] = [
|
const checkboxItems: CheckboxItem[] = [
|
||||||
{ value: 1, label: 'ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง' },
|
{ id: 1, label: 'ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง' },
|
||||||
{ value: 2, label: 'ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.' },
|
{ id: 2, label: 'ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.' },
|
||||||
{ value: 3, label: 'ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
|
{ id: 3, label: 'ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
|
||||||
{ value: 4, label: 'ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม' },
|
{ id: 4, label: 'ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม' },
|
||||||
{ value: 5, label: 'ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง' },
|
{ id: 5, label: 'ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง' },
|
||||||
{ value: 6, label: 'ไม่เป็นบุคคลล้มละลาย' },
|
{ id: 6, label: 'ไม่เป็นบุคคลล้มละลาย' },
|
||||||
{ value: 7, label: 'ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ' },
|
{ id: 7, label: 'ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ' },
|
||||||
{ value: 8, label: 'ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ' },
|
{ id: 8, label: 'ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ' },
|
||||||
{ value: 9, label: 'เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
|
{ id: 9, label: 'เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
|
||||||
{ value: 10, label: 'เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
|
{ id: 10, label: 'เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
|
||||||
{ value: 11, label: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' },
|
{ id: 11, label: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' },
|
||||||
];
|
];
|
||||||
|
|
||||||
const clickSave = async () => {
|
const clickSave = async () => {
|
||||||
|
|
@ -389,345 +389,326 @@ const clickSave = async () => {
|
||||||
};
|
};
|
||||||
</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.Id }}</p>
|
<p>{{ props.row.Id }}</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.UnitGroup }}
|
{{ props.row.UnitGroup }}
|
||||||
<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 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.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-6">
|
||||||
|
<q-select outlined dense v-model="appoint.PositionLevel" label="ระดับตำแหน่ง" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</q-card-section>
|
||||||
|
|
||||||
|
<q-separator />
|
||||||
|
<DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit" :save="saveAppoint" />
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
|
||||||
|
<q-dialog v-model="modal">
|
||||||
|
<q-card style="max-width: 100%;width:80%;">
|
||||||
|
<q-form ref="myForm">
|
||||||
|
<div class="row">
|
||||||
|
<DialogHeader :title="`รายละเอียดของ ${Name}`" :close="clickClose" />
|
||||||
|
</div>
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<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">
|
||||||
|
{{ information.cardId }}
|
||||||
|
</div>
|
||||||
|
<div class="q-pb-md">
|
||||||
|
{{ information.birthday }}
|
||||||
|
</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">
|
||||||
|
{{ information.fullname }}
|
||||||
|
</div>
|
||||||
|
<div class="q-pb-md">
|
||||||
|
{{ information.gender }}
|
||||||
|
</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-3 header-sub-text">
|
||||||
|
ที่อยู่
|
||||||
|
</div>
|
||||||
|
<div class="col-9 header-sub-text">
|
||||||
|
{{ information.address }}
|
||||||
|
</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-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">
|
||||||
|
{{ information.school }}
|
||||||
|
</div>
|
||||||
|
<div class="q-pb-md">
|
||||||
|
{{ information.department }}
|
||||||
|
</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">
|
||||||
|
{{ information.deegree ? information.deegree : '-' }}
|
||||||
|
</div>
|
||||||
|
<div class="q-pb-md">
|
||||||
|
{{ information.other }}
|
||||||
|
</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>
|
||||||
<div class="col">
|
<div class="col-4 q-pa-xs">
|
||||||
<q-select outlined dense v-model="appoint.UnitName" label="ชื่อหน่วยงาน" />
|
<div class="header-sub-text-exam-2"> คะแนนที่ได้</div>
|
||||||
|
<div class="sub-text-exam"> {{ information.A1 }}</div>
|
||||||
|
<div class="sub-text-exam"> {{ information.B1 }}</div>
|
||||||
|
<div class="sub-text-exam"> {{ information.C1 }}</div>
|
||||||
|
<div class="sub-text-exam"> {{ (information.A1 + information.B1 + information.C1) }}</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">{{ information.A2 }}</div>
|
||||||
|
<div class="sub-text-exam">{{ information.B2 }}</div>
|
||||||
|
<div class="sub-text-exam">{{ information.C2 }}</div>
|
||||||
|
<div class="sub-text-exam"> {{ (information.A2 + information.B2 + information.C2) }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</q-card>
|
||||||
<div class="row q-col-gutter-xs q-pt-xs">
|
</div>
|
||||||
<div class="col">
|
<div class="col-1"></div>
|
||||||
<q-select outlined dense v-model="appoint.PositionNo" label="ตำแหน่งเลขที่" />
|
<div class="col-5 q-pt-sm q-pl-lg">
|
||||||
</div>
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col-7 header-sub-text">
|
||||||
<q-select outlined dense v-model="appoint.PositionType" label="ประเภทตำแหน่ง" />
|
<div class="q-pb-sm">ผลการสอบ</div>
|
||||||
</div>
|
<div class="q-pb-sm">ลำดับที่สอบได้</div>
|
||||||
|
<div class="q-pb-sm">จำนวนครั้งที่สมัครสอบ</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-5 sub-text-exam">
|
||||||
<div class="row q-col-gutter-xs q-pt-xs">
|
<div class="q-pb-sm">{{ information.status }}</div>
|
||||||
<div class="col">
|
<div class="q-pb-sm">{{ information.range }}</div>
|
||||||
<q-select outlined dense v-model="appoint.PositionManage" label="ตำแหน่งทางการบริหาร" />
|
<div class="q-pb-sm">{{ information.total }}</div>
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<q-select outlined dense v-model="appoint.PositionTypeManage" label="ด้านทางบริหาร" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="row q-col-gutter-xs q-pt-xs">
|
<div class="contanier-box-mini">
|
||||||
<div class="col">
|
<q-card bordered class="card-panding">
|
||||||
<q-select outlined dense v-model="appoint.PositionLine" label="ตำแหน่งในสายงาน" />
|
<div class="col-12 row items-center q-pa-sm header-text">
|
||||||
</div>
|
การคัดกรองคุณสมบัติ
|
||||||
<div class="col">
|
</div>
|
||||||
<q-select outlined dense v-model="appoint.Major" label="ด้าน/สาขา" />
|
<div v-for="item of checkboxItems" :key="item.id" class="q-pa-sm">
|
||||||
</div>
|
<q-checkbox size="xs" v-model="selection" :val="item.id" :label="item.label" keep-color color="teal"
|
||||||
</div>
|
class="checkbox-group" />
|
||||||
|
<q-separator />
|
||||||
<div class="row q-col-gutter-xs q-pt-xs">
|
</div>
|
||||||
<div class="col-6">
|
</q-card>
|
||||||
<q-select outlined dense v-model="appoint.PositionLevel" label="ระดับตำแหน่ง" />
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<q-separator />
|
||||||
|
<div>
|
||||||
</q-card-section>
|
<DialogFooter :save="clickSave" v-model:editvisible="edit" v-model:modalEdit="modalEdit" />
|
||||||
|
</div>
|
||||||
<q-separator />
|
|
||||||
<DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit" :save="saveAppoint" />
|
|
||||||
</q-form>
|
|
||||||
</q-card>
|
|
||||||
</q-dialog>
|
|
||||||
|
|
||||||
<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-form>
|
||||||
</q-card>
|
</q-card>
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
|
|
@ -765,4 +746,81 @@ const clickSave = async () => {
|
||||||
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>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue