Merge branch 'nice' into develop
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
commit
f5da1f8590
2 changed files with 877 additions and 10 deletions
|
|
@ -0,0 +1,862 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive, ref, onMounted } from "vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
|
||||||
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||||||
|
|
||||||
|
import { useProfileDataStore } from "@/modules/04_registryNew/stores/profile";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const store = useProfileDataStore();
|
||||||
|
const { fetchPerson, filterSelector } = store;
|
||||||
|
const {
|
||||||
|
dialogRemove,
|
||||||
|
dialogConfirm,
|
||||||
|
showLoader,
|
||||||
|
hideLoader,
|
||||||
|
messageError,
|
||||||
|
success,
|
||||||
|
date2Thai,
|
||||||
|
} = useCounterMixin();
|
||||||
|
|
||||||
|
const visibleColumns = ref<String[]>([
|
||||||
|
"citizenId",
|
||||||
|
"prefix",
|
||||||
|
"firstName",
|
||||||
|
"lastName",
|
||||||
|
"job",
|
||||||
|
"isLive",
|
||||||
|
]);
|
||||||
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "citizenId",
|
||||||
|
align: "left",
|
||||||
|
label: "เลขบัตรประจำตัวประชาชน",
|
||||||
|
sortable: true,
|
||||||
|
field: "citizenId",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
name: "prefix",
|
||||||
|
align: "left",
|
||||||
|
label: "คำนำหน้า",
|
||||||
|
sortable: true,
|
||||||
|
field: "prefix",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "firstName",
|
||||||
|
align: "left",
|
||||||
|
label: "ชื่อ",
|
||||||
|
sortable: true,
|
||||||
|
field: "firstName",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "lastName",
|
||||||
|
align: "left",
|
||||||
|
label: "นามสกุล",
|
||||||
|
sortable: true,
|
||||||
|
field: "lastName",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "job",
|
||||||
|
align: "left",
|
||||||
|
label: "อาชีพ",
|
||||||
|
sortable: true,
|
||||||
|
field: "job",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "isLive",
|
||||||
|
align: "left",
|
||||||
|
label: "สถานภาพการมีชีวิต",
|
||||||
|
sortable: true,
|
||||||
|
field: "isLive",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const rows = ref<any[]>([]);
|
||||||
|
|
||||||
|
const childData = ref<any[]>([{}]);
|
||||||
|
const spouseData = ref<any[]>([{}]);
|
||||||
|
const fatherData = ref({
|
||||||
|
isLive: 1,
|
||||||
|
citizenId: "1231231231231",
|
||||||
|
prefix: "นาย",
|
||||||
|
firstName: "ตรีชาไทย",
|
||||||
|
lastName: "หวังดี",
|
||||||
|
job: "จอมพล",
|
||||||
|
});
|
||||||
|
const momData = ref({
|
||||||
|
isLive: 0,
|
||||||
|
citizenId: "1572476458930",
|
||||||
|
prefix: "นาง",
|
||||||
|
firstName: "บุษดี",
|
||||||
|
lastName: "มาดี",
|
||||||
|
job: "พยาบาล",
|
||||||
|
});
|
||||||
|
|
||||||
|
const modal = ref<boolean>(false);
|
||||||
|
const modalHistory = ref<boolean>(false);
|
||||||
|
const filterHistory = ref<string>("");
|
||||||
|
|
||||||
|
const titleForm = ref<string>("");
|
||||||
|
const typeForm = ref<string>("");
|
||||||
|
const isEdit = ref<boolean>(false);
|
||||||
|
|
||||||
|
const optionRelationshipMain = ref<any>([]);
|
||||||
|
const optionRelationship = ref<any>([]);
|
||||||
|
|
||||||
|
const fromData = reactive({
|
||||||
|
isLive: 0,
|
||||||
|
citizenId: "",
|
||||||
|
prefix: "",
|
||||||
|
firstName: "",
|
||||||
|
lastName: "",
|
||||||
|
job: "",
|
||||||
|
lastNameOld: "",
|
||||||
|
statusMarital: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
function onSubmit() {
|
||||||
|
dialogConfirm($q, () => {
|
||||||
|
closeDialog();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeDialog() {
|
||||||
|
modal.value = false;
|
||||||
|
modalHistory.value = false;
|
||||||
|
fromData.isLive = 0;
|
||||||
|
fromData.citizenId = "";
|
||||||
|
fromData.prefix = "";
|
||||||
|
fromData.firstName = "";
|
||||||
|
fromData.lastName = "";
|
||||||
|
fromData.job = "";
|
||||||
|
fromData.lastNameOld = "";
|
||||||
|
fromData.statusMarital = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
function onOpenDialogForm(
|
||||||
|
type: string,
|
||||||
|
isStatusEdit: boolean = false,
|
||||||
|
data: any = undefined
|
||||||
|
) {
|
||||||
|
modal.value = true;
|
||||||
|
typeForm.value = type;
|
||||||
|
isEdit.value = isStatusEdit;
|
||||||
|
|
||||||
|
if (type === "father") {
|
||||||
|
titleForm.value = " • บิดา";
|
||||||
|
if (isStatusEdit) {
|
||||||
|
fromData.isLive = fatherData.value.isLive;
|
||||||
|
fromData.citizenId = fatherData.value.citizenId;
|
||||||
|
fromData.prefix = fatherData.value.prefix;
|
||||||
|
fromData.firstName = fatherData.value.firstName;
|
||||||
|
fromData.lastName = fatherData.value.lastName;
|
||||||
|
fromData.job = fatherData.value.job;
|
||||||
|
}
|
||||||
|
} else if (type === "mom") {
|
||||||
|
titleForm.value = " • มารดา";
|
||||||
|
if (isStatusEdit) {
|
||||||
|
fromData.isLive = momData.value.isLive;
|
||||||
|
fromData.citizenId = momData.value.citizenId;
|
||||||
|
fromData.prefix = momData.value.prefix;
|
||||||
|
fromData.firstName = momData.value.firstName;
|
||||||
|
fromData.lastName = momData.value.lastName;
|
||||||
|
fromData.job = momData.value.job;
|
||||||
|
}
|
||||||
|
} else if (type === "spouse") {
|
||||||
|
titleForm.value = " • คู่สมรส";
|
||||||
|
} else if (type === "child") {
|
||||||
|
titleForm.value = " • บุตร";
|
||||||
|
fromData.isLive = data.isLive;
|
||||||
|
fromData.citizenId = data.citizenId;
|
||||||
|
fromData.prefix = data.prefix;
|
||||||
|
fromData.firstName = data.firstName;
|
||||||
|
fromData.lastName = data.lastName;
|
||||||
|
fromData.job = data.job;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onOpenDialogHistory(type: string) {
|
||||||
|
modalHistory.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function fetchData() {
|
||||||
|
const data = [
|
||||||
|
{
|
||||||
|
isLive: 0,
|
||||||
|
citizenId: "123456789101",
|
||||||
|
prefix: "นาง",
|
||||||
|
firstName: "บุษดี",
|
||||||
|
lastName: "มาดีหกหฟก",
|
||||||
|
job: "12",
|
||||||
|
lastNameOld: "",
|
||||||
|
statusMarital: "แต่งงาน",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const data2 = [
|
||||||
|
{
|
||||||
|
isLive: 1,
|
||||||
|
citizenId: "123456789101",
|
||||||
|
prefix: "นาง",
|
||||||
|
firstName: "บุษดี",
|
||||||
|
lastName: "มาดีหกหฟก",
|
||||||
|
job: "12",
|
||||||
|
lastNameOld: "",
|
||||||
|
statusMarital: "แต่งงาน",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const data3 = {
|
||||||
|
isLive: 1,
|
||||||
|
citizenId: "1231231231231",
|
||||||
|
prefix: "นาย",
|
||||||
|
firstName: "ตรีชาไทย",
|
||||||
|
lastName: "หวังดี",
|
||||||
|
job: "จอมพล",
|
||||||
|
};
|
||||||
|
spouseData.value = data;
|
||||||
|
childData.value = data2;
|
||||||
|
}
|
||||||
|
|
||||||
|
function fetchDataRelationship() {
|
||||||
|
showLoader();
|
||||||
|
http
|
||||||
|
.get(config.API.orgRelationship)
|
||||||
|
.then((res) => {
|
||||||
|
const list = res.data.result.map((e: any) => ({
|
||||||
|
id: e.id,
|
||||||
|
name: e.name,
|
||||||
|
}));
|
||||||
|
optionRelationshipMain.value = list;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const filterSelectorRelation = (val: any, update: Function) => {
|
||||||
|
update(() => {
|
||||||
|
optionRelationship.value = optionRelationshipMain.value.filter(
|
||||||
|
(v: any) => v.name.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchData();
|
||||||
|
fetchDataRelationship();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="row q-col-gutter-sm">
|
||||||
|
<!-- • บิดา -->
|
||||||
|
<div class="col-12">
|
||||||
|
<q-toolbar style="padding: 0px">
|
||||||
|
<q-toolbar-title class="text-weight-bold text-primary text-subtitle1">
|
||||||
|
• บิดา
|
||||||
|
</q-toolbar-title>
|
||||||
|
<div class="row q-col-gutter-sm">
|
||||||
|
<q-btn
|
||||||
|
round
|
||||||
|
flat
|
||||||
|
color="primary"
|
||||||
|
icon="mdi-pencil-outline"
|
||||||
|
size="14px"
|
||||||
|
dense
|
||||||
|
@click="onOpenDialogForm('father', true)"
|
||||||
|
>
|
||||||
|
<q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
<q-btn
|
||||||
|
round
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
color="info"
|
||||||
|
icon="mdi-history"
|
||||||
|
size="14px"
|
||||||
|
@click="onOpenDialogHistory('father')"
|
||||||
|
>
|
||||||
|
<q-tooltip>ประวัติการแก้ไขข้อมูลครอบครัว</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</q-toolbar>
|
||||||
|
|
||||||
|
<q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
|
||||||
|
<div class="row items-center">
|
||||||
|
<div class="col-2 text-grey-6 text-weight-medium">
|
||||||
|
<div>เลขบัตรประจำตัวประชาชน</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
{{ fatherData.citizenId ? fatherData.citizenId : "-" }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row items-center">
|
||||||
|
<div class="col-2 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
|
||||||
|
<div class="col-6">
|
||||||
|
{{
|
||||||
|
fatherData.prefix
|
||||||
|
? fatherData.prefix +
|
||||||
|
fatherData.firstName +
|
||||||
|
" " +
|
||||||
|
fatherData.lastName
|
||||||
|
: "-"
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
|
||||||
|
<div class="col">
|
||||||
|
{{ fatherData.job ? fatherData.job : "-" }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row items-center">
|
||||||
|
<div class="col-2 text-grey-6 text-weight-medium">
|
||||||
|
สถานภาพการมีชีวิต
|
||||||
|
</div>
|
||||||
|
<div class="col-10">
|
||||||
|
<div v-if="fatherData.isLive">มีชีวิตอยู่</div>
|
||||||
|
<div v-else>ถึงแก่กรรม</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- • มารดา -->
|
||||||
|
<div class="col-12">
|
||||||
|
<q-toolbar style="padding: 0px">
|
||||||
|
<q-toolbar-title class="text-weight-bold text-primary text-subtitle1">
|
||||||
|
• มารดา
|
||||||
|
</q-toolbar-title>
|
||||||
|
<div class="row q-col-gutter-sm">
|
||||||
|
<q-btn
|
||||||
|
round
|
||||||
|
flat
|
||||||
|
color="primary"
|
||||||
|
icon="mdi-pencil-outline"
|
||||||
|
size="14px"
|
||||||
|
dense
|
||||||
|
@click="onOpenDialogForm('mom', true)"
|
||||||
|
>
|
||||||
|
<q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
<q-btn
|
||||||
|
round
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
color="info"
|
||||||
|
icon="mdi-history"
|
||||||
|
size="14px"
|
||||||
|
@click="onOpenDialogHistory('mom')"
|
||||||
|
>
|
||||||
|
<q-tooltip>ประวัติการแก้ไขข้อมูลครอบครัว</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</q-toolbar>
|
||||||
|
|
||||||
|
<q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
|
||||||
|
<div class="row items-center">
|
||||||
|
<div class="col-2 text-grey-6 text-weight-medium">
|
||||||
|
<div>เลขบัตรประจำตัวประชาชน</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
{{ momData.citizenId ? momData.citizenId : "-" }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row items-center">
|
||||||
|
<div class="col-2 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
|
||||||
|
<div class="col-6">
|
||||||
|
{{
|
||||||
|
momData.prefix
|
||||||
|
? momData.prefix + momData.firstName + " " + momData.lastName
|
||||||
|
: "-"
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
|
||||||
|
<div class="col">
|
||||||
|
{{ momData.job ? momData.job : "-" }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row items-center">
|
||||||
|
<div class="col-2 text-grey-6 text-weight-medium">
|
||||||
|
สถานภาพการมีชีวิต
|
||||||
|
</div>
|
||||||
|
<div class="col-10">
|
||||||
|
<div v-if="momData.isLive">มีชีวิตอยู่</div>
|
||||||
|
<div v-else>ถึงแก่กรรม</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- • คู่สมรส -->
|
||||||
|
<div class="col-12">
|
||||||
|
<q-toolbar style="padding: 0px">
|
||||||
|
<div class="row q-col-gutter-sm">
|
||||||
|
<div class="text-weight-bold text-primary text-subtitle1">
|
||||||
|
• คู่สมรส
|
||||||
|
</div>
|
||||||
|
<q-btn
|
||||||
|
round
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
color="primary"
|
||||||
|
icon="add"
|
||||||
|
size="14px"
|
||||||
|
@click="onOpenDialogForm('spouse')"
|
||||||
|
>
|
||||||
|
<q-tooltip>เพิ่มคู่สมรส</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<q-space />
|
||||||
|
<div class="row q-col-gutter-sm">
|
||||||
|
<q-btn
|
||||||
|
round
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
color="info"
|
||||||
|
icon="mdi-history"
|
||||||
|
size="14px"
|
||||||
|
@click="onOpenDialogHistory('spouse')"
|
||||||
|
>
|
||||||
|
<q-tooltip>ประวัติการแก้ไขข้อมูลครอบครัว</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</q-toolbar>
|
||||||
|
|
||||||
|
<div v-for="(item, index) in spouseData" :key="index">
|
||||||
|
<q-card bordered class="bg-grey-1 q-pb-md">
|
||||||
|
<div class="col-12 row q-py-sm q-px-md bg-grey-2 items-center">
|
||||||
|
<div class="text-weight-medium q-pr-md">
|
||||||
|
คู่สมรสที่ : {{ index + 1 }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<q-separator />
|
||||||
|
<div class="col-12 q-pa-md q-col-gutter-md">
|
||||||
|
<div class="row items-center">
|
||||||
|
<div class="col-2 text-grey-6 text-weight-medium">
|
||||||
|
<div>สถานภาพการสมรส</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-10">
|
||||||
|
{{ item.statusMarital }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row items-center">
|
||||||
|
<div class="col-2 text-grey-6 text-weight-medium">
|
||||||
|
<div>เลขบัตรประจำตัวประชาชน</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-10">
|
||||||
|
{{ item.citizenId }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row items-center">
|
||||||
|
<div class="col-2 text-grey-6 text-weight-medium">
|
||||||
|
ชื่อ-นามสกุล
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
{{
|
||||||
|
item.prefix
|
||||||
|
? item.prefix + item.firstName + " " + item.lastName
|
||||||
|
: "-"
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
|
||||||
|
<div class="col">
|
||||||
|
{{ item.job }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row items-center">
|
||||||
|
<div class="col-2 text-grey-6 text-weight-medium">
|
||||||
|
สถานภาพการมีชีวิต
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div v-if="item.isLive">มีชีวิตอยู่</div>
|
||||||
|
<div v-else>ถึงแก่กรรม</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- • บุตร -->
|
||||||
|
<div class="col-12">
|
||||||
|
<q-toolbar style="padding: 0px">
|
||||||
|
<div class="row q-col-gutter-sm">
|
||||||
|
<div class="text-weight-bold text-primary text-subtitle1">• บุตร</div>
|
||||||
|
<q-btn
|
||||||
|
round
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
color="primary"
|
||||||
|
icon="add"
|
||||||
|
size="14px"
|
||||||
|
@click="onOpenDialogForm('child')"
|
||||||
|
>
|
||||||
|
<q-tooltip>เพิ่มบุตร</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<q-space />
|
||||||
|
</q-toolbar>
|
||||||
|
|
||||||
|
<div v-for="(item, index) in childData" :key="index">
|
||||||
|
<q-card bordered class="bg-grey-1 q-pb-md">
|
||||||
|
<div class="col-12 row q-py-sm q-px-md bg-grey-2 items-center">
|
||||||
|
<div class="text-weight-medium q-pr-md">
|
||||||
|
บุตรคนที่ : {{ index + 1 }}
|
||||||
|
</div>
|
||||||
|
<q-space />
|
||||||
|
<div class="row q-col-gutter-sm">
|
||||||
|
<q-btn
|
||||||
|
round
|
||||||
|
flat
|
||||||
|
color="primary"
|
||||||
|
icon="mdi-pencil-outline"
|
||||||
|
size="14px"
|
||||||
|
dense
|
||||||
|
@click="onOpenDialogForm('child', true, item)"
|
||||||
|
>
|
||||||
|
<q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
<q-btn
|
||||||
|
round
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
color="info"
|
||||||
|
icon="mdi-history"
|
||||||
|
size="14px"
|
||||||
|
@click="onOpenDialogHistory('child')"
|
||||||
|
>
|
||||||
|
<q-tooltip>ประวัติการแก้ไขข้อมูลครอบครัว</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<q-separator />
|
||||||
|
<div class="col-12 q-pa-md q-col-gutter-md">
|
||||||
|
<div class="row items-center">
|
||||||
|
<div class="col-2 text-grey-6 text-weight-medium">
|
||||||
|
<div>เลขบัตรประจำตัวประชาชน</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-10">
|
||||||
|
{{ item.citizenId }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row items-center">
|
||||||
|
<div class="col-2 text-grey-6 text-weight-medium">
|
||||||
|
ชื่อ-นามสกุล
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
{{
|
||||||
|
item.prefix
|
||||||
|
? item.prefix + item.firstName + " " + item.lastName
|
||||||
|
: "-"
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
|
||||||
|
<div class="col">
|
||||||
|
{{ item.job }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row items-center">
|
||||||
|
<div class="col-2 text-grey-6 text-weight-medium">
|
||||||
|
สถานภาพการมีชีวิต
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div v-if="item.isLive">มีชีวิตอยู่</div>
|
||||||
|
<div v-else>ถึงแก่กรรม</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<q-dialog v-model="modal" class="dialog" persistent>
|
||||||
|
<q-card style="min-width: 80%">
|
||||||
|
<q-form @submit.prevent greedy @validation-success="onSubmit()">
|
||||||
|
<DialogHeader
|
||||||
|
:tittle="isEdit ? 'แก้ไขข้อมูลครอบครัว' : 'เพิ้มข้อมูลครอบครัว'"
|
||||||
|
:close="closeDialog"
|
||||||
|
/>
|
||||||
|
<q-separator color="grey-4" />
|
||||||
|
<q-card-section>
|
||||||
|
<div class="col-12 row q-pb-sm">
|
||||||
|
<div
|
||||||
|
class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
|
||||||
|
>
|
||||||
|
{{ titleForm }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<q-card bordered class="bg-grey-1 q-pa-md q-col-gutter-sm">
|
||||||
|
<div class="col" v-if="typeForm === 'spouse'">
|
||||||
|
<q-select
|
||||||
|
outlined
|
||||||
|
bg-color="white"
|
||||||
|
lazy-rules
|
||||||
|
hidden-space
|
||||||
|
dense
|
||||||
|
class="inputgreen"
|
||||||
|
:rules="[(val) => !!val || 'กรุณาเลือกสถานภาพการสมรส']"
|
||||||
|
label="สถานภาพการสมรส"
|
||||||
|
v-model="fromData.statusMarital"
|
||||||
|
use-input
|
||||||
|
input-debounce="0"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
:options="optionRelationship"
|
||||||
|
option-label="name"
|
||||||
|
option-value="name"
|
||||||
|
style="width: 220px"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => filterSelectorRelation(inputValue, doneFn) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="row q-col-gutter-md">
|
||||||
|
<div class="col">
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
hide-bottom-space
|
||||||
|
bg-color="white"
|
||||||
|
dense
|
||||||
|
v-model="fromData.citizenId"
|
||||||
|
:label="`${'เลขประจำตัวประชาชน'}`"
|
||||||
|
maxlength="13"
|
||||||
|
:rules="
|
||||||
|
typeForm !== 'spouse'
|
||||||
|
? [
|
||||||
|
(val) =>
|
||||||
|
val.length === 13 || 'กรุณากรอกเลขบัตรประชาชน',
|
||||||
|
]
|
||||||
|
: []
|
||||||
|
"
|
||||||
|
class="inputgreen"
|
||||||
|
mask="#############"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<q-select
|
||||||
|
outlined
|
||||||
|
bg-color="white"
|
||||||
|
lazy-rules
|
||||||
|
hidden-space
|
||||||
|
dense
|
||||||
|
class="inputgreen"
|
||||||
|
:rules="
|
||||||
|
typeForm !== 'spouse'
|
||||||
|
? [(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']
|
||||||
|
: []
|
||||||
|
"
|
||||||
|
label="คำนำหน้าชื่อ"
|
||||||
|
v-model="fromData.prefix"
|
||||||
|
use-input
|
||||||
|
input-debounce="0"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
:options="store.Ops.prefixOps"
|
||||||
|
option-label="name"
|
||||||
|
option-value="name"
|
||||||
|
@filter="(inputValue:string,
|
||||||
|
doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
|
||||||
|
) "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
bg-color="white"
|
||||||
|
class="inputgreen"
|
||||||
|
lazy-rules
|
||||||
|
v-model="fromData.firstName"
|
||||||
|
:rules="
|
||||||
|
typeForm !== 'spouse'
|
||||||
|
? [(val) => !!val || 'กรุณากรอกชื่อ']
|
||||||
|
: []
|
||||||
|
"
|
||||||
|
label="ชื่อ"
|
||||||
|
hidden-space
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
class="inputgreen"
|
||||||
|
bg-color="white"
|
||||||
|
lazy-rules
|
||||||
|
v-model="fromData.lastName"
|
||||||
|
:rules="
|
||||||
|
typeForm !== 'spouse'
|
||||||
|
? [(val) => !!val || 'กรุณากรอกนามสกุล']
|
||||||
|
: []
|
||||||
|
"
|
||||||
|
label="นามสกุล"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col" v-if="typeForm === 'spouse'">
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
class="inputgreen"
|
||||||
|
bg-color="white"
|
||||||
|
lazy-rules
|
||||||
|
v-model="fromData.lastNameOld"
|
||||||
|
label="นามสกุลเดิม"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
class="inputgreen"
|
||||||
|
bg-color="white"
|
||||||
|
v-model="fromData.job"
|
||||||
|
label="อาชีพ"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="q-mr-sm">สถานภาพการมีชีวิต</div>
|
||||||
|
<div>
|
||||||
|
<q-radio
|
||||||
|
class="q-mr-sm"
|
||||||
|
v-model="fromData.isLive"
|
||||||
|
checked-icon="task_alt"
|
||||||
|
unchecked-icon="panorama_fish_eye"
|
||||||
|
:val="1"
|
||||||
|
label="ยังมีชีวิตอยู่"
|
||||||
|
dense
|
||||||
|
:color="!fromData.isLive ? 'grey' : 'primary'"
|
||||||
|
/>
|
||||||
|
<q-radio
|
||||||
|
v-model="fromData.isLive"
|
||||||
|
checked-icon="task_alt"
|
||||||
|
unchecked-icon="panorama_fish_eye"
|
||||||
|
:val="0"
|
||||||
|
:color="!fromData.isLive ? 'grey' : 'red'"
|
||||||
|
label="ถึงแก่กรรม"
|
||||||
|
dense
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
<q-card-actions align="right">
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
unelevated
|
||||||
|
label="บันทึก"
|
||||||
|
id="onSubmit"
|
||||||
|
type="submit"
|
||||||
|
color="public"
|
||||||
|
class="q-px-md"
|
||||||
|
>
|
||||||
|
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
|
||||||
|
<q-dialog v-model="modalHistory" class="dialog" persistent>
|
||||||
|
<q-card style="min-width: 80%">
|
||||||
|
<DialogHeader tittle="ประวัติแก้ไขข้อมูลที่อยู่" :close="closeDialog" />
|
||||||
|
<q-separator color="grey-4" />
|
||||||
|
<q-card-section>
|
||||||
|
<div class="row q-gutter-sm q-mb-sm">
|
||||||
|
<q-space />
|
||||||
|
<q-input
|
||||||
|
standout
|
||||||
|
dense
|
||||||
|
v-model="filterHistory"
|
||||||
|
ref="filterRef"
|
||||||
|
outlined
|
||||||
|
placeholder="ค้นหา"
|
||||||
|
debounce="300"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon
|
||||||
|
v-if="filterHistory == ''"
|
||||||
|
name="search"
|
||||||
|
@click.stop.prevent="filterHistory = ''"
|
||||||
|
class="cursor-pointer"
|
||||||
|
/>
|
||||||
|
<q-icon
|
||||||
|
v-if="filterHistory"
|
||||||
|
name="cancel"
|
||||||
|
@click.stop.prevent="filterHistory = ''"
|
||||||
|
class="cursor-pointer"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
<q-select
|
||||||
|
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"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<d-table
|
||||||
|
ref="table"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
dense
|
||||||
|
:columns="columns"
|
||||||
|
:rows="rows"
|
||||||
|
:paging="true"
|
||||||
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
:filter="filterHistory"
|
||||||
|
>
|
||||||
|
>
|
||||||
|
<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-tr>
|
||||||
|
</template>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
|
<q-td v-for="col in props.cols" :key="col.id">
|
||||||
|
<div>
|
||||||
|
{{ col.value ? col.value : "-" }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
</q-card-section>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -9,6 +9,8 @@ import Family from "@/modules/04_registryNew/components/detail/PersonalInformati
|
||||||
import Education from "@/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue";
|
import Education from "@/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue";
|
||||||
import SpecialSkill from "@/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue";
|
import SpecialSkill from "@/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue";
|
||||||
|
|
||||||
|
import FamilyNew from "@/modules/04_registryNew/components/detail/PersonalInformation/04_FamilyNew.vue";
|
||||||
|
|
||||||
const tab = ref<string>("1");
|
const tab = ref<string>("1");
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -30,17 +32,17 @@ const tab = ref<string>("1");
|
||||||
indicator-color="transparent"
|
indicator-color="transparent"
|
||||||
dense
|
dense
|
||||||
class="text-grey q-pl-sm"
|
class="text-grey q-pl-sm"
|
||||||
>
|
>
|
||||||
<q-tab name="1" label="ประวัติส่วนตัว" />
|
<q-tab name="1" label="ประวัติส่วนตัว" />
|
||||||
<q-tab name="2" label="ประวัติการเปลี่ยนชื่อ-นามสกุล" />
|
<q-tab name="2" label="ประวัติการเปลี่ยนชื่อ-นามสกุล" />
|
||||||
<q-tab name="3" label="ข้อมูลที่อยู่" />
|
<q-tab name="3" label="ข้อมูลที่อยู่" />
|
||||||
<q-tab name="4" label="ข้อมูลครอบครัว" />
|
<q-tab name="4" label="ข้อมูลครอบครัว" />
|
||||||
<q-tab name="5" label="ประวัติการศึกษา" />
|
<q-tab name="5" label="ประวัติการศึกษา" />
|
||||||
<q-tab name="6" label="ความสามารถพิเศษ" />
|
<q-tab name="6" label="ความสามารถพิเศษ" />
|
||||||
</q-tabs>
|
</q-tabs>
|
||||||
<q-separator />
|
<q-separator />
|
||||||
|
|
||||||
<q-tab-panels v-model="tab" animated >
|
<q-tab-panels v-model="tab" animated>
|
||||||
<q-tab-panel name="1">
|
<q-tab-panel name="1">
|
||||||
<Profile />
|
<Profile />
|
||||||
</q-tab-panel>
|
</q-tab-panel>
|
||||||
|
|
@ -51,7 +53,7 @@ const tab = ref<string>("1");
|
||||||
<Address />
|
<Address />
|
||||||
</q-tab-panel>
|
</q-tab-panel>
|
||||||
<q-tab-panel name="4">
|
<q-tab-panel name="4">
|
||||||
<Family />
|
<FamilyNew />
|
||||||
</q-tab-panel>
|
</q-tab-panel>
|
||||||
<q-tab-panel name="5">
|
<q-tab-panel name="5">
|
||||||
<Education />
|
<Education />
|
||||||
|
|
@ -59,6 +61,9 @@ const tab = ref<string>("1");
|
||||||
<q-tab-panel name="6">
|
<q-tab-panel name="6">
|
||||||
<SpecialSkill />
|
<SpecialSkill />
|
||||||
</q-tab-panel>
|
</q-tab-panel>
|
||||||
|
<!-- <q-tab-panel name="7">
|
||||||
|
<FamilyNew />
|
||||||
|
</q-tab-panel> -->
|
||||||
</q-tab-panels>
|
</q-tab-panels>
|
||||||
</q-card>
|
</q-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue