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

Merge branch 'oat_dev' into develop

Browse source
This commit is contained in:
oat_dev 2024-03-20 16:52:05 +07:00
commit 6071d87a75
4 changed files with 267 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/api/registry/api.registry.ts
View file

@ -50,8 +50,17 @@ profileNewEducationHisByEducationId: (educationsId: string) =>
profileNewAbility: `${registryNew}ability`,
profileNewAbilityByProfileId: (profileId: string) =>
`${registryNew}ability/${profileId}`,
profileNewAbilityByAbilityId: (educationId: string) =>
`${registryNew}ability/${educationId}`,
profileNewAbilityByAbilityId: (abilityId: string) =>
`${registryNew}ability/${abilityId}`,
profileNewAbilityHisByAbilityId: (abilityId: string) =>
`${registryNew}ability/history/${abilityId}`,
// ใบอนุญาตประกอบวิชาชีพ
profileNewCertificate: `${registryNew}certificate`,
profileNewCertificateByProfileId: (profileId: string) =>
`${registryNew}certificate/${profileId}`,
profileNewCertificateByCertificateId: (certificateId: string) =>
`${registryNew}certificate/${certificateId}`,
profileNewCertificateHisByCertificateId: (certificateId: string) =>
`${registryNew}certificate/history/${certificateId}`,
};

320
src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
View file

@ -1,18 +1,34 @@
<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import moment from "moment";
import { ref, reactive, watch, onMounted } from "vue";
import dialogHeader from "@/components/DialogHeader.vue";
import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { QForm, useQuasar } from "quasar";
import type { ProfesLicenseObject } from "@/modules/04_registryNew/interface/index/profesLicense";
import { useRoute } from "vue-router";
import type { RequestItemsObject } from "@/modules/04_registryNew/interface/request/ProfesLicense";
import type { ResponseObject } from "@/modules/04_registryNew/interface/response/ProfesLicense";
import http from "@/plugins/http";
import config from "@/app.config";
const mixin = useCounterMixin();
const $q = useQuasar();
const { dialogConfirm, date2Thai } = mixin;
const {
dialogRemove,
dialogConfirm,
showLoader,
hideLoader,
messageError,
success,
date2Thai,
} = mixin;
const historyDialog = ref<boolean>(false);
const addDataDialog = 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 dialogStatus = ref<string>("create");
const editId = ref<string>("");
const columns = ref<QTableProps["columns"]>([
{
name: "certificateType",
@ -53,6 +69,7 @@ const columns = ref<QTableProps["columns"]>([
label: "วันที่ออกใบอนุญาต",
sortable: true,
field: "issueDate",
format: (v) => date2Thai(v),
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
@ -63,6 +80,7 @@ const columns = ref<QTableProps["columns"]>([
align: "left",
label: "วันที่หมดอายุ",
sortable: true,
format: (v) => date2Thai(v),
field: "expireDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -71,7 +89,7 @@ const columns = ref<QTableProps["columns"]>([
},
]);
const profesLicenseData = reactive<ProfesLicenseObject>({
const profesLicenseData = reactive<RequestItemsObject>({
certificateType: "",
issuer: "",
certificateNo: "",
@ -79,47 +97,30 @@ const profesLicenseData = reactive<ProfesLicenseObject>({
expireDate: new Date(),
});
const rows = ref<ResponseObject[]>([]);
const historyRows = ref<ResponseObject[]>([]);
const formFilter = reactive({
page: 1,
pageSize: 10,
keyword: "",
});
const historyFormFilter = reactive({
page: 1,
pageSize: 10,
keyword: "",
});
const pagination = ref({
page: formFilter.page,
rowsPerPage: formFilter.pageSize,
});
const row = [
{
certificateType: "ใบอนุญาต",
issuer: "หน่วยงานเชียงใหม่",
certificateNo: "12",
issueDate: new Date(),
expireDate: new Date(),
},
{
certificateType: "ใบอนุญาต",
issuer: "หน่วยงานพะเยา",
certificateNo: "136",
issueDate: new Date(),
expireDate: new Date(),
},
{
certificateType: "ใบอนุญาต",
issuer: "หน่วยงานโคราช",
certificateNo: "12",
issueDate: new Date(),
expireDate: new Date(),
},
{
certificateType: "ใบอนุญาต",
issuer: "หน่วยงานกทม",
certificateNo: "11",
issueDate: new Date(),
expireDate: new Date(),
},
];
const historyPagination = ref({
page: historyFormFilter.page,
rowsPerPage: historyFormFilter.pageSize,
});
const visibleColumns = ref<string[]>([
"certificateType",
@ -129,6 +130,14 @@ const visibleColumns = ref<string[]>([
"expireDate",
]);
const historyVisibleColumns = ref<string[]>([
"certificateType",
"issuer",
"certificateNo",
"issueDate",
"expireDate",
]);
function validateForm() {
onSubmit();
}
@ -137,6 +146,7 @@ async function onSubmit() {
dialogConfirm(
$q,
async () => {
dialogStatus.value === "create" ? addData() : editData(editId.value);
closeDialog();
},
"ยืนยันการบันทึกข้อมูล",
@ -145,11 +155,112 @@ async function onSubmit() {
}
function closeDialog() {
addDataDialog.value = false;
dialog.value = false;
}
function closeHistoryDialog() {
historyDialog.value = false;
}
async function fetchData(id: string) {
showLoader();
await http
.get(config.API.profileNewCertificateByProfileId(id))
.then(async (res) => {
rows.value = res.data.result;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
function clearForm() {
profesLicenseData.expireDate = new Date();
profesLicenseData.issueDate = new Date();
profesLicenseData.certificateNo = "";
profesLicenseData.certificateType = "";
profesLicenseData.issuer = "";
}
async function addData() {
await http
.post(config.API.profileNewCertificate, {
profileId: id.value,
expireDate: profesLicenseData.expireDate,
issueDate: profesLicenseData.issueDate,
certificateNo: profesLicenseData.certificateNo,
certificateType: profesLicenseData.certificateType,
issuer: profesLicenseData.issuer,
isActive: true,
})
.then(() => {
fetchData(id.value);
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
async function editData(idData: string) {
await http
.patch(config.API.profileNewCertificateByCertificateId(idData), {
expireDate: profesLicenseData.expireDate,
issueDate: profesLicenseData.issueDate,
certificateNo: profesLicenseData.certificateNo,
certificateType: profesLicenseData.certificateType,
issuer: profesLicenseData.issuer,
isActive: true,
})
.then(() => {
fetchData(id.value);
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
async function deleteData(idData: string) {
await http
.delete(config.API.profileNewCertificateByCertificateId(idData))
.then(() => {
fetchData(id.value);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
async function fetchHistoryData(id: string) {
showLoader();
await http
.get(config.API.profileNewCertificateHisByCertificateId(id))
.then(async (res) => {
historyRows.value = res.data.result;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
onMounted(async () => {
await fetchData(id.value);
});
</script>
<template>
@ -161,12 +272,27 @@ function closeHistoryDialog() {
color="primary"
icon="add"
size="16px"
@click="addDataDialog = true"
@click="
dialogStatus = 'create';
clearForm();
dialog = true;
"
>
<q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
>
<q-space />
<q-input
dense
outlined
v-model="formFilter.keyword"
label="ค้นหา"
class="q-mr-sm"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
<q-select
v-if="mode === 'table'"
v-model="visibleColumns"
@ -219,12 +345,13 @@ function closeHistoryDialog() {
:grid="mode === 'card'"
ref="table"
:columns="columns"
:rows="row"
:rows="rows"
row-key="name"
flat
bordered
:paging="true"
dense
:filter="formFilter.keyword"
v-model:pagination="pagination"
:rows-per-page-options="[20, 50, 100]"
class="custom-header-table"
@ -240,19 +367,36 @@ function closeHistoryDialog() {
</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"
@click="addDataDialog = true"
>
<div v-if="col.name === 'issueDate' || col.name === 'expireDate'">
{{ col.value ? date2Thai(col.value) : "-" }}
</div>
<div v-else>
<q-td v-for="col in props.cols" :key="col.id">
<div>
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="primary"
flat
dense
round
class="q-mr-xs"
size="14px"
icon="mdi-pencil-outline"
clickable
@click="
() => {
dialogStatus = 'edit';
editId = props.row.id;
profesLicenseData.certificateType = props.row.certificateType;
profesLicenseData.certificateNo = props.row.certificateNo;
profesLicenseData.issuer = props.row.issuer;
profesLicenseData.issueDate = props.row.issueDate;
profesLicenseData.expireDate = props.row.expireDate;
dialog = true;
}
"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
<q-btn
color="info"
flat
@ -260,9 +404,26 @@ function closeHistoryDialog() {
round
size="14px"
icon="mdi-history"
@click="() => (historyDialog = true)"
@click="
() => (fetchHistoryData(props.row.id), (historyDialog = true))
"
>
<q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
<q-tooltip>ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ</q-tooltip>
</q-btn>
<q-btn
color="red"
flat
dense
round
size="14px"
icon="mdi-delete"
clickable
@click.stop="
dialogRemove($q, async () => await deleteData(props.row.id))
"
v-close-popup
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
</q-tr>
@ -278,18 +439,30 @@ function closeHistoryDialog() {
round
color="primary"
icon="edit"
@click="addDataDialog = true"
@click="
dialogStatus = 'edit';
editId = props.row.id;
profesLicenseData.certificateType = props.row.certificateType;
profesLicenseData.certificateNo = props.row.certificateNo;
profesLicenseData.issuer = props.row.issuer;
profesLicenseData.issueDate = props.row.issueDate;
profesLicenseData.expireDate = props.row.expireDate;
dialog = true;
"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
<q-btn
flat
round
color="blue"
icon="history"
@click="historyDialog = true"
color="info"
icon="mdi-history"
size="14px"
@click="
() => (fetchHistoryData(props.row.id), (historyDialog = true))
"
>
<q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
<q-tooltip>ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ</q-tooltip>
</q-btn>
</q-card-actions>
<q-separator />
@ -305,13 +478,7 @@ function closeHistoryDialog() {
<div>{{ col.label }}</div>
</div>
<div class="col">
<div
v-if="col.name === 'issueDate' || col.name === 'expireDate'"
>
{{ col.value ? date2Thai(col.value) : "-" }}
</div>
<div v-else>{{ col.value }}</div>
<div>{{ col.value }}</div>
</div>
</div>
</q-list>
@ -320,12 +487,12 @@ function closeHistoryDialog() {
</template>
</d-table>
<q-dialog v-model="addDataDialog" class="dialog" persistent>
<q-dialog v-model="dialog" class="dialog" persistent>
<q-card style="min-width: 40%" class="bg-white">
<q-form @submit.prevent greedy @validation-success="validateForm">
<q-card-section class="flex justify-between" style="padding: 0">
<dialog-header
tittle="เพิ่มใบอนุญาตประกอบวิชาชีพ"
:tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
:close="closeDialog"
/>
</q-card-section>
@ -345,7 +512,7 @@ function closeHistoryDialog() {
<div class="col">
<q-input
outlined
v-model="profesLicenseData.certificateType"
v-model="profesLicenseData.issuer"
label="หน่วยงานผู้ออกใบอนุญาต"
bg-color="white"
dense
@ -360,7 +527,7 @@ function closeHistoryDialog() {
<div class="col">
<q-input
outlined
v-model="profesLicenseData.certificateType"
v-model="profesLicenseData.certificateNo"
label="เลขที่ใบอนุญาต"
bg-color="white"
dense
@ -475,7 +642,7 @@ function closeHistoryDialog() {
<q-form @submit.prevent greedy @validation-success="validateForm">
<q-card-section class="flex justify-between" style="padding: 0">
<dialog-header
tittle="ประวัติแก้ไขประวัติการศึกษา"
tittle="ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ"
:close="closeHistoryDialog"
/>
</q-card-section>
@ -487,7 +654,7 @@ function closeHistoryDialog() {
dense
outlined
bg-color="white"
v-model="formFilter.keyword"
v-model="historyFormFilter.keyword"
label="ค้นหา"
class="q-mr-sm"
>
@ -497,7 +664,7 @@ function closeHistoryDialog() {
</q-input>
<q-select
v-model="visibleColumns"
v-model="historyVisibleColumns"
multiple
outlined
dense
@ -515,15 +682,17 @@ function closeHistoryDialog() {
<d-table
ref="table"
:columns="columns"
:rows="row"
:rows="historyRows"
row-key="name"
flat
:filter="historyFormFilter.keyword"
v-model:pagination="historyPagination"
bordered
:paging="true"
dense
:rows-per-page-options="[20, 50, 100]"
class="custom-header-table"
:visible-columns="visibleColumns"
:visible-columns="historyVisibleColumns"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -536,13 +705,8 @@ function closeHistoryDialog() {
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.id">
<div
v-if="col.name === 'issueDate' || col.name === 'expireDate'"
>
{{ col.value ? date2Thai(col.value) : "-" }}
</div>
<div v-else>
{{ col.value }}
<div>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>

4
src/modules/04_registryNew/interface/index/profesLicense.ts → src/modules/04_registryNew/interface/request/ProfesLicense.ts
View file

@ -1,4 +1,4 @@
interface ProfesLicenseObject {
interface RequestItemsObject {
certificateType: string;
issuer: string;
certificateNo: string;
@ -6,4 +6,4 @@ interface ProfesLicenseObject {
expireDate: Date;
}
export type { ProfesLicenseObject };
export type { RequestItemsObject };

12
src/modules/04_registryNew/interface/response/ProfesLicense.ts Normal file
View file

@ -0,0 +1,12 @@
//ข้อมูล
interface ResponseObject {
issuer: string,
certificateType: string,
certificateNo: string,
issueDate: Date | null,
isActive: boolean,
expireDate: Date | null
}
export type { ResponseObject };