ทำเบียนประวัติลูกจ้างชั่วคราว
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>({
|
||||
development: {
|
||||
// API_URI: "https://localhost:7260/api",
|
||||
API_URI: "https://bma-ehr.frappet.synology.me/api/v1",
|
||||
API_URI: "http://localhost:13001/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://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
|
||||
// API_URI_ORG_EMPLOYEE_SERVICE: "https://localhost:7208/api/v1", //ใช้ชั่วคราว
|
||||
|
|
|
|||
|
|
@ -177,4 +177,17 @@ export default {
|
|||
`${registryNew}${empType}/family/${type}`,
|
||||
profileFamilyHistory: (id: string, empType: string, type: string) =>
|
||||
`${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
|
||||
.put(config.API.profileNewProfileById(id.value, empType.value), {
|
||||
...formData,
|
||||
employeeClass: route.name === "registry-employeeId" ? "TEMP" : undefined,
|
||||
})
|
||||
.then((res) => {
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
getData(), (modal.value = false);
|
||||
props.fetchDataPersonal?.();
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
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 AchievementMain from "@/modules/04_registryNew/components/detail/Achievement/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 props = defineProps({
|
||||
|
|
@ -23,7 +27,10 @@ const itemsTab = ref<any>([
|
|||
{
|
||||
name: "2",
|
||||
icon: "mdi-account-tie",
|
||||
label: "ข้อมูลราชการ",
|
||||
label:
|
||||
route.name === "registry-employeeId"
|
||||
? "ข้อมูลลูกจ้างชั่วคราว"
|
||||
: "ข้อมูลราชการ",
|
||||
},
|
||||
{
|
||||
name: "3",
|
||||
|
|
@ -88,7 +95,11 @@ const splitterModel = ref<number>(12);
|
|||
v-if="store.tabMain === '1'"
|
||||
: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'" />
|
||||
<AchievementMain v-if="store.tabMain === '4'" />
|
||||
<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;
|
||||
bloodGroup: string | null;
|
||||
citizenId: string;
|
||||
email: string | null;
|
||||
// email: string | null;
|
||||
ethnicity: string | null;
|
||||
firstName: string;
|
||||
gender: string | null;
|
||||
lastName: string;
|
||||
nationality: string | null;
|
||||
phone: string | null;
|
||||
posLevelId: string;
|
||||
posTypeId: string;
|
||||
// posLevelId: string;
|
||||
// posTypeId: string;
|
||||
prefix: string;
|
||||
rank: string | null;
|
||||
relationship: string | null;
|
||||
religion: string | null;
|
||||
telephoneNumber: string | null;
|
||||
// telephoneNumber: string | null;
|
||||
}
|
||||
|
||||
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,
|
||||
relationship: null,
|
||||
gender: null,
|
||||
posTypeId: "",
|
||||
posLevelId: "",
|
||||
// posTypeId: "",
|
||||
// posLevelId: "",
|
||||
religion: null,
|
||||
citizenId: "",
|
||||
telephoneNumber: null,
|
||||
// telephoneNumber: null,
|
||||
nationality: null,
|
||||
ethnicity: null,
|
||||
birthDate: null,
|
||||
phone: null,
|
||||
email: null,
|
||||
// email: null,
|
||||
lastName: "",
|
||||
firstName: "",
|
||||
prefix: "",
|
||||
|
|
|
|||
|
|
@ -579,7 +579,11 @@ onMounted(async () => {
|
|||
class="q-mr-sm"
|
||||
@click="router.go(-1)"
|
||||
/>
|
||||
ทะเบียนประวัติ
|
||||
{{
|
||||
route.name === "registry-employeeId"
|
||||
? " ทะเบียนประวัติลูกจ้างชั่วคราว"
|
||||
: "ทะเบียนประวัติ"
|
||||
}}
|
||||
</div>
|
||||
<q-space />
|
||||
<q-btn-dropdown
|
||||
|
|
|
|||
|
|
@ -195,6 +195,7 @@ async function onClickSelectPos(id: string) {
|
|||
(e) => e.id === seletcId.value
|
||||
);
|
||||
}
|
||||
console.log(selected.value);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -208,7 +209,7 @@ onMounted(async () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="column q-col-gutter-sm" style="height: 70vh">
|
||||
<div class="column q-col-gutter-sm">
|
||||
<!-- เลือกเลขที่ตำแหน่ง -->
|
||||
<div class="col-7">
|
||||
<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)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
console.log(data);
|
||||
|
||||
|
||||
expanded.value = data;
|
||||
nodeId.value = id;
|
||||
positionId.value = props?.dataRow?.posmasterId;
|
||||
|
|
@ -280,9 +279,8 @@ watch(
|
|||
if (modal.value) {
|
||||
await fetchOrganizationActive();
|
||||
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);
|
||||
} else {
|
||||
expanded.value = [];
|
||||
|
|
@ -348,7 +346,7 @@ watch(
|
|||
<q-card
|
||||
bordered
|
||||
class="col-12 col-sm-3 scroll q-pa-sm"
|
||||
style="height: 75vh"
|
||||
style="height: 80vh"
|
||||
>
|
||||
<q-toolbar style="padding: 0">
|
||||
<q-toolbar-title class="text-subtitle2 text-bold"
|
||||
|
|
@ -410,7 +408,11 @@ watch(
|
|||
</q-tree>
|
||||
</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
|
||||
v-model="nodeId"
|
||||
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(
|
||||
() => import("@/modules/08_registryEmployee/views/Main.vue")
|
||||
);
|
||||
|
||||
const CreateEmployee = defineAsyncComponent(
|
||||
() => import("@/modules/08_registryEmployee/views/Add.vue")
|
||||
const DetailView = defineAsyncComponent(
|
||||
() => import("@/modules/08_registryEmployee/views/DetailView.vue")
|
||||
);
|
||||
|
||||
const EditDetail = defineAsyncComponent(
|
||||
() => import("@/modules/08_registryEmployee/views/EditDetail.vue")
|
||||
);
|
||||
// const CreateEmployee = defineAsyncComponent(
|
||||
// () => import("@/modules/08_registryEmployee/views/Add.vue")
|
||||
// );
|
||||
|
||||
// const EditDetail = defineAsyncComponent(
|
||||
// () => import("@/modules/08_registryEmployee/views/EditDetail.vue")
|
||||
// );
|
||||
|
||||
export default [
|
||||
{
|
||||
|
|
@ -25,23 +28,33 @@ export default [
|
|||
},
|
||||
},
|
||||
{
|
||||
path: "/registry-employee/add",
|
||||
name: "registryEmployeeAdd",
|
||||
component: CreateEmployee,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [11],
|
||||
Role: "registryEmployee",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/registry-employee/edit/:id",
|
||||
name: "registryEmployeeEdit",
|
||||
component: EditDetail,
|
||||
path: "/registry-employee/:id",
|
||||
name: "registry-employeeId",
|
||||
component: DetailView,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [11],
|
||||
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