ข้อมูลทะเบียนประวัติ
This commit is contained in:
STW_TTTY\stwtt
parent
b05065ba67
commit
bd6f4fde7f
34 changed files with 9004 additions and 706 deletions
421
src/modules/10_registry/01_Information/01_Information.vue
Normal file
421
src/modules/10_registry/01_Information/01_Information.vue
Normal file
|
|
@ -0,0 +1,421 @@
|
|||
<script setup lang="ts">
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar, type QTableColumn, type QTableProps } from "quasar";
|
||||
import { ref, reactive,onMounted } from "vue";
|
||||
import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
|
||||
|
||||
//history dialog
|
||||
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const store = useRegistryInFormationStore();
|
||||
const rowsHistory = ref<any[]>([])
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
|
||||
|
||||
const modalHistory = ref<boolean>(false);
|
||||
/** ตัวแปรข้อมูล */
|
||||
const formDataInformation = reactive<any>({
|
||||
citizenId: "", //เลขบัตรประจำตัวประชาชน
|
||||
prefix: "",
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
birthDate: "", //วันเกิด
|
||||
gender: "", //เพศ
|
||||
relationship: "", //สถานภาพ
|
||||
|
||||
nationality: "", //สัญชาติ
|
||||
ethnicity: "", //เชื้อชาติ
|
||||
religion: "", //ศาสนา
|
||||
bloodGroup: "", //หมู่เลือด
|
||||
phone: "", //เบอร์โทร
|
||||
});
|
||||
|
||||
const columnsHistory = ref<QTableProps["columns"]>([
|
||||
{
|
||||
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: "rank",
|
||||
align: "left",
|
||||
label: "ยศ",
|
||||
sortable: true,
|
||||
field: "rank",
|
||||
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",
|
||||
format: (v) => date2Thai(v),
|
||||
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: "ethnicity",
|
||||
align: "left",
|
||||
label: "เชื้อชาติ",
|
||||
sortable: true,
|
||||
field: "ethnicity",
|
||||
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: "phone",
|
||||
align: "left",
|
||||
label: "เบอร์โทร",
|
||||
sortable: true,
|
||||
field: "phone",
|
||||
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: "lastUpdatedAt",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => date2Thai(v),
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
|
||||
const visibleColumnsHistory = ref<string[]>([
|
||||
"citizenId",
|
||||
"prefix",
|
||||
"rank",
|
||||
"firstName",
|
||||
"lastName",
|
||||
"birthDate",
|
||||
"gender",
|
||||
"relationship",
|
||||
"bloodGroup",
|
||||
"nationality",
|
||||
"ethnicity",
|
||||
"religion",
|
||||
"phone",
|
||||
"createdFullName",
|
||||
"createdAt",
|
||||
]);
|
||||
|
||||
|
||||
function onHistory() {
|
||||
modalHistory.value = true;
|
||||
}
|
||||
|
||||
/** get data */
|
||||
function getData() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.dataUserInformation)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
formDataInformation.citizenId = data.citizenId;
|
||||
formDataInformation.prefix = data.prefix;
|
||||
formDataInformation.firstName = data.firstName;
|
||||
formDataInformation.lastName = data.lastName;
|
||||
formDataInformation.birthDate = data.birthDate;
|
||||
formDataInformation.gender = data.gender;
|
||||
formDataInformation.relationship = data.relationship;
|
||||
|
||||
formDataInformation.nationality = data.nationality;
|
||||
formDataInformation.ethnicity = data.ethnicity;
|
||||
formDataInformation.religion = data.religion;
|
||||
formDataInformation.bloodGroup = data.bloodGroup;
|
||||
formDataInformation.phone = data.phone;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** get history */
|
||||
function getHistory() {
|
||||
const url = store.typeProfile == 'OFFICER' ? config.API.dataUserInformatioHistory(''):config.API.dataUserInformatioHistory('-employee')
|
||||
showLoader();
|
||||
http
|
||||
.get(url)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
rowsHistory.value = data;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-12">
|
||||
<q-toolbar class="q-px-none">
|
||||
<span class="text-blue-6 text-weight-bold text-body1"
|
||||
>ประวัติส่วนตัว</span
|
||||
>
|
||||
<q-space />
|
||||
<q-btn
|
||||
icon="mdi-history"
|
||||
color="info"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
@click="onHistory"
|
||||
>
|
||||
<q-tooltip>ประวัติแก้ไขข้อมูลส่วนตัว</q-tooltip>
|
||||
</q-btn>
|
||||
</q-toolbar>
|
||||
<q-card bordered class="bg-grey-1 q-pa-md">
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">
|
||||
เลขบัตรประจำตัวประชาชน
|
||||
</div>
|
||||
<div class="col-7">
|
||||
{{
|
||||
formDataInformation.citizenId
|
||||
? formDataInformation.citizenId
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">ชื่อ - สกุล</div>
|
||||
<div class="col-7">
|
||||
{{
|
||||
formDataInformation.firstName
|
||||
? `${formDataInformation.prefix}${formDataInformation.firstName} ${formDataInformation.lastName}`
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">
|
||||
วัน/เดือน/ปีเกิด
|
||||
</div>
|
||||
<div class="col-7">
|
||||
{{
|
||||
formDataInformation.birthDate
|
||||
? date2Thai(formDataInformation.birthDate)
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">เพศ</div>
|
||||
<div class="col-7">
|
||||
{{
|
||||
formDataInformation.gender ? formDataInformation.gender : "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">สถานภาพ</div>
|
||||
<div class="col-7">
|
||||
{{
|
||||
formDataInformation.relationship
|
||||
? formDataInformation.relationship
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">สัญชาติ</div>
|
||||
<div class="col-7">
|
||||
{{
|
||||
formDataInformation.nationality
|
||||
? formDataInformation.nationality
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">เชื้อชาติ</div>
|
||||
<div class="col-7">
|
||||
{{
|
||||
formDataInformation.ethnicity
|
||||
? formDataInformation.ethnicity
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">ศาสนา</div>
|
||||
<div class="col-7">
|
||||
{{
|
||||
formDataInformation.religion
|
||||
? formDataInformation.religion
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">หมู่เลือด</div>
|
||||
<div class="col-7">
|
||||
{{
|
||||
formDataInformation.bloodGroup
|
||||
? formDataInformation.bloodGroup
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">เบอร์โทร</div>
|
||||
<div class="col-7">
|
||||
{{ formDataInformation.phone ? formDataInformation.phone : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<DialogHistory
|
||||
v-model:modal="modalHistory"
|
||||
:title="'ประวัติแก้ไขข้อมูลส่วนตัว'"
|
||||
:getData="getHistory"
|
||||
:rows="rowsHistory"
|
||||
:visibleColumns="visibleColumnsHistory"
|
||||
:columns="columnsHistory"
|
||||
/>
|
||||
</template>
|
||||
351
src/modules/10_registry/01_Information/02_ChangeName.vue
Normal file
351
src/modules/10_registry/01_Information/02_ChangeName.vue
Normal file
|
|
@ -0,0 +1,351 @@
|
|||
<script setup lang="ts">
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar, type QTableProps } from "quasar";
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
|
||||
//history dialog
|
||||
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const idByrow = ref<string>('')
|
||||
const rows = ref<any[]>([]);
|
||||
const filter = ref<string>("");
|
||||
const rowsHistory = ref<any[]>([]);
|
||||
const $q = useQuasar();
|
||||
const mode = ref<any>($q.screen.gt.xs);
|
||||
const mixin = useCounterMixin();
|
||||
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
|
||||
|
||||
const modalHistory = ref<boolean>(false);
|
||||
/** ตัวแปรข้อมูล */
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"prefix",
|
||||
"firstName",
|
||||
"lastName",
|
||||
"status",
|
||||
]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
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: "status",
|
||||
align: "left",
|
||||
label: "สถานะการเปลี่ยนชื่อ",
|
||||
sortable: true,
|
||||
field: "status",
|
||||
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[]>([
|
||||
"prefix",
|
||||
"firstName",
|
||||
"lastName",
|
||||
"status",
|
||||
"lastUpdateFullName",
|
||||
"lastUpdatedAt",
|
||||
]);
|
||||
const columnsHistory = ref<QTableProps["columns"]>([
|
||||
{
|
||||
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: "status",
|
||||
align: "left",
|
||||
label: "สถานะการเปลี่ยนชื่อ",
|
||||
sortable: true,
|
||||
field: "status",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "lastUpdateFullName",
|
||||
align: "left",
|
||||
label: "ผู้ดำเนินการ",
|
||||
sortable: true,
|
||||
field: "lastUpdateFullName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "lastUpdatedAt",
|
||||
align: "left",
|
||||
label: "วันที่แก้ไข",
|
||||
sortable: true,
|
||||
field: "lastUpdatedAt",
|
||||
format: (v) => date2Thai(v),
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
|
||||
function onHistory(id:string) {
|
||||
modalHistory.value = true;
|
||||
idByrow.value = id
|
||||
}
|
||||
|
||||
/** get data */
|
||||
function getData() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.dataUserChangeName)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
rows.value = data;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** get history */
|
||||
function getHistory() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.dataUserChangeNameHistory+`/${idByrow.value}`)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
rowsHistory.value = data;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<!-- v-if="mode" -->
|
||||
<div class="col-12">
|
||||
<q-toolbar class="q-px-none q-mt-md">
|
||||
<span class="text-blue-6 text-weight-bold text-body1"
|
||||
>ประวัติการเปลี่ยนชื่อ-นามสกุล</span
|
||||
>
|
||||
<q-space />
|
||||
<q-input
|
||||
v-if="mode"
|
||||
class="inputgreen"
|
||||
outlined
|
||||
dense
|
||||
v-model="filter"
|
||||
label="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="filter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="filter = ''"
|
||||
/>
|
||||
<q-icon
|
||||
v-else
|
||||
name="search"
|
||||
class="cursor-pointer"
|
||||
@click="filter = ''"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
v-if="mode"
|
||||
class="q-ml-sm"
|
||||
dense
|
||||
multiple
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
options-cover
|
||||
options-dense
|
||||
option-value="name"
|
||||
style="min-width: 150px"
|
||||
v-model="visibleColumns"
|
||||
:options="columns"
|
||||
:display-value="$q.lang.table.columns"
|
||||
/>
|
||||
</q-toolbar>
|
||||
<d-table
|
||||
flat
|
||||
dense
|
||||
bordered
|
||||
virtual-scroll
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:grid="!mode"
|
||||
:filter="filter"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:visible-columns="visibleColumns"
|
||||
:virtual-scroll-sticky-size-start="48"
|
||||
>
|
||||
<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-if="mode" v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
||||
<div v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value? col.value:'-' }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
color="info"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
icon="mdi-history"
|
||||
@click="onHistory(props.row.id)"
|
||||
>
|
||||
<q-tooltip>ดูประวัติการเปลี่ยนชื่อ-นามสกุล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-else v-slot:item="props">
|
||||
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
|
||||
<q-card bordered flat>
|
||||
<q-list dense class="q-mt-lg relative-position">
|
||||
<q-btn
|
||||
icon="mdi-history"
|
||||
color="info"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
class="absolute_button"
|
||||
@click="onHistory(props.row.id)"
|
||||
>
|
||||
<q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
|
||||
</q-btn>
|
||||
<q-item v-for="col in props.cols" :key="col.name">
|
||||
|
||||
<q-item-section>
|
||||
<q-item-label class="text-grey-6 text-weight-medium">{{
|
||||
col.label
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label class="text-dark text-weight-medium">{{
|
||||
col.value ? col.value : "-"
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:no-data>
|
||||
<div class="full-width row flex-center bg-grey-3 q-pa-md rounded-borders text-body2 text-weight-medium">
|
||||
<span>
|
||||
ไม่พบข้อมูลประวัติการเปลี่ยนชื่อ-นามสกุล
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
<DialogHistory
|
||||
v-model:modal="modalHistory"
|
||||
:title="'ประวัติแก้ไขการเปลี่ยนชื่อ-นามสกุล'"
|
||||
:getData="getHistory"
|
||||
:rows="rowsHistory"
|
||||
:visibleColumns="visibleColumnsHistory"
|
||||
:columns="columnsHistory"
|
||||
/>
|
||||
</template>
|
||||
<style scoped>
|
||||
.absolute_button {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: -20px;
|
||||
}
|
||||
</style>
|
||||
379
src/modules/10_registry/01_Information/03_Address.vue
Normal file
379
src/modules/10_registry/01_Information/03_Address.vue
Normal file
|
|
@ -0,0 +1,379 @@
|
|||
<script setup lang="ts">
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar, type QTableProps } from "quasar";
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
|
||||
//history dialog
|
||||
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
|
||||
|
||||
const store = useRegistryInFormationStore();
|
||||
const rowsHistory = ref<any[]>([]);
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
|
||||
|
||||
const modalHistory = ref<boolean>(false);
|
||||
/** ตัวแปรข้อมูล */
|
||||
|
||||
const formData = reactive<any>({
|
||||
registrationAddress: "", //ที่อยู่ตามทะเบียนบ้าน
|
||||
registrationProvince: "", //จังหวัด
|
||||
registrationDistrict: "", //เขต / อำเภอ
|
||||
registrationSubDistrict: "", //แขวง / ตำบล
|
||||
registrationZipCode: "", //รหัสไปรษณีย์
|
||||
|
||||
currentAddress: "", //ที่อยู่ปัจจุบัน
|
||||
currentProvince: "", //จังหวัด
|
||||
currentDistrict: "", //เขต / อำเภอ
|
||||
currentSubDistrict: "", //แขวง / ตำบล
|
||||
currentZipCode: "", //รหัสไปรษณีย์
|
||||
});
|
||||
|
||||
const visibleColumnsHistory = ref<string[]>([
|
||||
"currentAddress",
|
||||
"currentDistrict",
|
||||
"currentProvince",
|
||||
"currentSubDistrict",
|
||||
"currentZipCode",
|
||||
"registrationAddress",
|
||||
"registrationDistrict",
|
||||
"registrationProvince",
|
||||
"registrationSame",
|
||||
"registrationSubDistrict",
|
||||
"registrationZipCode",
|
||||
"lastUpdateFullName",
|
||||
"lastUpdatedAt",
|
||||
]);
|
||||
|
||||
const columnsHistory = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "registrationAddress",
|
||||
align: "left",
|
||||
label: "ที่อยู่ตามทะเบียนบ้าน",
|
||||
sortable: true,
|
||||
field: "registrationAddress",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "registrationProvince",
|
||||
align: "left",
|
||||
label: "จังหวัดตามทะเบียนบ้าน",
|
||||
sortable: true,
|
||||
field: "registrationProvince",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => (v ? v.name : "-"),
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "registrationDistrict",
|
||||
align: "left",
|
||||
label: "เขต/อำเภอตามทะเบียนบ้าน",
|
||||
sortable: true,
|
||||
field: "registrationDistrict",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => (v ? v.name : "-"),
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "registrationSubDistrict",
|
||||
align: "left",
|
||||
label: "แขวง/ตำบลตามทะเบียนบ้าน",
|
||||
sortable: true,
|
||||
field: "registrationSubDistrict",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => (v ? v.name : "-"),
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "registrationZipCode",
|
||||
align: "left",
|
||||
label: "รหัสไปรษณีย์ตามทะเบียนบ้าน",
|
||||
sortable: true,
|
||||
field: "registrationZipCode",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "registrationSame",
|
||||
align: "left",
|
||||
label: "ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน",
|
||||
sortable: true,
|
||||
field: (v) =>
|
||||
v.registrationAddress === v.currentAddress &&
|
||||
v.registrationZipCode === v.currentZipCode
|
||||
? "ใช่"
|
||||
: "ไม่",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "currentAddress",
|
||||
align: "left",
|
||||
label: "ที่อยู่ปัจจุบัน",
|
||||
sortable: true,
|
||||
field: "currentAddress",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "currentProvince",
|
||||
align: "left",
|
||||
label: "จังหวัดปัจจุบัน",
|
||||
sortable: true,
|
||||
field: "currentProvince",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => (v ? v.name : "-"),
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "currentDistrict",
|
||||
align: "left",
|
||||
label: "เขต/อำเภอปัจจุบัน",
|
||||
sortable: true,
|
||||
field: "currentDistrict",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => (v ? v.name : "-"),
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "currentSubDistrict",
|
||||
align: "left",
|
||||
label: "แขวง/ตำบลปัจจุบัน",
|
||||
sortable: true,
|
||||
field: "currentSubDistrict",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => (v ? v.name : "-"),
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "currentZipCode",
|
||||
align: "left",
|
||||
label: "รหัสไปรษณีย์ปัจจุบัน",
|
||||
sortable: true,
|
||||
field: "currentZipCode",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "lastUpdateFullName",
|
||||
align: "left",
|
||||
label: "ผู้ดำเนินการ",
|
||||
sortable: true,
|
||||
field: "lastUpdateFullName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "lastUpdatedAt",
|
||||
align: "left",
|
||||
label: "วันที่แก้ไข",
|
||||
sortable: true,
|
||||
field: "lastUpdatedAt",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => date2Thai(v),
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
|
||||
function onHistory() {
|
||||
modalHistory.value = true;
|
||||
}
|
||||
|
||||
/** get data */
|
||||
function getData() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.dataUserAddress)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
formData.registrationAddress = data.registrationAddress;
|
||||
formData.registrationProvince = data.registrationProvince;
|
||||
formData.registrationDistrict = data.registrationDistrict;
|
||||
formData.registrationSubDistrict = data.registrationSubDistrict;
|
||||
formData.registrationZipCode = data.registrationZipCode;
|
||||
formData.currentAddress = data.currentAddress;
|
||||
formData.currentProvince = data.currentProvince;
|
||||
formData.currentDistrict = data.currentDistrict;
|
||||
formData.currentSubDistrict = data.currentSubDistrict;
|
||||
formData.currentZipCode = data.currentZipCode;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** get history */
|
||||
function getHistory() {
|
||||
const url = store.typeProfile == 'OFFICER' ? config.API.dataUserHistory(''):config.API.dataUserHistory('-employee')
|
||||
showLoader();
|
||||
http
|
||||
.get(url)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
rowsHistory.value = data;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-12">
|
||||
<q-toolbar class="q-px-none">
|
||||
<span class="text-blue-6 text-weight-bold text-body1">ข้อมูลที่อยู่</span>
|
||||
<q-space />
|
||||
<q-btn icon="mdi-history" color="info" flat dense round size="14px" @click="onHistory">
|
||||
<q-tooltip>ประวัติข้อมูลที่อยู่</q-tooltip>
|
||||
</q-btn>
|
||||
</q-toolbar>
|
||||
<q-card bordered class="bg-grey-1 q-pa-md">
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">
|
||||
ที่อยู่ตามทะเบียนบ้าน
|
||||
</div>
|
||||
<div class="col-7">
|
||||
{{
|
||||
formData.registrationAddress
|
||||
? formData.registrationAddress
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">จังหวัด</div>
|
||||
<div class="col-7">
|
||||
{{
|
||||
formData.registrationProvince
|
||||
? formData.registrationProvince
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">เขต / อำเภอ</div>
|
||||
<div class="col-7">
|
||||
{{
|
||||
formData.registrationDistrict
|
||||
? formData.registrationDistrict
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">แขวง / ตำบล</div>
|
||||
<div class="col-7">
|
||||
{{
|
||||
formData.registrationSubDistrict
|
||||
? formData.registrationSubDistrict
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">รหัสไปรษณีย์</div>
|
||||
<div class="col-7">
|
||||
{{
|
||||
formData.registrationZipCode
|
||||
? formData.registrationZipCode
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">
|
||||
ที่อยู่ปัจจุบัน
|
||||
</div>
|
||||
<div class="col-7">
|
||||
{{ formData.currentAddress ? formData.currentAddress : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">จังหวัด</div>
|
||||
<div class="col-7">
|
||||
{{ formData.currentProvince ? formData.currentProvince : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">เขต / อำเภอ</div>
|
||||
<div class="col-7">
|
||||
{{ formData.currentDistrict ? formData.currentDistrict : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">แขวง / ตำบล</div>
|
||||
<div class="col-7">
|
||||
{{
|
||||
formData.currentSubDistrict ? formData.currentSubDistrict : "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">รหัสไปรษณีย์</div>
|
||||
<div class="col-7">
|
||||
{{ formData.currentZipCode ? formData.currentZipCode : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<DialogHistory
|
||||
v-model:modal="modalHistory"
|
||||
:title="'ประวัติแก้ไขข้อมูลที่อยู่'"
|
||||
:getData="getHistory"
|
||||
:rows="rowsHistory"
|
||||
:visibleColumns="visibleColumnsHistory"
|
||||
:columns="columnsHistory"
|
||||
/>
|
||||
</template>
|
||||
600
src/modules/10_registry/01_Information/04_Family.vue
Normal file
600
src/modules/10_registry/01_Information/04_Family.vue
Normal file
|
|
@ -0,0 +1,600 @@
|
|||
<script setup lang="ts">
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar, type QTableProps } from "quasar";
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
|
||||
//history dialog
|
||||
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import type { FormChildren } from "@/modules/10_registry/interface/index/Family";
|
||||
import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
|
||||
|
||||
const idFamily = ref<string>('')
|
||||
const store = useRegistryInFormationStore();
|
||||
const rowsHistory = ref<any[]>([]);
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
|
||||
|
||||
const typeForm = ref<string>("");
|
||||
const modalHistory = ref<boolean>(false);
|
||||
/** ตัวแปรข้อมูล */
|
||||
|
||||
/** ข้อมูล*/
|
||||
const fromData = reactive({
|
||||
isLive: 1,
|
||||
citizenId: "",
|
||||
prefix: "",
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
job: "",
|
||||
lastNameOld: "",
|
||||
statusMarital: "",
|
||||
});
|
||||
|
||||
const fatherData = reactive<any>({
|
||||
isLive: null,
|
||||
citizenId: "",
|
||||
prefix: "",
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
job: "",
|
||||
profileId:''
|
||||
});
|
||||
const motherData = reactive<any>({
|
||||
isLive: null,
|
||||
citizenId: "",
|
||||
prefix: "",
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
job: "",
|
||||
profileId:''
|
||||
});
|
||||
const coupleData = reactive<any>({
|
||||
isLive: null,
|
||||
citizenId: "",
|
||||
prefix: "",
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
job: "",
|
||||
lastNameOld: "",
|
||||
statusMarital: "",
|
||||
profileId:''
|
||||
});
|
||||
|
||||
const childData = ref<FormChildren[]>([]);
|
||||
|
||||
const visibleColumnsHistory = ref<string[]>([
|
||||
"citizenId",
|
||||
"prefix",
|
||||
"firstName",
|
||||
"lastName",
|
||||
"job",
|
||||
"isLive",
|
||||
"lastNameOld",
|
||||
]);
|
||||
const columnsHistory = 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: "lastNameOld",
|
||||
align: "left",
|
||||
label: "นามสกุลเดิม",
|
||||
sortable: true,
|
||||
field: "lastNameOld",
|
||||
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",
|
||||
format: (val) => (val ? "มีชีวิต" : "ถึงแก่กรรม"),
|
||||
},
|
||||
]);
|
||||
|
||||
function onHistory(type: string,id:string) {
|
||||
modalHistory.value = true;
|
||||
typeForm.value = type;
|
||||
idFamily.value = id ? id:'user'
|
||||
}
|
||||
|
||||
/** get data */
|
||||
function getData(type: string) {
|
||||
// father
|
||||
// mother
|
||||
// couple
|
||||
// children
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.dataUserFamily(type))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
if (data) {
|
||||
if (type == "father") {
|
||||
fatherData.isLive = data.fatherLive;
|
||||
fatherData.citizenId = data.fatherCitizenId;
|
||||
fatherData.prefix = data.fatherPrefix;
|
||||
fatherData.firstName = data.fatherFirstName;
|
||||
fatherData.lastName = data.fatherLastName;
|
||||
fatherData.job = data.fatherCareer;
|
||||
fatherData.profileId = data.profileId;
|
||||
} else if (type == "mother") {
|
||||
motherData.isLive = data.motherLive;
|
||||
motherData.citizenId = data.motherCitizenId;
|
||||
motherData.prefix = data.motherPrefix;
|
||||
motherData.firstName = data.motherFirstName;
|
||||
motherData.lastName = data.motherLastName;
|
||||
motherData.job = data.motherCareer;
|
||||
motherData.profileId = data.profileId;
|
||||
} else if (type == "couple") {
|
||||
coupleData.isLive = data.coupleLive;
|
||||
coupleData.citizenId = data.coupleCitizenId;
|
||||
coupleData.prefix = data.couplePrefix;
|
||||
coupleData.firstName = data.coupleFirstName;
|
||||
coupleData.lastName = data.coupleLastName;
|
||||
coupleData.job = data.coupleCareer;
|
||||
coupleData.lastNameOld = data.coupleLastNameOld;
|
||||
coupleData.statusMarital = data.relationship;
|
||||
coupleData.profileId = data.profileId;
|
||||
} else {
|
||||
childData.value = data;
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** get history */
|
||||
function getHistory() {
|
||||
const url = store.typeProfile == 'OFFICER' ? config.API.dataUserFamilyHistory(typeForm.value,'',idFamily.value):config.API.dataUserFamilyHistory(typeForm.value,'-employee',idFamily.value)
|
||||
|
||||
showLoader();
|
||||
http
|
||||
.get(url)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
rowsHistory.value = data.map((e: any) => ({
|
||||
citizenId: e[`${typeForm.value}CitizenId`],
|
||||
prefix: e[`${typeForm.value}Prefix`],
|
||||
firstName: e[`${typeForm.value}FirstName`],
|
||||
lastName: e[`${typeForm.value}LastName`],
|
||||
job: e[`${typeForm.value}Career`],
|
||||
isLive: e[`${typeForm.value}Live`],
|
||||
lastNameOld: typeForm.value === "couple" ? e.coupleLastNameOld : undefined,
|
||||
}));
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await getData("father");
|
||||
await getData("mother");
|
||||
await getData("couple");
|
||||
await getData("children");
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-12">
|
||||
<q-toolbar class="q-px-none">
|
||||
<span class="text-blue-6 text-weight-bold text-body1"
|
||||
>ข้อมูลครอบครัว</span
|
||||
>
|
||||
</q-toolbar>
|
||||
<div class="row q-col-gutter-sm">
|
||||
|
||||
|
||||
<div class="col-12" v-if="fatherData.profileId !== ''">
|
||||
<q-card bordered class="q-pa-md">
|
||||
<div class="row">
|
||||
<span class="text-blue-6 text-weight-bold text-body1">• บิดา</span>
|
||||
<q-space />
|
||||
<q-btn
|
||||
icon="mdi-history"
|
||||
color="info"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
@click="onHistory('father','')"
|
||||
>
|
||||
<q-tooltip>ประวัติการแก้ไขข้อมูลบิดา</q-tooltip>
|
||||
</q-btn>
|
||||
<div class="col-12">
|
||||
<q-card bordered class="bg-grey-1 q-pa-sm">
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-12 q-gutter-y-sm">
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">
|
||||
เลขบัตรประจำตัวประชาชน
|
||||
</div>
|
||||
<div class="col-7">
|
||||
{{ fatherData.citizenId ? fatherData.citizenId : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">
|
||||
ชื่อ-นามสกุล
|
||||
</div>
|
||||
<div class="col-7">
|
||||
{{
|
||||
fatherData.firstName
|
||||
? `${fatherData.prefix}${fatherData.firstName} ${fatherData.lastName}`
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">
|
||||
สถานภาพการมีชีวิต
|
||||
</div>
|
||||
<div class="col-7">
|
||||
{{
|
||||
fatherData.isLive === true
|
||||
? "มีชีวิตอยู่"
|
||||
: fatherData.isLive === false
|
||||
? "ถึงแก่กรรม"
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">
|
||||
อาชีพ
|
||||
</div>
|
||||
<div class="col-7">
|
||||
{{ fatherData.job ? fatherData.job : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<!-- แม่ -->
|
||||
<div class="col-12" v-if="motherData.profileId !== ''">
|
||||
<q-card bordered class="q-pa-md">
|
||||
<div class="row">
|
||||
<span class="text-blue-6 text-weight-bold text-body1">• มารดา</span>
|
||||
<q-space />
|
||||
<q-btn
|
||||
icon="mdi-history"
|
||||
color="info"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
@click="onHistory('mother','')"
|
||||
>
|
||||
<q-tooltip>ประวัติการแก้ไขข้อมูลมารดา</q-tooltip>
|
||||
</q-btn>
|
||||
<div class="col-12">
|
||||
<q-card bordered class="bg-grey-1 q-pa-sm">
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-12 q-gutter-y-sm">
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">
|
||||
เลขบัตรประจำตัวประชาชน
|
||||
</div>
|
||||
<div class="col-7">
|
||||
{{ motherData.citizenId ? motherData.citizenId : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">
|
||||
ชื่อ-นามสกุล
|
||||
</div>
|
||||
<div class="col-7">
|
||||
{{
|
||||
motherData.firstName
|
||||
? `${motherData.prefix}${motherData.firstName} ${motherData.lastName}`
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">
|
||||
สถานภาพการมีชีวิต
|
||||
</div>
|
||||
<div class="col-7">
|
||||
{{
|
||||
motherData.isLive === true
|
||||
? "มีชีวิตอยู่"
|
||||
: motherData.isLive === false
|
||||
? "ถึงแก่กรรม"
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">
|
||||
อาชีพ
|
||||
</div>
|
||||
<div class="col-7">
|
||||
{{ motherData.job ? motherData.job : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<!-- คู่สมรส -->
|
||||
<div class="col-12" v-if="coupleData.profileId !== ''">
|
||||
<q-card bordered class="q-pa-md">
|
||||
<div class="row">
|
||||
<span class="text-blue-6 text-weight-bold text-body1"
|
||||
>• คู่สมรส</span
|
||||
>
|
||||
<q-space />
|
||||
<q-btn
|
||||
icon="mdi-history"
|
||||
color="info"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
@click="onHistory('couple','')"
|
||||
>
|
||||
<q-tooltip>ประวัติการแก้ไขข้อมูลคู่สมรส</q-tooltip>
|
||||
</q-btn>
|
||||
<div class="col-12">
|
||||
<q-card bordered class="bg-grey-1 q-pa-sm">
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">
|
||||
สถานภาพการสมรส
|
||||
</div>
|
||||
<div class="col-7">
|
||||
{{ coupleData.statusMarital ? coupleData.statusMarital : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">
|
||||
เลขบัตรประจำตัวประชาชน
|
||||
</div>
|
||||
<div class="col-7">
|
||||
{{ coupleData.citizenId ? coupleData.citizenId : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">
|
||||
ชื่อ-นามสกุล
|
||||
</div>
|
||||
<div class="col-7">
|
||||
{{
|
||||
coupleData.firstName
|
||||
? `${coupleData.prefix}${coupleData.firstName} ${coupleData.lastName}`
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">
|
||||
นามสกุลเดิม
|
||||
</div>
|
||||
<div class="col-7">
|
||||
{{ coupleData.lastNameOld ? coupleData.lastNameOld : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">
|
||||
สถานภาพการมีชีวิต
|
||||
</div>
|
||||
<div class="col-7">
|
||||
{{
|
||||
coupleData.isLive === true
|
||||
? "มีชีวิตอยู่"
|
||||
: coupleData.isLive === false
|
||||
? "ถึงแก่กรรม"
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">
|
||||
อาชีพ
|
||||
</div>
|
||||
<div class="col-7">
|
||||
{{ coupleData.job ? coupleData.job : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<!-- ลูก -->
|
||||
<div v-if="childData.length !== 0" class="col-12 q-gutter-y-sm">
|
||||
<q-card
|
||||
v-for="(item, index) in childData"
|
||||
bordered
|
||||
class="q-pa-md"
|
||||
:key="item.id"
|
||||
>
|
||||
<div class="row">
|
||||
<span class="text-blue-6 text-weight-bold text-body1"
|
||||
>• บุตรคนที่ {{ index + 1 }}</span
|
||||
>
|
||||
<q-space />
|
||||
<q-btn
|
||||
icon="mdi-history"
|
||||
color="info"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
@click="onHistory('children',item.id)"
|
||||
>
|
||||
<q-tooltip>ประวัติการแก้ไขข้อมูลบุตร</q-tooltip>
|
||||
</q-btn>
|
||||
<div class="col-12">
|
||||
<q-card bordered class="bg-grey-1 q-pa-sm">
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-12 q-gutter-y-sm">
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">
|
||||
เลขบัตรประจำตัวประชาชน
|
||||
</div>
|
||||
<div class="col-7">
|
||||
{{
|
||||
item.childrenCitizenId ? item.childrenCitizenId : "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">
|
||||
ชื่อ-นามสกุล
|
||||
</div>
|
||||
<div class="col-7">
|
||||
{{
|
||||
item.childrenFirstName
|
||||
? `${item.childrenPrefix}${item.childrenFirstName} ${item.childrenLastName}`
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">
|
||||
สถานภาพการมีชีวิต
|
||||
</div>
|
||||
<div class="col-7">
|
||||
{{
|
||||
item.childrenLive === true
|
||||
? "มีชีวิตอยู่"
|
||||
: item.childrenLive === false
|
||||
? "ถึงแก่กรรม"
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">
|
||||
อาชีพ
|
||||
</div>
|
||||
<div class="col-7">
|
||||
{{ item.childrenCareer ? item.childrenCareer : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogHistory
|
||||
v-model:modal="modalHistory"
|
||||
mother
|
||||
:title="`ประวัติการแก้ไขข้อมูล${
|
||||
typeForm === 'father'
|
||||
? 'บิดา'
|
||||
: typeForm === 'mother'
|
||||
? 'มารดา'
|
||||
: typeForm === 'couple'
|
||||
? 'คู่สมรส'
|
||||
: 'บุตร'
|
||||
}`"
|
||||
:getData="getHistory"
|
||||
:rows="rowsHistory"
|
||||
:visibleColumns="visibleColumnsHistory"
|
||||
:columns="
|
||||
typeForm === 'couple'
|
||||
? columnsHistory
|
||||
: columnsHistory?.filter((e) => e.name !== 'lastNameOld')
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.cardStyle {
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid #eeeded;
|
||||
box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
|
||||
}
|
||||
</style>
|
||||
636
src/modules/10_registry/01_Information/05_Educations.vue
Normal file
636
src/modules/10_registry/01_Information/05_Educations.vue
Normal file
|
|
@ -0,0 +1,636 @@
|
|||
<script setup lang="ts">
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar, type QTableProps } from "quasar";
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
|
||||
//history dialog
|
||||
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const idByRow = ref<string>('')
|
||||
const rows = ref<any[]>([]);
|
||||
const filter = ref<string>("");
|
||||
const rowsHistory = ref<any[]>([]);
|
||||
const $q = useQuasar();
|
||||
const mode = ref<any>($q.screen.gt.xs);
|
||||
const mixin = useCounterMixin();
|
||||
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
|
||||
|
||||
const modalHistory = ref<boolean>(false);
|
||||
/** ตัวแปรข้อมูล */
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"educationLevel",
|
||||
"institute",
|
||||
"degree",
|
||||
"field",
|
||||
"gpa",
|
||||
"country",
|
||||
"duration",
|
||||
"durationYear",
|
||||
"other",
|
||||
"fundName",
|
||||
"isEducation",
|
||||
"endDate",
|
||||
"startDate",
|
||||
"finishDate",
|
||||
"note",
|
||||
]);
|
||||
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "educationLevel",
|
||||
align: "left",
|
||||
label: "ระดับศึกษา",
|
||||
sortable: true,
|
||||
field: "educationLevel",
|
||||
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",
|
||||
format: (v) => date2Thai(v),
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "endDate",
|
||||
align: "left",
|
||||
label: "ถึง",
|
||||
sortable: true,
|
||||
field: (v) =>
|
||||
v.isDate ? date2Thai(v.endDate) : new Date(v.endDate).getFullYear() + 543,
|
||||
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",
|
||||
format: (v) => date2Thai(v),
|
||||
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",
|
||||
format: (v) => (v === true ? "ใช่" : "ไม่ใช่"),
|
||||
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" }),
|
||||
},
|
||||
{
|
||||
name: "note",
|
||||
align: "left",
|
||||
label: "หมายเหตุ",
|
||||
sortable: true,
|
||||
field: "note",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
|
||||
const columnsHistory = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "educationLevel",
|
||||
align: "left",
|
||||
label: "ระดับศึกษา",
|
||||
sortable: true,
|
||||
field: "educationLevel",
|
||||
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: (v) =>
|
||||
v.isDate
|
||||
? date2Thai(v.startDate)
|
||||
: new Date(v.startDate).getFullYear() + 543,
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "endDate",
|
||||
align: "left",
|
||||
label: "ถึง",
|
||||
sortable: true,
|
||||
field: (v) =>
|
||||
v.isDate ? date2Thai(v.endDate) : new Date(v.endDate).getFullYear() + 543,
|
||||
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",
|
||||
format: (v) => date2Thai(v),
|
||||
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",
|
||||
format: (v) => (v === true ? "ใช่" : "ไม่ใช่"),
|
||||
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" }),
|
||||
},
|
||||
{
|
||||
name: "note",
|
||||
align: "left",
|
||||
label: "หมายเหตุ",
|
||||
sortable: true,
|
||||
field: "note",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "lastUpdateFullName",
|
||||
align: "left",
|
||||
label: "ผู้ดำเนินการ",
|
||||
sortable: true,
|
||||
field: "lastUpdateFullName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "lastUpdatedAt",
|
||||
align: "left",
|
||||
label: "วันที่แก้ไข",
|
||||
sortable: true,
|
||||
field: "lastUpdatedAt",
|
||||
format: (v) => date2Thai(v),
|
||||
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[]>([
|
||||
"educationLevel",
|
||||
"institute",
|
||||
"degree",
|
||||
"field",
|
||||
"gpa",
|
||||
"country",
|
||||
"duration",
|
||||
"durationYear",
|
||||
"other",
|
||||
"fundName",
|
||||
"isEducation",
|
||||
"endDate",
|
||||
"startDate",
|
||||
"finishDate",
|
||||
"note",
|
||||
"lastUpdateFullName",
|
||||
"lastUpdatedAt",
|
||||
]);
|
||||
|
||||
function onHistory(id:string) {
|
||||
modalHistory.value = true;
|
||||
idByRow.value = id
|
||||
}
|
||||
|
||||
/** get data */
|
||||
function getData() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.dataUserEducations)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
rows.value = data;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** get history */
|
||||
function getHistory() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.dataUserEducationsHistory(idByRow.value))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
rowsHistory.value = data;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<!-- v-if="mode" -->
|
||||
<div class="col-12">
|
||||
<q-toolbar class="q-px-none q-mt-md">
|
||||
<span class="text-blue-6 text-weight-bold text-body1"
|
||||
>ประวัติการศึกษา</span
|
||||
>
|
||||
<q-space />
|
||||
<q-input
|
||||
v-if="mode"
|
||||
class="inputgreen"
|
||||
outlined
|
||||
dense
|
||||
v-model="filter"
|
||||
label="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="filter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="filter = ''"
|
||||
/>
|
||||
<q-icon
|
||||
v-else
|
||||
name="search"
|
||||
class="cursor-pointer"
|
||||
@click="filter = ''"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
v-if="mode"
|
||||
class="q-ml-sm"
|
||||
dense
|
||||
multiple
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
options-cover
|
||||
options-dense
|
||||
option-value="name"
|
||||
style="min-width: 150px"
|
||||
v-model="visibleColumns"
|
||||
:options="columns"
|
||||
:display-value="$q.lang.table.columns"
|
||||
/>
|
||||
</q-toolbar>
|
||||
<d-table
|
||||
flat
|
||||
dense
|
||||
bordered
|
||||
virtual-scroll
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:grid="!mode"
|
||||
:filter="filter"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:visible-columns="visibleColumns"
|
||||
:virtual-scroll-sticky-size-start="48"
|
||||
>
|
||||
<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-if="mode" v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
||||
<div v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'status'">
|
||||
{{ props.row.status ? props.row.status : "-" }}
|
||||
</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"
|
||||
@click="onHistory(props.row.id)"
|
||||
>
|
||||
<q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-else v-slot:item="props">
|
||||
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
|
||||
<q-card bordered flat>
|
||||
<q-list dense class="q-mt-lg relative-position">
|
||||
<q-btn
|
||||
icon="mdi-history"
|
||||
color="info"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
class="absolute_button"
|
||||
@click="onHistory(props.row.id)"
|
||||
>
|
||||
<q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
|
||||
</q-btn>
|
||||
<q-item v-for="col in props.cols" :key="col.name">
|
||||
|
||||
<q-item-section class="fix_top">
|
||||
<q-item-label class="text-grey-6 text-weight-medium">{{
|
||||
col.label
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section class="fix_top">
|
||||
<q-item-label class="text-dark text-weight-medium">{{
|
||||
col.value ? col.value : "-"
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:no-data>
|
||||
<div class="full-width row flex-center bg-grey-3 q-pa-md rounded-borders text-body2 text-weight-medium">
|
||||
<span>
|
||||
ไม่พบข้อมูลประวัติการศึกษา
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</d-table>
|
||||
</div>
|
||||
<DialogHistory
|
||||
v-model:modal="modalHistory"
|
||||
:title="'ประวัติแก้ไขประวัติการศึกษา'"
|
||||
:getData="getHistory"
|
||||
:rows="rowsHistory"
|
||||
:visibleColumns="visibleColumnsHistory"
|
||||
:columns="columnsHistory"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.absolute_button {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: -20px;
|
||||
}
|
||||
|
||||
.fix_top{
|
||||
justify-content: start!important;
|
||||
}
|
||||
</style>
|
||||
359
src/modules/10_registry/01_Information/06_Ability.vue
Normal file
359
src/modules/10_registry/01_Information/06_Ability.vue
Normal file
|
|
@ -0,0 +1,359 @@
|
|||
<script setup lang="ts">
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar, type QTableProps } from "quasar";
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
|
||||
//history dialog
|
||||
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const idByRow = ref<string>('')
|
||||
const rows = ref<any[]>([]);
|
||||
const filter = ref<string>("");
|
||||
const rowsHistory = ref<any[]>([]);
|
||||
const $q = useQuasar();
|
||||
const mode = ref<any>($q.screen.gt.xs);
|
||||
const mixin = useCounterMixin();
|
||||
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
|
||||
|
||||
const modalHistory = ref<boolean>(false);
|
||||
/** ตัวแปรข้อมูล */
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"field",
|
||||
"detail",
|
||||
"remark",
|
||||
"reference",
|
||||
]);
|
||||
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "field",
|
||||
align: "left",
|
||||
label: "ด้าน",
|
||||
sortable: true,
|
||||
field: "field",
|
||||
headerStyle: "font-size: 14px; width: 50px;",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "detail",
|
||||
align: "left",
|
||||
label: "รายละเอียด",
|
||||
sortable: true,
|
||||
field: "detail",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "remark",
|
||||
align: "left",
|
||||
label: "หมายเหตุ",
|
||||
sortable: true,
|
||||
field: "remark",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "reference",
|
||||
align: "left",
|
||||
label: "เอกสารอ้างอิง",
|
||||
sortable: true,
|
||||
field: "reference",
|
||||
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[]>([
|
||||
"field",
|
||||
"detail",
|
||||
"remark",
|
||||
"reference",
|
||||
"lastUpdateFullName",
|
||||
"lastUpdatedAt",
|
||||
]);
|
||||
const columnsHistory = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "field",
|
||||
align: "left",
|
||||
label: "ด้าน",
|
||||
sortable: true,
|
||||
field: "field",
|
||||
headerStyle: "font-size: 14px; width: 50px;",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "detail",
|
||||
align: "left",
|
||||
label: "รายละเอียด",
|
||||
sortable: true,
|
||||
field: "detail",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "remark",
|
||||
align: "left",
|
||||
label: "หมายเหตุ",
|
||||
sortable: true,
|
||||
field: "remark",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "reference",
|
||||
align: "left",
|
||||
label: "เอกสารอ้างอิง",
|
||||
sortable: true,
|
||||
field: "reference",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "lastUpdateFullName",
|
||||
align: "left",
|
||||
label: "ผู้ดำเนินการ",
|
||||
sortable: true,
|
||||
field: "lastUpdateFullName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "lastUpdatedAt",
|
||||
align: "left",
|
||||
label: "วันที่แก้ไข",
|
||||
sortable: true,
|
||||
field: "lastUpdatedAt",
|
||||
format: (v) => date2Thai(v),
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
|
||||
function onHistory(id:string) {
|
||||
modalHistory.value = true;
|
||||
idByRow.value = id
|
||||
}
|
||||
|
||||
/** get data */
|
||||
function getData() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.dataUserAbility)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
rows.value = data;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** get history */
|
||||
function getHistory() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.dataUserAbilityHistory(idByRow.value))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
rowsHistory.value = data;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<!-- v-if="mode" -->
|
||||
<div class="col-12">
|
||||
<q-toolbar class="q-px-none q-mt-md">
|
||||
<span class="text-blue-6 text-weight-bold text-body1"
|
||||
>ความสามารถพิเศษ</span
|
||||
>
|
||||
<q-space />
|
||||
<q-input
|
||||
v-if="mode"
|
||||
class="inputgreen"
|
||||
outlined
|
||||
dense
|
||||
v-model="filter"
|
||||
label="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="filter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="filter = ''"
|
||||
/>
|
||||
<q-icon
|
||||
v-else
|
||||
name="search"
|
||||
class="cursor-pointer"
|
||||
@click="filter = ''"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
v-if="mode"
|
||||
class="q-ml-sm"
|
||||
dense
|
||||
multiple
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
options-cover
|
||||
options-dense
|
||||
option-value="name"
|
||||
style="min-width: 150px"
|
||||
v-model="visibleColumns"
|
||||
:options="columns"
|
||||
:display-value="$q.lang.table.columns"
|
||||
/>
|
||||
</q-toolbar>
|
||||
<d-table
|
||||
flat
|
||||
dense
|
||||
bordered
|
||||
virtual-scroll
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:grid="!mode"
|
||||
:filter="filter"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:visible-columns="visibleColumns"
|
||||
:virtual-scroll-sticky-size-start="48"
|
||||
>
|
||||
<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-if="mode" v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
||||
<div v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'status'">
|
||||
{{ props.row.status ? props.row.status : "-" }}
|
||||
</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"
|
||||
@click="onHistory(props.row.id)"
|
||||
>
|
||||
<q-tooltip>ประวัติแก้ไขความสามารถพิเศษ</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template v-else v-slot:item="props">
|
||||
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
|
||||
<q-card bordered flat>
|
||||
<q-list dense class="q-mt-lg relative-position">
|
||||
<q-btn
|
||||
icon="mdi-history"
|
||||
color="info"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
class="absolute_button"
|
||||
@click="onHistory(props.row.id)"
|
||||
>
|
||||
<q-tooltip>ประวัติแก้ไขความสามารถพิเศษ</q-tooltip>
|
||||
</q-btn>
|
||||
<q-item v-for="col in props.cols" :key="col.name">
|
||||
<q-item-section class="fix_top">
|
||||
<q-item-label class="text-grey-6 text-weight-medium">{{
|
||||
col.label
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section class="fix_top">
|
||||
<q-item-label class="text-dark text-weight-medium">{{
|
||||
col.value ? col.value : "-"
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:no-data>
|
||||
<div class="full-width row flex-center bg-grey-3 q-pa-md rounded-borders text-body2 text-weight-medium">
|
||||
<span>
|
||||
ไม่พบข้อมูลความสามารถพิเศษ
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
<DialogHistory
|
||||
v-model:modal="modalHistory"
|
||||
:title="'ประวัติแก้ไขความสามารถพิเศษ'"
|
||||
:getData="getHistory"
|
||||
:rows="rowsHistory"
|
||||
:visibleColumns="visibleColumnsHistory"
|
||||
:columns="columnsHistory"
|
||||
/>
|
||||
</template>
|
||||
<style scoped>
|
||||
.absolute_button {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: -20px;
|
||||
}
|
||||
|
||||
.fix_top{
|
||||
justify-content: start!important;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue