Merge commit '580ab3a3c0' into develop
This commit is contained in:
commit
08f0507abe
4 changed files with 1189 additions and 66 deletions
|
|
@ -1,19 +1,23 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import type { QTableColumn, QForm } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useProfileDataStore } from "@/modules/04_registry/store";
|
||||
|
||||
import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
|
||||
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
|
||||
import type {
|
||||
RequestItemsHistoryObject,
|
||||
Columns,
|
||||
} from "@/modules/04_registry/interface/request/Information";
|
||||
import type {
|
||||
Information,
|
||||
DataOption,
|
||||
} from "@/modules/04_registry/components/profileType";
|
||||
|
||||
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
|
||||
import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
|
||||
import HistoryTable from "@/components/TableHistory.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
|
|
@ -22,6 +26,10 @@ const { showLoader, hideLoader, date2Thai, messageError } = mixin;
|
|||
|
||||
const modal = ref<boolean>(false);
|
||||
const myForm = ref<any>();
|
||||
const rowsHistory = ref<RequestItemsHistoryObject[]>([]);
|
||||
const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว");
|
||||
const filterHistory = ref<string>("");
|
||||
const modalHistory = ref<boolean>(false);
|
||||
|
||||
const Ops = ref<InformationOps>({
|
||||
prefixOps: [],
|
||||
|
|
@ -100,8 +108,206 @@ const dataLabel = {
|
|||
lastName: "นามสกุล",
|
||||
};
|
||||
|
||||
const columnsHistory = ref<QTableColumn[]>([
|
||||
{
|
||||
name: "citizenId",
|
||||
align: "left",
|
||||
label: "เลขประจำตัวประชาชน",
|
||||
sortable: true,
|
||||
field: "citizenId",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "prefix",
|
||||
align: "left",
|
||||
label: "คำนำหน้าชื่อ",
|
||||
sortable: true,
|
||||
field: "prefix",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "firstName",
|
||||
align: "left",
|
||||
label: "ชื่อ",
|
||||
sortable: true,
|
||||
field: "firstName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "lastName",
|
||||
align: "left",
|
||||
label: "นามสกุล",
|
||||
sortable: true,
|
||||
field: "lastName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "birthDate",
|
||||
align: "left",
|
||||
label: "วัน/เดือน/ปี เกิด",
|
||||
sortable: true,
|
||||
field: "birthDate",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "gender",
|
||||
align: "left",
|
||||
label: "เพศ",
|
||||
sortable: true,
|
||||
field: "gender",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "relationship",
|
||||
align: "left",
|
||||
label: "สถานภาพ",
|
||||
sortable: true,
|
||||
field: "relationship",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "bloodGroup",
|
||||
align: "left",
|
||||
label: "หมู่เลือด",
|
||||
sortable: true,
|
||||
field: "bloodGroup",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "nationality",
|
||||
align: "left",
|
||||
label: "สัญชาติ",
|
||||
sortable: true,
|
||||
field: "nationality",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "race",
|
||||
align: "left",
|
||||
label: "เชื้อชาติ",
|
||||
sortable: true,
|
||||
field: "race",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "religion",
|
||||
align: "left",
|
||||
label: "ศาสนา",
|
||||
sortable: true,
|
||||
field: "religion",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "telephoneNumber",
|
||||
align: "left",
|
||||
label: "เบอร์โทร",
|
||||
sortable: true,
|
||||
field: "telephoneNumber",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "employeeType",
|
||||
align: "left",
|
||||
label: "ประเภทการจ้าง",
|
||||
sortable: true,
|
||||
field: "employeeType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "employeeClass",
|
||||
align: "left",
|
||||
label: "ประเภทลูกจ้าง",
|
||||
sortable: true,
|
||||
field: "employeeClass",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "createdFullName",
|
||||
align: "left",
|
||||
label: "ผู้ดำเนินการ",
|
||||
sortable: true,
|
||||
field: "createdFullName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "createdAt",
|
||||
align: "left",
|
||||
label: "วันที่แก้ไข",
|
||||
sortable: true,
|
||||
field: "createdAt",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
|
||||
const visibleColumnsHistory = ref<String[]>([
|
||||
"citizenId",
|
||||
"prefix",
|
||||
"firstName",
|
||||
"lastName",
|
||||
"birthDate",
|
||||
"gender",
|
||||
"relationship",
|
||||
"bloodGroup",
|
||||
"nationality",
|
||||
"race",
|
||||
"religion",
|
||||
"telephoneNumber",
|
||||
"employeeType",
|
||||
"employeeClass",
|
||||
"createdFullName",
|
||||
"createdAt",
|
||||
]);
|
||||
|
||||
// get person detail list
|
||||
const fetchPerson = async () => {
|
||||
async function fetchPerson() {
|
||||
// showLoader();
|
||||
await http
|
||||
.get(config.API.person)
|
||||
|
|
@ -162,9 +368,9 @@ const fetchPerson = async () => {
|
|||
// hideLoader();
|
||||
profileStore.isLoad++;
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
const filterSelector = (val: any, update: Function, refData: string) => {
|
||||
function filterSelector(val: any, update: Function, refData: string) {
|
||||
switch (refData) {
|
||||
case "prefixOps":
|
||||
update(() => {
|
||||
|
|
@ -219,7 +425,54 @@ const filterSelector = (val: any, update: Function, refData: string) => {
|
|||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async function clickHistory() {
|
||||
modalHistory.value = true;
|
||||
// showLoader();
|
||||
// await http
|
||||
// .get(config.API.profileInforHisId(route.params.id.toString()))
|
||||
// .then((res) => {
|
||||
// let data = res.data.result;
|
||||
// rowsHistory.value = [];
|
||||
// data.map((e: RequestItemsHistoryObject) => {
|
||||
// rowsHistory.value.push({
|
||||
// citizenId: e.citizenId,
|
||||
// prefix: e.prefix,
|
||||
// firstName: e.firstName,
|
||||
// lastName: e.lastName,
|
||||
// birthDate: new Date(e.birthDate),
|
||||
// gender: e.gender,
|
||||
// relationship: e.relationship,
|
||||
// bloodGroup: e.bloodGroup,
|
||||
// nationality: e.nationality,
|
||||
// race: e.race,
|
||||
// religion: e.religion,
|
||||
// telephoneNumber: e.telephoneNumber,
|
||||
// employeeType:
|
||||
// e.employeeType == "gov"
|
||||
// ? "งบประมาณเงินอุดหนุนรัฐบาล"
|
||||
// : e.employeeType == "bkk"
|
||||
// ? "งบประมาณกรุงเทพมหานคร"
|
||||
// : "-",
|
||||
// employeeClass:
|
||||
// e.employeeClass == "perm"
|
||||
// ? "ลูกจ้างประจำ"
|
||||
// : e.employeeClass == "temp"
|
||||
// ? "ลูกจ้างชั่วคราว"
|
||||
// : "-",
|
||||
// createdFullName: e.createdFullName,
|
||||
// createdAt: new Date(e.createdAt),
|
||||
// });
|
||||
// });
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
myForm.value.validate().then(async (result: boolean) => {
|
||||
|
|
@ -236,11 +489,10 @@ onMounted(async () => {
|
|||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="row q-pt-sm q-pb-lg justyfy-between items-center">
|
||||
<span class="col text-subtitle1 text-weight-bold text-dark">
|
||||
ประวัติส่วนตัว
|
||||
</span>
|
||||
<div class="col text-right">
|
||||
<div class="row q-gutter-sm items-center">
|
||||
<div class="toptitle col text-dark">ประวัติส่วนตัว</div>
|
||||
|
||||
<div class="toptitle col text-right">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
|
|
@ -250,7 +502,7 @@ onMounted(async () => {
|
|||
>
|
||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn flat round icon="mdi-history" color="info">
|
||||
<q-btn flat round icon="mdi-history" color="info" @click="clickHistory">
|
||||
<q-tooltip>ประวัติข้อมูลส่วนตัว</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
|
@ -352,7 +604,10 @@ onMounted(async () => {
|
|||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="width: 600px">
|
||||
<q-form ref="myForm" @submit="onSubmit">
|
||||
<DialogHeader tittle="แก้ไขประวัติส่วนตัว" :close="() => modal = false" />
|
||||
<DialogHeader
|
||||
tittle="แก้ไขประวัติส่วนตัว"
|
||||
:close="() => (modal = false)"
|
||||
/>
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-sm">
|
||||
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||
|
|
@ -591,15 +846,46 @@ onMounted(async () => {
|
|||
flat
|
||||
round
|
||||
type="submit"
|
||||
icon="mdi-pencil-outline"
|
||||
color="primary"
|
||||
icon="mdi-content-save-outline"
|
||||
color="secondary"
|
||||
>
|
||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
||||
<q-tooltip>บันทึก</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<history-table
|
||||
:rows="rowsHistory"
|
||||
:columns="columnsHistory"
|
||||
:filter="filterHistory"
|
||||
:visible-columns="visibleColumnsHistory"
|
||||
v-model:modal="modalHistory"
|
||||
v-model:inputfilter="filterHistory"
|
||||
v-model:inputvisible="visibleColumnsHistory"
|
||||
v-model:tittle="tittleHistory"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr :props="props">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div
|
||||
v-if="col.name == 'birthDate' || col.name == 'createdAt'"
|
||||
class="table_ellipsis"
|
||||
>
|
||||
{{ date2Thai(col.value) }}
|
||||
</div>
|
||||
<div v-else class="table_ellipsis">
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</history-table>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style lang="scss">
|
||||
.modalfix {
|
||||
position: fixed !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -210,11 +210,11 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
|
||||
const openFile = async (val: string | null) => {
|
||||
async function openFile(val: string | null) {
|
||||
if (val != null) window.open(val);
|
||||
};
|
||||
}
|
||||
|
||||
const clickHistory = async (row: RequestItemsObject) => {
|
||||
async function clickHistory(row: RequestItemsObject) {
|
||||
modalHistory.value = true;
|
||||
// showLoader();
|
||||
// await http
|
||||
|
|
@ -242,9 +242,9 @@ const clickHistory = async (row: RequestItemsObject) => {
|
|||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
};
|
||||
}
|
||||
|
||||
const fetchData = async () => {
|
||||
async function fetchData() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.profileChangeNameId(profileId.value))
|
||||
|
|
@ -271,7 +271,7 @@ const fetchData = async () => {
|
|||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
// await fetchData();
|
||||
|
|
@ -279,11 +279,9 @@ onMounted(async () => {
|
|||
</script>
|
||||
<template>
|
||||
<div class="row q-gutter-sm items-center">
|
||||
<div class="toptitle col text-dark">
|
||||
ประวัติการเปลี่ยนชื่อ-นามสกุล
|
||||
</div>
|
||||
|
||||
<div class="toptitle row ">
|
||||
<div class="toptitle col text-dark">ประวัติการเปลี่ยนชื่อ-นามสกุล</div>
|
||||
|
||||
<div class="toptitle row">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
|
|
@ -395,6 +393,33 @@ onMounted(async () => {
|
|||
v-model:tittle="tittleHistory"
|
||||
:history="true"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr :props="props">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div v-if="col.name == 'createdAt'" class="table_ellipsis">
|
||||
{{ date2Thai(col.value) }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'status'" class="table_ellipsis">
|
||||
{{ typeChangeName(col.value) }}
|
||||
</div>
|
||||
<div v-else class="table_ellipsis">
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
v-if="props.row.file != null"
|
||||
color="green"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
icon="mdi-file-document-outline"
|
||||
@click="openFile(props.row.file)"
|
||||
/>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</history-table>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { QForm, useQuasar } from "quasar";
|
|||
|
||||
const mixin = useCounterMixin();
|
||||
const $q = useQuasar();
|
||||
const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;
|
||||
const { dialogConfirm } = mixin;
|
||||
|
||||
const formRef = ref<QForm | null>(null);
|
||||
|
||||
|
|
@ -16,7 +16,7 @@ const fatherPrefixRef = ref<any>(null);
|
|||
const fatherFirstNameRef = ref<any>(null);
|
||||
const fatherLastNameRef = ref<any>(null);
|
||||
const fatherData = reactive({
|
||||
isHaveInfo: "0",
|
||||
isHaveInfo: 0,
|
||||
isDead: false,
|
||||
citizenId: null,
|
||||
prefix: null,
|
||||
|
|
@ -26,7 +26,7 @@ const fatherData = reactive({
|
|||
job: null,
|
||||
});
|
||||
const motherData = reactive({
|
||||
isHaveInfo: "0",
|
||||
isHaveInfo: 0,
|
||||
isDead: false,
|
||||
citizenId: null,
|
||||
prefix: null,
|
||||
|
|
@ -36,7 +36,7 @@ const motherData = reactive({
|
|||
job: null,
|
||||
});
|
||||
const spouseData = reactive({
|
||||
isHave: "0",
|
||||
isHave: 0,
|
||||
isDead: false,
|
||||
citizenId: null,
|
||||
prefix: null,
|
||||
|
|
@ -69,7 +69,6 @@ function closeHistoryDialog() {
|
|||
}
|
||||
|
||||
function validateForm() {
|
||||
console.log("test");
|
||||
onSubmit();
|
||||
}
|
||||
|
||||
|
|
@ -105,8 +104,8 @@ function deleteChildren(items: any) {
|
|||
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-between text-center">
|
||||
<div class="text-h6 text-center">ข้อมูลครอบครัว</div>
|
||||
<div class="flex justify-between">
|
||||
<div class="toptitle col text-dark">ข้อมูลครอบครัว</div>
|
||||
<div>
|
||||
<q-btn
|
||||
round
|
||||
|
|
@ -217,7 +216,7 @@ function deleteChildren(items: any) {
|
|||
v-model="motherData.isHaveInfo"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="1"
|
||||
:val="1"
|
||||
:disable="true"
|
||||
label="มีข้อมูล"
|
||||
dense
|
||||
|
|
@ -227,7 +226,7 @@ function deleteChildren(items: any) {
|
|||
v-model="motherData.isHaveInfo"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="0"
|
||||
:val="0"
|
||||
:disable="true"
|
||||
color="red"
|
||||
label="ไม่มีข้อมูล"
|
||||
|
|
@ -465,7 +464,7 @@ function deleteChildren(items: any) {
|
|||
v-model="fatherData.isHaveInfo"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="1"
|
||||
:val="1"
|
||||
label="มีข้อมูล"
|
||||
dense
|
||||
color="primary"
|
||||
|
|
@ -474,14 +473,14 @@ function deleteChildren(items: any) {
|
|||
v-model="fatherData.isHaveInfo"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="0"
|
||||
:val="0"
|
||||
color="red"
|
||||
label="ไม่มีข้อมูล"
|
||||
dense
|
||||
/>
|
||||
<q-separator color="grey-4" vertical />
|
||||
<q-checkbox
|
||||
:disable="fatherData.isHaveInfo === '0' ? true : false"
|
||||
:disable="!fatherData.isHaveInfo"
|
||||
outline
|
||||
v-model="fatherData.isDead"
|
||||
label="เสียชีวิตแล้ว"
|
||||
|
|
@ -492,7 +491,7 @@ function deleteChildren(items: any) {
|
|||
</div>
|
||||
<div class="flex q-gutter-sm">
|
||||
<q-input
|
||||
:disable="fatherData.isHaveInfo === '0' ? true : false"
|
||||
:disable="!fatherData.isHaveInfo"
|
||||
class="col"
|
||||
outlined
|
||||
hide-bottom-space
|
||||
|
|
@ -503,7 +502,7 @@ function deleteChildren(items: any) {
|
|||
mask="#############"
|
||||
/>
|
||||
<q-select
|
||||
:disable="fatherData.isHaveInfo === '0' ? true : false"
|
||||
:disable="!fatherData.isHaveInfo"
|
||||
class="col"
|
||||
outlined
|
||||
lazy-rules
|
||||
|
|
@ -512,9 +511,10 @@ function deleteChildren(items: any) {
|
|||
:options="fatherData.optionPrefix"
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
|
||||
label="คำนำหน้าชื่อ"
|
||||
hidden-space
|
||||
/>
|
||||
<q-input
|
||||
:disable="fatherData.isHaveInfo === '0' ? true : false"
|
||||
:disable="!fatherData.isHaveInfo"
|
||||
class="col"
|
||||
outlined
|
||||
dense
|
||||
|
|
@ -522,9 +522,10 @@ function deleteChildren(items: any) {
|
|||
v-model="fatherData.firstName"
|
||||
:rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
|
||||
label="ชื่อ"
|
||||
hidden-space
|
||||
/>
|
||||
<q-input
|
||||
:disable="fatherData.isHaveInfo === '0' ? true : false"
|
||||
:disable="!fatherData.isHaveInfo"
|
||||
class="col"
|
||||
outlined
|
||||
dense
|
||||
|
|
@ -534,7 +535,7 @@ function deleteChildren(items: any) {
|
|||
label="นามสกุล"
|
||||
/>
|
||||
<q-input
|
||||
:disable="fatherData.isHaveInfo === '0' ? true : false"
|
||||
:disable="!fatherData.isHaveInfo"
|
||||
class="col"
|
||||
outlined
|
||||
dense
|
||||
|
|
@ -549,7 +550,7 @@ function deleteChildren(items: any) {
|
|||
v-model="motherData.isHaveInfo"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="1"
|
||||
:val="1"
|
||||
label="มีข้อมูล"
|
||||
dense
|
||||
color="primary"
|
||||
|
|
@ -558,14 +559,14 @@ function deleteChildren(items: any) {
|
|||
v-model="motherData.isHaveInfo"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="0"
|
||||
:val="0"
|
||||
color="red"
|
||||
label="ไม่มีข้อมูล"
|
||||
dense
|
||||
/>
|
||||
<q-separator color="grey-4" vertical />
|
||||
<q-checkbox
|
||||
:disable="motherData.isHaveInfo === '0' ? true : false"
|
||||
:disable="!motherData.isHaveInfo"
|
||||
outline
|
||||
v-model="motherData.isDead"
|
||||
label="เสียชีวิตแล้ว"
|
||||
|
|
@ -576,7 +577,7 @@ function deleteChildren(items: any) {
|
|||
</div>
|
||||
<div class="flex q-gutter-sm">
|
||||
<q-input
|
||||
:disable="motherData.isHaveInfo === '0' ? true : false"
|
||||
:disable="!motherData.isHaveInfo"
|
||||
class="col"
|
||||
outlined
|
||||
hide-bottom-space
|
||||
|
|
@ -587,7 +588,7 @@ function deleteChildren(items: any) {
|
|||
mask="#############"
|
||||
/>
|
||||
<q-select
|
||||
:disable="motherData.isHaveInfo === '0' ? true : false"
|
||||
:disable="!motherData.isHaveInfo"
|
||||
class="col"
|
||||
outlined
|
||||
dense
|
||||
|
|
@ -598,7 +599,7 @@ function deleteChildren(items: any) {
|
|||
label="คำนำหน้าชื่อ"
|
||||
/>
|
||||
<q-input
|
||||
:disable="motherData.isHaveInfo === '0' ? true : false"
|
||||
:disable="!motherData.isHaveInfo"
|
||||
class="col"
|
||||
outlined
|
||||
:rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
|
||||
|
|
@ -608,7 +609,7 @@ function deleteChildren(items: any) {
|
|||
label="ชื่อ"
|
||||
/>
|
||||
<q-input
|
||||
:disable="motherData.isHaveInfo === '0' ? true : false"
|
||||
:disable="!motherData.isHaveInfo"
|
||||
:rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
|
||||
class="col"
|
||||
outlined
|
||||
|
|
@ -618,7 +619,7 @@ function deleteChildren(items: any) {
|
|||
label="นามสกุล"
|
||||
/>
|
||||
<q-input
|
||||
:disable="motherData.isHaveInfo === '0' ? true : false"
|
||||
:disable="!motherData.isHaveInfo"
|
||||
class="col"
|
||||
outlined
|
||||
dense
|
||||
|
|
@ -633,7 +634,7 @@ function deleteChildren(items: any) {
|
|||
v-model="spouseData.isHave"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="1"
|
||||
:val="1"
|
||||
label="มี"
|
||||
dense
|
||||
color="primary"
|
||||
|
|
@ -642,14 +643,14 @@ function deleteChildren(items: any) {
|
|||
v-model="spouseData.isHave"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="0"
|
||||
:val="0"
|
||||
color="red"
|
||||
label="ไม่มี"
|
||||
dense
|
||||
/>
|
||||
<q-separator color="grey-4" vertical />
|
||||
<q-checkbox
|
||||
:disable="spouseData.isHave === '0' ? true : false"
|
||||
:disable="!spouseData.isHave"
|
||||
outline
|
||||
v-model="spouseData.isDead"
|
||||
label="เสียชีวิตแล้ว"
|
||||
|
|
@ -661,7 +662,7 @@ function deleteChildren(items: any) {
|
|||
<div class="flex q-gutter-sm">
|
||||
<q-input
|
||||
class="col"
|
||||
:disable="spouseData.isHave === '0' ? true : false"
|
||||
:disable="!spouseData.isHave"
|
||||
outlined
|
||||
hide-bottom-space
|
||||
dense
|
||||
|
|
@ -672,7 +673,7 @@ function deleteChildren(items: any) {
|
|||
/>
|
||||
<q-select
|
||||
class="col"
|
||||
:disable="spouseData.isHave === '0' ? true : false"
|
||||
:disable="!spouseData.isHave"
|
||||
outlined
|
||||
dense
|
||||
v-model="spouseData.prefix"
|
||||
|
|
@ -682,7 +683,7 @@ function deleteChildren(items: any) {
|
|||
/>
|
||||
<q-input
|
||||
class="col"
|
||||
:disable="spouseData.isHave === '0' ? true : false"
|
||||
:disable="!spouseData.isHave"
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
|
||||
|
|
@ -692,7 +693,7 @@ function deleteChildren(items: any) {
|
|||
<q-input
|
||||
class="col"
|
||||
:rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
|
||||
:disable="spouseData.isHave === '0' ? true : false"
|
||||
:disable="!spouseData.isHave"
|
||||
outlined
|
||||
dense
|
||||
v-model="spouseData.lastName"
|
||||
|
|
@ -700,7 +701,7 @@ function deleteChildren(items: any) {
|
|||
/>
|
||||
<q-input
|
||||
class="col"
|
||||
:disable="spouseData.isHave === '0' ? true : false"
|
||||
:disable="!spouseData.isHave"
|
||||
outlined
|
||||
dense
|
||||
v-model="spouseData.job"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,817 @@
|
|||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import moment from "moment";
|
||||
import dialogHeader from "@/components/DialogHeader.vue";
|
||||
import type { QTableProps } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { QForm, useQuasar } from "quasar";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const $q = useQuasar();
|
||||
const { dialogConfirm, date2Thai } = mixin;
|
||||
|
||||
const addDataDialog = ref<boolean>(false);
|
||||
const mode = ref<string>("table");
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "level",
|
||||
align: "left",
|
||||
label: "ระดับศึกษา",
|
||||
sortable: true,
|
||||
field: "level",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "institute",
|
||||
align: "left",
|
||||
label: "สถานศึกษา",
|
||||
sortable: true,
|
||||
field: "institute",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "startDate",
|
||||
align: "left",
|
||||
label: "ตั้งแต่",
|
||||
sortable: true,
|
||||
field: "startDate",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "finishDate",
|
||||
align: "left",
|
||||
label: "ถึง",
|
||||
sortable: true,
|
||||
field: "finishDate",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "graduateDate",
|
||||
align: "left",
|
||||
label: "วันที่สำเร็จการศึกษา",
|
||||
sortable: true,
|
||||
field: "graduateDate",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "isEducation",
|
||||
align: "left",
|
||||
label: "เป็นวุฒิการศึกษาในตำแหน่ง",
|
||||
sortable: true,
|
||||
field: "isEducation",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "degree",
|
||||
align: "left",
|
||||
label: "วุฒิการศึกษา",
|
||||
sortable: true,
|
||||
field: "degree",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "field",
|
||||
align: "left",
|
||||
label: "สาขาวิชา/ทาง",
|
||||
sortable: true,
|
||||
field: "field",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "fundName",
|
||||
align: "left",
|
||||
label: "ทุน",
|
||||
sortable: true,
|
||||
field: "fundName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "gpa",
|
||||
align: "left",
|
||||
label: "เกรดเฉลี่ย",
|
||||
sortable: true,
|
||||
field: "gpa",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "country",
|
||||
align: "left",
|
||||
label: "ประเทศ",
|
||||
sortable: true,
|
||||
field: "country",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "other",
|
||||
align: "left",
|
||||
label: "ข้อมูลการติดต่อ",
|
||||
sortable: true,
|
||||
field: "other",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "duration",
|
||||
align: "left",
|
||||
label: "ระยะเวลา",
|
||||
sortable: true,
|
||||
field: "duration",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "durationYear",
|
||||
align: "left",
|
||||
label: "ระยะเวลาหลักสูตร",
|
||||
sortable: true,
|
||||
field: "durationYear",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
const isDate = ref<string>("false");
|
||||
const educationOption = ["ใช่", "ไม่ใช่"];
|
||||
|
||||
const educationData = reactive({
|
||||
level: "",
|
||||
institute: "",
|
||||
startYear: new Date().getFullYear(),
|
||||
finishYear: new Date().getFullYear(),
|
||||
graduateDate: new Date(),
|
||||
startDate: new Date(),
|
||||
finishDate: new Date(),
|
||||
isEducation: "",
|
||||
degree: "",
|
||||
field: "",
|
||||
fundName: "",
|
||||
gpa: null,
|
||||
country: "",
|
||||
other: "",
|
||||
duration: "",
|
||||
durationYear: "",
|
||||
note: "",
|
||||
});
|
||||
|
||||
const row = [
|
||||
{
|
||||
level: "ประกาศนียบัตรบัณฑิต",
|
||||
institute: "เชียงใหม่วิทย์",
|
||||
degree: "ปริญญาตรี",
|
||||
field: "วิศวะคอม",
|
||||
gpa: "",
|
||||
country: "อังกฤษ",
|
||||
duration: "3 ปี",
|
||||
durationYear: "4 ปี",
|
||||
other: "อบต เชียงใหม่",
|
||||
fundName: "ทุนรัฐบาล",
|
||||
isEducation: "ปริญญาตรี",
|
||||
finishDate: new Date(),
|
||||
startDate: new Date(),
|
||||
graduateDate: new Date(),
|
||||
},
|
||||
{
|
||||
level: "ประกาศนียบัตรบัณฑิต",
|
||||
institute: "โปลิวิทยาคม",
|
||||
degree: "ปริญญาตรี",
|
||||
field: "วิศวะคอม",
|
||||
gpa: "3.8",
|
||||
country: "อังกฤษ",
|
||||
duration: "3 ปี",
|
||||
durationYear: "4 ปี",
|
||||
other: "อบต เชียงใหม่",
|
||||
fundName: "ทุนรัฐบาล",
|
||||
isEducation: "ปริญญาตรี",
|
||||
finishDate: new Date(),
|
||||
startDate: new Date(),
|
||||
graduateDate: new Date(),
|
||||
},
|
||||
{
|
||||
level: "ประกาศนียบัตรบัณฑิต",
|
||||
institute: "โรงเรียนวัฒโน",
|
||||
degree: "ปริญญาตรี",
|
||||
field: "วิศวะคอม",
|
||||
gpa: "3.8",
|
||||
country: "อังกฤษ",
|
||||
duration: "3 ปี",
|
||||
durationYear: "4 ปี",
|
||||
other: "อบต เชียงใหม่",
|
||||
fundName: "ทุนรัฐบาล",
|
||||
isEducation: "ปริญญาตรี",
|
||||
finishDate: new Date(),
|
||||
startDate: new Date(),
|
||||
graduateDate: new Date(),
|
||||
},
|
||||
{
|
||||
level: "ประกาศนียบัตรบัณฑิต",
|
||||
institute: "โรงเรียนวัฒโน",
|
||||
degree: "ปริญญาตรี",
|
||||
field: "วิศวะคอม",
|
||||
gpa: "3.8",
|
||||
country: "อังกฤษ",
|
||||
duration: "3 ปี",
|
||||
durationYear: "4 ปี",
|
||||
other: "อบต เชียงใหม่",
|
||||
fundName: "ทุนรัฐบาล",
|
||||
isEducation: "ปริญญาตรี",
|
||||
finishDate: new Date(),
|
||||
startDate: new Date(),
|
||||
graduateDate: new Date(),
|
||||
},
|
||||
];
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"level",
|
||||
"institute",
|
||||
"degree",
|
||||
"field",
|
||||
"gpa",
|
||||
"country",
|
||||
"duration",
|
||||
"durationYear",
|
||||
"other",
|
||||
"fundName",
|
||||
"isEducation",
|
||||
"finishDate",
|
||||
"startDate",
|
||||
"graduateDate",
|
||||
]);
|
||||
|
||||
function validateForm() {
|
||||
onSubmit();
|
||||
}
|
||||
|
||||
async function onSubmit() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
closeDialog();
|
||||
},
|
||||
"ยืนยันการบันทึกข้อมูล",
|
||||
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
||||
);
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
addDataDialog.value = false;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => isDate.value,
|
||||
() => {
|
||||
if (isDate.value === "true") {
|
||||
educationData.startDate = new Date(`${educationData.startYear}`);
|
||||
educationData.finishDate = new Date(`${educationData.finishYear}`);
|
||||
} else {
|
||||
educationData.startYear = parseInt(
|
||||
moment(educationData.startDate).format("YYYY")
|
||||
);
|
||||
educationData.finishYear = parseInt(
|
||||
moment(educationData.finishDate).format("YYYY")
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>5</div>
|
||||
<div class="toptitle col text-dark">ประวัติการศึกษา</div>
|
||||
<q-toolbar style="padding: 0px">
|
||||
<q-btn
|
||||
round
|
||||
flat
|
||||
color="primary"
|
||||
icon="add"
|
||||
size="16px"
|
||||
@click="addDataDialog = true"
|
||||
>
|
||||
<q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
|
||||
<q-space />
|
||||
<q-select
|
||||
v-if="mode === 'table'"
|
||||
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="q-mr-sm"
|
||||
/>
|
||||
|
||||
<q-btn-toggle
|
||||
v-model="mode"
|
||||
dense
|
||||
class="no-shadow"
|
||||
toggle-color="grey-4"
|
||||
:options="[
|
||||
{ value: 'table', slot: 'table' },
|
||||
{ value: 'card', slot: 'card' },
|
||||
]"
|
||||
>
|
||||
<template v-slot:table>
|
||||
<q-icon
|
||||
name="format_list_bulleted"
|
||||
size="24px"
|
||||
:style="{
|
||||
color: mode === 'table' ? '#787B7C' : '#C9D3DB',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-slot:card>
|
||||
<q-icon
|
||||
name="mdi-view-grid-outline"
|
||||
size="24px"
|
||||
:style="{
|
||||
color: mode === 'card' ? '#787B7C' : '#C9D3DB',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</q-btn-toggle>
|
||||
</q-toolbar>
|
||||
|
||||
<d-table
|
||||
:grid="mode === 'card'"
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="row"
|
||||
row-key="name"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
:rows-per-page-options="[20, 50, 100]"
|
||||
class="custom-header-table"
|
||||
:visible-columns="visibleColumns"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props" v-if="mode === 'table'">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td v-for="col in props.cols" :key="col.id">
|
||||
<div
|
||||
v-if="
|
||||
col.name === 'startDate' ||
|
||||
col.name === 'finishDate' ||
|
||||
col.name === 'graduateDate'
|
||||
"
|
||||
>
|
||||
{{ col.value ? date2Thai(col.value) : "-" }}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn color="info" flat dense round size="14px" icon="mdi-history" />
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:item="props" v-else>
|
||||
<div
|
||||
class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
|
||||
>
|
||||
<q-card bordered>
|
||||
<q-card-actions align="right">
|
||||
<q-btn flat round color="primary" icon="edit">
|
||||
<q-tooltip>แก่ไขข้อมุล</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn flat round color="blue" icon="history">
|
||||
<q-tooltip>ประวัติบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
<q-separator />
|
||||
<q-list>
|
||||
<q-item
|
||||
v-for="col in props.cols.filter((col) => col.name !== 'desc')"
|
||||
:key="col.name"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ col.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-item-label
|
||||
caption
|
||||
v-if="
|
||||
col.name === 'startDate' ||
|
||||
col.name === 'finishDate' ||
|
||||
col.name === 'graduateDate'
|
||||
"
|
||||
>
|
||||
{{ col.value ? date2Thai(col.value) : "-" }}
|
||||
</q-item-label>
|
||||
|
||||
<q-item-label caption v-else>{{ col.value }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
</d-table>
|
||||
|
||||
<q-dialog v-model="addDataDialog" class="dialog" persistent>
|
||||
<q-card style="min-width: 40%" class="bg-grey-11">
|
||||
<q-form @submit.prevent greedy @validation-success="validateForm">
|
||||
<q-card-section class="flex justify-between" style="padding: 0">
|
||||
<dialog-header tittle="เพิ่มประวัติการศึกษา" :close="closeDialog" />
|
||||
</q-card-section>
|
||||
<q-separator color="grey-4" />
|
||||
<div class="col">
|
||||
<q-card-section class="row q-gutter-sm">
|
||||
<q-input
|
||||
outlined
|
||||
v-model="educationData.level"
|
||||
label="ระดับการศึกษา"
|
||||
bg-color="white"
|
||||
class="col"
|
||||
dense
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกระดับการศึกษา'}`]"
|
||||
hide-bottom-space
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
v-model="educationData.institute"
|
||||
label="สถานศึกษา"
|
||||
bg-color="white"
|
||||
class="col"
|
||||
dense
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกสถานศึกษา'}`]"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-card flat bordered class="q-px-sm q-mx-md q-mb q-pb-sm borderCard">
|
||||
<div class="row col-12 q-gutter-md q-py-sm text-grey-7">
|
||||
<q-radio
|
||||
v-model="isDate"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="false"
|
||||
label="ปี"
|
||||
dense
|
||||
/>
|
||||
<q-radio
|
||||
v-model="isDate"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="true"
|
||||
label="วัน/เดือน/ปี"
|
||||
dense
|
||||
/>
|
||||
</div>
|
||||
<div v-if="isDate === 'false'" class="row q-gutter-sm">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="educationData.startYear"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
class="col"
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
@update:modelValue="educationData.startYear"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
lazy-rules
|
||||
outlined
|
||||
hide-bottom-space
|
||||
:model-value="educationData.startYear + 543"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณาเลือกปีที่เริ่มต้นศึกษา'}`,
|
||||
]"
|
||||
:label="`${'ปีที่เริ่มต้นศึกษา'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="educationData.finishYear"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
class="col"
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
@update:modelValue="educationData.finishYear"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
lazy-rules
|
||||
outlined
|
||||
hide-bottom-space
|
||||
:model-value="educationData.finishYear + 543"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณาเลือกปีที่จบการศึกษา'}`,
|
||||
]"
|
||||
:label="`${'ปีที่จบการศึกษา'}`"
|
||||
>
|
||||
<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-if="isDate === 'true'" class="row q-gutter-sm">
|
||||
<datepicker
|
||||
class="col"
|
||||
menu-class-name="modalfix"
|
||||
v-model="educationData.startDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
:model-value="date2Thai(educationData.startDate)"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้นศึกษา'}`,
|
||||
]"
|
||||
hide-bottom-space
|
||||
:label="`${'วัน/เดือน/ปี ที่เริ่มต้นศึกษา'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="educationData.finishDate"
|
||||
:locale="'th'"
|
||||
class="col"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
:model-value="date2Thai(educationData.finishDate)"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณาเลือกวันที่จบการศึกษา'}`,
|
||||
]"
|
||||
hide-bottom-space
|
||||
:label="`${'วัน/เดือน/ปี ที่จบการศึกษา'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</q-card>
|
||||
<q-card-section class="row q-gutter-sm q-pt-sm">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="educationData.graduateDate"
|
||||
:locale="'th'"
|
||||
class="col"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
bg-color="white"
|
||||
dense
|
||||
lazy-rules
|
||||
:model-value="date2Thai(educationData.graduateDate)"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
|
||||
hide-bottom-space
|
||||
:label="`${'วันที่ได้รับ'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" color="primary">
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
class="col"
|
||||
v-model="educationData.isEducation"
|
||||
:options="educationOption"
|
||||
label="เป็นวุฒิการศึกษาในตำแหน่ง"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-card-section class="row q-gutter-sm q-py-none">
|
||||
<q-input
|
||||
outlined
|
||||
v-model="educationData.degree"
|
||||
label="วุฒิการศึกษา"
|
||||
bg-color="white"
|
||||
class="col"
|
||||
dense
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
|
||||
hide-bottom-space
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
v-model="educationData.field"
|
||||
label="สาขาวิชา/ทาง"
|
||||
bg-color="white"
|
||||
class="col"
|
||||
dense
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
|
||||
<q-input
|
||||
outlined
|
||||
v-model="educationData.fundName"
|
||||
label="ทุน"
|
||||
bg-color="white"
|
||||
class="col"
|
||||
dense
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
v-model="educationData.gpa"
|
||||
label="เกรดเฉลี่ย"
|
||||
bg-color="white"
|
||||
class="col"
|
||||
dense
|
||||
mask="#.##"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
|
||||
<q-input
|
||||
outlined
|
||||
v-model="educationData.country"
|
||||
label="ประเทศ"
|
||||
bg-color="white"
|
||||
class="col"
|
||||
dense
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
v-model="educationData.other"
|
||||
label="ข้อมูลติดต่อ"
|
||||
bg-color="white"
|
||||
class="col"
|
||||
dense
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
|
||||
<q-input
|
||||
outlined
|
||||
v-model="educationData.duration"
|
||||
label="ระยะเวลา"
|
||||
bg-color="white"
|
||||
class="col"
|
||||
dense
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
v-model="educationData.durationYear"
|
||||
label="ระยะเวลาหลักสูตร"
|
||||
bg-color="white"
|
||||
class="col"
|
||||
type="number"
|
||||
dense
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-card-section class="row q-gutter-sm q-pt-sm">
|
||||
<q-input
|
||||
outlined
|
||||
v-model="educationData.note"
|
||||
label="หมายเหตุ"
|
||||
bg-color="white"
|
||||
class="col"
|
||||
dense
|
||||
type="textarea"
|
||||
/>
|
||||
</q-card-section>
|
||||
</div>
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
id="onSubmit"
|
||||
type="submit"
|
||||
dense
|
||||
unelevated
|
||||
label="บันทึก"
|
||||
color="public"
|
||||
class="q-px-md"
|
||||
>
|
||||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
.borderCard {
|
||||
border: 1px solid #d0d0d0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue