ทำเบียนประวัติลูกจ้างชั่วคราว
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
40b46b8c62
commit
ba64953315
25 changed files with 4679 additions and 848 deletions
|
|
@ -10,8 +10,8 @@ export const apiUrlConfigReport = import.meta.env.VITE_API_REPORT_URL;
|
||||||
|
|
||||||
const config = ref<any>({
|
const config = ref<any>({
|
||||||
development: {
|
development: {
|
||||||
// API_URI: "https://localhost:7260/api",
|
API_URI: "http://localhost:13001/api/v1",
|
||||||
API_URI: "https://bma-ehr.frappet.synology.me/api/v1",
|
// API_URI: "https://bma-ehr.frappet.synology.me/api/v1",
|
||||||
// API_URI_ORG_SERVICE: "https://localhost:7056/api/v1", //ใช้ชั่วคราว
|
// API_URI_ORG_SERVICE: "https://localhost:7056/api/v1", //ใช้ชั่วคราว
|
||||||
API_URI_ORG_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
|
API_URI_ORG_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
|
||||||
// API_URI_ORG_EMPLOYEE_SERVICE: "https://localhost:7208/api/v1", //ใช้ชั่วคราว
|
// API_URI_ORG_EMPLOYEE_SERVICE: "https://localhost:7208/api/v1", //ใช้ชั่วคราว
|
||||||
|
|
|
||||||
|
|
@ -177,4 +177,17 @@ export default {
|
||||||
`${registryNew}${empType}/family/${type}`,
|
`${registryNew}${empType}/family/${type}`,
|
||||||
profileFamilyHistory: (id: string, empType: string, type: string) =>
|
profileFamilyHistory: (id: string, empType: string, type: string) =>
|
||||||
`${registryNew}${empType}/family/${type}/history/${id}`,
|
`${registryNew}${empType}/family/${type}/history/${id}`,
|
||||||
|
|
||||||
|
//ลูกจ้างชั่วคราว
|
||||||
|
positionEmployee: (id: string) => `${registryNew}-employee/position/${id}`,
|
||||||
|
informationEmployee: (id: string) =>
|
||||||
|
`${registryNew}-employee/information/${id}`,
|
||||||
|
informationHistoryEmployee: (id: string) =>
|
||||||
|
`${registryNew}-employee/information/history/${id}`,
|
||||||
|
employmentEmployee: (id: string) =>
|
||||||
|
`${registryNew}-employee/employment/${id}`,
|
||||||
|
employmentEmployeeId: (id: string) =>
|
||||||
|
`${registryNew}-employee/employment/id/${id}`,
|
||||||
|
employmentHistoryEmployee: (id: string) =>
|
||||||
|
`${registryNew}-employee/employment/history/${id}`,
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,641 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, watch, ref, reactive } from "vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
import type { FormEmployee } from "@/modules/04_registryNew/interface/request/Employee";
|
||||||
|
import type {
|
||||||
|
EmployeeHistory,
|
||||||
|
ResEmployee,
|
||||||
|
} from "@/modules/04_registryNew/interface/response/Employee";
|
||||||
|
|
||||||
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||||||
|
|
||||||
|
import type { QTableColumn } from "quasar";
|
||||||
|
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const route = useRoute();
|
||||||
|
const {
|
||||||
|
success,
|
||||||
|
showLoader,
|
||||||
|
hideLoader,
|
||||||
|
date2Thai,
|
||||||
|
messageError,
|
||||||
|
dialogConfirm,
|
||||||
|
dialogMessageNotify,
|
||||||
|
} = useCounterMixin();
|
||||||
|
|
||||||
|
const profileId = ref<string>(
|
||||||
|
route.params.id ? route.params.id.toString() : ""
|
||||||
|
);
|
||||||
|
|
||||||
|
/** ข้อมูลลูกจ้างชั่วคราว*/
|
||||||
|
const modalEdit = ref<boolean>(false);
|
||||||
|
const dataEmployee = reactive<ResEmployee>({
|
||||||
|
id: "",
|
||||||
|
positionEmployeeGroupId: "",
|
||||||
|
positionEmployeeLineId: "",
|
||||||
|
positionEmployeePositionId: "",
|
||||||
|
employeeOc: "",
|
||||||
|
employeeTypeIndividual: "",
|
||||||
|
employeeWage: "",
|
||||||
|
employeeMoneyIncrease: "",
|
||||||
|
employeeMoneyAllowance: "",
|
||||||
|
employeeMoneyEmployee: "",
|
||||||
|
employeeMoneyEmployer: "",
|
||||||
|
});
|
||||||
|
const formData = reactive<FormEmployee>({
|
||||||
|
positionEmployeeGroupId: "",
|
||||||
|
positionEmployeeLineId: "",
|
||||||
|
positionEmployeePositionId: "",
|
||||||
|
employeeOc: "",
|
||||||
|
employeeTypeIndividual: "",
|
||||||
|
employeeWage: "",
|
||||||
|
employeeMoneyIncrease: "",
|
||||||
|
employeeMoneyAllowance: "",
|
||||||
|
employeeMoneyEmployee: "",
|
||||||
|
employeeMoneyEmployer: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
/** function fetch ข้อมูลลูกจ้างชั่วคราว*/
|
||||||
|
function fetchData() {
|
||||||
|
showLoader();
|
||||||
|
http
|
||||||
|
.get(config.API.informationEmployee(profileId.value))
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
dataEmployee.positionEmployeeGroupId = data.positionEmployeeGroupId;
|
||||||
|
dataEmployee.positionEmployeeLineId = data.positionEmployeeLineId;
|
||||||
|
dataEmployee.positionEmployeePositionId = data.positionEmployeePositionId;
|
||||||
|
dataEmployee.employeeOc = data.employeeOc;
|
||||||
|
dataEmployee.employeeTypeIndividual = data.employeeTypeIndividual;
|
||||||
|
dataEmployee.employeeWage = data.employeeWage;
|
||||||
|
dataEmployee.employeeMoneyIncrease = data.employeeMoneyIncrease;
|
||||||
|
dataEmployee.employeeMoneyAllowance = data.employeeMoneyAllowance;
|
||||||
|
dataEmployee.employeeMoneyEmployee = data.employeeMoneyEmployee;
|
||||||
|
dataEmployee.employeeMoneyEmployer = data.employeeMoneyEmployer;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** function เปิด Dialog แก้ไขมูลลูกจ้างชั่วคราว*/
|
||||||
|
function onClickEdit() {
|
||||||
|
modalEdit.value = true;
|
||||||
|
formData.positionEmployeeGroupId = dataEmployee.positionEmployeeGroupId;
|
||||||
|
formData.positionEmployeeLineId = dataEmployee.positionEmployeeLineId;
|
||||||
|
formData.positionEmployeePositionId = dataEmployee.positionEmployeePositionId;
|
||||||
|
formData.employeeOc = dataEmployee.employeeOc;
|
||||||
|
formData.employeeTypeIndividual = dataEmployee.employeeTypeIndividual;
|
||||||
|
formData.employeeWage = dataEmployee.employeeWage;
|
||||||
|
formData.employeeMoneyIncrease = dataEmployee.employeeMoneyIncrease;
|
||||||
|
formData.employeeMoneyAllowance = dataEmployee.employeeMoneyAllowance;
|
||||||
|
formData.employeeMoneyEmployee = dataEmployee.employeeMoneyEmployee;
|
||||||
|
formData.employeeMoneyEmployer = dataEmployee.employeeMoneyEmployer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** function ปิด Dialog แก้ไขมูลลูกจ้างชั่วคราว*/
|
||||||
|
function onCloseDialog() {
|
||||||
|
modalEdit.value = false;
|
||||||
|
formData.positionEmployeeGroupId = "";
|
||||||
|
formData.positionEmployeeLineId = "";
|
||||||
|
formData.positionEmployeePositionId = "";
|
||||||
|
formData.employeeOc = "";
|
||||||
|
formData.employeeTypeIndividual = "";
|
||||||
|
formData.employeeWage = "";
|
||||||
|
formData.employeeMoneyIncrease = "";
|
||||||
|
formData.employeeMoneyAllowance = "";
|
||||||
|
formData.employeeMoneyEmployee = "";
|
||||||
|
formData.employeeMoneyEmployer = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
/** function บันทึกแก้ไขมูลลูกจ้างชั่วคราว*/
|
||||||
|
function onSubmit() {
|
||||||
|
dialogConfirm($q, () => {
|
||||||
|
showLoader();
|
||||||
|
http
|
||||||
|
.put(config.API.informationEmployee(profileId.value), formData)
|
||||||
|
.then(() => {
|
||||||
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
fetchData();
|
||||||
|
onCloseDialog();
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ประวัติข้อมูลลูกจ้างชั่วคราว */
|
||||||
|
const modalHistory = ref<boolean>(false);
|
||||||
|
const filter = ref<string>("");
|
||||||
|
const rows = ref<EmployeeHistory[]>([]);
|
||||||
|
const columns = ref<QTableColumn[]>([
|
||||||
|
{
|
||||||
|
name: "positionEmployeeGroupId",
|
||||||
|
align: "left",
|
||||||
|
label: "กลุ่มงาน",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionEmployeeGroupId",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionEmployeeLineId",
|
||||||
|
align: "left",
|
||||||
|
label: "สายงาน",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionEmployeeLineId",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionEmployeePositionId",
|
||||||
|
align: "left",
|
||||||
|
label: "ตำแหน่งทางสายงาน",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionEmployeePositionId",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "employeeOc",
|
||||||
|
align: "left",
|
||||||
|
label: "สังกัด",
|
||||||
|
sortable: true,
|
||||||
|
field: "employeeOc",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "employeeTypeIndividual",
|
||||||
|
align: "left",
|
||||||
|
label: "ประเภทบุคคล",
|
||||||
|
sortable: true,
|
||||||
|
field: "employeeTypeIndividual",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "employeeWage",
|
||||||
|
align: "left",
|
||||||
|
label: "ค่าจ้าง",
|
||||||
|
sortable: true,
|
||||||
|
field: "employeeWage",
|
||||||
|
format: (v) => (v ? Number(v).toLocaleString() : ""),
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "employeeMoneyIncrease",
|
||||||
|
align: "left",
|
||||||
|
label: "เงินเพิ่มการครองชึพชั่วคราว",
|
||||||
|
sortable: true,
|
||||||
|
field: "employeeMoneyIncrease",
|
||||||
|
format: (v) => (v ? Number(v).toLocaleString() : ""),
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "employeeMoneyAllowance",
|
||||||
|
align: "left",
|
||||||
|
label: "เงินช่วยเหลือการครองชึพชั่วคราว",
|
||||||
|
sortable: true,
|
||||||
|
field: "employeeMoneyAllowance",
|
||||||
|
format: (v) => (v ? Number(v).toLocaleString() : ""),
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "employeeMoneyEmployee",
|
||||||
|
align: "left",
|
||||||
|
label: "เงินสมทบประกันสังคม(ลูกจ้าง)",
|
||||||
|
sortable: true,
|
||||||
|
field: "employeeMoneyEmployee",
|
||||||
|
format: (v) => (v ? Number(v).toLocaleString() : ""),
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "employeeMoneyEmployer",
|
||||||
|
align: "left",
|
||||||
|
label: "เงินสมทบประกันสังคม(นายจ้าง)",
|
||||||
|
sortable: true,
|
||||||
|
field: "employeeMoneyEmployer",
|
||||||
|
format: (v) => (v ? Number(v).toLocaleString() : ""),
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "createdFullName",
|
||||||
|
align: "left",
|
||||||
|
label: "ผู้ดำเนินการ",
|
||||||
|
sortable: true,
|
||||||
|
field: "createdFullName",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "createdAt",
|
||||||
|
align: "left",
|
||||||
|
label: "วันที่แก้ไข",
|
||||||
|
sortable: true,
|
||||||
|
field: "lastUpdatedAt",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
format: (v) => date2Thai(v),
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const visibleColumns = ref<String[]>([
|
||||||
|
"positionEmployeeGroupId",
|
||||||
|
"positionEmployeeLineId",
|
||||||
|
"positionEmployeePositionId",
|
||||||
|
"employeeOc",
|
||||||
|
"employeeTypeIndividual",
|
||||||
|
"employeeWage",
|
||||||
|
"employeeMoneyIncrease",
|
||||||
|
"employeeMoneyAllowance",
|
||||||
|
"employeeMoneyEmployee",
|
||||||
|
"employeeMoneyEmployer",
|
||||||
|
"createdFullName",
|
||||||
|
"createdAt",
|
||||||
|
]);
|
||||||
|
|
||||||
|
function onClickHistory() {
|
||||||
|
showLoader();
|
||||||
|
modalHistory.value = true;
|
||||||
|
http
|
||||||
|
.get(config.API.informationHistoryEmployee(profileId.value))
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
rows.value = data;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
profileId.value && fetchData();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="row q-gutter-sm items-center">
|
||||||
|
<div class="toptitle col text-right q-gutter-x-sm">
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
icon="mdi-pencil-outline"
|
||||||
|
color="primary"
|
||||||
|
@click="onClickEdit"
|
||||||
|
>
|
||||||
|
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
icon="mdi-history"
|
||||||
|
color="info"
|
||||||
|
@click="onClickHistory"
|
||||||
|
>
|
||||||
|
<q-tooltip>ประวัติแก้ไขข้อมูลลูกจ้างชั่วคราว</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<q-card bordered class="my-card bg-grey-1 q-pa-md">
|
||||||
|
<div :class="$q.screen.gt.xs ? 'row' : 'column'">
|
||||||
|
<!-- column 1 -->
|
||||||
|
<div class="col-md-7 col-12 row">
|
||||||
|
<div class="col-5 text-grey-6 text-weight-medium">
|
||||||
|
<div class="q-py-xs">กลุ่มงาน</div>
|
||||||
|
<div class="q-py-xs">สายงาน</div>
|
||||||
|
<div class="q-py-xs">ตำแหน่งทางสายงาน</div>
|
||||||
|
<div class="q-py-xs">สังกัด</div>
|
||||||
|
<div class="q-py-xs">ประเภทบุคคล</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- data -->
|
||||||
|
<div class="col-7">
|
||||||
|
<div class="q-py-xs">
|
||||||
|
{{ dataEmployee.positionEmployeeGroupId }}
|
||||||
|
</div>
|
||||||
|
<div class="q-py-xs">
|
||||||
|
{{ dataEmployee.positionEmployeeLineId }}
|
||||||
|
</div>
|
||||||
|
<div class="q-py-xs">
|
||||||
|
{{ dataEmployee.positionEmployeePositionId }}
|
||||||
|
</div>
|
||||||
|
<div class="q-py-xs">
|
||||||
|
{{ dataEmployee.employeeOc }}
|
||||||
|
</div>
|
||||||
|
<div class="q-py-xs">
|
||||||
|
{{ dataEmployee.employeeTypeIndividual }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- column 2 -->
|
||||||
|
<div class="col-md-5 col-12 row">
|
||||||
|
<div class="col-5 col text-grey-6 text-weight-medium">
|
||||||
|
<div class="q-py-xs">ค่าจ้าง</div>
|
||||||
|
<div class="q-py-xs">เงินเพิ่มการครองชึพชั่วคราว</div>
|
||||||
|
<div class="q-py-xs">เงินช่วยเหลือการครองชึพชั่วคราว</div>
|
||||||
|
<div class="q-py-xs">เงินสมทบประกันสังคม(ลูกจ้าง)</div>
|
||||||
|
<div class="q-py-xs">เงินสมทบประกันสังคม(นายจ้าง)</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-7">
|
||||||
|
<div class="q-py-xs">
|
||||||
|
{{ dataEmployee.employeeWage }}
|
||||||
|
</div>
|
||||||
|
<div class="q-py-xs">
|
||||||
|
{{ dataEmployee.employeeMoneyIncrease }}
|
||||||
|
</div>
|
||||||
|
<div class="q-py-xs">
|
||||||
|
{{ dataEmployee.employeeMoneyAllowance }}
|
||||||
|
</div>
|
||||||
|
<div class="q-py-xs">
|
||||||
|
{{ dataEmployee.employeeMoneyEmployee }}
|
||||||
|
</div>
|
||||||
|
<div class="q-py-xs">
|
||||||
|
{{ dataEmployee.employeeMoneyEmployer }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
|
<!-- Dialog แก้ไขข้อมูลลูกจ้างชั่วคราว -->
|
||||||
|
<q-dialog v-model="modalEdit" persistent full-width>
|
||||||
|
<q-card>
|
||||||
|
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||||
|
<DialogHeader
|
||||||
|
tittle="แก้ไขข้อมูลลูกจ้างชั่วคราว"
|
||||||
|
:close="onCloseDialog"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section>
|
||||||
|
<div class="row col-12 q-col-gutter-sm">
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
v-model="formData.positionEmployeeGroupId"
|
||||||
|
class="inputgreen"
|
||||||
|
label="กลุ่มงาน"
|
||||||
|
:rules="[(val: string) => !!val || `${'กรุณากรอกกลุ่มงาน'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
v-model="formData.positionEmployeeLineId"
|
||||||
|
class="inputgreen"
|
||||||
|
label="สายงาน"
|
||||||
|
:rules="[(val: string) => !!val || `${'กรุณากรอกสายงาน'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
v-model="formData.positionEmployeePositionId"
|
||||||
|
class="inputgreen"
|
||||||
|
label="ตำแหน่งทางสายงาน"
|
||||||
|
:rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่งทางสายงาน'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
v-model="formData.employeeOc"
|
||||||
|
class="inputgreen"
|
||||||
|
label="สังกัด"
|
||||||
|
:rules="[(val: string) => !!val || `${'กรุณากรอกสังกัด'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
v-model="formData.employeeTypeIndividual"
|
||||||
|
class="inputgreen"
|
||||||
|
label="ประเภทบุคคล"
|
||||||
|
:rules="[(val: string) => !!val || `${'กรุณากรอกประเภทบุคคล'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
v-model="formData.employeeWage"
|
||||||
|
class="inputgreen"
|
||||||
|
label="ค่าจ้าง"
|
||||||
|
mask="#"
|
||||||
|
reverse-fill-mask
|
||||||
|
:rules="[(val: string) => !!val || `${'กรุณากรอกค่าจ้าง'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
v-model="formData.employeeMoneyIncrease"
|
||||||
|
class="inputgreen"
|
||||||
|
label="เงินเพิ่มการครองชึพชั่วคราว"
|
||||||
|
mask="#"
|
||||||
|
reverse-fill-mask
|
||||||
|
:rules="[(val: string) => !!val || `${'กรุณากรอกเงินเพิ่มการครองชึพชั่วคราว'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
v-model="formData.employeeMoneyAllowance"
|
||||||
|
class="inputgreen"
|
||||||
|
label="เงินช่วยเหลือการครองชึพชั่วคราว"
|
||||||
|
mask="#"
|
||||||
|
reverse-fill-mask
|
||||||
|
:rules="[(val: string) => !!val || `${'กรุณากรอกเงินช่วยเหลือการครองชึพชั่วคราว'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
v-model="formData.employeeMoneyEmployee"
|
||||||
|
class="inputgreen"
|
||||||
|
label="เงินสมทบประกันสังคม(ลูกจ้าง)"
|
||||||
|
mask="#"
|
||||||
|
reverse-fill-mask
|
||||||
|
:rules="[(val: string) => !!val || `${'กรุณากรอกเงินสมทบประกันสังคม(ลูกจ้าง)'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
v-model="formData.employeeMoneyEmployer"
|
||||||
|
class="inputgreen"
|
||||||
|
label="เงินสมทบประกันสังคม(นายจ้าง)"
|
||||||
|
mask="#"
|
||||||
|
reverse-fill-mask
|
||||||
|
:rules="[(val: string) => !!val || `${'กรุณากรอกเงินสมทบประกันสังคม(นายจ้าง))'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
|
||||||
|
<q-separator />
|
||||||
|
<q-card-actions align="right">
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
unelevated
|
||||||
|
label="บันทึก"
|
||||||
|
id="onSubmit"
|
||||||
|
type="submit"
|
||||||
|
color="public"
|
||||||
|
class="q-px-md"
|
||||||
|
>
|
||||||
|
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
|
||||||
|
<!-- Dialog ประวัติการแก้ไขข้อมูลลูกจ้างชั่วคราว -->
|
||||||
|
<q-dialog v-model="modalHistory" persistent>
|
||||||
|
<q-card style="min-width: 80%">
|
||||||
|
<DialogHeader
|
||||||
|
tittle="ประวัติแก้ไขข้อมูลส่วนตัว"
|
||||||
|
:close="() => (modalHistory = false)"
|
||||||
|
/>
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<q-card-section style="max-height: 50vh" class="scroll">
|
||||||
|
<div class="row q-gutter-sm q-mb-sm">
|
||||||
|
<q-space />
|
||||||
|
<q-input
|
||||||
|
standout
|
||||||
|
dense
|
||||||
|
v-model="filter"
|
||||||
|
ref="filterRef"
|
||||||
|
outlined
|
||||||
|
placeholder="ค้นหา"
|
||||||
|
debounce="300"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon
|
||||||
|
v-if="filter == ''"
|
||||||
|
name="search"
|
||||||
|
@click.stop.prevent="filter = ''"
|
||||||
|
class="cursor-pointer"
|
||||||
|
/>
|
||||||
|
<q-icon
|
||||||
|
v-if="filter"
|
||||||
|
name="cancel"
|
||||||
|
@click.stop.prevent="filter = ''"
|
||||||
|
class="cursor-pointer"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
<q-select
|
||||||
|
v-model="visibleColumns"
|
||||||
|
multiple
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
options-dense
|
||||||
|
:display-value="$q.lang.table.columns"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
:options="columns"
|
||||||
|
option-value="name"
|
||||||
|
options-cover
|
||||||
|
style="min-width: 150px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<d-table
|
||||||
|
ref="table"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
dense
|
||||||
|
:columns="columns"
|
||||||
|
:rows="rows"
|
||||||
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
:filter="filter"
|
||||||
|
>
|
||||||
|
>
|
||||||
|
<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-tr>
|
||||||
|
</template>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<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-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
</q-card-section>
|
||||||
|
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<q-card-actions align="right"> </q-card-actions>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -0,0 +1,522 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, onMounted } from "vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
import type {
|
||||||
|
Employment,
|
||||||
|
EmploymentHistory,
|
||||||
|
} from "@/modules/04_registryNew/interface/response/Employee";
|
||||||
|
import type { FormEmployment } from "@/modules/04_registryNew/interface/request/Employee";
|
||||||
|
|
||||||
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||||||
|
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const route = useRoute();
|
||||||
|
const {
|
||||||
|
date2Thai,
|
||||||
|
dialogConfirm,
|
||||||
|
dialogRemove,
|
||||||
|
success,
|
||||||
|
messageError,
|
||||||
|
hideLoader,
|
||||||
|
showLoader,
|
||||||
|
} = useCounterMixin();
|
||||||
|
|
||||||
|
const profileId = ref<string>(route.params.id.toString());
|
||||||
|
|
||||||
|
/** ข้อมูลการจ้าง*/
|
||||||
|
const rows = ref<Employment[]>([]);
|
||||||
|
const filter = ref<string>("");
|
||||||
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "date",
|
||||||
|
align: "left",
|
||||||
|
label: "วันที่จ้าง",
|
||||||
|
sortable: false,
|
||||||
|
field: "date",
|
||||||
|
format: (v) => date2Thai(v),
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "command",
|
||||||
|
align: "left",
|
||||||
|
label: "คำสั่งจ้าง",
|
||||||
|
sortable: false,
|
||||||
|
field: "command",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "createdFullName",
|
||||||
|
align: "left",
|
||||||
|
label: "ผู้ดำเนินการ",
|
||||||
|
sortable: true,
|
||||||
|
field: "createdFullName",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "createdAt",
|
||||||
|
align: "left",
|
||||||
|
label: "วันที่แก้ไข",
|
||||||
|
sortable: true,
|
||||||
|
field: "lastUpdatedAt",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
format: (v) => date2Thai(v),
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const visibleColumns = ref<string[]>([
|
||||||
|
"date",
|
||||||
|
"command",
|
||||||
|
"createdFullName",
|
||||||
|
"createdAt",
|
||||||
|
]);
|
||||||
|
const modalEmployment = ref<boolean>(false);
|
||||||
|
const isEdit = ref<boolean>(false);
|
||||||
|
const employmentId = ref<string>("");
|
||||||
|
const formData = reactive<FormEmployment>({
|
||||||
|
date: null,
|
||||||
|
command: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
/** function fetch ข้อมูลรายการการจ้าง*/
|
||||||
|
function fetchListEmployment() {
|
||||||
|
showLoader();
|
||||||
|
http
|
||||||
|
.get(config.API.employmentEmployee(profileId.value))
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
rows.value = data;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function fetch ข้อมูลการจ้าง
|
||||||
|
* @param id รายการการจ้าง
|
||||||
|
*/
|
||||||
|
function fetchDataEmployment(id: string) {
|
||||||
|
showLoader();
|
||||||
|
http
|
||||||
|
.get(config.API.employmentEmployeeId(id))
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
formData.date = data.date;
|
||||||
|
formData.command = data.command;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function เปิด dialog Form ข้อมูลการจ้าง
|
||||||
|
* @param statusEdit สถานะการ สร้าง หรือ แก่ไข
|
||||||
|
* @param id รายการการจ้าง
|
||||||
|
*/
|
||||||
|
function onOpenDialog(statusEdit: boolean = false, id: string = "") {
|
||||||
|
modalEmployment.value = true;
|
||||||
|
if (statusEdit) {
|
||||||
|
isEdit.value = statusEdit;
|
||||||
|
employmentId.value = id;
|
||||||
|
fetchDataEmployment(id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** function ปิด dialog Form ข้อมูลการจ้าง*/
|
||||||
|
function onCloseDialog() {
|
||||||
|
modalEmployment.value = false;
|
||||||
|
isEdit.value = false;
|
||||||
|
employmentId.value = "";
|
||||||
|
formData.date = null;
|
||||||
|
formData.command = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
/** function บันทึกข้อมูลการจ้าง*/
|
||||||
|
function onSubmit() {
|
||||||
|
dialogConfirm($q, () => {
|
||||||
|
showLoader();
|
||||||
|
const methods = isEdit.value ? "put" : "post";
|
||||||
|
const id = isEdit.value ? employmentId.value : profileId.value;
|
||||||
|
http[methods](config.API.employmentEmployee(id), formData)
|
||||||
|
.then(() => {
|
||||||
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
fetchListEmployment();
|
||||||
|
onCloseDialog();
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function ลบข้อมูลรายการจ้าง
|
||||||
|
* @param id รายการจ้าง
|
||||||
|
*/
|
||||||
|
function onDeleteEmployment(id: string) {
|
||||||
|
dialogRemove($q, () => {
|
||||||
|
showLoader();
|
||||||
|
http
|
||||||
|
.delete(config.API.employmentEmployee(id))
|
||||||
|
.then(() => {
|
||||||
|
success($q, "ลบข้อมูลสำเร็จ");
|
||||||
|
fetchListEmployment();
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ประวัติข้อมูลการจ้าง*/
|
||||||
|
const modalHistory = ref<boolean>(false);
|
||||||
|
const rowsHistory = ref<EmploymentHistory[]>([]);
|
||||||
|
const filterHistory = ref<string>("");
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function เปิด dialog ประวัติการแก้ไขข้อมูลการจ้าง
|
||||||
|
* @param id รายการการจ้าง
|
||||||
|
*/
|
||||||
|
function onClickHistory(id: string) {
|
||||||
|
modalHistory.value = true;
|
||||||
|
showLoader();
|
||||||
|
http
|
||||||
|
.get(config.API.employmentHistoryEmployee(id))
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
rowsHistory.value = data;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
profileId.value && fetchListEmployment();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="q-gutter-sm">
|
||||||
|
<q-btn
|
||||||
|
size="12px"
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
color="primary"
|
||||||
|
icon="mdi-plus"
|
||||||
|
@click="onOpenDialog()"
|
||||||
|
>
|
||||||
|
<q-tooltip>เพิ่มข้อมูลการจ้าง</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<q-space />
|
||||||
|
<div class="q-gutter-sm" style="display: flex">
|
||||||
|
<q-input outlined dense v-model="filter" label="ค้นหา">
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon
|
||||||
|
v-if="filter == ''"
|
||||||
|
name="search"
|
||||||
|
@click.stop.prevent="filter = ''"
|
||||||
|
class="cursor-pointer"
|
||||||
|
/>
|
||||||
|
<q-icon
|
||||||
|
v-if="filter"
|
||||||
|
name="cancel"
|
||||||
|
@click.stop.prevent="filter = ''"
|
||||||
|
class="cursor-pointer"
|
||||||
|
/> </template
|
||||||
|
></q-input>
|
||||||
|
|
||||||
|
<q-select
|
||||||
|
v-model="visibleColumns"
|
||||||
|
multiple
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
options-dense
|
||||||
|
:display-value="$q.lang.table.columns"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
:options="columns?.slice(0, 2)"
|
||||||
|
option-value="name"
|
||||||
|
options-cover
|
||||||
|
style="min-width: 150px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="q-mt-sm">
|
||||||
|
<d-table
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
id="table"
|
||||||
|
ref="table"
|
||||||
|
:columns="columns?.slice(0, 2)"
|
||||||
|
:rows="rows"
|
||||||
|
:filter="filter"
|
||||||
|
row-key="dateEmployment"
|
||||||
|
:paging="true"
|
||||||
|
dense
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
>
|
||||||
|
<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-th>
|
||||||
|
<q-th auto-width></q-th>
|
||||||
|
<q-th auto-width></q-th>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props" class="cursor-pointer" style="height: 40px">
|
||||||
|
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
|
<div>
|
||||||
|
{{ col.value ? col.value : "-" }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
<q-td>
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
color="primary"
|
||||||
|
icon="mdi-pencil"
|
||||||
|
@click="onOpenDialog(true, props.row.id)"
|
||||||
|
>
|
||||||
|
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-td>
|
||||||
|
<q-td>
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
color="red"
|
||||||
|
icon="mdi-delete"
|
||||||
|
@click="onDeleteEmployment(props.row.id)"
|
||||||
|
>
|
||||||
|
<q-tooltip>ลบข้อมูล</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
</q-td>
|
||||||
|
<q-td>
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
color="info"
|
||||||
|
icon="mdi-history"
|
||||||
|
@click="onClickHistory(props.row.id)"
|
||||||
|
>
|
||||||
|
<q-tooltip>ประวัติข้อมูลการจ้าง </q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Dialog เพิ่มข้อมูลการจ้าง -->
|
||||||
|
<q-dialog v-model="modalEmployment" persistent>
|
||||||
|
<q-card style="width: 700px; max-width: 80vw">
|
||||||
|
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||||
|
<DialogHeader
|
||||||
|
:tittle="isEdit ? 'แก้ข้อมูลการจ้าง' : 'เพิ่มข้อมูลการจ้าง'"
|
||||||
|
:close="onCloseDialog"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section>
|
||||||
|
<div class="row col-12 q-col-gutter-sm">
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-6">
|
||||||
|
<datepicker
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="formData.date"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
borderless
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
class="inputgreen"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
class="full-width datepicker"
|
||||||
|
:model-value="
|
||||||
|
formData.date != null ? date2Thai(formData.date) : null
|
||||||
|
"
|
||||||
|
label="วันที่จ้าง"
|
||||||
|
hide-bottom-space
|
||||||
|
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่จ้าง'}`]"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
style="color: var(--q-primary)"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
class="inputgreen"
|
||||||
|
outlined
|
||||||
|
v-model="formData.command"
|
||||||
|
label="คำสั่งจ้าง"
|
||||||
|
hide-bottom-space
|
||||||
|
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่งจ้าง'}`]"
|
||||||
|
lazy-rules
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
<q-card-actions align="right">
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
unelevated
|
||||||
|
label="บันทึก"
|
||||||
|
id="onSubmit"
|
||||||
|
type="submit"
|
||||||
|
color="public"
|
||||||
|
class="q-px-md"
|
||||||
|
>
|
||||||
|
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
|
||||||
|
<!-- Dialog ประวัติการแก้ไขข้อมูลลูกจ้างชั่วคราว -->
|
||||||
|
<q-dialog v-model="modalHistory" persistent>
|
||||||
|
<q-card style="min-width: 80%">
|
||||||
|
<DialogHeader
|
||||||
|
tittle="ประวัติแก้ไขข้อมูลส่วนตัว"
|
||||||
|
:close="() => (modalHistory = false)"
|
||||||
|
/>
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<q-card-section style="max-height: 50vh" class="scroll">
|
||||||
|
<div class="row q-gutter-sm q-mb-sm">
|
||||||
|
<q-space />
|
||||||
|
<q-input
|
||||||
|
standout
|
||||||
|
dense
|
||||||
|
v-model="filterHistory"
|
||||||
|
outlined
|
||||||
|
placeholder="ค้นหา"
|
||||||
|
debounce="300"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon
|
||||||
|
v-if="filterHistory == ''"
|
||||||
|
name="search"
|
||||||
|
@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
|
||||||
|
v-model="visibleColumns"
|
||||||
|
multiple
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
options-dense
|
||||||
|
:display-value="$q.lang.table.columns"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
:options="columns"
|
||||||
|
option-value="name"
|
||||||
|
options-cover
|
||||||
|
style="min-width: 150px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<d-table
|
||||||
|
ref="table"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
dense
|
||||||
|
:columns="columns"
|
||||||
|
:rows="rowsHistory"
|
||||||
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
:filter="filterHistory"
|
||||||
|
>
|
||||||
|
>
|
||||||
|
<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-tr>
|
||||||
|
</template>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<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-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
</q-card-section>
|
||||||
|
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<q-card-actions align="right"> </q-card-actions>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
import DataEmployee from "@/modules/04_registryNew/components/detail/Employee/01_DataEmployee.vue";
|
||||||
|
import Employment from "@/modules/04_registryNew/components/detail/Employee/02_Employment.vue";
|
||||||
|
|
||||||
|
const tab = ref<string>("1");
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="row items-center q-my-md">
|
||||||
|
<div class="text-dark row items-center q-px-md">
|
||||||
|
<q-icon name="mdi-account" class="q-mr-md" size="22px" />
|
||||||
|
<div class="text-subtitle1 text-weight-bold">ข้อมูลลูกจ้างชั่วคราว</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<q-separator />
|
||||||
|
<q-tabs
|
||||||
|
v-model="tab"
|
||||||
|
active-color="blue-8"
|
||||||
|
align="left"
|
||||||
|
bordered
|
||||||
|
narrow-indicator
|
||||||
|
indicator-color="transparent"
|
||||||
|
dense
|
||||||
|
class="text-grey q-pl-sm"
|
||||||
|
>
|
||||||
|
<q-tab name="1" label="ข้อมูลลูกจ้างชั่วคราว" />
|
||||||
|
<q-tab name="2" label="ข้อมูลการจ้าง" />
|
||||||
|
</q-tabs>
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<q-tab-panels v-model="tab" animated>
|
||||||
|
<q-tab-panel name="1">
|
||||||
|
<DataEmployee />
|
||||||
|
</q-tab-panel>
|
||||||
|
<q-tab-panel name="2">
|
||||||
|
<Employment />
|
||||||
|
</q-tab-panel>
|
||||||
|
</q-tab-panels>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -291,8 +291,9 @@ async function editData() {
|
||||||
await http
|
await http
|
||||||
.put(config.API.profileNewProfileById(id.value, empType.value), {
|
.put(config.API.profileNewProfileById(id.value, empType.value), {
|
||||||
...formData,
|
...formData,
|
||||||
|
employeeClass: route.name === "registry-employeeId" ? "TEMP" : undefined,
|
||||||
})
|
})
|
||||||
.then((res) => {
|
.then(() => {
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
getData(), (modal.value = false);
|
getData(), (modal.value = false);
|
||||||
props.fetchDataPersonal?.();
|
props.fetchDataPersonal?.();
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
|
||||||
import { useRegistryDetailNewDataStore } from "@/modules/04_registryNew/stores/DetailMain";
|
import { useRegistryDetailNewDataStore } from "@/modules/04_registryNew/stores/DetailMain";
|
||||||
|
|
||||||
|
|
@ -8,6 +9,9 @@ import GovernmentInformationMain from "@/modules/04_registryNew/components/detai
|
||||||
import salaryMain from "@/modules/04_registryNew/components/detail/Salary/Main.vue";
|
import salaryMain from "@/modules/04_registryNew/components/detail/Salary/Main.vue";
|
||||||
import AchievementMain from "@/modules/04_registryNew/components/detail/Achievement/Main.vue";
|
import AchievementMain from "@/modules/04_registryNew/components/detail/Achievement/Main.vue";
|
||||||
import OtherMaim from "@/modules/04_registryNew/components/detail/Other/Main.vue";
|
import OtherMaim from "@/modules/04_registryNew/components/detail/Other/Main.vue";
|
||||||
|
import EmployeeMain from "@/modules/04_registryNew/components/detail/Employee/Main.vue";
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
const store = useRegistryDetailNewDataStore();
|
const store = useRegistryDetailNewDataStore();
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
|
@ -23,7 +27,10 @@ const itemsTab = ref<any>([
|
||||||
{
|
{
|
||||||
name: "2",
|
name: "2",
|
||||||
icon: "mdi-account-tie",
|
icon: "mdi-account-tie",
|
||||||
label: "ข้อมูลราชการ",
|
label:
|
||||||
|
route.name === "registry-employeeId"
|
||||||
|
? "ข้อมูลลูกจ้างชั่วคราว"
|
||||||
|
: "ข้อมูลราชการ",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "3",
|
name: "3",
|
||||||
|
|
@ -88,7 +95,11 @@ const splitterModel = ref<number>(12);
|
||||||
v-if="store.tabMain === '1'"
|
v-if="store.tabMain === '1'"
|
||||||
:fetchDataPersonal="props.fetchDataPersonal"
|
:fetchDataPersonal="props.fetchDataPersonal"
|
||||||
/>
|
/>
|
||||||
<GovernmentInformationMain v-if="store.tabMain === '2'" />
|
<EmployeeMain
|
||||||
|
v-if="store.tabMain === '2' && route.name === 'registry-employeeId'"
|
||||||
|
/>
|
||||||
|
<GovernmentInformationMain v-else-if="store.tabMain === '2'" />
|
||||||
|
|
||||||
<salaryMain v-if="store.tabMain === '3'" />
|
<salaryMain v-if="store.tabMain === '3'" />
|
||||||
<AchievementMain v-if="store.tabMain === '4'" />
|
<AchievementMain v-if="store.tabMain === '4'" />
|
||||||
<OtherMaim v-if="store.tabMain === '5'" />
|
<OtherMaim v-if="store.tabMain === '5'" />
|
||||||
|
|
|
||||||
19
src/modules/04_registryNew/interface/request/Employee.ts
Normal file
19
src/modules/04_registryNew/interface/request/Employee.ts
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
interface FormEmployee {
|
||||||
|
positionEmployeeGroupId: string;
|
||||||
|
positionEmployeeLineId: string;
|
||||||
|
positionEmployeePositionId: string;
|
||||||
|
employeeOc: string;
|
||||||
|
employeeTypeIndividual: string;
|
||||||
|
employeeWage: string;
|
||||||
|
employeeMoneyIncrease: string;
|
||||||
|
employeeMoneyAllowance: string;
|
||||||
|
employeeMoneyEmployee: string;
|
||||||
|
employeeMoneyEmployer: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FormEmployment {
|
||||||
|
command: string;
|
||||||
|
date: null | Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type { FormEmployee, FormEmployment };
|
||||||
|
|
@ -2,20 +2,20 @@ interface RequestObject {
|
||||||
birthDate: Date | null;
|
birthDate: Date | null;
|
||||||
bloodGroup: string | null;
|
bloodGroup: string | null;
|
||||||
citizenId: string;
|
citizenId: string;
|
||||||
email: string | null;
|
// email: string | null;
|
||||||
ethnicity: string | null;
|
ethnicity: string | null;
|
||||||
firstName: string;
|
firstName: string;
|
||||||
gender: string | null;
|
gender: string | null;
|
||||||
lastName: string;
|
lastName: string;
|
||||||
nationality: string | null;
|
nationality: string | null;
|
||||||
phone: string | null;
|
phone: string | null;
|
||||||
posLevelId: string;
|
// posLevelId: string;
|
||||||
posTypeId: string;
|
// posTypeId: string;
|
||||||
prefix: string;
|
prefix: string;
|
||||||
rank: string | null;
|
rank: string | null;
|
||||||
relationship: string | null;
|
relationship: string | null;
|
||||||
religion: string | null;
|
religion: string | null;
|
||||||
telephoneNumber: string | null;
|
// telephoneNumber: string | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export type { RequestObject };
|
export type { RequestObject };
|
||||||
|
|
|
||||||
54
src/modules/04_registryNew/interface/response/Employee.ts
Normal file
54
src/modules/04_registryNew/interface/response/Employee.ts
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
interface EmployeeHistory {
|
||||||
|
createdAt: string;
|
||||||
|
createdFullName: string;
|
||||||
|
createdUserId: string;
|
||||||
|
employeeMoneyAllowance: string;
|
||||||
|
employeeMoneyEmployee: string;
|
||||||
|
employeeMoneyEmployer: string;
|
||||||
|
employeeMoneyIncrease: string;
|
||||||
|
employeeOc: string;
|
||||||
|
employeeTypeIndividual: string;
|
||||||
|
employeeWage: string;
|
||||||
|
id: string;
|
||||||
|
lastUpdateFullName: string;
|
||||||
|
lastUpdateUserId: string;
|
||||||
|
lastUpdatedAt: string;
|
||||||
|
positionEmployeeGroupId: string;
|
||||||
|
positionEmployeeLineId: string;
|
||||||
|
positionEmployeePositionId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Employment {
|
||||||
|
command: string;
|
||||||
|
date: string | Date;
|
||||||
|
id: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface EmploymentHistory {
|
||||||
|
command: string;
|
||||||
|
createdAt: string | Date;
|
||||||
|
createdFullName: string;
|
||||||
|
createdUserId: string;
|
||||||
|
date: string | Date;
|
||||||
|
id: string;
|
||||||
|
lastUpdateFullName: string;
|
||||||
|
lastUpdateUserId: string;
|
||||||
|
lastUpdatedAt: string | Date;
|
||||||
|
profileEmployeeEmploymentId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ResEmployee {
|
||||||
|
id: string;
|
||||||
|
positionEmployeeGroupId: string;
|
||||||
|
positionEmployeeLineId: string;
|
||||||
|
positionEmployeePositionId: string;
|
||||||
|
employeeOc: string;
|
||||||
|
employeeTypeIndividual: string;
|
||||||
|
employeeWage: string;
|
||||||
|
employeeMoneyIncrease: string;
|
||||||
|
employeeMoneyAllowance: string;
|
||||||
|
employeeMoneyEmployee: string;
|
||||||
|
employeeMoneyEmployer: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type { Employment, EmploymentHistory, EmployeeHistory, ResEmployee };
|
||||||
|
|
@ -28,16 +28,16 @@ export const useProfileDataStore = defineStore("profile", () => {
|
||||||
bloodGroup: null,
|
bloodGroup: null,
|
||||||
relationship: null,
|
relationship: null,
|
||||||
gender: null,
|
gender: null,
|
||||||
posTypeId: "",
|
// posTypeId: "",
|
||||||
posLevelId: "",
|
// posLevelId: "",
|
||||||
religion: null,
|
religion: null,
|
||||||
citizenId: "",
|
citizenId: "",
|
||||||
telephoneNumber: null,
|
// telephoneNumber: null,
|
||||||
nationality: null,
|
nationality: null,
|
||||||
ethnicity: null,
|
ethnicity: null,
|
||||||
birthDate: null,
|
birthDate: null,
|
||||||
phone: null,
|
phone: null,
|
||||||
email: null,
|
// email: null,
|
||||||
lastName: "",
|
lastName: "",
|
||||||
firstName: "",
|
firstName: "",
|
||||||
prefix: "",
|
prefix: "",
|
||||||
|
|
|
||||||
|
|
@ -579,7 +579,11 @@ onMounted(async () => {
|
||||||
class="q-mr-sm"
|
class="q-mr-sm"
|
||||||
@click="router.go(-1)"
|
@click="router.go(-1)"
|
||||||
/>
|
/>
|
||||||
ทะเบียนประวัติ
|
{{
|
||||||
|
route.name === "registry-employeeId"
|
||||||
|
? " ทะเบียนประวัติลูกจ้างชั่วคราว"
|
||||||
|
: "ทะเบียนประวัติ"
|
||||||
|
}}
|
||||||
</div>
|
</div>
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-btn-dropdown
|
<q-btn-dropdown
|
||||||
|
|
|
||||||
|
|
@ -195,6 +195,7 @@ async function onClickSelectPos(id: string) {
|
||||||
(e) => e.id === seletcId.value
|
(e) => e.id === seletcId.value
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
console.log(selected.value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -208,7 +209,7 @@ onMounted(async () => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="column q-col-gutter-sm" style="height: 70vh">
|
<div class="column q-col-gutter-sm">
|
||||||
<!-- เลือกเลขที่ตำแหน่ง -->
|
<!-- เลือกเลขที่ตำแหน่ง -->
|
||||||
<div class="col-7">
|
<div class="col-7">
|
||||||
<q-card bordered style="height: 100%; border: 1px solid #d6dee1">
|
<q-card bordered style="height: 100%; border: 1px solid #d6dee1">
|
||||||
|
|
|
||||||
|
|
@ -198,8 +198,7 @@ async function fetchPosFind(level: number, id: string) {
|
||||||
.post(config.API.orgPosFind, body)
|
.post(config.API.orgPosFind, body)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
const data = res.data.result;
|
const data = res.data.result;
|
||||||
console.log(data);
|
|
||||||
|
|
||||||
expanded.value = data;
|
expanded.value = data;
|
||||||
nodeId.value = id;
|
nodeId.value = id;
|
||||||
positionId.value = props?.dataRow?.posmasterId;
|
positionId.value = props?.dataRow?.posmasterId;
|
||||||
|
|
@ -280,9 +279,8 @@ watch(
|
||||||
if (modal.value) {
|
if (modal.value) {
|
||||||
await fetchOrganizationActive();
|
await fetchOrganizationActive();
|
||||||
console.log(props?.dataRow);
|
console.log(props?.dataRow);
|
||||||
|
|
||||||
if (props?.dataRow?.node !== null && props?.dataRow?.nodeId !== null) {
|
|
||||||
|
|
||||||
|
if (props?.dataRow?.node !== null && props?.dataRow?.nodeId !== null) {
|
||||||
await fetchPosFind(props?.dataRow?.node, props?.dataRow?.nodeId);
|
await fetchPosFind(props?.dataRow?.node, props?.dataRow?.nodeId);
|
||||||
} else {
|
} else {
|
||||||
expanded.value = [];
|
expanded.value = [];
|
||||||
|
|
@ -348,7 +346,7 @@ watch(
|
||||||
<q-card
|
<q-card
|
||||||
bordered
|
bordered
|
||||||
class="col-12 col-sm-3 scroll q-pa-sm"
|
class="col-12 col-sm-3 scroll q-pa-sm"
|
||||||
style="height: 75vh"
|
style="height: 80vh"
|
||||||
>
|
>
|
||||||
<q-toolbar style="padding: 0">
|
<q-toolbar style="padding: 0">
|
||||||
<q-toolbar-title class="text-subtitle2 text-bold"
|
<q-toolbar-title class="text-subtitle2 text-bold"
|
||||||
|
|
@ -410,7 +408,11 @@ watch(
|
||||||
</q-tree>
|
</q-tree>
|
||||||
</q-card>
|
</q-card>
|
||||||
|
|
||||||
<q-card bordered class="col-12 col-sm-9 q-pa-sm">
|
<q-card
|
||||||
|
bordered
|
||||||
|
class="col-12 col-sm-9 q-pa-sm scroll"
|
||||||
|
style="height: 80vh"
|
||||||
|
>
|
||||||
<q-tab-panels
|
<q-tab-panels
|
||||||
v-model="nodeId"
|
v-model="nodeId"
|
||||||
animated
|
animated
|
||||||
|
|
|
||||||
571
src/modules/08_registryEmployee/components/DialogAddEmployee.vue
Normal file
571
src/modules/08_registryEmployee/components/DialogAddEmployee.vue
Normal file
|
|
@ -0,0 +1,571 @@
|
||||||
|
<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";
|
||||||
|
|
||||||
|
/** importType*/
|
||||||
|
import type { DataOption } from "@/modules/08_registryEmployee/interface/index/Main";
|
||||||
|
import type { FormDataEmployee } from "@/modules/08_registryEmployee/interface/request/Employee";
|
||||||
|
import type { ResOptionPerson } from "@/modules/08_registryEmployee/interface/response/Employee";
|
||||||
|
|
||||||
|
/** importComponents*/
|
||||||
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||||||
|
|
||||||
|
/** importStore*/
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import { useRegistryEmp } from "@/modules/08_registryEmployee/stores/registry-employee";
|
||||||
|
|
||||||
|
/** use*/
|
||||||
|
const $q = useQuasar();
|
||||||
|
const {
|
||||||
|
dialogConfirm,
|
||||||
|
success,
|
||||||
|
messageError,
|
||||||
|
showLoader,
|
||||||
|
hideLoader,
|
||||||
|
dialogMessageNotify,
|
||||||
|
date2Thai,
|
||||||
|
} = useCounterMixin();
|
||||||
|
const { calculateAge } = useRegistryEmp();
|
||||||
|
|
||||||
|
/** props*/
|
||||||
|
const modal = defineModel<boolean>("modal", { required: true });
|
||||||
|
const props = defineProps({
|
||||||
|
fetchData: { type: Function, require: true },
|
||||||
|
});
|
||||||
|
|
||||||
|
const formData = reactive<FormDataEmployee>({
|
||||||
|
citizenId: "",
|
||||||
|
prefix: "",
|
||||||
|
rank: "",
|
||||||
|
firstName: "",
|
||||||
|
lastName: "",
|
||||||
|
birthDate: null,
|
||||||
|
gender: "",
|
||||||
|
relationship: "",
|
||||||
|
nationality: "",
|
||||||
|
ethnicity: "",
|
||||||
|
religion: "",
|
||||||
|
bloodGroup: "",
|
||||||
|
phone: "",
|
||||||
|
employeeClass: "TEMP",
|
||||||
|
});
|
||||||
|
|
||||||
|
const prefixOpsMain = ref<DataOption[]>([]);
|
||||||
|
const prefixOps = ref<DataOption[]>([]);
|
||||||
|
const rankOpsMain = ref<DataOption[]>([]);
|
||||||
|
const rankOps = ref<DataOption[]>([]);
|
||||||
|
const genderOpsMain = ref<DataOption[]>([]);
|
||||||
|
const genderOps = ref<DataOption[]>([]);
|
||||||
|
const statusOpsMain = ref<DataOption[]>([]);
|
||||||
|
const statusOps = ref<DataOption[]>([]);
|
||||||
|
const religionOpsMain = ref<DataOption[]>([]);
|
||||||
|
const religionOps = ref<DataOption[]>([]);
|
||||||
|
const bloodOpsMain = ref<DataOption[]>([]);
|
||||||
|
const bloodOps = ref<DataOption[]>([]);
|
||||||
|
|
||||||
|
function fetchDataPerson() {
|
||||||
|
showLoader();
|
||||||
|
http
|
||||||
|
.get(config.API.profileNewMetaMain)
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
|
||||||
|
let optionPerfix: DataOption[] = [];
|
||||||
|
data.prefixs.map((r: ResOptionPerson) => {
|
||||||
|
optionPerfix.push({
|
||||||
|
id: r.id.toString(),
|
||||||
|
name: r.name.toString(),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
prefixOpsMain.value = optionPerfix;
|
||||||
|
|
||||||
|
let optionrank: DataOption[] = [];
|
||||||
|
data.rank.map((r: ResOptionPerson) => {
|
||||||
|
optionrank.push({
|
||||||
|
id: r.id.toString(),
|
||||||
|
name: r.name.toString(),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
rankOpsMain.value = optionrank;
|
||||||
|
|
||||||
|
let optiongenders: DataOption[] = [];
|
||||||
|
data.genders.map((r: ResOptionPerson) => {
|
||||||
|
optiongenders.push({
|
||||||
|
id: r.id.toString(),
|
||||||
|
name: r.name.toString(),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
genderOpsMain.value = optiongenders;
|
||||||
|
|
||||||
|
let optionrelationships: DataOption[] = [];
|
||||||
|
data.relationships.map((r: ResOptionPerson) => {
|
||||||
|
optionrelationships.push({
|
||||||
|
id: r.id.toString(),
|
||||||
|
name: r.name.toString(),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
statusOpsMain.value = optionrelationships;
|
||||||
|
|
||||||
|
let optionreligions: DataOption[] = [];
|
||||||
|
data.religions.map((r: ResOptionPerson) => {
|
||||||
|
optionreligions.push({
|
||||||
|
id: r.id.toString(),
|
||||||
|
name: r.name.toString(),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
religionOpsMain.value = optionreligions;
|
||||||
|
|
||||||
|
let optionBlood: DataOption[] = [];
|
||||||
|
data.bloodGroups.map((r: ResOptionPerson) => {
|
||||||
|
optionBlood.push({
|
||||||
|
id: r.id.toString(),
|
||||||
|
name: r.name.toString(),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
bloodOpsMain.value = optionBlood;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const filterSelector = (val: string, update: Function, refData: string) => {
|
||||||
|
switch (refData) {
|
||||||
|
case "prefix":
|
||||||
|
update(() => {
|
||||||
|
prefixOps.value = prefixOpsMain.value.filter(
|
||||||
|
(v: DataOption) => v.name.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "rank":
|
||||||
|
update(() => {
|
||||||
|
rankOps.value = rankOpsMain.value.filter(
|
||||||
|
(v: DataOption) => v.name.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "gender":
|
||||||
|
update(() => {
|
||||||
|
genderOps.value = genderOpsMain.value.filter(
|
||||||
|
(v: DataOption) => v.name.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "status":
|
||||||
|
update(() => {
|
||||||
|
statusOps.value = statusOpsMain.value.filter(
|
||||||
|
(v: DataOption) => v.name.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "religion":
|
||||||
|
update(() => {
|
||||||
|
religionOps.value = religionOpsMain.value.filter(
|
||||||
|
(v: DataOption) => v.name.indexOf(val) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "blood":
|
||||||
|
let f = val.toLocaleUpperCase();
|
||||||
|
update(() => {
|
||||||
|
bloodOps.value = bloodOpsMain.value.filter(
|
||||||
|
(v: DataOption) => v.name.indexOf(f) > -1
|
||||||
|
);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function calculateMaxDate() {
|
||||||
|
const today = new Date();
|
||||||
|
today.setFullYear(today.getFullYear() - 18);
|
||||||
|
return today;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onSubmit() {
|
||||||
|
dialogConfirm($q, () => {
|
||||||
|
showLoader();
|
||||||
|
http
|
||||||
|
.post(config.API.registryNew("-employee"), formData)
|
||||||
|
.then(() => {
|
||||||
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
props.fetchData?.();
|
||||||
|
closeDialog();
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeDialog() {
|
||||||
|
modal.value = false;
|
||||||
|
formData.citizenId = "";
|
||||||
|
formData.prefix = "";
|
||||||
|
formData.rank = "";
|
||||||
|
formData.firstName = "";
|
||||||
|
formData.lastName = "";
|
||||||
|
formData.birthDate = null;
|
||||||
|
formData.gender = "";
|
||||||
|
formData.relationship = "";
|
||||||
|
formData.nationality = "";
|
||||||
|
formData.ethnicity = "";
|
||||||
|
formData.religion = "";
|
||||||
|
formData.bloodGroup = "";
|
||||||
|
formData.phone = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => modal.value,
|
||||||
|
() => {
|
||||||
|
if (modal.value) {
|
||||||
|
fetchDataPerson();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<q-dialog v-model="modal" persistent>
|
||||||
|
<q-card style="min-width: 600px">
|
||||||
|
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||||
|
<q-card-section class="flex justify-between" style="padding: 0">
|
||||||
|
<DialogHeader
|
||||||
|
tittle="เพิ่มข้อมูลลูกจ้างชั่วคราว"
|
||||||
|
:close="closeDialog"
|
||||||
|
/>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section class="q-pa-md q-col-gutter-md">
|
||||||
|
<div class="row q-col-gutter-md">
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
maxlength="13"
|
||||||
|
mask="#############"
|
||||||
|
v-model="formData.citizenId"
|
||||||
|
class="inputgreen"
|
||||||
|
label="เลขประจำตัวประชาชน"
|
||||||
|
:rules="[
|
||||||
|
(val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
|
||||||
|
(val: string) =>
|
||||||
|
val.length >= 13 ||
|
||||||
|
`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
|
||||||
|
]"
|
||||||
|
@update:model-value="changeCardID"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-6">
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
use-input
|
||||||
|
lazy-rules
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
hide-bottom-space
|
||||||
|
input-debounce="0"
|
||||||
|
option-label="name"
|
||||||
|
option-value="name"
|
||||||
|
v-model="formData.prefix"
|
||||||
|
class="inputgreen"
|
||||||
|
:options="prefixOps"
|
||||||
|
label="คำนำหน้าชื่อ"
|
||||||
|
:rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
|
||||||
|
@filter="(inputValue: string,
|
||||||
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'prefix'
|
||||||
|
)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-6">
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
clearable
|
||||||
|
use-input
|
||||||
|
lazy-rules
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
hide-bottom-space
|
||||||
|
input-debounce="0"
|
||||||
|
option-label="name"
|
||||||
|
option-value="name"
|
||||||
|
v-model="formData.rank"
|
||||||
|
class="inputgreen"
|
||||||
|
:options="rankOps"
|
||||||
|
label="ยศ"
|
||||||
|
@filter="(inputValue: string,
|
||||||
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'rank'
|
||||||
|
)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
v-model="formData.firstName"
|
||||||
|
class="inputgreen"
|
||||||
|
label="ชื่อ"
|
||||||
|
:rules="[(val: string) => !!val || `${'กรุณากรอกชื่อ'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
v-model="formData.lastName"
|
||||||
|
class="inputgreen"
|
||||||
|
label="นามสกุล"
|
||||||
|
:rules="[(val: string) => !!val || `${'กรุณากรอกนามสกุล'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-6">
|
||||||
|
<datepicker
|
||||||
|
autoApply
|
||||||
|
:max-date="calculateMaxDate()"
|
||||||
|
borderless
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
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"
|
||||||
|
ref="dateReceivedRef"
|
||||||
|
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-12 col-sm-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
readonly
|
||||||
|
:model-value="
|
||||||
|
formData.birthDate !== null
|
||||||
|
? calculateAge(formData.birthDate)
|
||||||
|
: null
|
||||||
|
"
|
||||||
|
label="อายุ"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-6">
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
use-input
|
||||||
|
clearable
|
||||||
|
lazy-rules
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
hide-bottom-space
|
||||||
|
input-debounce="0"
|
||||||
|
option-label="name"
|
||||||
|
option-value="name"
|
||||||
|
v-model="formData.gender"
|
||||||
|
class="inputgreen"
|
||||||
|
:options="genderOps"
|
||||||
|
label="เพศ"
|
||||||
|
@filter="(inputValue: string,
|
||||||
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'gender'
|
||||||
|
)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-6">
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
use-input
|
||||||
|
clearable
|
||||||
|
lazy-rules
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
hide-bottom-space
|
||||||
|
option-value="name"
|
||||||
|
option-label="name"
|
||||||
|
input-debounce="0"
|
||||||
|
class="inputgreen"
|
||||||
|
v-model="formData.relationship"
|
||||||
|
:options="statusOps"
|
||||||
|
label="สถานภาพ"
|
||||||
|
@filter="(inputValue: string,
|
||||||
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'status'
|
||||||
|
)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
class="inputgreen"
|
||||||
|
v-model="formData.nationality"
|
||||||
|
label="สัญชาติ"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
class="inputgreen"
|
||||||
|
v-model="formData.ethnicity"
|
||||||
|
label="เชื้อชาติ"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-6">
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
use-input
|
||||||
|
clearable
|
||||||
|
lazy-rules
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
hide-bottom-space
|
||||||
|
option-value="name"
|
||||||
|
option-label="name"
|
||||||
|
input-debounce="0"
|
||||||
|
v-model="formData.religion"
|
||||||
|
class="inputgreen"
|
||||||
|
:options="religionOps"
|
||||||
|
label="ศาสนา"
|
||||||
|
@filter="(inputValue: string,
|
||||||
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'religion'
|
||||||
|
)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-6">
|
||||||
|
<q-select
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
use-input
|
||||||
|
clearable
|
||||||
|
lazy-rules
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
hide-bottom-space
|
||||||
|
option-value="name"
|
||||||
|
option-label="name"
|
||||||
|
input-debounce="0"
|
||||||
|
v-model="formData.bloodGroup"
|
||||||
|
class="inputgreen"
|
||||||
|
:options="bloodOps"
|
||||||
|
label="หมู่เลือด"
|
||||||
|
@filter="(inputValue: string,
|
||||||
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'blood'
|
||||||
|
)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
mask="##########"
|
||||||
|
class="inputgreen"
|
||||||
|
v-model="formData.phone"
|
||||||
|
label="เบอร์โทร"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
|
||||||
|
<q-separator />
|
||||||
|
<q-card-actions align="right">
|
||||||
|
<q-btn
|
||||||
|
id="onSubmit"
|
||||||
|
type="submit"
|
||||||
|
dense
|
||||||
|
unelevated
|
||||||
|
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>
|
||||||
929
src/modules/08_registryEmployee/components/DialogSelectPos.vue
Normal file
929
src/modules/08_registryEmployee/components/DialogSelectPos.vue
Normal file
|
|
@ -0,0 +1,929 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, watch } from "vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
/** importType*/
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
import type {
|
||||||
|
TreeMain,
|
||||||
|
PositionNo,
|
||||||
|
Position,
|
||||||
|
} from "@/modules/08_registryEmployee/interface/response/Employee";
|
||||||
|
|
||||||
|
/** importComponents*/
|
||||||
|
import Header from "@/components/DialogHeader.vue";
|
||||||
|
|
||||||
|
/** importStore*/
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import { asCleanDays } from "@fullcalendar/core/internal";
|
||||||
|
|
||||||
|
/** use*/
|
||||||
|
const $q = useQuasar();
|
||||||
|
const {
|
||||||
|
success,
|
||||||
|
showLoader,
|
||||||
|
hideLoader,
|
||||||
|
messageError,
|
||||||
|
dialogMessageNotify,
|
||||||
|
dialogConfirm,
|
||||||
|
} = useCounterMixin();
|
||||||
|
|
||||||
|
/**props*/
|
||||||
|
const modal = defineModel<boolean>("modal", { required: true });
|
||||||
|
const props = defineProps({
|
||||||
|
dataRow: {
|
||||||
|
type: Object,
|
||||||
|
require: true,
|
||||||
|
},
|
||||||
|
fetchData: {
|
||||||
|
type: Function,
|
||||||
|
require: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Tree*/
|
||||||
|
const nodeId = ref<string>("");
|
||||||
|
const nodeLevel = ref<number>(0);
|
||||||
|
const filterTree = ref<string>("");
|
||||||
|
const nodes = ref<Array<TreeMain>>([]);
|
||||||
|
const lazy = ref(nodes);
|
||||||
|
const expanded = ref<string[]>([]);
|
||||||
|
|
||||||
|
/** Table*/
|
||||||
|
const filters = ref<string>("");
|
||||||
|
const rowsPosition = ref<Position[]>([]);
|
||||||
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "isPosition",
|
||||||
|
align: "left",
|
||||||
|
label: "",
|
||||||
|
sortable: true,
|
||||||
|
field: "isPosition",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "no",
|
||||||
|
align: "left",
|
||||||
|
label: "ลำดับ",
|
||||||
|
sortable: true,
|
||||||
|
field: "no",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "posMasterNo",
|
||||||
|
align: "left",
|
||||||
|
label: "เลขที่ตำแหน่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "posMasterNo",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionName",
|
||||||
|
align: "left",
|
||||||
|
label: "ตำแหน่งในสายงาน",
|
||||||
|
field: "positionName",
|
||||||
|
sortable: true,
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "posTypeName",
|
||||||
|
align: "left",
|
||||||
|
label: "ประเภทตำแหน่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "posTypeName",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "posLevelName",
|
||||||
|
align: "left",
|
||||||
|
label: "ระดับตำแหน่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "posLevelName",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const columnsPostition = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "no",
|
||||||
|
align: "left",
|
||||||
|
label: "ลำดับ",
|
||||||
|
sortable: false,
|
||||||
|
field: "no",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionName",
|
||||||
|
align: "left",
|
||||||
|
label: "ตำแหน่งในสายงาน",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionName",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionField",
|
||||||
|
align: "left",
|
||||||
|
label: "สายงาน",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionField",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "posTypeName",
|
||||||
|
align: "left",
|
||||||
|
label: "ประเภทตำเเหน่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "posTypeName",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "posLevelName",
|
||||||
|
align: "left",
|
||||||
|
label: "ระดับตำแหน่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "posLevelName",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "posExecutiveName",
|
||||||
|
align: "left",
|
||||||
|
label: "ตำแหน่งทางการบริหาร",
|
||||||
|
sortable: true,
|
||||||
|
field: "posExecutiveName",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionExecutiveField",
|
||||||
|
align: "left",
|
||||||
|
label: "ด้านทางการบริหาร",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionExecutiveField",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionArea",
|
||||||
|
align: "left",
|
||||||
|
label: "ด้าน/สาขา",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionArea",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const visibleColumns = ref<string[]>([
|
||||||
|
"isPosition",
|
||||||
|
"no",
|
||||||
|
"posMasterNo",
|
||||||
|
"positionName",
|
||||||
|
"posTypeName",
|
||||||
|
"posLevelName",
|
||||||
|
]);
|
||||||
|
|
||||||
|
/** Position*/
|
||||||
|
const positionNo = ref<PositionNo[]>([]);
|
||||||
|
const positionId = ref<string>("");
|
||||||
|
const seletcId = ref<string>("");
|
||||||
|
const selectedPos = ref<any[]>([]);
|
||||||
|
const datePos = ref<Date>(new Date());
|
||||||
|
const posMasterMain = ref<any>([]);
|
||||||
|
const orgRevisionId = ref<string>("");
|
||||||
|
|
||||||
|
/** function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง*/
|
||||||
|
async function fetchOrganizationActive() {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.activeOrganization)
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
if (data) {
|
||||||
|
orgRevisionId.value = data.activeId;
|
||||||
|
fetchDataTree(data.activeId);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function fetch ข้อมูลของ Tree
|
||||||
|
* @param id id โครงสร้าง
|
||||||
|
*/
|
||||||
|
async function fetchDataTree(id: string) {
|
||||||
|
showLoader();
|
||||||
|
await http
|
||||||
|
.get(config.API.orgByid(id.toString()))
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
if (data) {
|
||||||
|
nodes.value = data;
|
||||||
|
filterItemsTaps(data);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
hideLoader();
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* funtion เลือกข้อมูล Tree
|
||||||
|
* @param data ข่อมูล Tree
|
||||||
|
*/
|
||||||
|
function updateSelected(data: TreeMain) {
|
||||||
|
if (props?.dataRow?.nodeId === data.orgTreeId) {
|
||||||
|
positionId.value = props?.dataRow?.posmasterId;
|
||||||
|
seletcId.value = props?.dataRow?.positionId;
|
||||||
|
datePos.value = props?.dataRow?.reportingDateFullDate;
|
||||||
|
} else {
|
||||||
|
positionId.value = "";
|
||||||
|
seletcId.value = "";
|
||||||
|
selectedPos.value = [];
|
||||||
|
datePos.value = new Date();
|
||||||
|
}
|
||||||
|
|
||||||
|
nodeId.value = data.orgTreeId ? data.orgTreeId : "";
|
||||||
|
nodeLevel.value = data.orgLevel;
|
||||||
|
fetchDataTable(data.orgTreeId, data.orgLevel);
|
||||||
|
}
|
||||||
|
|
||||||
|
const isAll = ref<boolean>(false);
|
||||||
|
const isBlank = ref<boolean>(false);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function fetch ข้อมูลรายการตำแหน่ง
|
||||||
|
* @param id idTree
|
||||||
|
* @param level levelTree
|
||||||
|
*/
|
||||||
|
async function fetchDataTable(id: string, level: number = 0) {
|
||||||
|
showLoader();
|
||||||
|
const body = {
|
||||||
|
node: level,
|
||||||
|
nodeId: id,
|
||||||
|
position: "",
|
||||||
|
typeCommand: "",
|
||||||
|
posLevel: props.dataRow?.posLevelCandidateId
|
||||||
|
? props.dataRow?.posLevelCandidateId
|
||||||
|
: "",
|
||||||
|
posType: props.dataRow?.posTypeCandidateId
|
||||||
|
? props.dataRow?.posTypeCandidateId
|
||||||
|
: "",
|
||||||
|
isAll: isAll.value,
|
||||||
|
isBlank: isBlank.value,
|
||||||
|
};
|
||||||
|
await http
|
||||||
|
.post(config.API.orgPosPlacemenTemp, body)
|
||||||
|
.then((res) => {
|
||||||
|
const dataMain: PositionNo[] = [];
|
||||||
|
|
||||||
|
posMasterMain.value = res.data.result.data;
|
||||||
|
res.data.result.data.forEach((e: any) => {
|
||||||
|
const p = e.positions;
|
||||||
|
if (p.length !== 0) {
|
||||||
|
const a = p.find((el: Position) => el.positionIsSelected === true);
|
||||||
|
const { id, ...rest } = a ? a : p[0];
|
||||||
|
const data: any = { ...e, ...rest };
|
||||||
|
dataMain.push(data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
positionNo.value = dataMain;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
hideLoader();
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function fetch ข้อมูล expanded tree
|
||||||
|
* @param level levelTree
|
||||||
|
* @param id treeId
|
||||||
|
*/
|
||||||
|
async function fetchPosFind(level: number, id: string) {
|
||||||
|
showLoader();
|
||||||
|
const body = {
|
||||||
|
node: level,
|
||||||
|
nodeId: id,
|
||||||
|
};
|
||||||
|
await http
|
||||||
|
.post(config.API.orgPosFind, body)
|
||||||
|
.then(async (res) => {
|
||||||
|
const data = res.data.result;
|
||||||
|
|
||||||
|
expanded.value = data;
|
||||||
|
nodeId.value = id;
|
||||||
|
positionId.value = props?.dataRow?.posmasterId;
|
||||||
|
seletcId.value = props?.dataRow?.positionId;
|
||||||
|
datePos.value = props?.dataRow?.reportingDateFullDate;
|
||||||
|
|
||||||
|
await fetchDataTable(nodeId.value, level);
|
||||||
|
positionId.value && (await onClickSelectPos(positionId.value));
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** function บันทึกข้อมูลตำแหน่ง*/
|
||||||
|
async function onClickSubmit() {
|
||||||
|
const dataPosMaster = await posMasterMain.value?.find(
|
||||||
|
(e: any) => e.id === positionId.value
|
||||||
|
);
|
||||||
|
|
||||||
|
if (selectedPos.value.length === 0) {
|
||||||
|
dialogMessageNotify($q, "กรุณาเลือกตำแหน่ง");
|
||||||
|
} else {
|
||||||
|
dialogConfirm($q, async () => {
|
||||||
|
showLoader();
|
||||||
|
const body = {
|
||||||
|
node: dataPosMaster.node,
|
||||||
|
nodeId: dataPosMaster.nodeId,
|
||||||
|
orgRevisionId: orgRevisionId.value,
|
||||||
|
positionId: selectedPos.value[0].id,
|
||||||
|
posMasterNo: dataPosMaster.posMasterNo.toString(), //เลขที่ตำแหน่ง(เลขอย่่างเดียว)
|
||||||
|
position: selectedPos.value[0].positionName, //ชื่อตำแหน่ง
|
||||||
|
positionField: "", //ชื่อตำแหน่ง
|
||||||
|
posTypeId: selectedPos.value[0].posTypeId, //ชื่อตำแหน่ง
|
||||||
|
posTypeName: selectedPos.value[0].posTypeName, //ชื่อตำแหน่ง
|
||||||
|
posLevelId: selectedPos.value[0].posLevelId, //ชื่อตำแหน่ง
|
||||||
|
posLevelName: selectedPos.value[0].posLevelName.toString(), //ชื่อตำแหน่ง
|
||||||
|
posmasterId: dataPosMaster.id,
|
||||||
|
};
|
||||||
|
|
||||||
|
await http
|
||||||
|
.put(config.API.positionEmployee(props?.dataRow?.id), body)
|
||||||
|
.then(() => {
|
||||||
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||||
|
props.fetchData?.();
|
||||||
|
closePopup();
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** function closePopup*/
|
||||||
|
function closePopup() {
|
||||||
|
modal.value = !modal.value;
|
||||||
|
clearData();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** function clearData*/
|
||||||
|
function clearData() {
|
||||||
|
nodeId.value = "";
|
||||||
|
expanded.value = [];
|
||||||
|
positionId.value = "";
|
||||||
|
seletcId.value = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
const itemTaps = ref<string[]>();
|
||||||
|
function filterItemsTaps(data: any[]) {
|
||||||
|
let orgTreeIds: string[] = [];
|
||||||
|
for (const child of data) {
|
||||||
|
orgTreeIds.push(child.orgTreeId);
|
||||||
|
if (child.children) {
|
||||||
|
orgTreeIds = orgTreeIds.concat(filterItemsTaps(child.children));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
itemTaps.value = orgTreeIds;
|
||||||
|
return orgTreeIds;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onClickSelectPos(id: string) {
|
||||||
|
positionId.value = id;
|
||||||
|
selectedPos.value = [];
|
||||||
|
const position: any = positionNo.value.find((e: any) => e.id === id);
|
||||||
|
|
||||||
|
// หาตำแหน่ง
|
||||||
|
if (position) {
|
||||||
|
rowsPosition.value = position.positions;
|
||||||
|
if (seletcId.value) {
|
||||||
|
selectedPos.value = rowsPosition.value.filter(
|
||||||
|
(e) => e.id === seletcId.value
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** callback function เมื่อมีการเปิด popup*/
|
||||||
|
watch(
|
||||||
|
() => modal.value,
|
||||||
|
async () => {
|
||||||
|
if (modal.value) {
|
||||||
|
await fetchOrganizationActive();
|
||||||
|
if (props?.dataRow?.node !== null && props?.dataRow?.nodeId !== null) {
|
||||||
|
await fetchPosFind(props?.dataRow?.node, props?.dataRow?.nodeId);
|
||||||
|
} else {
|
||||||
|
expanded.value = [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => isAll.value,
|
||||||
|
(value, oldVal) => {
|
||||||
|
if (value !== oldVal) {
|
||||||
|
fetchDataTable(nodeId.value, nodeLevel.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => isBlank.value,
|
||||||
|
(value, oldVal) => {
|
||||||
|
if (value !== oldVal) {
|
||||||
|
fetchDataTable(nodeId.value, nodeLevel.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<q-dialog v-model="modal" full-width persistent>
|
||||||
|
<q-card>
|
||||||
|
<Header :tittle="'เลือกหน่วยงานที่รับบรรจุ'" :close="closePopup" />
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<q-card-section class="q-pt-none q-pa-sm bg-grey-2">
|
||||||
|
<div class="row">
|
||||||
|
<q-card
|
||||||
|
bordered
|
||||||
|
class="col-12 col-sm-3 scroll q-pa-sm"
|
||||||
|
style="height: 75vh"
|
||||||
|
>
|
||||||
|
<q-toolbar style="padding: 0">
|
||||||
|
<q-toolbar-title class="text-subtitle2 text-bold"
|
||||||
|
>เลือกหน่วยงาน/ส่วนราชการ</q-toolbar-title
|
||||||
|
>
|
||||||
|
</q-toolbar>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
ref="filterRef"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
v-model="filterTree"
|
||||||
|
label="ค้นหา"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon
|
||||||
|
v-if="filterTree !== ''"
|
||||||
|
name="clear"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="filterTree = ''"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
<q-tree
|
||||||
|
class="q-pa-sm q-gutter-sm"
|
||||||
|
dense
|
||||||
|
default-expand-all
|
||||||
|
:nodes="lazy"
|
||||||
|
node-key="orgTreeId"
|
||||||
|
label-key="orgTreeName"
|
||||||
|
:filter="filterTree"
|
||||||
|
no-results-label="ไม่พบข้อมูลที่ค้นหา"
|
||||||
|
no-nodes-label="ไม่มีข้อมูล"
|
||||||
|
v-model:expanded="expanded"
|
||||||
|
>
|
||||||
|
<template v-slot:default-header="prop">
|
||||||
|
<q-item
|
||||||
|
clickable
|
||||||
|
:active="nodeId == prop.node.orgTreeId"
|
||||||
|
@click.stop="updateSelected(prop.node)"
|
||||||
|
active-class="my-list-link text-primary text-weight-medium"
|
||||||
|
class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div class="text-weight-medium">
|
||||||
|
{{ prop.node.orgTreeName }}
|
||||||
|
</div>
|
||||||
|
<div class="text-weight-light">
|
||||||
|
{{ prop.node.orgCode == null ? null : prop.node.orgCode }}
|
||||||
|
{{
|
||||||
|
prop.node.orgTreeShortName == null
|
||||||
|
? null
|
||||||
|
: prop.node.orgTreeShortName
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-item>
|
||||||
|
</template>
|
||||||
|
</q-tree>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
|
<q-card
|
||||||
|
bordered
|
||||||
|
class="col-12 col-sm-9 q-pa-sm scroll"
|
||||||
|
style="height: 75vh"
|
||||||
|
>
|
||||||
|
<q-tab-panels
|
||||||
|
v-model="nodeId"
|
||||||
|
animated
|
||||||
|
transition-prev="jump-up"
|
||||||
|
transition-next="jump-up"
|
||||||
|
>
|
||||||
|
<q-tab-panel
|
||||||
|
v-for="(item, index) in itemTaps"
|
||||||
|
:key="index"
|
||||||
|
:name="item"
|
||||||
|
>
|
||||||
|
<div class="column q-col-gutter-sm">
|
||||||
|
<!-- เลือกเลขที่ตำแหน่ง -->
|
||||||
|
<div class="col-7">
|
||||||
|
<q-card
|
||||||
|
bordered
|
||||||
|
style="height: 100%; border: 1px solid #d6dee1"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
|
||||||
|
>
|
||||||
|
เลือกเลขที่ตำแหน่ง
|
||||||
|
</div>
|
||||||
|
<div class="col-12"><q-separator /></div>
|
||||||
|
<div class="col-12 q-pa-md">
|
||||||
|
<q-toolbar style="padding: 0px">
|
||||||
|
<div class="row q-gutter-md">
|
||||||
|
<q-checkbox
|
||||||
|
keep-color
|
||||||
|
v-model="isBlank"
|
||||||
|
label="แสดงเฉพาะตำแหน่งว่าง"
|
||||||
|
color="primary"
|
||||||
|
>
|
||||||
|
<q-tooltip>แสดงเฉพาะตำแหน่งว่าง </q-tooltip>
|
||||||
|
</q-checkbox>
|
||||||
|
</div>
|
||||||
|
<q-space />
|
||||||
|
|
||||||
|
<div class="row q-gutter-md">
|
||||||
|
<q-checkbox
|
||||||
|
keep-color
|
||||||
|
v-model="isAll"
|
||||||
|
label="แสดงตำแหน่งทั้งหมด"
|
||||||
|
color="primary"
|
||||||
|
>
|
||||||
|
<q-tooltip
|
||||||
|
>แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
|
||||||
|
>
|
||||||
|
</q-checkbox>
|
||||||
|
<div>
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
v-model="filters"
|
||||||
|
label="ค้นหา"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon name="search" color="grey-5" />
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<q-select
|
||||||
|
v-model="visibleColumns"
|
||||||
|
multiple
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
options-dense
|
||||||
|
:display-value="$q.lang.table.columns"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
:options="columns"
|
||||||
|
option-value="name"
|
||||||
|
options-cover
|
||||||
|
style="min-width: 180px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-toolbar>
|
||||||
|
<d-table
|
||||||
|
ref="table"
|
||||||
|
:columns="columns"
|
||||||
|
:rows="positionNo"
|
||||||
|
:filter="filters"
|
||||||
|
row-key="id"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
:paging="true"
|
||||||
|
dense
|
||||||
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
|
class="tableTb"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
>
|
||||||
|
<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-tr>
|
||||||
|
</template>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
|
<q-td
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
@click="onClickSelectPos(props.row.id)"
|
||||||
|
:class="
|
||||||
|
props.row.id === positionId ? 'bg-blue-2' : ''
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div v-if="col.name == 'no'">
|
||||||
|
{{ props.rowIndex + 1 }}
|
||||||
|
</div>
|
||||||
|
<div v-else-if="col.name === 'posMasterNo'">
|
||||||
|
{{
|
||||||
|
props.row.isSit
|
||||||
|
? col.value + " " + "(ทับที่)"
|
||||||
|
: col.value
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div v-else-if="col.name === 'isPosition'">
|
||||||
|
<div v-if="col.value">
|
||||||
|
<q-icon
|
||||||
|
name="done"
|
||||||
|
color="primary"
|
||||||
|
size="24px"
|
||||||
|
>
|
||||||
|
<q-tooltip>ตรงตามตำแหน่ง </q-tooltip>
|
||||||
|
</q-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else>
|
||||||
|
{{ col.value ? col.value : "-" }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
|
||||||
|
<!-- <d-table
|
||||||
|
ref="table"
|
||||||
|
:columns="columns"
|
||||||
|
:rows="positionNo"
|
||||||
|
:filter="filters"
|
||||||
|
row-key="id"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
:paging="true"
|
||||||
|
dense
|
||||||
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
>
|
||||||
|
<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-tr>
|
||||||
|
</template>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
|
<q-td
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
@click="onClickSelectPos(props.row.id)"
|
||||||
|
:class="
|
||||||
|
props.row.id === positionId ? 'bg-blue-2' : ''
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div v-if="col.name == 'no'">
|
||||||
|
{{ props.rowIndex + 1 }}
|
||||||
|
</div>
|
||||||
|
<div v-else-if="col.name === 'posMasterNo'">
|
||||||
|
{{
|
||||||
|
props.row.isSit
|
||||||
|
? col.value + " " + "(ทับที่)"
|
||||||
|
: col.value
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div v-else-if="col.name === 'isPosition'">
|
||||||
|
<div v-if="col.value">
|
||||||
|
<q-icon
|
||||||
|
name="done"
|
||||||
|
color="primary"
|
||||||
|
size="24px"
|
||||||
|
>
|
||||||
|
<q-tooltip>ตรงตามตำแหน่ง </q-tooltip>
|
||||||
|
</q-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else>
|
||||||
|
{{ col.value ? col.value : "-" }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table> -->
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- เลือกตำแหน่ง -->
|
||||||
|
<div class="col-5">
|
||||||
|
<q-card
|
||||||
|
bordered
|
||||||
|
style="height: 100%; border: 1px solid #d6dee1"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
|
||||||
|
>
|
||||||
|
เลือกตำแหน่ง
|
||||||
|
</div>
|
||||||
|
<div class="col-12"><q-separator /></div>
|
||||||
|
<q-tab-panels
|
||||||
|
v-model="positionId"
|
||||||
|
animated
|
||||||
|
swipeable
|
||||||
|
vertical
|
||||||
|
transition-prev="jump-up"
|
||||||
|
transition-next="jump-up"
|
||||||
|
>
|
||||||
|
<q-tab-panel
|
||||||
|
v-for="(item, index) in positionNo"
|
||||||
|
:key="index"
|
||||||
|
:name="item.id"
|
||||||
|
>
|
||||||
|
<div class="col-12">
|
||||||
|
<!-- <q-toolbar style="padding: 0px">
|
||||||
|
<datepicker
|
||||||
|
menu-class-name="modalfix"
|
||||||
|
v-model="date"
|
||||||
|
:locale="'th'"
|
||||||
|
autoApply
|
||||||
|
borderless
|
||||||
|
:enableTimePicker="false"
|
||||||
|
week-start="0"
|
||||||
|
:min-date="date"
|
||||||
|
>
|
||||||
|
<template #year="{ year }">
|
||||||
|
{{ year + 543 }}
|
||||||
|
</template>
|
||||||
|
<template #year-overlay-value="{ value }">
|
||||||
|
{{ parseInt(value + 543) }}
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
ref="dateRef"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
hide-bottom-space
|
||||||
|
:model-value="date != null ? date2Thai(date) : null"
|
||||||
|
label="วันที่รายงานตัว"
|
||||||
|
>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon
|
||||||
|
name="event"
|
||||||
|
class="cursor-pointer"
|
||||||
|
style="color: var(--q-primary)"
|
||||||
|
>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
|
</q-toolbar> -->
|
||||||
|
<d-table
|
||||||
|
ref="table"
|
||||||
|
:columns="columnsPostition"
|
||||||
|
:rows="rowsPosition"
|
||||||
|
row-key="id"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
:paging="true"
|
||||||
|
dense
|
||||||
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
|
class="tableTb"
|
||||||
|
selection="single"
|
||||||
|
v-model:selected="selectedPos"
|
||||||
|
>
|
||||||
|
<template v-slot:header-selection="scope">
|
||||||
|
<q-checkbox
|
||||||
|
keep-color
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
v-model="scope.checkBox"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template v-slot:header="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-th auto-width />
|
||||||
|
<q-th
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
>
|
||||||
|
<span class="text-weight-medium">{{
|
||||||
|
col.label
|
||||||
|
}}</span>
|
||||||
|
</q-th>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
|
<q-td>
|
||||||
|
<q-checkbox
|
||||||
|
keep-color
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
v-model="props.selected"
|
||||||
|
/>
|
||||||
|
</q-td>
|
||||||
|
<q-td
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
>
|
||||||
|
<div v-if="col.name == 'no'">
|
||||||
|
{{ props.rowIndex + 1 }}
|
||||||
|
</div>
|
||||||
|
<div v-else-if="col.name === 'posMasterNo'">
|
||||||
|
{{
|
||||||
|
props.row.isSit
|
||||||
|
? col.value + " " + "(ทับที่)"
|
||||||
|
: col.value
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else>
|
||||||
|
{{ col.value ? col.value : "-" }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
</div>
|
||||||
|
</q-tab-panel>
|
||||||
|
</q-tab-panels>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-tab-panel>
|
||||||
|
</q-tab-panels>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<q-card-actions align="right" class="bg-white text-teal">
|
||||||
|
<q-btn label="บันทึก" color="secondary" @click="onClickSubmit"
|
||||||
|
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.my-list-link {
|
||||||
|
color: rgb(118, 168, 222);
|
||||||
|
border-radius: 5px;
|
||||||
|
background: #a3d3fb48 !important;
|
||||||
|
font-weight: 600;
|
||||||
|
border: 1px solid rgba(175, 185, 196, 0.217);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
301
src/modules/08_registryEmployee/components/DialogSendOrder.vue
Normal file
301
src/modules/08_registryEmployee/components/DialogSendOrder.vue
Normal file
|
|
@ -0,0 +1,301 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, watch, reactive } from "vue";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
/** importType*/
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
import type { DataEmployee } from "@/modules/08_registryEmployee/interface/response/Employee";
|
||||||
|
|
||||||
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||||||
|
|
||||||
|
/** inportStore*/
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import { useRegistryEmp } from "@/modules/08_registryEmployee/stores/registry-employee";
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const {
|
||||||
|
success,
|
||||||
|
messageError,
|
||||||
|
showLoader,
|
||||||
|
hideLoader,
|
||||||
|
date2Thai,
|
||||||
|
dialogConfirm,
|
||||||
|
dialogMessageNotify,
|
||||||
|
} = useCounterMixin();
|
||||||
|
const { statusText } = useRegistryEmp();
|
||||||
|
|
||||||
|
/**props*/
|
||||||
|
const modal = defineModel<boolean>("modal", { required: true });
|
||||||
|
|
||||||
|
const filter = ref<string>("");
|
||||||
|
const rows = ref<DataEmployee[]>([]);
|
||||||
|
const selected = ref<DataEmployee[]>([]);
|
||||||
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "no",
|
||||||
|
align: "left",
|
||||||
|
label: "ลำดับ",
|
||||||
|
sortable: false,
|
||||||
|
field: (row) => rows.value.indexOf(row) + 1,
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "citizenId",
|
||||||
|
align: "left",
|
||||||
|
label: "เลขประจำตัวประชาชน",
|
||||||
|
sortable: true,
|
||||||
|
field: "citizenId",
|
||||||
|
headerStyle: "font-size: 14px; min-width: 200px",
|
||||||
|
style: "font-size: 14px; ",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "fullname",
|
||||||
|
align: "left",
|
||||||
|
label: "ชื่อ-นามสกุล",
|
||||||
|
sortable: true,
|
||||||
|
field: (row) => `${row.prefix}${row.firstName} ${row.lastName}`,
|
||||||
|
headerStyle: "font-size: 14px; min-width: 200px",
|
||||||
|
style: "font-size: 14px; ",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "draftOrganizationOrganization",
|
||||||
|
align: "left",
|
||||||
|
label: "หน่วยงานที่รับการบรรจุ",
|
||||||
|
sortable: true,
|
||||||
|
field: "draftOrganizationOrganization",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
name: "govAge",
|
||||||
|
align: "left",
|
||||||
|
label: "อายุราชการ(ปี)",
|
||||||
|
sortable: true,
|
||||||
|
field: "govAge",
|
||||||
|
format(val) {
|
||||||
|
return val;
|
||||||
|
},
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "dateEmployment",
|
||||||
|
align: "left",
|
||||||
|
label: "วันที่จ้าง",
|
||||||
|
sortable: true,
|
||||||
|
field: "dateEmployment",
|
||||||
|
format: (val) => date2Thai(val),
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
name: "salaryDate",
|
||||||
|
align: "left",
|
||||||
|
label: "วันที่แต่งตั้ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "salaryDate",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "age",
|
||||||
|
align: "left",
|
||||||
|
label: "อายุ",
|
||||||
|
sortable: true,
|
||||||
|
field: "age",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "createdAt",
|
||||||
|
align: "left",
|
||||||
|
label: "วันที่สร้าง",
|
||||||
|
sortable: true,
|
||||||
|
field: "createdAt",
|
||||||
|
format(val) {
|
||||||
|
return date2Thai(val);
|
||||||
|
},
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "dateRetireLaw",
|
||||||
|
align: "left",
|
||||||
|
label: "วันที่พ้นราชการ",
|
||||||
|
sortable: true,
|
||||||
|
field: "dateRetireLaw",
|
||||||
|
format(val) {
|
||||||
|
return date2Thai(val);
|
||||||
|
},
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "statustext",
|
||||||
|
align: "left",
|
||||||
|
label: "สถานะ",
|
||||||
|
sortable: true,
|
||||||
|
field: (row) => statusText(row.draftOrgEmployeeStatus),
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const visibleColumns = ref<String[]>([
|
||||||
|
"no",
|
||||||
|
"citizenId",
|
||||||
|
"fullname",
|
||||||
|
"draftOrganizationOrganization",
|
||||||
|
"govAge",
|
||||||
|
"dateEmployment",
|
||||||
|
"age",
|
||||||
|
"createdAt",
|
||||||
|
"dateRetireLaw",
|
||||||
|
"statustext",
|
||||||
|
]);
|
||||||
|
|
||||||
|
function onClickSendOrder() {
|
||||||
|
if (selected.value.length == 0) {
|
||||||
|
dialogMessageNotify($q, "กรุณาเลือกคนออกคำสั่ง");
|
||||||
|
} else {
|
||||||
|
dialogConfirm(
|
||||||
|
$q,
|
||||||
|
() => {
|
||||||
|
closeDialog();
|
||||||
|
},
|
||||||
|
"ยื่นยันการส่งรายชื่อไปออกคำสั่ง",
|
||||||
|
"ต้องการยืนยันการส่งรายชื่อไปออกคำสั่งนี้หรือไม่ ?"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function fetchList() {
|
||||||
|
showLoader();
|
||||||
|
http
|
||||||
|
.get(config.API.registryNew("-employee") + `/temp`)
|
||||||
|
.then((res) => {
|
||||||
|
rows.value = res.data.result.data;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeDialog() {
|
||||||
|
modal.value = false;
|
||||||
|
selected.value = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => modal.value,
|
||||||
|
() => {
|
||||||
|
modal.value && fetchList();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<q-dialog v-model="modal">
|
||||||
|
<q-card style="width: 900px; max-width: 80vw">
|
||||||
|
<DialogHeader tittle="ส่งรายชื่อไปออกคำสั่ง" :close="closeDialog" />
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section class="q-pt-none">
|
||||||
|
<div class="row q-col-gutter-sm">
|
||||||
|
<div class="col-12">
|
||||||
|
<q-toolbar style="padding: 0">
|
||||||
|
<q-input
|
||||||
|
borderless
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
debounce="300"
|
||||||
|
v-model="filter"
|
||||||
|
ref="filterRef"
|
||||||
|
placeholder="ค้นหา"
|
||||||
|
style="width: 850px; max-width: auto"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon name="search" />
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
<q-select
|
||||||
|
v-model="visibleColumns"
|
||||||
|
multiple
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
options-dense
|
||||||
|
:display-value="$q.lang.table.columns"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
:options="columns"
|
||||||
|
option-value="name"
|
||||||
|
options-cover
|
||||||
|
style="min-width: 150px"
|
||||||
|
class="gt-xs q-ml-sm"
|
||||||
|
/>
|
||||||
|
</q-toolbar>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<d-table
|
||||||
|
:rows="rows"
|
||||||
|
:columns="columns"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
:filter="filter"
|
||||||
|
row-key="id"
|
||||||
|
selection="multiple"
|
||||||
|
v-model:selected="selected"
|
||||||
|
>
|
||||||
|
<template v-slot:header-selection="scope">
|
||||||
|
<q-checkbox
|
||||||
|
keep-color
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
v-model="scope.selected"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
|
<q-td>
|
||||||
|
<q-checkbox
|
||||||
|
keep-color
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
v-model="props.selected"
|
||||||
|
/>
|
||||||
|
</q-td>
|
||||||
|
<q-td
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
{{
|
||||||
|
col.value !== null && col.value !== "" ? col.value : "-"
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
<q-card-actions align="right" class="bg-white text-teal">
|
||||||
|
<q-btn
|
||||||
|
label="ส่งไปออกคำสั่ง"
|
||||||
|
@click="onClickSendOrder"
|
||||||
|
color="public"
|
||||||
|
/>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -1 +1,12 @@
|
||||||
export type {};
|
interface DataOption {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
interface NewPagination {
|
||||||
|
descending: boolean;
|
||||||
|
page: number;
|
||||||
|
rowsPerPage: number;
|
||||||
|
sortBy: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type { DataOption, NewPagination };
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
interface FormDataEmployee {
|
||||||
|
citizenId: string;
|
||||||
|
prefix: string;
|
||||||
|
rank: string;
|
||||||
|
firstName: string;
|
||||||
|
lastName: string;
|
||||||
|
birthDate: any;
|
||||||
|
gender: string;
|
||||||
|
relationship: string;
|
||||||
|
nationality: string;
|
||||||
|
ethnicity: string;
|
||||||
|
religion: string;
|
||||||
|
bloodGroup: string;
|
||||||
|
phone: string;
|
||||||
|
employeeClass: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type { FormDataEmployee };
|
||||||
119
src/modules/08_registryEmployee/interface/response/Employee.ts
Normal file
119
src/modules/08_registryEmployee/interface/response/Employee.ts
Normal file
|
|
@ -0,0 +1,119 @@
|
||||||
|
interface DataEmployee {
|
||||||
|
age: string;
|
||||||
|
child1: null | string;
|
||||||
|
child1Id: null | string;
|
||||||
|
child1ShortName: null | string;
|
||||||
|
child2: null | string;
|
||||||
|
child2Id: null | string;
|
||||||
|
child2ShortName: null | string;
|
||||||
|
child3: null | string;
|
||||||
|
child3Id: null | string;
|
||||||
|
child3ShortName: null | string;
|
||||||
|
child4: null | string;
|
||||||
|
child4Id: null | string;
|
||||||
|
child4ShortName: null | string;
|
||||||
|
citizenId: string;
|
||||||
|
createdAt: string;
|
||||||
|
dateAppoint: null | string;
|
||||||
|
dateRetireLaw: string;
|
||||||
|
dateStart: null | string;
|
||||||
|
draftOrgEmployeeStatus: string;
|
||||||
|
draftOrganizationOrganization: string;
|
||||||
|
draftPositionEmployee: string;
|
||||||
|
employeeClass: string;
|
||||||
|
firstName: string;
|
||||||
|
govAge: number;
|
||||||
|
id: string;
|
||||||
|
lastName: string;
|
||||||
|
node: null | string;
|
||||||
|
nodeId: null | string;
|
||||||
|
nodeName: null | string;
|
||||||
|
nodeShortName: null | string;
|
||||||
|
posLevel: number;
|
||||||
|
posLevelId: string;
|
||||||
|
posNo: string;
|
||||||
|
posType: string;
|
||||||
|
posTypeId: string;
|
||||||
|
posTypeShortName: string;
|
||||||
|
position: string;
|
||||||
|
prefix: string;
|
||||||
|
rank: string;
|
||||||
|
root: string;
|
||||||
|
rootId: string;
|
||||||
|
rootShortName: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ResOptionPerson {
|
||||||
|
createdAt: string;
|
||||||
|
createdFullName: "สาวิตรี ศรีสมัย";
|
||||||
|
createdUserId: string;
|
||||||
|
id: string;
|
||||||
|
lastUpdateFullName: string;
|
||||||
|
lastUpdateUserId: string;
|
||||||
|
lastUpdatedAt: string;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PositionNo {
|
||||||
|
id: string;
|
||||||
|
isPosition: boolean;
|
||||||
|
isSit: boolean;
|
||||||
|
node: number;
|
||||||
|
nodeId: string;
|
||||||
|
orgChild1Id: null | string;
|
||||||
|
orgChild2Id: null | string;
|
||||||
|
orgChild3Id: null | string;
|
||||||
|
orgChild4Id: null | string;
|
||||||
|
orgRootId: string;
|
||||||
|
orgShortname: string;
|
||||||
|
posLevelId: string;
|
||||||
|
posLevelName: number;
|
||||||
|
posMasterNo: number;
|
||||||
|
posMasterNoPrefix: null | string;
|
||||||
|
posMasterNoSuffix: null | string;
|
||||||
|
posTypeId: string;
|
||||||
|
posTypeName: string;
|
||||||
|
positionIsSelected: boolean;
|
||||||
|
positionName: string;
|
||||||
|
position: Position[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TreeMain {
|
||||||
|
children: TreeMain[]; // ปรับเป็นชนิดข้อมูลที่ถูกต้องตามโครงสร้างของ children ถ้าเป็นไปได้
|
||||||
|
orgCode: string;
|
||||||
|
orgLevel: number;
|
||||||
|
orgName: string;
|
||||||
|
orgRevisionId: string;
|
||||||
|
orgRootName: string;
|
||||||
|
orgTreeCode: string;
|
||||||
|
orgTreeFax: string;
|
||||||
|
orgTreeId: string;
|
||||||
|
orgTreeName: string;
|
||||||
|
orgTreeOrder: number;
|
||||||
|
orgTreePhoneEx: string;
|
||||||
|
orgTreePhoneIn: string;
|
||||||
|
orgTreeRank: string;
|
||||||
|
orgTreeShortName: string;
|
||||||
|
totalPosition: number;
|
||||||
|
totalPositionCurrentUse: number;
|
||||||
|
totalPositionCurrentVacant: number;
|
||||||
|
totalPositionNextUse: number;
|
||||||
|
totalPositionNextVacant: number;
|
||||||
|
totalRootPosition: number;
|
||||||
|
totalRootPositionCurrentUse: number;
|
||||||
|
totalRootPositionCurrentVacant: number;
|
||||||
|
totalRootPositionNextUse: number;
|
||||||
|
totalRootPositionNextVacant: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Position {
|
||||||
|
id: string;
|
||||||
|
posLevelId: string;
|
||||||
|
posLevelName: number;
|
||||||
|
posTypeId: string;
|
||||||
|
posTypeName: string;
|
||||||
|
positionIsSelected: boolean;
|
||||||
|
positionName: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type { DataEmployee, ResOptionPerson, PositionNo, TreeMain, Position };
|
||||||
|
|
@ -4,14 +4,17 @@ import { defineAsyncComponent } from "vue";
|
||||||
const Main = defineAsyncComponent(
|
const Main = defineAsyncComponent(
|
||||||
() => import("@/modules/08_registryEmployee/views/Main.vue")
|
() => import("@/modules/08_registryEmployee/views/Main.vue")
|
||||||
);
|
);
|
||||||
|
const DetailView = defineAsyncComponent(
|
||||||
const CreateEmployee = defineAsyncComponent(
|
() => import("@/modules/08_registryEmployee/views/DetailView.vue")
|
||||||
() => import("@/modules/08_registryEmployee/views/Add.vue")
|
|
||||||
);
|
);
|
||||||
|
|
||||||
const EditDetail = defineAsyncComponent(
|
// const CreateEmployee = defineAsyncComponent(
|
||||||
() => import("@/modules/08_registryEmployee/views/EditDetail.vue")
|
// () => import("@/modules/08_registryEmployee/views/Add.vue")
|
||||||
);
|
// );
|
||||||
|
|
||||||
|
// const EditDetail = defineAsyncComponent(
|
||||||
|
// () => import("@/modules/08_registryEmployee/views/EditDetail.vue")
|
||||||
|
// );
|
||||||
|
|
||||||
export default [
|
export default [
|
||||||
{
|
{
|
||||||
|
|
@ -25,23 +28,33 @@ export default [
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/registry-employee/add",
|
path: "/registry-employee/:id",
|
||||||
name: "registryEmployeeAdd",
|
name: "registry-employeeId",
|
||||||
component: CreateEmployee,
|
component: DetailView,
|
||||||
meta: {
|
|
||||||
Auth: true,
|
|
||||||
Key: [11],
|
|
||||||
Role: "registryEmployee",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/registry-employee/edit/:id",
|
|
||||||
name: "registryEmployeeEdit",
|
|
||||||
component: EditDetail,
|
|
||||||
meta: {
|
meta: {
|
||||||
Auth: true,
|
Auth: true,
|
||||||
Key: [11],
|
Key: [11],
|
||||||
Role: "registryEmployee",
|
Role: "registryEmployee",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
// {
|
||||||
|
// path: "/registry-employee/add",
|
||||||
|
// name: "registryEmployeeAdd",
|
||||||
|
// component: CreateEmployee,
|
||||||
|
// meta: {
|
||||||
|
// Auth: true,
|
||||||
|
// Key: [11],
|
||||||
|
// Role: "registryEmployee",
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: "/registry-employee/edit/:id",
|
||||||
|
// name: "registryEmployeeEdit",
|
||||||
|
// component: EditDetail,
|
||||||
|
// meta: {
|
||||||
|
// Auth: true,
|
||||||
|
// Key: [11],
|
||||||
|
// Role: "registryEmployee",
|
||||||
|
// },
|
||||||
|
// },
|
||||||
];
|
];
|
||||||
|
|
|
||||||
57
src/modules/08_registryEmployee/stores/registry-employee.ts
Normal file
57
src/modules/08_registryEmployee/stores/registry-employee.ts
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
import { defineStore } from "pinia";
|
||||||
|
|
||||||
|
export const useRegistryEmp = defineStore("registry-employee", () => {
|
||||||
|
/**
|
||||||
|
* function คำนวณหาอายุ
|
||||||
|
* @param birthDate วันเกิด
|
||||||
|
* @returns อายุ
|
||||||
|
*/
|
||||||
|
function calculateAge(birthDate: Date | null) {
|
||||||
|
if (!birthDate) return null;
|
||||||
|
const birthDateTimeStamp = new Date(birthDate).getTime();
|
||||||
|
const now = new Date();
|
||||||
|
const diff = now.getTime() - birthDateTimeStamp;
|
||||||
|
|
||||||
|
const ageDate = new Date(diff);
|
||||||
|
const years = ageDate.getUTCFullYear() - 1970;
|
||||||
|
const months = ageDate.getUTCMonth();
|
||||||
|
const days = ageDate.getUTCDate() - 1;
|
||||||
|
const retire = new Date(birthDate);
|
||||||
|
retire.setFullYear(retire.getFullYear() + 60);
|
||||||
|
// retireDate.value = retire;
|
||||||
|
|
||||||
|
if (years > 60) {
|
||||||
|
return "อายุเกิน 60 ปี";
|
||||||
|
}
|
||||||
|
|
||||||
|
return `${years} ปี ${months} เดือน ${days} วัน`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function convertstatus
|
||||||
|
* @param val ค่าสภานะ
|
||||||
|
* @returns textStatus
|
||||||
|
*/
|
||||||
|
const statusText = (val: string) => {
|
||||||
|
switch (val) {
|
||||||
|
case "WAITTING":
|
||||||
|
return "รอดำเนินการ";
|
||||||
|
case "REPORT":
|
||||||
|
return "เลือกตำแหน่งแล้ว";
|
||||||
|
case "APPROVE":
|
||||||
|
return "อนุมัติ";
|
||||||
|
case "REJECT":
|
||||||
|
return "ไม่อนุมัติ";
|
||||||
|
case "REPORT":
|
||||||
|
return "ส่งรายชื่อไปออกคำสั่ง";
|
||||||
|
case "DONE":
|
||||||
|
return "ออกคำสั่งเสร็จแล้ว";
|
||||||
|
default:
|
||||||
|
return "-";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
calculateAge,
|
||||||
|
statusText,
|
||||||
|
};
|
||||||
|
});
|
||||||
9
src/modules/08_registryEmployee/views/DetailView.vue
Normal file
9
src/modules/08_registryEmployee/views/DetailView.vue
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import View from "@/modules/04_registryNew/views/detailView.vue";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<View />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
File diff suppressed because it is too large
Load diff
1045
src/modules/08_registryEmployee/views/MainOld.vue
Normal file
1045
src/modules/08_registryEmployee/views/MainOld.vue
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue