รายการประวัติฝึกอบรม/ดูงานลูกจ้าง
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
ad593b4551
commit
34cb5f6c8e
4 changed files with 393 additions and 444 deletions
|
|
@ -87,11 +87,13 @@ function fetchData() {
|
|||
formMainProject.trainingStart = data.dateStart ? data.dateStart : null;
|
||||
formMainProject.trainingEnd = data.dateEnd ? data.dateEnd : null;
|
||||
formMainProject.totalTraining = data.totalDate ? data.totalDate : null;
|
||||
formMainProject.location = data.addressAcademic ? data.addressAcademic : null;
|
||||
formMainProject.location = data.addressAcademic
|
||||
? data.addressAcademic
|
||||
: null;
|
||||
formMainProject.topic = data.topicAcademic ? data.topicAcademic : null;
|
||||
// formMainProject.studyStart = data.dateStudyStart;
|
||||
// formMainProject.studyEnd = data.dateStudyEnd;
|
||||
formMainProject.organizingTraining = data.org? data.org : null;
|
||||
formMainProject.organizingTraining = data.org ? data.org : null;
|
||||
|
||||
dateOrder.value = data.dateOrder;
|
||||
order.value = data.order;
|
||||
|
|
@ -133,68 +135,76 @@ onMounted(() => {
|
|||
ข้อมูลข้าราชการฯ
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="row q-col-gutter-md q-pa-md">
|
||||
<div class="row col-6">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
เลขประจําตัวประชาชน
|
||||
</div>
|
||||
<div class="row q-pa-md q-col-gutter-md">
|
||||
<div class="col-6">
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
เลขประจําตัวประชาชน
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMain.citizenId ?? "-" }}
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMain.citizenId ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
ชื่อ - นามสกุล
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMain.name ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
ตําแหน่ง
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMain.position ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
ประเภทตําแหน่ง
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMain.type ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-6">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
ระดับตําแหน่ง
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
ระดับตําแหน่ง
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMain.level ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-6">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
ชื่อ - นามสกุล
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMain.level ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
ตําแหน่งทางการบริหาร
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMain.name ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-6">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
ตําแหน่งทางการบริหาร
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMain.positionSide ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
หน่วยงานที่สังกัด
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMain.positionSide ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-6">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
ตําแหน่ง
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMain.position ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-6">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
หน่วยงานที่สังกัด
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMain.oc ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-6">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
ประเภทตําแหน่ง
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMain.type ?? "-" }}
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMain.oc ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -206,85 +216,93 @@ onMounted(() => {
|
|||
ข้อมูลโครงการ
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="row q-col-gutter-md q-pa-md">
|
||||
<div class="row col-6">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
ชื่อโครงการ/หลักสูตรการฝึกอบรม
|
||||
</div>
|
||||
<div class="row q-pa-md q-col-gutter-md">
|
||||
<div class="col-6">
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
ชื่อโครงการ/หลักสูตรการฝึกอบรม
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMainProject.project ?? "-" }}
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMainProject.project ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
ปีงบประมาณที่เข้ารับการฝึกอบรม/ศึกษาดูงาน
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ Number(formMainProject.year) + 543 ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
หัวข้อการไปฝึกอบรม/ศึกษาดูงาน
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMainProject.topic ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
สถานที่ไปฝึกอบรม/ศึกษาดูงาน
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMainProject.location ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-6">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
วันเริ่มต้นการฝึกอบรม/ศึกษาดูงาน
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
วันเริ่มต้นการฝึกอบรม/ศึกษาดูงาน
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{
|
||||
formMainProject.trainingStart
|
||||
? date2Thai(formMainProject.trainingStart)
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-6">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
ปีงบประมาณที่เข้ารับการฝึกอบรม/ศึกษาดูงาน
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{
|
||||
formMainProject.trainingStart
|
||||
? date2Thai(formMainProject.trainingStart)
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
วันสิ้นสุดการฝึกอบรม/ศึกษาดูงาน
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMainProject.year ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-6">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
วันสิ้นสุดการฝึกอบรม/ศึกษาดูงาน
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{
|
||||
formMainProject.trainingEnd
|
||||
? date2Thai(formMainProject?.trainingEnd)
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
รวมระยะเวลาในการฝึกอบรม/ศึกษาดูงาน
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{
|
||||
formMainProject.trainingEnd
|
||||
? date2Thai(formMainProject?.trainingEnd)
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-6">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
หัวข้อการไปฝึกอบรม/ศึกษาดูงาน
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMainProject.totalTraining ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
หน่วยงานที่รับผิดชอบ
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMainProject.topic ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-6">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
รวมระยะเวลาในการฝึกอบรม/ศึกษาดูงาน
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMainProject.totalTraining ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-6">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
สถานที่ไปฝึกอบรม/ศึกษาดูงาน
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMainProject.location ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-6">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
หน่วยงานที่รับผิดชอบ
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMainProject.organizingTraining ?? "-" }}
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMainProject.organizingTraining ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,33 +1,27 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** importType*/
|
||||
import type {
|
||||
FormAddHistoryEmployee,
|
||||
FormAddHistoryProject,
|
||||
} from "@/modules/15_development/interface/request/Main";
|
||||
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
|
||||
|
||||
/** importStore*/
|
||||
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";
|
||||
|
||||
/** use*/
|
||||
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 { showLoader, hideLoader, messageError, date2Thai } = mixin;
|
||||
|
||||
const id = ref<string>(route.params.id as string);
|
||||
const dateOrder = ref<Date | null>(null);
|
||||
const order = ref<string>("");
|
||||
|
||||
|
|
@ -54,8 +48,8 @@ const formMainProject = reactive<FormAddHistoryProject>({
|
|||
id: "",
|
||||
project: "", //ชื่อโครงการ/หลักสูตรการฝึกอบรม
|
||||
year: "", //ปีงบประมาณที่เข้ารับการฝึกอบรม
|
||||
trainingStart: "", //วันเริ่มต้นการฝึกอบรม
|
||||
trainingEnd: "", //วันสิ้นสุดการฝึกอบรม
|
||||
trainingStart: null, //วันเริ่มต้นการฝึกอบรม
|
||||
trainingEnd: null, //วันสิ้นสุดการฝึกอบรม
|
||||
totalTraining: "", //รวมระยะเวลาในการฝึกอบรม
|
||||
location: "", //สถานที่ไปศึกษาดูงาน
|
||||
topic: "", //หัวข้อการไปศึกษาดูงาน
|
||||
|
|
@ -64,90 +58,11 @@ const formMainProject = reactive<FormAddHistoryProject>({
|
|||
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.developmentHistoryListByid("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(() => {
|
||||
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() {
|
||||
function fetchDataDetail() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.developmentHistoryListByid("employee", id.value))
|
||||
|
|
@ -170,17 +85,21 @@ function getDataEdit() {
|
|||
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;
|
||||
formMainProject.id = data.developmentId ? data.developmentId : null;
|
||||
formMainProject.project = data.projectName ? data.projectName : null;
|
||||
formMainProject.year = data.year ? data.year : null;
|
||||
formMainProject.trainingStart = data.dateStart ? data.dateStart : null;
|
||||
formMainProject.trainingEnd = data.dateEnd ? data.dateEnd : null;
|
||||
formMainProject.totalTraining = data.totalDate ? data.totalDate : null;
|
||||
formMainProject.location = data.addressAcademic
|
||||
? data.addressAcademic
|
||||
: null;
|
||||
formMainProject.topic = data.topicAcademic ? data.topicAcademic : null;
|
||||
formMainProject.studyStart = data.dateStudyStart
|
||||
? data.dateStudyStart
|
||||
: null;
|
||||
formMainProject.studyEnd = data.dateStudyEnd ? data.dateStudyEnd : null;
|
||||
formMainProject.organizingTraining = data.org ? data.org : null;
|
||||
|
||||
dateOrder.value = data.dateOrder;
|
||||
order.value = data.order;
|
||||
|
|
@ -195,7 +114,7 @@ function getDataEdit() {
|
|||
|
||||
onMounted(() => {
|
||||
if (id.value) {
|
||||
getDataEdit();
|
||||
fetchDataDetail();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -212,206 +131,234 @@ onMounted(() => {
|
|||
class="q-mr-sm"
|
||||
@click="router.go(-1)"
|
||||
/>
|
||||
<span>{{
|
||||
id
|
||||
? `แก้ไขประวัติฝึกอบรม/ดูงานลูกจ้าง`
|
||||
: `เพิ่มประวัติฝึกอบรม/ดูงานลูกจ้าง`
|
||||
}}</span>
|
||||
<span> ประวัติฝึกอบรม/ดูงานลูกจ้าง </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>
|
||||
<q-card-section>
|
||||
<!-- Card ข้อมูลลูกจ้าง -->
|
||||
<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">
|
||||
ข้อมูลลูกจ้าง
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="row q-pa-md q-col-gutter-md">
|
||||
<div class="col-6">
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
เลขประจําตัวประชาชน
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-8">
|
||||
<span>{{ formMain[field] ? formMain[field] : "-" }}</span>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMain.citizenId ?? "-" }}
|
||||
</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 class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
ชื่อ - นามสกุล
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-8">
|
||||
<span>{{ formMain[field] ? formMain[field] : "-" }}</span>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMain.name ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
ตำแหน่ง
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMain.position ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
กลุ่มงาน
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMain.type ?? "-" }}
|
||||
</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 class="col-6">
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
ระดับชั้นงาน
|
||||
</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 class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMain.level ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
หน่วยงานที่สังกัด
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMain.oc ?? "-" }}
|
||||
</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>
|
||||
</q-card>
|
||||
|
||||
<DialogGov v-model:modal="modalDialogGov" :up-date="upDate" />
|
||||
<DialogProject v-model:modal="modalDialogProject" :up-date="upDateProject" />
|
||||
<!-- 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">
|
||||
ข้อมูลโครงการ
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="row q-pa-md q-col-gutter-md">
|
||||
<div class="col-6">
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
ชื่อโครงการ/หลักสูตรการฝึกอบรม
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMainProject.project ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
ปีงบประมาณที่เข้ารับการฝึกอบรม/ศึกษาดูงาน
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ Number(formMainProject.year) + 543 ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
หัวข้อการไปฝึกอบรม/ศึกษาดูงาน
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMainProject.topic ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
สถานที่ไปฝึกอบรม/ศึกษาดูงาน
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMainProject.location ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
วันเริ่มต้นการฝึกอบรม/ศึกษาดูงาน
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{
|
||||
formMainProject.trainingStart
|
||||
? date2Thai(formMainProject.trainingStart)
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
วันสิ้นสุดการฝึกอบรม/ศึกษาดูงาน
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{
|
||||
formMainProject.trainingEnd
|
||||
? date2Thai(formMainProject?.trainingEnd)
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
รวมระยะเวลาในการฝึกอบรม/ศึกษาดูงาน
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMainProject.totalTraining ?? "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12">
|
||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||
หน่วยงานที่รับผิดชอบ
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 col-md-7">
|
||||
{{ formMainProject.organizingTraining ?? "-" }}
|
||||
</div>
|
||||
</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-card>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -6,11 +6,6 @@ import config from "@/app.config";
|
|||
import genReportXLSX from "@/plugins/genreportxlsx";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
import type {
|
||||
DataOption,
|
||||
FormFilter,
|
||||
} from "@/modules/15_development/interface/index/Main";
|
||||
|
||||
/** importStore*/
|
||||
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
|
@ -27,7 +22,7 @@ const pagination = ref({
|
|||
});
|
||||
const maxPage = ref<number>(1);
|
||||
const formFilter = reactive({
|
||||
root: "",
|
||||
root: null,
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
keyword: "",
|
||||
|
|
@ -35,7 +30,6 @@ const formFilter = reactive({
|
|||
});
|
||||
|
||||
const rows = ref<any>([]);
|
||||
const agency = ref<string>("");
|
||||
const agencyOp = ref<[]>([]);
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
|
|
@ -111,9 +105,10 @@ function fetchListOrg() {
|
|||
http
|
||||
.get(config.API.developmentHistoryListOrg("employee", formFilter.year))
|
||||
.then((res) => {
|
||||
formFilter.root = "";
|
||||
formFilter.root = null;
|
||||
rows.value = [];
|
||||
agencyOp.value = res.data.result;
|
||||
getData();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
@ -148,14 +143,6 @@ function onEdit(id: string) {
|
|||
}
|
||||
|
||||
function getData() {
|
||||
let queryParams: any = {
|
||||
page: formFilter.page,
|
||||
pageSize: formFilter.pageSize,
|
||||
keyword: formFilter.keyword,
|
||||
year: formFilter.year,
|
||||
root: formFilter.root,
|
||||
};
|
||||
|
||||
showLoader();
|
||||
http
|
||||
.post(config.API.developmentHistoryList("employee"), formFilter)
|
||||
|
|
@ -184,10 +171,6 @@ function getData() {
|
|||
});
|
||||
}
|
||||
|
||||
function yearAll() {
|
||||
formFilter.year = 0;
|
||||
// getData();
|
||||
}
|
||||
onMounted(() => {
|
||||
fetchListOrg();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -116,6 +116,7 @@ function fetchListOrg() {
|
|||
.get(config.API.developmentHistoryListOrg("officer", formFilter.year))
|
||||
.then((res) => {
|
||||
formFilter.root = null;
|
||||
rows.value = [];
|
||||
agencyOp.value = res.data.result;
|
||||
getData();
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue