permission => โครงสร้างอัตรากำลัง,อัตรากำลังลูกจ้างประจำ,ทะเบียนประวัติ, ทะเบียนประวัติลูกจ้าง,ตั้งค่าเว็บสรรหา, สอบแข่งขัน

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-08-01 18:03:39 +07:00
parent a59a9d5ee7
commit c8fef97125
34 changed files with 606 additions and 1904 deletions

View file

@ -1,21 +1,36 @@
<script setup lang="ts">
import { onMounted, watch, ref, reactive } from "vue";
import { checkPermission } from "@/utils/permissions";
import { useRoute } from "vue-router";
import { useQuasar } from "quasar";
import type { QTableColumn, QForm } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useProfileDataStore } from "@/modules/04_registryPerson/stores/profile";
import DialogHeader from "@/components/DialogHeader.vue";
/**
* importType
*/
import type { QTableColumn, QForm } from "quasar";
import type { RequestObject } from "@/modules/04_registryPerson/interface/request/Profile";
import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Profile";
/**
* importComponents
*/
import DialogHeader from "@/components/DialogHeader.vue";
/**
* importStore
*/
import { useCounterMixin } from "@/stores/mixin";
import { useProfileDataStore } from "@/modules/04_registryPerson/stores/profile";
/**
* use
*/
const $q = useQuasar();
const route = useRoute();
const mixin = useCounterMixin();
const store = useProfileDataStore();
const { calculateAge, fetchPerson, filterSelector } = store;
const {
success,
showLoader,
@ -24,8 +39,11 @@ const {
messageError,
dialogConfirm,
dialogMessageNotify,
} = mixin;
const { calculateAge, fetchPerson, filterSelector } = store;
} = useCounterMixin();
/**
* props
*/
const props = defineProps({
fetchDataPersonal: { type: Function, require: true },
});
@ -37,23 +55,16 @@ const empType = ref<string>(
route.name === "registryNewByid" ? "" : "-employee"
);
const currentPage = ref<number>(1);
const maxPage = ref<number>(1);
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 age = ref<string | null>("");
const formData = reactive<RequestObject>(store.defaultProfile);
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
/** ข้อมูล Label*/
const dataLabel = {
citizenId: "เลขประจำตัวประชาชน",
name: "ชื่อ - สกุล",
@ -73,6 +84,7 @@ const dataLabel = {
lastName: "นามสกุล",
};
/** ข้อมูล Table ประวัติแการก้ไขข้อมูลส่วนตัว*/
const columnsHistory = ref<QTableColumn[]>([
{
name: "citizenId",
@ -244,7 +256,6 @@ const columnsHistory = ref<QTableColumn[]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const visibleColumnsHistory = ref<String[]>([
"citizenId",
"prefix",
@ -262,8 +273,17 @@ const visibleColumnsHistory = ref<String[]>([
"createdFullName",
"createdAt",
]);
const pagination = ref({
page: 1,
rowsPerPage: 10,
sortBy: "createdAt",
descending: true,
});
async function getData() {
/**
* function เรยกขอมลขอมลสวนต
*/
function getData() {
showLoader();
http
.get(config.API.registryNewByProfileId(profileId.value, empType.value))
@ -272,10 +292,7 @@ async function getData() {
id.value = res.data.result.id;
if (res.data.result.birthDate) {
console.log("birthDate===>", res.data.result.birthDate);
age.value = calculateAge(res.data.result.birthDate);
console.log("age===>", age.value);
}
})
.catch((e) => {
@ -286,37 +303,12 @@ async function getData() {
});
}
const calculateMaxDate = () => {
const today = new Date();
today.setFullYear(today.getFullYear() - 18);
return today;
};
async function editData() {
showLoader();
await http
.put(config.API.profileNewProfileById(id.value, empType.value), {
...formData,
employeeClass: route.name === "registry-employeeId" ? "TEMP" : undefined,
})
.then(() => {
success($q, "บันทึกข้อมูลสำเร็จ");
getData(), (modal.value = false);
props.fetchDataPersonal?.();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/**
* function แกไขขอมลประววนต
*/
function onClickOpenDialog() {
if (!informaData.value) return;
modal.value = true;
console.log("onClickOpenDialog birthDate===>", informaData.value.birthDate);
id.value = informaData.value.id;
age.value = calculateAge(informaData.value.birthDate);
formData.citizenId = informaData.value.citizenId;
@ -334,21 +326,45 @@ function onClickOpenDialog() {
formData.phone = informaData.value.phone;
}
/**
* function นยนการบนทกขอม
*/
function onSubmit() {
dialogConfirm(
$q,
async () => {
editData();
modal.value = false;
showLoader();
http
.put(config.API.profileNewProfileById(id.value, empType.value), {
...formData,
employeeClass:
route.name === "registry-employeeId" ? "TEMP" : undefined,
})
.then(async () => {
await getData();
await props.fetchDataPersonal?.();
modal.value = false;
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
);
}
async function clickHistory() {
/**
* function อมลประวแกไขขอมลสวนต
*/
function clickHistory() {
modalHistory.value = true;
await http
filterHistory.value = "";
http
.get(config.API.profileNewProfileHisById(id.value, empType.value))
.then((res) => {
rowsHistory.value = res.data.result;
@ -361,6 +377,10 @@ async function clickHistory() {
});
}
/**
* function เชคเลขประจำตวประชาชนช
* @param citizenId เลขประจำตวประชาชน
*/
function changeCardID(citizenId: string | number | null) {
if (citizenId != null && typeof citizenId == "string") {
if (citizenId.length == 13 && citizenId) {
@ -380,29 +400,29 @@ function changeCardID(citizenId: string | number | null) {
}
}
/**
* function เชคอายไมเก 18
*/
function calculateMaxDate() {
const today = new Date();
today.setFullYear(today.getFullYear() - 18);
return today;
}
watch(
() => formData.birthDate,
(v) => {
console.log("v===>", v);
if (v) {
age.value = calculateAge(v);
}
}
);
onMounted(async () => {
await getData();
onMounted(() => {
getData();
if (store.Ops && store.Ops.prefixOps && store.Ops.prefixOps.length === 0) {
fetchPerson();
}
// store.Ops.prefixOps.length === 0 ||
// store.Ops.genderOps.length === 0 ||
// store.Ops.bloodOps.length === 0 ||
// store.Ops.statusOps.length === 0 ||
// store.Ops.religionOps.length === 0
});
</script>
@ -410,6 +430,7 @@ onMounted(async () => {
<div class="row q-gutter-sm items-center">
<div class="toptitle col text-right q-gutter-x-sm">
<q-btn
v-if="checkPermission($route)?.attrIsUpdate"
flat
round
dense
@ -552,7 +573,7 @@ onMounted(async () => {
:options="store.Ops.prefixOps"
:label="dataLabel.prefix"
:rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
@filter="(inputValue: any,
@filter="(inputValue: string,
doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps'
)"
/>
@ -574,7 +595,7 @@ onMounted(async () => {
class="inputgreen"
:options="store.Ops.rankOps"
:label="dataLabel.rank"
@filter="(inputValue: any,
@filter="(inputValue: string,
doneFn: Function) => filterSelector(inputValue, doneFn, 'rankOps'
)"
/>
@ -676,7 +697,7 @@ onMounted(async () => {
class="inputgreen"
:options="store.Ops.genderOps"
:label="dataLabel.gender"
@filter="(inputValue: any,
@filter="(inputValue: string,
doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
)"
/>
@ -698,7 +719,7 @@ onMounted(async () => {
v-model="formData.relationship"
:options="store.Ops.statusOps"
:label="dataLabel.relationship"
@filter="(inputValue: any,
@filter="(inputValue: string,
doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
)"
/>
@ -742,7 +763,7 @@ onMounted(async () => {
class="inputgreen"
:options="store.Ops.religionOps"
:label="dataLabel.religion"
@filter="(inputValue: any,
@filter="(inputValue: string,
doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
)"
/>
@ -764,7 +785,7 @@ onMounted(async () => {
class="inputgreen"
:options="store.Ops.bloodOps"
:label="dataLabel.bloodGroup"
@filter="(inputValue: any,
@filter="(inputValue: string,
doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
)"
/>
@ -820,6 +841,7 @@ onMounted(async () => {
outlined
placeholder="ค้นหา"
debounce="300"
clearable
>
<template v-slot:append>
<q-icon
@ -828,12 +850,6 @@ onMounted(async () => {
@click.stop.prevent="filterHistory = ''"
class="cursor-pointer"
/>
<q-icon
v-if="filterHistory"
name="cancel"
@click.stop.prevent="filterHistory = ''"
class="cursor-pointer"
/>
</template>
</q-input>
<q-select

View file

@ -1,23 +1,37 @@
<script setup lang="ts">
import { onMounted, ref, useAttrs, reactive, watch } from "vue";
import { checkPermission } from "@/utils/permissions";
import { useRoute } from "vue-router";
import { useQuasar } from "quasar";
import axios from "axios";
import type { QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import dialogHeader from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
import type { ResponseObject } from "@/components/information/interface/response/OldName";
import type { Pagination } from "@/modules/04_registryPerson/interface/index/Main";
import type { RequestItemsObject } from "@/components/information/interface/request/OldName";
import { useProfileDataStore } from "@/modules/04_registryPerson/stores/profile";
/**
* importType
*/
import type { QTableProps } from "quasar";
import type { ResponseObject } from "@/components/information/interface/response/OldName";
/**
* importComponents
*/
import dialogHeader from "@/components/DialogHeader.vue";
/**
* importStore
*/
import { useProfileDataStore } from "@/modules/04_registryPerson/stores/profile";
import { useCounterMixin } from "@/stores/mixin";
/**
* use
*/
const $q = useQuasar();
const route = useRoute();
const mixin = useCounterMixin();
const store = useProfileDataStore();
const attrs = ref<any>(useAttrs());
const { fetchPerson } = store;
const {
date2Thai,
success,
@ -25,27 +39,29 @@ const {
messageError,
showLoader,
hideLoader,
dialogRemove,
} = mixin;
const submitDisable = ref<boolean>(true);
const { fetchPerson } = store;
const profileId = ref<string>(route.params.id.toString());
const empType = ref<string>(
route.name === "registryNewByid" ? "" : "-employee"
);
} = useCounterMixin();
/**
* props
*/
const props = defineProps({
fetchDataPersonal: { type: Function, require: true },
});
const submitDisable = ref<boolean>(true);
const profileId = ref<string>(route.params.id.toString());
const empType = ref<string>(
route.name === "registryNewByid" ? "" : "-employee"
);
const editId = ref<string>("");
const dialog = ref<boolean>(false);
const dialogStatus = ref<string>("create");
const filterSearch = ref("");
const filterHistory = ref<string>("");
const historyDialog = ref<boolean>(false);
const historyKeyword = ref<string>("");
const rowsHistory = ref<RequestItemsObject[]>([]);
const changeNameData = reactive<any>({
const changeNameData = reactive({
profileId: profileId.value,
prefixId: "",
prefix: "",
@ -79,7 +95,6 @@ const statusOptionFilter = ref([
"เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล",
]);
const alertUpload = ref<boolean>(false);
const tittleHistory = ref<string>("ประวัติการเปลี่ยนชื่อ-นามสกุล");
const visibleColumns = ref<string[]>([
"prefix",
"firstName",
@ -213,9 +228,7 @@ const historyColumns = ref<QTableProps["columns"]>([
},
]);
const uploadUrl = ref<string>("");
const initialPagination = ref<Pagination>({
rowsPerPage: 0,
});
const subId = ref<string>("");
const fileUpload = ref<File>();
const pagination = ref({
@ -248,18 +261,16 @@ function closeDialog() {
dialog.value = false;
}
async function onSubmit() {
function onSubmit() {
if (!!fileUpload.value || dialogStatus.value === "edit") {
await dialogConfirm(
dialogConfirm(
$q,
async () => {
() => {
showLoader();
dialogStatus.value === "create"
? await addData()
: await editData(editId.value);
dialogStatus.value === "create" ? addData() : editData(editId.value);
closeDialog();
if (!!fileUpload.value) {
await uploadProfile(fileUpload.value);
uploadProfile(fileUpload.value);
}
},
"ยืนยันการบันทึกข้อมูล",
@ -307,8 +318,6 @@ async function uploadFileURL(uploadUrl: string, file: any) {
},
})
.then(() => {
// fetchProfile(profileId.value);
// success($q, "");
fileUpload.value = undefined;
})
.catch((err) => {
@ -407,44 +416,6 @@ function editData(idData: string) {
});
}
// function deleteData(idData: string) {
// dialogRemove($q, () =>
// http
// .delete(config.API.profileNewChangeNameByChangeNameId(idData))
// .then(() => {
// fetchData(profileId.value);
// success($q, "");
// })
// .catch((err) => {
// messageError($q, err);
// })
// .finally(() => {
// hideLoader();
// })
// );
// }
function deleteFileData(idData: string) {
http
.delete(
config.API.subFile(
"ทะเบียนประวัติ",
"ประวัติการเปลี่ยนชื่อ-นามสกุล",
profileId.value,
idData
)
)
.then(() => {
fetchData(profileId.value);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
async function fetchHistoryData(id: string) {
showLoader();
await http
@ -460,14 +431,6 @@ async function fetchHistoryData(id: string) {
});
}
const paginationLabel = (start: string, end: string, total: string) => {
return start + "-" + end + " ใน " + total;
};
async function openFile(val: string | null) {
if (val != null) window.open(val);
}
function closeHistoryDialog() {
historyDialog.value = false;
}
@ -487,26 +450,12 @@ async function fetchData(id: string) {
});
}
onMounted(async () => {
if (
store.Ops.prefixOps.length === 0 ||
store.Ops.genderOps.length === 0 ||
store.Ops.bloodOps.length === 0 ||
store.Ops.statusOps.length === 0 ||
store.Ops.religionOps.length === 0
) {
await fetchPerson();
}
fetchData(profileId.value);
fetchDataPersonal();
});
function filterSelector(val: string, update: Function, refData: string) {
switch (refData) {
case "statusOptions":
update(() => {
statusOption.value = statusOptionFilter.value.filter(
(v: any) => v.indexOf(val) > -1
(v: string) => v.indexOf(val) > -1
);
});
break;
@ -522,6 +471,21 @@ function filterSelector(val: string, update: Function, refData: string) {
}
}
onMounted(async () => {
if (
store.Ops.prefixOps.length === 0 ||
store.Ops.genderOps.length === 0 ||
store.Ops.bloodOps.length === 0 ||
store.Ops.statusOps.length === 0 ||
store.Ops.religionOps.length === 0
) {
await fetchPerson();
}
fetchData(profileId.value);
fetchDataPersonal();
});
watch(
() => changeNameData.prefix,
() => {
@ -559,6 +523,7 @@ watch(
<template>
<div class="text-primary row q-mb-sm">
<q-btn
v-if="checkPermission($route)?.attrIsUpdate"
round
flat
color="primary"
@ -650,6 +615,7 @@ watch(
<q-tooltip>ดาวนโหลด</q-tooltip>
</q-btn>
<q-btn
v-if="checkPermission($route)?.attrIsUpdate"
color="primary"
flat
dense

View file

@ -1,5 +1,7 @@
<script setup lang="ts">
import { onMounted, ref, reactive, watch } from "vue";
import { checkPermission } from "@/utils/permissions";
import { useRoute } from "vue-router";
import { useQuasar } from "quasar";
import type { QTableProps } from "quasar";
@ -485,6 +487,7 @@ onMounted(async () => {
<div class="row q-gutter-sm items-center">
<div class="toptitle col text-right q-gutter-x-sm">
<q-btn
v-if="checkPermission($route)?.attrIsUpdate"
flat
round
dense

View file

@ -1,5 +1,7 @@
<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { checkPermission } from "@/utils/permissions";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
@ -438,6 +440,7 @@ onMounted(() => {
</q-toolbar-title>
<div class="row q-col-gutter-sm">
<q-btn
v-if="checkPermission($route)?.attrIsUpdate"
round
flat
color="primary"
@ -513,6 +516,7 @@ onMounted(() => {
</q-toolbar-title>
<div class="row q-col-gutter-sm">
<q-btn
v-if="checkPermission($route)?.attrIsUpdate"
round
flat
color="primary"
@ -588,6 +592,7 @@ onMounted(() => {
สมรส
</div>
<q-btn
v-if="checkPermission($route)?.attrIsUpdate"
round
flat
dense
@ -688,6 +693,7 @@ onMounted(() => {
<div class="row q-col-gutter-sm">
<div class="text-weight-bold text-primary text-subtitle1"> ตร</div>
<q-btn
v-if="checkPermission($route)?.attrIsUpdate"
round
flat
dense
@ -711,6 +717,7 @@ onMounted(() => {
<q-space />
<div class="row q-col-gutter-sm">
<q-btn
v-if="checkPermission($route)?.attrIsUpdate"
round
flat
color="primary"

View file

@ -1,5 +1,7 @@
<script setup lang="ts">
import { ref, reactive, watch, onMounted } from "vue";
import { checkPermission } from "@/utils/permissions";
import dialogHeader from "@/components/DialogHeader.vue";
import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
@ -709,6 +711,7 @@ onMounted(async () => {
<template>
<div class="row items-center q-gutter-x-sm q-pb-sm">
<q-btn
v-if="checkPermission($route)?.attrIsUpdate"
round
flat
dense
@ -807,6 +810,7 @@ onMounted(async () => {
<q-tr :props="props" class="cursor-pointer">
<q-td auto-width>
<q-btn
v-if="checkPermission($route)?.attrIsUpdate"
color="primary"
flat
dense

View file

@ -1,5 +1,6 @@
<script setup lang="ts">
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";
@ -320,6 +321,7 @@ onMounted(async () => {
<template>
<div class="row items-center q-gutter-x-sm q-pb-sm">
<q-btn
v-if="checkPermission($route)?.attrIsUpdate"
flat
round
color="primary"
@ -410,6 +412,7 @@ onMounted(async () => {
<q-tr :props="props" class="cursor-pointer">
<q-td auto-width>
<q-btn
v-if="checkPermission($route)?.attrIsUpdate"
color="primary"
flat
dense
@ -571,91 +574,79 @@ onMounted(async () => {
</q-card>
</q-dialog>
<q-dialog v-model="historyDialog" class="dialog" persistent>
<q-layout
view="lHh lpr lFf"
container
style="height: 500px; min-width: 80%"
class="bg-white"
>
<q-header>
<q-toolbar>
<dialog-header
tittle="ประวัติแก้ไขความสามารถพิเศษ"
:close="closeHistoryDialog"
<q-dialog v-model="historyDialog" persistent>
<q-card style="width: 900px; max-width: 80vw">
<dialog-header
tittle="ประวัติแก้ไขความสามารถพิเศษ"
:close="closeHistoryDialog"
/>
<q-separator />
<q-card-section>
<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>
<q-separator color="grey-4" />
</q-header>
<q-page-container>
<q-page class="q-pa-md">
<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" v-if="mode === 'table'">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.id">
<div>{{ col.value ? col.value : "-" }}</div>
</q-td>
<q-td auto-width> </q-td>
</q-tr>
</template>
</d-table>
</q-page>
</q-page-container>
</q-layout>
<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" v-if="mode === 'table'">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.id">
<div>{{ col.value ? col.value : "-" }}</div>
</q-td>
<q-td auto-width> </q-td>
</q-tr>
</template>
</d-table>
</q-card-section>
</q-card>
</q-dialog>
</template>