ทะเบียนประวัติ: ผูกAPI การฝึกอบรม(Training)
This commit is contained in:
oat_dev
parent
1d644393fb
commit
9f19840c03
3 changed files with 266 additions and 80 deletions
|
|
@ -225,6 +225,7 @@ function closeHistoryDialog() {
|
|||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
v-model:pagination="pagination"
|
||||
:rows-per-page-options="[20, 50, 100]"
|
||||
class="custom-header-table"
|
||||
:visible-columns="visibleColumns"
|
||||
|
|
|
|||
|
|
@ -1,16 +1,29 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import { ref, reactive, watch, onMounted } from "vue";
|
||||
import moment from "moment";
|
||||
import dialogHeader from "@/components/DialogHeader.vue";
|
||||
import type { QTableProps } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useRoute } from "vue-router";
|
||||
import { QForm, useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const $q = useQuasar();
|
||||
const { dialogConfirm, date2Thai } = mixin;
|
||||
const {
|
||||
dialogRemove,
|
||||
dialogConfirm,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
messageError,
|
||||
success,
|
||||
date2Thai,
|
||||
} = mixin;
|
||||
|
||||
const addDataDialog = ref<boolean>(false);
|
||||
const route = useRoute();
|
||||
const id = ref<string>(route.params.id.toString());
|
||||
const dialog = ref<boolean>(false);
|
||||
const mode = ref<string>("table");
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
|
|
@ -125,27 +138,10 @@ const columns = ref<QTableProps["columns"]>([
|
|||
},
|
||||
]);
|
||||
const isDate = ref<string>("false");
|
||||
const educationOption = ["ใช่", "ไม่ใช่"];
|
||||
const dialogStatus = ref<string>("create");
|
||||
const historyDialog = ref<boolean>(false);
|
||||
const educationData = reactive({
|
||||
level: "",
|
||||
institute: "",
|
||||
startYear: new Date().getFullYear(),
|
||||
finishYear: new Date().getFullYear(),
|
||||
graduateDate: new Date(),
|
||||
startDate: new Date(),
|
||||
endDate: new Date(),
|
||||
isEducation: "",
|
||||
degree: "",
|
||||
field: "",
|
||||
fundName: "",
|
||||
gpa: null,
|
||||
country: "",
|
||||
other: "",
|
||||
duration: "",
|
||||
durationYear: "",
|
||||
note: "",
|
||||
});
|
||||
const editId = ref<string>("");
|
||||
|
||||
const trainData = reactive({
|
||||
name: "",
|
||||
topic: "",
|
||||
|
|
@ -178,7 +174,7 @@ const row = [
|
|||
topic: "ชื่อหัวข้อ",
|
||||
yearly: "2567",
|
||||
place: "สถานที่",
|
||||
duration: "2567",
|
||||
duration: "3 ปี",
|
||||
department: "แผนกสาขา",
|
||||
numberOrder: "1244",
|
||||
dateOrder: new Date(),
|
||||
|
|
@ -247,17 +243,19 @@ const row = [
|
|||
},
|
||||
];
|
||||
|
||||
const rows = ref<any>([]);
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"name",
|
||||
"topic",
|
||||
"yearly",
|
||||
"place",
|
||||
"duration",
|
||||
"department",
|
||||
"numberOrder",
|
||||
"dateOrder",
|
||||
"startDate",
|
||||
"endDate",
|
||||
"name", // ชื่อโครงงาน
|
||||
"topic", // หัวข้อ
|
||||
"yearly", // ปีที่อบรม
|
||||
"place", // สถานที่
|
||||
"duration", // รวมระยะวเลา
|
||||
"department", // หน่วยงานที่รับผิดชอบ
|
||||
"numberOrder", // เลขที่คำสั่ง
|
||||
"dateOrder", // คำสั่งลงวันที่
|
||||
"startDate", // วันเริ่มต้น
|
||||
"endDate", // วันสิ้นสุด
|
||||
]);
|
||||
|
||||
function validateForm() {
|
||||
|
|
@ -268,6 +266,7 @@ async function onSubmit() {
|
|||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
dialogStatus.value === "create" ? addData() : editData(editId.value);
|
||||
closeDialog();
|
||||
},
|
||||
"ยืนยันการบันทึกข้อมูล",
|
||||
|
|
@ -275,8 +274,94 @@ async function onSubmit() {
|
|||
);
|
||||
}
|
||||
|
||||
function clearForm() {
|
||||
isDate.value = "false";
|
||||
trainData.name = "";
|
||||
trainData.topic = "";
|
||||
trainData.yearly = new Date().getFullYear();
|
||||
trainData.place = "";
|
||||
trainData.duration = "";
|
||||
trainData.department = "";
|
||||
trainData.numberOrder = "";
|
||||
trainData.dateOrder = new Date();
|
||||
trainData.startDate = new Date();
|
||||
trainData.endDate = new Date();
|
||||
}
|
||||
|
||||
async function addData() {
|
||||
await http
|
||||
.post(config.API.profileNewTraining, {
|
||||
profileId: id.value,
|
||||
name: trainData.name,
|
||||
topic: trainData.topic ? trainData.topic : "",
|
||||
yearly: trainData.yearly,
|
||||
place: trainData.place ? trainData.place : "",
|
||||
duration: trainData.duration ? trainData.duration : "",
|
||||
department: trainData.department ? trainData.department : "",
|
||||
numberOrder: trainData.numberOrder ? trainData.numberOrder : "",
|
||||
dateOrder: trainData.dateOrder,
|
||||
startDate: trainData.startDate,
|
||||
endDate: trainData.endDate,
|
||||
isDate: isDate.value === "true" ? true : false,
|
||||
isActive: true,
|
||||
})
|
||||
.then(() => {
|
||||
fetchData(id.value);
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
async function editData(idData: string) {
|
||||
await http
|
||||
.patch(config.API.profileNewTrainingByTrainingId(idData), {
|
||||
profileId: id.value,
|
||||
name: trainData.name,
|
||||
topic: trainData.topic ? trainData.topic : "",
|
||||
yearly: trainData.yearly,
|
||||
place: trainData.place ? trainData.place : "",
|
||||
duration: trainData.duration ? trainData.duration : "",
|
||||
department: trainData.department ? trainData.department : "",
|
||||
numberOrder: trainData.numberOrder ? trainData.numberOrder : "",
|
||||
dateOrder: trainData.dateOrder,
|
||||
startDate: trainData.startDate,
|
||||
endDate: trainData.endDate,
|
||||
isDate: isDate.value === "true" ? true : false,
|
||||
isActive: true,
|
||||
})
|
||||
.then(() => {
|
||||
fetchData(id.value);
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
async function deleteData(idData: string) {
|
||||
await http
|
||||
.delete(config.API.profileNewTrainingByTrainingId(idData))
|
||||
.then(() => {
|
||||
fetchData(id.value);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
function closeDialog() {
|
||||
addDataDialog.value = false;
|
||||
clearForm();
|
||||
dialog.value = false;
|
||||
}
|
||||
function closeHistoryDialog() {
|
||||
historyDialog.value = false;
|
||||
|
|
@ -285,17 +370,83 @@ function closeHistoryDialog() {
|
|||
watch(
|
||||
() => isDate.value,
|
||||
() => {
|
||||
if (isDate.value === "true") {
|
||||
trainData.startDate = new Date(`${trainData.startYear}`);
|
||||
trainData.endDate = new Date(`${trainData.finishYear}`);
|
||||
if (isDate.value === "false") {
|
||||
console.log(trainData.startDate);
|
||||
trainData.startYear = +trainData.startDate.toString().slice(11, 15);
|
||||
trainData.finishYear = +trainData.endDate.toString().slice(11, 15);
|
||||
trainData.startDate = new Date(trainData.startYear + "-01-01");
|
||||
trainData.endDate = new Date(trainData.finishYear + "-01-01");
|
||||
} else {
|
||||
trainData.startYear = parseInt(
|
||||
moment(trainData.startDate).format("YYYY")
|
||||
);
|
||||
trainData.finishYear = parseInt(moment(trainData.endDate).format("YYYY"));
|
||||
trainData.startDate = new Date(trainData.startYear + "-01-01");
|
||||
trainData.endDate = new Date(trainData.finishYear + "-01-01");
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => trainData.startYear,
|
||||
() => {
|
||||
if (isDate.value === "false") {
|
||||
trainData.startDate = new Date(trainData.startYear + "-01-01");
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => trainData.finishYear,
|
||||
() => {
|
||||
if (isDate.value === "false") {
|
||||
trainData.endDate = new Date(trainData.finishYear + "-01-01");
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => trainData.startDate,
|
||||
() => {
|
||||
if (isDate.value === "true") {
|
||||
trainData.startYear = +trainData.startDate.toString().slice(11, 15);
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => trainData.endDate,
|
||||
() => {
|
||||
if (isDate.value === "true") {
|
||||
trainData.finishYear = +trainData.endDate.toString().slice(11, 15);
|
||||
}
|
||||
}
|
||||
);
|
||||
// async function isDateCheck() {
|
||||
// if (isDate.value === "false") {
|
||||
// trainData.startYear = +trainData.startDate.toString().slice(11, 15);
|
||||
// trainData.finishYear = +trainData.endDate.toString().slice(11, 15);
|
||||
// trainData.startDate = new Date(trainData.startYear + "-01-01");
|
||||
// trainData.endDate = new Date(trainData.finishYear + "-01-01");
|
||||
// } else {
|
||||
// trainData.startDate = new Date(trainData.startYear + "-01-01");
|
||||
// trainData.endDate = new Date(trainData.finishYear + "-01-01");
|
||||
// }
|
||||
// }
|
||||
|
||||
async function fetchData(id: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.profileNewTrainingByProfileId(id))
|
||||
.then(async (res) => {
|
||||
rows.value = res.data.result;
|
||||
console.log(rows.value);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchData(id.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -306,7 +457,13 @@ watch(
|
|||
color="primary"
|
||||
icon="add"
|
||||
size="16px"
|
||||
@click="addDataDialog = true"
|
||||
@click="
|
||||
() => {
|
||||
dialogStatus = 'create';
|
||||
clearForm;
|
||||
dialog = true;
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
|
|
@ -376,13 +533,14 @@ watch(
|
|||
:grid="mode === 'card'"
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="row"
|
||||
:rows="rows"
|
||||
row-key="name"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
:rows-per-page-options="[20, 50, 100]"
|
||||
v-model:pagination="pagination"
|
||||
class="custom-header-table"
|
||||
:visible-columns="visibleColumns"
|
||||
>
|
||||
|
|
@ -399,19 +557,39 @@ watch(
|
|||
<q-td
|
||||
v-for="col in props.cols"
|
||||
:key="col.id"
|
||||
@click="addDataDialog = true"
|
||||
@click="
|
||||
() => {
|
||||
dialogStatus = 'edit';
|
||||
editId = props.row.id;
|
||||
isDate = props.row.isDate ? 'true' : 'false';
|
||||
trainData.name = props.row.name;
|
||||
trainData.topic = props.row.topic;
|
||||
trainData.yearly = props.row.yearly;
|
||||
trainData.place = props.row.place;
|
||||
trainData.duration = props.row.duration;
|
||||
trainData.department = props.row.department;
|
||||
trainData.numberOrder = props.row.numberOrder;
|
||||
trainData.dateOrder = props.row.dateOrder;
|
||||
trainData.startDate = props.row.startDate;
|
||||
trainData.endDate = props.row.endDate;
|
||||
trainData.startYear = +props.row.startDate.slice(0, 4);
|
||||
trainData.finishYear = +props.row.endDate.slice(0, 4);
|
||||
dialog = true;
|
||||
}
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-if="
|
||||
col.name === 'startDate' ||
|
||||
col.name === 'endDate' ||
|
||||
col.name === 'dateOrder'
|
||||
"
|
||||
>
|
||||
{{ col.value ? date2Thai(col.value) : "-" }}
|
||||
<div v-if="col.name === 'startDate' || col.name === 'endDate'">
|
||||
<div v-if="props.row.isDate">{{ date2Thai(col.value) }}</div>
|
||||
<div v-else>
|
||||
{{ +col.value.slice(0, 4) + 543 }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="col.name === 'dateOrder'">
|
||||
{{ date2Thai(col.value) }}
|
||||
</div>
|
||||
<div v-else-if="col.name === 'yearly'">{{ col.value + 543 }}</div>
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
|
|
@ -426,6 +604,21 @@ watch(
|
|||
>
|
||||
<q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
color="red"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
icon="mdi-delete"
|
||||
clickable
|
||||
@click.stop="
|
||||
dialogRemove($q, async () => await deleteData(props.row.id))
|
||||
"
|
||||
v-close-popup
|
||||
>
|
||||
<q-tooltip>ลบข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
|
@ -440,7 +633,7 @@ watch(
|
|||
round
|
||||
color="primary"
|
||||
icon="edit"
|
||||
@click="addDataDialog = true"
|
||||
@click="dialog = true"
|
||||
>
|
||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
|
|
@ -466,16 +659,7 @@ watch(
|
|||
<div>{{ col.label }}</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div
|
||||
v-if="
|
||||
col.name === 'startDate' ||
|
||||
col.name === 'endDate' ||
|
||||
col.name === 'dateOrder'
|
||||
"
|
||||
>
|
||||
{{ col.value ? date2Thai(col.value) : "-" }}
|
||||
</div>
|
||||
<div v-else>{{ col.value }}</div>
|
||||
<div>{{ col.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -485,11 +669,14 @@ watch(
|
|||
</template>
|
||||
</d-table>
|
||||
|
||||
<q-dialog v-model="addDataDialog" class="dialog" persistent>
|
||||
<q-dialog v-model="dialog" class="dialog" persistent>
|
||||
<q-card style="min-width: 40%" class="bg-white">
|
||||
<q-form @submit.prevent greedy @validation-success="validateForm">
|
||||
<q-card-section class="flex justify-between" style="padding: 0">
|
||||
<dialog-header tittle="เพิ่มประวัติการศึกษา" :close="closeDialog" />
|
||||
<dialog-header
|
||||
:tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
|
||||
:close="closeDialog"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-separator color="grey-4" />
|
||||
<div class="col">
|
||||
|
|
@ -568,7 +755,7 @@ watch(
|
|||
!!val ||
|
||||
`${'กรุณาเลือกปีที่เริ่มต้นการฝึกอบรม/ดูงาน'}`,
|
||||
]"
|
||||
:label="`${'ปี ที่เริ่มต้นการฝึกอบรม/ดูงาน'}`"
|
||||
:label="`${'ปีที่เริ่มต้นการฝึกอบรม/ดูงาน'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -607,7 +794,7 @@ watch(
|
|||
(val) =>
|
||||
!!val || `${'กรุณาเลือกปีที่จบการฝึกอบรม/ดูงาน'}`,
|
||||
]"
|
||||
:label="`${'ปี ที่จบการฝึกอบรม/ดูงาน'}`"
|
||||
:label="`${'ปีที่จบการฝึกอบรม/ดูงาน'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -769,7 +956,6 @@ watch(
|
|||
label="หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน"
|
||||
bg-color="white"
|
||||
dense
|
||||
mask="#.##"
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
|
@ -902,16 +1088,7 @@ watch(
|
|||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td v-for="col in props.cols" :key="col.id">
|
||||
<div
|
||||
v-if="
|
||||
col.name === 'startDate' ||
|
||||
col.name === 'endDate' ||
|
||||
col.name === 'dateOrder'
|
||||
"
|
||||
>
|
||||
{{ col.value ? date2Thai(col.value) : "-" }}
|
||||
</div>
|
||||
<div v-else>
|
||||
<div>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue