597 lines
19 KiB
Vue
597 lines
19 KiB
Vue
<script setup lang="ts">
|
|
import { ref, reactive, onMounted } from "vue";
|
|
import { useQuasar, type QTableProps } from "quasar";
|
|
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useDataStore } from "@/stores/data";
|
|
|
|
import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
|
|
|
|
import type {
|
|
ProfileAppointment,
|
|
FormDataGovernment,
|
|
} from "@/modules/10_registry/interface/index/Main";
|
|
//history dialog
|
|
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
|
|
|
|
const link = ref<string>("");
|
|
const $q = useQuasar();
|
|
const mixin = useCounterMixin();
|
|
const dataPerson = useDataStore()
|
|
const checkType = ref<boolean>(dataPerson.officerType == 'OFFICER' ? true:false)
|
|
const store = useRegistryInFormationStore();
|
|
const { showLoader, hideLoader, messageError, date2Thai, dateToISO } = mixin;
|
|
|
|
const rowsHistory = ref<ProfileAppointment[]>([]);
|
|
const rowsHistoryData = ref<ProfileAppointment[]>([]);
|
|
const modalHistory = ref<boolean>(false);
|
|
|
|
/** ตัวแปรข้อมูล */
|
|
const formData = reactive<FormDataGovernment>({
|
|
org: "",
|
|
positionField: "",
|
|
position: "",
|
|
posLevel: null,
|
|
posMasterNo: "",
|
|
posType: null,
|
|
posExecutive: "",
|
|
positionArea: "",
|
|
positionExecutiveField: "",
|
|
dateLeave: null,
|
|
dateRetireLaw: null,
|
|
govAge: {
|
|
year: 0,
|
|
month: 0,
|
|
day: 0,
|
|
},
|
|
dateAppoint: null,
|
|
dateStart: null,
|
|
govAgeAbsent: 0,
|
|
govAgePlus: 0,
|
|
reasonSameDate: "",
|
|
});
|
|
|
|
const visibleColumnsHistory = ref<string[]>([
|
|
"oc",
|
|
"position",
|
|
"positionPathSide",
|
|
"posNo",
|
|
"positionLine",
|
|
"positionType",
|
|
"positionLevel",
|
|
"positionExecutive",
|
|
"positionExecutiveSide",
|
|
"dateAppoint",
|
|
"dateStart",
|
|
"retireDate",
|
|
"govAge",
|
|
"govAgeAbsent",
|
|
"govAgePlus",
|
|
"reasonSameDate",
|
|
"lastUpdateFullName",
|
|
"lastUpdatedAt",
|
|
]);
|
|
|
|
const columnsHistory = ref<QTableProps["columns"]>([
|
|
{
|
|
name: "dateAppoint",
|
|
align: "left",
|
|
label: "วันที่บรรจุ",
|
|
sortable: true,
|
|
field: "dateAppoint",
|
|
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: "dateStart",
|
|
align: "left",
|
|
label: "เริ่มปฎิบัติราชการ",
|
|
sortable: true,
|
|
field: "dateStart",
|
|
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: "reasonSameDate",
|
|
align: "left",
|
|
label: "เหตุผลกรณีไม่ตรงวัน",
|
|
sortable: true,
|
|
field: "reasonSameDate",
|
|
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, false, true),
|
|
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: "oc",
|
|
// align: "left",
|
|
// label: "สังกัด",
|
|
// sortable: true,
|
|
// field: "oc",
|
|
// headerStyle: "font-size: 14px",
|
|
// style: "font-size: 14px",
|
|
// sort: (a: string, b: string) =>
|
|
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
// },
|
|
// {
|
|
// name: "positionPathSide",
|
|
// align: "left",
|
|
// label: "ตำแหน่ง",
|
|
// sortable: true,
|
|
// field: "positionPathSide",
|
|
// headerStyle: "font-size: 14px",
|
|
// style: "font-size: 14px",
|
|
// sort: (a: string, b: string) =>
|
|
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
// },
|
|
// {
|
|
// name: "position",
|
|
// align: "left",
|
|
// label: "ด้าน/สาขา",
|
|
// sortable: true,
|
|
// field: "position",
|
|
// headerStyle: "font-size: 14px",
|
|
// style: "font-size: 14px",
|
|
// sort: (a: string, b: string) =>
|
|
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
// },
|
|
// {
|
|
// name: "posNo",
|
|
// align: "left",
|
|
// label: "ตำแหน่งเลขที่",
|
|
// sortable: true,
|
|
// field: "posNo",
|
|
// headerStyle: "font-size: 14px",
|
|
// style: "font-size: 14px",
|
|
// sort: (a: string, b: string) =>
|
|
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
// },
|
|
// {
|
|
// name: "positionLine",
|
|
// align: "left",
|
|
// label: "สายงาน",
|
|
// sortable: true,
|
|
// field: "positionLine",
|
|
// headerStyle: "font-size: 14px",
|
|
// style: "font-size: 14px",
|
|
// sort: (a: string, b: string) =>
|
|
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
// },
|
|
// {
|
|
// name: "positionType",
|
|
// align: "left",
|
|
// label: "ประเภท",
|
|
// sortable: true,
|
|
// field: "positionType",
|
|
// headerStyle: "font-size: 14px",
|
|
// style: "font-size: 14px",
|
|
// sort: (a: string, b: string) =>
|
|
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
// },
|
|
// {
|
|
// name: "positionLevel",
|
|
// align: "left",
|
|
// label: "ระดับ",
|
|
// sortable: true,
|
|
// field: "positionLevel",
|
|
// headerStyle: "font-size: 14px",
|
|
// style: "font-size: 14px",
|
|
// sort: (a: string, b: string) =>
|
|
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
// },
|
|
// {
|
|
// name: "positionExecutive",
|
|
// align: "left",
|
|
// label: "ตำแหน่งทางการบริหาร",
|
|
// sortable: true,
|
|
// field: "positionExecutive",
|
|
// headerStyle: "font-size: 14px",
|
|
// style: "font-size: 14px",
|
|
// sort: (a: string, b: string) =>
|
|
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
// },
|
|
// {
|
|
// name: "positionExecutiveSide",
|
|
// align: "left",
|
|
// label: "ด้านทางการบริหาร",
|
|
// sortable: true,
|
|
// field: "positionExecutiveSide",
|
|
// headerStyle: "font-size: 14px",
|
|
// style: "font-size: 14px",
|
|
// sort: (a: string, b: string) =>
|
|
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
// },
|
|
// {
|
|
// name: "dateAppoint",
|
|
// align: "left",
|
|
// label: "วันที่บรรจุ",
|
|
// sortable: true,
|
|
// field: "dateAppoint",
|
|
// 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: "dateStart",
|
|
// align: "left",
|
|
// label: "เริ่มปฎิบัติราชการ",
|
|
// sortable: true,
|
|
// field: "dateStart",
|
|
// 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: "retireDate",
|
|
// align: "left",
|
|
// label: "วันเกษียณอายุ",
|
|
// sortable: true,
|
|
// field: "retireDate",
|
|
// 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: "govAge",
|
|
// align: "left",
|
|
// label: "อายุราชการ",
|
|
// sortable: true,
|
|
// field: "govAge",
|
|
// headerStyle: "font-size: 14px",
|
|
// style: "font-size: 14px",
|
|
// sort: (a: string, b: string) =>
|
|
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
// },
|
|
// {
|
|
// name: "govAgeAbsent",
|
|
// align: "left",
|
|
// label: "ขาดราชการ",
|
|
// sortable: true,
|
|
// field: "govAgeAbsent",
|
|
// headerStyle: "font-size: 14px",
|
|
// style: "font-size: 14px",
|
|
// sort: (a: string, b: string) =>
|
|
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
// },
|
|
// {
|
|
// name: "govAgePlus",
|
|
// align: "left",
|
|
// label: "อายุราชการเกื้อกูล",
|
|
// sortable: true,
|
|
// field: "govAgePlus",
|
|
// headerStyle: "font-size: 14px",
|
|
// style: "font-size: 14px",
|
|
// sort: (a: string, b: string) =>
|
|
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
// },
|
|
// {
|
|
// name: "reasonSameDate",
|
|
// align: "left",
|
|
// label: "เหตุผลกรณีไม่ตรงวัน",
|
|
// sortable: true,
|
|
// field: "reasonSameDate",
|
|
// 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() {
|
|
modalHistory.value = true;
|
|
}
|
|
|
|
/** get data */
|
|
function getData() {
|
|
showLoader();
|
|
http
|
|
.get(config.API.dataUserGovernmentByType(link.value))
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
formData.org = data.org;
|
|
formData.positionField = data.positionField;
|
|
formData.position = data.position;
|
|
formData.posLevel = data.posLevel;
|
|
formData.posMasterNo = data.posMasterNo;
|
|
formData.posType = data.posType;
|
|
formData.posExecutive = data.posExecutive;
|
|
formData.positionArea = data.positionArea;
|
|
formData.positionExecutiveField = data.positionExecutiveField;
|
|
formData.dateLeave = data.dateLeave;
|
|
formData.dateRetireLaw = data.dateRetireLaw;
|
|
|
|
formData.govAge = data.govAge;
|
|
formData.dateAppoint = data.dateAppoint;
|
|
formData.dateStart = data.dateStart;
|
|
formData.govAgeAbsent = data.govAgeAbsent;
|
|
formData.govAgePlus = data.govAgePlus;
|
|
formData.reasonSameDate = data.reasonSameDate;
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/** get history */
|
|
function getHistory() {
|
|
const url =
|
|
dataPerson.officerType == 'OFFICER'
|
|
? config.API.dataUserGovernmentHistory("")
|
|
: config.API.dataUserGovernmentHistory("-employee");
|
|
showLoader();
|
|
http
|
|
.get(url)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
rowsHistory.value = data;
|
|
rowsHistoryData.value = data;
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
onMounted(async() => {
|
|
link.value = await dataPerson.getProFileType();
|
|
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 q-col-gutter-y-sm">
|
|
<div class="col-12 col-sm-12 col-md-6">
|
|
<div class="row q-col-gutter-y-sm">
|
|
<div class="col-5 text-grey-6 text-weight-medium">สังกัด</div>
|
|
<div class="col-7">
|
|
{{ formData.org ? formData.org : "-" }}
|
|
</div>
|
|
<div class="col-5 text-grey-6 text-weight-medium">
|
|
{{ checkType ? 'ตำแหน่งในสายงาน':'ตำแหน่ง' }}
|
|
</div>
|
|
<div class="col-7">
|
|
{{ formData.position ? formData.position : "-" }}
|
|
</div>
|
|
|
|
<div class="col-5 text-grey-6 text-weight-medium">
|
|
ตำแหน่งเลขที่
|
|
</div>
|
|
<div class="col-7">
|
|
{{ formData.posMasterNo ? formData.posMasterNo : "-" }}
|
|
</div>
|
|
<div
|
|
v-if="checkType"
|
|
class="col-5 text-grey-6 text-weight-medium"
|
|
>
|
|
ตำแหน่งทางการบริหาร
|
|
</div>
|
|
<div v-if="checkType" class="col-7">
|
|
{{ formData.posExecutive ? formData.posExecutive : "-" }}
|
|
</div>
|
|
<div
|
|
v-if="checkType"
|
|
class="col-5 text-grey-6 text-weight-medium"
|
|
>
|
|
ด้านทางการบริหาร
|
|
</div>
|
|
<div v-if="checkType" class="col-7">
|
|
{{
|
|
formData.positionExecutiveField
|
|
? formData.positionExecutiveField
|
|
: "-"
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-sm-12 col-md-6">
|
|
<div class="row q-col-gutter-y-sm">
|
|
<div
|
|
v-if="checkType"
|
|
class="col-5 text-grey-6 text-weight-medium"
|
|
>
|
|
สายงาน
|
|
</div>
|
|
<div v-if="checkType" class="col-7">
|
|
{{ formData.positionField ? formData.positionField : "-" }}
|
|
</div>
|
|
<div class="col-5 text-grey-6 text-weight-medium">
|
|
{{
|
|
checkType ? "ตำแหน่งประเภท" : "กลุ่มงาน"
|
|
}}
|
|
</div>
|
|
<div class="col-7">
|
|
{{ formData.posType ? formData.posType : "-" }}
|
|
</div>
|
|
<div class="col-5 text-grey-6 text-weight-medium">
|
|
{{ checkType ? "ระดับ" : "ระดับชั้นงาน" }}
|
|
</div>
|
|
<div class="col-7">
|
|
{{ formData.posLevel ? formData.posLevel : "-" }}
|
|
</div>
|
|
<div class="col-5 text-grey-6 text-weight-medium">ด้าน/สาขา</div>
|
|
<div class="col-7">
|
|
{{ formData.positionArea ? formData.positionArea : "-" }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<q-separator class="q-my-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.dateAppoint ? date2Thai(formData.dateAppoint) : "-" }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-5 text-grey-6 text-weight-medium">
|
|
วันที่เริ่มปฏิบัติราชการ
|
|
</div>
|
|
<div class="col-7">
|
|
{{ formData.dateStart ? date2Thai(formData.dateStart) : "-" }}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="dateToISO(formData.dateAppoint as Date) !== dateToISO(formData.dateStart as Date)"
|
|
class="row"
|
|
>
|
|
<div class="col-5 text-grey-6 text-weight-medium">
|
|
เหตุผลที่วันที่ไม่ตรงกัน
|
|
</div>
|
|
<div class="col-7">
|
|
{{ formData.reasonSameDate ? formData.reasonSameDate : "-" }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-5 text-grey-6 text-weight-medium">
|
|
วันครบเกษียณอายุ
|
|
</div>
|
|
<div class="col-7">
|
|
{{ formData.dateLeave ? date2Thai(formData.dateLeave) : "-" }}
|
|
</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.govAge
|
|
? `${formData.govAge.year} ปี ${formData.govAge.month} เดือน ${formData.govAge.year} วัน`
|
|
: "-"
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-5 text-grey-6 text-weight-medium">ขาดราชการ</div>
|
|
<div class="col-7">
|
|
{{ formData.govAgeAbsent ? formData.govAgeAbsent : 0 }}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-5 text-grey-6 text-weight-medium">
|
|
อายุราชการเกื้อกูล
|
|
</div>
|
|
<div class="col-7">
|
|
{{ formData.govAgePlus ? formData.govAgePlus : 0 }}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-5 text-grey-6 text-weight-medium">
|
|
วันที่เกษียณอายุราชการตามกฏหมาย
|
|
</div>
|
|
<div class="col-7">
|
|
{{
|
|
formData.dateRetireLaw ? date2Thai(formData.dateRetireLaw) : "-"
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
|
|
<DialogHistory
|
|
v-model:modal="modalHistory"
|
|
:title="'ประวัติแก้ไขข้อมูลราชการ'"
|
|
:getData="getHistory"
|
|
:rows="rowsHistory"
|
|
:rows-data="rowsHistoryData"
|
|
:visibleColumns="visibleColumnsHistory"
|
|
:columns="columnsHistory"
|
|
/>
|
|
</template>
|