Merge branch 'develop' into devTee
# Conflicts: # src/api/registry/api.registry.ts
This commit is contained in:
setthawutttty
commit
28fb5ebb9a
20 changed files with 731 additions and 764 deletions
|
|
@ -10,7 +10,6 @@ import { useCounterMixin } from "@/stores/mixin";
|
|||
import HistoryTable from "@/components/TableHistory.vue";
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import type { RequestItemsObject } from "@/modules/04_registryNew/interface/request/DeclarationHonor";
|
||||
import type { FormData } from "@/modules/04_registryNew/interface/request/DeclarationHonor";
|
||||
import type { ResponseObject } from "@/modules/04_registryNew/interface/response/DeclarationHonor";
|
||||
|
||||
const $q = useQuasar();
|
||||
|
|
@ -29,20 +28,18 @@ const profileId = ref<string>(
|
|||
route.params.id ? route.params.id.toString() : ""
|
||||
);
|
||||
|
||||
const declHonorData = reactive<FormData>({
|
||||
id: "",
|
||||
isActive: true,
|
||||
const id = ref<string>("");
|
||||
const issueDateYear = ref<number>(0);
|
||||
const declHonorForm = reactive<RequestItemsObject>({
|
||||
isDate: "false",
|
||||
issuer: "",
|
||||
detail: "",
|
||||
issueDate: null,
|
||||
issueDateYear: 0,
|
||||
refCommandNo: "",
|
||||
refCommandDate: null,
|
||||
});
|
||||
|
||||
const isEdit = ref<boolean>(false);
|
||||
const editRow = ref<boolean>(false);
|
||||
const myForm = ref<QForm>();
|
||||
const modal = ref<boolean>(false);
|
||||
const modelView = ref<string>("table");
|
||||
|
|
@ -234,21 +231,17 @@ async function addEditData(editStatus: boolean = false) {
|
|||
if (!profileId.value) return;
|
||||
|
||||
const url = editStatus
|
||||
? config.API.profileNewHonorById(declHonorData.id)
|
||||
? config.API.profileNewHonorById(id.value)
|
||||
: config.API.profileNewHonor;
|
||||
const method = editStatus ? "patch" : "post";
|
||||
const reqBody: RequestItemsObject = {
|
||||
...declHonorForm,
|
||||
profileId: editStatus ? undefined : profileId.value,
|
||||
isActive: declHonorData.isActive,
|
||||
detail: declHonorData.detail,
|
||||
isDate: declHonorForm.isDate === "true" ? true : false,
|
||||
issueDate:
|
||||
declHonorData.isDate === "true"
|
||||
? declHonorData.issueDate
|
||||
: new Date(`${declHonorData.issueDateYear}-01-01`),
|
||||
issuer: declHonorData.issuer,
|
||||
refCommandDate: declHonorData.refCommandDate,
|
||||
refCommandNo: declHonorData.refCommandNo,
|
||||
isDate: declHonorData.isDate === "true" ? true : false,
|
||||
declHonorForm.isDate === true
|
||||
? declHonorForm.issueDate
|
||||
: new Date(`${issueDateYear.value}-01-01`),
|
||||
};
|
||||
|
||||
try {
|
||||
|
|
@ -262,57 +255,41 @@ async function addEditData(editStatus: boolean = false) {
|
|||
}
|
||||
}
|
||||
|
||||
async function clickDelete(dataId: string) {
|
||||
try {
|
||||
await http.delete(config.API.profileNewHonorById(dataId));
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
await fetchData();
|
||||
modal.value = false;
|
||||
} catch (error) {
|
||||
messageError($q, error);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
}
|
||||
// async function clickDelete(dataId: string) {
|
||||
// try {
|
||||
// await http.delete(config.API.profileNewHonorById(dataId));
|
||||
// success($q, "ลบข้อมูลสำเร็จ");
|
||||
// await fetchData();
|
||||
// modal.value = false;
|
||||
// } catch (error) {
|
||||
// messageError($q, error);
|
||||
// } finally {
|
||||
// hideLoader();
|
||||
// }
|
||||
// }
|
||||
|
||||
function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
|
||||
modal.value = true;
|
||||
editRow.value = false;
|
||||
isEdit.value = editStatus;
|
||||
|
||||
if (editStatus && row) {
|
||||
Object.assign(declHonorData, row);
|
||||
declHonorData.isDate = row.isDate.toString();
|
||||
declHonorData.issueDate = row.issueDate;
|
||||
declHonorData.issueDateYear = new Date(row.issueDate).getFullYear();
|
||||
declHonorData.refCommandDate = row.refCommandDate;
|
||||
id.value = row.id;
|
||||
|
||||
issueDateYear.value = new Date(row.issueDate).getFullYear();
|
||||
declHonorForm.issuer = row.issuer;
|
||||
declHonorForm.detail = row.detail;
|
||||
declHonorForm.issueDate = row.issueDate;
|
||||
declHonorForm.refCommandNo = row.refCommandNo;
|
||||
declHonorForm.refCommandDate = row.refCommandDate;
|
||||
declHonorForm.isDate = row.isDate ? "true" : "false";
|
||||
} else {
|
||||
declHonorData.id = "";
|
||||
declHonorData.isActive = true;
|
||||
declHonorData.issuer = "";
|
||||
declHonorData.detail = "";
|
||||
declHonorData.issueDate = null;
|
||||
declHonorData.issueDateYear = 0;
|
||||
declHonorData.refCommandNo = "";
|
||||
declHonorData.refCommandDate = null;
|
||||
declHonorData.isDate = "false";
|
||||
clearData();
|
||||
}
|
||||
}
|
||||
|
||||
async function clickClose() {
|
||||
if (editRow.value == true) {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
modal.value = false;
|
||||
editRow.value = false;
|
||||
},
|
||||
"ข้อมูลมีการแก้ไข",
|
||||
"ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?"
|
||||
);
|
||||
} else {
|
||||
modal.value = false;
|
||||
}
|
||||
clearData();
|
||||
modal.value = false;
|
||||
}
|
||||
|
||||
async function clickHistory(row: ResponseObject) {
|
||||
|
|
@ -334,30 +311,37 @@ function onSubmit() {
|
|||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
myForm.value?.validate().then(async (result: boolean) => {
|
||||
if (result) {
|
||||
addEditData(isEdit.value);
|
||||
modal.value = false;
|
||||
}
|
||||
});
|
||||
addEditData(isEdit.value);
|
||||
modal.value = false;
|
||||
},
|
||||
"ยืนยันการบันทึกข้อมูล",
|
||||
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
||||
);
|
||||
}
|
||||
|
||||
function clearData() {
|
||||
id.value = "";
|
||||
issueDateYear.value = 0;
|
||||
declHonorForm.issuer = "";
|
||||
declHonorForm.detail = "";
|
||||
declHonorForm.issueDate = null;
|
||||
declHonorForm.refCommandNo = "";
|
||||
declHonorForm.refCommandDate = null;
|
||||
declHonorForm.isDate = "false";
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchData();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => declHonorData.isDate,
|
||||
() => declHonorForm.isDate,
|
||||
() => {
|
||||
if (declHonorData.isDate === "true") {
|
||||
declHonorData.issueDateYear = 0;
|
||||
if (declHonorForm.isDate === "true") {
|
||||
issueDateYear.value = 0;
|
||||
}
|
||||
if (declHonorData.isDate === "false") {
|
||||
declHonorData.issueDate = null;
|
||||
if (declHonorForm.isDate === "false") {
|
||||
declHonorForm.issueDate = null;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
@ -557,14 +541,14 @@ watch(
|
|||
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="width: 600px">
|
||||
<q-form greedy ref="myForm" @submit="onSubmit">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<DialogHeader tittle="ประกาศเกียรติคุณ" :close="clickClose" />
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-sm">
|
||||
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||
<div class="row col-12 q-gutter-md q-py-sm text-grey-7">
|
||||
<q-radio
|
||||
v-model="declHonorData.isDate"
|
||||
v-model="declHonorForm.isDate as string"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="false"
|
||||
|
|
@ -572,7 +556,7 @@ watch(
|
|||
dense
|
||||
/>
|
||||
<q-radio
|
||||
v-model="declHonorData.isDate"
|
||||
v-model="declHonorForm.isDate as string"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="true"
|
||||
|
|
@ -584,12 +568,12 @@ watch(
|
|||
<datepicker
|
||||
autoApply
|
||||
year-picker
|
||||
v-model="declHonorData.issueDateYear"
|
||||
v-model="issueDateYear"
|
||||
week-start="0"
|
||||
menu-class-name="modalfix"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
v-if="declHonorData.isDate === 'false'"
|
||||
v-if="declHonorForm.isDate === 'false'"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
|
|
@ -599,21 +583,15 @@ watch(
|
|||
<q-input
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
:model-value="
|
||||
declHonorData.issueDateYear
|
||||
? declHonorData.issueDateYear + 543
|
||||
: null
|
||||
"
|
||||
:model-value="issueDateYear ? issueDateYear + 543 : null"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val ||
|
||||
`${'กรุณาเลือกปีที่ได้รับ'}`,
|
||||
]"
|
||||
:label="`${'ปีที่ได้รับ'}`"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -630,7 +608,7 @@ watch(
|
|||
borderless
|
||||
week-start="0"
|
||||
menu-class-name="modalfix"
|
||||
v-model="declHonorData.issueDate"
|
||||
v-model="declHonorForm.issueDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
v-else
|
||||
|
|
@ -649,10 +627,9 @@ watch(
|
|||
for="inputDatereceive"
|
||||
ref="dateReceivedRef"
|
||||
class="inputgreen"
|
||||
:model-value="date2Thai(declHonorData.issueDate as Date)"
|
||||
:model-value="date2Thai(declHonorForm.issueDate as Date)"
|
||||
:label="`${'วันที่ได้รับ'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -672,9 +649,8 @@ watch(
|
|||
lazy-rules
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
v-model="declHonorData.issuer"
|
||||
v-model="declHonorForm.issuer"
|
||||
:label="`${'ผู้มีอำนาจลงนาม'}`"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
|
|
@ -684,10 +660,9 @@ watch(
|
|||
lazy-rules
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
v-model="declHonorData.detail"
|
||||
v-model="declHonorForm.detail"
|
||||
:label="`${'รายละเอียด'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
|
|
@ -697,9 +672,8 @@ watch(
|
|||
lazy-rules
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
v-model="declHonorData.refCommandNo"
|
||||
v-model="declHonorForm.refCommandNo"
|
||||
:label="`${'เลขที่คำสั่ง'}`"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="mdi-file" class="cursor-pointer" />
|
||||
|
|
@ -712,7 +686,7 @@ watch(
|
|||
borderless
|
||||
week-start="0"
|
||||
menu-class-name="modalfix"
|
||||
v-model="declHonorData.refCommandDate"
|
||||
v-model="declHonorForm.refCommandDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
>
|
||||
|
|
@ -730,13 +704,12 @@ watch(
|
|||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
:model-value="
|
||||
declHonorData.refCommandDate == null
|
||||
declHonorForm.refCommandDate == null
|
||||
? null
|
||||
: date2Thai(declHonorData.refCommandDate)
|
||||
: date2Thai(declHonorForm.refCommandDate)
|
||||
"
|
||||
:label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
|
||||
@clear="declHonorData.refCommandDate = null"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
@clear="declHonorForm.refCommandDate = null"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
|
|||
|
|
@ -365,12 +365,8 @@ function onSubmit() {
|
|||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
myForm.value?.validate().then(async (result: boolean) => {
|
||||
if (result) {
|
||||
addEditData(isEdit.value);
|
||||
modal.value = false;
|
||||
}
|
||||
});
|
||||
addEditData(isEdit.value);
|
||||
modal.value = false;
|
||||
},
|
||||
"ยืนยันการบันทึกข้อมูล",
|
||||
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
||||
|
|
@ -587,7 +583,7 @@ onMounted(async () => {
|
|||
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="width: 600px">
|
||||
<q-form greedy ref="myForm" @submit="onSubmit">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<DialogHeader
|
||||
tittle="ผลการประเมินการปฏิบัติราชการ"
|
||||
:close="clickClose"
|
||||
|
|
|
|||
|
|
@ -127,22 +127,10 @@ function validateForm() {
|
|||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
const hasError = [];
|
||||
for (const key in objectRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
|
||||
const property = objectRef[key];
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate();
|
||||
hasError.push(isValid);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every((result) => result === true)) {
|
||||
if (edit.value) {
|
||||
editData();
|
||||
} else {
|
||||
saveData();
|
||||
}
|
||||
if (edit.value) {
|
||||
editData();
|
||||
} else {
|
||||
saveData();
|
||||
}
|
||||
},
|
||||
"ยืนยันการบันทึกข้อมูล",
|
||||
|
|
@ -228,12 +216,6 @@ async function getData() {
|
|||
// });
|
||||
// }
|
||||
|
||||
const infoRows = [
|
||||
{ title: "รายละเอียด", value: "" },
|
||||
{ title: "ล้างมลทิน", value: "" },
|
||||
{ title: "เลขที่คำสั่ง", value: "" },
|
||||
{ title: "เอกสารอ้างอิง (ลงวันที่)", value: "" },
|
||||
];
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
|
|
@ -467,7 +449,7 @@ onMounted(() => {
|
|||
<!-- dialog add edit -->
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="min-width: 600px">
|
||||
<form @submit.prevent="validateForm">
|
||||
<q-form greedy @submit.prevent @validation-success="validateForm">
|
||||
<q-card-section class="flex justify-between" style="padding: 0">
|
||||
<DialogHeader tittle="อื่นๆ" :close="closeDialog" />
|
||||
</q-card-section>
|
||||
|
|
@ -541,7 +523,7 @@ onMounted(() => {
|
|||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</form>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,9 +3,7 @@ import { ref, watch, reactive } from "vue";
|
|||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar, type QTableProps } from "quasar";
|
||||
import type {
|
||||
RowList,
|
||||
} from "@/modules/04_registryNew/interface/index/other";
|
||||
import type { RowList } from "@/modules/04_registryNew/interface/index/other";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
|
@ -93,7 +91,8 @@ const columns = ref<QTableProps["columns"]>([
|
|||
]);
|
||||
function getHistory() {
|
||||
showLoader();
|
||||
http.get(config.API.profileNewOtherHisById(id.value))
|
||||
http
|
||||
.get(config.API.profileNewOtherHisById(id.value))
|
||||
.then((res) => {
|
||||
let data = res.data.result;
|
||||
rows.value = [];
|
||||
|
|
@ -201,23 +200,7 @@ watch(modal, (status) => {
|
|||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td v-for="col in props.cols" :key="col.id">
|
||||
<div v-if="col.name === 'no'">
|
||||
{{
|
||||
(formFilter.page - 1) * formFilter.pageSize +
|
||||
props.rowIndex +
|
||||
1
|
||||
}}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="
|
||||
col.name == 'refCommandDate' ||
|
||||
col.name == 'date' ||
|
||||
col.name == 'createdAt'
|
||||
"
|
||||
>
|
||||
{{ col.value == null ? null : date2Thai(col.value) }}
|
||||
</div>
|
||||
<div v-else>
|
||||
<div>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, watch, ref } from "vue";
|
||||
import { onMounted, watch, ref, reactive } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
import type { QTableColumn, QForm } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
|
|
@ -9,92 +10,59 @@ import { useCounterMixin } from "@/stores/mixin";
|
|||
import { useProfileDataStore } from "@/modules/04_registryNew/stores/profile";
|
||||
import HistoryTable from "@/components/TableHistory.vue";
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import type {
|
||||
InformationOps,
|
||||
Information,
|
||||
DataOption,
|
||||
} from "@/modules/04_registryNew/interface/index/Main";
|
||||
import { defaultInformation } from "@/modules/04_registryNew/interface/index/Main";
|
||||
import type { RequestItemsHistoryObject } from "@/modules/04_registryNew/interface/request/Information";
|
||||
import type { RequestObject } from "@/modules/04_registryNew/interface/request/Profile";
|
||||
import type { ResponseObject } from "@/modules/04_registryNew/interface/response/Profile";
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const mixin = useCounterMixin();
|
||||
const profileStore = useProfileDataStore();
|
||||
const store = useProfileDataStore();
|
||||
const {
|
||||
success,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
date2Thai,
|
||||
messageError,
|
||||
convertDate,
|
||||
dateToISO,
|
||||
dialogConfirm,
|
||||
} = mixin;
|
||||
const { changeRetireText, changeBirth } = profileStore;
|
||||
const { calculateAge, getGender, getRelationship, getReligion, getBloodGroup } =
|
||||
store;
|
||||
const profileId = ref<string>(
|
||||
route.params.id ? route.params.id.toString() : ""
|
||||
);
|
||||
|
||||
const informaData = ref<Information>(defaultInformation);
|
||||
const modal = ref<boolean>(false);
|
||||
const myForm = ref<any>();
|
||||
const rowsHistory = ref<RequestItemsHistoryObject[]>([]);
|
||||
const informaData = ref<ResponseObject>();
|
||||
const rowsHistory = ref<ResponseObject[]>([]);
|
||||
const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว");
|
||||
const filterHistory = ref<string>("");
|
||||
const modalHistory = ref<boolean>(false);
|
||||
|
||||
const Ops = ref<InformationOps>({
|
||||
prefixOps: [],
|
||||
prefixOldOps: [],
|
||||
genderOps: [],
|
||||
bloodOps: [],
|
||||
statusOps: [],
|
||||
religionOps: [],
|
||||
employeeClassOps: [
|
||||
{ id: "perm", name: "ลูกจ้างประจำ" },
|
||||
{ id: "temp", name: "ลูกจ้างชั่วคราว" },
|
||||
],
|
||||
employeeTypeOps: [
|
||||
{ id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
|
||||
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
|
||||
],
|
||||
});
|
||||
|
||||
const OpsFilter = ref<InformationOps>({
|
||||
prefixOps: [],
|
||||
prefixOldOps: [],
|
||||
genderOps: [],
|
||||
bloodOps: [],
|
||||
statusOps: [],
|
||||
religionOps: [],
|
||||
employeeClassOps: [
|
||||
{ id: "perm", name: "ลูกจ้างประจำ" },
|
||||
{ id: "temp", name: "ลูกจ้างชั่วคราว" },
|
||||
],
|
||||
employeeTypeOps: [
|
||||
{ id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
|
||||
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
|
||||
],
|
||||
});
|
||||
|
||||
// mock data
|
||||
const resultData = ref({
|
||||
citizenId: "3101502080439",
|
||||
prefixId: "71ed89df-8257-43e8-8fba-0b42fb2c55e0",
|
||||
prefix: "นางสาว",
|
||||
firstName: "อรัญญาสาร",
|
||||
lastName: "พรไชยะสิทธฺ์",
|
||||
birthDate: new Date("1968-11-24T00:00:00"),
|
||||
age: "55 ปี 3 เดือน 16 วัน",
|
||||
genderId: "e2693577-6633-499b-9f0a-fec0bff0be6b",
|
||||
gender: "หญิง",
|
||||
relationshipId: null,
|
||||
bloodGroupId: null,
|
||||
nationality: "ไทย",
|
||||
race: "ไทย",
|
||||
religionId: "ceaec498-71b4-4f82-b5a2-7d6ec988b753",
|
||||
const id = ref<string>("");
|
||||
const age = ref<string>("");
|
||||
// หลังบ้านไม่มีข้อมูล สัญชาติ
|
||||
const nationality = ref<string>("");
|
||||
const formData = reactive<RequestObject>({
|
||||
citizenId: "",
|
||||
prefix: "",
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
birthDate: null,
|
||||
genderId: "",
|
||||
relationshipId: "",
|
||||
// nationality: "",
|
||||
ethnicity: "",
|
||||
religionId: "",
|
||||
bloodGroupId: "",
|
||||
phone: "",
|
||||
posTypeId: "",
|
||||
posLevelId: "",
|
||||
telephoneNumber: null,
|
||||
profileType: "officer",
|
||||
employeeType: null,
|
||||
employeeClass: null,
|
||||
changeName: true,
|
||||
isVerified: true,
|
||||
isSendVerified: false,
|
||||
dateRetire: null,
|
||||
isProbation: false,
|
||||
keycloak: "",
|
||||
email: null,
|
||||
position: "",
|
||||
});
|
||||
|
||||
const dataLabel = {
|
||||
|
|
@ -105,10 +73,10 @@ const dataLabel = {
|
|||
gender: "เพศ",
|
||||
relationship: "สถานภาพ",
|
||||
nationality: "สัญชาติ",
|
||||
race: "เชื้อชาติ",
|
||||
ethnicity: "เชื้อชาติ",
|
||||
religion: "ศาสนา",
|
||||
bloodGroup: "หมู่เลือด",
|
||||
telephoneNumber: "เบอร์โทร",
|
||||
phone: "เบอร์โทร",
|
||||
|
||||
prefix: "คำนำหน้าชื่อ",
|
||||
firstName: "ชื่อ",
|
||||
|
|
@ -168,6 +136,7 @@ const columnsHistory = ref<QTableColumn[]>([
|
|||
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" }),
|
||||
},
|
||||
|
|
@ -176,7 +145,7 @@ const columnsHistory = ref<QTableColumn[]>([
|
|||
align: "left",
|
||||
label: "เพศ",
|
||||
sortable: true,
|
||||
field: "gender",
|
||||
field: (v) => (v.gender ? v.gender.name : "-"),
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
|
|
@ -187,7 +156,7 @@ const columnsHistory = ref<QTableColumn[]>([
|
|||
align: "left",
|
||||
label: "สถานภาพ",
|
||||
sortable: true,
|
||||
field: "relationship",
|
||||
field: (v) => (v.relationship ? v.relationship.name : "-"),
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
|
|
@ -198,7 +167,7 @@ const columnsHistory = ref<QTableColumn[]>([
|
|||
align: "left",
|
||||
label: "หมู่เลือด",
|
||||
sortable: true,
|
||||
field: "bloodGroup",
|
||||
field: (v) => (v.bloodGroup ? v.bloodGroup.name : "-"),
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
|
|
@ -216,11 +185,11 @@ const columnsHistory = ref<QTableColumn[]>([
|
|||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "race",
|
||||
name: "ethnicity",
|
||||
align: "left",
|
||||
label: "เชื้อชาติ",
|
||||
sortable: true,
|
||||
field: "race",
|
||||
field: "ethnicity",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
|
|
@ -231,40 +200,18 @@ const columnsHistory = ref<QTableColumn[]>([
|
|||
align: "left",
|
||||
label: "ศาสนา",
|
||||
sortable: true,
|
||||
field: "religion",
|
||||
field: (v) => (v.religion ? v.religion.name : "-"),
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "telephoneNumber",
|
||||
name: "phone",
|
||||
align: "left",
|
||||
label: "เบอร์โทร",
|
||||
sortable: true,
|
||||
field: "telephoneNumber",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "employeeType",
|
||||
align: "left",
|
||||
label: "ประเภทการจ้าง",
|
||||
sortable: true,
|
||||
field: "employeeType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "employeeClass",
|
||||
align: "left",
|
||||
label: "ประเภทลูกจ้าง",
|
||||
sortable: true,
|
||||
field: "employeeClass",
|
||||
field: "phone",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
|
|
@ -289,6 +236,7 @@ const columnsHistory = ref<QTableColumn[]>([
|
|||
field: "createdAt",
|
||||
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" }),
|
||||
},
|
||||
|
|
@ -304,255 +252,112 @@ const visibleColumnsHistory = ref<String[]>([
|
|||
"relationship",
|
||||
"bloodGroup",
|
||||
"nationality",
|
||||
"race",
|
||||
"ethnicity",
|
||||
"religion",
|
||||
"telephoneNumber",
|
||||
"employeeType",
|
||||
"employeeClass",
|
||||
"phone",
|
||||
"createdFullName",
|
||||
"createdAt",
|
||||
]);
|
||||
|
||||
async function fetchData() {
|
||||
informaData.value.cardid = resultData.value.citizenId;
|
||||
informaData.value.prefixId = resultData.value.prefixId;
|
||||
informaData.value.prefix = resultData.value.prefix;
|
||||
informaData.value.firstname = resultData.value.firstName;
|
||||
informaData.value.lastname = resultData.value.lastName;
|
||||
informaData.value.birthDate = resultData.value.birthDate;
|
||||
informaData.value.age = resultData.value.age;
|
||||
informaData.value.genderId = resultData.value.genderId;
|
||||
informaData.value.bloodId = resultData.value.bloodGroupId;
|
||||
informaData.value.nationality = resultData.value.nationality;
|
||||
informaData.value.ethnicity = resultData.value.race;
|
||||
informaData.value.statusId = resultData.value.relationshipId;
|
||||
informaData.value.religionId = resultData.value.religionId;
|
||||
informaData.value.tel = resultData.value.telephoneNumber;
|
||||
informaData.value.employeeType = resultData.value.employeeType;
|
||||
informaData.value.employeeClass = resultData.value.employeeClass;
|
||||
informaData.value.profileType = resultData.value.profileType;
|
||||
}
|
||||
|
||||
// get person detail list
|
||||
async function fetchPerson() {
|
||||
// showLoader();
|
||||
async function getData() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.person)
|
||||
.get(config.API.profileNewProfileByProfileId(profileId.value))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
let optionbloodGroups: DataOption[] = [];
|
||||
data.bloodGroups.map((r: any) => {
|
||||
optionbloodGroups.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.bloodOps = optionbloodGroups;
|
||||
OpsFilter.value.bloodOps = optionbloodGroups;
|
||||
|
||||
let optiongenders: DataOption[] = [];
|
||||
data.genders.map((r: any) => {
|
||||
optiongenders.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.genderOps = optiongenders;
|
||||
OpsFilter.value.genderOps = optiongenders;
|
||||
|
||||
let optionprefixs: DataOption[] = [];
|
||||
data.prefixs.map((r: any) => {
|
||||
optionprefixs.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.prefixOps = optionprefixs;
|
||||
OpsFilter.value.prefixOps = optionprefixs;
|
||||
|
||||
let optionrelationships: DataOption[] = [];
|
||||
data.relationships.map((r: any) => {
|
||||
optionrelationships.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.statusOps = optionrelationships;
|
||||
OpsFilter.value.statusOps = optionrelationships;
|
||||
|
||||
let optionreligions: DataOption[] = [];
|
||||
data.religions.map((r: any) => {
|
||||
optionreligions.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.religionOps = optionreligions;
|
||||
OpsFilter.value.religionOps = optionreligions;
|
||||
informaData.value = res.data.result;
|
||||
if (informaData.value) {
|
||||
id.value = informaData.value.id;
|
||||
age.value = calculateAge(informaData.value.birthDate);
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.catch((e: any) => {})
|
||||
.finally(() => {
|
||||
// hideLoader();
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function filterSelector(val: any, update: Function, refData: string) {
|
||||
switch (refData) {
|
||||
case "prefixOps":
|
||||
update(() => {
|
||||
Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "genderOps":
|
||||
update(() => {
|
||||
Ops.value.genderOps = OpsFilter.value.genderOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "bloodOps":
|
||||
update(() => {
|
||||
Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "statusOps":
|
||||
update(() => {
|
||||
Ops.value.statusOps = OpsFilter.value.statusOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "religionOps":
|
||||
update(() => {
|
||||
Ops.value.religionOps = OpsFilter.value.religionOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "employeeClassOps":
|
||||
update(() => {
|
||||
Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
case "employeeTypeOps":
|
||||
update(() => {
|
||||
Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
async function editData() {
|
||||
showLoader();
|
||||
await http
|
||||
.put(config.API.profileNewProfileById(id.value), {
|
||||
...formData,
|
||||
})
|
||||
.then((res) => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
getData(), (modal.value = false);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
function onClickOpenDialog() {
|
||||
if (!informaData.value) return;
|
||||
modal.value = true;
|
||||
|
||||
id.value = informaData.value.id;
|
||||
age.value = calculateAge(informaData.value.birthDate);
|
||||
formData.citizenId = informaData.value.citizenId;
|
||||
formData.prefix = informaData.value.prefix;
|
||||
formData.firstName = informaData.value.firstName;
|
||||
formData.lastName = informaData.value.lastName;
|
||||
formData.birthDate = informaData.value.birthDate;
|
||||
formData.genderId = informaData.value.genderId;
|
||||
formData.relationshipId = informaData.value.relationshipId;
|
||||
// formData.nationality = informaData.value.nationality;
|
||||
formData.ethnicity = informaData.value.ethnicity;
|
||||
formData.religionId = informaData.value.religionId;
|
||||
formData.bloodGroupId = informaData.value.bloodGroupId;
|
||||
formData.phone = informaData.value.phone;
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
editData();
|
||||
modal.value = false;
|
||||
},
|
||||
"ยืนยันการบันทึกข้อมูล",
|
||||
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
||||
);
|
||||
}
|
||||
|
||||
async function clickHistory() {
|
||||
modalHistory.value = true;
|
||||
// showLoader();
|
||||
// await http
|
||||
// .get(config.API.profileInforHisId(route.params.id.toString()))
|
||||
// .then((res) => {
|
||||
// let data = res.data.result;
|
||||
// rowsHistory.value = [];
|
||||
// data.map((e: RequestItemsHistoryObject) => {
|
||||
// rowsHistory.value.push({
|
||||
// citizenId: e.citizenId,
|
||||
// prefix: e.prefix,
|
||||
// firstName: e.firstName,
|
||||
// lastName: e.lastName,
|
||||
// birthDate: new Date(e.birthDate),
|
||||
// gender: e.gender,
|
||||
// relationship: e.relationship,
|
||||
// bloodGroup: e.bloodGroup,
|
||||
// nationality: e.nationality,
|
||||
// race: e.race,
|
||||
// religion: e.religion,
|
||||
// telephoneNumber: e.telephoneNumber,
|
||||
// employeeType:
|
||||
// e.employeeType == "gov"
|
||||
// ? "งบประมาณเงินอุดหนุนรัฐบาล"
|
||||
// : e.employeeType == "bkk"
|
||||
// ? "งบประมาณกรุงเทพมหานคร"
|
||||
// : "-",
|
||||
// employeeClass:
|
||||
// e.employeeClass == "perm"
|
||||
// ? "ลูกจ้างประจำ"
|
||||
// : e.employeeClass == "temp"
|
||||
// ? "ลูกจ้างชั่วคราว"
|
||||
// : "-",
|
||||
// createdFullName: e.createdFullName,
|
||||
// createdAt: new Date(e.createdAt),
|
||||
// });
|
||||
// });
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
}
|
||||
|
||||
async function calRetire(birth: Date) {
|
||||
const body = {
|
||||
birthDate: dateToISO(birth),
|
||||
};
|
||||
const dateBefore = ref<Date>(new Date());
|
||||
if (dateToISO(dateBefore.value) != dateToISO(birth)) {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.profileCalRetire, body)
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
informaData.value.age = data.age;
|
||||
informaData.value.birthDate = birth;
|
||||
changeRetireText(data.retireDate);
|
||||
dateBefore.value = birth;
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
|
||||
informaData.value.birthDate = dateBefore.value;
|
||||
// inputBirthDate.value = dateBefore.value;
|
||||
changeRetireText(date2Thai(retire));
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
myForm.value.validate().then(async (result: boolean) => {
|
||||
if (result) {
|
||||
// await saveData();
|
||||
modal.value = false;
|
||||
}
|
||||
});
|
||||
await http
|
||||
.get(config.API.profileNewProfileHisById(id.value))
|
||||
.then((res) => {
|
||||
rowsHistory.value = res.data.result;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => informaData.value.birthDate,
|
||||
(value) => {
|
||||
// const dateVal = convertDate(value);
|
||||
if (value) {
|
||||
calRetire(value);
|
||||
} else {
|
||||
informaData.value.age = "";
|
||||
() => formData.birthDate,
|
||||
(v) => {
|
||||
if (v) {
|
||||
age.value = calculateAge(v);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchPerson();
|
||||
await fetchData();
|
||||
await getData();
|
||||
store.genderOp.length === 0 ? await getGender() : "";
|
||||
store.relationshipOp.length === 0 ? await getRelationship() : "";
|
||||
store.religionOp.length === 0 ? await getReligion() : "";
|
||||
store.bloodGroupOp.length === 0 ? await getBloodGroup() : "";
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
|
|
@ -563,7 +368,7 @@ onMounted(async () => {
|
|||
round
|
||||
icon="mdi-pencil-outline"
|
||||
color="primary"
|
||||
@click="modal = true"
|
||||
@click="onClickOpenDialog"
|
||||
>
|
||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
|
|
@ -574,10 +379,10 @@ onMounted(async () => {
|
|||
</div>
|
||||
|
||||
<q-card bordered class="my-card bg-grey-1 q-pa-md">
|
||||
<div :class="$q.screen.gt.xs ? 'row' : 'column'">
|
||||
<div v-if="informaData" :class="$q.screen.gt.xs ? 'row' : 'column'">
|
||||
<!-- column 1 -->
|
||||
<div class="col-md-7 col-12 row">
|
||||
<div class="col-md-4 col-5 text-grey-6 text-weight-medium">
|
||||
<div class="col-5 text-grey-6 text-weight-medium">
|
||||
<div
|
||||
v-for="label in Object.keys(dataLabel).slice(0, 6)"
|
||||
class="q-py-xs"
|
||||
|
|
@ -586,47 +391,33 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
<!-- data -->
|
||||
<div class="col-md-8 col-7">
|
||||
<div class="col-7">
|
||||
<div class="q-py-xs">
|
||||
{{ informaData.cardid }}
|
||||
{{ informaData.citizenId }}
|
||||
</div>
|
||||
<div class="q-py-xs">
|
||||
{{
|
||||
`${informaData.prefix} ${informaData.firstname} ${informaData.lastname}`
|
||||
`${informaData.prefix} ${informaData.firstName} ${informaData.lastName}`
|
||||
}}
|
||||
</div>
|
||||
<div class="q-py-xs">
|
||||
{{ date2Thai(informaData.birthDate) }}
|
||||
</div>
|
||||
<div class="q-py-xs">
|
||||
{{ informaData.age ? informaData.age : "-" }}
|
||||
{{ age ? age : "-" }}
|
||||
</div>
|
||||
<div class="q-py-xs">
|
||||
{{
|
||||
informaData.genderId
|
||||
? (
|
||||
Ops.genderOps.find((r) => r.id === informaData.genderId) ||
|
||||
{}
|
||||
).name
|
||||
: "-"
|
||||
}}
|
||||
{{ informaData.gender ? informaData.gender.name : "-" }}
|
||||
</div>
|
||||
<div class="q-py-xs">
|
||||
{{
|
||||
informaData.statusId
|
||||
? (
|
||||
Ops.statusOps.find((r) => r.id === informaData.statusId) ||
|
||||
{}
|
||||
).name
|
||||
: "-"
|
||||
}}
|
||||
{{ informaData.relationship ? informaData.relationship.name : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- column 2 -->
|
||||
<div class="col-md-5 col-12 row">
|
||||
<div class="col-md-4 col-5 col text-grey-6 text-weight-medium">
|
||||
<div class="col-5 col text-grey-6 text-weight-medium">
|
||||
<div
|
||||
v-for="label in Object.keys(dataLabel).slice(6, 11)"
|
||||
class="q-py-xs"
|
||||
|
|
@ -635,7 +426,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
<!-- data -->
|
||||
<div class="col-md-8 col-7">
|
||||
<div class="col-7">
|
||||
<div class="q-py-xs">
|
||||
{{ informaData.nationality ? informaData.nationality : "-" }}
|
||||
</div>
|
||||
|
|
@ -643,26 +434,13 @@ onMounted(async () => {
|
|||
{{ informaData.ethnicity ? informaData.ethnicity : "-" }}
|
||||
</div>
|
||||
<div class="q-py-xs">
|
||||
{{
|
||||
informaData.religionId
|
||||
? (
|
||||
Ops.religionOps.find(
|
||||
(r) => r.id === informaData.religionId
|
||||
) || {}
|
||||
).name
|
||||
: "-"
|
||||
}}
|
||||
{{ informaData.religion ? informaData.religion.name : "-" }}
|
||||
</div>
|
||||
<div class="q-py-xs">
|
||||
{{
|
||||
informaData.bloodId
|
||||
? (Ops.bloodOps.find((b) => b.id === informaData.bloodId) || {})
|
||||
.name
|
||||
: "-"
|
||||
}}
|
||||
{{ informaData.bloodGroup ? informaData.bloodGroup.name : "-" }}
|
||||
</div>
|
||||
<div class="q-py-xs">
|
||||
{{ informaData.tel ? informaData.tel : "-" }}
|
||||
{{ informaData.phone ? informaData.phone : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -672,7 +450,7 @@ onMounted(async () => {
|
|||
<!-- Edit Dialog -->
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="width: 600px">
|
||||
<q-form ref="myForm" @submit="onSubmit">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<DialogHeader
|
||||
tittle="แก้ไขประวัติส่วนตัว"
|
||||
:close="() => (modal = false)"
|
||||
|
|
@ -688,7 +466,8 @@ onMounted(async () => {
|
|||
hide-bottom-space
|
||||
maxlength="13"
|
||||
mask="#############"
|
||||
v-model="informaData.cardid"
|
||||
v-model="formData.citizenId"
|
||||
class="inputgreen"
|
||||
:label="dataLabel.citizenId"
|
||||
:rules="[
|
||||
(val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
|
||||
|
|
@ -702,20 +481,18 @@ onMounted(async () => {
|
|||
<q-select
|
||||
dense
|
||||
outlined
|
||||
use-input
|
||||
lazy-rules
|
||||
emit-value
|
||||
map-options
|
||||
hide-bottom-space
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
input-debounce="0"
|
||||
v-model="informaData.prefixId"
|
||||
:options="Ops.prefixOps"
|
||||
new-value-mode="add-unique"
|
||||
v-model="formData.prefix"
|
||||
class="inputgreen"
|
||||
:options="store.prefixOp"
|
||||
:label="dataLabel.prefix"
|
||||
:rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
|
||||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
|
|
@ -724,7 +501,8 @@ onMounted(async () => {
|
|||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
v-model="informaData.firstname"
|
||||
v-model="formData.firstName"
|
||||
class="inputgreen"
|
||||
:label="dataLabel.firstName"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
||||
/>
|
||||
|
|
@ -735,7 +513,8 @@ onMounted(async () => {
|
|||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
v-model="informaData.lastname"
|
||||
v-model="formData.lastName"
|
||||
class="inputgreen"
|
||||
:label="dataLabel.lastName"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
||||
/>
|
||||
|
|
@ -746,7 +525,7 @@ onMounted(async () => {
|
|||
borderless
|
||||
week-start="0"
|
||||
menu-class-name="modalfix"
|
||||
v-model="informaData.birthDate"
|
||||
v-model="formData.birthDate"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
|
|
@ -762,9 +541,10 @@ onMounted(async () => {
|
|||
outlined
|
||||
dense
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
:model-value="
|
||||
informaData.birthDate != null
|
||||
? date2Thai(informaData.birthDate)
|
||||
formData.birthDate != null
|
||||
? date2Thai(formData.birthDate)
|
||||
: null
|
||||
"
|
||||
:label="dataLabel.birthDate"
|
||||
|
|
@ -791,7 +571,8 @@ onMounted(async () => {
|
|||
lazy-rules
|
||||
hide-bottom-space
|
||||
readonly
|
||||
v-model="informaData.age"
|
||||
class="inputgreen"
|
||||
v-model="age"
|
||||
:label="dataLabel.age"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -804,15 +585,13 @@ onMounted(async () => {
|
|||
emit-value
|
||||
map-options
|
||||
hide-bottom-space
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
input-debounce="0"
|
||||
v-model="informaData.genderId"
|
||||
:options="Ops.genderOps"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
v-model="formData.genderId"
|
||||
class="inputgreen"
|
||||
:options="store.genderOp"
|
||||
:label="dataLabel.gender"
|
||||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
|
|
@ -827,12 +606,10 @@ onMounted(async () => {
|
|||
option-value="id"
|
||||
option-label="name"
|
||||
input-debounce="0"
|
||||
v-model="informaData.statusId"
|
||||
:options="Ops.statusOps"
|
||||
class="inputgreen"
|
||||
v-model="formData.relationshipId"
|
||||
:options="store.relationshipOp"
|
||||
:label="dataLabel.relationship"
|
||||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
|
|
@ -841,7 +618,8 @@ onMounted(async () => {
|
|||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
v-model="informaData.nationality"
|
||||
class="inputgreen"
|
||||
v-model="nationality"
|
||||
:label="dataLabel.nationality"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -851,8 +629,9 @@ onMounted(async () => {
|
|||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
v-model="informaData.ethnicity"
|
||||
:label="dataLabel.race"
|
||||
class="inputgreen"
|
||||
v-model="formData.ethnicity"
|
||||
:label="dataLabel.ethnicity"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
|
|
@ -867,12 +646,10 @@ onMounted(async () => {
|
|||
option-value="id"
|
||||
option-label="name"
|
||||
input-debounce="0"
|
||||
v-model="informaData.religionId"
|
||||
:options="Ops.religionOps"
|
||||
v-model="formData.religionId"
|
||||
class="inputgreen"
|
||||
:options="store.religionOp"
|
||||
:label="dataLabel.religion"
|
||||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
|
|
@ -887,12 +664,10 @@ onMounted(async () => {
|
|||
option-value="id"
|
||||
option-label="name"
|
||||
input-debounce="0"
|
||||
v-model="informaData.bloodId"
|
||||
:options="Ops.bloodOps"
|
||||
v-model="formData.bloodGroupId"
|
||||
class="inputgreen"
|
||||
:options="store.bloodGroupOp"
|
||||
:label="dataLabel.bloodGroup"
|
||||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
|
|
@ -902,8 +677,9 @@ onMounted(async () => {
|
|||
lazy-rules
|
||||
hide-bottom-space
|
||||
mask="##########"
|
||||
v-model="informaData.tel"
|
||||
:label="dataLabel.telephoneNumber"
|
||||
class="inputgreen"
|
||||
v-model="formData.phone"
|
||||
:label="dataLabel.phone"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -939,14 +715,8 @@ onMounted(async () => {
|
|||
<template #columns="props">
|
||||
<q-tr :props="props">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div
|
||||
v-if="col.name == 'birthDate' || col.name == 'createdAt'"
|
||||
class="table_ellipsis"
|
||||
>
|
||||
{{ date2Thai(col.value) }}
|
||||
</div>
|
||||
<div v-else class="table_ellipsis">
|
||||
{{ col.value }}
|
||||
<div class="table_ellipsis">
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRoute } from "vue-router";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { DataOption2 } from "@/modules/04_registryNew/interface/index/Main";
|
||||
|
|
@ -14,9 +17,20 @@ import { useCounterMixin } from "@/stores/mixin";
|
|||
import { useSalaryDataStore } from "@/modules/04_registryNew/stores/salary";
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const profileId = ref<string>(
|
||||
route.params.id ? route.params.id.toString() : ""
|
||||
);
|
||||
const store = useSalaryDataStore();
|
||||
const { date2Thai, dialogConfirm, showLoader, hideLoader, messageError } =
|
||||
useCounterMixin();
|
||||
const {
|
||||
date2Thai,
|
||||
dialogConfirm,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
messageError,
|
||||
success,
|
||||
} = useCounterMixin();
|
||||
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "date",
|
||||
|
|
@ -132,7 +146,6 @@ const visibleColumns = ref<string[]>([
|
|||
"salaryRef",
|
||||
"refCommandNo",
|
||||
]);
|
||||
|
||||
const formFilter = reactive({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
|
|
@ -227,8 +240,28 @@ const posTypeOptions = ref<DataOption2[]>(store.optionTemplatePos);
|
|||
const posLevelOption = ref<DataOption2[]>(store.optionTemplatePos);
|
||||
const docOption = ref<DataOption2[]>(store.optionTemplateDoc);
|
||||
|
||||
function fetchListSalary() {
|
||||
showLoader();
|
||||
http
|
||||
.get(
|
||||
config.API.profileSalaryNewById("59134ef9-9e62-41d0-aac5-339be727f2b1")
|
||||
)
|
||||
.then((res) => {
|
||||
// console.log(res);
|
||||
rows.value = res.data.result;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function onClickOpenDialog(statusEdit: boolean = false, data: any = []) {
|
||||
isStatusEdit.value = statusEdit;
|
||||
modalDialogSalary.value = true;
|
||||
|
||||
formDataSalary.date = statusEdit ? data.date : null;
|
||||
formDataSalary.posNo = statusEdit ? data.posNo : "";
|
||||
// formDataSalary.templatePos = statusEdit ? data.templatePos : "";
|
||||
|
|
@ -249,11 +282,12 @@ function onClickOpenDialog(statusEdit: boolean = false, data: any = []) {
|
|||
// formDataSalary.templateDoc = statusEdit ? data.templateDoc : "";
|
||||
formDataSalary.doc = statusEdit ? data.salaryRef : "";
|
||||
}
|
||||
|
||||
function onClickCloseDialog() {
|
||||
modalDialogSalary.value = false;
|
||||
}
|
||||
|
||||
const filterSelector = (val: any, update: Function, filtername: string) => {
|
||||
function filterSelector(val: any, update: Function, filtername: string) {
|
||||
switch (filtername) {
|
||||
case "pos":
|
||||
update(() => {
|
||||
|
|
@ -294,7 +328,8 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
|
|||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function updatePos(val: string) {
|
||||
formDataSalary.position = val;
|
||||
}
|
||||
|
|
@ -316,23 +351,38 @@ function onSubmit() {
|
|||
}
|
||||
if (hasError.every((result) => result === true)) {
|
||||
dialogConfirm($q, () => {
|
||||
onClickCloseDialog();
|
||||
submit();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
try {
|
||||
const url = isStatusEdit.value
|
||||
? config.API.profileSalaryNewById("12312")
|
||||
: config.API.profileSalaryNew;
|
||||
const method = isStatusEdit.value ? "put" : "post";
|
||||
await http[method](url, formDataSalary);
|
||||
fetchListSalary();
|
||||
onClickCloseDialog();
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
} catch (e) {
|
||||
messageError($q, e);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
}
|
||||
|
||||
const modalHistory = ref<boolean>(false);
|
||||
function ocClikcHistory() {
|
||||
modalHistory.value = true;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchListSalary();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<!-- <div class="row items-center q-gutter-sm">
|
||||
<div class="toptitle text-dark row items-center q-py-xs">
|
||||
ตำแหน่งเงินเดือน
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<q-toolbar style="padding: 0px" class="text-primary">
|
||||
<q-btn flat round dense icon="add" @click="onClickOpenDialog()">
|
||||
<q-tooltip>เพิ่ม</q-tooltip>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue