417 lines
15 KiB
Vue
417 lines
15 KiB
Vue
<script setup lang="ts">
|
|
import { ref, reactive, onMounted } from "vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import type {
|
|
FormAddHistoryEmployee,
|
|
FormAddHistoryProject,
|
|
} from "@/modules/15_development/interface/request/Main";
|
|
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
|
|
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
|
|
import DialogGov from "@/modules/15_development/components/historyEmployee/DialogGov.vue";
|
|
import DialogProject from "@/modules/15_development/components/historyEmployee/DialogProject.vue";
|
|
import { useQuasar, type QTableProps } from "quasar";
|
|
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
|
|
const id = ref<string>(route.params.id as string);
|
|
const $q = useQuasar();
|
|
const mixin = useCounterMixin();
|
|
const { dialogConfirm, showLoader, hideLoader, messageError, date2Thai } =
|
|
mixin;
|
|
const store = useDevelopmentDataStore();
|
|
const modalDialogGov = ref<boolean>(false);
|
|
const modalDialogProject = ref<boolean>(false);
|
|
|
|
const dateOrder = ref<Date | null>(null);
|
|
const order = ref<string>("");
|
|
|
|
/** ตัวแปรข้อมูลข้าราชการ */
|
|
const formMain = reactive<FormAddHistoryEmployee>({
|
|
id: "",
|
|
name: "", //ชื่อ - นามสกุล
|
|
prefix: "", //คำนำหน้าชื่อ
|
|
rank: "", //ยศ
|
|
firstName: "", //ชื่อ
|
|
lastName: "", //นามสกุล
|
|
citizenId: "", //เลขประจําตัวประชาชน
|
|
level: "", //ระดับตําแหน่ง
|
|
type: "", //ประเภทตําแหน่ง
|
|
posLevelId: "", //id ระดับตําแหน่ง
|
|
posTypeId: "", //id ประเภทตําแหน่ง
|
|
position: "", //ตําแหน่ง
|
|
posNo: "", //เลขที่ตำแหน่ง
|
|
oc: "", //หน่วยงานที่สังกัด
|
|
});
|
|
|
|
/** ตัวแปรข้อมูลโครงสร้าง */
|
|
const formMainProject = reactive<FormAddHistoryProject>({
|
|
id: "",
|
|
project: "", //ชื่อโครงการ/หลักสูตรการฝึกอบรม
|
|
year: "", //ปีงบประมาณที่เข้ารับการฝึกอบรม
|
|
trainingStart: "", //วันเริ่มต้นการฝึกอบรม
|
|
trainingEnd: "", //วันสิ้นสุดการฝึกอบรม
|
|
totalTraining: "", //รวมระยะเวลาในการฝึกอบรม
|
|
location: "", //สถานที่ไปศึกษาดูงาน
|
|
topic: "", //หัวข้อการไปศึกษาดูงาน
|
|
// studyStart: "", //วันเริ่มต้นการศึกษาดูงาน
|
|
// studyEnd: "", //วันสิ้นสุดการศึกษาดูงาน
|
|
organizingTraining: "", //หน่วยงานที่รับผิดชอบจัดการอบรม
|
|
});
|
|
|
|
const fieldLabels = {
|
|
citizenId: "เลขประจําตัวประชาชน",
|
|
name: "ชื่อ - นามสกุล",
|
|
position: "ตําแหน่ง",
|
|
type: "กลุ่มงาน",
|
|
|
|
level: "ระดับชั้นงาน",
|
|
oc: "หน่วยงานที่สังกัด",
|
|
};
|
|
|
|
const fieldLabelsProject = {
|
|
project: "ชื่อโครงการ/หลักสูตรการฝึกอบรม",
|
|
year: "ปีงบประมาณที่เข้ารับการฝึกอบรม",
|
|
trainingStart: "วันเริ่มต้นการฝึกอบรม",
|
|
trainingEnd: "วันสิ้นสุดการฝึกอบรม",
|
|
totalTraining: "รวมระยะเวลาในการฝึกอบรม",
|
|
|
|
location: "สถานที่ไปศึกษาดูงาน",
|
|
topic: "หัวข้อการไปศึกษาดูงาน",
|
|
studyStart: "วันเริ่มต้นการศึกษาดูงาน",
|
|
studyEnd: "วันสิ้นสุดการศึกษาดูงาน",
|
|
organizingTraining: "หน่วยงานที่รับผิดชอบจัดการอบรม",
|
|
};
|
|
|
|
function getClass() {
|
|
return "inputgreen";
|
|
}
|
|
/** save */
|
|
function onSubmit() {
|
|
const url = id.value
|
|
? config.API.developmentHistoryList("employee") + `${id.value}`
|
|
: config.API.developmentHistoryAdd("employee");
|
|
|
|
const body = {
|
|
rank: null,
|
|
prefix: formMain.prefix,
|
|
firstName: formMain.firstName,
|
|
lastName: formMain.lastName,
|
|
citizenId: formMain.citizenId,
|
|
position: formMain.position,
|
|
posExecutive: null,
|
|
posLevelId: formMain.posLevelId,
|
|
posTypeId: formMain.posTypeId,
|
|
|
|
developmentId: formMainProject.id,
|
|
order: order.value,
|
|
dateOrder: dateOrder.value,
|
|
};
|
|
dialogConfirm($q, () => {
|
|
showLoader();
|
|
http[id.value ? "put" : "post"](url, body)
|
|
.then((res) => {
|
|
router.push(`/development/employee-history`);
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
});
|
|
}
|
|
|
|
function upDate(data: FormAddHistoryEmployee) {
|
|
formMain.id = data.id;
|
|
formMain.citizenId = data.citizenId;
|
|
formMain.name = data.name;
|
|
formMain.prefix = data.prefix;
|
|
formMain.firstName = data.firstName;
|
|
formMain.lastName = data.lastName;
|
|
formMain.position = data.position;
|
|
formMain.posLevelId = data.posLevelId;
|
|
formMain.posTypeId = data.posTypeId;
|
|
formMain.type = data.type;
|
|
formMain.level = data.level;
|
|
}
|
|
|
|
function upDateProject(data: any) {
|
|
formMainProject.id = data.id;
|
|
formMainProject.project = data.project;
|
|
formMainProject.year = data.year;
|
|
}
|
|
|
|
function getDataEdit() {
|
|
showLoader();
|
|
http
|
|
.get(config.API.developmentHistoryList("employee") + `${id.value}`)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
formMain.id = id.value;
|
|
formMain.citizenId = data.citizenId ? data.citizenId : null;
|
|
formMain.name = data.firstName
|
|
? `${data.prefix}${data.firstName} ${data.lastName}`
|
|
: null;
|
|
formMain.prefix = data.prefix ? data.prefix : null;
|
|
formMain.firstName = data.firstName ? data.firstName : null;
|
|
formMain.lastName = data.lastName ? data.lastName : null;
|
|
|
|
formMain.position = data.position ? data.position : null;
|
|
formMain.posLevelId = data.posLevelId ? data.posLevelId : null;
|
|
formMain.posTypeId = data.posTypeId ? data.posTypeId : null;
|
|
formMain.type = data.posTypeName ? data.posTypeName : null;
|
|
formMain.level = data.posLevelName ? data.posLevelName : null;
|
|
formMain.positionSide = data.positionSide ? data.positionSide : null;
|
|
formMain.oc = data.org ? data.org : null;
|
|
|
|
formMainProject.id = data.developmentId;
|
|
formMainProject.project = data.projectName;
|
|
formMainProject.year = data.year;
|
|
formMainProject.trainingStart = data.dateStart;
|
|
formMainProject.trainingEnd = data.dateEnd;
|
|
formMainProject.totalTraining = data.totalDate;
|
|
formMainProject.location = data.addressAcademic;
|
|
formMainProject.topic = data.topicAcademic;
|
|
formMainProject.studyStart = data.dateStudyStart;
|
|
formMainProject.studyEnd = data.dateStudyEnd;
|
|
formMainProject.organizingTraining = data.org;
|
|
|
|
dateOrder.value = data.dateOrder;
|
|
order.value = data.order;
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (id.value) {
|
|
getDataEdit();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="toptitle text-dark">
|
|
<q-btn
|
|
icon="mdi-arrow-left"
|
|
unelevated
|
|
round
|
|
dense
|
|
flat
|
|
color="primary"
|
|
class="q-mr-sm"
|
|
@click="router.go(-1)"
|
|
/>
|
|
<span>{{
|
|
id
|
|
? `แก้ไขประวัติฝึกอบรม/ดูงานลูกจ้าง`
|
|
: `เพิ่มประวัติฝึกอบรม/ดูงานลูกจ้าง`
|
|
}}</span>
|
|
</div>
|
|
<q-card flat bordered>
|
|
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
|
<q-card-section>
|
|
<q-card flat bordered style="border: 1px solid #d6dee1">
|
|
<div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
|
|
ข้อมูลลูกจ้าง
|
|
|
|
<!-- <q-btn
|
|
flat
|
|
class="btn-fixed-width"
|
|
color="teal"
|
|
label="เลือกลูกจ้าง"
|
|
icon="add"
|
|
@click="modalDialogGov = true"
|
|
/> -->
|
|
</div>
|
|
<div class="col-12"><q-separator /></div>
|
|
<div class="row q-col-gutter-md q-pa-md">
|
|
<div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
|
|
<div
|
|
class="row"
|
|
v-for="(field, index) in Object.keys(fieldLabels).slice(0, 4)"
|
|
:key="index"
|
|
>
|
|
<div class="col-12 col-sm-12 col-md-4">
|
|
<span class="text-grey-6 text-weight-medium">{{
|
|
fieldLabels[field as keyof typeof fieldLabels]
|
|
}}</span>
|
|
</div>
|
|
<div class="col-12 col-sm-12 col-md-8">
|
|
<span>{{ formMain[field] ? formMain[field] : "-" }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
|
|
<div
|
|
class="row"
|
|
v-for="(field, index) in Object.keys(fieldLabels).slice(4, 7)"
|
|
:key="index"
|
|
>
|
|
<div class="col-12 col-sm-12 col-md-4">
|
|
<span class="text-grey-6 text-weight-medium">{{
|
|
fieldLabels[field as keyof typeof fieldLabels]
|
|
}}</span>
|
|
</div>
|
|
<div class="col-12 col-sm-12 col-md-8">
|
|
<span>{{ formMain[field] ? formMain[field] : "-" }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
|
|
<q-card flat bordered class="q-mt-md" style="border: 1px solid #d6dee1">
|
|
<div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
|
|
ข้อมูลโครงการ
|
|
<!-- <q-btn
|
|
flat
|
|
class="btn-fixed-width"
|
|
color="teal"
|
|
label="เลือกโครงการ"
|
|
icon="add"
|
|
@click="modalDialogProject = true"
|
|
/> -->
|
|
</div>
|
|
<div class="col-12"><q-separator /></div>
|
|
<div class="row q-col-gutter-md q-pa-md">
|
|
<div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
|
|
<div
|
|
class="row"
|
|
v-for="(field, index) in Object.keys(fieldLabelsProject).slice(
|
|
0,
|
|
5
|
|
)"
|
|
:key="index"
|
|
>
|
|
<div class="col-12 col-sm-12 col-md-4">
|
|
<span class="text-grey-6 text-weight-medium">{{
|
|
fieldLabelsProject[field as keyof typeof fieldLabelsProject]
|
|
}}</span>
|
|
</div>
|
|
<div class="col-12 col-sm-12 col-md-8">
|
|
<span v-if="index == 1">{{
|
|
formMainProject[field] ? formMainProject[field] + 543 : "-"
|
|
}}</span>
|
|
<span v-else-if="index == 2 || index == 3">{{
|
|
formMainProject[field]
|
|
? date2Thai(formMainProject[field])
|
|
: "-"
|
|
}}</span>
|
|
<span v-else>{{
|
|
formMainProject[field] ? formMainProject[field] : "-"
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
|
|
<div
|
|
class="row"
|
|
v-for="(field, index) in Object.keys(fieldLabelsProject).slice(
|
|
5,
|
|
10
|
|
)"
|
|
:key="index"
|
|
>
|
|
<div class="col-12 col-sm-12 col-md-4">
|
|
<span class="text-grey-6 text-weight-medium">{{
|
|
fieldLabelsProject[field as keyof typeof fieldLabelsProject]
|
|
}}</span>
|
|
</div>
|
|
<div class="col-12 col-sm-12 col-md-8">
|
|
<span>{{
|
|
formMainProject[field] ? formMainProject[field] : "-"
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
|
|
<div class="row q-col-gutter-sm q-mt-md">
|
|
<div class="col-3">
|
|
<q-input
|
|
readonly
|
|
label="เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ"
|
|
v-model="order"
|
|
dense
|
|
outlined
|
|
:class="getClass()"
|
|
hide-bottom-space
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง/เลขที่หนังสืออนุมัติ'}`,]"
|
|
/>
|
|
</div>
|
|
<div class="col-3">
|
|
<datepicker
|
|
readonly
|
|
menu-class-name="modalfix"
|
|
v-model="dateOrder"
|
|
:locale="'th'"
|
|
autoApply
|
|
borderless
|
|
:enableTimePicker="false"
|
|
week-start="0"
|
|
>
|
|
<template #year="{ year }">
|
|
{{ year + 543 }}
|
|
</template>
|
|
<template #year-overlay-value="{ value }">
|
|
{{ parseInt(value + 543) }}
|
|
</template>
|
|
<template #trigger>
|
|
<q-input
|
|
readonly
|
|
outlined
|
|
dense
|
|
:class="getClass()"
|
|
hide-bottom-space
|
|
:model-value="dateOrder != null ? date2Thai(dateOrder) : null"
|
|
:rules="[(val:string) => !!val || `${'กรุณากรอกคำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`,]"
|
|
label="คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่"
|
|
>
|
|
<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>
|
|
</q-card-section>
|
|
<!-- <q-separator />
|
|
<div class="text-right q-pa-sm">
|
|
<q-btn
|
|
dense
|
|
unelevated
|
|
label="บันทึก"
|
|
id="onSubmit"
|
|
type="submit"
|
|
color="public"
|
|
class="q-px-md"
|
|
>
|
|
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
|
</q-btn>
|
|
</div> -->
|
|
</q-form>
|
|
</q-card>
|
|
|
|
<DialogGov v-model:modal="modalDialogGov" :up-date="upDate" />
|
|
<DialogProject v-model:modal="modalDialogProject" :up-date="upDateProject" />
|
|
</template>
|