hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Refactoring code module 04_registryPerson

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-09-18 17:24:21 +07:00
parent 1164d79122
commit eeb92dfb5d
46 changed files with 1935 additions and 2230 deletions
Download patch file Download diff file Expand all files Collapse all files

389
src/modules/04_registryPerson/components/DialogAddData.vue
View file

@ -1,389 +0,0 @@
<script setup lang="ts">
import { ref, onMounted, watch, reactive } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
import type { DataType } from "@/modules/04_registryPerson/interface/response/Main";
import type {
FormAddPerson,
MyObjectRef,
} from "@/modules/04_registryPerson/interface/request/Main";
import { useProfileDataStore } from "@/modules/04_registryPerson/stores/profile";
import DialogHeader from "@/components/DialogHeader.vue";
/** importStore*/
import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
import { useCounterMixin } from "@/stores/mixin";
const profileStore = useProfileDataStore();
const $q = useQuasar();
const store = useRegistryNewDataStore();
const {
dialogConfirm,
success,
messageError,
hideLoader,
dialogMessageNotify,
date2Thai,
} = useCounterMixin();
const { calculateAge } = profileStore;
const modal = defineModel<boolean>("modal", { required: true });
const empType = defineModel<string>("empType", { required: true });
const props = defineProps({
fetchData: { type: Function },
fetchType: { type: Function },
});
const prefixOps = ref<DataOption[]>([]);
const rankOps = ref<DataOption[]>([]);
const levelOps = ref<DataType[]>([]);
const age = ref<string | null>("");
const formData = reactive<FormAddPerson>({
prefix: "",
firstName: "",
lastName: "",
citizenId: "",
position: "",
posTypeId: "",
posLevelId: "",
rank: "",
birthDate: null,
});
function fetchPrefix() {
http
.get(config.API.orgPrefix)
.then((res) => {
prefixOps.value = res.data.result.map((v: any) => ({
id: v.name,
name: v.name,
}));
})
.catch((err) => {
messageError($q, err);
});
}
function fetchRank() {
http
.get(config.API.orgRank)
.then((res) => {
rankOps.value = res.data.result.map((v: any) => ({
id: v.name,
name: v.name,
}));
})
.catch((err) => {
messageError($q, err);
});
}
/**
* function ตรวจสอบเลขประจำตัวประชาชน
* @param citizenId เลขประจำตัวประชาชน
*/
function changeCardID(citizenId: string | number | null) {
if (citizenId != null && typeof citizenId == "string") {
if (citizenId.length == 13 && citizenId) {
http
.put(config.API.profileNewCitizenId(citizenId), {
citizenId: citizenId,
})
.then(() => {})
.catch((err) => {
if (err.response.data.status === 500) {
dialogMessageNotify($q, err.response.data.message);
} else {
messageError($q, err);
}
});
}
}
}
function fetchLevel(id: string) {
const listLevel = store.posTypeMain.find((e: DataType) => e.id === id);
levelOps.value = listLevel?.posLevels;
const checkLevel = levelOps.value.filter(
(e: DataType) => e.id === formData.posLevelId
);
if (checkLevel.length === 0) {
formData.posLevelId = "";
}
}
function closeDialog() {
modal.value = false;
clearFormData();
}
const calculateMaxDate = () => {
const today = new Date();
today.setFullYear(today.getFullYear() - 18);
return today;
};
function clearFormData() {
formData.prefix = "";
formData.firstName = "";
formData.lastName = "";
formData.citizenId = "";
formData.position = "";
formData.posTypeId = "";
formData.posLevelId = "";
formData.rank = "";
age.value = "";
formData.birthDate = null;
}
async function onSubmit() {
dialogConfirm($q, async () => {
const type = empType.value !== "officer" ? "-employee" : "";
await http
.post(config.API.registryNew(type), formData)
.then(() => {
success($q, "บันทึกข้อมูลสำเร็จ");
props.fetchData?.();
closeDialog();
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});
}
watch(
() => modal.value,
() => {
if (modal.value) {
fetchPrefix();
fetchRank();
props.fetchType?.();
}
}
);
watch(
() => formData.birthDate,
(v) => {
if (v) {
age.value = calculateAge(v);
}
}
);
</script>
<template>
<q-dialog v-model="modal" persistent>
<q-card style="min-width: 350px">
<q-form @submit.prevent @validation-success="onSubmit()" greedy>
<DialogHeader tittle="เพิ่มข้อมูล" :close="closeDialog" />
<q-separator />
<q-card-section class="q-pa-md q-col-gutter-md">
<div class="row q-gutter-sm">
<div class="col">
<q-select
bg-color="white"
v-model="formData.prefix"
label="คำนำหน้าชื่อ"
outlined
dense
lazy-rules
:options="prefixOps"
option-label="name"
option-value="id"
map-options
hide-bottom-space
:rules="[
(val) => {
return val.length > 0 || 'กรุณาเลือกคำนำหน้าชื่อ';
},
]"
emit-value
/>
</div>
<div class="col">
<q-select
bg-color="white"
v-model="formData.rank"
label="ยศ"
outlined
dense
:options="rankOps"
option-label="name"
option-value="id"
map-options
hide-bottom-space
emit-value
/>
</div>
</div>
<q-input
bg-color="white"
outlined
v-model="formData.firstName"
label="ชื่อ"
dense
lazy-rules
borderless
:rules="[(val) => val.length > 0 || 'กรุณากรอกชื่อ']"
hide-bottom-space
/>
<q-input
bg-color="white"
outlined
v-model="formData.lastName"
label="นามสกุล"
dense
lazy-rules
borderless
:rules="[(val) => val.length > 0 || 'กรุณากรอกนามสกุล']"
hide-bottom-space
/>
<q-input
bg-color="white"
outlined
v-model="formData.citizenId"
label="เลขประจำตัวประชาชน"
dense
lazy-rules
borderless
:rules="[
(val: string) => !!val || `${'กรุณากรอกเลขประจำตัวประชาชน'}`,
(val: string) =>
val.length >= 13 ||
`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
]"
maxlength="13"
hide-bottom-space
mask="#############"
@update:model-value="changeCardID"
/>
<div class="row q-col-gutter-sm">
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
autoApply
borderless
week-start="0"
:max-date="calculateMaxDate()"
:enableTimePicker="false"
menu-class-name="modalfix"
v-model="formData.birthDate"
:locale="'th'"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
for="inputDatereceive"
outlined
dense
hide-bottom-space
class="inputgreen"
:model-value="
formData.birthDate != null
? date2Thai(formData.birthDate)
: null
"
label="วัน/เดือน/ปี เกิด"
:rules="[
(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
color="primary"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
dense
outlined
lazy-rules
hide-bottom-space
readonly
class="inputgreen"
v-model="age"
label="อายุ"
/>
</div>
</div>
<q-input
bg-color="white"
outlined
v-model="formData.position"
label="ตำแหน่งในสายงาน"
dense
lazy-rules
borderless
:rules="[(val) => val.length > 0 || 'กรุณากรอกตำแหน่ง']"
hide-bottom-space
/>
<q-select
bg-color="white"
v-model="formData.posTypeId"
label="ตำแหน่งประเภท"
outlined
:options="store.posTypeOps"
dense
options-cover
map-options
emit-value
option-label="name"
option-value="id"
hide-bottom-space
:rules="[(val) => !!val || 'กรุณาเลือกตำแหน่งประเภท']"
@update:model-value="fetchLevel"
/>
<q-select
bg-color="white"
v-model="formData.posLevelId"
label="ระดับ"
:options="levelOps"
outlined
dense
map-options
emit-value
option-label="posLevelName"
option-value="id"
options-cover
hide-bottom-space
:rules="[(val) => !!val || 'กรุณาเลือกระดับ']"
/>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn
id="onSubmit"
type="submit"
label="บันทึก"
color="public"
class="q-px-md"
>
<q-tooltip>บันทึกข้อมูล</q-tooltip>
</q-btn>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<style scoped></style>

11
src/modules/04_registryPerson/components/DialogHistory.vue
View file

@ -1,9 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
/** /**
* importType* * importType*
@ -21,11 +23,6 @@ import type {
*/ */
import DialogHeader from "@/components/DialogHeader.vue"; import DialogHeader from "@/components/DialogHeader.vue";
/**
* importStore
*/
import { useCounterMixin } from "@/stores/mixin";
/** /**
* use * use
*/ */
@ -37,12 +34,12 @@ const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
/** /**
* props * props
*/ */
const modal = defineModel<boolean>("modal", { required: true }); const modal = defineModel<boolean>("modal", { required: true }); //แสดง popup ประวัติถือครองตำแหน่ง
/** /**
* ตัวแปร * ตัวแปร
*/ */
const employeeClass = ref<string>(""); const employeeClass = ref<string>(""); //ประเภทข้า่รายการ
const typeKeyword = ref<string>(""); const typeKeyword = ref<string>("");
const Keyword = ref<string>(""); const Keyword = ref<string>("");
const positionKeyword = ref<string>(""); const positionKeyword = ref<string>("");

37
src/modules/04_registryPerson/components/TableView.vue
View file

@ -1,7 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch } from "vue"; import { ref, watch } from "vue";
import { checkPermission } from "@/utils/permissions"; import { checkPermission } from "@/utils/permissions";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
/** /**
*importType *importType
@ -14,10 +16,6 @@ import type { FormFilter } from "@/modules/04_registryPerson/interface/request/M
*/ */
import DialogHistory from "@/modules/04_registryPerson/components/DialogHistory.vue"; import DialogHistory from "@/modules/04_registryPerson/components/DialogHistory.vue";
/**
* importStore
*/
import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
/** /**
* use * use
*/ */
@ -27,10 +25,10 @@ const router = useRouter();
/** /**
* props * props
*/ */
const formFilter = defineModel<FormFilter>("formFilter", { required: true }); const formFilter = defineModel<FormFilter>("formFilter", { required: true }); //ข้อมูลการค้นหา
const maxPage = defineModel<Number>("maxPage", { required: true }); const maxPage = defineModel<Number>("maxPage", { required: true }); //จำนวนหน้าทั้งหมด
const empType = defineModel<string>("empType", { required: true }); const empType = defineModel<string>("empType", { required: true }); //ประเภท ข้ารายการ,ลูกจ้าง
const isFilter = defineModel<boolean>("isFilter", { required: true }); const isFilter = defineModel<boolean>("isFilter", { required: true }); //แสดงการค้นหา
const props = defineProps({ const props = defineProps({
rows: { type: Array }, rows: { type: Array },
fetchData: { type: Function }, fetchData: { type: Function },
@ -207,6 +205,11 @@ function redirectToPagePetition() {
router.push(`/registry-officer/request-edit`); router.push(`/registry-officer/request-edit`);
} }
/**
* ดูการเปลี่ยนแปลงของ formFilter.value.pageSize
*
* เมื่อมีการเปลี่ยนแปลงจำทำการดึงข้อมูลรายการทะเบียนประวัติใหม่ตามจำนวน formFilter.value.pageSize
*/
watch( watch(
() => formFilter.value.pageSize, () => formFilter.value.pageSize,
() => { () => {
@ -294,6 +297,7 @@ watch(
</q-btn-toggle> </q-btn-toggle>
</div> </div>
</div> </div>
<d-table <d-table
ref="table" ref="table"
row-key="id" row-key="id"
@ -478,15 +482,6 @@ watch(
</q-card-section> </q-card-section>
</q-card> </q-card>
</q-card-section> </q-card-section>
<!-- <q-separator inset v-if="checkPermission($route)?.attrIsGet" />
<q-btn
v-if="checkPermission($route)?.attrIsGet"
flat
color="black"
label="ดูเพิ่มเติม"
class="hover-button full-width q-pa-md"
@click="onClickViewDetail(props.row.id)"
/> -->
</q-card> </q-card>
</div> </div>
</template> </template>
@ -526,13 +521,7 @@ watch(
</template> </template>
</d-table> </d-table>
<!-- <DialogAddData <!-- ประวัติถือครองตำแหน่ง -->
v-model:modal="modalDialogAdd"
:fetchData="props.fetchData"
:fetchType="props.fetchType"
:empType="empType"
/> -->
<DialogHistory v-model:modal="modalHistory" /> <DialogHistory v-model:modal="modalHistory" />
</template> </template>

111
src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue
View file

@ -1,15 +1,20 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, onMounted } from "vue"; import { ref, reactive, onMounted } from "vue";
import { checkPermission } from "@/utils/permissions";
import dialogHeader from "@/components/DialogHeader.vue";
import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { QForm, useQuasar } from "quasar"; import { QForm, useQuasar } from "quasar";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/ProfesLicense"; import { checkPermission } from "@/utils/permissions";
import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/ProfesLicense"; import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import type { QTableProps } from "quasar";
import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/ProfesLicense";
import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/ProfesLicense";
import dialogHeader from "@/components/DialogHeader.vue";
const route = useRoute();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const $q = useQuasar(); const $q = useQuasar();
const { const {
@ -22,17 +27,18 @@ const {
pathRegistryEmp, pathRegistryEmp,
} = mixin; } = mixin;
const historyDialog = ref<boolean>(false);
const mode = ref<string>("table");
const dialog = ref<boolean>(false);
const route = useRoute();
const id = ref<string>(route.params.id.toString()); const id = ref<string>(route.params.id.toString());
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? "")); const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const dialogStatus = ref<string>("create");
const editId = ref<string>("");
const keyword = ref<string>("");
const historyKeyword = ref<string>("");
const mode = ref<string>("table"); //การแสดงผล Table,Card
const dialog = ref<boolean>(false); //แสดง popup ข้อมูลใบอนุญาตประกอบวิชาชีพ
const historyDialog = ref<boolean>(false); //แสดง popup ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ
const dialogStatus = ref<string>("create"); //สถานะการแก้ไขข้อมูล
const editId = ref<string>(""); //id ที่ต้องการแก้ไข
//Table Main
const rows = ref<ResponseObject[]>([]); //รายการใบอนุญาตประกอบวิชาชีพ
const keyword = ref<string>(""); //คำค้นหา
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "certificateType", name: "certificateType",
@ -92,7 +98,21 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
const visibleColumns = ref<string[]>([
"certificateType",
"issuer",
"certificateNo",
"issueDate",
"expireDate",
]);
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
//Table ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ
const historyRows = ref<ResponseObject[]>([]); //รายการประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ
const historyKeyword = ref<string>(""); //คำค้นหาประวัติแก้ไข
const historyColumns = ref<QTableProps["columns"]>([ const historyColumns = ref<QTableProps["columns"]>([
{ {
name: "certificateType", name: "certificateType",
@ -175,37 +195,6 @@ const historyColumns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
const profesLicenseData = reactive<RequestItemsObject>({
certificateType: "",
issuer: "",
certificateNo: "",
issueDate: new Date(),
expireDate: null,
profileId: id.value,
});
const rows = ref<ResponseObject[]>([]);
const historyRows = ref<ResponseObject[]>([]);
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
const historyPagination = ref({
page: 1,
rowsPerPage: 10,
});
const visibleColumns = ref<string[]>([
"certificateType",
"issuer",
"certificateNo",
"issueDate",
"expireDate",
]);
const historyVisibleColumns = ref<string[]>([ const historyVisibleColumns = ref<string[]>([
"certificateType", "certificateType",
"issuer", "issuer",
@ -215,6 +204,19 @@ const historyVisibleColumns = ref<string[]>([
"lastUpdateFullName", "lastUpdateFullName",
"lastUpdatedAt", "lastUpdatedAt",
]); ]);
const historyPagination = ref({
page: 1,
rowsPerPage: 10,
});
const profesLicenseData = reactive<RequestItemsObject>({
certificateType: "", //ชื่อใบอนุญาต
issuer: "", //หน่วยงานผู้ออกใบอนุญาต
certificateNo: "", //เลขที่ใบอนุญาต
issueDate: new Date(), //วันที่ออกใบอนุญาต
expireDate: null, //วันที่หมดอายุ
profileId: id.value,
});
/** /**
* ยืนยันการบันทึกข้อมูล * ยืนยันการบันทึกข้อมูล
@ -242,17 +244,18 @@ function closeDialog() {
*/ */
function closeHistoryDialog() { function closeHistoryDialog() {
historyDialog.value = false; historyDialog.value = false;
historyRows.value = [];
} }
/** /**
* fetch ข้อมูลรายการใบอนุญาตประกอบวิชาชีพ * fetch ข้อมูลรายการใบอนุญาตประกอบวิชาชีพ
*/ */
function fetchData(id: string) { async function fetchData(id: string) {
showLoader(); showLoader();
http await http
.get(config.API.profileNewCertificateByProfileId(id, empType.value)) .get(config.API.profileNewCertificateByProfileId(id, empType.value))
.then(async (res) => { .then(async (res) => {
rows.value = res.data.result; rows.value = await res.data.result;
}) })
.catch((err) => { .catch((err) => {
messageError($q, err); messageError($q, err);
@ -357,6 +360,9 @@ function fetchHistoryData(id: string) {
}); });
} }
/**
* ทำงานเมื่อ Components ถูกเรียกใช้งาน
*/
onMounted(() => { onMounted(() => {
fetchData(id.value); fetchData(id.value);
}); });
@ -433,6 +439,7 @@ onMounted(() => {
</template> </template>
</q-btn-toggle> </q-btn-toggle>
</div> </div>
<d-table <d-table
:grid="mode === 'card'" :grid="mode === 'card'"
ref="table" ref="table"
@ -569,7 +576,7 @@ onMounted(() => {
bg-color="white" bg-color="white"
dense dense
class="inputgreen" class="inputgreen"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อใบอนุญาต'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อใบอนุญาต'}`]"
hide-bottom-space hide-bottom-space
/> />
</div> </div>
@ -582,7 +589,7 @@ onMounted(() => {
dense dense
class="inputgreen" class="inputgreen"
:rules="[ :rules="[
(val) => !!val || `${'กรุณากรอกหน่วยงานผู้ออกใบอนุญาต'}`, (val:string) => !!val || `${'กรุณากรอกหน่วยงานผู้ออกใบอนุญาต'}`,
]" ]"
hide-bottom-space hide-bottom-space
/> />
@ -597,7 +604,7 @@ onMounted(() => {
bg-color="white" bg-color="white"
class="inputgreen" class="inputgreen"
dense dense
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่ใบอนุญาต'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่ใบอนุญาต'}`]"
hide-bottom-space hide-bottom-space
/> />
</div> </div>
@ -628,7 +635,7 @@ onMounted(() => {
: '' : ''
" "
:rules="[ :rules="[
(val) => !!val || `${'กรุณาเลือกวันที่ออกใบอนุญาต'}`, (val:string) => !!val || `${'กรุณาเลือกวันที่ออกใบอนุญาต'}`,
]" ]"
:label="`${'วันที่ออกใบอนุญาต'}`" :label="`${'วันที่ออกใบอนุญาต'}`"
> >

140
src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue
View file

@ -1,20 +1,23 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, onMounted } from "vue"; import { ref, reactive, onMounted } from "vue";
import { QForm, useQuasar } from "quasar";
import { useRoute } from "vue-router";
import { checkPermission } from "@/utils/permissions"; import { checkPermission } from "@/utils/permissions";
import dialogHeader from "@/components/DialogHeader.vue";
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import { useRoute } from "vue-router";
import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/Training";
import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Training";
import { QForm, useQuasar } from "quasar";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
const mixin = useCounterMixin(); import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/Training";
import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Training";
import dialogHeader from "@/components/DialogHeader.vue";
const route = useRoute();
const $q = useQuasar(); const $q = useQuasar();
const mixin = useCounterMixin();
const { const {
dialogRemove,
dialogConfirm, dialogConfirm,
showLoader, showLoader,
hideLoader, hideLoader,
@ -24,12 +27,36 @@ const {
pathRegistryEmp, pathRegistryEmp,
} = mixin; } = mixin;
const route = useRoute();
const id = ref<string>(route.params.id.toString()); const id = ref<string>(route.params.id.toString());
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? "")); const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const dialog = ref<boolean>(false); const mode = ref<string>("table"); //การแสดงผล Table,Card
const mode = ref<string>("table"); const dialog = ref<boolean>(false); //แสดง popup การฝึกอบรม/ดูงาน
const dialogStatus = ref<string>("create"); //สถานะการแก้ไขข้อมูล
const editId = ref<string>(""); //id ที่ต้องการแก้ไข
const historyDialog = ref<boolean>(false); //แสดง popup ประวัติแก้ไข
const isDate = ref<string>("false"); //ปี ,วัน/เดือน/ปี
const trainData = reactive<RequestItemsObject>({
profileId: id.value,
name: "", //ชื่อโครงการ/หลักสูตรการฝึกอบรม
topic: "", //หัวข้อการฝึกอบรม/ดูงาน
startYear: new Date().getFullYear(), //ปีที่เริ่มต้นการฝึกอบรม/ดูงาน
finishYear: new Date().getFullYear(), //ปีที่จบการฝึกอบรม/ดูงาน
startDate: new Date(), //วันที่เริ่มต้นการฝึกอบรม/ดูงาน
endDate: new Date(), //วันที่จบการฝึกอบรม/ดูงาน
yearly: null, //ปีงบประมาณ
place: "", //สถานที่ฝึกอบรม/ดูงาน
duration: "", //รวมระยะเวลาในการฝึกอบรม/ดูงาน
department: "", //หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน
numberOrder: "", //เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ
dateOrder: null, //คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่
isDate: isDate.value === "false" ? false : true,
});
//Table Main
const rows = ref<ResponseObject[]>([]);
const keyword = ref<string>("");
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "name", name: "name",
@ -148,6 +175,26 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
const visibleColumns = ref<string[]>([
"name", // ชื่อโครงงาน
"topic", // หัวข้อ
"yearly", // ปีที่อบรม
"place", // สถานที่
"duration", // รวมระยะเวลา
"department", // หน่วยงานที่รับผิดชอบ
"numberOrder", // เลขที่คำสั่ง
"dateOrder", // คำสั่งลงวันที่
"startDate", // วันเริ่มต้น
"endDate", // วันสิ้นสุด
]);
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
//Table ประวัติแก้ไข
const historyRows = ref<ResponseObject[]>([]);
const historyKeyword = ref<string>("");
const historyColumns = ref<QTableProps["columns"]>([ const historyColumns = ref<QTableProps["columns"]>([
{ {
name: "name", name: "name",
@ -289,55 +336,6 @@ const historyColumns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
const isDate = ref<string>("false");
const dialogStatus = ref<string>("create");
const historyDialog = ref<boolean>(false);
const editId = ref<string>("");
const keyword = ref<string>("");
const historyKeyword = ref<string>("");
const trainData = reactive<RequestItemsObject>({
profileId: id.value,
name: "",
topic: "",
yearly: null,
place: "",
duration: "",
department: "",
numberOrder: "",
dateOrder: null,
startDate: new Date(),
endDate: new Date(),
startYear: new Date().getFullYear(),
finishYear: new Date().getFullYear(),
isDate: isDate.value === "false" ? false : true,
});
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
const historyPagination = ref({
page: 1,
rowsPerPage: 10,
});
const rows = ref<ResponseObject[]>([]);
const historyRows = ref<ResponseObject[]>([]);
const visibleColumns = ref<string[]>([
"name", // ชื่อโครงงาน
"topic", // หัวข้อ
"yearly", // ปีที่อบรม
"place", // สถานที่
"duration", // รวมระยะเวลา
"department", // หน่วยงานที่รับผิดชอบ
"numberOrder", // เลขที่คำสั่ง
"dateOrder", // คำสั่งลงวันที่
"startDate", // วันเริ่มต้น
"endDate", // วันสิ้นสุด
]);
const historyVisibleColumns = ref<string[]>([ const historyVisibleColumns = ref<string[]>([
"name", // ชื่อโครงงาน "name", // ชื่อโครงงาน
"topic", // หัวข้อ "topic", // หัวข้อ
@ -352,6 +350,10 @@ const historyVisibleColumns = ref<string[]>([
"lastUpdateFullName", // แก้ไขโดย "lastUpdateFullName", // แก้ไขโดย
"lastUpdatedAt", // แก้ไขเมื่อวันที่ "lastUpdatedAt", // แก้ไขเมื่อวันที่
]); ]);
const historyPagination = ref({
page: 1,
rowsPerPage: 10,
});
/** /**
* ยืนยันการบันทึกข้อมูล * ยืนยันการบันทึกข้อมูล
@ -422,8 +424,8 @@ function addData() {
}) })
.then(async () => { .then(async () => {
await fetchData(id.value); await fetchData(id.value);
closeDialog();
await success($q, "บันทึกข้อมูลสำเร็จ"); await success($q, "บันทึกข้อมูลสำเร็จ");
closeDialog();
}) })
.catch((err) => { .catch((err) => {
messageError($q, err); messageError($q, err);
@ -449,8 +451,8 @@ function editData(idData: string) {
}) })
.then(async () => { .then(async () => {
await fetchData(id.value); await fetchData(id.value);
closeDialog();
await success($q, "บันทึกข้อมูลสำเร็จ"); await success($q, "บันทึกข้อมูลสำเร็จ");
closeDialog();
}) })
.catch((err) => { .catch((err) => {
messageError($q, err); messageError($q, err);
@ -473,17 +475,18 @@ function closeDialog() {
*/ */
function closeHistoryDialog() { function closeHistoryDialog() {
historyDialog.value = false; historyDialog.value = false;
historyRows.value = [];
} }
/** /**
* fetch รายการการฝึกอบรม/ดูงาน * fetch รายการการฝึกอบรม/ดูงาน
*/ */
function fetchData(id: string) { async function fetchData(id: string) {
showLoader(); showLoader();
http await http
.get(config.API.profileNewTrainingByProfileId(id, empType.value)) .get(config.API.profileNewTrainingByProfileId(id, empType.value))
.then((res) => { .then(async (res) => {
rows.value = res.data.result; rows.value = await res.data.result;
}) })
.catch((err) => { .catch((err) => {
messageError($q, err); messageError($q, err);
@ -511,6 +514,9 @@ function fetchHistoryData(id: string) {
}); });
} }
/**
* ทำงานเมื่อ Components ถูกเรียกใช้งาน
*/
onMounted(() => { onMounted(() => {
fetchData(id.value); fetchData(id.value);
}); });
@ -725,7 +731,7 @@ onMounted(() => {
dense dense
class="inputgreen" class="inputgreen"
:rules="[ :rules="[
(val) => (val:string) =>
!!val || `${'กรุณากรอกชื่อโครงการ/หลักสูตรการฝึกอบรม'}`, !!val || `${'กรุณากรอกชื่อโครงการ/หลักสูตรการฝึกอบรม'}`,
]" ]"
hide-bottom-space hide-bottom-space
@ -740,7 +746,7 @@ onMounted(() => {
bg-color="white" bg-color="white"
dense dense
:rules="[ :rules="[
(val) => !!val || `${'กรุณากรอกหัวข้อการฝึกอบรม/ดูงาน'}`, (val:string) => !!val || `${'กรุณากรอกหัวข้อการฝึกอบรม/ดูงาน'}`,
]" ]"
hide-bottom-space hide-bottom-space
/> />

127
src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
View file

@ -1,15 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref, watch, reactive } from "vue"; import { onMounted, ref, reactive } from "vue";
import { useQuasar } from "quasar";
import { checkPermission } from "@/utils/permissions"; import { checkPermission } from "@/utils/permissions";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps, QForm } from "quasar";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import { useInsigniaDataStore } from "@/modules/04_registryPerson/stores/insignia"; import { useInsigniaDataStore } from "@/modules/04_registryPerson/stores/insignia";
import DialogHeader from "@/components/DialogHeader.vue"; import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar";
import type { import type {
DataOption, DataOption,
DataOptionInsignia, DataOptionInsignia,
@ -18,6 +18,8 @@ import type {
import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/Insignia"; import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/Insignia";
import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Insignia"; import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Insignia";
import DialogHeader from "@/components/DialogHeader.vue";
const $q = useQuasar(); const $q = useQuasar();
const route = useRoute(); const route = useRoute();
const store = useInsigniaDataStore(); const store = useInsigniaDataStore();
@ -32,54 +34,46 @@ const {
dialogConfirm, dialogConfirm,
pathRegistryEmp, pathRegistryEmp,
} = mixin; } = mixin;
const profileId = ref<string>( const profileId = ref<string>(
route.params.id ? route.params.id.toString() : "" route.params.id ? route.params.id.toString() : ""
); );
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? "")); const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const id = ref<string>(""); const id = ref<string>(""); //id ที่ต้องการแก้ไข
const insigniaType = ref<string>(""); const insigniaType = ref<string>(""); //ลำดับชั้น
const insigniaForm = reactive<RequestItemsObject>({ const insigniaForm = reactive<RequestItemsObject>({
year: 0, year: 0, //ปีที่ยื่นขอพระราชทานเครื่องราชฯ
no: "", receiveDate: null, //วันที่ได้รับ
volume: "", insigniaId: "", //ชื่อเครื่องราชฯ
section: "", no: "", //ลำดับที่
page: "", issue: "", //ราชกิจจาฯ ฉบับที่
receiveDate: null, volumeNo: "", //เล่มที่
insigniaId: "", volume: "", //เล่ม
dateAnnounce: null, section: "", //ตอน
issue: "", page: "", //หน้า
volumeNo: "", dateAnnounce: null, //วันที่ประกาศในราชกิจจาฯ
refCommandDate: null, refCommandNo: "", //เลขที่คำสั่ง
refCommandNo: "", refCommandDate: null, //'เอกสารอ้างอิง (ลง วัน/เดือน/ปี)'
note: "", note: "", //หมายเหตุ
}); });
const historyPagination = ref({ const isEdit = ref<boolean>(false); //สถานะการแก้ไขข้อมูล
page: 1, const modal = ref<boolean>(false); //แสดง popup ข้อมูลเครื่องราชอิสริยาภรณ์
rowsPerPage: 10, const modeView = ref<string>("table"); //การแสดงผล Table,Card
}); const modalHistory = ref<boolean>(false); //แสดง popup ประวัติแก้ไข
//ข้อมูลเครื่องราช
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
const isEdit = ref<boolean>(false);
const modal = ref<boolean>(false);
const modeView = ref<string>("table");
const filterSearch = ref("");
const filterHistory = ref<string>("");
const modalHistory = ref<boolean>(false);
const rowsHistory = ref<RequestItemsObject[]>([]);
const Ops = ref<InsigniaOps>({
insigniaOptions: [],
});
const OpsFilter = ref<InsigniaOps>({ const OpsFilter = ref<InsigniaOps>({
insigniaOptions: [], insigniaOptions: [],
}); });
//ต้วลือกรายการครื่องราช
const Ops = ref<InsigniaOps>({
insigniaOptions: [],
});
//Table Main
const rows = ref<ResponseObject[]>([]); const rows = ref<ResponseObject[]>([]);
const filterSearch = ref("");
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "year", name: "year",
@ -239,6 +233,30 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
const visibleColumns = ref<String[]>([
"insignia",
"insigniaType",
"year",
"no",
"issue",
"volumeNo",
"volume",
"section",
"page",
"receiveDate",
"dateAnnounce",
"refCommandNo",
"refCommandDate",
"note",
]);
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
//Table ประวัติแก้ไข
const rowsHistory = ref<RequestItemsObject[]>([]);
const filterHistory = ref<string>("");
const columnsHistory = ref<QTableProps["columns"]>([ const columnsHistory = ref<QTableProps["columns"]>([
{ {
name: "year", name: "year",
@ -410,22 +428,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
const visibleColumns = ref<String[]>([
"insignia",
"insigniaType",
"year",
"no",
"issue",
"volumeNo",
"volume",
"section",
"page",
"receiveDate",
"dateAnnounce",
"refCommandNo",
"refCommandDate",
"note",
]);
const visibleColumnsHistory = ref<String[]>([ const visibleColumnsHistory = ref<String[]>([
"insignia", "insignia",
"insigniaType", "insigniaType",
@ -443,6 +445,10 @@ const visibleColumnsHistory = ref<String[]>([
"lastUpdateFullName", "lastUpdateFullName",
"lastUpdatedAt", "lastUpdatedAt",
]); ]);
const historyPagination = ref({
page: 1,
rowsPerPage: 10,
});
/** /**
* fetch ข้อมูลรายการเครื่องราชอิสริยาภรณ์ * fetch ข้อมูลรายการเครื่องราชอิสริยาภรณ์
@ -629,6 +635,9 @@ function clearData() {
insigniaForm.note = ""; insigniaForm.note = "";
} }
/**
* ทำงานเมื่อ Components ถูกเรียกใช้งาน
*/
onMounted(async () => { onMounted(async () => {
await fetchData(); await fetchData();
store.insigniaOption.length === 0 ? await fetchInsignia() : ""; store.insigniaOption.length === 0 ? await fetchInsignia() : "";
@ -1145,7 +1154,7 @@ onMounted(async () => {
<q-card style="min-width: 80%"> <q-card style="min-width: 80%">
<DialogHeader <DialogHeader
tittle="ประวัติแก้ไขเครื่องราชอิสริยาภรณ์" tittle="ประวัติแก้ไขเครื่องราชอิสริยาภรณ์"
:close="() => (modalHistory = false)" :close="() => ((modalHistory = false), (rowsHistory = []))"
/> />
<q-separator /> <q-separator />

78
src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
View file

@ -1,17 +1,19 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, reactive, watch } from "vue"; import { ref, onMounted, reactive } from "vue";
import { useQuasar } from "quasar";
import { checkPermission } from "@/utils/permissions"; import { checkPermission } from "@/utils/permissions";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { useQuasar } from "quasar"; import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import type { QTableProps, QForm } from "quasar";
import { useCounterMixin } from "@/stores/mixin"; import type { QTableProps } from "quasar";
import DialogHeader from "@/components/DialogHeader.vue";
import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/DeclarationHonor"; import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/DeclarationHonor";
import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/DeclarationHonor"; import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/DeclarationHonor";
import DialogHeader from "@/components/DialogHeader.vue";
const $q = useQuasar(); const $q = useQuasar();
const route = useRoute(); const route = useRoute();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
@ -24,32 +26,31 @@ const {
dialogConfirm, dialogConfirm,
pathRegistryEmp, pathRegistryEmp,
} = mixin; } = mixin;
const profileId = ref<string>( const profileId = ref<string>(
route.params.id ? route.params.id.toString() : "" route.params.id ? route.params.id.toString() : ""
); );
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? "")); const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const id = ref<string>(""); const id = ref<string>(""); //id ที่ต้องการแก้ไข
const issueDateYear = ref<number>(0); const issueDateYear = ref<number>(0); //ปีที่ได้รับ
const declHonorForm = reactive<RequestItemsObject>({ const declHonorForm = reactive<RequestItemsObject>({
isDate: "false", isDate: "false", //ปี
issuer: "", issuer: "", //ผู้มีอำนาจลงนาม
detail: "", detail: "", //รายละเอียด
issueDate: null, issueDate: null, //ปีที่ได้รับ
refCommandNo: "", refCommandNo: "", //เลขที่คำสั่ง
refCommandDate: null, refCommandDate: null, //'เอกสารอ้างอิง (ลงวันที่)'
}); });
const isEdit = ref<boolean>(false); const isEdit = ref<boolean>(false); //สถานะการแก้ไขข้อมูล
const modal = ref<boolean>(false); const modal = ref<boolean>(false); //แสดง popup ข้อมูลประกาศเกียรติคุณ
const modeView = ref<string>("table"); const modeView = ref<string>("table"); //การแสดงผล Table,Card
const filterSearch = ref(""); const modalHistory = ref<boolean>(false); //แสดง popup ประวัติแก้ไข
const filterHistory = ref<string>("");
const modalHistory = ref<boolean>(false);
const rowsHistory = ref<ResponseObject[]>([]);
//Table Main
const rows = ref<ResponseObject[]>([]); const rows = ref<ResponseObject[]>([]);
const filterSearch = ref("");
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "issueDate", name: "issueDate",
@ -109,6 +110,21 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
const visibleColumns = ref<String[]>([
"issuer",
"detail",
"issueDate",
"refCommandNo",
"refCommandDate",
]);
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
//Table ประวัติแก้ไข
const rowsHistory = ref<ResponseObject[]>([]);
const filterHistory = ref<string>("");
const columnsHistory = ref<QTableProps["columns"]>([ const columnsHistory = ref<QTableProps["columns"]>([
{ {
name: "issueDate", name: "issueDate",
@ -191,15 +207,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
const visibleColumns = ref<String[]>([
"issuer",
"detail",
"issueDate",
"refCommandNo",
"refCommandDate",
]);
const visibleColumnsHistory = ref<String[]>([ const visibleColumnsHistory = ref<String[]>([
"issuer", "issuer",
"detail", "detail",
@ -209,12 +216,6 @@ const visibleColumnsHistory = ref<String[]>([
"lastUpdateFullName", "lastUpdateFullName",
"lastUpdatedAt", "lastUpdatedAt",
]); ]);
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
const historyPagination = ref({ const historyPagination = ref({
page: 1, page: 1,
rowsPerPage: 10, rowsPerPage: 10,
@ -354,6 +355,9 @@ function clearData() {
declHonorForm.isDate = "false"; declHonorForm.isDate = "false";
} }
/**
* ทำงานเมื่อ Components ถูกเรียกใช้งาน
*/
onMounted(() => { onMounted(() => {
fetchData(); fetchData();
}); });
@ -767,7 +771,7 @@ onMounted(() => {
<q-card-section class="flex justify-between" style="padding: 0"> <q-card-section class="flex justify-between" style="padding: 0">
<DialogHeader <DialogHeader
tittle="ประวัติแก้ไขประกาศเกียรติคุณ" tittle="ประวัติแก้ไขประกาศเกียรติคุณ"
:close="() => (modalHistory = false)" :close="() => ((modalHistory = false), (rowsHistory = []))"
/> />
</q-card-section> </q-card-section>

266
src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
View file

@ -1,20 +1,21 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref, watch, reactive } from "vue"; import { onMounted, ref, reactive } from "vue";
import { checkPermission } from "@/utils/permissions";
import { useRoute } from "vue-router";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps, QForm } from "quasar";
import { useRoute } from "vue-router";
import { checkPermission } from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import { useResultsPerformDataStore } from "@/modules/04_registryPerson/stores/ResultsPerformance"; import { useResultsPerformDataStore } from "@/modules/04_registryPerson/stores/ResultsPerformance";
import DialogHeader from "@/components/DialogHeader.vue"; import http from "@/plugins/http";
import DialogDevelop from "@/modules/04_registryPerson/components/DialogDevelopmant.vue"; import config from "@/app.config";
import type { QTableProps } from "quasar";
import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/ResultsPerformance"; import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/ResultsPerformance";
import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/ResultsPerformance"; import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/ResultsPerformance";
import DialogHeader from "@/components/DialogHeader.vue";
import DialogDevelop from "@/modules/04_registryPerson/components/detail/Achievement/DialogDevelopmance.vue";
const $q = useQuasar(); const $q = useQuasar();
const route = useRoute(); const route = useRoute();
const store = useResultsPerformDataStore(); const store = useResultsPerformDataStore();
@ -29,38 +30,36 @@ const {
dialogConfirm, dialogConfirm,
pathRegistryEmp, pathRegistryEmp,
} = mixin; } = mixin;
const profileId = ref<string>( const profileId = ref<string>(
route.params.id ? route.params.id.toString() : "" route.params.id ? route.params.id.toString() : ""
); );
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? "")); const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const id = ref<string>(""); const id = ref<string>(""); //id ที่ต้องการแก้ไข
const isEdit = ref<boolean>(false); //สถานะการแก้ไขข้อมูล
const modal = ref<boolean>(false); //แสดง popup ผลการประเมินการปฏิบัติราชการ
const modalDevelop = ref<boolean>(false); //แสดง popup การพัฒนารายบุคคล
const modeView = ref<string>("table"); //การแสดงผล Table,Card ผลการประเมินการปฏิบัติราชการ
const modeViewPlan = ref<string>("table"); //การแสดงผล Table,Card การพัฒนารายบุคคล
const modalHistory = ref<boolean>(false); //แสดง popup ประวัติแก้ไข
const kpiDevelopmentId = ref<string>(""); // id การพัฒนารายบุคคล
const resPerformForm = reactive<RequestItemsObject>({ const resPerformForm = reactive<RequestItemsObject>({
name: "", name: "",
point1Total: 0, point1Total: 0, //ส่วนที่1 (น้ำหนัก)
point1: 0, point1: 0, //ผลประเมินส่วนที่1 (คะแนน)
point2Total: 0, point2Total: 0, // ส่วนที่2 (น้ำหนัก)
point2: 0, point2: 0, //ส่วนที่2 (น้ำหนัก)
pointSumTotal: 0, pointSumTotal: 0, //ผลรวม (น้ำหนัก)
pointSum: 0, pointSum: 0, //ผลประเมินรวม (คะแนน)
date: null, date: null, //วันที่ได้รับ
}); });
const isEdit = ref<boolean>(false);
const modal = ref<boolean>(false);
const modalDevelop = ref<boolean>(false);
const modeView = ref<string>("table");
const modeViewPlan = ref<string>("table");
const filterSearch = ref("");
const kpiDevelopmentId = ref<string>("");
const filterHistory = ref<string>("");
const modalHistory = ref<boolean>(false);
const rowsHistory = ref<ResponseObject[]>([]);
const filterSearchPlan = ref("");
//Table ผลการประเมินการปฏิบัติราชการ
const rows = ref<ResponseObject[]>([]); const rows = ref<ResponseObject[]>([]);
const rowsPlan = ref<any[]>([]); const filterSearch = ref<string>("");
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "date", name: "date",
@ -150,6 +149,107 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
const visibleColumns = ref<String[]>([
"point1Total",
"point1",
"point2Total",
"point2",
"pointSumTotal",
"pointSum",
"name",
"date",
]);
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
//Table การพัฒนารายบุคคล (Individual Development Plan)
const rowsPlan = ref<any[]>([]);
const filterSearchPlan = ref<string>("");
const columnsPlan = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format: (v) => date2Thai(v),
},
{
name: "name",
align: "left",
label: "ความรู้ / ทักษะ / สมรรถนะที่ต้องได้รับการพัฒนา",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "developmentProjects",
align: "left",
label: "วิธีการพัฒนา",
sortable: true,
field: "developmentProjects",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "target",
align: "left",
label: "เป้าหมายการพัฒนา",
sortable: true,
field: "target",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "developmentResults",
align: "left",
label: "วิธีการวัดผลการพัฒนา",
sortable: true,
field: "developmentResults",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "point",
align: "left",
label: "รายงานผลการพัฒนา",
sortable: true,
field: "point",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const visibleColumnsPlan = ref<String[]>([
"no",
"name",
"developmentProjects",
"target",
"developmentResults",
"point",
]);
const paginationPlan = ref({
page: 1,
rowsPerPage: 10,
});
//Table ประวัติแก้ไข
const rowsHistory = ref<ResponseObject[]>([]);
const filterHistory = ref<string>("");
const columnsHistory = ref<QTableProps["columns"]>([ const columnsHistory = ref<QTableProps["columns"]>([
{ {
name: "date", name: "date",
@ -272,103 +372,6 @@ const visibleColumnsHistory = ref<String[]>([
"lastUpdateFullName", "lastUpdateFullName",
"lastUpdatedAt", "lastUpdatedAt",
]); ]);
const visibleColumns = ref<String[]>([
"point1Total",
"point1",
"point2Total",
"point2",
"pointSumTotal",
"pointSum",
"name",
"date",
]);
const visibleColumnsPlan = ref<String[]>([
"no",
"name",
"developmentProjects",
"target",
"developmentResults",
"point",
]);
const columnsPlan = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format: (v) => date2Thai(v),
},
{
name: "name",
align: "left",
label: "ความรู้ / ทักษะ / สมรรถนะที่ต้องได้รับการพัฒนา",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "developmentProjects",
align: "left",
label: "วิธีการพัฒนา",
sortable: true,
field: "developmentProjects",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "target",
align: "left",
label: "เป้าหมายการพัฒนา",
sortable: true,
field: "target",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "developmentResults",
align: "left",
label: "วิธีการวัดผลการพัฒนา",
sortable: true,
field: "developmentResults",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "point",
align: "left",
label: "รายงานผลการพัฒนา",
sortable: true,
field: "point",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
const paginationPlan = ref({
page: 1,
rowsPerPage: 10,
});
const historyPagination = ref({ const historyPagination = ref({
page: 1, page: 1,
rowsPerPage: 10, rowsPerPage: 10,
@ -379,7 +382,6 @@ const historyPagination = ref({
*/ */
async function fetchData() { async function fetchData() {
if (!profileId.value) return; if (!profileId.value) return;
showLoader(); showLoader();
try { try {
const res = await http.get( const res = await http.get(
@ -396,12 +398,14 @@ async function fetchData() {
} }
} }
/**
* fetch รายการการพัฒนารายบุคคล (Individual Development Plan)
*/
async function getDevelop() { async function getDevelop() {
if (!profileId.value) return; if (!profileId.value) return;
await http await http
.get(config.API.developMentPlan + `/${profileId.value}`) .get(config.API.developMentPlan + `/${profileId.value}`)
.then((res) => { .then((res) => {
console.log(res.data.result);
const data = res.data.result; const data = res.data.result;
rowsPlan.value = data; rowsPlan.value = data;
}) })
@ -450,7 +454,6 @@ async function addEditData(editStatus: boolean = false) {
function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) { function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
modal.value = true; modal.value = true;
isEdit.value = editStatus; isEdit.value = editStatus;
if (editStatus && row) { if (editStatus && row) {
id.value = row.id; id.value = row.id;
resPerformForm.name = row.name; resPerformForm.name = row.name;
@ -480,7 +483,6 @@ async function clickClose() {
async function clickHistory(row: ResponseObject) { async function clickHistory(row: ResponseObject) {
modalHistory.value = true; modalHistory.value = true;
filterSearch.value = ""; filterSearch.value = "";
showLoader(); showLoader();
try { try {
const res = await http.get( const res = await http.get(
@ -1177,7 +1179,7 @@ onMounted(async () => {
<q-card style="min-width: 80%"> <q-card style="min-width: 80%">
<DialogHeader <DialogHeader
tittle="ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ" tittle="ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ"
:close="() => (modalHistory = false)" :close="() => ((modalHistory = false), (rowsHistory = []))"
/> />
<q-separator /> <q-separator />
<q-card-section style="max-height: 60vh" class="scroll"> <q-card-section style="max-height: 60vh" class="scroll">

165
src/modules/04_registryPerson/components/DialogDevelopmant.vue → src/modules/04_registryPerson/components/detail/Achievement/DialogDevelopmance.vue
View file

@ -1,21 +1,33 @@
<script setup lang="ts"> <script setup lang="ts">
import DialogHeader from "@/components/DialogHeader.vue";
import { ref, reactive, watch, computed } from "vue"; import { ref, reactive, watch, computed } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { useRoute } from "vue-router"; import { useCounterMixin } from "@/stores/mixin";
import type { import type {
DataOptionTechnique, DataOptionTechnique,
ProjectYearOp, ProjectYearOp,
} from "@/modules/14_KPI/interface/index/Main"; } from "@/modules/14_KPI/interface/index/Main";
import DialogHeader from "@/components/DialogHeader.vue";
const $q = useQuasar();
const route = useRoute();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError } = mixin;
/**
* props
*/
const modal = defineModel<boolean>("modal", { required: true });
const id = defineModel<string>("id", { required: true });
const props = defineProps({ const props = defineProps({
getAll: Function, getAll: Function,
}); });
const route = useRoute();
const idKpi = ref<string>(route.params.id.toLocaleString());
const development = ref<any[]>([]); const development = ref<any[]>([]);
const reasonDevelopment70 = ref<string>(""); const reasonDevelopment70 = ref<string>("");
const reasonDevelopment20 = ref<string>(""); const reasonDevelopment20 = ref<string>("");
@ -30,22 +42,6 @@ const checkOtherBox13 = computed<boolean>(() => {
return development.value.includes("other3"); return development.value.includes("other3");
}); });
const isDevelopment70 = computed(() => {
return projectTechniquesOp1.value.some((txt) =>
development.value.includes(txt.value)
);
});
const isDevelopment20 = computed(() => {
return projectTechniquesOp2.value.some((txt) =>
development.value.includes(txt.value)
);
});
const isDevelopment10 = computed(() => {
return projectTechniquesOp3.value.some((txt) =>
development.value.includes(txt.value)
);
});
const projectTechniquesOp1 = ref<DataOptionTechnique[]>([ const projectTechniquesOp1 = ref<DataOptionTechnique[]>([
{ {
value: "on_the_job_training", value: "on_the_job_training",
@ -86,7 +82,6 @@ const projectTechniquesOp2 = ref<DataOptionTechnique[]>([
{ value: "feedback", label: "การให้ข้อคิดเห็น/เสนอแนะ (Feedback)" }, { value: "feedback", label: "การให้ข้อคิดเห็น/เสนอแนะ (Feedback)" },
{ value: "other2", label: "อื่น ๆ (ระบุ)" }, { value: "other2", label: "อื่น ๆ (ระบุ)" },
]); ]);
const projectTechniquesOp3 = ref<DataOptionTechnique[]>([ const projectTechniquesOp3 = ref<DataOptionTechnique[]>([
{ {
value: "self_learning", value: "self_learning",
@ -118,19 +113,7 @@ const choiceOp = ref<DataOptionTechnique[]>([
{ value: "PROJECT", label: "เลือกจากโครงการ/หลักสูตรการฝึกอบรม" }, { value: "PROJECT", label: "เลือกจากโครงการ/หลักสูตรการฝึกอบรม" },
{ value: "MANUAL", label: "กรอกเอง" }, { value: "MANUAL", label: "กรอกเอง" },
]); ]);
const $q = useQuasar();
const mixin = useCounterMixin();
const {
showLoader,
hideLoader,
dialogConfirm,
messageError,
success,
dialogMessageNotify,
} = mixin;
const modal = defineModel<boolean>("modal", { required: true });
const id = defineModel<string>("id", { required: true });
const emType = computed(() => { const emType = computed(() => {
return route.name return route.name
? route.name === "registryNewByid" ? route.name === "registryNewByid"
@ -140,6 +123,7 @@ const emType = computed(() => {
: "employee" : "employee"
: ""; : "";
}); });
const formData = reactive<{ const formData = reactive<{
year: number | null; year: number | null;
point: number | null; point: number | null;
@ -194,62 +178,6 @@ function close() {
id.value = ""; id.value = "";
} }
watch(
() => id.value,
(i) => {
if (i) {
showLoader();
http
.get(
config.API.kpiAchievementDevelop +
`/registry/${emType.value}/${id.value}`
)
.then(async (res) => {
const data = res.data.result;
formData.year = data.selectTypeYear;
await getDataByYear();
setTimeout(() => {
choice.value = data.selectType;
projectName.value = projectOpMain.value.find(
(i: any) => i.id == data.selectTypeId
);
formData.name = data.name;
formData.group = data.group;
formData.target = data.target;
formData.isDevelopment70 = data.isDevelopment70;
formData.isDevelopment20 = data.isDevelopment20;
formData.isDevelopment10 = data.isDevelopment10;
formData.achievement10 = data.achievement10;
formData.achievement5 = data.achievement5;
formData.achievement0 = data.achievement0;
development.value = data.developmentProjects;
reasonDevelopment70.value = data.developmentProjects.includes(
"other1"
)
? data.reasonDevelopment70
: "";
reasonDevelopment20.value = data.developmentProjects.includes(
"other2"
)
? data.reasonDevelopment20
: "";
reasonDevelopment10.value = data.developmentProjects.includes(
"other3"
)
? data.reasonDevelopment10
: "";
}, 500);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
}
);
const customPosition = () => ({ top: "385px", left: "410px" }); const customPosition = () => ({ top: "385px", left: "410px" });
async function getDataByYear() { async function getDataByYear() {
if (formData.year) { if (formData.year) {
@ -316,6 +244,62 @@ function filterOptionFn(val: string, update: Function) {
); );
}); });
} }
watch(
() => id.value,
(i) => {
if (i) {
showLoader();
http
.get(
config.API.kpiAchievementDevelop +
`/registry/${emType.value}/${id.value}`
)
.then(async (res) => {
const data = res.data.result;
formData.year = data.selectTypeYear;
await getDataByYear();
setTimeout(() => {
choice.value = data.selectType;
projectName.value = projectOpMain.value.find(
(i: any) => i.id == data.selectTypeId
);
formData.name = data.name;
formData.group = data.group;
formData.target = data.target;
formData.isDevelopment70 = data.isDevelopment70;
formData.isDevelopment20 = data.isDevelopment20;
formData.isDevelopment10 = data.isDevelopment10;
formData.achievement10 = data.achievement10;
formData.achievement5 = data.achievement5;
formData.achievement0 = data.achievement0;
development.value = data.developmentProjects;
reasonDevelopment70.value = data.developmentProjects.includes(
"other1"
)
? data.reasonDevelopment70
: "";
reasonDevelopment20.value = data.developmentProjects.includes(
"other2"
)
? data.reasonDevelopment20
: "";
reasonDevelopment10.value = data.developmentProjects.includes(
"other3"
)
? data.reasonDevelopment10
: "";
}, 500);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
}
);
</script> </script>
<template> <template>
<q-dialog persistent v-model="modal"> <q-dialog persistent v-model="modal">
@ -389,7 +373,6 @@ function filterOptionFn(val: string, update: Function) {
<q-select <q-select
outlined outlined
dense dense
readonly
:rules="[(val:string) => !!val || `${'กรุณาเลือกโครงการ/หลักสูตรการฝึกอบรม'}`,]" :rules="[(val:string) => !!val || `${'กรุณาเลือกโครงการ/หลักสูตรการฝึกอบรม'}`,]"
class="inputgreen" class="inputgreen"
label="โครงการ/หลักสูตรการฝึกอบรม" label="โครงการ/หลักสูตรการฝึกอบรม"

57
src/modules/04_registryPerson/components/detail/GovernmentInformation/01_Info.vue
View file

@ -1,20 +1,21 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, onMounted } from "vue"; import { ref, reactive, onMounted } from "vue";
import { checkPermission } from "@/utils/permissions"; import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import { checkPermission } from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar";
import type { import type {
RequestItemsHistoryObject, RequestItemsHistoryObject,
FormMain, FormMain,
} from "@/modules/04_registryPerson/interface/index/government"; } from "@/modules/04_registryPerson/interface/index/government";
import DialogHeader from "@/components/DialogHeader.vue";
import { useQuasar } from "quasar";
import type { QTableProps } from "quasar";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
/** ฟังชั่นกลาง */ import DialogHeader from "@/components/DialogHeader.vue";
const route = useRoute(); const route = useRoute();
const $q = useQuasar(); const $q = useQuasar();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
@ -42,7 +43,6 @@ const formMain = reactive<FormMain>({
positionExecutiveSide: "", //ด้านตำแหน่งทางการบริหาร positionExecutiveSide: "", //ด้านตำแหน่งทางการบริหาร
positionType: "", //ประเภท positionType: "", //ประเภท
positionPathSide: "", //ด้าน/สาขา positionPathSide: "", //ด้าน/สาขา
containDate: null, //วันที่สั่งบรรจุ containDate: null, //วันที่สั่งบรรจุ
workDate: null, //วันที่เริ่มปฏิบัติราชการ workDate: null, //วันที่เริ่มปฏิบัติราชการ
reasonSameDate: "", reasonSameDate: "",
@ -56,13 +56,7 @@ const formMain = reactive<FormMain>({
age: 0, //อายุราชการเกื้อกูล age: 0, //อายุราชการเกื้อกูล
}); });
/** dialog */ const modalEdit = ref<boolean>(false); //แสดง popup แก้ไขข้อมูลราชการ
const modalEdit = ref<boolean>(false);
const modalHistory = ref<boolean>(false);
const rowsHistory = ref<RequestItemsHistoryObject[]>([]);
const filterKeyword = ref<string>("");
const containDate = ref<Date | null>(null); const containDate = ref<Date | null>(null);
const workDate = ref<Date | null>(null); const workDate = ref<Date | null>(null);
const reasonSameDate = ref<string | null>(null); const reasonSameDate = ref<string | null>(null);
@ -70,6 +64,10 @@ const containDateRef = ref<object | null>(null);
const workDateRef = ref<object | null>(null); const workDateRef = ref<object | null>(null);
const reasonSameDateRef = ref<object | null>(null); const reasonSameDateRef = ref<object | null>(null);
//ประวัติแก้ไขข้อมูลราชการ
const filterKeyword = ref<string>(""); //คำค้นหา
const modalHistory = ref<boolean>(false); //แสดง popup ประวัติแก้ไขข้อมูลราชการ;
const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //ข้อมูลรายการประวัติแก้ไขข้อมูลราชการ
const visibleColumnsHistory = ref<String[]>([ const visibleColumnsHistory = ref<String[]>([
"dateAppoint", "dateAppoint",
"dateStart", "dateStart",
@ -77,7 +75,6 @@ const visibleColumnsHistory = ref<String[]>([
"lastUpdateFullName", "lastUpdateFullName",
"lastUpdatedAt", "lastUpdatedAt",
]); ]);
const columnsHistory = ref<QTableProps["columns"]>([ const columnsHistory = ref<QTableProps["columns"]>([
{ {
name: "dateAppoint", name: "dateAppoint",
@ -206,12 +203,12 @@ function onSubmit() {
/** /**
* ดึงข้อมูลราชการ * ดึงข้อมูลราชการ
*/ */
function getData() { async function getData() {
showLoader(); showLoader();
http await http
.get(config.API.profileNewGovernmentById(profileId.value, empType.value)) .get(config.API.profileNewGovernmentById(profileId.value, empType.value))
.then((res) => { .then(async (res) => {
const data = res.data.result; const data = await res.data.result;
formMain.ocId = data.org ?? "-"; //สังกัด formMain.ocId = data.org ?? "-"; //สังกัด
formMain.positionId = data.position ?? "-"; //ตำแหน่ง formMain.positionId = data.position ?? "-"; //ตำแหน่ง
formMain.positionLine = data.positionField ?? "-"; //สายงาน formMain.positionLine = data.positionField ?? "-"; //สายงาน
@ -242,12 +239,12 @@ function getData() {
/** /**
* ดึงข้อมูลประวัติ * ดึงข้อมูลประวัติ
*/ */
function getDataHistory() { async function getDataHistory() {
showLoader(); showLoader();
http await http
.get(config.API.profileNewGovernmentHistory(profileId.value, empType.value)) .get(config.API.profileNewGovernmentHistory(profileId.value, empType.value))
.then((res) => { .then(async (res) => {
let data = res.data.result; let data = await res.data.result;
rowsHistory.value = []; rowsHistory.value = [];
data.map((e: RequestItemsHistoryObject) => { data.map((e: RequestItemsHistoryObject) => {
rowsHistory.value.push({ rowsHistory.value.push({
@ -277,13 +274,15 @@ function getDataHistory() {
}) })
.catch((e) => { .catch((e) => {
messageError($q, e); messageError($q, e);
modalHistory.value = false;
}) })
.finally(() => { .finally(() => {
hideLoader(); hideLoader();
}); });
} }
/**
* ทำงานเมื่อ Components ถูกเรียกใช้งาน
*/
onMounted(() => { onMounted(() => {
getData(); getData();
}); });
@ -547,7 +546,7 @@ onMounted(() => {
: null : null
" "
:rules="[ :rules="[
(val) => !!val || 'กรุณาเลือก วัน/เดือน/ปี ที่บรรจุ', (val:string) => !!val || 'กรุณาเลือก วัน/เดือน/ปี ที่บรรจุ',
]" ]"
label="วัน/เดือน/ปี ที่บรรจุ" label="วัน/เดือน/ปี ที่บรรจุ"
> >
@ -588,7 +587,7 @@ onMounted(() => {
? date2Thai(workDate as Date) ? date2Thai(workDate as Date)
: null : null
" "
:rules="[(val) => !!val || 'กรุณาเลือกเริ่มปฎิบัติราชการ']" :rules="[(val:string) => !!val || 'กรุณาเลือกเริ่มปฎิบัติราชการ']"
label="วัน/เดือน/ปี เริ่มปฎิบัติราชการ" label="วัน/เดือน/ปี เริ่มปฎิบัติราชการ"
> >
<template v-slot:prepend> <template v-slot:prepend>
@ -615,7 +614,7 @@ onMounted(() => {
outlined outlined
dense dense
hide-bottom-space hide-bottom-space
:rules="[(val) => !!val || 'กรุณากรอก เหตุผลกรณีไม่ตรงกัน']" :rules="[(val:string) => !!val || 'กรุณากรอก เหตุผลกรณีไม่ตรงกัน']"
v-model="reasonSameDate" v-model="reasonSameDate"
/> />
</div> </div>

99
src/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue
View file

@ -1,23 +1,24 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, reactive } from "vue"; import { ref, onMounted, reactive } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import { checkPermission } from "@/utils/permissions"; import { checkPermission } from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import type { import type {
RequestItemsObject, RequestItemsObject,
FormFilter, DisciplineOps,
DataOption, DataOption,
} from "@/modules/04_registryPerson/interface/index/discipline"; } from "@/modules/04_registryPerson/interface/index/discipline";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import DialogHeader from "@/components/DialogHeader.vue"; import DialogHeader from "@/components/DialogHeader.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import DialogHistory from "@/modules/04_registryPerson/components/detail/GovernmentInformation/02_DisciplineHistory.vue"; import DialogHistory from "@/modules/04_registryPerson/components/detail/GovernmentInformation/02_DisciplineHistory.vue";
import { useRoute } from "vue-router";
const route = useRoute(); const route = useRoute();
const $q = useQuasar(); const $q = useQuasar();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { const {
@ -35,42 +36,20 @@ const profileId = ref<string>(
); );
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? "")); const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
//ฟอร์มข้อมูลวินัย
const disciplineData = reactive<RequestItemsObject>({ const disciplineData = reactive<RequestItemsObject>({
date: null, date: null, //วัน/เดือน/ปี
level: "", level: "", //ระดับการลงโทษทางวินัย
detail: "", detail: "", //รายละเอียด
unStigma: "", unStigma: "", //ประเภทคำสั่ง
refCommandNo: "", refCommandNo: "", //เลขที่คำสั่ง
profileId: profileId.value, profileId: profileId.value,
refCommandDate: null, refCommandDate: null, //เอกสารอ้างอิง (ลงวันที่)
}); });
const rows = ref<RequestItemsObject[]>([]);
const mode = ref<string>("table"); const rows = ref<RequestItemsObject[]>([]); //รายการวินัย
const filterKeyword = ref<string>(""); const mode = ref<string>("table"); //การแสดงผล Table card
const formFilter = reactive<FormFilter>({ const filterKeyword = ref<string>(""); //คำค้นหา
page: 1,
pageSize: 12,
keyword: "",
type: "",
posType: "",
posLevel: "",
retireYear: "",
rangeYear: { min: 0, max: 60 },
isShowRetire: false,
isProbation: false,
});
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
const visibleColumns = ref<String[]>([
"level",
"detail",
"unStigma",
"refCommandNo",
"refCommandDate",
"date",
]);
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "date", name: "date",
@ -141,19 +120,25 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
const visibleColumns = ref<String[]>([
"level",
"detail",
"unStigma",
"refCommandNo",
"refCommandDate",
"date",
]);
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
const dateRef = ref<object | null>(null); const edit = ref<boolean>(false); //สถานะการแก้ไข
const detailRef = ref<object | null>(null); const modal = ref<boolean>(false); //แสดงข้อมูลวินัย
const refCommandNoRef = ref<object | null>(null); const modalHistory = ref<boolean>(false); //แสดงประวัติแก้ไขวินัย
const id = ref<string>(""); //id ที่ต้แงการแก้ไข
/** dialog */ const Ops = ref<DisciplineOps>({
const edit = ref<boolean>(false);
const modal = ref<boolean>(false);
const modalHistory = ref<boolean>(false);
const id = ref<string>("");
const Ops = ref<any>({
levelOptions: [ levelOptions: [
{ id: "0", name: "ไม่ร้ายแรง", disable: true }, { id: "0", name: "ไม่ร้ายแรง", disable: true },
{ id: "ภาคทัณฑ์", name: "ภาคทัณฑ์", disable: false }, { id: "ภาคทัณฑ์", name: "ภาคทัณฑ์", disable: false },
@ -173,7 +158,7 @@ const Ops = ref<any>({
{ id: "อื่นๆ", name: "อื่นๆ", disable: false }, { id: "อื่นๆ", name: "อื่นๆ", disable: false },
], ],
}); });
const OpsFilter = ref<any>({ const OpsFilter = ref<DisciplineOps>({
levelOptions: [ levelOptions: [
{ id: "0", name: "ไม่ร้ายแรง", disable: true }, { id: "0", name: "ไม่ร้ายแรง", disable: true },
{ id: "ภาคทัณฑ์", name: "ภาคทัณฑ์", disable: false }, { id: "ภาคทัณฑ์", name: "ภาคทัณฑ์", disable: false },
@ -349,6 +334,9 @@ function onSubmit() {
); );
} }
/**
* ทำงานเมื่อ Components ถูกเรียกใช้งาน
*/
onMounted(() => { onMounted(() => {
fetchData(profileId.value); fetchData(profileId.value);
}); });
@ -490,12 +478,7 @@ onMounted(() => {
</q-btn> </q-btn>
</q-td> </q-td>
<q-td v-for="col in props.cols" :key="col.id"> <q-td v-for="col in props.cols" :key="col.id">
<div v-if="col.name === 'no'"> <div>
{{
(formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
}}
</div>
<div v-else>
{{ col.value ? col.value : "-" }} {{ col.value ? col.value : "-" }}
</div> </div>
</q-td> </q-td>

70
src/modules/04_registryPerson/components/detail/GovernmentInformation/02_DisciplineHistory.vue
View file

@ -1,17 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch, reactive } from "vue"; import { ref, watch, reactive } from "vue";
import DialogHeader from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar, type QTableProps } from "quasar"; import { useQuasar, type QTableProps } from "quasar";
import { useRoute } from "vue-router";
import { useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/index/discipline"; import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/index/discipline";
const modal = defineModel<boolean>("modal", { required: true }); import DialogHeader from "@/components/DialogHeader.vue";
const id = defineModel<string>("id", { required: true });
const $q = useQuasar(); const $q = useQuasar();
const route = useRoute(); const route = useRoute();
@ -19,26 +17,16 @@ const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai, pathRegistryEmp } = const { showLoader, hideLoader, messageError, date2Thai, pathRegistryEmp } =
mixin; mixin;
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? "")); /**
const filterKeyword = ref<string>(""); * props
const rows = ref<RequestItemsObject[]>([]); //select data history */
const modal = defineModel<boolean>("modal", { required: true }); //แสดงประวัติแก้ไขวินัย
const id = defineModel<string>("id", { required: true }); //id วินัยที่ต้องการดูประวัติแก้ไขวินัย
const historyPagination = ref({ const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
page: 1,
rowsPerPage: 10, const filterKeyword = ref<string>(""); //คำค้นหา
}); const rows = ref<RequestItemsObject[]>([]); //รายการประวัติแก้ไขวินัย
const visibleColumns = ref<String[]>([
"level",
"detail",
"unStigma",
"refCommandNo",
"refCommandDate",
"date",
"createdFullName",
"createdAt",
"lastUpdateFullName",
"lastUpdatedAt",
]);
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "date", name: "date",
@ -132,18 +120,34 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
const visibleColumns = ref<String[]>([
"level",
"detail",
"unStigma",
"refCommandNo",
"refCommandDate",
"date",
"createdFullName",
"createdAt",
"lastUpdateFullName",
"lastUpdatedAt",
]);
const historyPagination = ref({
page: 1,
rowsPerPage: 10,
});
/** /**
* fetch ข้อมูลประวัติการแก่ไขข้อมูลวินัย * fetch ข้อมูลประวัติการแก่ไขข้อมูลวินัย
*/ */
function getHistory() { async function getHistory() {
showLoader(); showLoader();
http await http
.get( .get(
config.API.profileNewDisciplineHisByDisciplineId(id.value, empType.value) config.API.profileNewDisciplineHisByDisciplineId(id.value, empType.value)
) )
.then((res) => { .then(async (res) => {
let data = res.data.result; let data = await res.data.result;
rows.value = []; rows.value = [];
data.map((e: RequestItemsObject) => { data.map((e: RequestItemsObject) => {
rows.value.push({ rows.value.push({
@ -166,6 +170,11 @@ function getHistory() {
}); });
} }
/**
* ดูการเปลี่ยนแปลงของ modal
*
* ถ้า modal เป็น true เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไขวินัย
*/
watch(modal, (status) => { watch(modal, (status) => {
if (status == true) { if (status == true) {
getHistory(); getHistory();
@ -179,7 +188,10 @@ watch(modal, (status) => {
<template> <template>
<q-dialog v-model="modal" persistent> <q-dialog v-model="modal" persistent>
<q-card style="min-width: 80%"> <q-card style="min-width: 80%">
<DialogHeader tittle="ประวัติแก้ไขวินัย" :close="() => (modal = false)" /> <DialogHeader
tittle="ประวัติแก้ไขวินัย"
:close="() => ((modal = false), (rows = []))"
/>
<q-separator color="grey-4" /> <q-separator color="grey-4" />
<q-card-section style="max-height: 60vh" class="scroll"> <q-card-section style="max-height: 60vh" class="scroll">

133
src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue
View file

@ -1,25 +1,27 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { checkPermission } from "@/utils/permissions";
import { useRoute } from "vue-router";
import { useQuasar, type QTableProps } from "quasar"; import { useQuasar, type QTableProps } from "quasar";
import { useRoute } from "vue-router";
import { checkPermission } from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import DialogHeader from "@/components/DialogHeader.vue"; import http from "@/plugins/http";
import config from "@/app.config";
import type { import type {
DetailData, DetailData,
DataOptionLeave, DataOptionLeave,
DataOption, DataOption,
ResponseTotalObject, ResponseTotalObject,
} from "@/modules/04_registryPerson/interface/index/leave"; } from "@/modules/04_registryPerson/interface/index/leave";
import type {
DataLeave,
DataLeaveType,
} from "@/modules/04_registryPerson/interface/response/Main";
import DialogHeader from "@/components/DialogHeader.vue";
import DialogHistory from "@/modules/04_registryPerson/components/detail/GovernmentInformation/03_LeaveHistory.vue"; import DialogHistory from "@/modules/04_registryPerson/components/detail/GovernmentInformation/03_LeaveHistory.vue";
import http from "@/plugins/http";
import config from "@/app.config";
const rowsTotal = ref<ResponseTotalObject[]>([]);
const id = ref<string>("");
const route = useRoute(); const route = useRoute();
const $q = useQuasar(); const $q = useQuasar();
@ -39,7 +41,8 @@ const profileId = ref<string>(
route.params.id ? route.params.id.toString() : "" route.params.id ? route.params.id.toString() : ""
); );
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? "")); const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const rowsTotal = ref<ResponseTotalObject[]>([]);
const id = ref<string>("");
const pagination = ref({ const pagination = ref({
page: 1, page: 1,
rowsPerPage: 10, rowsPerPage: 10,
@ -47,21 +50,18 @@ const pagination = ref({
const mode = ref<string>("table"); const mode = ref<string>("table");
const filterKeyword = ref<string>(""); const filterKeyword = ref<string>("");
const rows = ref<DetailData[]>([]);
const modal = ref<boolean>(false); const modal = ref<boolean>(false);
const edit = ref<boolean>(false); const edit = ref<boolean>(false);
const modalHistory = ref<boolean>(false); const modalHistory = ref<boolean>(false);
const typeLeave = ref<DataOptionLeave | undefined | null>(); //ประเภทการลา
const dateRange = ref<[Date, Date]>([new Date(), new Date()]); //วัน เดือน ปีที่ล
const numLeave = ref<number>(1); //จำนวนวันที่ลา
const statLeave = ref<string>(""); //สถานะการลา
const reason = ref<string>(""); //เหตุผล const reason = ref<string>(""); //เหตุผล
const numLeave = ref<number>(1); const numUsedLeave = ref<number | undefined>(0);
const dateRange = ref<[Date, Date]>([new Date(), new Date()]);
const numUsedLeave = ref<number>(0);
const typeLeave = ref<any>();
const typeLeaveOption = ref<DataOptionLeave[]>([]); const typeLeaveOption = ref<DataOptionLeave[]>([]);
const typeLeaveOptionFilter = ref<DataOptionLeave[]>([]); const typeLeaveOptionFilter = ref<DataOptionLeave[]>([]);
const statLeave = ref<string>("");
const statLeaveOption = ref<DataOption[]>([ const statLeaveOption = ref<DataOption[]>([
{ id: "approve", name: "ผ่านการอนุมัติ" }, { id: "approve", name: "ผ่านการอนุมัติ" },
{ id: "reject", name: "ไม่ผ่านการอนุมัติ" }, { id: "reject", name: "ไม่ผ่านการอนุมัติ" },
@ -75,39 +75,8 @@ const statLeaveOptionFilter = ref<DataOption[]>([
{ id: "waitting", name: "รออนุมัติ" }, { id: "waitting", name: "รออนุมัติ" },
]); ]);
const statusLeave = (val: string) => { //Table
switch (val) { const rows = ref<DetailData[]>([]);
case "waitting":
return "รออนุมัติ";
case "reject":
return "ไม่ผ่านการอนุมัติ";
case "approve":
return "ผ่านการอนุมัติ";
case "cancel":
return "ยกเลิก";
default:
return "-";
}
};
const clickEditRowType = () => {
const filter = typeLeaveOptionFilter.value.filter(
(v: DataOptionLeave) => v.id == typeLeave.value
);
if (filter.length > 0) {
numUsedLeave.value = filter[0].totalLeave;
}
};
const visibleColumns = ref<String[]>([
"no",
"typeLeave",
"dateLeave",
"numLeave",
"status",
"reason",
]);
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "no", name: "no",
@ -176,6 +145,38 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
const visibleColumns = ref<String[]>([
"no",
"typeLeave",
"dateLeave",
"numLeave",
"status",
"reason",
]);
const statusLeave = (val: string) => {
switch (val) {
case "waitting":
return "รออนุมัติ";
case "reject":
return "ไม่ผ่านการอนุมัติ";
case "approve":
return "ผ่านการอนุมัติ";
case "cancel":
return "ยกเลิก";
default:
return "-";
}
};
const clickEditRowType = () => {
const filter = typeLeaveOptionFilter.value.filter(
(v: DataOptionLeave) => v.id == typeLeave.value?.id
);
if (filter.length > 0) {
numUsedLeave.value = filter[0].totalLeave;
}
};
/** /**
* function เปิด dialog ข้อมูลการลา * function เปิด dialog ข้อมูลการลา
@ -187,7 +188,7 @@ function openDialogAdd() {
http http
.get(config.API.profileNewLeaveType()) .get(config.API.profileNewLeaveType())
.then((res) => { .then((res) => {
const dataOp = res.data.result.map((item: any) => ({ const dataOp = res.data.result.map((item: DataLeaveType) => ({
id: item.id, id: item.id,
name: item.name, name: item.name,
code: item.code, code: item.code,
@ -271,7 +272,7 @@ function closeDialog() {
modal.value = false; modal.value = false;
edit.value = false; edit.value = false;
id.value = ""; id.value = "";
typeLeave.value = ""; typeLeave.value = null;
statLeave.value = ""; statLeave.value = "";
reason.value = ""; reason.value = "";
dateRange.value = [new Date(), new Date()]; dateRange.value = [new Date(), new Date()];
@ -285,7 +286,7 @@ function closeDialog() {
* @param update function * @param update function
* @param filtername type select * @param filtername type select
*/ */
function filterSelector(val: any, update: Function, filtername: string) { function filterSelector(val: string, update: Function, filtername: string) {
switch (filtername) { switch (filtername) {
case "typeLeaveOption": case "typeLeaveOption":
update(() => { update(() => {
@ -350,7 +351,7 @@ function saveData() {
showLoader(); showLoader();
http http
.post(config.API.profileNewLeave(empType.value), { .post(config.API.profileNewLeave(empType.value), {
leaveTypeId: typeLeave.value.id, leaveTypeId: typeLeave.value?.id,
dateLeaveStart: dateToISO(dateRange.value[0]), dateLeaveStart: dateToISO(dateRange.value[0]),
dateLeaveEnd: dateToISO(dateRange.value[1]), dateLeaveEnd: dateToISO(dateRange.value[1]),
leaveDays: numLeave.value, leaveDays: numLeave.value,
@ -377,11 +378,11 @@ function saveData() {
/** /**
* บันทึกแก้ไขข้อมูล * บันทึกแก้ไขข้อมูล
*/ */
const editData = async () => { async function editData() {
showLoader(); showLoader();
http http
.patch(config.API.profileNewLeaveById(id.value, empType.value), { .patch(config.API.profileNewLeaveById(id.value, empType.value), {
leaveTypeId: typeLeave.value.id, leaveTypeId: typeLeave.value?.id,
dateLeaveStart: dateToISO(dateRange.value[0]), dateLeaveStart: dateToISO(dateRange.value[0]),
dateLeaveEnd: dateToISO(dateRange.value[1]), dateLeaveEnd: dateToISO(dateRange.value[1]),
leaveDays: numLeave.value, leaveDays: numLeave.value,
@ -401,19 +402,18 @@ const editData = async () => {
.finally(() => { .finally(() => {
hideLoader(); hideLoader();
}); });
}; }
/** /**
* function fetch ข้อมูลรายการวินัย * function fetch ข้อมูลรายการลา
*/ */
function getData() { async function getData() {
showLoader(); showLoader();
http await http
.get(config.API.profileNewLeaveById(profileId.value, empType.value)) .get(config.API.profileNewLeaveById(profileId.value, empType.value))
.then((res) => { .then(async (res) => {
console.log(res.data.result); const data = await res.data.result;
const data = res.data.result; rows.value = data.map((item: DataLeave) => ({
rows.value = data.map((item: any) => ({
id: item.id, id: item.id,
typeLeave: item.leaveType.name, typeLeave: item.leaveType.name,
code: item.leaveType.refCommandDate, code: item.leaveType.refCommandDate,
@ -433,6 +433,9 @@ function getData() {
}); });
} }
/**
* ทำงานเมื่อ Components ถูกเรียกใช้งาน
*/
onMounted(() => { onMounted(() => {
getData(); getData();
}); });

62
src/modules/04_registryPerson/components/detail/GovernmentInformation/03_LeaveHistory.vue
View file

@ -1,10 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch, reactive } from "vue"; import { ref, watch, reactive } from "vue";
import DialogHeader from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar, type QTableProps } from "quasar"; import { useQuasar, type QTableProps } from "quasar";
import { useRoute } from "vue-router";
import { useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
@ -12,6 +11,9 @@ import type {
DetailData, DetailData,
FormFilter, FormFilter,
} from "@/modules/04_registryPerson/interface/index/leave"; } from "@/modules/04_registryPerson/interface/index/leave";
import type { DataLeave } from "@/modules/04_registryPerson/interface/response/Main";
import DialogHeader from "@/components/DialogHeader.vue";
const modal = defineModel<boolean>("modal", { required: true }); const modal = defineModel<boolean>("modal", { required: true });
const id = defineModel<string>("id", { required: true }); const id = defineModel<string>("id", { required: true });
@ -25,7 +27,7 @@ const { showLoader, hideLoader, messageError, date2Thai, pathRegistryEmp } =
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? "")); const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const filterKeyword = ref<string>(""); const filterKeyword = ref<string>("");
const rows = ref<DetailData[]>([]); //select data history const rows = ref<DetailData[]>([]); //data history
const formFilter = reactive<FormFilter>({ const formFilter = reactive<FormFilter>({
page: 1, page: 1,
pageSize: 12, pageSize: 12,
@ -39,22 +41,6 @@ const formFilter = reactive<FormFilter>({
isProbation: false, isProbation: false,
}); });
const historyPagination = ref({
page: 1,
rowsPerPage: 10,
});
const visibleColumns = ref<String[]>([
"no",
"typeLeave",
"dateLeave",
"numLeave",
"sumLeave",
"totalLeave",
"status",
"reason",
"lastUpdateFullName",
"lastUpdatedAt",
]);
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "no", name: "no",
@ -146,18 +132,34 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
const visibleColumns = ref<String[]>([
"no",
"typeLeave",
"dateLeave",
"numLeave",
"sumLeave",
"totalLeave",
"status",
"reason",
"lastUpdateFullName",
"lastUpdatedAt",
]);
const historyPagination = ref({
page: 1,
rowsPerPage: 10,
});
/** /**
* function fetch ข้อมูลประวัติการแก้ไขการลา * function fetch ข้อมูลประวัติการแก้ไขการลา
*/ */
function getHistory() { async function getHistory() {
showLoader(); showLoader();
http await http
.get(config.API.profileNewLeaveHistory(id.value, empType.value)) .get(config.API.profileNewLeaveHistory(id.value, empType.value))
.then((res) => { .then(async (res) => {
let data = res.data.result; let data = await res.data.result;
rows.value = []; rows.value = [];
data.map((e: any) => { data.map((e: DataLeave) => {
rows.value.push({ rows.value.push({
...e, ...e,
id: e.id, id: e.id,
@ -215,6 +217,11 @@ function statusLeave(val: string) {
} }
} }
/**
* ดูการเปลี่ยนแปลงของ modal
*
* ถ้า modal เป็น true เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
*/
watch(modal, (status) => { watch(modal, (status) => {
if (status == true) { if (status == true) {
getHistory(); getHistory();
@ -228,7 +235,10 @@ watch(modal, (status) => {
<template> <template>
<q-dialog v-model="modal" persistent> <q-dialog v-model="modal" persistent>
<q-card style="min-width: 80%"> <q-card style="min-width: 80%">
<DialogHeader tittle="ประวัติแก้ไขการลา" :close="() => (modal = false)" /> <DialogHeader
tittle="ประวัติแก้ไขการลา"
:close="() => ((modal = false), (rows = []))"
/>
<q-separator color="grey-4" /> <q-separator color="grey-4" />
<q-card-section style="max-height: 60vh" class="scroll"> <q-card-section style="max-height: 60vh" class="scroll">
<div class="row q-gutter-sm q-mb-sm"> <div class="row q-gutter-sm q-mb-sm">

111
src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
View file

@ -1,26 +1,19 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, onMounted } from "vue"; import { ref, reactive, onMounted } from "vue";
import { checkPermission } from "@/utils/permissions";
import { useQuasar, type QTableProps } from "quasar"; import { useQuasar, type QTableProps } from "quasar";
import type {
FormFilter,
RequestItemsObject,
} from "@/modules/04_registryPerson/interface/index/performSpecialWork";
import { useRoute } from "vue-router";
import { checkPermission } from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin"; import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/index/performSpecialWork";
import DialogHeader from "@/components/DialogHeader.vue"; import DialogHeader from "@/components/DialogHeader.vue";
import DialogHistory from "@/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue"; import DialogHistory from "@/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue";
import { useRoute } from "vue-router";
const route = useRoute(); const route = useRoute();
const profileId = ref<string>(
route.params.id ? route.params.id.toString() : ""
);
const $q = useQuasar(); const $q = useQuasar();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
@ -34,53 +27,29 @@ const {
pathRegistryEmp, pathRegistryEmp,
} = mixin; } = mixin;
const profileId = ref<string>(
route.params.id ? route.params.id.toString() : ""
);
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? "")); const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const modal = ref<boolean>(false); const id = ref<string>(""); //id ที่ต้องการแก้ไข
const edit = ref<boolean>(false); const modal = ref<boolean>(false); //แสดง popup ข้อมูลปฏิบัติราชการพิเศษ
const modalHistory = ref<boolean>(false); const modalHistory = ref<boolean>(false); //แสดง popup ประวัติการแก้ไขข้อมูลปฏิบัติราชการพิเศษ
const edit = ref<boolean>(false); //สถานะการแก่ไข
const id = ref<string>(""); //ฟอร์มข้อมูลปฏิบัติราชการพิเศษ
const dutyData = reactive<RequestItemsObject>({ const dutyData = reactive<RequestItemsObject>({
profileId: profileId.value, profileId: profileId.value,
dateStart: new Date(), dateStart: new Date(), //วันที่เริ่มต้น
dateEnd: null, dateEnd: null, //วันที่สิ้นสุด
detail: "", detail: "", //รายละเอียด
reference: "", reference: "", //เอกสารอ้างอิง
refCommandNo: "", refCommandNo: "", //เลขที่คำสั่ง
refCommandDate: null, refCommandDate: null, //'เอกสารอ้างอิง (ลงวันที่)'
}); });
const pagination = ref({ const mode = ref<string>("table"); //การแสดงผล Table card
page: 1, const filterKeyword = ref<string>(""); //คำค้นหา
rowsPerPage: 10, const rows = ref<RequestItemsObject[]>([]); //รายการปฏิบัติราชการพิเศษ
});
const rows = ref<RequestItemsObject[]>([]);
const filterKeyword = ref<string>("");
const mode = ref<string>("table");
const formFilter = reactive<FormFilter>({
page: 1,
pageSize: 12,
keyword: "",
type: "",
posType: "",
posLevel: "",
retireYear: "",
rangeYear: { min: 0, max: 60 },
isShowRetire: false,
isProbation: false,
});
const visibleColumns = ref<String[]>([
"dateStart",
"dateEnd",
"detail",
"reference",
"refCommandNo",
"refCommandDate",
]);
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "dateStart", name: "dateStart",
@ -152,6 +121,18 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
const visibleColumns = ref<String[]>([
"dateStart",
"dateEnd",
"detail",
"reference",
"refCommandNo",
"refCommandDate",
]);
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
/** เปิด dialog */ /** เปิด dialog */
function openDialogAdd() { function openDialogAdd() {
@ -184,7 +165,6 @@ function openDialogHistory(idOrder: string) {
function closeDialog() { function closeDialog() {
modal.value = false; modal.value = false;
edit.value = false; edit.value = false;
dutyData.dateStart = new Date(); dutyData.dateStart = new Date();
dutyData.dateEnd = null; dutyData.dateEnd = null;
dutyData.detail = ""; dutyData.detail = "";
@ -196,12 +176,12 @@ function closeDialog() {
/** /**
* fetch ข้อมูลรายการพิเศษ * fetch ข้อมูลรายการพิเศษ
*/ */
function fetchData(id: string) { async function fetchData(id: string) {
showLoader(); showLoader();
http await http
.get(config.API.profileNewDutyByProfileId(id, empType.value)) .get(config.API.profileNewDutyByProfileId(id, empType.value))
.then(async (res) => { .then(async (res) => {
rows.value = res.data.result; rows.value = await res.data.result;
}) })
.catch((err) => { .catch((err) => {
messageError($q, err); messageError($q, err);
@ -278,6 +258,9 @@ function onSubmit() {
); );
} }
/**
* ทำงานเมื่อ Components ถูกเรียกใช้งาน
*/
onMounted(() => { onMounted(() => {
fetchData(profileId.value); fetchData(profileId.value);
}); });
@ -418,13 +401,7 @@ onMounted(() => {
</q-btn> </q-btn>
</q-td> </q-td>
<q-td v-for="col in props.cols" :key="col.id"> <q-td v-for="col in props.cols" :key="col.id">
<div v-if="col.name === 'no'"> <div>
{{
(formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
}}
</div>
<div v-else>
{{ col.value ? col.value : "-" }} {{ col.value ? col.value : "-" }}
</div> </div>
</q-td> </q-td>
@ -541,7 +518,7 @@ onMounted(() => {
outlined outlined
dense dense
:model-value="date2Thai(dutyData.dateStart)" :model-value="date2Thai(dutyData.dateStart)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]" :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
hide-bottom-space hide-bottom-space
:label="`${'วันที่เริ่มต้น'}`" :label="`${'วันที่เริ่มต้น'}`"
> >
@ -580,7 +557,7 @@ onMounted(() => {
dense dense
outlined outlined
:model-value="date2Thai(dutyData.dateEnd)" :model-value="date2Thai(dutyData.dateEnd)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]" :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
hide-bottom-space hide-bottom-space
:label="`${'วันที่สิ้นสุด'}`" :label="`${'วันที่สิ้นสุด'}`"
> >
@ -605,7 +582,7 @@ onMounted(() => {
lazy-rules lazy-rules
autogrow autogrow
v-model="dutyData.reference" v-model="dutyData.reference"
:rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
hide-bottom-space hide-bottom-space
:label="`${'เอกสารอ้างอิง'}`" :label="`${'เอกสารอ้างอิง'}`"
/> />
@ -619,7 +596,7 @@ onMounted(() => {
lazy-rules lazy-rules
autogrow autogrow
v-model="dutyData.detail" v-model="dutyData.detail"
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
hide-bottom-space hide-bottom-space
:label="`${'รายละเอียด'}`" :label="`${'รายละเอียด'}`"
/> />

47
src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch, reactive } from "vue"; import { ref, watch } from "vue";
import DialogHeader from "@/components/DialogHeader.vue"; import DialogHeader from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import { useQuasar, type QTableProps } from "quasar"; import { useQuasar, type QTableProps } from "quasar";
@ -7,10 +7,7 @@ import { useQuasar, type QTableProps } from "quasar";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import type { import type { ResponseObject } from "@/modules/04_registryPerson/interface/index/performSpecialWork";
FormFilter,
ResponseObject,
} from "@/modules/04_registryPerson/interface/index/performSpecialWork";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
const modal = defineModel<boolean>("modal", { required: true }); const modal = defineModel<boolean>("modal", { required: true });
@ -24,23 +21,8 @@ const { showLoader, hideLoader, messageError, date2Thai, pathRegistryEmp } =
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? "")); const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const filterKeyword = ref<string>(""); const filterKeyword = ref<string>(""); //คำค้นหา
const rows = ref<ResponseObject[]>([]); //select data history const rows = ref<ResponseObject[]>([]); //data history
const historyPagination = ref({
page: 1,
rowsPerPage: 10,
});
const visibleColumns = ref<String[]>([
"dateStart",
"dateEnd",
"detail",
"reference",
"refCommandNo",
"refCommandDate",
"lastUpdateFullName",
"lastUpdatedAt",
]);
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "dateStart", name: "dateStart",
@ -135,6 +117,20 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
const visibleColumns = ref<String[]>([
"dateStart",
"dateEnd",
"detail",
"reference",
"refCommandNo",
"refCommandDate",
"lastUpdateFullName",
"lastUpdatedAt",
]);
const historyPagination = ref({
page: 1,
rowsPerPage: 10,
});
/** /**
* function fetch ข้อมูลประวติการแก้ไขข้อมูล * function fetch ข้อมูลประวติการแก้ไขข้อมูล
@ -171,6 +167,11 @@ function getHistory() {
}); });
} }
/**
* ดูการเปลี่ยนแปลงของ modal
*
* ถ้า modal เป็น true เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
*/
watch(modal, (status) => { watch(modal, (status) => {
if (status == true) { if (status == true) {
getHistory(); getHistory();
@ -186,7 +187,7 @@ watch(modal, (status) => {
<q-card style="min-width: 80%"> <q-card style="min-width: 80%">
<DialogHeader <DialogHeader
tittle="ประวัติแก้ไขปฏิบัติราชการพิเศษ" tittle="ประวัติแก้ไขปฏิบัติราชการพิเศษ"
:close="() => (modal = false)" :close="() => ((modal = false), (rows = []))"
/> />
<q-card-section style="max-height: 60vh" class="scroll"> <q-card-section style="max-height: 60vh" class="scroll">
<div class="row q-gutter-sm q-mb-sm"> <div class="row q-gutter-sm q-mb-sm">

8
src/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue
View file

@ -2,10 +2,10 @@
import { ref } from "vue"; import { ref } from "vue";
/** importComponents*/ /** importComponents*/
import Info from "@/modules/04_registryPerson/components/detail/GovernmentInformation/01_Info.vue"; import Info from "@/modules/04_registryPerson/components/detail/GovernmentInformation/01_Info.vue"; //ข้อมูลราชการ
import Discipline from "@/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue"; import Discipline from "@/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue"; //วินัย
import Leave from "@/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue"; import Leave from "@/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue"; //การลา
import PerformSpecialWork from "@/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue"; import PerformSpecialWork from "@/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue"; //ปฏิบัติราชการพิเศษ
const tab = ref<string>("1"); const tab = ref<string>("1");
</script> </script>

100
src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue
View file

@ -1,19 +1,18 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar, type QTableProps } from "quasar"; import { useQuasar, type QTableProps } from "quasar";
import { checkPermission } from "@/utils/permissions";
import { ref, onMounted, reactive } from "vue";
import type {
RowList,
FormFilter,
MyObjectRef,
} from "@/modules/04_registryPerson/interface/index/other";
import { useRoute } from "vue-router";
import { checkPermission } from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import type { RowList } from "@/modules/04_registryPerson/interface/index/other";
import DialogHeader from "@/components/DialogHeader.vue"; import DialogHeader from "@/components/DialogHeader.vue";
import { useRoute } from "vue-router";
import DialogHistory from "@/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue"; import DialogHistory from "@/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue";
const route = useRoute(); const route = useRoute();
const $q = useQuasar(); const $q = useQuasar();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
@ -29,28 +28,22 @@ const {
const id = ref<string>(""); const id = ref<string>("");
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
const profileId = ref<string>( const profileId = ref<string>(
route.params.id ? route.params.id.toString() : "" route.params.id ? route.params.id.toString() : ""
); );
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? "")); const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const mode = ref<string>("table"); const mode = ref<string>("table"); //การแสดงผล Table,Card
const filterKeyword = ref<string>(""); const modal = ref<boolean>(false); //แสดง popup ข้อมูลอื่นๆ
const modalHistory = ref<boolean>(false); //แสดง popup ประวัติแก้ไข
const edit = ref<boolean>(false); //สถานะการแก้ไขข้อมูล
const date = ref<Date | null>(null); //วันที่
const detail = ref<string>(""); //รายละเอียด
//Table
const rows = ref<RowList[]>([]); const rows = ref<RowList[]>([]);
const filterKeyword = ref<string>("");
/** modal */
const modal = ref<boolean>(false);
const edit = ref<boolean>(false);
const modalHistory = ref<boolean>(false);
const date = ref<Date | null>(null);
const detail = ref<string>();
const visibleColumns = ref<String[]>(["date", "detail"]);
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "date", name: "date",
@ -74,8 +67,33 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
const visibleColumns = ref<String[]>(["date", "detail"]);
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
/** เปิด dialog */ /**
* fetch รายการข้อมูลอื่นๆ
*/
async function getData() {
showLoader();
await http
.get(config.API.profileNewOtherByProfileId(profileId.value, empType.value))
.then((res) => {
rows.value = res.data.result;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/**
* เปิด dialog ข้อมูลอื่นๆ
*/
function openDialogAdd() { function openDialogAdd() {
modal.value = true; modal.value = true;
} }
@ -91,7 +109,9 @@ function openDialogEdit(props: RowList) {
date.value = props.date; date.value = props.date;
detail.value = props.detail; detail.value = props.detail;
} }
/** dialog ประติ
/**
* dialog ประติ
* @param id id รายการ * @param id id รายการ
*/ */
function openDialogHistory(idOrder: string) { function openDialogHistory(idOrder: string) {
@ -99,7 +119,9 @@ function openDialogHistory(idOrder: string) {
modalHistory.value = true; modalHistory.value = true;
} }
/** ปิด dialog */ /**
* ปิด dialog
*/
function closeDialog() { function closeDialog() {
modal.value = false; modal.value = false;
edit.value = false; edit.value = false;
@ -107,7 +129,9 @@ function closeDialog() {
detail.value = ""; detail.value = "";
} }
/** validate check*/ /**
* validate check
*/
function validateForm() { function validateForm() {
dialogConfirm( dialogConfirm(
$q, $q,
@ -171,24 +195,6 @@ function editData() {
}); });
} }
/**
* fetch รายการข้อมูลอื่นๆ
*/
function getData() {
showLoader();
http
.get(config.API.profileNewOtherByProfileId(profileId.value, empType.value))
.then((res) => {
rows.value = res.data.result;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
onMounted(() => { onMounted(() => {
getData(); getData();
}); });

68
src/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue
View file

@ -1,56 +1,32 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch, reactive } from "vue"; import { ref, watch } from "vue";
import DialogHeader from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar, type QTableProps } from "quasar"; import { useQuasar, type QTableProps } from "quasar";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import type { RowList } from "@/modules/04_registryPerson/interface/index/other";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import type { import type { RowList } from "@/modules/04_registryPerson/interface/index/other";
RequestItemsObject,
FormFilter,
} from "@/modules/04_registryPerson/interface/index/discipline";
const modal = defineModel<boolean>("modal", { required: true }); import DialogHeader from "@/components/DialogHeader.vue";
const id = defineModel<string>("id", { required: true });
const $q = useQuasar(); const $q = useQuasar();
const route = useRoute(); const route = useRoute();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai, pathRegistryEmp } = const { showLoader, hideLoader, messageError, date2Thai, pathRegistryEmp } =
mixin; mixin;
const historyPagination = ref({
page: 1, /**
rowsPerPage: 10, * props
}); */
const currentPage = ref<number>(1); const modal = defineModel<boolean>("modal", { required: true });
const maxPage = ref<number>(1); const id = defineModel<string>("id", { required: true });
const filterKeyword = ref<string>("");
const rows = ref<RowList[]>([]); //select data history
const formFilter = reactive<FormFilter>({
page: 1,
pageSize: 12,
keyword: "",
type: "",
posType: "",
posLevel: "",
retireYear: "",
rangeYear: { min: 0, max: 60 },
isShowRetire: false,
isProbation: false,
});
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? "")); const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const visibleColumns = ref<String[]>([ const rows = ref<RowList[]>([]); // data history
"date", const filterKeyword = ref<string>("");
"detail",
"lastUpdateFullName",
"lastUpdatedAt",
]);
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "date", name: "date",
@ -97,6 +73,16 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
const visibleColumns = ref<String[]>([
"date",
"detail",
"lastUpdateFullName",
"lastUpdatedAt",
]);
/**
* ฟังก์ชันดึงข้อมูลประวัติการแก่ไขข้อมูล
*/
function getHistory() { function getHistory() {
showLoader(); showLoader();
http http
@ -122,12 +108,18 @@ function getHistory() {
}); });
} }
/**
* ดูการเปลี่ยนแปลงของ modal
*
* ถ้า modal เป็น true เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
*/
watch(modal, (status) => { watch(modal, (status) => {
if (status == true) { if (status == true) {
getHistory(); getHistory();
filterKeyword.value = ""; filterKeyword.value = "";
} else { } else {
filterKeyword.value = ""; filterKeyword.value = "";
rows.value = [];
} }
}); });
</script> </script>

66
src/modules/04_registryPerson/components/detail/Other/02_Document.vue
View file

@ -1,14 +1,16 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { checkPermission } from "@/utils/permissions"; import { useQuasar } from "quasar";
import axios from "axios";
import { checkPermission } from "@/utils/permissions";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import axios from "axios";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type { ArrayFileList } from "@/modules/04_registryPerson/interface/index/document"; import type { ArrayFileList } from "@/modules/04_registryPerson/interface/index/document";
const $q = useQuasar(); const $q = useQuasar();
const route = useRoute(); const route = useRoute();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
@ -21,12 +23,15 @@ const {
dialogRemove, dialogRemove,
} = mixin; } = mixin;
const documentFile = ref<any>(null);
const fileList = ref<ArrayFileList[]>([]);
const profileId = ref<string>( const profileId = ref<string>(
route.params.id ? route.params.id.toString() : "" route.params.id ? route.params.id.toString() : ""
); );
const documentFile = ref<any>(null);
const fileList = ref<ArrayFileList[]>([]); //รายการเอกสารหลักฐาน
/**
* ฟังก์ชันดึงข้อมูลรายการเอกสารหลักฐาน
*/
async function getData() { async function getData() {
showLoader(); showLoader();
await http await http
@ -45,31 +50,8 @@ async function getData() {
} }
/** /**
* ฟังก์ชั่นสำหรับอัพโหลดไฟล์เอกสารหลักฐาน * ฟังก์ชั่นสร้าง Path สำหรับอัพโหลดไฟล์เอกสารหลักฐาน
*/ */
async function uploadFileDoc(uploadUrl: string, file: any) {
const Data = new FormData();
Data.append("file", documentFile.value);
showLoader();
await axios
.put(uploadUrl, file, {
headers: {
"Content-Type": file.type,
},
})
.then(async () => {
await getData();
success($q, "อัปโหลดไฟล์สำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
documentFile.value = null;
});
}
function clickUpload(file: any) { function clickUpload(file: any) {
const fileName = { fileName: file.name }; const fileName = { fileName: file.name };
dialogConfirm( dialogConfirm(
@ -109,6 +91,32 @@ function clickUpload(file: any) {
); );
} }
/**
* ฟังก์ชั่นสำหรับอัพโหลดไฟล์เอกสารหลักฐาน
*/
async function uploadFileDoc(uploadUrl: string, file: any) {
const Data = new FormData();
Data.append("file", documentFile.value);
showLoader();
await axios
.put(uploadUrl, file, {
headers: {
"Content-Type": file.type,
},
})
.then(async () => {
await getData();
success($q, "อัปโหลดไฟล์สำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
documentFile.value = null;
});
}
/** /**
* ดาวน์โหลดลิงก์ไฟล์ * ดาวน์โหลดลิงก์ไฟล์
* @param fileName file name * @param fileName file name

52
src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
View file

@ -1,15 +1,18 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, watch, ref, reactive } from "vue"; import { onMounted, watch, ref, reactive } from "vue";
import { useQuasar } from "quasar";
import { checkPermission } from "@/utils/permissions"; import { checkPermission } from "@/utils/permissions";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { useQuasar } from "quasar"; import { useCounterMixin } from "@/stores/mixin";
import { useProfileDataStore } from "@/modules/04_registryPerson/stores/profile";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
/** /**
* importType * importType
*/ */
import type { QTableColumn, QForm } from "quasar"; import type { QTableColumn } from "quasar";
import type { RequestObject } from "@/modules/04_registryPerson/interface/request/Profile"; import type { RequestObject } from "@/modules/04_registryPerson/interface/request/Profile";
import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Profile"; import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Profile";
@ -18,12 +21,6 @@ import type { ResponseObject } from "@/modules/04_registryPerson/interface/respo
*/ */
import DialogHeader from "@/components/DialogHeader.vue"; import DialogHeader from "@/components/DialogHeader.vue";
/**
* importStore
*/
import { useCounterMixin } from "@/stores/mixin";
import { useProfileDataStore } from "@/modules/04_registryPerson/stores/profile";
/** /**
* use * use
*/ */
@ -59,14 +56,14 @@ const empType = ref<string>(
: "-employee" : "-employee"
); );
const modal = ref<boolean>(false);
const informaData = ref<ResponseObject>();
const rowsHistory = ref<ResponseObject[]>([]);
const filterHistory = ref<string>("");
const modalHistory = ref<boolean>(false);
const id = ref<string>(""); const id = ref<string>("");
const age = ref<string | null>(""); const modal = ref<boolean>(false); // แสดงฟอร์มแก้ไขประวัติส่วนตัว
const formData = reactive<RequestObject>(store.defaultProfile); const informaData = ref<ResponseObject>(); // ข้อมูลส่วนคัว
const rowsHistory = ref<ResponseObject[]>([]); // ช้อมูลรายการประวัติการแก้ไข
const filterHistory = ref<string>(""); //คำค้นหาช้อมูลรายการประวัติการแก้ไข
const modalHistory = ref<boolean>(false); // แสดงช้อมูลรายการประวัติการแก้ไข
const age = ref<string | null>(""); //อายุ
const formData = reactive<RequestObject>(store.defaultProfile); //ฟอร์มข้อมูลการแก่้ไข
/** ข้อมูล Label*/ /** ข้อมูล Label*/
const dataLabel = { const dataLabel = {
@ -81,7 +78,6 @@ const dataLabel = {
religion: "ศาสนา", religion: "ศาสนา",
bloodGroup: "หมู่เลือด", bloodGroup: "หมู่เลือด",
phone: "เบอร์โทร", phone: "เบอร์โทร",
prefix: "คำนำหน้าชื่อ", prefix: "คำนำหน้าชื่อ",
rank: "ยศ", rank: "ยศ",
firstName: "ชื่อ", firstName: "ชื่อ",
@ -286,16 +282,18 @@ const pagination = ref({
/** /**
* function เรียกข้อมูลข้อมูลส่วนตัว * function เรียกข้อมูลข้อมูลส่วนตัว
*
*/ */
function getData() { async function getData() {
showLoader(); showLoader();
http await http
.get(config.API.registryNewByProfileId(profileId.value, empType.value)) .get(config.API.registryNewByProfileId(profileId.value, empType.value))
.then((res) => { .then((res) => {
informaData.value = res.data.result; informaData.value = res.data.result;
id.value = res.data.result.id; id.value = res.data.result.id;
if (res.data.result.birthDate) { if (res.data.result.birthDate) {
// กำหนดอายุ ส่งวันเกิดไปคำนวน
age.value = calculateAge(res.data.result.birthDate); age.value = calculateAge(res.data.result.birthDate);
} }
}) })
@ -347,8 +345,8 @@ function onSubmit() {
.then(async () => { .then(async () => {
await props.fetchDataPersonal?.(); await props.fetchDataPersonal?.();
await getData(); await getData();
modal.value = false;
await success($q, "บันทึกข้อมูลสำเร็จ"); await success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
}) })
.catch((e) => { .catch((e) => {
messageError($q, e); messageError($q, e);
@ -365,13 +363,13 @@ function onSubmit() {
/** /**
* function ดูข้อมูลประวัติแก้ไขข้อมูลส่วนตัว * function ดูข้อมูลประวัติแก้ไขข้อมูลส่วนตัว
*/ */
function clickHistory() { async function clickHistory() {
modalHistory.value = true; modalHistory.value = true;
filterHistory.value = ""; filterHistory.value = "";
http await http
.get(config.API.profileNewProfileHisById(id.value, empType.value)) .get(config.API.profileNewProfileHisById(id.value, empType.value))
.then((res) => { .then(async (res) => {
rowsHistory.value = res.data.result; rowsHistory.value = await res.data.result;
}) })
.catch((e) => { .catch((e) => {
messageError($q, e); messageError($q, e);
@ -413,6 +411,9 @@ function calculateMaxDate() {
return today; return today;
} }
/**
* ดูการเปลี่ยนแปลงของวันเกิดเมื่อมีการเปลี่ยนแปลงจะคำนวนอายูใหม่
*/
watch( watch(
() => formData.birthDate, () => formData.birthDate,
(v) => { (v) => {
@ -422,6 +423,9 @@ watch(
} }
); );
/**
* ทำงานเมื่อ Components ถูกเรียกใช้งาน
*/
onMounted(() => { onMounted(() => {
const promises = []; const promises = [];
@ -837,7 +841,7 @@ onMounted(() => {
<q-card style="min-width: 80%"> <q-card style="min-width: 80%">
<DialogHeader <DialogHeader
tittle="ประวัติแก้ไขข้อมูลส่วนตัว" tittle="ประวัติแก้ไขข้อมูลส่วนตัว"
:close="() => (modalHistory = false)" :close="() => ((modalHistory = false), (rowsHistory = []))"
/> />
<q-separator /> <q-separator />

489
src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue
View file

@ -1,9 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref, useAttrs, reactive, watch } from "vue"; import { onMounted, ref, useAttrs, reactive, watch } from "vue";
import { checkPermission } from "@/utils/permissions";
import { useRoute } from "vue-router";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import axios from "axios"; import axios from "axios";
import { checkPermission } from "@/utils/permissions";
import { useRoute } from "vue-router";
import { useProfileDataStore } from "@/modules/04_registryPerson/stores/profile";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
@ -12,18 +15,14 @@ import config from "@/app.config";
*/ */
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import type { ResponseObject } from "@/components/information/interface/response/OldName"; import type { ResponseObject } from "@/components/information/interface/response/OldName";
import type { DataProfile } from "@/modules/04_registryPerson/interface/response/Main";
import type { FormChangeName } from "@/modules/04_registryPerson/interface/request/Main";
/** /**
* importComponents * importComponents
*/ */
import dialogHeader from "@/components/DialogHeader.vue"; import dialogHeader from "@/components/DialogHeader.vue";
/**
* importStore
*/
import { useProfileDataStore } from "@/modules/04_registryPerson/stores/profile";
import { useCounterMixin } from "@/stores/mixin";
/** /**
* use * use
*/ */
@ -49,36 +48,35 @@ const props = defineProps({
fetchDataPersonal: { type: Function, require: true }, fetchDataPersonal: { type: Function, require: true },
}); });
const submitDisable = ref<boolean>(true); const profileId = ref<string>(route.params.id.toString()); //id Profile
const profileId = ref<string>(route.params.id.toString()); const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? "")); // ประเภทข้าราชการ
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const submitDisable = ref<boolean>(true); //แเสดงปุ่มบันทึก
const editId = ref<string>(""); const editId = ref<string>("");
const dialog = ref<boolean>(false); const dialog = ref<boolean>(false); // แสดง popup เปลี่ยนชื่อ-นามสกุล
const dialogStatus = ref<string>("create"); const dialogStatus = ref<string>("create"); // สถานะแก้ไข สร้าง
const filterSearch = ref(""); const filterSearch = ref<string>(""); // คำค้นหา
const historyDialog = ref<boolean>(false); // แสดงประวัติการแก่้ไข
const historyDialog = ref<boolean>(false); const historyKeyword = ref<string>(""); // คำค้นหาประวัติ
const historyKeyword = ref<string>(""); // ฟอร์มการเปลี่ยนชื่อ
const changeNameData = reactive<FormChangeName>({
const changeNameData = reactive({
profileId: profileId.value, profileId: profileId.value,
prefixId: "", prefixId: "", // id คำนำหน้า
prefix: "", prefix: "", // คำนำหน้า
firstName: "", firstName: "", // ชื่อ
lastName: "", lastName: "", // นามสกุล
status: "", status: "", // สถานะ
documentId: "", documentId: "", // ไฟล์หลักฐาน
}); });
const selection = ref<string[]>([]); const selection = ref<string[]>([]); // ตัวเลือก
const prefixChange = ref<string>(""); const prefixChange = ref<string | null | undefined>(""); // เปลี่ยนคำนำหน้า
const firstNameChange = ref<string>(""); const firstNameChange = ref<string | null | undefined>(""); // เปลียนชื่อ
const lastNameChange = ref<string>(""); const lastNameChange = ref<string | null | undefined>(""); // เปลี่ยนนามสกุล
const profileInfo = ref<any>([]); const profileInfo = ref<DataProfile>(); // ข้อมูล Profile
const statusOption = ref([ const statusOption = ref<string[]>([
"เปลี่ยนคำนำหน้าชื่อ", "เปลี่ยนคำนำหน้าชื่อ",
"เปลี่ยนชื่อ", "เปลี่ยนชื่อ",
"เปลี่ยนนามสกุล", "เปลี่ยนนามสกุล",
@ -87,7 +85,7 @@ const statusOption = ref([
"เปลี่ยนคำนำหน้าชื่อ และนามสกุล", "เปลี่ยนคำนำหน้าชื่อ และนามสกุล",
"เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล", "เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล",
]); ]);
const statusOptionFilter = ref([ const statusOptionFilter = ref<string[]>([
"เปลี่ยนคำนำหน้าชื่อ", "เปลี่ยนคำนำหน้าชื่อ",
"เปลี่ยนชื่อ", "เปลี่ยนชื่อ",
"เปลี่ยนนามสกุล", "เปลี่ยนนามสกุล",
@ -97,25 +95,9 @@ const statusOptionFilter = ref([
"เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล", "เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล",
]); ]);
const alertUpload = ref<boolean>(false); const alertUpload = ref<boolean>(false);
const visibleColumns = ref<string[]>([
"prefix",
"firstName",
"lastName",
"lastUpdateFullName",
"lastUpdatedAt",
// "status",
]);
const historyVisibleColumns = ref<String[]>([
"prefix",
"firstName",
"lastName",
"status",
"lastUpdateFullName",
"lastUpdatedAt",
]);
const rows = ref<ResponseObject[]>([]);
const historyRows = ref<ResponseObject[]>([]);
// Table
const rows = ref<ResponseObject[]>([]);
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "prefix", name: "prefix",
@ -150,17 +132,7 @@ const columns = ref<QTableProps["columns"]>([
sort: (a: string, b: string) => sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), 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", name: "lastUpdateFullName",
align: "left", align: "left",
@ -185,77 +157,14 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
const historyColumns = ref<QTableProps["columns"]>([ const visibleColumns = ref<string[]>([
{ "prefix",
name: "prefix", "firstName",
align: "left", "lastName",
label: "คำนำหน้าชื่อ", "lastUpdateFullName",
sortable: true, "lastUpdatedAt",
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, false, true),
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]); ]);
const uploadUrl = ref<string>(""); const uploadUrl = ref<string>("");
const subId = ref<string>(""); const subId = ref<string>("");
const fileUpload = ref<File>(); const fileUpload = ref<File>();
const pagination = ref({ const pagination = ref({
@ -263,42 +172,54 @@ const pagination = ref({
rowsPerPage: 10, rowsPerPage: 10,
}); });
const historyPagination = ref({ /**
page: 1, * ฟังก์ชันดึงข้อมูลส่วนตัว
rowsPerPage: 10, */
}); async function fetchDataPersonal() {
showLoader();
// function editForm(row: any) { await http
// submitDisable.value = true; .get(config.API.registryNewByProfileId(profileId.value, empType.value))
// dialogStatus.value = "edit"; .then(async (res) => {
// editId.value = row.id; const data = await res.data.result;
// subId.value = row.id; profileInfo.value = data;
// changeNameData.prefix = row.prefix; })
// changeNameData.firstName = row.firstName; .catch((err) => {
// changeNameData.lastName = row.lastName; messageError($q, err);
// changeNameData.status = row.status; })
// prefixChange.value = changeNameData.prefix; .finally(() => {
// firstNameChange.value = changeNameData.firstName; hideLoader();
// lastNameChange.value = changeNameData.lastName; });
// dialog.value = true;
// }
function closeDialog() {
selection.value = [];
alertUpload.value = false;
dialog.value = false;
} }
/**
* ฟังก์ชันดึงข้อมูลรายการประวัติการเปลี่ยนชื่อ-นามสกุล
*
* @param id id profile
*/
async function fetchData(id: string) {
showLoader();
await http
.get(config.API.profileNewChangeNameByProfileId(id, empType.value))
.then(async (res) => {
rows.value = await res.data.result;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
/**
* ฟังก์ชันยืนยันการบันทึกข้อมูล
*/
function onSubmit() { function onSubmit() {
if (!!fileUpload.value || dialogStatus.value === "edit") { if (!!fileUpload.value || dialogStatus.value === "edit") {
dialogConfirm( dialogConfirm(
$q, $q,
() => { () => {
showLoader();
dialogStatus.value === "create" ? addData() : editData(editId.value); dialogStatus.value === "create" ? addData() : editData(editId.value);
// if (!!fileUpload.value) {
closeDialog();
}, },
"ยืนยันการบันทึกข้อมูล", "ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?" "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
@ -306,7 +227,12 @@ function onSubmit() {
} }
} }
/**
* ฟังก์ชันส้ราง Path อัปโหลดไฟล์
* @param id
*/
async function uploadProfile(id: string) { async function uploadProfile(id: string) {
showLoader();
await http await http
.post( .post(
config.API.subFile( config.API.subFile(
@ -334,6 +260,11 @@ async function uploadProfile(id: string) {
}); });
} }
/**
* ฟังก์ชันอัปโหลดำไฟล์
* @param uploadUrl Path อัปโหลดไฟล์
* @param file ไฟล์เอกสาร
*/
async function uploadFileURL(uploadUrl: string, file: any) { async function uploadFileURL(uploadUrl: string, file: any) {
showLoader(); showLoader();
await axios await axios
@ -353,22 +284,11 @@ async function uploadFileURL(uploadUrl: string, file: any) {
}); });
} }
async function fetchDataPersonal() { /**
showLoader(); * ฟังก์ชันโหลไฟลเอกสารหลักฐาน
await http * @param id รายการที่ต้องการโหลด
.get(config.API.registryNewByProfileId(profileId.value, empType.value)) */
.then((res) => { async function onDownloadFile(id: string) {
profileInfo.value = res.data.result;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
async function fetchProfile(id: string) {
showLoader(); showLoader();
await http await http
.get( .get(
@ -392,7 +312,11 @@ async function fetchProfile(id: string) {
}); });
} }
/**
* ฟังกชันเพิ่มการเปลี่ยนชื่อ - นามสกุล
*/
async function addData() { async function addData() {
showLoader();
await http await http
.post(config.API.profileNewChangeName(empType.value), { .post(config.API.profileNewChangeName(empType.value), {
profileId: empType.value === "" ? profileId.value : undefined, profileId: empType.value === "" ? profileId.value : undefined,
@ -407,11 +331,11 @@ async function addData() {
.then(async (res) => { .then(async (res) => {
subId.value = await res.data.result; subId.value = await res.data.result;
await uploadProfile(res.data.result); await uploadProfile(res.data.result);
await fetchData(profileId.value);
fetchData(profileId.value); await props?.fetchDataPersonal?.();
props?.fetchDataPersonal?.(); await fetchDataPersonal();
fetchDataPersonal();
success($q, "บันทึกข้อมูลสำเร็จ"); success($q, "บันทึกข้อมูลสำเร็จ");
closeDialog();
}) })
.catch((err) => { .catch((err) => {
messageError($q, err); messageError($q, err);
@ -421,7 +345,12 @@ async function addData() {
}); });
} }
/**
* ฟังกชันแก้ไขการเปลี่ยนชื่อ - นามสกุล
* @param idData id ที่ต้องการแก้ไช
*/
function editData(idData: string) { function editData(idData: string) {
showLoader();
http http
.patch( .patch(
config.API.profileNewChangeNameByChangeNameId(idData, empType.value), config.API.profileNewChangeNameByChangeNameId(idData, empType.value),
@ -430,13 +359,13 @@ function editData(idData: string) {
profileId: undefined, profileId: undefined,
} }
) )
.then(() => { .then(async () => {
uploadProfile(subId.value); await uploadProfile(subId.value);
await fetchData(profileId.value);
fetchData(profileId.value); await props.fetchDataPersonal?.();
props.fetchDataPersonal?.(); await fetchDataPersonal();
fetchDataPersonal();
success($q, "บันทึกข้อมูลสำเร็จ"); success($q, "บันทึกข้อมูลสำเร็จ");
closeDialog();
}) })
.catch((err) => { .catch((err) => {
messageError($q, err); messageError($q, err);
@ -446,40 +375,12 @@ function editData(idData: string) {
}); });
} }
async function fetchHistoryData(id: string) { /**
showLoader(); * ฟังกชันค้นหาข้อมูลใน select
await http * @param val คำที่ต้องการค้นหา
.get(config.API.profileNewChangeNameHisByChangeNameId(id, empType.value)) * @param update function
.then(async (res) => { * @param refData ประเภทตัวเลือก
historyRows.value = res.data.result; */
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
function closeHistoryDialog() {
historyDialog.value = false;
}
async function fetchData(id: string) {
showLoader();
await http
.get(config.API.profileNewChangeNameByProfileId(id, empType.value))
.then(async (res) => {
rows.value = res.data.result;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
function filterSelector(val: string, update: Function, refData: string) { function filterSelector(val: string, update: Function, refData: string) {
switch (refData) { switch (refData) {
case "statusOptions": case "statusOptions":
@ -501,7 +402,37 @@ function filterSelector(val: string, update: Function, refData: string) {
} }
} }
/**
* ฟังก์ชันปิด popup เปลี่ยนชื่อ-นามสกุล
*/
function closeDialog() {
selection.value = [];
alertUpload.value = false;
dialog.value = false;
}
/**
* ดูการเปลี่ยนแปลงของข้อมูลฟอร์ท เปลี่ยนชื่อ-นามสกุล
*/
watch(
() => [
changeNameData.prefix,
changeNameData.firstName,
changeNameData.lastName,
],
() => {
submitDisable.value =
changeNameData.prefix === prefixChange.value &&
changeNameData.firstName === firstNameChange.value &&
changeNameData.lastName === lastNameChange.value;
}
);
/**
* ทำงานเมื่อ Components ถูกเรียกใช้งาน
*/
onMounted(async () => { onMounted(async () => {
// เช็ค ตัวเลือก ถ้าไม่มีให้ ดึงข้อมูลใหท่
if ( if (
store.Ops.prefixOps.length === 0 || store.Ops.prefixOps.length === 0 ||
store.Ops.genderOps.length === 0 || store.Ops.genderOps.length === 0 ||
@ -512,42 +443,8 @@ onMounted(async () => {
await fetchPerson(); await fetchPerson();
} }
fetchData(profileId.value); await Promise.all([fetchData(profileId.value), fetchDataPersonal()]);
fetchDataPersonal();
}); });
watch(
() => changeNameData.prefix,
() => {
if (changeNameData.prefix !== prefixChange.value) {
submitDisable.value = false;
} else {
submitDisable.value = true;
}
}
);
watch(
() => changeNameData.firstName,
() => {
if (changeNameData.firstName !== firstNameChange.value) {
submitDisable.value = false;
} else {
submitDisable.value = true;
}
}
);
watch(
() => changeNameData.lastName,
() => {
if (changeNameData.lastName !== lastNameChange.value) {
submitDisable.value = false;
} else {
submitDisable.value = true;
}
}
);
</script> </script>
<template> <template>
@ -561,9 +458,9 @@ watch(
icon="add" icon="add"
@click=" @click="
() => { () => {
changeNameData.prefix = profileInfo.prefix; changeNameData.prefix = profileInfo?.prefix;
changeNameData.firstName = profileInfo.firstName; changeNameData.firstName = profileInfo?.firstName;
changeNameData.lastName = profileInfo.lastName; changeNameData.lastName = profileInfo?.lastName;
prefixChange = changeNameData.prefix; prefixChange = changeNameData.prefix;
firstNameChange = changeNameData.firstName; firstNameChange = changeNameData.firstName;
lastNameChange = changeNameData.lastName; lastNameChange = changeNameData.lastName;
@ -645,7 +542,7 @@ watch(
dense dense
round round
icon="mdi-file-document-outline" icon="mdi-file-document-outline"
@click="fetchProfile(props.row.id)" @click="onDownloadFile(props.row.id)"
> >
<q-tooltip>ดาวน์โหลด</q-tooltip> <q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn> </q-btn>
@ -843,84 +740,6 @@ watch(
</q-form> </q-form>
</q-card> </q-card>
</q-dialog> </q-dialog>
<q-dialog v-model="historyDialog" class="dialog" persistent>
<q-card style="min-width: 70%">
<dialog-header
tittle="ประวัติแก้ไขการเปลี่ยนชื่อ-นามสกุล"
:close="closeHistoryDialog"
/>
<q-separator />
<q-card-section style="max-height: 50vh" class="scroll">
<q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
<q-space />
<q-input
dense
outlined
bg-color="white"
v-model="historyKeyword"
label="ค้นหา"
class="q-mr-sm"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
<q-select
v-model="historyVisibleColumns"
multiple
outlined
dense
bg-color="white"
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="historyColumns"
option-value="name"
options-cover
style="min-width: 150px"
/>
</q-toolbar>
<d-table
ref="table"
:columns="historyColumns"
:rows="historyRows"
row-key="name"
flat
bordered
:paging="true"
dense
:filter="historyKeyword"
v-model:pagination="historyPagination"
:rows-per-page-options="[20, 50, 100]"
class="custom-header-table"
:visible-columns="historyVisibleColumns"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.id">
<div>
{{ col.value === "" ? "-" : col.value }}
</div>
</q-td>
<q-td auto-width> </q-td>
</q-tr>
</template>
</d-table>
</q-card-section>
</q-card>
</q-dialog>
</template> </template>
<style scoped></style> <style scoped></style>

237
src/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue
View file

@ -1,20 +1,21 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref, reactive, watch } from "vue"; import { onMounted, ref, reactive, watch } from "vue";
import { checkPermission } from "@/utils/permissions"; import { useQuasar } from "quasar";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { useQuasar } from "quasar"; import { useCounterMixin } from "@/stores/mixin";
import type { QTableProps } from "quasar"; import { checkPermission } from "@/utils/permissions";
import { useAddressDataStore } from "@/modules/04_registryPerson/stores/Address";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import DialogHeader from "@/components/DialogHeader.vue"; import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin"; import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
import { useAddressDataStore } from "@/modules/04_registryPerson/stores/Address";
import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Address"; import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Address";
import type { RequestObject } from "@/modules/04_registryPerson/interface/request/Address"; import type { RequestObject } from "@/modules/04_registryPerson/interface/request/Address";
import DialogHeader from "@/components/DialogHeader.vue";
const $q = useQuasar(); const $q = useQuasar();
const store = useAddressDataStore(); const store = useAddressDataStore();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
@ -35,17 +36,13 @@ const {
dialogConfirm, dialogConfirm,
pathRegistryEmp, pathRegistryEmp,
} = mixin; } = mixin;
const profileId = ref<string>( const profileId = ref<string>(
route.params.id ? route.params.id.toString() : "" route.params.id ? route.params.id.toString() : ""
); );
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? "")); const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const modal = ref<boolean>(false); const modal = ref<boolean>(false); //แสดง Popup แก้ไขข้อมูลที่อยู่
const modalHistory = ref<boolean>(false);
const rowsHistory = ref<ResponseObject[]>([]);
const filterHistory = ref<string>("");
const id = ref<string>("");
const rawSameAddress = ref<string>("0"); const rawSameAddress = ref<string>("0");
const sameAddress = ref<string>("0"); const sameAddress = ref<string>("0");
const addressData = reactive<ResponseObject>(store.defaultAddress); const addressData = reactive<ResponseObject>(store.defaultAddress);
@ -55,7 +52,6 @@ const adsName = reactive({
regisP: "", regisP: "",
regisD: "", regisD: "",
regisSD: "", regisSD: "",
currentP: "", currentP: "",
currentD: "", currentD: "",
currentSD: "", currentSD: "",
@ -67,16 +63,17 @@ const dataLabel = {
registrationDistrict: "เขต/อำเภอ", registrationDistrict: "เขต/อำเภอ",
registrationSubDistrict: "แขวง / ตำบล", registrationSubDistrict: "แขวง / ตำบล",
registrationZipCode: "รหัสไปรษณีย์", registrationZipCode: "รหัสไปรษณีย์",
currentAddress: "ที่อยู่ปัจจุบัน", currentAddress: "ที่อยู่ปัจจุบัน",
currentProvince: "จังหวัด", currentProvince: "จังหวัด",
currentDistrict: "เขต/อำเภอ", currentDistrict: "เขต/อำเภอ",
currentSubDistrict: "แขวง / ตำบล", currentSubDistrict: "แขวง / ตำบล",
currentZipCode: "รหัสไปรษณีย์", currentZipCode: "รหัสไปรษณีย์",
registrationSame: "ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน", registrationSame: "ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน",
}; };
const modalHistory = ref<boolean>(false); //แสดง Popup ประวัติแก้ไขข้อมูลที่อยู่
const rowsHistory = ref<ResponseObject[]>([]); //ข้อมูลรายการประวัติแก้ไขข้อมูลที่อยู่
const filterHistory = ref<string>(""); //คำค้นหา
const visibleColumnsHistory = ref<String[]>([ const visibleColumnsHistory = ref<String[]>([
"currentAddress", "currentAddress",
"currentDistrict", "currentDistrict",
@ -91,7 +88,6 @@ const visibleColumnsHistory = ref<String[]>([
"lastUpdateFullName", "lastUpdateFullName",
"lastUpdatedAt", "lastUpdatedAt",
]); ]);
const columnsHistory = ref<QTableProps["columns"]>([ const columnsHistory = ref<QTableProps["columns"]>([
{ {
name: "registrationAddress", name: "registrationAddress",
@ -123,7 +119,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
field: "registrationDistrict", field: "registrationDistrict",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
// format: (v) => (v ? v.name : "-"),
sort: (a: string, b: string) => sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
@ -135,7 +130,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
field: "registrationSubDistrict", field: "registrationSubDistrict",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
// format: (v) => (v ? v.name : "-"),
sort: (a: string, b: string) => sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
@ -184,7 +178,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
field: "currentProvince", field: "currentProvince",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
// format: (v) => (v ? v.name : "-"),
sort: (a: string, b: string) => sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
@ -196,7 +190,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
field: "currentDistrict", field: "currentDistrict",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
// format: (v) => (v ? v.name : "-"),
sort: (a: string, b: string) => sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
@ -208,7 +202,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
field: "currentSubDistrict", field: "currentSubDistrict",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
// format: (v) => (v ? v.name : "-"),
sort: (a: string, b: string) => sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
@ -248,17 +242,20 @@ const columnsHistory = ref<QTableProps["columns"]>([
}, },
]); ]);
/**
* ฟังก์ชันดึงข้อมูลที่อยู่
*
* ดึงข้อมูลที่อยู่ ข้อมูลจังหวัด ข้อมูล เขต / อำเภอ และข้อมูล แขวง / ตำบล
*/
async function getData() { async function getData() {
showLoader(); showLoader();
await http await http
.get( .get(
config.API.profileNewAddressByProfileId(profileId.value, empType.value) config.API.profileNewAddressByProfileId(profileId.value, empType.value)
) )
.then((res) => { .then(async (res) => {
Object.assign(addressData, res.data.result); Object.assign(addressData, res.data.result);
if (addressData) { if (addressData) {
id.value = addressData.id;
addressData.currentAddress === addressData.registrationAddress && addressData.currentAddress === addressData.registrationAddress &&
addressData.currentZipCode === addressData.registrationZipCode && addressData.currentZipCode === addressData.registrationZipCode &&
addressData.currentAddress && addressData.currentAddress &&
@ -269,6 +266,24 @@ async function getData() {
: (rawSameAddress.value = "0"); : (rawSameAddress.value = "0");
} }
sameAddress.value = rawSameAddress.value; sameAddress.value = rawSameAddress.value;
if (
store.Ops.provinceOps.length === 0 ||
store.Ops.districtOps.length === 0 ||
store.Ops.districtCOps.length === 0 ||
store.Ops.subdistrictOps.length === 0 ||
store.Ops.subdistrictCOps.length === 0 ||
store.profileIdBefore !== profileId.value
) {
await Promise.all([
fetchProvince(),
fetchDistrict(addressData.registrationProvinceId, "1"),
fetchDistrict(addressData.currentProvinceId, "2"),
fetchSubDistrict(addressData.registrationDistrictId, "1"),
fetchSubDistrict(addressData.currentDistrictId, "2"),
]);
store.profileIdBefore = profileId.value;
}
}) })
.catch((e) => { .catch((e) => {
messageError($q, e); messageError($q, e);
@ -278,6 +293,11 @@ async function getData() {
}); });
} }
/**
* ฟังก์ชันเลือกจังหวัด
* @param e จังหวัดที่เลือก
* @param name 1 คือ ที่อยู่ตามทะเบียนบ้าน 2 คือ ที่อยู่ปัจจุบัน
*/
async function selectProvince(e: string | null, name: string) { async function selectProvince(e: string | null, name: string) {
if (!e) return; if (!e) return;
if (name == "1") { if (name == "1") {
@ -292,6 +312,11 @@ async function selectProvince(e: string | null, name: string) {
await fetchDistrict(e, name); await fetchDistrict(e, name);
} }
/**
* ฟังก์ชันเลือก เขต / อำเภอ
* @param e แขวง/ตำบลที่เลือก
* @param name 1 คือ ที่อยู่ตามทะเบียนบ้าน 2 คือ ที่อยู่ปัจจุบัน
*/
async function selectDistrict(e: string | null, name: string) { async function selectDistrict(e: string | null, name: string) {
if (!e) return; if (!e) return;
if (name == "1") { if (name == "1") {
@ -304,6 +329,11 @@ async function selectDistrict(e: string | null, name: string) {
await fetchSubDistrict(e, name); await fetchSubDistrict(e, name);
} }
/**
* ฟังก์ชันเลือก แขวง / ตำบล
* @param e แขวง / ตำบล ที่เลือก
* @param name 1 คือ ที่อยู่ตามทะเบียนบ้าน 2 คือ ที่อยู่ปัจจุบัน
*/
function selectSubDistrict(e: string | null, name: string) { function selectSubDistrict(e: string | null, name: string) {
if (!e) return; if (!e) return;
if (name == "1") { if (name == "1") {
@ -317,26 +347,16 @@ function selectSubDistrict(e: string | null, name: string) {
} }
} }
/**
* ฟังก์ชันดึงข่้อมูลทั่งหมด
*
*
*/
async function fetchAll() { async function fetchAll() {
await getData(); await getData();
if (!store.profileIdBefore) { if (!store.profileIdBefore) {
store.profileIdBefore = profileId.value; store.profileIdBefore = profileId.value;
} }
if (
store.Ops.provinceOps.length === 0 ||
store.Ops.districtOps.length === 0 ||
store.Ops.districtCOps.length === 0 ||
store.Ops.subdistrictOps.length === 0 ||
store.Ops.subdistrictCOps.length === 0 ||
store.profileIdBefore !== profileId.value
) {
await fetchProvince();
await fetchDistrict(addressData.registrationProvinceId, "1");
await fetchDistrict(addressData.currentProvinceId, "2");
await fetchSubDistrict(addressData.registrationDistrictId, "1");
await fetchSubDistrict(addressData.currentDistrictId, "2");
store.profileIdBefore = profileId.value;
}
adsName.regisP = findData( adsName.regisP = findData(
store.Ops.provinceOps, store.Ops.provinceOps,
@ -365,45 +385,65 @@ async function fetchAll() {
).name; ).name;
} }
async function editData() { /**
showLoader(); * ฟังก์ชันบันทึกข้อมูลข้อมูลที่อยู่
await http */
.patch(config.API.profileNewAddressById(id.value, empType.value), { function onSubmit() {
...formData, dialogConfirm(
id: undefined, $q,
}) async () => {
.then(async (res) => { if (sameAddress.value === "1") {
await fetchAll(); formData.currentAddress = formData.registrationAddress;
await success($q, "บันทึกข้อมูลสำเร็จ"); formData.currentProvinceId = formData.registrationProvinceId;
modal.value = false; formData.currentDistrictId = formData.registrationDistrictId;
}) formData.currentSubDistrictId = formData.registrationSubDistrictId;
.catch((e) => { formData.currentZipCode = formData.registrationZipCode;
messageError($q, e); store.Ops.districtCOps = store.Ops.districtOps;
}) store.Ops.subdistrictCOps = store.Ops.subdistrictOps;
.finally(() => { }
hideLoader(); showLoader();
}); await http
} .patch(
config.API.profileNewAddressById(profileId.value, empType.value),
function clickClose() { {
Object.assign(formData, store.defaultAddressForm); ...formData,
modal.value = false; id: undefined,
}
)
.then(async () => {
await fetchAll();
await success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
);
} }
/**
* ฟังก์ชันเปิด popup การแก้ไขข้อมูลข้อมูลที่อยู่
*/
async function onClickOpenDialog() { async function onClickOpenDialog() {
if (!addressData) return; if (!addressData) return;
await Object.assign(formData, addressData); Object.assign(formData, addressData);
const checkDistrict = await store.Ops.districtOps.some( const checkDistrict = store.Ops.districtOps.some(
(e: any) => e.id === addressData.registrationDistrictId (e: DataOption) => e.id === addressData.registrationDistrictId
); );
const checkSubDistrict = await store.Ops.subdistrictOps.some( const checkSubDistrict = store.Ops.subdistrictOps.some(
(e: any) => e.id === addressData.registrationSubDistrictId (e: DataOption) => e.id === addressData.registrationSubDistrictId
); );
const checkDistrictC = await store.Ops.districtCOps.some( const checkDistrictC = store.Ops.districtCOps.some(
(e: any) => e.id === addressData.currentDistrictId (e: DataOption) => e.id === addressData.currentDistrictId
); );
const checkSubDistrictC = await store.Ops.subdistrictCOps.some( const checkSubDistrictC = store.Ops.subdistrictCOps.some(
(e: any) => e.id === addressData.currentSubDistrictId (e: DataOption) => e.id === addressData.currentSubDistrictId
); );
modal.value = true; modal.value = true;
@ -419,12 +459,26 @@ async function onClickOpenDialog() {
} }
} }
/**
* ฟังก์ชันปิด Popup การแก้ไขข้อมูลที่อยู่
*/
function clickClose() {
Object.assign(formData, store.defaultAddressForm);
modal.value = false;
}
/**
* ฟังก์ชันเปิด popup ประวัติแก้ไขข้อมูลที่อยู่
*
* และดึงข้อมูลรายการประวัติแก้ไขข้อมูลที่อยู่
*/
async function clickHistory() { async function clickHistory() {
showLoader();
modalHistory.value = true; modalHistory.value = true;
await http await http
.get(config.API.profileNewAddressHisById(id.value, empType.value)) .get(config.API.profileNewAddressHisById(profileId.value, empType.value))
.then((res) => { .then(async (res) => {
rowsHistory.value = res.data.result; rowsHistory.value = await res.data.result;
}) })
.catch((e) => { .catch((e) => {
messageError($q, e); messageError($q, e);
@ -434,27 +488,10 @@ async function clickHistory() {
}); });
} }
function onSubmit() { /**
dialogConfirm( * ฟังก์ชันกำหนดที่อยู่ปัจจุบัน
$q, * @param v
async () => { */
if (sameAddress.value === "1") {
formData.currentAddress = formData.registrationAddress;
formData.currentProvinceId = formData.registrationProvinceId;
formData.currentDistrictId = formData.registrationDistrictId;
formData.currentSubDistrictId = formData.registrationSubDistrictId;
formData.currentZipCode = formData.registrationZipCode;
store.Ops.districtCOps = store.Ops.districtOps;
store.Ops.subdistrictCOps = store.Ops.subdistrictOps;
}
editData();
modal.value = false;
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
);
}
function sameAddressToggle(v: string) { function sameAddressToggle(v: string) {
if (v === "0") { if (v === "0") {
formData.currentAddress = ""; formData.currentAddress = "";
@ -467,6 +504,9 @@ function sameAddressToggle(v: string) {
} }
} }
/**
* ดูการเปลี่ยนแปลงที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน
*/
watch( watch(
() => sameAddress.value, () => sameAddress.value,
(v) => { (v) => {
@ -474,6 +514,9 @@ watch(
} }
); );
/**
* ทำงานเมื่อ Components ถูกเรียกใช้งาน
*/
onMounted(async () => { onMounted(async () => {
await fetchAll(); await fetchAll();
}); });
@ -849,7 +892,7 @@ onMounted(async () => {
<q-card style="min-width: 80%"> <q-card style="min-width: 80%">
<DialogHeader <DialogHeader
tittle="ประวัติแก้ไขข้อมูลที่อยู่" tittle="ประวัติแก้ไขข้อมูลที่อยู่"
:close="() => (modalHistory = false)" :close="() => ((modalHistory = false), (rowsHistory = []))"
/> />
<q-separator color="grey-4" /> <q-separator color="grey-4" />

26
src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue
View file

@ -1,9 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted } from "vue"; import { reactive, ref, onMounted } from "vue";
import { checkPermission } from "@/utils/permissions";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { checkPermission } from "@/utils/permissions";
import { useProfileDataStore } from "@/modules/04_registryPerson/stores/profile";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
@ -16,12 +18,8 @@ import type {
import DialogHeader from "@/components/DialogHeader.vue"; import DialogHeader from "@/components/DialogHeader.vue";
import { useProfileDataStore } from "@/modules/04_registryPerson/stores/profile";
import { useCounterMixin } from "@/stores/mixin";
const $q = useQuasar(); const $q = useQuasar();
const route = useRoute(); const route = useRoute();
const store = useProfileDataStore(); const store = useProfileDataStore();
const { filterSelector } = store; const { filterSelector } = store;
const { const {
@ -171,7 +169,6 @@ const childData = ref<FormChildren[]>([]);
const modal = ref<boolean>(false); const modal = ref<boolean>(false);
const modalHistory = ref<boolean>(false); const modalHistory = ref<boolean>(false);
const filterHistory = ref<string>(""); const filterHistory = ref<string>("");
const titleForm = ref<string>(""); const titleForm = ref<string>("");
const typeForm = ref<string>(""); const typeForm = ref<string>("");
const isEdit = ref<boolean>(false); const isEdit = ref<boolean>(false);
@ -477,6 +474,9 @@ async function fetchHistory(id: string, type: string) {
}); });
} }
/**
* ทำงานเมื่อ Components ถูกเรียกใช้งาน
*/
onMounted(async () => { onMounted(async () => {
showLoader(); showLoader();
await Promise.all([ await Promise.all([
@ -872,7 +872,7 @@ onMounted(async () => {
hidden-space hidden-space
dense dense
class="inputgreen" class="inputgreen"
:rules="[(val) => !!val || 'กรุณาเลือกสถานภาพการสมรส']" :rules="[(val:string) => !!val || 'กรุณาเลือกสถานภาพการสมรส']"
label="สถานภาพการสมรส" label="สถานภาพการสมรส"
v-model="fromData.statusMarital" v-model="fromData.statusMarital"
use-input use-input
@ -900,8 +900,8 @@ onMounted(async () => {
:rules=" :rules="
typeForm !== 'couple' typeForm !== 'couple'
? [ ? [
(val) => !!val || 'กรุณากรอกเลขบัตรประชาชน', (val:string) => !!val || 'กรุณากรอกเลขบัตรประชาชน',
(val) => (val:string) =>
val.length === 13 || val.length === 13 ||
'กรุณากรอกเลขบัตรประชาชนให้ครบ 13 หลัก', 'กรุณากรอกเลขบัตรประชาชนให้ครบ 13 หลัก',
] ]
@ -921,7 +921,7 @@ onMounted(async () => {
class="inputgreen" class="inputgreen"
:rules=" :rules="
typeForm !== 'couple' typeForm !== 'couple'
? [(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ'] ? [(val:string) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']
: [] : []
" "
label="คำนำหน้าชื่อ" label="คำนำหน้าชื่อ"
@ -948,7 +948,7 @@ onMounted(async () => {
v-model="fromData.firstName" v-model="fromData.firstName"
:rules=" :rules="
typeForm !== 'couple' typeForm !== 'couple'
? [(val) => !!val || 'กรุณากรอกชื่อ'] ? [(val:string) => !!val || 'กรุณากรอกชื่อ']
: [] : []
" "
label="ชื่อ" label="ชื่อ"
@ -965,7 +965,7 @@ onMounted(async () => {
v-model="fromData.lastName" v-model="fromData.lastName"
:rules=" :rules="
typeForm !== 'couple' typeForm !== 'couple'
? [(val) => !!val || 'กรุณากรอกนามสกุล'] ? [(val:string) => !!val || 'กรุณากรอกนามสกุล']
: [] : []
" "
label="นามสกุล" label="นามสกุล"

97
src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue
View file

@ -1,21 +1,30 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, watch, onMounted } from "vue"; import { ref, reactive, onMounted } from "vue";
import { checkPermission } from "@/utils/permissions"; import { QForm, useQuasar } from "quasar";
import dialogHeader from "@/components/DialogHeader.vue"; import { checkPermission } from "@/utils/permissions";
import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/Education";
import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Education";
import { QForm, useQuasar } from "quasar";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
const mixin = useCounterMixin(); import type { QTableProps } from "quasar";
import type {
DataOptionEducation,
DataOptionEducationLevel,
} from "@/modules/04_registryPerson/interface/index/Main";
import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/Education";
import type {
ResponseObject,
DataEducationLevel,
} from "@/modules/04_registryPerson/interface/response/Education";
import dialogHeader from "@/components/DialogHeader.vue";
const $q = useQuasar(); const $q = useQuasar();
const route = useRoute();
const mixin = useCounterMixin();
const { const {
dialogRemove,
dialogConfirm, dialogConfirm,
showLoader, showLoader,
hideLoader, hideLoader,
@ -25,9 +34,14 @@ const {
pathRegistryEmp, pathRegistryEmp,
} = mixin; } = mixin;
const dialog = ref<boolean>(false); const id = ref<string>(route.params.id.toString()); //id profile
const dialogStatus = ref<string>("create"); const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const mode = ref<string>("table"); const dialog = ref<boolean>(false); //แสดง popup ข้อมูลประวัติการศึกษา
const dialogStatus = ref<string>("create"); //สถานะข้อมูลประวัติการศึกษา
const mode = ref<string>("table"); //การแสดงของ Table card
//Table
const rows = ref<ResponseObject[]>([]);
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "educationLevel", name: "educationLevel",
@ -201,6 +215,9 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
//Table ประวัติแก้ไขประวัติการศึกษา
const historyRows = ref<ResponseObject[]>([]);
const historyColumns = ref<QTableProps["columns"]>([ const historyColumns = ref<QTableProps["columns"]>([
{ {
name: "educationLevel", name: "educationLevel",
@ -398,26 +415,20 @@ const historyColumns = ref<QTableProps["columns"]>([
}, },
]); ]);
const rows = ref<ResponseObject[]>([]); const editId = ref<string>(""); //id ที่ต้องการแก้ไข
const historyRows = ref<ResponseObject[]>([]);
const editId = ref<string>("");
const route = useRoute();
const id = ref<string>(route.params.id.toString());
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const isDate = ref<string>("false"); const isDate = ref<string>("false");
const educationOption = ref([
const educationOption = ref<DataOptionEducation[]>([
{ label: "ใช่", value: true },
{ label: "ไม่ใช่", value: false },
]);
const educationOptionFilter = ref<DataOptionEducation[]>([
{ label: "ใช่", value: true }, { label: "ใช่", value: true },
{ label: "ไม่ใช่", value: false }, { label: "ไม่ใช่", value: false },
]); ]);
const educationOptionFilter = ref([ const educationLevelOption = ref<DataOptionEducationLevel[]>([]);
{ label: "ใช่", value: true }, const educationLevelOptionFilter = ref<DataOptionEducationLevel[]>([]);
{ label: "ไม่ใช่", value: false },
]);
const educationLevelOption = ref<any>([]);
const educationLevelOptionFilter = ref([]);
const historyDialog = ref<boolean>(false); const historyDialog = ref<boolean>(false);
const educationData = reactive<RequestItemsObject>({ const educationData = reactive<RequestItemsObject>({
@ -520,14 +531,14 @@ function filterSelector(val: string, update: Function, refData: string) {
case "educationOption": case "educationOption":
update(() => { update(() => {
educationOption.value = educationOptionFilter.value.filter( educationOption.value = educationOptionFilter.value.filter(
(v: any) => v.label.indexOf(val) > -1 (v: DataOptionEducation) => v.label.indexOf(val) > -1
); );
}); });
break; break;
case "educationLevelOption": case "educationLevelOption":
update(() => { update(() => {
educationLevelOption.value = educationLevelOptionFilter.value.filter( educationLevelOption.value = educationLevelOptionFilter.value.filter(
(v: any) => v.label.indexOf(val) > -1 (v: DataOptionEducationLevel) => v.label.indexOf(val) > -1
); );
}); });
break; break;
@ -566,7 +577,7 @@ function clearForm() {
*/ */
function editForm(row: any) { function editForm(row: any) {
dialogStatus.value = "edit"; dialogStatus.value = "edit";
editId.value = row.id; editId.value = row?.id;
isDate.value = row.isDate ? "true" : "false"; isDate.value = row.isDate ? "true" : "false";
educationData.educationLevel = row.educationLevel; educationData.educationLevel = row.educationLevel;
educationData.institute = row.institute; educationData.institute = row.institute;
@ -607,18 +618,19 @@ function closeDialog() {
*/ */
function closeHistoryDialog() { function closeHistoryDialog() {
historyDialog.value = false; historyDialog.value = false;
historyRows.value = []
} }
/** /**
* function fetch ข้อมูลประวัตืการศึกษา * function fetch ข้อมูลประวัตืการศึกษา
* @param id บุคคล * @param id บุคคล
*/ */
function fetchData(id: string) { async function fetchData(id: string) {
showLoader(); showLoader();
http await http
.get(config.API.profileNewEducationByProfileId(id, empType.value)) .get(config.API.profileNewEducationByProfileId(id, empType.value))
.then((res) => { .then(async (res) => {
rows.value = res.data.result; rows.value = await res.data.result;
}) })
.catch((err) => { .catch((err) => {
messageError($q, err); messageError($q, err);
@ -635,7 +647,7 @@ function fetchEducationLevel() {
http http
.get(config.API.orgEducationLevel) .get(config.API.orgEducationLevel)
.then(async (res) => { .then(async (res) => {
res.data.result.map((r: any) => { res.data.result.map((r: DataEducationLevel) => {
educationLevelOption.value.push({ educationLevelOption.value.push({
value: r.id, value: r.id,
label: r.name, label: r.name,
@ -657,7 +669,7 @@ function fetchHistoryData(id: string) {
http http
.get(config.API.profileNewEducationHisByEducationId(id, empType.value)) .get(config.API.profileNewEducationHisByEducationId(id, empType.value))
.then(async (res) => { .then(async (res) => {
historyRows.value = res.data.result; historyRows.value = await res.data.result;
}) })
.catch((err) => { .catch((err) => {
messageError($q, err); messageError($q, err);
@ -723,6 +735,9 @@ function editData(idData: string) {
}); });
} }
/**
* ทำงานเมื่อ Components ถูกเรียกใช้งาน
*/
onMounted(async () => { onMounted(async () => {
await fetchData(id.value); await fetchData(id.value);
fetchEducationLevel(); fetchEducationLevel();
@ -1007,7 +1022,7 @@ onMounted(async () => {
@filter="(inputValue:string, @filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'educationLevelOption' doneFn:Function) => filterSelector(inputValue, doneFn,'educationLevelOption'
) " ) "
:rules="[(val) => !!val || `${'กรุณาเลือกระดับการศึกษา'}`]" :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับการศึกษา'}`]"
label="ระดับการศึกษา" label="ระดับการศึกษา"
class="inputgreen" class="inputgreen"
hide-bottom-space hide-bottom-space
@ -1021,7 +1036,7 @@ onMounted(async () => {
bg-color="white" bg-color="white"
dense dense
class="inputgreen" class="inputgreen"
:rules="[(val) => !!val || `${'กรุณากรอกสถานศึกษา'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกสถานศึกษา'}`]"
hide-bottom-space hide-bottom-space
/> />
</div> </div>
@ -1075,7 +1090,7 @@ onMounted(async () => {
hide-bottom-space hide-bottom-space
:model-value="educationData.startYear + 543" :model-value="educationData.startYear + 543"
:rules="[ :rules="[
(val) => !!val || `${'กรุณาเลือกปีที่เริ่มต้นศึกษา'}`, (val:string) => !!val || `${'กรุณาเลือกปีที่เริ่มต้นศึกษา'}`,
]" ]"
:label="`${'ปีที่เริ่มต้นศึกษา'}`" :label="`${'ปีที่เริ่มต้นศึกษา'}`"
> >
@ -1118,7 +1133,7 @@ onMounted(async () => {
hide-bottom-space hide-bottom-space
:model-value="educationData.endYear + 543" :model-value="educationData.endYear + 543"
:rules="[ :rules="[
(val) => !!val || `${'กรุณาเลือกปีที่จบการศึกษา'}`, (val:string) => !!val || `${'กรุณาเลือกปีที่จบการศึกษา'}`,
]" ]"
:label="`${'ปีที่จบการศึกษา'}`" :label="`${'ปีที่จบการศึกษา'}`"
> >
@ -1162,7 +1177,7 @@ onMounted(async () => {
dense dense
:model-value="date2Thai(educationData.startDate)" :model-value="date2Thai(educationData.startDate)"
:rules="[ :rules="[
(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้นศึกษา'}`, (val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้นศึกษา'}`,
]" ]"
hide-bottom-space hide-bottom-space
:label="`${'วันที่เริ่มต้นศึกษา'}`" :label="`${'วันที่เริ่มต้นศึกษา'}`"

144
src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue
View file

@ -1,19 +1,23 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, onMounted } from "vue"; import { ref, reactive, onMounted } from "vue";
import { checkPermission } from "@/utils/permissions";
import { QForm, useQuasar } from "quasar";
import dialogHeader from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/SpecialSkill";
import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/SpecialSkill";
import type { QTableProps } from "quasar";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
const mixin = useCounterMixin(); import { checkPermission } from "@/utils/permissions";
import { QForm, useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import type { QTableProps } from "quasar";
import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/SpecialSkill";
import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/SpecialSkill";
import dialogHeader from "@/components/DialogHeader.vue";
const $q = useQuasar(); const $q = useQuasar();
const mode = ref<string>("table"); const route = useRoute();
const mixin = useCounterMixin();
const { const {
dialogConfirm, dialogConfirm,
showLoader, showLoader,
@ -23,6 +27,15 @@ const {
date2Thai, date2Thai,
pathRegistryEmp, pathRegistryEmp,
} = mixin; } = mixin;
const id = ref<string>(route.params.id.toString()); //id profile
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const mode = ref<string>("table"); //การแสดงของ Table card
//Table
const keyword = ref<string>(""); //คำต้นหา
const rows = ref<ResponseObject[]>([]); //รายการความสามารถ
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "field", name: "field",
@ -69,7 +82,20 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
const visibleColumns = ref<string[]>([
"field",
"detail",
"remark",
"reference",
]);
const dialog = ref<boolean>(false); //แสดง popup ข้อมูลความสามารถพิเศษ
const dialogStatus = ref<string>("create"); ////สถานะข้อมูลความสามารถพิเศษ
const editId = ref<string>(""); //idที่ต้องการแก้ไข
const historyDialog = ref<boolean>(false); //แสดง popup รายการประวัติ
const historyRows = ref<ResponseObject[]>([]); //รายการประวัติ
const historyKeyword = ref<string>(""); //คำต้นหาประวัติ
const historyColumns = ref<QTableProps["columns"]>([ const historyColumns = ref<QTableProps["columns"]>([
{ {
name: "field", name: "field",
@ -139,25 +165,21 @@ const historyColumns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
const historyVisibleColumns = ref<string[]>([
"field",
"detail",
"remark",
"reference",
"lastUpdateFullName",
"lastUpdatedAt",
]);
const historyDialog = ref<boolean>(false); //ฟอร์มข้อมูลความสามารถพิเศษ
const dialog = ref<boolean>(false);
const dialogStatus = ref<string>("create");
const rows = ref<ResponseObject[]>([]);
const historyRows = ref<ResponseObject[]>([]);
const route = useRoute();
const id = ref<string>(route.params.id.toString());
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const editId = ref<string>("");
const keyword = ref<string>("");
const historyKeyword = ref<string>("");
const specialSkill = reactive<RequestItemsObject>({ const specialSkill = reactive<RequestItemsObject>({
field: "", field: "", //ด้าน
detail: "", detail: "", //รายละเอียด
remark: "", remark: "", //หมายเหตุ
reference: "", reference: "", //เอกสารอ้างอิง
profileId: id.value, profileId: id.value,
dateStart: null, dateStart: null,
dateEnd: null, dateEnd: null,
@ -173,30 +195,6 @@ const historyPagination = ref({
rowsPerPage: 10, rowsPerPage: 10,
}); });
const visibleColumns = ref<string[]>([
"field",
"detail",
"remark",
"reference",
]);
const historyVisibleColumns = ref<string[]>([
"field",
"detail",
"remark",
"reference",
"lastUpdateFullName",
"lastUpdatedAt",
]);
function closeDialog() {
dialog.value = false;
}
function closeHistoryDialog() {
historyDialog.value = false;
}
/** /**
* function ยืนยันการบันทึกข้อมูล * function ยืนยันการบันทึกข้อมูล
*/ */
@ -238,12 +236,12 @@ function editForm(row: any) {
/** /**
* function fetch ข้อมูลความสามรรถพิเศษ * function fetch ข้อมูลความสามรรถพิเศษ
*/ */
function fetchData(id: string) { async function fetchData(id: string) {
showLoader(); showLoader();
http await http
.get(config.API.profileNewAbilityByProfileId(id, empType.value)) .get(config.API.profileNewAbilityByProfileId(id, empType.value))
.then((res) => { .then(async (res) => {
rows.value = res.data.result; rows.value = await res.data.result;
}) })
.catch((err) => { .catch((err) => {
messageError($q, err); messageError($q, err);
@ -257,12 +255,12 @@ function fetchData(id: string) {
* function fetch ประวัติการแก้ไขความสามรรถพิเศษ * function fetch ประวัติการแก้ไขความสามรรถพิเศษ
* @param id ความสามรรถพิเศษ * @param id ความสามรรถพิเศษ
*/ */
function fetchHistoryData(id: string) { async function fetchHistoryData(id: string) {
showLoader(); showLoader();
http await http
.get(config.API.profileNewAbilityHisByAbilityId(id, empType.value)) .get(config.API.profileNewAbilityHisByAbilityId(id, empType.value))
.then((res) => { .then(async (res) => {
historyRows.value = res.data.result; historyRows.value = await res.data.result;
}) })
.catch((err) => { .catch((err) => {
messageError($q, err); messageError($q, err);
@ -275,9 +273,9 @@ function fetchHistoryData(id: string) {
/** /**
* function เพิ่มข้อมูลความสามรรถพิเศษ * function เพิ่มข้อมูลความสามรรถพิเศษ
*/ */
function addData() { async function addData() {
showLoader(); showLoader();
http await http
.post(config.API.profileNewAbility(empType.value), { .post(config.API.profileNewAbility(empType.value), {
...specialSkill, ...specialSkill,
dateStart: null, dateStart: null,
@ -302,9 +300,9 @@ function addData() {
* function บันทึกการแก้ไขข้อมูล * function บันทึกการแก้ไขข้อมูล
* @param idData ความสามรรถพิเศษ * @param idData ความสามรรถพิเศษ
*/ */
function editData(idData: string) { async function editData(idData: string) {
showLoader(); showLoader();
http await http
.patch(config.API.profileNewAbilityByAbilityId(idData, empType.value), { .patch(config.API.profileNewAbilityByAbilityId(idData, empType.value), {
...specialSkill, ...specialSkill,
dateStart: null, dateStart: null,
@ -324,6 +322,24 @@ function editData(idData: string) {
}); });
} }
/**
* function ปิด popup ข้อมูลความสามารถพิเศษ
*/
function closeDialog() {
dialog.value = false;
}
/**
* function ปิด popup รายการประวัติ
*/
function closeHistoryDialog() {
historyDialog.value = false;
historyRows.value = [];
}
/**
* ทำงานเมื่อ Components ถูกเรียกใช้งาน
*/
onMounted(() => { onMounted(() => {
fetchData(id.value); fetchData(id.value);
}); });
@ -531,7 +547,7 @@ onMounted(() => {
v-model="specialSkill.field" v-model="specialSkill.field"
label="ด้าน" label="ด้าน"
hide-bottom-space hide-bottom-space
:rules="[(val) => !!val || `${'กรุณากรอกด้านความสามารถพิเศษ'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกด้านความสามารถพิเศษ'}`]"
/> />
</div> </div>
<div class="col-xs-6 col-sm-6 col-md-6"> <div class="col-xs-6 col-sm-6 col-md-6">
@ -543,7 +559,7 @@ onMounted(() => {
v-model="specialSkill.detail" v-model="specialSkill.detail"
label="รายละเอียด" label="รายละเอียด"
hide-bottom-space hide-bottom-space
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
/> />
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-12"> <div class="col-xs-12 col-sm-12 col-md-12">

16
src/modules/04_registryPerson/components/detail/PersonalInformation/Main.vue
View file

@ -2,13 +2,12 @@
import { ref } from "vue"; import { ref } from "vue";
/** importComponents*/ /** importComponents*/
import Profile from "@/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue"; import Profile from "@/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue"; //ประวัติส่วนตัว
import NameChangeHistory from "@/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue"; import NameChangeHistory from "@/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue"; //ประวัติการเปลี่ยนชื่อ
import Address from "@/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue"; import Address from "@/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue"; //ข้อมูลที่อยู่
import Education from "@/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue"; import FamilyNew from "@/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue"; //ข้อมูลครอบครัว
import SpecialSkill from "@/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue"; import Education from "@/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue"; //ประวัติการศึกษา
import SpecialSkill from "@/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue"; //ความสามารถพิเศษ
import FamilyNew from "@/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue";
const tab = ref<string>("1"); const tab = ref<string>("1");
const props = defineProps({ const props = defineProps({
@ -63,9 +62,6 @@ const props = defineProps({
<q-tab-panel name="6"> <q-tab-panel name="6">
<SpecialSkill /> <SpecialSkill />
</q-tab-panel> </q-tab-panel>
<!-- <q-tab-panel name="7">
<FamilyNew />
</q-tab-panel> -->
</q-tab-panels> </q-tab-panels>
</q-card> </q-card>
</template> </template>

70
src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
View file

@ -44,6 +44,9 @@ const {
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? "")); const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
//Table
const rows = ref<ResListSalary[]>([]); //รายการตำแหน่งเงินเดือน
const keyword = ref<string>(""); //คำค้นหา
const baseColumns = ref<QTableProps["columns"]>([ const baseColumns = ref<QTableProps["columns"]>([
{ {
name: "date", name: "date",
@ -161,31 +164,29 @@ const pagination = ref({
page: 1, page: 1,
rowsPerPage: 10, rowsPerPage: 10,
}); });
const rows = ref<ResListSalary[]>([]);
const keyword = ref<string>("");
const formDataSalary = reactive<FormSalaryNew>({ const formDataSalary = reactive<FormSalaryNew>({
date: null, date: null, //วัน/เดือน/ปี
posNo: "", posNo: "", //ตำแหน่งเลขที่
templatePos: "", templatePos: "", //ต้นแบบ (template) ตำแหน่ง
position: "", position: "", //ตำแหน่ง
positionLine: "", positionType: "", //ประเภทตำแหน่ง, กลุ่มงาน
positionPathSide: "", positionLevel: "", //ระดับตำแหน่ง, ระดับชั้นงาน
positionType: "", positionLine: "", // สายงาน
positionLevel: "", positionPathSide: "", //ด้าน/สาขา
positionExecutive: "", positionExecutive: "", //ตำแหน่งทางการบริหาร
salaryCompensation: null, salary: null, //เงินเดือน
salary: null, salaryPos: null, //เงินประจำตำแหน่ง
salaryPos: null, salaryCompensation: null, //เงินค่าตอบแทนรายเดือน
refCommandNo: "", refCommandNo: "", //เลขที่คำสั่ง
templateDoc: "", templateDoc: "", //ต้นแบบ (template) เอกสารอ้างอิง
doc: "", doc: "", //เอกสารอ้างอิง
}); });
const modalDialogSalary = ref<boolean>(false); const modalDialogSalary = ref<boolean>(false); //แสดง popup ตำแหน่งเงินเดือน
const isStatusEdit = ref<boolean>(false); const isStatusEdit = ref<boolean>(false); //สถานะแก้ไขข้อมูลตำแหน่งเงินเดือน
const salaryId = ref<string>(""); const salaryId = ref<string>(""); //id ที่ต้องการแก้ไข
const dataLevel = ref<ResType[]>([]); const dataLevel = ref<ResType[]>([]); //รายการ ตำแหน่งเงินเดือน
const posNoOptions = ref<DataOption2[]>(store.optionTemplatePos); const posNoOptions = ref<DataOption2[]>(store.optionTemplatePos);
@ -314,7 +315,7 @@ function onClickCloseDialog() {
* @param update function จาก quasar * @param update function จาก quasar
* @param filtername type ที่กำหนด ของ input นั้นๆ * @param filtername type ที่กำหนด ของ input นั้นๆ
*/ */
function filterSelector(val: any, update: Function, filtername: string) { function filterSelector(val: string, update: Function, filtername: string) {
switch (filtername) { switch (filtername) {
case "pos": case "pos":
update(() => { update(() => {
@ -593,16 +594,19 @@ function fetchOptionGroup() {
}); });
} }
onMounted(() => {
fetchListSalary();
});
const classInput = (val: boolean) => { const classInput = (val: boolean) => {
return { return {
"full-width inputgreen cursor-pointer": val, "full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val, "full-width cursor-pointer": !val,
}; };
}; };
/**
* ทำงานเมื่อ Components ถูกเรียกใช้งาน
*/
onMounted(() => {
fetchListSalary();
});
</script> </script>
<template> <template>
<div class="row items-center q-gutter-x-sm q-pb-sm"> <div class="row items-center q-gutter-x-sm q-pb-sm">
@ -815,7 +819,7 @@ const classInput = (val: boolean) => {
use-input use-input
input-debounce="0" input-debounce="0"
@update:modelValue="updatePos" @update:modelValue="updatePos"
@filter="(inputValue: any, @filter="(inputValue: string,
doneFn: Function) => filterSelector(inputValue, doneFn, 'pos' doneFn: Function) => filterSelector(inputValue, doneFn, 'pos'
)" )"
/> />
@ -857,7 +861,7 @@ const classInput = (val: boolean) => {
input-debounce="0" input-debounce="0"
@update:model-value="updateSelectType" @update:model-value="updateSelectType"
:rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกประเภทตำแหน่ง' ]:[(val: string) => !!val || 'กรุณาเลือกกลุ่มงาน' ]" :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกประเภทตำแหน่ง' ]:[(val: string) => !!val || 'กรุณาเลือกกลุ่มงาน' ]"
@filter="(inputValue: any, @filter="(inputValue: string,
doneFn: Function) => filterSelector(inputValue, doneFn, 'posType' doneFn: Function) => filterSelector(inputValue, doneFn, 'posType'
)" )"
/> />
@ -882,7 +886,7 @@ const classInput = (val: boolean) => {
hide-bottom-space hide-bottom-space
use-input use-input
input-debounce="0" input-debounce="0"
@filter="(inputValue: any, @filter="(inputValue: string,
doneFn: Function) => filterSelector(inputValue, doneFn, 'posLevel' doneFn: Function) => filterSelector(inputValue, doneFn, 'posLevel'
)" )"
/> />
@ -907,7 +911,7 @@ const classInput = (val: boolean) => {
use-input use-input
clearable clearable
input-debounce="0" input-debounce="0"
@filter="(inputValue: any, @filter="(inputValue: string,
doneFn: Function) => filterSelector(inputValue, doneFn, 'positionLine' doneFn: Function) => filterSelector(inputValue, doneFn, 'positionLine'
)" )"
/> />
@ -931,7 +935,7 @@ const classInput = (val: boolean) => {
use-input use-input
clearable clearable
input-debounce="0" input-debounce="0"
@filter="(inputValue: any, @filter="(inputValue: string,
doneFn: Function) => filterSelector(inputValue, doneFn, 'positionPathSide' doneFn: Function) => filterSelector(inputValue, doneFn, 'positionPathSide'
)" )"
/> />
@ -955,7 +959,7 @@ const classInput = (val: boolean) => {
use-input use-input
input-debounce="0" input-debounce="0"
clearable clearable
@filter="(inputValue: any, @filter="(inputValue: string,
doneFn: Function) => filterSelector(inputValue, doneFn, 'positionExecutive' doneFn: Function) => filterSelector(inputValue, doneFn, 'positionExecutive'
)" )"
/> />
@ -1043,7 +1047,7 @@ const classInput = (val: boolean) => {
use-input use-input
input-debounce="0" input-debounce="0"
@update:modelValue="updateDoc" @update:modelValue="updateDoc"
@filter="(inputValue: any, @filter="(inputValue: string,
doneFn: Function) => filterSelector(inputValue, doneFn, 'doc' doneFn: Function) => filterSelector(inputValue, doneFn, 'doc'
)" )"
/> />

37
src/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue
View file

@ -1,26 +1,32 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch, computed } from "vue"; import { ref, watch, computed } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { useRoute } from "vue-router";
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import type { ResListSalary } from "@/modules/04_registryPerson/interface/response/Salary";
import DialogHeader from "@/components/DialogHeader.vue"; import DialogHeader from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
const $q = useQuasar(); const $q = useQuasar();
const route = useRoute(); const route = useRoute();
const { date2Thai, showLoader, hideLoader, messageError, pathRegistryEmp } = const { date2Thai, showLoader, hideLoader, messageError, pathRegistryEmp } =
useCounterMixin(); useCounterMixin();
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? "")); /**
* props
*/
const modal = defineModel<boolean>("modal", { required: true }); const modal = defineModel<boolean>("modal", { required: true });
const salaryId = defineModel<string>("salaryId", { required: true }); const salaryId = defineModel<string>("salaryId", { required: true });
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const rows = ref<ResListSalary[]>([]); //รายการข้อมูลประวัติการแก้ไข
const keyword = ref<string>(""); //คำค้นหา
const baseColumns = ref<QTableProps["columns"]>([ const baseColumns = ref<QTableProps["columns"]>([
{ {
name: "date", name: "date",
@ -210,7 +216,6 @@ const visibleColumns = ref<string[]>([
"lastUpdateFullName", "lastUpdateFullName",
"lastUpdatedAt", "lastUpdatedAt",
]); ]);
const columns = computed(() => { const columns = computed(() => {
if (empType.value === "-employee") { if (empType.value === "-employee") {
if (baseColumns.value) { if (baseColumns.value) {
@ -223,18 +228,11 @@ const columns = computed(() => {
} }
return baseColumns.value; return baseColumns.value;
}); });
const rows = ref<any[]>([]);
const pagination = ref({ const pagination = ref({
page: 1, page: 1,
rowsPerPage: 10, rowsPerPage: 10,
}); });
const keyword = ref<string>("");
function closeDialog() {
modal.value = false;
}
/** /**
* function fetch ข้อมูลประวัติการแก้ไข * function fetch ข้อมูลประวัติการแก้ไข
*/ */
@ -253,6 +251,19 @@ function fetchListHistory() {
}); });
} }
/**
* ฟังก์ชันปิด Popup
*/
function closeDialog() {
modal.value = false;
rows.value = [];
}
/**
* ดูการเปลี่ยนแปลงของ modal
*
* ถ้า modal เป็น true เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
*/
watch( watch(
() => modal.value, () => modal.value,
() => { () => {

57
src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue
View file

@ -1,19 +1,20 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, onMounted } from "vue"; import { ref, reactive, onMounted } from "vue";
import { checkPermission } from "@/utils/permissions";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { checkPermission } from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import DialogHeader from "@/components/DialogHeader.vue";
import DialogHisotory from "@/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue";
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import type { RowList } from "@/modules/04_registryPerson/interface/index/salary"; import type { RowList } from "@/modules/04_registryPerson/interface/index/salary";
import type { RequestNoPaidObject } from "@/modules/04_registryPerson/interface/request/Salary"; import type { RequestNoPaidObject } from "@/modules/04_registryPerson/interface/request/Salary";
import DialogHeader from "@/components/DialogHeader.vue";
import DialogHisotory from "@/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue";
const $q = useQuasar(); const $q = useQuasar();
const route = useRoute(); const route = useRoute();
const { const {
@ -25,17 +26,29 @@ const {
success, success,
pathRegistryEmp, pathRegistryEmp,
} = useCounterMixin(); } = useCounterMixin();
const id = ref<string>(""); const id = ref<string>("");
const profileId = ref<string>( const profileId = ref<string>(
route.params.id ? route.params.id.toString() : "" route.params.id ? route.params.id.toString() : ""
); );
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? "")); const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const modelView = ref<string>("table"); const modelView = ref<string>("table"); //การแสดงผล Table,Card
const modalDialog = ref<boolean>(false); const modalDialog = ref<boolean>(false); //แสดง popup บันทึกวันที่ไม่ได้รับเงินเดือนฯ
const modalHistory = ref<boolean>(false); const modalHistory = ref<boolean>(false); //แสดง popup ประวัติแก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ
const isStatusEdit = ref<boolean>(false); const isStatusEdit = ref<boolean>(false); //สถานะการแก้ไจข้อมูล
const rows = ref<RowList[]>([]);
const formData = reactive<RequestNoPaidObject>({
date: null, //วัน/เดือน/ปี
reference: "", //เอกสารอ้างอิง
detail: "", //รายละเอียด
refCommandNo: "", //เลขที่คำสั่ง
refCommandDate: null, //'เอกสารอ้างอิง (ลงวันที่)'
});
//Table
const rows = ref<RowList[]>([]); //รายการ
const keyword = ref<string>(""); //คำค้นหา
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "date", name: "date",
@ -103,15 +116,6 @@ const visibleColumns = ref<string[]>([
"refCommandNo", "refCommandNo",
"refCommandDate", "refCommandDate",
]); ]);
const formData = reactive<RequestNoPaidObject>({
date: null,
reference: "",
detail: "",
refCommandNo: "",
refCommandDate: null,
});
const keyword = ref<string>("");
const pagination = ref({ const pagination = ref({
page: 1, page: 1,
rowsPerPage: 10, rowsPerPage: 10,
@ -153,12 +157,12 @@ function onClickCloseDialog() {
/** /**
* function fetch รายการบันทึกวันที่ไม่ได้รับเงินเดือนฯ * function fetch รายการบันทึกวันที่ไม่ได้รับเงินเดือนฯ
*/ */
function getData() { async function getData() {
showLoader(); showLoader();
http await http
.get(config.API.profileNewNoPaidByProfileId(profileId.value, empType.value)) .get(config.API.profileNewNoPaidByProfileId(profileId.value, empType.value))
.then((res) => { .then(async (res) => {
rows.value = res.data.result; rows.value = await res.data.result;
}) })
.catch((e) => { .catch((e) => {
messageError($q, e); messageError($q, e);
@ -181,8 +185,8 @@ function saveData() {
}) })
.then(async () => { .then(async () => {
await getData(); await getData();
onClickCloseDialog();
await success($q, "บันทึกข้อมูลสำเร็จ"); await success($q, "บันทึกข้อมูลสำเร็จ");
onClickCloseDialog();
}) })
.catch((e) => { .catch((e) => {
messageError($q, e); messageError($q, e);
@ -204,8 +208,8 @@ function editData() {
}) })
.then(async () => { .then(async () => {
await getData(); await getData();
onClickCloseDialog();
await success($q, "บันทึกข้อมูลสำเร็จ"); await success($q, "บันทึกข้อมูลสำเร็จ");
onClickCloseDialog();
}) })
.catch((e) => { .catch((e) => {
messageError($q, e); messageError($q, e);
@ -223,6 +227,9 @@ function onClickHistory(rowId: string) {
modalHistory.value = true; modalHistory.value = true;
} }
/**
* ทำงานเมื่อ Components ถูกเรียกใช้งาน
*/
onMounted(() => { onMounted(() => {
getData(); getData();
}); });

23
src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue
View file

@ -21,8 +21,10 @@ const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const modal = defineModel<boolean>("modal", { required: true }); const modal = defineModel<boolean>("modal", { required: true });
const id = defineModel<string>("id", { required: true }); const id = defineModel<string>("id", { required: true });
const filter = ref<string>("");
const rows = ref<RowList[]>([]); //Table
const filter = ref<string>(""); //คำค้นหา
const rows = ref<RowList[]>([]); //รายการข้อมูลประวัติการแก้ไข
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "date", name: "date",
@ -122,12 +124,12 @@ const pagination = ref({
/** /**
* fetch รายการข้อมูลประวัติการแก้ไช * fetch รายการข้อมูลประวัติการแก้ไช
*/ */
function getHistory() { async function getHistory() {
showLoader(); showLoader();
http await http
.get(config.API.profileNewNoPaidHisById(id.value, empType.value)) .get(config.API.profileNewNoPaidHisById(id.value, empType.value))
.then((res) => { .then(async (res) => {
rows.value = res.data.result; rows.value = await res.data.result;
}) })
.catch((e) => { .catch((e) => {
messageError($q, e); messageError($q, e);
@ -137,10 +139,19 @@ function getHistory() {
}); });
} }
/**
* ฟังก์ชันปิด Popup
*/
function closeDialog() { function closeDialog() {
modal.value = false; modal.value = false;
rows.value = [];
} }
/**
* ดูการเปลี่ยนแปลงของ modal
*
* ถ้า modal เป็น true เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
*/
watch(modal, (status) => { watch(modal, (status) => {
if (status == true) { if (status == true) {
getHistory(); getHistory();

4
src/modules/04_registryPerson/components/detail/Salary/Main.vue
View file

@ -2,8 +2,8 @@
import { ref } from "vue"; import { ref } from "vue";
/** importComponents*/ /** importComponents*/
import PositionSalary from "@/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue"; import PositionSalary from "@/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue"; //ตำแหน่งเงินเดือน
import NotReceiveSalary from "@/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue"; import NotReceiveSalary from "@/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue"; //วันที่ไม่ได้รับเงินเดิอน
const tab = ref<string>("1"); const tab = ref<string>("1");
</script> </script>

16
src/modules/04_registryPerson/components/detail/TabMain.vue
View file

@ -4,12 +4,14 @@ import { useRoute } from "vue-router";
import { useRegistryDetailNewDataStore } from "@/modules/04_registryPerson/stores/DetailMain"; import { useRegistryDetailNewDataStore } from "@/modules/04_registryPerson/stores/DetailMain";
import PersonalInformationMain from "@/modules/04_registryPerson/components/detail/PersonalInformation/Main.vue"; import type { ItemTab } from "@/modules/04_registryPerson/interface/index/Main";
import GovernmentInformationMain from "@/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue";
import salaryMain from "@/modules/04_registryPerson/components/detail/Salary/Main.vue"; import PersonalInformationMain from "@/modules/04_registryPerson/components/detail/PersonalInformation/Main.vue"; //ข้อมูลส่วนตัว
import AchievementMain from "@/modules/04_registryPerson/components/detail/Achievement/Main.vue"; import GovernmentInformationMain from "@/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue"; //ข้อมูลราชการ
import OtherMaim from "@/modules/04_registryPerson/components/detail/Other/Main.vue"; import salaryMain from "@/modules/04_registryPerson/components/detail/Salary/Main.vue"; //ข้อมูลเงินเดือน/ค่าจ้าง
import EmployeeMain from "@/modules/04_registryPerson/components/detail/Employee/Main.vue"; import AchievementMain from "@/modules/04_registryPerson/components/detail/Achievement/Main.vue"; //ข้อมูลผลงานและเครื่องราชฯ
import OtherMaim from "@/modules/04_registryPerson/components/detail/Other/Main.vue"; //เอกสารหลักฐานและอื่นๆ
import EmployeeMain from "@/modules/04_registryPerson/components/detail/Employee/Main.vue"; //ข้อมูลลูกจ้าง
const route = useRoute(); const route = useRoute();
@ -18,7 +20,7 @@ const props = defineProps({
fetchDataPersonal: { type: Function, require: true }, fetchDataPersonal: { type: Function, require: true },
}); });
const itemsTab = ref<any>([ const itemsTab = ref<ItemTab[]>([
{ {
name: "1", name: "1",
icon: "mdi-account", icon: "mdi-account",

57
src/modules/04_registryPerson/components/requestEdit/DialogStatus.vue
View file

@ -1,8 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, watch } from "vue"; import { reactive, ref, watch } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
import { useCounterMixin } from "@/stores/mixin";
import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main"; import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
@ -11,12 +14,6 @@ import type { DataOption } from "@/modules/04_registryPerson/interface/index/Mai
*/ */
import DialogHeader from "@/components/DialogHeader.vue"; import DialogHeader from "@/components/DialogHeader.vue";
/**
* importStore
*/
import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
import { useCounterMixin } from "@/stores/mixin";
/** /**
* use * use
*/ */
@ -28,40 +25,43 @@ const { dialogConfirm, showLoader, hideLoader, messageError, success } =
/** /**
* props * props
*/ */
const modal = defineModel<boolean>("modal", { required: true }); const modal = defineModel<boolean>("modal", { required: true }); //เปิด,ปิด popup แก้ไขสถานะคำร้อง
const requestId = defineModel<string>("requestId", { required: true }); const requestId = defineModel<string>("requestId", { required: true }); // id ที่ต้องการแก้ไข
const props = defineProps({ const props = defineProps({
fetchData: { type: Function, requied: true }, fetchData: { type: Function, requied: true }, // ดึงข้อมูลรายการคำร้องขอแก้ไขทะเบียนประวัติ
}); });
const isReadOnly = ref<boolean>(false); //อ่ายได้อย่างเดียว
const isReadOnly = ref<boolean>(false); //ฟอร์มสถานะคำร้อง
const formData = reactive({ const formData = reactive({
status: "", status: "", //สถานะ
remark: "", remark: "", //หมายเหตุ
}); });
//ข้อมูลรายการสถานะ
const statusOptionMain = ref<DataOption[]>( const statusOptionMain = ref<DataOption[]>(
store.optionStatus.filter((e) => e.id !== "") store.optionStatus.filter((e) => e.id !== "")
); );
const statusOption = ref<DataOption[]>(statusOptionMain.value); const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเลือกรายการสถานะ
/** /**
* function บันทึกรายการคำร้อง * function บันทึกรายการคำร้อง
*/ */
function onSubmit() { function onSubmit() {
dialogConfirm($q, () => { dialogConfirm($q, async () => {
showLoader(); showLoader();
http await http
.patch(config.API.requestEdit + `${requestId.value}`, { .patch(config.API.requestEdit + `${requestId.value}`, {
status: formData.status, status: formData.status,
remark: formData.remark, remark: formData.remark,
}) })
.then(async () => { .then(async () => {
await props.fetchData?.(); await props.fetchData?.();
closeDialog();
await success($q, "บันทึกข้อมูลสำเร็จ"); await success($q, "บันทึกข้อมูลสำเร็จ");
closeDialog();
}) })
.catch((err) => { .catch((err) => {
messageError($q, err); messageError($q, err);
})
.finally(() => {
hideLoader(); hideLoader();
}); });
}); });
@ -76,13 +76,6 @@ function closeDialog() {
formData.remark = ""; formData.remark = "";
} }
function classInput(val: boolean) {
return {
"full-width cursor-pointer ": val,
"full-width cursor-pointer inputgreen": !val,
};
}
/** /**
* function ค้นหาคำใน select สถานะคำร้อง * function ค้นหาคำใน select สถานะคำร้อง
* @param val คำค้น * @param val คำค้น
@ -121,6 +114,22 @@ function fetchDataRequest() {
}); });
} }
/**
* class inpui
* @param val ค่าสถานะ
*/
function classInput(val: boolean) {
return {
"full-width cursor-pointer ": val,
"full-width cursor-pointer inputgreen": !val,
};
}
/**
* ดูการเปลี่ยนแปลงของ modal
*
* เมื่อ modal เป็น true ทำการดึงข้อมูลคำร้องแก้ไข
*/
watch( watch(
() => modal.value, () => modal.value,
() => { () => {

20
src/modules/04_registryPerson/interface/index/Main.ts
View file

@ -10,6 +10,7 @@ interface DataOption2 {
id: number; id: number;
name: string; name: string;
} }
interface DataOptionSys { interface DataOptionSys {
id: string; id: string;
name: string; name: string;
@ -21,6 +22,16 @@ interface DataOptionInsignia {
typeName: string; typeName: string;
} }
interface DataOptionEducation {
label: string;
value: boolean;
}
interface DataOptionEducationLevel {
label: string;
value: string;
}
interface zipCodeOption { interface zipCodeOption {
id: string; id: string;
name: string; name: string;
@ -50,6 +61,12 @@ interface InsigniaOps {
insigniaOptions: DataOptionInsignia[]; insigniaOptions: DataOptionInsignia[];
} }
interface ItemTab {
name: string;
icon: string;
label: string;
}
export type { export type {
Pagination, Pagination,
DataOption, DataOption,
@ -60,4 +77,7 @@ export type {
AddressOps, AddressOps,
InsigniaOps, InsigniaOps,
DataOptionSys, DataOptionSys,
ItemTab,
DataOptionEducation,
DataOptionEducationLevel,
}; };

1
src/modules/04_registryPerson/interface/index/discipline.ts
View file

@ -25,6 +25,7 @@ interface FormFilter {
interface DataOption { interface DataOption {
id: string; id: string;
name: string; name: string;
disable?: boolean;
} }
interface DisciplineOps { interface DisciplineOps {

7
src/modules/04_registryPerson/interface/index/leave.ts
View file

@ -1,8 +1,8 @@
interface DetailData { interface DetailData {
id: string; id: string;
typeLeave: string; typeLeave: string;
dateStartLeave: Date | null; dateStartLeave: Date | null | string;
dateEndLeave: Date | null; dateEndLeave: Date | null | string;
numLeave: number; numLeave: number;
status: string; status: string;
reason: string; reason: string;
@ -26,7 +26,8 @@ interface FormFilter {
interface DataOptionLeave { interface DataOptionLeave {
id: string; id: string;
name: string; name: string;
totalLeave: number; totalLeave?: number;
code?: string;
} }
interface DataOption { interface DataOption {

38
src/modules/04_registryPerson/interface/request/Main.ts
View file

@ -12,7 +12,7 @@ interface FormFilter {
isProbation: boolean | null; isProbation: boolean | null;
isAll?: boolean; isAll?: boolean;
nodeId?: string | null; nodeId?: string | null;
node?: string | null; node?: string | null | number;
} }
interface FormAddPerson { interface FormAddPerson {
@ -39,4 +39,38 @@ interface MyObjectRef {
[key: string]: any; [key: string]: any;
} }
export type { FormFilter, FormAddPerson, MyObjectRef }; interface DataNodeData {
name: string;
nodeId: string | null | undefined;
node: string | null | undefined | number;
}
interface QueryParams {
page: number;
pageSize: number;
isProbation?: boolean;
isRetire?: boolean;
type?: string;
node?: number | string | null | undefined;
nodeId?: string;
isAll?: boolean;
}
interface FormChangeName {
profileId: string;
prefixId: string | null | undefined;
prefix: string | null | undefined;
firstName: string | null | undefined;
lastName: string | null | undefined;
status: string | null | undefined;
documentId: string | null | undefined;
}
export type {
FormFilter,
FormAddPerson,
MyObjectRef,
DataNodeData,
QueryParams,
FormChangeName,
};

10
src/modules/04_registryPerson/interface/response/Education.ts
View file

@ -29,5 +29,13 @@ interface ResponseObject {
lastUpdateUserID: string; lastUpdateUserID: string;
lastUpdatedAt: Date; lastUpdatedAt: Date;
} }
interface DataEducationLevel {
createdAt: string;
createdFullName: string;
id: string;
lastUpdatedAt: string;
name: string;
rank: number;
}
export type { ResponseObject }; export type { ResponseObject, DataEducationLevel };

137
src/modules/04_registryPerson/interface/response/Main.ts
View file

@ -14,6 +14,7 @@ interface DataLevel {
interface DataPerson { interface DataPerson {
avatar?: string; avatar?: string;
avatarName?: string;
citizenId: string; citizenId: string;
firstName: string; firstName: string;
id: string; id: string;
@ -25,4 +26,138 @@ interface DataPerson {
rank?: string; rank?: string;
} }
export type { DataType, DataLevel, DataPerson }; interface DateRequest {
createdAt: string;
createdFullName: string;
detail: string;
fullname: string;
id: string;
lastUpdateFullName: string;
lastUpdatedAt: string;
remark: string;
status: string;
topic: string;
}
interface DataProfile {
avatar: string;
avatarName: string;
birthDate: string;
bloodGroup: string;
citizenId: string;
createdAt: string;
createdFullName: string;
createdUserId: string;
currentAddress: string;
currentDistrictId: string;
currentProvinceId: string;
currentSubDistrictId: string;
currentZipCode: string;
dateAppoint: string;
dateLeave: string;
dateRetire: string;
dateRetireLaw: string;
dateStart: string;
dutyTimeEffectiveDate: string;
dutyTimeId: string;
email: string;
ethnicity: string;
firstName: string;
gender: string;
govAgeAbsent: number;
govAgePlus: number;
id: string;
isLeave: boolean;
isProbation: boolean;
keycloak: string;
lastName: string;
lastUpdateFullName: string;
lastUpdateUserId: string;
lastUpdatedAt: string;
leaveReason: string;
nationality: string;
posLevelId: string;
phone: string;
posTypeId: string;
position: string;
prefix: string;
rank: string;
reasonSameDate: null;
registrationAddress: string;
registrationDistrictId: string;
registrationProvinceId: string;
registrationSubDistrictId: string;
registrationZipCode: string;
relationship: string;
religion: string;
telephoneNumber: string;
posLevel: {
createdAt: string;
createdFullName: string;
createdUserId: string;
id: string;
lastUpdateFullName: string;
lastUpdateUserId: string;
lastUpdatedAt: string;
posLevelAuthority: string;
posLevelName: string;
posLevelRank: number;
posTypeId: string;
};
posType: {
createdAt: string;
createdFullName: string;
createdUserId: string;
id: string;
lastUpdateFullName: string;
lastUpdateUserId: string;
lastUpdatedAt: string;
posTypeName: string;
posTypeRank: number;
};
}
interface DataLeave {
createdAt: string;
createdFullName: string;
createdUserId: string;
dateLeaveEnd: string;
dateLeaveStart: string;
id: string;
lastUpdateFullName: string;
lastUpdateUserId: string;
lastUpdatedAt: string;
leaveCount: number;
leaveDays: number;
leaveType: DataLeaveType;
leaveTypeId: string;
profileEmployeeId: string;
profileId: string;
reason: string;
status: string;
totalLeave: number;
typeLeaveId: string;
}
interface DataLeaveType {
code: string;
createdAt: string;
createdUserId: string;
id: string;
lastUpdateFullName: string;
lastUpdateUserId: string;
lastUpdatedAt: string;
limit: number;
name: string;
refCommandDate: string;
}
export type {
DataType,
DataLevel,
DataPerson,
DateRequest,
DataProfile,
DataLeave,
DataLeaveType,
};

8
src/modules/04_registryPerson/router.ts
View file

@ -1,9 +1,13 @@
const listPage = () => import("@/modules/04_registryPerson/views/list.vue"); // ค้นหาข้อมูลทะเบียนประวัติ
const listPage = () => import("@/modules/04_registryPerson/views/listView.vue");
// ทะเบียนประวัติ
const detailPage = () => const detailPage = () =>
import("@/modules/04_registryPerson/views/detailView.vue"); import("@/modules/04_registryPerson/views/detailView.vue");
// รายการคำร้องขอแก้ไขทะเบียนประวัติ
const requestEdit = () => const requestEdit = () =>
import("@/modules/04_registryPerson/views/requestEdit.vue"); import("@/modules/04_registryPerson/views/requestEditView.vue");
export default [ export default [
{ {

38
src/modules/04_registryPerson/stores/Address.ts
View file

@ -13,18 +13,17 @@ import type {
zipCodeOption, zipCodeOption,
} from "@/modules/04_registryPerson/interface/index/Main"; } from "@/modules/04_registryPerson/interface/index/Main";
const $q = useQuasar();
const mixin = useCounterMixin();
const {
showLoader,
hideLoader,
messageError,
} = mixin;
export const useAddressDataStore = defineStore("addess", () => { export const useAddressDataStore = defineStore("addess", () => {
const $q = useQuasar();
const profileIdBefore = ref<string>(""); const profileIdBefore = ref<string>("");
const mixin = useCounterMixin();
const {
showLoader,
hideLoader,
date2Thai,
messageError,
convertDate,
dateToISO,
} = mixin;
const Ops = ref<AddressOps>({ const Ops = ref<AddressOps>({
provinceOps: [], provinceOps: [],
@ -73,6 +72,9 @@ export const useAddressDataStore = defineStore("addess", () => {
return ops.find((r: { id: string }) => r.id === id) || {}; return ops.find((r: { id: string }) => r.id === id) || {};
} }
/**
* ฟังก์ชันดึงข้อมูลจังหวัด
*/
async function fetchProvince() { async function fetchProvince() {
showLoader(); showLoader();
await http await http
@ -94,6 +96,11 @@ export const useAddressDataStore = defineStore("addess", () => {
}); });
} }
/**
* ฟังก์ชันดึงข้อมูล เขต / อำเภอ
* @param id จังหวัด
* @param position ที่อยู่ตามทะเบียนบ้าน, ที่อยู่ปัจจุบัน
*/
async function fetchDistrict(id: string | null, position: string) { async function fetchDistrict(id: string | null, position: string) {
if (!id) return; if (!id) return;
showLoader(); showLoader();
@ -122,6 +129,11 @@ export const useAddressDataStore = defineStore("addess", () => {
}); });
} }
/**
* ฟังก์ชันดึงข้อมูล แขวง / ตำบล
* @param id เขต / อำเภอ
* @param position ที่อยู่ตามทะเบียนบ้าน, ที่อยู่ปัจจุบัน
*/
async function fetchSubDistrict(id: string | null, position: string) { async function fetchSubDistrict(id: string | null, position: string) {
if (!id) return; if (!id) return;
showLoader(); showLoader();
@ -153,6 +165,12 @@ export const useAddressDataStore = defineStore("addess", () => {
}); });
} }
/**
* ฟังกชันค้นหาข้อมูลใน select
* @param val คำที่ต้องการค้นหา
* @param update function
* @param refData ประเภทตัวเลือก
*/
function filterSelector(val: any, update: Function, refData: string) { function filterSelector(val: any, update: Function, refData: string) {
switch (refData) { switch (refData) {
case "provinceOps": case "provinceOps":

90
src/modules/04_registryPerson/stores/profile.ts
View file

@ -1,9 +1,10 @@
import { ref } from "vue"; import { ref } from "vue";
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import type { RequestObject } from "@/modules/04_registryPerson/interface/request/Profile"; import type { RequestObject } from "@/modules/04_registryPerson/interface/request/Profile";
import type { import type {
@ -11,39 +12,53 @@ import type {
InformationOps, InformationOps,
} from "@/modules/04_registryPerson/interface/index/Main"; } from "@/modules/04_registryPerson/interface/index/Main";
const $q = useQuasar();
const mixin = useCounterMixin();
const {
showLoader,
hideLoader,
messageError,
} = mixin;
export const useProfileDataStore = defineStore("profile", () => { export const useProfileDataStore = defineStore("profile", () => {
const $q = useQuasar();
const mixin = useCounterMixin();
const {
showLoader,
hideLoader,
date2Thai,
messageError,
convertDate,
dateToISO,
} = mixin;
const retireDate = ref<Date>(); const retireDate = ref<Date>();
//ข้อมูลส่วนตัว
const defaultProfile: RequestObject = { const defaultProfile: RequestObject = {
bloodGroup: null, bloodGroup: null,
relationship: null, relationship: null,
gender: null, gender: null,
// posTypeId: "",
// posLevelId: "",
religion: null, religion: null,
citizenId: "", citizenId: "",
// telephoneNumber: null,
nationality: null, nationality: null,
ethnicity: null, ethnicity: null,
birthDate: null, birthDate: null,
phone: null, phone: null,
// email: null,
lastName: "", lastName: "",
firstName: "", firstName: "",
prefix: "", prefix: "",
rank: null, rank: null,
}; };
//ข้อมูลตัวเลือก
const OpsFilter = ref<InformationOps>({
prefixOps: [],
rankOps: [],
genderOps: [],
bloodOps: [],
statusOps: [],
religionOps: [],
employeeClassOps: [
{ id: "perm", name: "ลูกจ้างประจำ" },
{ id: "temp", name: "ลูกจ้างชั่วคราว" },
],
employeeTypeOps: [
{ id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
],
});
//รายการตัวเลือก
const Ops = ref<InformationOps>({ const Ops = ref<InformationOps>({
prefixOps: [], prefixOps: [],
rankOps: [], rankOps: [],
@ -61,31 +76,11 @@ export const useProfileDataStore = defineStore("profile", () => {
], ],
}); });
const OpsFilter = ref<InformationOps>({ /**
prefixOps: [], * ฟังก์ชันคำนวนอายุด้วยวันเดิอนปีเกิด
rankOps: [], * @param birthDate วันเกิด
genderOps: [], * @returns อายุ
bloodOps: [], */
statusOps: [],
religionOps: [],
employeeClassOps: [
{ id: "perm", name: "ลูกจ้างประจำ" },
{ id: "temp", name: "ลูกจ้างชั่วคราว" },
],
employeeTypeOps: [
{ id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
],
});
const prefixOp = ref<string[]>([
"นาย",
"นาง",
"นางสาว",
"เด็กชาย",
"เด็กหญิง",
]);
function calculateAge(birthDate: Date | null) { function calculateAge(birthDate: Date | null) {
if (!birthDate) return null; if (!birthDate) return null;
const birthDateTimeStamp = new Date(birthDate).getTime(); const birthDateTimeStamp = new Date(birthDate).getTime();
@ -107,7 +102,10 @@ export const useProfileDataStore = defineStore("profile", () => {
return `${years} ปี ${months} เดือน ${days} วัน`; return `${years} ปี ${months} เดือน ${days} วัน`;
} }
const fetchPerson = async () => { /**
* ฟังก์ชันดึงข้อมูลตัวเลือกข้อมูลหลัก
*/
async function fetchPerson() {
showLoader(); showLoader();
await http await http
.get(config.API.profileNewMetaMain) .get(config.API.profileNewMetaMain)
@ -181,9 +179,15 @@ export const useProfileDataStore = defineStore("profile", () => {
hideLoader(); hideLoader();
}, 2500); }, 2500);
}); });
}; }
const filterSelector = (val: any, update: Function, refData: string) => { /**
* ฟังกชันค้นหาข้อมูลใน select
* @param val คำที่ต้องการค้นหา
* @param update function
* @param refData ประเภทตัวเลือก
*/
const filterSelector = (val: string, update: Function, refData: string) => {
switch (refData) { switch (refData) {
case "prefixOps": case "prefixOps":
update(() => { update(() => {

120
src/modules/04_registryPerson/views/detailView.vue
View file

@ -1,15 +1,19 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";
import { import {
checkPermission, checkPermission,
checkPermissionCreate, checkPermissionCreate,
checkPermissionList, checkPermissionList,
} from "@/utils/permissions"; } from "@/utils/permissions";
import { useRoute, useRouter } from "vue-router"; import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import axios from "axios"; import axios from "axios";
import avatar from "@/assets/avatar_user.jpg";
/** /**
* importType * importType
*/ */
@ -22,16 +26,10 @@ import type { ResponseObject } from "@/modules/04_registryPerson/interface/respo
/** /**
* importComponents * importComponents
*/ */
import CardNotPermission from "@/components/CardNotPermission.vue";
import DialogHeader from "@/components/DialogHeader.vue"; import DialogHeader from "@/components/DialogHeader.vue";
import TabMain from "@/modules/04_registryPerson/components/detail/TabMain.vue"; import TabMain from "@/modules/04_registryPerson/components/detail/TabMain.vue";
/**
* importStore
*/
import { useCounterMixin } from "@/stores/mixin";
import avatar from "@/assets/avatar_user.jpg";
import CardNotPermission from "@/components/CardNotPermission.vue";
/** /**
* use * use
*/ */
@ -51,23 +49,22 @@ const {
pathRegistryEmp, pathRegistryEmp,
} = useCounterMixin(); } = useCounterMixin();
const isPermission = ref<boolean | null>(null); const isPermission = ref<boolean | null>(null); //สิทธิการเช้าถึงข้อมูล
const notPermissionMsg = ref<string>(""); const notPermissionMsg = ref<string>(""); //ข้อตวามไม่มีสิทธิ
const profileId = ref<string>(route.params.id.toString()); //id profile
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? "")); //ประเภทข้าราชการ
/** ถึงเเก่กรรม */ /** ถึงเเก่กรรม */
const dialogPassaway = ref<boolean>(false); const dialogPassaway = ref<boolean>(false); //แสดงฟอร์มถึงเเก่กรรม
const placeDeathCertificate = ref(""); const filePassaway = ref<any>(null); //แนบใบมรณบัตร
const deathCertificateNo = ref(""); const deathCertificateNo = ref(""); //เลขที่ใบมรณบัตร
const dateDeath = ref<Date>(new Date()); const dateDeath = ref<Date>(new Date()); //วันที่เสียชีวิต
const filePassaway = ref<any>(null); const placeDeathCertificate = ref(""); //สถานที่ออกใบมรณบัตร
const reasonDeath = ref(""); const reasonDeath = ref(""); //เหตุผลการเสียชีวิต
const dialogImage = ref<boolean>(false); const dialogImage = ref<boolean>(false); //แสดงเลือกรูปภาพ
const formDetail = ref<ResponseObject>(); //ข้อมูลส่วนตัว
const profileId = ref<string>(route.params.id.toString()); //รายการเมนูออกคำสั่งข้าราชการ
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const formDetail = ref<ResponseObject>();
const itemsMenu = ref<DataOptionSys[]>([ const itemsMenu = ref<DataOptionSys[]>([
{ {
id: "1", id: "1",
@ -100,7 +97,7 @@ const itemsMenu = ref<DataOptionSys[]>([
system: "SYS_PLACEMENT_OTHER", system: "SYS_PLACEMENT_OTHER",
}, },
]); ]);
//รายการเมนูออกคำสั่งลูกจ้าง
const itemsMenuEmployee = ref<DataOptionSys[]>([ const itemsMenuEmployee = ref<DataOptionSys[]>([
{ {
id: "1", id: "1",
@ -114,15 +111,14 @@ const itemsMenuEmployee = ref<DataOptionSys[]>([
}, },
]); ]);
const uploadUrl = ref<string>(""); const uploadUrl = ref<string>(""); //URL อัปโหลดรูป
const fileName = ref<string>(""); const fileName = ref<string>(""); //ชื่อไฟล์รูป
const profilePicture = ref<string>(""); const profilePicture = ref<string>(""); //รูป
const profileFile = ref(); const profileFile = ref(); //ไฟล์
const input = document.createElement("input"); const input = document.createElement("input");
const activeImage = ref<any | null>(null); const activeImage = ref<any | null>(null);
const images = ref<any[]>([]); const images = ref<any[]>([]);
const imagesAlldata = ref<any[]>([]); const imagesAlldata = ref<any[]>([]);
input.type = "file"; input.type = "file";
input.accept = ".jpg,.png,.tif,.pic"; input.accept = ".jpg,.png,.tif,.pic";
@ -140,6 +136,9 @@ function imageActive(n: any) {
activeImage.value = n; activeImage.value = n;
} }
/**
* ฟังก์ชันอัปโหลด
*/
function uploadImg() { function uploadImg() {
http http
.post(config.API.orgProfileAvatarbyType(empType.value), { .post(config.API.orgProfileAvatarbyType(empType.value), {
@ -156,6 +155,10 @@ function uploadImg() {
.finally(() => {}); .finally(() => {});
} }
/**
* ฟังก์ชันสร้าง path อัปโหลไฟล์
* @param path
*/
function uploadProfile(path: string) { function uploadProfile(path: string) {
http http
.post(config.API.fileByPath(path), { .post(config.API.fileByPath(path), {
@ -179,6 +182,11 @@ function uploadProfile(path: string) {
}); });
} }
/**
* ฟังก์ชันอัปโหลด
* @param uploadUrl path อัปโหลไฟล์
* @param file ไฟล์
*/
function uploadFileURL(uploadUrl: string, file: any) { function uploadFileURL(uploadUrl: string, file: any) {
showLoader(); showLoader();
axios axios
@ -199,8 +207,11 @@ function uploadFileURL(uploadUrl: string, file: any) {
}); });
} }
/**
* ฟังก์ชันดึงข้อมูลรูปโปรไฟล์
* @param id โปรไฟล์
*/
function fetchProfile(id: string) { function fetchProfile(id: string) {
// showLoader();
http http
.get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, fileName.value)) .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, fileName.value))
.then(async (res) => { .then(async (res) => {
@ -209,9 +220,6 @@ function fetchProfile(id: string) {
.catch(() => { .catch(() => {
profilePicture.value = avatar; profilePicture.value = avatar;
}); });
// .finally(() => {
// hideLoader();
// });
} }
const reasonStatus = ref<boolean>(false); const reasonStatus = ref<boolean>(false);
@ -251,6 +259,9 @@ const reasonOptions = ref<DataOption[]>([
}, },
]); ]);
/**
* ฟังก์ชันดึงข้อมูลส่วนต้ว
*/
async function fetchDataPersonal() { async function fetchDataPersonal() {
showLoader(); showLoader();
await http await http
@ -298,6 +309,9 @@ async function fetchDataPersonal() {
}); });
} }
/**
* ฟังก์ชันดาว์นโหลดไฟล์ "ก.พ.7/ก.ก.1 หรื่อ ประวัติแบบย่อ
*/
function onClickDownloadKp7(type: string) { function onClickDownloadKp7(type: string) {
showLoader(); showLoader();
const url = const url =
@ -333,7 +347,7 @@ function onClickDownloadKp7(type: string) {
} }
/** /**
* ช่วยราชการ * ฟังก์ชันออกคำสั่งช่วยราชการ
*/ */
function helpPost() { function helpPost() {
const formData = new FormData(); const formData = new FormData();
@ -356,7 +370,7 @@ function helpPost() {
} }
/** /**
* ส่งตัวกลับ * ฟังก์ชันออกคำสั่งส่งตัวกลับ
*/ */
function repatriationPost() { function repatriationPost() {
const formData = new FormData(); const formData = new FormData();
@ -379,7 +393,7 @@ function repatriationPost() {
} }
/** /**
* แต่งตังเลื่อน * ฟังก์ชันออกคำสั่งแต่งตังเลื่อน
*/ */
function appointPost() { function appointPost() {
const formData = new FormData(); const formData = new FormData();
@ -402,14 +416,14 @@ function appointPost() {
} }
/** /**
* ถึงเเก่กรรม * ฟังก์ชันออกคำสั่งถึงเเก่กรรม
*/ */
function clickPassaway() { function clickPassaway() {
dialogPassaway.value = true; dialogPassaway.value = true;
} }
/** /**
* ให้ออกจากราชการ * ฟังก์ชันออกคำสั่งให้ออกจากราชการ
*/ */
function outPost() { function outPost() {
const formData = new FormData(); const formData = new FormData();
@ -432,7 +446,7 @@ function outPost() {
} }
/** /**
* อื่นๆ * ฟังก์ชันออกคำสั่งอื่นๆ
*/ */
function otherPost() { function otherPost() {
const formData = new FormData(); const formData = new FormData();
@ -454,6 +468,9 @@ function otherPost() {
}); });
} }
/**
* ฟังก์ชันออกคำสั่งปรับระดับชั้นงาน - ย้าย
*/
function appointEmployeePost() { function appointEmployeePost() {
const formData = new FormData(); const formData = new FormData();
formData.append("id", profileId.value); formData.append("id", profileId.value);
@ -474,12 +491,8 @@ function appointEmployeePost() {
}); });
} }
function closePassaway() {
dialogPassaway.value = false;
}
/** /**
* function ยืนยันบันทึกข้อมูลถึงแก่กรรม * ฟังก์ชันยืนยันบันทึกข้อมูลถึงแก่กรรม
*/ */
function clickSaveDeceased() { function clickSaveDeceased() {
dialogConfirm($q, async () => { dialogConfirm($q, async () => {
@ -507,7 +520,14 @@ function clickSaveDeceased() {
} }
/** /**
* function เปืด popup เลือกรูปภาพ * ฟังก์ชันปืด popup ถึงแก่กรรม
*/
function closePassaway() {
dialogPassaway.value = false;
}
/**
* ฟังก์ชันเปืด popup เลือกรูปภาพ
*/ */
function openDialogImg() { function openDialogImg() {
dialogImage.value = true; dialogImage.value = true;
@ -515,7 +535,7 @@ function openDialogImg() {
} }
/** /**
* function เรียกข้อมูลรูป * ฟังก์ชันเรียกข้อมูลรูป
*/ */
function getImage() { function getImage() {
showLoader(); showLoader();
@ -538,7 +558,7 @@ function getImage() {
} }
/** /**
* function เรียกข้อมูลรูป * ฟังก์ชันเรียกข้อมูลรูป
* @param dataList * @param dataList
*/ */
function getImg(dataList: any) { function getImg(dataList: any) {
@ -559,7 +579,7 @@ function getImg(dataList: any) {
} }
/** /**
* funciton ปิด Popup เลือกรูปภาพ * ฟังก์ชันปิด Popup เลือกรูปภาพ
*/ */
function closeImage() { function closeImage() {
dialogImage.value = false; dialogImage.value = false;
@ -568,7 +588,7 @@ function closeImage() {
} }
/** /**
* funciotn ยืนยันการลบรูป * ฟังก์ชันยืนยันการลบรูป
* @param id รูปภาพ * @param id รูปภาพ
*/ */
function deletePhoto(id: string) { function deletePhoto(id: string) {
@ -595,7 +615,7 @@ function deletePhoto(id: string) {
} }
/** /**
* function ยืนยันการเลือกรูป * ฟังก์ชันยืนยันการเลือกรูป
*/ */
function selectAvatarHistory() { function selectAvatarHistory() {
if (activeImage.value == null) { if (activeImage.value == null) {

181
src/modules/04_registryPerson/views/list.vue → src/modules/04_registryPerson/views/listView.vue
View file

@ -1,11 +1,22 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } from "vue"; import { ref, reactive, onMounted, watch } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
import { useCounterMixin } from "@/stores/mixin";
import { useRoute } from "vue-router";
import avatar from "@/assets/avatar_user.jpg";
import { useStructureTree } from "@/stores/structureTree";
/** importType*/ /** importType*/
import type {
DataNodeData,
QueryParams,
} from "@/modules/04_registryPerson/interface/request/Main";
import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main"; import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
import type { DataStructureTree } from "@/interface/main";
import type { import type {
DataPerson, DataPerson,
DataType, DataType,
@ -13,56 +24,33 @@ import type {
/** importComponents*/ /** importComponents*/
import TableView from "@/modules/04_registryPerson/components/TableView.vue"; import TableView from "@/modules/04_registryPerson/components/TableView.vue";
import avatar from "@/assets/avatar_user.jpg";
import DialogHeader from "@/components/DialogHeader.vue"; import DialogHeader from "@/components/DialogHeader.vue";
/** importStore*/
import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
import { useCounterMixin } from "@/stores/mixin";
import { useRoute } from "vue-router";
import { useStructureTree } from "@/stores/structureTree";
const $q = useQuasar(); const $q = useQuasar();
const store = useRegistryNewDataStore(); const store = useRegistryNewDataStore();
const { fetchStructureTree } = useStructureTree(); const { fetchStructureTree } = useStructureTree();
const { showLoader, hideLoader, messageError } = useCounterMixin(); const { showLoader, hideLoader, messageError } = useCounterMixin();
const route = useRoute(); const route = useRoute();
const mode = ref<"table" | "card">("table"); const mode = ref<"table" | "card">("table"); //การแสดงผล
const filterMain = ref<string>("");
const isShowFilter = ref<boolean>(true);
const isShowBtnFilter = ref<boolean>(false);
const empType = ref<string>("officer"); // officer / employee / perm const empType = ref<string>("officer"); // officer / employee / perm
const dataPersonMain = ref<DataPerson[]>([]); //ข้อมูลรายการที่ค้นหาข้อมูลทะเบียนประวัติ
const maxPage = ref<number>(1); //จำนวนหน้า
const total = ref<number>(0); //จำนวนข้อมูล
const isShowBtnFilter = ref<boolean>(false);
// const searchType = ref<string>("fullName"); const filterMain = ref<string>(""); //หน่วยงาน/ส่วนราชการ
const node = ref<any>([]); const node = ref<DataStructureTree[]>([]); //รายการโครางสร้าง
const expanded = ref<any>([]); const expanded = ref<string[]>([]); //แสดงข้อมูลในโครงสร้าง
const maxPage = ref<number>(1);
const total = ref<number>(0);
const selectNode = ref<boolean>(false);
const dataPersonMain = ref<DataPerson[]>([]); const selectNode = ref<boolean>(false); //แสดงโครงสร้าง
const nodeData = reactive<any>({
page: 1, const nodeData = reactive<DataNodeData>({
pageSize: 10,
round: "",
name: "เลือกหน่วยงาน/ส่วนราชการ", name: "เลือกหน่วยงาน/ส่วนราชการ",
keyword: "",
nodeId: null, nodeId: null,
node: null, node: null,
}); });
// const conditionTotal = computed(() => {
// let num: string = "";
// if (store.formFilter.isProbation && store.formFilter.isShowRetire) {
// num = "(2)";
// } else if (store.formFilter.isProbation || store.formFilter.isShowRetire) {
// num = "(1)";
// } else "";
// return num;
// });
/** /**
* function เรียกข้อมูลตำแหน่งประเภท * function เรียกข้อมูลตำแหน่งประเภท
*/ */
@ -91,26 +79,12 @@ function fetchOptionGroup() {
}); });
} }
function fetchYearOption() {
if (store.yearOps.length === 0) {
const options = [];
const year = new Date().getFullYear();
for (let i = year - 40; i <= year + 60; i++) {
options.push({ id: i.toString(), name: (i + 543).toString() });
}
if (options) {
store.yearOps.push(...options);
}
}
}
/** /**
* function fetch รายชื่อข้อมูลทะเบียนประวัติ * function fetch รายชื่อข้อมูลทะเบียนประวัติ
*/ */
function fetchDataPerson() { function fetchDataPerson() {
showLoader(); showLoader();
let queryParams: any = { let queryParams: QueryParams = {
page: store.formFilter.page, page: store.formFilter.page,
pageSize: store.formFilter.pageSize, pageSize: store.formFilter.pageSize,
}; };
@ -182,7 +156,7 @@ function fetchDataPerson() {
* @param items ข้อมูลคน * @param items ข้อมูลคน
*/ */
function insertAvatar(items: DataPerson[]) { function insertAvatar(items: DataPerson[]) {
items.map((x: any, index: number) => { items.map((x: DataPerson, index: number) => {
if (x.avatarName != null) { if (x.avatarName != null) {
http http
.get( .get(
@ -209,30 +183,11 @@ function insertAvatar(items: DataPerson[]) {
}); });
} }
/**
* funciotn แสดงตัวเลือกเพิ่มเติม
*/
// function onClickShowFilter() {
// isShowFilter.value = !isShowFilter.value;
// isShowBtnFilter.value = false;
// if (isShowFilter.value) {
// // fetchLevel();
// fetchYearOption();
// }
// }
/** /**
* funciotn ค้นหาข้อมูล * funciotn ค้นหาข้อมูล
*/ */
function onclickSearch() { function onclickSearch() {
isShowFilter.value = true;
// isShowBtnFilter.value = false;
store.formFilter.page = 1; store.formFilter.page = 1;
if (isShowFilter.value) {
fetchType();
// fetchLevel();
fetchYearOption();
}
store.formFilter.keyword = store.formFilter.keyword =
store.formFilter.keyword === null ? "" : store.formFilter.keyword; store.formFilter.keyword === null ? "" : store.formFilter.keyword;
fetchDataPerson(); fetchDataPerson();
@ -242,8 +197,8 @@ function onclickSearch() {
* function เลือกประเภทข้าราชการ * function เลือกประเภทข้าราชการ
* @param item ประเภทข้าราชการ * @param item ประเภทข้าราชการ
*/ */
async function selectType() { function selectType() {
empType.value = await (route.name == "registryNew" ? "officer" : "perm"); empType.value = route.name == "registryNew" ? "officer" : "perm";
if (empType.value !== "officer") { if (empType.value !== "officer") {
store.formFilter.isShowRetire = null; store.formFilter.isShowRetire = null;
@ -333,7 +288,10 @@ function clearSelect(t: string) {
fetchDataPerson(); fetchDataPerson();
} }
const isLoad = ref<boolean>(false); const isLoad = ref<boolean>(false); //โหลดข้อมูลโครงสร้าง
/**
* ฟังก์ชันดึงข้อโครงสร้าง
*/
async function fetchTree() { async function fetchTree() {
const data = await fetchStructureTree(route.meta.Key as string); const data = await fetchStructureTree(route.meta.Key as string);
if (data) { if (data) {
@ -344,6 +302,9 @@ async function fetchTree() {
} }
} }
/**
* ค้นหาข้อมูลรายชื่อข้อมูลทะเบียนประวัติตามหน่วยงาน/ส่วนราชการ
*/
function sendNode() { function sendNode() {
nodeData.node = store.formFilter.node; nodeData.node = store.formFilter.node;
nodeData.nodeId = store.formFilter.nodeId; nodeData.nodeId = store.formFilter.nodeId;
@ -352,7 +313,13 @@ function sendNode() {
fetchDataPerson(); fetchDataPerson();
} }
function updateSelectedTreeMain(data: any) { /**
* ฟังก์ชันเลือกหน่วยงาน/ส่วนราชการ
* @param data ข้อมูลหน่วยงาน/ส่วนราชการที่ต้องการค้นหาร
*
* เพื่อค้นหาข้อมูลตามหน่วยงาน/ส่วนราชการ
*/
function updateSelectedTreeMain(data: DataStructureTree) {
if (nodeData.node === data.orgLevel && nodeData.nodeId === data.orgTreeId) { if (nodeData.node === data.orgLevel && nodeData.nodeId === data.orgTreeId) {
store.formFilter.node = null; store.formFilter.node = null;
store.formFilter.nodeId = null; store.formFilter.nodeId = null;
@ -372,9 +339,11 @@ watch(selectNode, () => {
isLoad.value && hideLoader(); isLoad.value && hideLoader();
}); });
/**
* hook เมื่อมีการเรียกใช้ Components
*/
onMounted(async () => { onMounted(async () => {
selectType(); await Promise.all([selectType(), fetchTree()]);
fetchTree();
}); });
</script> </script>
@ -438,21 +407,8 @@ onMounted(async () => {
</div> </div>
</div> </div>
</q-form> </q-form>
<!-- <div v-if="isShowBtnFilter" class="col-12 row q-mt-sm">
<q-btn
flat
label="ตัวเลือกเพิ่มเติม"
icon-right="mdi-tune"
@click="onClickShowFilter"
dense
class="q-px-sm"
></q-btn>
</div> -->
<div <div class="row q-mt-sm q-gutter-sm justify-center">
v-if="isShowFilter"
class="row q-mt-sm q-gutter-sm justify-center"
>
<q-btn-dropdown <q-btn-dropdown
flat flat
rounded rounded
@ -589,40 +545,6 @@ onMounted(async () => {
label="แสดงตำแหน่งทั้งหมด" label="แสดงตำแหน่งทั้งหมด"
@update:model-value="fetchDataPerson" @update:model-value="fetchDataPerson"
/> />
<!-- <q-btn-dropdown
v-if="empType === 'officer'"
flat
dense
rounded
label-color="white"
dropdown-icon="mdi-chevron-down"
:label="`เงื่อนไขอื่นๆ ${conditionTotal}`"
class="q-px-sm"
>
<q-list>
<q-item clickable v-close-popup>
<q-item-section>
<q-toggle
v-model="store.formFilter.isProbation"
color="primary"
label="ทดลองปฏิบัติหน้าที่ราชการ"
@update:model-value="fetchDataPerson"
/>
</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section>
<q-toggle
v-model="store.formFilter.isShowRetire"
color="primary"
label="แสดงข้อมูลผู้พ้นจากราชการ"
@update:model-value="fetchDataPerson"
/>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown> -->
</div> </div>
<div <div
@ -655,16 +577,17 @@ onMounted(async () => {
<q-separator /> <q-separator />
<q-card-section> <q-card-section>
<!-- Components รายการข้อมูลทะเบียนประวัติ -->
<TableView <TableView
v-model:mode="mode" v-model:mode="mode"
v-model:form-filter="store.formFilter"
v-model:max-page="maxPage"
:rows="dataPersonMain" :rows="dataPersonMain"
v-model:formFilter="store.formFilter" :fetch-data="fetchDataPerson"
v-model:maxPage="maxPage" :fetch-type="fetchType"
:fetchData="fetchDataPerson"
:fetchType="fetchType"
:total="total" :total="total"
:empType="empType"
:is-filter="isShowBtnFilter" :is-filter="isShowBtnFilter"
:emp-type="empType"
/> />
</q-card-section> </q-card-section>
</q-card> </q-card>

45
src/modules/04_registryPerson/views/requestEdit.vue → src/modules/04_registryPerson/views/requestEditView.vue
View file

@ -1,9 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, watch } from "vue"; import { ref, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import config from "@/app.config"; import config from "@/app.config";
import http from "@/plugins/http"; import http from "@/plugins/http";
import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
import { useCounterMixin } from "@/stores/mixin";
/** /**
* importType * importType
@ -13,18 +16,13 @@ import type {
DataOption, DataOption,
Pagination, Pagination,
} from "@/modules/04_registryPerson/interface/index/Main"; } from "@/modules/04_registryPerson/interface/index/Main";
import type { DateRequest } from "@/modules/04_registryPerson/interface/response/Main";
/** /**
* importComponents * importComponents
*/ */
import DialogStatus from "@/modules/04_registryPerson/components/requestEdit/DialogStatus.vue"; import DialogStatus from "@/modules/04_registryPerson/components/requestEdit/DialogStatus.vue";
/**
* importStore
*/
import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
import { useCounterMixin } from "@/stores/mixin";
/** /**
* use * use
*/ */
@ -36,12 +34,11 @@ const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
/** /**
* Table * Table
*/ */
const rows = ref<any[]>([]); const rows = ref<DateRequest[]>([]); //รายการข้อมูลคำร้องขอแก้ไขทะเบียนประวัติ
const page = ref<number>(1); const page = ref<number>(1); //หน้า
const pageSize = ref<number>(10); const pageSize = ref<number>(10); //จำนวนต่อหน้า
const rowsTotal = ref<number>(0); const rowsTotal = ref<number>(0); //จำนวนรายการ
const maxPage = ref<number>(0); const maxPage = ref<number>(0); //จำนวนหน้า
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "lastUpdatedAt", name: "lastUpdatedAt",
@ -114,7 +111,6 @@ const columns = ref<QTableProps["columns"]>([
]); ]);
const visibleColumns = ref<string[]>([ const visibleColumns = ref<string[]>([
"lastUpdatedAt", "lastUpdatedAt",
"fullname", "fullname",
"topic", "topic",
"detail", "detail",
@ -126,11 +122,11 @@ const visibleColumns = ref<string[]>([
/** /**
* ตัวแปร * ตัวแปร
*/ */
const status = ref<string>("PENDING"); const status = ref<string>("PENDING"); //ค้นหาตามสถานะ
const keyword = ref<string>(""); const keyword = ref<string>(""); //คำค้นหา
const statusOption = ref<DataOption[]>(store.optionStatus); const statusOption = ref<DataOption[]>(store.optionStatus); //รายการสถานะ
const modalStatus = ref<boolean>(false); const modalStatus = ref<boolean>(false); //แก้ไขสถานะคำร้อง
const requestId = ref<string>(""); const requestId = ref<string>(""); //id รายการแก้ไข
/** /**
* function fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ * function fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
@ -186,7 +182,7 @@ function filterOption(val: string, update: Function) {
update(() => { update(() => {
status.value = val ? "" : status.value; status.value = val ? "" : status.value;
statusOption.value = store.optionStatus.filter( statusOption.value = store.optionStatus.filter(
(v: any) => v.name.indexOf(val) > -1 (v: DataOption) => v.name.indexOf(val) > -1
); );
}); });
} }
@ -262,6 +258,11 @@ function downloadUrl(id: string, fileName: string) {
}); });
} }
/**
* ดูการเปลี่ยนแปลงของ pageSize
*
* เมื่อมีการเปลี่ยนแปลงจำทำการ ดึงช้อมูลรายการคำร้องขอแก้ไขทะเบียนประวัติตามจำนวน pageSize
*/
watch( watch(
() => pageSize.value, () => pageSize.value,
() => { () => {
@ -420,8 +421,8 @@ onMounted(() => {
<DialogStatus <DialogStatus
v-model:modal="modalStatus" v-model:modal="modalStatus"
:fetchData="fetchListRequset" :fetch-data="fetchListRequset"
:requestId="requestId" :request-id="requestId"
/> />
</template> </template>