Merge branch 'develop' into devTee
This commit is contained in:
setthawutttty
commit
ee22aa6f6f
19 changed files with 757 additions and 318 deletions
|
|
@ -4,11 +4,27 @@ const registryNew = `${env.API_URI}/org/profile/`;
|
|||
|
||||
export default {
|
||||
registryNew,
|
||||
// เครื่องราชฯ
|
||||
profileNewInsign: `${registryNew}insignia`,
|
||||
profileNewInsignByProfileId: (profileId: string) =>
|
||||
`${registryNew}insignia/${profileId}`,
|
||||
profileNewInsignByInsignId: (insignId: string) =>
|
||||
`${registryNew}insignia/${insignId}`,
|
||||
profileNewInsignHisByInsignId: (insignId: string) =>
|
||||
`${registryNew}insignia/history/${insignId}`,
|
||||
profileNewInsignById: (dataId: string) => `${registryNew}insignia/${dataId}`,
|
||||
profileNewInsignHisById: (dataId: string) =>
|
||||
`${registryNew}insignia/history/${dataId}`,
|
||||
|
||||
// ประกาศเกียรติคุณ
|
||||
profileNewHonor: `${registryNew}honor`,
|
||||
profileNewHonorByProfileId: (profileId: string) =>
|
||||
`${registryNew}honor/${profileId}`,
|
||||
profileNewHonorById: (dataId: string) => `${registryNew}honor/${dataId}`,
|
||||
profileNewHonorHisById: (dataId: string) => `${registryNew}honor/${dataId}`,
|
||||
|
||||
// การฝึกอบรม
|
||||
profileNewTraining: `${registryNew}training`,
|
||||
profileNewTrainingByProfileId: (profileId: string) =>
|
||||
`${registryNew}training/${profileId}`,
|
||||
profileNewTrainingByTrainingId: (trainingId: string) =>
|
||||
`${registryNew}training/${trainingId}`,
|
||||
profileNewTrainingHisByTrainingId: (trainingId: string) =>
|
||||
`${registryNew}training/history/${trainingId}`,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -251,6 +251,7 @@ async function deleteData(idData: string) {
|
|||
.delete(config.API.insigniaNewIdOrg(idData))
|
||||
.then(() => {
|
||||
fetchData(id.value);
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
|
|||
|
|
@ -163,6 +163,7 @@ async function deleteData(id: string) {
|
|||
.delete(config.API.insigniaTypeNewIdOrg(id))
|
||||
.then(() => {
|
||||
fetchData();
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
|
|||
|
|
@ -126,6 +126,7 @@ async function deleteData(id: string) {
|
|||
.delete(config.API.orgPrefixId(id))
|
||||
.then(() => {
|
||||
fetchData();
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
|
|||
|
|
@ -130,6 +130,7 @@ async function deleteData(id: string) {
|
|||
.delete(config.API.orgRankId(id))
|
||||
.then(() => {
|
||||
fetchData();
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
|
|||
|
|
@ -130,6 +130,7 @@ async function deleteData(id: string) {
|
|||
.delete(config.API.orgBloodGroupId(id))
|
||||
.then(() => {
|
||||
fetchData();
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
|
|||
|
|
@ -130,6 +130,7 @@ async function deleteData(id: string) {
|
|||
.delete(config.API.orgGenderId(id))
|
||||
.then(() => {
|
||||
fetchData();
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
|
|||
|
|
@ -130,6 +130,7 @@ async function deleteData(id: string) {
|
|||
.delete(config.API.orgReligionId(id))
|
||||
.then(() => {
|
||||
fetchData();
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
|
|||
|
|
@ -158,6 +158,7 @@ async function deleteData(id: string) {
|
|||
.delete(config.API.orgRelationshipId(id))
|
||||
.then(() => {
|
||||
fetchData();
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
|
|||
|
|
@ -142,6 +142,7 @@ async function deleteData(id: string) {
|
|||
.delete(config.API.orgEducationLevelId(id))
|
||||
.then(() => {
|
||||
fetchData();
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
|
|||
|
|
@ -146,6 +146,7 @@ async function deleteData(id: string) {
|
|||
.delete(config.API.orgPosTypeId(id))
|
||||
.then(() => {
|
||||
fetchData();
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
|
|||
|
|
@ -203,6 +203,7 @@ async function deleteData(id: string) {
|
|||
.delete(config.API.orgPosLevelId(id))
|
||||
.then(() => {
|
||||
fetchData();
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,28 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch, useAttrs } from "vue";
|
||||
import { onMounted, ref, watch, reactive } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
import type { QTableProps } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import type { QTableProps } from "quasar";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import HistoryTable from "@/components/TableHistory.vue";
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import type {
|
||||
RequestItemsObject,
|
||||
Columns,
|
||||
DataProps,
|
||||
} from "@/modules/04_registryNew/interface/request/Insignia";
|
||||
|
||||
import type {
|
||||
DataOption,
|
||||
DataOptionInsignia,
|
||||
InsigniaOps,
|
||||
Pagination,
|
||||
} from "@/modules/04_registryNew/interface/index/Main";
|
||||
import type {
|
||||
RequestItemsObject,
|
||||
Columns,
|
||||
DataProps,
|
||||
} from "@/modules/04_registryNew/interface/request/Insignia";
|
||||
|
||||
const $q = useQuasar();
|
||||
const attrs = ref<any>(useAttrs());
|
||||
const route = useRoute();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
date2Thai,
|
||||
|
|
@ -34,27 +34,51 @@ const {
|
|||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
const profileId = ref<string>(
|
||||
route.params.id ? route.params.id.toString() : ""
|
||||
);
|
||||
|
||||
const year = ref<number | null>(0);
|
||||
const receiveDate = ref<Date | string | null>();
|
||||
const insigniaId = ref<string>("");
|
||||
const insigniaType = ref<string>();
|
||||
const no = ref<string>();
|
||||
const issue = ref<string>();
|
||||
const volumeNo = ref<string>();
|
||||
const volume = ref<string>();
|
||||
const section = ref<string>();
|
||||
const page = ref<string>();
|
||||
const dateAnnounce = ref<Date | null | string>(null);
|
||||
const refCommandNo = ref<string>();
|
||||
const refCommandDate = ref<Date | null | string>();
|
||||
const note = ref<string>();
|
||||
const insigniaData = reactive<{
|
||||
id: string;
|
||||
isActive: boolean;
|
||||
year: number | null;
|
||||
receiveDate: Date | string | null;
|
||||
insigniaId: string;
|
||||
insigniaType: string;
|
||||
no: string;
|
||||
issue: string;
|
||||
volumeNo: string;
|
||||
volume: string;
|
||||
section: string;
|
||||
page: string;
|
||||
dateAnnounce: Date | null | string;
|
||||
refCommandNo: string;
|
||||
refCommandDate: Date | null | string;
|
||||
note: string;
|
||||
}>({
|
||||
id: "",
|
||||
isActive: true,
|
||||
year: 0,
|
||||
receiveDate: null,
|
||||
insigniaId: "",
|
||||
insigniaType: "",
|
||||
no: "",
|
||||
issue: "",
|
||||
volumeNo: "",
|
||||
volume: "",
|
||||
section: "",
|
||||
page: "",
|
||||
dateAnnounce: null,
|
||||
refCommandNo: "",
|
||||
refCommandDate: null,
|
||||
note: "",
|
||||
});
|
||||
|
||||
const editRow = ref<boolean>(false);
|
||||
const myForm = ref<any>();
|
||||
const edit = ref<boolean>(false);
|
||||
const isEdit = ref<boolean>(false);
|
||||
const modal = ref<boolean>(false);
|
||||
const modelView = ref<string>("table");
|
||||
const modeView = ref<string>("table");
|
||||
const filterSearch = ref("");
|
||||
const filterHistory = ref<string>("");
|
||||
const modalHistory = ref<boolean>(false);
|
||||
|
|
@ -68,90 +92,7 @@ const OpsFilter = ref<InsigniaOps>({
|
|||
insigniaOptions: [],
|
||||
});
|
||||
|
||||
// mock data
|
||||
const rows = ref<any>([
|
||||
{
|
||||
id: "08dbc95b-7d2d-4a33-8c2c-426845b1d14e",
|
||||
insignia: "จัตุรถาภรณ์ช้างเผือก",
|
||||
insigniaId: "08db721b-c7f9-40c5-85f7-7c2c6d0eceb9",
|
||||
insigniaType: "ชั้นต่ำกว่าสายสะพาย",
|
||||
year: 2025,
|
||||
no: "1",
|
||||
issue: "1",
|
||||
volumeNo: "1",
|
||||
volume: null,
|
||||
section: "1",
|
||||
page: "1",
|
||||
receiveDate: new Date("2023-10-10T00:00:00"),
|
||||
dateAnnounce: new Date("2023-10-10T00:00:00"),
|
||||
refCommandNo: "1",
|
||||
refCommandDate: null,
|
||||
createdFullName: "System Administrator",
|
||||
createdAt: new Date("2023-10-10T13:38:18.177967"),
|
||||
note: "1234dd",
|
||||
},
|
||||
{
|
||||
id: "08dbc95b-7d2d-4a33-8c2c-426845b1d14e",
|
||||
insignia: "จัตุรถาภรณ์ช้างเผือก",
|
||||
insigniaId: "91a7322d-29f7-4d14-8aab-d98db9251ddc",
|
||||
insigniaType: "ชั้นต่ำกว่าสายสะพาย",
|
||||
year: 2024,
|
||||
no: "",
|
||||
issue: "",
|
||||
volumeNo: "",
|
||||
volume: "",
|
||||
section: "",
|
||||
page: "",
|
||||
receiveDate: new Date("2024-02-07T00:00:00"),
|
||||
dateAnnounce: null,
|
||||
refCommandNo: null,
|
||||
refCommandDate: null,
|
||||
createdFullName: "User Key1",
|
||||
createdAt: new Date("2024-02-07T18:14:50.918701"),
|
||||
note: null,
|
||||
},
|
||||
{
|
||||
id: "08dbc95b-7d2d-4a33-8c2c-426845b1d14e",
|
||||
insignia: "จัตุรถาภรณ์มงกุฎไทย",
|
||||
insigniaId: "91a7322d-29f7-4d14-8aab-d98db9251ddc",
|
||||
insigniaType: "ชั้นต่ำกว่าสายสะพาย",
|
||||
year: 2016,
|
||||
no: "",
|
||||
issue: "",
|
||||
volumeNo: "",
|
||||
volume: "",
|
||||
section: "",
|
||||
page: "",
|
||||
receiveDate: new Date("2016-05-02T00:00:00"),
|
||||
dateAnnounce: null,
|
||||
refCommandNo: null,
|
||||
refCommandDate: null,
|
||||
createdFullName: "สาวิตรี ศรีสมัย",
|
||||
createdAt: new Date("2024-02-13T18:06:44.941056"),
|
||||
note: null,
|
||||
},
|
||||
{
|
||||
id: "08dbc95b-7d2d-4a33-8c2c-426845b1d14e",
|
||||
insignia: "ตริตาภรณ์ช้างเผือก",
|
||||
insigniaId: "08db721b-c7fd-4ec7-886a-f883ae333a8d",
|
||||
insigniaType: "ชั้นต่ำกว่าสายสะพาย",
|
||||
year: 2018,
|
||||
no: "",
|
||||
issue: "",
|
||||
volumeNo: "",
|
||||
volume: "",
|
||||
section: "",
|
||||
page: "",
|
||||
receiveDate: new Date("2024-02-13T00:00:00"),
|
||||
dateAnnounce: null,
|
||||
refCommandNo: "",
|
||||
refCommandDate: null,
|
||||
createdFullName: "สาวิตรี ศรีสมัย",
|
||||
createdAt: new Date("2024-02-13T18:08:49.301201"),
|
||||
note: "a",
|
||||
},
|
||||
]);
|
||||
|
||||
const rows = ref<any>([]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "year",
|
||||
|
|
@ -161,8 +102,6 @@ const columns = ref<QTableProps["columns"]>([
|
|||
field: "year",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "receiveDate",
|
||||
|
|
@ -180,7 +119,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
align: "left",
|
||||
label: "ชื่อเครื่องราชฯ",
|
||||
sortable: true,
|
||||
field: "insignia",
|
||||
field: "insigniaId",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
|
|
@ -308,7 +247,6 @@ const columns = ref<QTableProps["columns"]>([
|
|||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
|
||||
const columnsHistory = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "year",
|
||||
|
|
@ -476,7 +414,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
|
|||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
|
||||
const visibleColumns = ref<String[]>([
|
||||
"insignia",
|
||||
"insigniaType",
|
||||
|
|
@ -494,7 +431,6 @@ const visibleColumns = ref<String[]>([
|
|||
"note",
|
||||
"createdAt",
|
||||
]);
|
||||
|
||||
const visibleColumnsHistory = ref<String[]>([
|
||||
"insignia",
|
||||
"insigniaType",
|
||||
|
|
@ -513,19 +449,236 @@ const visibleColumnsHistory = ref<String[]>([
|
|||
"createdAt",
|
||||
]);
|
||||
|
||||
const initialPagination = ref<Pagination>({
|
||||
rowsPerPage: 0,
|
||||
const formFilter = reactive({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
keyword: "",
|
||||
});
|
||||
|
||||
const paginationLabel = (start: string, end: string, total: string) => {
|
||||
return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
const pagination = ref({
|
||||
page: formFilter.page,
|
||||
rowsPerPage: formFilter.pageSize,
|
||||
});
|
||||
|
||||
function onClickOpenDialog(StatusEdit: boolean = false, data: any = []) {
|
||||
modal.value = true;
|
||||
async function fetchData() {
|
||||
if (profileId.value) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.profileNewInsignByProfileId(profileId.value))
|
||||
.then((res) => {
|
||||
let data = res.data.result;
|
||||
rows.value = [];
|
||||
data.map((e: any) => {
|
||||
rows.value.push({
|
||||
id: e.id,
|
||||
insigniaId: e.insigniaId,
|
||||
insigniaType: e.insigniaType,
|
||||
year: e.year,
|
||||
no: e.no,
|
||||
issue: e.issue,
|
||||
volumeNo: e.volumeNo,
|
||||
volume: e.volume,
|
||||
section: e.section,
|
||||
page: e.page,
|
||||
receiveDate: e.receiveDate,
|
||||
dateAnnounce: e.dateAnnounce,
|
||||
refCommandNo: e.refCommandNo,
|
||||
refCommandDate: e.refCommandDate,
|
||||
createdFullName: e.createdFullName,
|
||||
createdAt: e.createdAt,
|
||||
note: e.note,
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
// store.isLoad++;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const clickClose = async () => {
|
||||
async function fetchInsignia() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.insignia)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
let option: DataOptionInsignia[] = [];
|
||||
data.map((r: any) => {
|
||||
option.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString() + ` (${r.shortName})`,
|
||||
typeName:
|
||||
r.insigniaType == null ? null : r.insigniaType.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.insigniaOptions = option;
|
||||
OpsFilter.value.insigniaOptions = option;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
// store.isLoad++;
|
||||
});
|
||||
}
|
||||
|
||||
async function saveData() {
|
||||
if (profileId.value) {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.profileNewInsign, {
|
||||
profileId: profileId.value,
|
||||
isActive: insigniaData.isActive,
|
||||
year: insigniaData.year,
|
||||
no: insigniaData.no,
|
||||
volume: insigniaData.volume,
|
||||
section: insigniaData.section,
|
||||
page: insigniaData.page,
|
||||
receiveDate: dateToISO(insigniaData.receiveDate as Date),
|
||||
insigniaId: insigniaData.insigniaId,
|
||||
insigniaType: insigniaData.insigniaType,
|
||||
dateAnnounce: insigniaData.dateAnnounce
|
||||
? dateToISO(insigniaData.dateAnnounce as Date)
|
||||
: null,
|
||||
issue: insigniaData.issue,
|
||||
volumeNo: insigniaData.volumeNo,
|
||||
refCommandDate:
|
||||
insigniaData.refCommandDate == null
|
||||
? null
|
||||
: dateToISO(insigniaData.refCommandDate as Date),
|
||||
refCommandNo: insigniaData.refCommandNo,
|
||||
// note: note.value,
|
||||
})
|
||||
.then((res) => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
modal.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await fetchData();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function editData() {
|
||||
showLoader();
|
||||
await http
|
||||
.patch(config.API.profileNewInsignById(insigniaData.id), {
|
||||
profileId: profileId.value,
|
||||
isActive: insigniaData.isActive,
|
||||
year: insigniaData.year,
|
||||
no: insigniaData.no,
|
||||
volume: insigniaData.volume,
|
||||
section: insigniaData.section,
|
||||
page: insigniaData.page,
|
||||
receiveDate: dateToISO(insigniaData.receiveDate as Date),
|
||||
insigniaId: insigniaData.insigniaId,
|
||||
insigniaType: insigniaData.insigniaType,
|
||||
dateAnnounce: insigniaData.dateAnnounce
|
||||
? dateToISO(insigniaData.dateAnnounce as Date)
|
||||
: null,
|
||||
issue: insigniaData.issue,
|
||||
volumeNo: insigniaData.volumeNo,
|
||||
refCommandDate:
|
||||
insigniaData.refCommandDate == null
|
||||
? null
|
||||
: dateToISO(insigniaData.refCommandDate as Date),
|
||||
refCommandNo: insigniaData.refCommandNo,
|
||||
// note: note.value,
|
||||
})
|
||||
.then((res) => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
modal.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await fetchData();
|
||||
});
|
||||
}
|
||||
|
||||
async function clickDelete(dataId: string) {
|
||||
$q.dialog({
|
||||
title: `ลบข้อมูล`,
|
||||
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
|
||||
cancel: "ยกเลิก",
|
||||
ok: "ยืนยัน",
|
||||
persistent: true,
|
||||
})
|
||||
.onOk(async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.delete(config.API.profileNewInsignById(dataId))
|
||||
.then((res) => {
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
modal.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await fetchData();
|
||||
});
|
||||
})
|
||||
.onCancel(async () => {
|
||||
await fetchData();
|
||||
});
|
||||
}
|
||||
|
||||
function onClickOpenDialog(editStatus: boolean = false, props?: any) {
|
||||
modal.value = true;
|
||||
editRow.value = false;
|
||||
|
||||
if (editStatus && props) {
|
||||
isEdit.value = editStatus;
|
||||
|
||||
insigniaData.id = props.row.id;
|
||||
insigniaData.year = props.row.year == 0 ? 0 : props.row.year;
|
||||
insigniaData.receiveDate = props.row.receiveDate;
|
||||
insigniaData.insigniaId = props.row.insigniaId;
|
||||
insigniaData.insigniaType = props.row.insigniaType;
|
||||
insigniaData.no = props.row.no;
|
||||
insigniaData.issue = props.row.issue;
|
||||
insigniaData.volumeNo = props.row.volumeNo;
|
||||
insigniaData.volume = props.row.volume;
|
||||
insigniaData.section = props.row.section;
|
||||
insigniaData.page = props.row.page;
|
||||
insigniaData.dateAnnounce =
|
||||
props.row.dateAnnounce == "-" ? "" : props.row.dateAnnounce;
|
||||
insigniaData.refCommandNo = props.row.refCommandNo;
|
||||
insigniaData.refCommandDate =
|
||||
props.row.refCommandDate == "-" ? null : props.row.refCommandDate;
|
||||
insigniaData.note = props.note;
|
||||
} else {
|
||||
isEdit.value = editStatus;
|
||||
|
||||
insigniaData.id = "";
|
||||
insigniaData.year = 0;
|
||||
insigniaData.receiveDate = "";
|
||||
insigniaData.insigniaId = "";
|
||||
insigniaData.insigniaType = "";
|
||||
insigniaData.no = "";
|
||||
insigniaData.issue = "";
|
||||
insigniaData.volumeNo = "";
|
||||
insigniaData.volume = "";
|
||||
insigniaData.section = "";
|
||||
insigniaData.page = "";
|
||||
insigniaData.dateAnnounce = null;
|
||||
insigniaData.refCommandNo = "";
|
||||
insigniaData.refCommandDate = null;
|
||||
insigniaData.note = "";
|
||||
}
|
||||
}
|
||||
|
||||
async function clickClose() {
|
||||
if (editRow.value == true) {
|
||||
$q.dialog({
|
||||
title: `ข้อมูลมีการแก้ไข`,
|
||||
|
|
@ -535,6 +688,7 @@ const clickClose = async () => {
|
|||
persistent: true,
|
||||
}).onOk(async () => {
|
||||
modal.value = false;
|
||||
editRow.value = false;
|
||||
// next.value = false;
|
||||
// previous.value = false;
|
||||
});
|
||||
|
|
@ -543,33 +697,6 @@ const clickClose = async () => {
|
|||
// next.value = false;
|
||||
// previous.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
function onSubmit() {
|
||||
myForm.value.validate().then(async (result: boolean) => {
|
||||
if (result) {
|
||||
// await saveData();
|
||||
modal.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function selectData(props: any) {
|
||||
modal.value = true;
|
||||
}
|
||||
|
||||
function filterSelector(val: any, update: Function, refData: string) {
|
||||
switch (refData) {
|
||||
case "insigniaOptions":
|
||||
update(() => {
|
||||
Ops.value.insigniaOptions = OpsFilter.value.insigniaOptions.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
async function clickHistory(row: RequestItemsObject) {
|
||||
|
|
@ -611,45 +738,44 @@ async function clickHistory(row: RequestItemsObject) {
|
|||
// });
|
||||
}
|
||||
|
||||
async function fetchInsignia() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.insignia)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
let option: DataOptionInsignia[] = [];
|
||||
data.map((r: any) => {
|
||||
option.push({
|
||||
id: r.id.toString(),
|
||||
name: r.name.toString() + ` (${r.shortName})`,
|
||||
typeName:
|
||||
r.insigniaType == null ? null : r.insigniaType.name.toString(),
|
||||
});
|
||||
});
|
||||
Ops.value.insigniaOptions = option;
|
||||
OpsFilter.value.insigniaOptions = option;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
// store.isLoad++;
|
||||
});
|
||||
function onSubmit() {
|
||||
myForm.value.validate().then(async (result: boolean) => {
|
||||
if (result) {
|
||||
isEdit.value ? await editData() : await saveData();
|
||||
modal.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
watch(insigniaId, (count: string, prevCount: string) => {
|
||||
const insigniaTypeFilter = Ops.value.insigniaOptions.filter(
|
||||
(r: DataOptionInsignia) => r.id == insigniaId.value
|
||||
);
|
||||
if (insigniaTypeFilter[0] != null) {
|
||||
insigniaType.value = insigniaTypeFilter[0].typeName;
|
||||
function filterSelector(val: any, update: Function, refData: string) {
|
||||
switch (refData) {
|
||||
case "insigniaOptions":
|
||||
update(() => {
|
||||
Ops.value.insigniaOptions = OpsFilter.value.insigniaOptions.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => insigniaData.insigniaId,
|
||||
(count: string, prevCount: string) => {
|
||||
const insigniaTypeFilter = Ops.value.insigniaOptions.filter(
|
||||
(r: DataOptionInsignia) => r.id === insigniaData.insigniaId
|
||||
);
|
||||
if (insigniaTypeFilter.length > 0) {
|
||||
insigniaData.insigniaType = insigniaTypeFilter[0].typeName;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchInsignia();
|
||||
// await fetchData();
|
||||
await fetchData();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -672,7 +798,7 @@ onMounted(async () => {
|
|||
</q-input>
|
||||
|
||||
<q-select
|
||||
v-if="modelView === 'table'"
|
||||
v-if="modeView === 'table'"
|
||||
dense
|
||||
multiple
|
||||
outlined
|
||||
|
|
@ -690,7 +816,7 @@ onMounted(async () => {
|
|||
|
||||
<q-btn-toggle
|
||||
dense
|
||||
v-model="modelView"
|
||||
v-model="modeView"
|
||||
toggle-color="grey-4"
|
||||
class="no-shadow toggle-borderd"
|
||||
:options="[
|
||||
|
|
@ -703,7 +829,7 @@ onMounted(async () => {
|
|||
name="format_list_bulleted"
|
||||
size="24px"
|
||||
:style="{
|
||||
color: modelView === 'table' ? '#787B7C' : '#C9D3DB',
|
||||
color: modeView === 'table' ? '#787B7C' : '#C9D3DB',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -712,7 +838,7 @@ onMounted(async () => {
|
|||
name="mdi-view-grid-outline"
|
||||
size="24px"
|
||||
:style="{
|
||||
color: modelView === 'card' ? '#787B7C' : '#C9D3DB',
|
||||
color: modeView === 'card' ? '#787B7C' : '#C9D3DB',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -723,16 +849,14 @@ onMounted(async () => {
|
|||
flat
|
||||
dense
|
||||
bordered
|
||||
virtual-scroll
|
||||
ref="table"
|
||||
v-bind="attrs"
|
||||
class="custom-header-table"
|
||||
:rows="rows"
|
||||
:paging="true"
|
||||
:columns="columns"
|
||||
:filter="filterSearch"
|
||||
:grid="modelView === 'card'"
|
||||
:pagination="initialPagination"
|
||||
:grid="modeView === 'card'"
|
||||
:visible-columns="visibleColumns"
|
||||
:pagination-label="paginationLabel"
|
||||
:rows-per-page-options="[20, 50, 100]"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
|
|
@ -744,14 +868,14 @@ onMounted(async () => {
|
|||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template v-slot:body="props" v-if="modelView === 'table'">
|
||||
<template v-slot:body="props" v-if="modeView === 'table'">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
class="cursor-pointer"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
@click="selectData(props)"
|
||||
@click="onClickOpenDialog(true, props)"
|
||||
>
|
||||
<div
|
||||
v-if="
|
||||
|
|
@ -766,6 +890,14 @@ onMounted(async () => {
|
|||
<div v-else-if="col.name == 'year'" class="table_ellipsis">
|
||||
{{ col.value + 543 }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'insignia'" class="table_ellipsis">
|
||||
{{
|
||||
col.value
|
||||
? (Ops.insigniaOptions.find((r) => r.id === col.value) || {})
|
||||
.name
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
<div v-else class="table_ellipsis">
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
|
|
@ -782,6 +914,17 @@ onMounted(async () => {
|
|||
>
|
||||
<q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
color="red"
|
||||
icon="mdi-delete"
|
||||
@click="clickDelete(props.row.id)"
|
||||
>
|
||||
<q-tooltip>ลบข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
|
@ -797,7 +940,7 @@ onMounted(async () => {
|
|||
round
|
||||
color="primary"
|
||||
icon="mdi-pencil-outline"
|
||||
@click.stop.prevent="onClickOpenDialog()"
|
||||
@click="onClickOpenDialog(true, props)"
|
||||
>
|
||||
<q-tooltip>แก่ไขข้อมุล</q-tooltip>
|
||||
</q-btn>
|
||||
|
|
@ -806,7 +949,7 @@ onMounted(async () => {
|
|||
round
|
||||
color="info"
|
||||
icon="mdi-history"
|
||||
@click.stop.prevent="clickHistory(props.row)"
|
||||
@click="clickHistory(props.row)"
|
||||
>
|
||||
<q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
|
||||
</q-btn>
|
||||
|
|
@ -837,6 +980,19 @@ onMounted(async () => {
|
|||
<q-item-label v-else-if="col.name == 'year'">
|
||||
{{ col.value + 543 }}
|
||||
</q-item-label>
|
||||
<q-item-label
|
||||
v-else-if="col.name == 'insignia'"
|
||||
class="table_ellipsis"
|
||||
>
|
||||
{{
|
||||
col.value
|
||||
? (
|
||||
Ops.insigniaOptions.find((r) => r.id === col.value) ||
|
||||
{}
|
||||
).name
|
||||
: "-"
|
||||
}}
|
||||
</q-item-label>
|
||||
<q-item-label v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</q-item-label>
|
||||
|
|
@ -859,7 +1015,7 @@ onMounted(async () => {
|
|||
<datepicker
|
||||
autoApply
|
||||
year-picker
|
||||
v-model="year"
|
||||
v-model="insigniaData.year"
|
||||
week-start="0"
|
||||
menu-class-name="modalfix"
|
||||
:locale="'th'"
|
||||
|
|
@ -875,7 +1031,8 @@ onMounted(async () => {
|
|||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:model-value="year !== 0 ? (year as number) + 543:null"
|
||||
class="inputgreen"
|
||||
:model-value="insigniaData.year !== 0 ? (insigniaData.year as number) + 543 : null"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val ||
|
||||
|
|
@ -901,7 +1058,7 @@ onMounted(async () => {
|
|||
borderless
|
||||
week-start="0"
|
||||
menu-class-name="modalfix"
|
||||
v-model="receiveDate"
|
||||
v-model="insigniaData.receiveDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
>
|
||||
|
|
@ -915,18 +1072,17 @@ onMounted(async () => {
|
|||
<q-input
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
for="inputDatereceive"
|
||||
ref="dateReceivedRef"
|
||||
hide-bottom-space
|
||||
:model-value="
|
||||
receiveDate != null
|
||||
? date2Thai(receiveDate as Date)
|
||||
insigniaData.receiveDate != null
|
||||
? date2Thai(insigniaData.receiveDate as Date)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่ได้รับ'}`"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`,
|
||||
]"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
|
|
@ -952,7 +1108,8 @@ onMounted(async () => {
|
|||
option-value="id"
|
||||
input-debounce="0"
|
||||
option-label="name"
|
||||
v-model="insigniaId"
|
||||
v-model="insigniaData.insigniaId"
|
||||
class="inputgreen"
|
||||
:label="`${'ชื่อเครื่องราชฯ'}`"
|
||||
:options="Ops.insigniaOptions"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อเครื่องราชฯ'}`]"
|
||||
|
|
@ -969,7 +1126,7 @@ onMounted(async () => {
|
|||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
v-model="insigniaType"
|
||||
v-model="insigniaData.insigniaType"
|
||||
:label="`${'ลำดับชั้น'}`"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
/>
|
||||
|
|
@ -980,7 +1137,8 @@ onMounted(async () => {
|
|||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
v-model="no"
|
||||
v-model="insigniaData.no"
|
||||
class="inputgreen"
|
||||
:label="`${'ลำดับที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกลำดับที่'}`]"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
|
|
@ -992,7 +1150,8 @@ onMounted(async () => {
|
|||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
v-model="issue"
|
||||
v-model="insigniaData.issue"
|
||||
class="inputgreen"
|
||||
:label="`${'ราชกิจจาฯ ฉบับที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกราชกิจจาฯ ฉบับที่'}`]"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
|
|
@ -1004,7 +1163,8 @@ onMounted(async () => {
|
|||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
v-model="volumeNo"
|
||||
v-model="insigniaData.volumeNo"
|
||||
class="inputgreen"
|
||||
:label="`${'เล่มที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกเล่มที่'}`]"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
|
|
@ -1016,7 +1176,8 @@ onMounted(async () => {
|
|||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
v-model="volume"
|
||||
v-model="insigniaData.volume"
|
||||
class="inputgreen"
|
||||
:label="`${'เล่ม'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกเล่ม'}`]"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
|
|
@ -1027,8 +1188,9 @@ onMounted(async () => {
|
|||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
v-model="section"
|
||||
hide-bottom-space
|
||||
v-model="insigniaData.section"
|
||||
class="inputgreen"
|
||||
:label="`${'ตอน'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกตอน'}`]"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
|
|
@ -1039,8 +1201,9 @@ onMounted(async () => {
|
|||
dense
|
||||
lazy-rules
|
||||
outlined
|
||||
v-model="page"
|
||||
hide-bottom-space
|
||||
v-model="insigniaData.page"
|
||||
class="inputgreen"
|
||||
:label="`${'หน้า'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกหน้า'}`]"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
|
|
@ -1050,7 +1213,7 @@ onMounted(async () => {
|
|||
<datepicker
|
||||
autoApply
|
||||
week-start="0"
|
||||
v-model="dateAnnounce"
|
||||
v-model="insigniaData.dateAnnounce"
|
||||
menu-class-name="modalfix"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
|
|
@ -1065,7 +1228,8 @@ onMounted(async () => {
|
|||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:model-value="date2Thai(dateAnnounce as Date)"
|
||||
class="inputgreen"
|
||||
:model-value="date2Thai(insigniaData.dateAnnounce as Date)"
|
||||
:label="`${'วันที่ประกาศในราชกิจจาฯ'}`"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
|
|
@ -1080,13 +1244,6 @@ onMounted(async () => {
|
|||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="dateAnnounce && edit" v-slot:append>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="dateAnnounce = null"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
|
@ -1097,7 +1254,8 @@ onMounted(async () => {
|
|||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
v-model="refCommandNo"
|
||||
v-model="insigniaData.refCommandNo"
|
||||
class="inputgreen"
|
||||
:label="`${'เลขที่คำสั่ง'}`"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
>
|
||||
|
|
@ -1110,7 +1268,7 @@ onMounted(async () => {
|
|||
<datepicker
|
||||
autoApply
|
||||
week-start="0"
|
||||
v-model="refCommandDate"
|
||||
v-model="insigniaData.refCommandDate"
|
||||
menu-class-name="modalfix"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
|
|
@ -1126,12 +1284,12 @@ onMounted(async () => {
|
|||
clearable
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:borderless="!edit"
|
||||
class="inputgreen"
|
||||
:label="`${'เอกสารอ้างอิง (ลง วัน/เดือน/ปี)'}`"
|
||||
:model-value="
|
||||
date2Thai(refCommandDate as Date)
|
||||
date2Thai(insigniaData.refCommandDate as Date)
|
||||
"
|
||||
@clear="refCommandDate = ''"
|
||||
@clear="insigniaData.refCommandDate = ''"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
|
|
@ -1150,7 +1308,8 @@ onMounted(async () => {
|
|||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
v-model="note"
|
||||
v-model="insigniaData.note"
|
||||
class="inputgreen"
|
||||
label="หมายเหตุ"
|
||||
@update:modelValue="() => (editRow = true)"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import config from "@/app.config";
|
|||
import genReportXLSX from "@/plugins/genreportxlsx";
|
||||
import DialogInfoCriteria from "@/modules/13_salary/components/SalaryLists/DialogInfoCriteria.vue";
|
||||
|
||||
|
||||
/** importType*/
|
||||
import type { DataOption } from "@/modules/13_salary/interface/index/Main";
|
||||
import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
|
||||
|
|
@ -209,7 +208,7 @@ function fetchDataQuota(id: string) {
|
|||
itemsCard.value[0].total = data.total;
|
||||
itemsCard.value[1].total = data.fifteenPercent;
|
||||
itemsCard.value[2].total = data.chosen;
|
||||
itemsCard.value[3].total = data.remaining;
|
||||
itemsCard.value[3].total = data.remaining;
|
||||
itemsCard.value[4].total = data.totalBackup;
|
||||
|
||||
itemsCard.value[5].total = data.currentAmount;
|
||||
|
|
@ -218,7 +217,7 @@ function fetchDataQuota(id: string) {
|
|||
itemsCard.value[8].total = data.sixPercentSpentAmount;
|
||||
itemsCard.value[9].total = data.useAmount;
|
||||
itemsCard.value[10].total = data.remainingAmount;
|
||||
|
||||
|
||||
itemsCard.value[11].total = data.totalBackup;
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
@ -323,7 +322,72 @@ onMounted(async () => {
|
|||
:key="index"
|
||||
@click="changeTabGroup"
|
||||
>
|
||||
<q-tab :name="item.name" :label="item.lable" />
|
||||
<q-tab :name="item.name" :label="item.lable">
|
||||
<q-tooltip>
|
||||
<q-list dense v-if="item.name === 'group1'">
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label lines="1">
|
||||
<span class="text-bold">ทั่วไป: </span>
|
||||
<span> ปฏิบัติงาน,ชำนาญงาน,อาวุโส</span></q-item-label
|
||||
>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label lines="1">
|
||||
<span class="text-bold">วิชาการ: </span>
|
||||
<span> ปฏิบัติการ,ชำนาญการ,ชำนาญการพิเศษ</span></q-item-label
|
||||
>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label lines="1">
|
||||
<span class="text-bold">อำนวยการ: </span>
|
||||
<span> ต้น</span></q-item-label
|
||||
>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<q-list dense v-if="item.name === 'group2'">
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label lines="1">
|
||||
<span class="text-bold">ทั่วไป: </span>
|
||||
<span> ทักษะพิเศษ</span></q-item-label
|
||||
>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label lines="1">
|
||||
<span class="text-bold">วิชาการ: </span>
|
||||
<span> เชี่ยวชาญ,ทรงคุณวุฒิ</span></q-item-label
|
||||
>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label lines="1">
|
||||
<span class="text-bold">อำนวยการ: </span>
|
||||
<span> สูง</span></q-item-label
|
||||
>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label lines="1">
|
||||
<span class="text-bold">บริหาร: </span>
|
||||
<span> ต้น,สูง</span></q-item-label
|
||||
>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-tooltip>
|
||||
</q-tab>
|
||||
</div>
|
||||
|
||||
<q-space />
|
||||
|
|
@ -346,7 +410,11 @@ onMounted(async () => {
|
|||
>
|
||||
<!-- Card โควต้า -->
|
||||
<div class="row col-12 q-pa-md">
|
||||
<div :class="`row col-12 ${store.roundMainCode === 'APR' ? `q-col-gutter-md`:`q-gutter-md`} items-start`">
|
||||
<div
|
||||
:class="`row col-12 ${
|
||||
store.roundMainCode === 'APR' ? `q-col-gutter-md` : `q-gutter-md`
|
||||
} items-start`"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in store.roundMainCode === 'APR'
|
||||
? itemsCard.slice(0, 5)
|
||||
|
|
@ -354,7 +422,11 @@ onMounted(async () => {
|
|||
? itemsCard.slice(5, 12)
|
||||
: itemsCard"
|
||||
:key="index"
|
||||
:class="store.roundMainCode === 'APR' ? 'col-6 col-sm-4 col-md-3 col-lg-2' : 'col-3'"
|
||||
:class="
|
||||
store.roundMainCode === 'APR'
|
||||
? 'col-6 col-sm-4 col-md-3 col-lg-2'
|
||||
: 'col-3'
|
||||
"
|
||||
>
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
|
|
|
|||
|
|
@ -211,6 +211,7 @@ watch(
|
|||
active-color="primary"
|
||||
color="dark"
|
||||
:max="totalPage"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
|
|
|
|||
|
|
@ -653,6 +653,7 @@ watch([() => page.value, () => pageSize.value], () => {
|
|||
active-color="primary"
|
||||
color="dark"
|
||||
:max="totalPage"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
|
|
|
|||
|
|
@ -594,6 +594,7 @@ async function onClickDownloadReport(val: string, name: string) {
|
|||
active-color="primary"
|
||||
color="dark"
|
||||
:max="totalPage"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue