hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Merge branch 'develop' into devTee

Browse source
This commit is contained in:
STW_TTTY\stwtt 2024-08-28 15:32:29 +07:00
commit 0a548e7666
67 changed files with 1779 additions and 1680 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/modules/00_support/store/Main.ts
View file

@ -12,13 +12,13 @@ import type {
SupportMessageStatus,
SupportIssueCategoryResponse,
} from "@/modules/00_support/interface/index/Main";
import keycloak from "@/plugins/keycloak";
import { useQuasar } from "quasar";
import { getToken, tokenParsed } from "@/plugins/auth";
export const useSupportStore = defineStore("supportServiceStore", () => {
export const useSupportStore = defineStore("supportServiceStore", async () => {
const { showLoader, hideLoader, messageError } = useCounterMixin();
const $q = useQuasar();
const userId = ref<string | undefined>(keycloak.subject);
const userId = ref<string | undefined>("");
const issue = ref<SupportIssueResponse>();
const message = ref<SupportMessageResponse>();
const messageStatus = ref<SupportMessageStatus>();
@ -44,8 +44,9 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
}, 150);
}
const token = await getToken();
const socket = io(config.API.supportSocket, {
auth: { token: keycloak.token },
auth: { token: token },
autoConnect: false,
path: "/api/v1/support/socket/",
});
@ -54,7 +55,10 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
userStatus.value = data;
});
socket.on("online", (r) => {
socket.on("online", async (r) => {
const user = await tokenParsed();
userId.value = user.subject;
userStatus.value.push({
socketId: r.socketId,
userId: r.userId,

13
src/modules/03_recruiting/components/Information.vue
View file

@ -397,6 +397,7 @@
</div> -->
</q-form>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useCounterMixin } from "@/stores/mixin";
@ -412,8 +413,8 @@ import {
changeData,
} from "@/modules/03_recruiting/interface/index/Main";
import HeaderTop from "@/modules/03_recruiting/components/top.vue";
import { tokenParsed } from "@/plugins/auth";
import { useRoute } from "vue-router";
import keycloak from "@/plugins/keycloak";
import { useQuasar } from "quasar";
const props = defineProps({
@ -499,12 +500,10 @@ const fetchData = async () => {
defaultInformation.value.knowledge = data.knowledge;
})
.catch(() => {
defaultInformation.value.email =
keycloak.tokenParsed == null ? "" : keycloak.tokenParsed.email;
defaultInformation.value.firstname =
keycloak.tokenParsed == null ? "" : keycloak.tokenParsed.given_name;
defaultInformation.value.lastname =
keycloak.tokenParsed == null ? "" : keycloak.tokenParsed.family_name;
const user = await tokenParsed();
defaultInformation.value.email = user ? user.email : "";
defaultInformation.value.firstname = user ? user.given_name : "";
defaultInformation.value.lastname = user ? user.family_name : "";
})
.finally(() => {
hideLoader();

13
src/modules/04_registry/components/Profile.vue
View file

@ -833,7 +833,7 @@ import type { DataOption } from "@/modules/04_registry/interface/index/Main";
import http from "@/plugins/http";
import config from "@/app.config";
import { useProfileDataStore } from "@/modules/04_registry/store";
import keycloak from "@/plugins/keycloak";
import { tokenParsed } from "@/plugins/auth";
const $q = useQuasar();
const store = useDataStore();
@ -996,13 +996,10 @@ function onClickUnlock() {
);
}
onMounted(async () => {
if (keycloak.tokenParsed != null) {
roleKeyregistry.value = await keycloak.tokenParsed.role.includes(
"keyregistry"
);
roleRegistryverify.value = await keycloak.tokenParsed.role.includes(
"registryverify"
);
const user = await tokenParsed();
if (user) {
roleKeyregistry.value = await user.role.includes("keyregistry");
roleRegistryverify.value = await user.role.includes("registryverify");
}
await changeTab("information");

11
src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
View file

@ -423,10 +423,17 @@ watch(
);
onMounted(() => {
getData();
const promises = [];
// Add the getData() promise
promises.push(getData());
// Check the condition and add fetchPerson() if needed
if (store.Ops && store.Ops.prefixOps && store.Ops.prefixOps.length === 0) {
fetchPerson();
promises.push(fetchPerson());
}
Promise.all(promises);
});
</script>

31
src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue
View file

@ -172,9 +172,9 @@ const fromData = reactive({
/**
* function fetch ข้อมูลบิดา
*/
function fetchDataFather() {
async function fetchDataFather() {
showLoader();
http
await http
.get(
config.API.profileFamily(empType.value, "father") + `/${profileId.value}`
)
@ -201,9 +201,9 @@ function fetchDataFather() {
/**
* function fetch ข้อมูลมารดา
*/
function fetchDataMother() {
async function fetchDataMother() {
showLoader();
http
await http
.get(
config.API.profileFamily(empType.value, "mother") + `/${profileId.value}`
)
@ -229,9 +229,9 @@ function fetchDataMother() {
/**
* function fetch ข้อมูลคู่สมรส
*/
function fetchDataCouple() {
async function fetchDataCouple() {
showLoader();
http
await http
.get(
config.API.profileFamily(empType.value, "couple") + `/${profileId.value}`
)
@ -259,9 +259,9 @@ function fetchDataCouple() {
/**
* function fetch ข้อมูลบุตร
*/
function fetchDataChildren() {
async function fetchDataChildren() {
showLoader();
http
await http
.get(
config.API.profileFamily(empType.value, "children") +
`/${profileId.value}`
@ -412,7 +412,7 @@ function onOpenDialogHistory(type: string, id: string = "") {
* function fetch ข้อมูลความสัมพันธ์
*/
function fetchDataRelationship() {
showLoader();
// showLoader();
http
.get(config.API.orgRelationship)
.then((res) => {
@ -426,7 +426,9 @@ function fetchDataRelationship() {
messageError($q, err);
})
.finally(() => {
hideLoader();
// setTimeout(() => {
// hideLoader();
// }, 2000);
});
}
@ -472,14 +474,17 @@ function fetchHistory(id: string, type: string) {
});
}
onMounted(() => {
Promise.all([
onMounted(async () => {
showLoader();
await Promise.all([
fetchDataFather(),
fetchDataMother(),
fetchDataCouple(),
fetchDataChildren(),
fetchDataRelationship(),
]);
]).then(() => {
hideLoader();
});
});
</script>

8
src/modules/04_registryPerson/stores/profile.ts
View file

@ -173,9 +173,13 @@ export const useProfileDataStore = defineStore("profile", () => {
Ops.value.religionOps = optionreligions;
OpsFilter.value.religionOps = optionreligions;
})
.catch((e: any) => {})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
setTimeout(() => {
hideLoader();
}, 2500);
});
};

18
src/modules/04_registryPerson/views/detailView.vue
View file

@ -199,7 +199,7 @@ function uploadFileURL(uploadUrl: string, file: any) {
}
function fetchProfile(id: string) {
showLoader();
// showLoader();
http
.get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, fileName.value))
.then(async (res) => {
@ -208,9 +208,9 @@ function fetchProfile(id: string) {
.catch(() => {
profilePicture.value = avatar;
})
.finally(() => {
hideLoader();
});
// .finally(() => {
// hideLoader();
// });
}
const reasonStatus = ref<boolean>(false);
@ -254,7 +254,7 @@ async function fetchDataPersonal() {
showLoader();
await http
.get(config.API.registryNewByProfileId(profileId.value, empType.value))
.then((res) => {
.then(async (res) => {
formDetail.value = res.data.result;
if (res.data.result.leaveReason) {
@ -275,7 +275,7 @@ async function fetchDataPersonal() {
fileName.value = res.data.result.avatarName;
if (formDetail.value?.avatarName) {
fetchProfile(profileId.value);
await fetchProfile(profileId.value);
} else {
profilePicture.value = avatar;
}
@ -291,13 +291,13 @@ async function fetchDataPersonal() {
}
})
.finally(() => {
hideLoader();
setTimeout(() => {
hideLoader();
}, 2800);
});
}
function onClickDownloadKp7(type: string) {
console.log(empType.value);
showLoader();
const url =
type === "FULL"

8
src/modules/05_placement/components/Other/Detail.vue
View file

@ -5,8 +5,7 @@ import { checkPermission } from "@/utils/permissions";
import { useRoute, useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import keycloak from "@/plugins/keycloak";
import { tokenParsed } from "@/plugins/auth";
/**
* impotyType
*/
@ -143,8 +142,9 @@ const getClass = (val: boolean) => {
};
onMounted(async () => {
if (keycloak.tokenParsed != null) {
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
const user = await tokenParsed();
if (user) {
roleAdmin.value = await user.role.includes("placement1");
}
fetchData();
});

7
src/modules/05_placement/components/PersonalList/Detail.vue
View file

@ -3,8 +3,8 @@ import { onMounted, ref } from "vue";
import { defineAsyncComponent } from "@vue/runtime-core";
import { useRouter, useRoute } from "vue-router";
import cardTop from "@/modules/05_placement/components/PersonalList/StatCard.vue";
import { tokenParsed } from "@/plugins/auth";
import keycloak from "@/plugins/keycloak";
import http from "@/plugins/http";
import config from "@/app.config";
@ -81,8 +81,9 @@ onMounted(async () => {
await fetchPlacementData();
}
if (keycloak.tokenParsed != null) {
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
const user = await tokenParsed();
if (user) {
roleAdmin.value = await user.role.includes("placement1");
}
await getStat();

7
src/modules/05_placement/components/PersonalList/Table.vue
View file

@ -18,9 +18,9 @@ import DialogOrgTree from "@/modules/05_placement/components/PersonalList/OrgTre
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import keycloak from "@/plugins/keycloak";
import router from "@/router";
import avatar from "@/assets/avatar_user.jpg";
import { tokenParsed } from "@/plugins/auth";
let roleAdmin = ref<boolean>(false);
@ -714,8 +714,9 @@ function onSubmitDate() {
}
onMounted(async () => {
if (keycloak.tokenParsed != null) {
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
const user = await tokenParsed();
if (user) {
roleAdmin.value = await user.role.includes("placement1");
if (roleAdmin.value === false) {
displayAdd.value = false;
visibleColumns.value = [

1
src/modules/05_placement/components/Relocation/RelocationbyId.vue
View file

@ -6,7 +6,6 @@ import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import keycloak from "@/plugins/keycloak";
import CurrencyInput from "@/components/CurruncyInput.vue";
import type { QTableProps, QForm } from "quasar";
import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";

7
src/modules/05_placement/components/Transfer/transferRegistry.vue
View file

@ -8,7 +8,6 @@ import { checkPermission } from "@/utils/permissions";
// import CurrencyInput from "@/components/CurruncyInput.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import keycloak from "@/plugins/keycloak";
import type { QTableProps, QForm } from "quasar";
import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
@ -19,6 +18,7 @@ import type {
} from "@/modules/05_placement/interface/response/Transfer";
import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
import CardProfile from "@/components/CardProfile.vue";
import { tokenParsed } from "@/plugins/auth";
const modalPersonal = ref<boolean>(false);
const personId = ref<string>("");
@ -304,8 +304,9 @@ function updatemodalPersonal(modal: boolean) {
}
onMounted(async () => {
if (keycloak.tokenParsed != null) {
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
const user = await tokenParsed();
if (user) {
roleAdmin.value = await user.role.includes("placement1");
}
await getData();
});

7
src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
View file

@ -7,11 +7,11 @@ import { useCounterMixin } from "@/stores/mixin";
import CurrencyInput from "@/components/CurruncyInput.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import keycloak from "@/plugins/keycloak";
/**Import type */
import type { QForm } from "quasar";
import type { ResponseDataDetail } from "@/modules/06_retirement/interface/response/discharged";
import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
import { tokenParsed } from "@/plugins/auth";
const modalPersonal = ref<boolean>(false);
const personId = ref<string>("");
@ -64,8 +64,9 @@ const responseData = ref<ResponseDataDetail>({
/** Hook */
onMounted(async () => {
if (keycloak.tokenParsed != null) {
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
const user = await tokenParsed();
if (user) {
roleAdmin.value = await user.role.includes("placement1");
}
await getData();
});

13
src/modules/06_retirement/components/DismissOrder/outRegistry.vue
View file

@ -5,7 +5,7 @@ import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import keycloak from "@/plugins/keycloak";
import { tokenParsed } from "@/plugins/auth";
/**Import type */
import type { QForm } from "quasar";
@ -146,8 +146,9 @@ const getClass = (val: boolean) => {
/** Hook */
onMounted(async () => {
if (keycloak.tokenParsed != null) {
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
const user = await tokenParsed();
if (user) {
roleAdmin.value = await user.role.includes("placement1");
}
await getData();
});
@ -182,7 +183,11 @@ onMounted(async () => {
แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
</div>
<q-space />
<div v-if="status !== 'DONE' && status !== 'REPORT' && !checkRoutePermisson">
<div
v-if="
status !== 'DONE' && status !== 'REPORT' && !checkRoutePermisson
"
>
<div class="q-gutter-sm" v-if="!edit">
<q-btn
outline

1
src/modules/06_retirement/components/ExitInterview/EditQuestion.vue
View file

@ -5,7 +5,6 @@ import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
// import keycloak from "@/plugins/keycloak";
import type { QForm } from "quasar";

20
src/modules/06_retirement/components/ExitInterview/exitRegistry.vue
View file

@ -5,7 +5,7 @@ import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import keycloak from "@/plugins/keycloak";
import { tokenParsed } from "@/plugins/auth";
/**import type*/
import type {
@ -23,7 +23,9 @@ import CardProfile from "@/components/CardProfile.vue";
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const checkRoutePermisson = ref<boolean>(route.name == "exit-Interview-detailsOnly");
const checkRoutePermisson = ref<boolean>(
route.name == "exit-Interview-detailsOnly"
);
const mixin = useCounterMixin();
const dataId = route.params.id.toString();
const {
@ -80,8 +82,9 @@ const adjustOther = ref("");
/** HOOK */
onMounted(async () => {
if (keycloak.tokenParsed != null) {
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
const user = await tokenParsed();
if (user) {
roleAdmin.value = await user.role.includes("placement1");
}
await getData();
await fecthquestion();
@ -1087,9 +1090,14 @@ const putData = () => {
</div>
</div>
<div class="col-12" v-if="!checkRoutePermisson"><q-separator /></div>
<div class="col-12" v-if="!checkRoutePermisson">
<q-separator />
</div>
<q-card-actions class="col-12 text-primary q-pa-md" v-if="!checkRoutePermisson">
<q-card-actions
class="col-12 text-primary q-pa-md"
v-if="!checkRoutePermisson"
>
<q-space />
<q-btn
unelevated

8
src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
View file

@ -6,7 +6,8 @@ import { useCounterMixin } from "@/stores/mixin";
import CurrencyInput from "@/components/CurruncyInput.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import keycloak from "@/plugins/keycloak";
import { tokenParsed } from "@/plugins/auth";
/**Import Type */
import type { QForm } from "quasar";
import type { ResponseDataDetail } from "@/modules/06_retirement/interface/response/expulsion";
@ -62,8 +63,9 @@ const responseData = ref<ResponseDataDetail>({
/**Hook */
onMounted(async () => {
if (keycloak.tokenParsed != null) {
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
const user = await tokenParsed();
if (user) {
roleAdmin.value = await user.role.includes("placement1");
}
await getData();
});

11
src/modules/06_retirement/components/resign/ResignByid.vue
View file

@ -9,8 +9,8 @@ import { useRetirementDataStore } from "@/modules/06_retirement/store";
import http from "@/plugins/http";
import config from "@/app.config";
import axios from "axios";
import { tokenParsed } from "@/plugins/auth";
import keycloak from "@/plugins/keycloak";
import type {
TypeFile,
rowFile,
@ -144,10 +144,11 @@ const checkboxOp = ref<CheckBoxType[]>([
onMounted(async () => {
fetchData(id.value);
fetchFile();
if (keycloak.tokenParsed !== undefined) {
const commander = await keycloak.tokenParsed.role.includes("commander");
const oligarch = await keycloak.tokenParsed.role.includes("oligarch");
const officer = await keycloak.tokenParsed.role.includes("officer");
const user = await tokenParsed();
if (user) {
const commander = await user.role.includes("commander");
const oligarch = await kuser.role.includes("oligarch");
const officer = await user.role.includes("officer");
if (commander) {
roleUser.value = "commander";
} else if (oligarch) {

12
src/modules/08_registryEmployee/components/DialogAddEmployee.vue
View file

@ -216,19 +216,17 @@ function calculateMaxDate() {
}
function onSubmit() {
dialogConfirm($q, () => {
dialogConfirm($q, async () => {
showLoader();
http
await http
.post(config.API.registryNew("-employee"), formData)
.then(() => {
success($q, "บันทึกข้อมูลสำเร็จ");
props.fetchData?.();
.then(async () => {
await props.fetchData?.();
await success($q, "บันทึกข้อมูลสำเร็จ");
closeDialog();
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});

6
src/modules/08_registryEmployee/components/DialogSelectPos.vue
View file

@ -378,9 +378,9 @@ async function onClickSubmit() {
await http
.put(config.API.positionEmployee(props?.dataRow?.id), body)
.then(() => {
success($q, "บันทึกข้อมูลสำเร็จ");
props.fetchData?.();
.then(async () => {
await props.fetchData?.();
await success($q, "บันทึกข้อมูลสำเร็จ");
closePopup();
})
.catch((err) => {

6
src/modules/08_registryEmployee/components/DialogSendOrder.vue
View file

@ -182,10 +182,10 @@ function onClickSendOrder() {
};
http
.post(config.API.orgProfileReport, data)
.then(() => {
success($q, "บันทึกสำเร็จ");
.then(async() => {
await props?.fetchData?.();
await success($q, "บันทึกสำเร็จ");
closeDialog();
props?.fetchData?.();
})
.catch((err) => {
messageError($q, err);

10
src/modules/08_registryEmployee/components/DialogSendToCommand.vue
View file

@ -258,16 +258,16 @@ const sendToCommand = async () => {
showLoader();
await http
.post(config.API.organizationEmployeeSendOrder, data)
.then((res: any) => {
success($q, "บันทึกสำเร็จ");
.then(async () => {
await props.fetchNewList();
await success($q, "บันทึกสำเร็จ");
props.closeDialog();
selected.value = [];
})
.catch((e: any) => {
messageError($q, e);
})
.finally(async () => {
props.fetchNewList();
props.closeDialog();
selected.value = [];
hideLoader();
});
};

14
src/modules/08_registryEmployee/views/Main.vue
View file

@ -218,7 +218,7 @@ watch(
function fetchList() {
showLoader();
http
.get(config.API.registryNew("-employee"), { params: queryParams })
.get(config.API.registryNew("-temp"), { params: queryParams })
.then((res) => {
maxPage.value = Math.ceil(res.data.result.total / queryParams.pageSize);
total.value = res.data.result.total;
@ -233,18 +233,16 @@ function fetchList() {
}
function onClickDelete(id: string) {
dialogRemove($q, () => {
dialogRemove($q, async () => {
showLoader();
http
await http
.delete(config.API.registryNew("-employee") + `/${id}`)
.then(() => {
success($q, "ลบข้อมูลสำเร็จ");
fetchList();
.then(async () => {
await fetchList();
await success($q, "ลบข้อมูลสำเร็จ");
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});

20
src/modules/09_leave/components/2_Leave/Calendar.vue
View file

@ -11,7 +11,6 @@ import allLocales from "@fullcalendar/core/locales-all";
import listPlugin from "@fullcalendar/list";
import http from "@/plugins/http";
import config from "@/app.config";
import keycloak from "@/plugins/keycloak";
import moment from "moment";
import { checkPermission } from "@/utils/permissions";
/** importType*/
@ -19,6 +18,7 @@ import type {
DataDateMonthObject,
ResCalendar,
} from "@/modules/09_leave/interface/response/leave";
import { tokenParsed } from "@/plugins/auth";
/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
@ -32,9 +32,7 @@ const router = useRouter();
const { showLoader, hideLoader, messageError, monthYear2Thai } = mixin;
const keycloakId = ref<string>(
keycloak.tokenParsed ? keycloak.tokenParsed.sub!.toString() : ""
);
const keycloakId = ref<string>("");
/**
* Option ของปฏิทิน
*/
@ -209,6 +207,8 @@ function redirectToDetail(id: string) {
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
*/
onMounted(async () => {
const user = await tokenParsed();
keycloakId.value = user?.sub;
await fetchDataCalendar("onMounted");
});
@ -292,11 +292,19 @@ const monthYearThai = (val: DataDateMonthObject) => {
<template v-slot:eventContent="arg">
<div
class="row col-12 items-center no-wrap"
:style="checkPermission($route)?.attrIsGet ? `background: + ${arg.event.color}`:`background: + ${arg.event.color};pointer-events: none;cursor: auto;`"
:style="
checkPermission($route)?.attrIsGet
? `background: + ${arg.event.color}`
: `background: + ${arg.event.color};pointer-events: none;cursor: auto;`
"
>
<div
class="textHover col-10"
@click="checkPermission($route)?.attrIsGet ? redirectToDetail(arg.event.id):''"
@click="
checkPermission($route)?.attrIsGet
? redirectToDetail(arg.event.id)
: ''
"
>
{{ arg.event.title }}
</div>

26
src/modules/11_discipline/components/7_ListSuspend/DetailPage.vue
View file

@ -5,7 +5,7 @@ import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import keycloak from "@/plugins/keycloak";
import { tokenParsed } from "@/plugins/auth";
import { useDisciplineSuspendStore } from "@/modules/11_discipline/store/SuspendStore";
/**Import type */
@ -16,7 +16,6 @@ import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
import CardProfile from "@/components/CardProfile.vue";
const modalPersonal = ref<boolean>(false);
const personId = ref<string>("");
/** use */
@ -24,7 +23,9 @@ const dataStore = useDisciplineSuspendStore();
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const checkRoutePermission = ref<boolean>(route.name == 'disciplineDetailSuspend')
const checkRoutePermission = ref<boolean>(
route.name == "disciplineDetailSuspend"
);
const mixin = useCounterMixin();
const dataId = route.params.id.toString();
const {
@ -251,8 +252,9 @@ function changeFormDataDate() {
/** Hook */
onMounted(async () => {
if (keycloak.tokenParsed != null) {
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
const user = await tokenParsed();
if (user) {
roleAdmin.value = await user.role.includes("placement1");
}
await getData();
});
@ -332,10 +334,20 @@ onMounted(async () => {
<q-form greedy @submit.prevent @validation-success="saveData">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">
{{ checkRoutePermission ? 'รายละเอียดข้อมูลบัญชีแนบท้าย':'แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย'}}
{{
checkRoutePermission
? "รายละเอียดข้อมูลบัญชีแนบท้าย"
: "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
}}
</div>
<q-space />
<div v-if="data.status !== 'DONE' && data.status !== 'REPORT'&& !checkRoutePermission">
<div
v-if="
data.status !== 'DONE' &&
data.status !== 'REPORT' &&
!checkRoutePermission
"
>
<div class="q-gutter-sm" v-if="!edit">
<q-btn
outline

29
src/modules/12_evaluatePersonal/components/Detail/Tab1.vue
View file

@ -44,6 +44,7 @@ const props = defineProps({
});
const id = ref<string>(route.params.id as string); // id รายการประเมิน
const isLoadView = ref<boolean>(false);
const modalHistory = ref<boolean>(false);
const formCommand = reactive<FormCommand>({
@ -72,6 +73,7 @@ function updateformCommand(val: any, ref: any) {
/** function เช็คขั้นตอน*/
async function fetchCheckStep() {
isLoadView.value = false;
showLoader();
await http
.get(config.API.evaluateGetStep(id.value))
@ -100,12 +102,15 @@ async function fetchCheckStep() {
store.currentStep = step;
store.step = step;
isLoadView.value = true;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
setTimeout(() => {
hideLoader();
}, 3000);
});
}
@ -132,7 +137,7 @@ onMounted(async () => {
: "ประเมินชำนาญการ"
}}
</div>
<q-space/>
<q-space />
<div>
<q-btn
flat
@ -156,7 +161,7 @@ onMounted(async () => {
</div>
</div>
<div class="col-xs-12 col-sm-9 q-pa-md">
<div class="col-xs-12 col-sm-9 q-pa-md" v-if="isLoadView">
<div class="col-12 row q-pt-md">
<div class="toptitle2">
{{ store.step }}.{{ store.titel[store.step - 1] }}
@ -176,15 +181,15 @@ onMounted(async () => {
"
>
<q-card flat bordered class="col-12">
<Step1 v-if="store.step === 1" :data="props.data" />
<Step2 v-if="store.step === 2" @update:form="updateformCommand" />
<Step3 v-if="store.step === 3" :step="store.step" />
<Step4 v-if="store.step === 4" />
<Step5 v-if="store.step === 5" />
<Step6 v-if="store.step === 6" />
<Step7 v-if="store.step === 7" />
<Step8 v-if="store.step === 8" />
<Step9 v-if="store.step === 9" />
<Step1 v-if="store.step === 1" :data="props.data" />
<Step2 v-if="store.step === 2" @update:form="updateformCommand" />
<Step3 v-if="store.step === 3" :step="store.step" />
<Step4 v-if="store.step === 4" />
<Step5 v-if="store.step === 5" />
<Step6 v-if="store.step === 6" />
<Step7 v-if="store.step === 7" />
<Step8 v-if="store.step === 8" />
<Step9 v-if="store.step === 9" />
</q-card>
</div>
<div

4
src/modules/12_evaluatePersonal/components/Detail/step/step2.vue
View file

@ -49,7 +49,9 @@ async function fetchSigner() {
messageError($q, e);
})
.finally(() => {
hideLoader();
setTimeout(() => {
hideLoader();
}, 1000);
});
}
onMounted(async () => {

21
src/modules/12_evaluatePersonal/components/Detail/step/step4.vue
View file

@ -333,21 +333,23 @@ async function checkDoc10() {
"10-ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)"
)
)
.then((res: any) => {
.then(async (res) => {
download10Url.value = res.data.downloadUrl;
fetchProfile();
await fetchProfile();
})
.catch(() => {
// messageError($q, e);
})
.finally(() => {
hideLoader();
setTimeout(() => {
hideLoader();
}, 2000);
});
}
/** function เรียกข้แมูลคุณสมบัติ*/
async function fetchProfile() {
// showLoader();
showLoader();
await http
.get(config.API.evaluateGetDetail(id.value))
.then((res) => {
@ -358,7 +360,9 @@ async function fetchProfile() {
messageError($q, err);
})
.finally(() => {
// hideLoader();
setTimeout(() => {
hideLoader();
}, 1500);
});
}
@ -379,13 +383,14 @@ async function fetchDataSigner() {
messageError($q, e);
})
.finally(() => {
hideLoader();
setTimeout(() => {
hideLoader();
}, 1500);
});
}
onMounted(async () => {
await checkDoc10();
await fetchDataSigner();
await Promise.all([checkDoc10(), fetchDataSigner()]);
});
</script>

21
src/modules/12_evaluatePersonal/components/Detail/step/step5.vue
View file

@ -189,14 +189,16 @@ async function getDate() {
messageError($q, e);
})
.finally(() => {
hideLoader();
setTimeout(() => {
hideLoader();
}, 1500);
});
}
const download10Url = ref<string>("");
/** function เช็คไฟล์อัปโหลด*/
async function checkDocResult() {
// showLoader();
showLoader();
await http
.get(
config.API.evaluationPatchData(
@ -208,11 +210,10 @@ async function checkDocResult() {
.then((res: any) => {
download10Url.value = res.data.downloadUrl;
})
.catch(() => {
// messageError($q, e);
})
.finally(() => {
// hideLoader();
setTimeout(() => {
hideLoader();
}, 1500);
});
}
@ -234,14 +235,14 @@ async function fetchDataSigner() {
messageError($q, e);
})
.finally(() => {
hideLoader();
setTimeout(() => {
hideLoader();
}, 1500);
});
}
onMounted(async () => {
await getDate();
await checkDocResult();
await fetchDataSigner();
await Promise.all([getDate(), checkDocResult(), fetchDataSigner()]);
});
</script>

17
src/modules/12_evaluatePersonal/components/Detail/step/step6.vue
View file

@ -45,7 +45,9 @@ async function getDate() {
messageError($q, e);
})
.finally(() => {
hideLoader();
setTimeout(() => {
hideLoader();
}, 1500);
});
}
@ -67,23 +69,26 @@ async function getSigner() {
}
})
.catch((e) => {
// messageError($q, e);
messageError($q, e);
})
.finally(() => {
hideLoader();
setTimeout(() => {
hideLoader();
}, 1500);
});
}
onMounted(async () => {
await getSigner();
await getDate();
await Promise.all([getSigner(), getDate()]);
});
</script>
<template>
<div class="row q-col-gutter-sm q-pa-sm">
<div class="col-12">
<q-banner class="text-weight-bold text-red-14 bg-red-1 text-center rounded-borders">
<q-banner
class="text-weight-bold text-red-14 bg-red-1 text-center rounded-borders"
>
<div class="text-weight-bold">
<q-icon name="info_outline" color="red-14" size="24px" />
วันสุดท้ายของการส่งผลงานคือวันที่ {{ dateEndPrepareDoc2 }}

50
src/modules/12_evaluatePersonal/components/Detail/step/step8.vue
View file

@ -191,7 +191,7 @@ async function confirmApprove() {
if (hasError.every((result) => result === true)) {
dialogConfirm(
$q,
() => {
async () => {
showLoader();
const data = {
metadata: {
@ -200,7 +200,7 @@ async function confirmApprove() {
additionalProp3: position.value,
},
};
http
await http
.patch(
config.API.evaluationPatchData(
"เล่ม 2",
@ -258,7 +258,9 @@ async function fetchProfile() {
messageError($q, err);
})
.finally(() => {
hideLoader();
setTimeout(() => {
hideLoader();
}, 2000);
});
}
@ -280,7 +282,9 @@ async function checkDocEdit() {
// messageError($q, e);
})
.finally(() => {
hideLoader();
setTimeout(() => {
hideLoader();
}, 2000);
});
}
@ -296,7 +300,7 @@ const downloadFile6 = ref<string>("");
* @param fileName ชื่อไฟล์
*/
async function downloadFileList(fileName: string) {
// showLoader();
showLoader();
await http
.get(config.API.evaluationFilebyId("เล่ม 2", id.value, fileName))
.then((res) => {
@ -316,10 +320,12 @@ async function downloadFileList(fileName: string) {
} else if (fileName === "แบบสรุปผลการประเมิน (เอกสารแบบ ง)") {
downloadFile6.value = res.data.downloadUrl;
}
})
.finally(() => {
setTimeout(() => {
hideLoader();
}, 2000);
});
// .finally(() => {
// hideLoader();
// });
}
const author = ref<string>("");
@ -347,22 +353,26 @@ async function fetchDataSigner() {
messageError($q, e);
})
.finally(() => {
hideLoader();
setTimeout(() => {
hideLoader();
}, 2000);
});
}
onMounted(async () => {
fetchProfile();
fetchDataSigner();
downloadFileList(
"แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน (เอกสารแบบ ค)"
);
downloadFileList("บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)");
downloadFileList("แบบประเมินผลงาน (เอกสารหมายเลข 16)");
downloadFileList("แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)");
downloadFileList("แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)");
downloadFileList("แบบสรุปผลการประเมิน (เอกสารแบบ ง)");
checkDocEdit();
await Promise.all([
fetchProfile(),
fetchDataSigner(),
downloadFileList(
"แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน (เอกสารแบบ ค)"
),
downloadFileList("บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)"),
downloadFileList("แบบประเมินผลงาน (เอกสารหมายเลข 16)"),
downloadFileList("แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)"),
downloadFileList("แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)"),
downloadFileList("แบบสรุปผลการประเมิน (เอกสารแบบ ง)"),
checkDocEdit(),
]);
});
</script>

8
src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardDirector.vue
View file

@ -99,7 +99,6 @@ async function onClickAdd() {
function onClickClose() {
modalAddDirector.value = false;
props.fetchdata();
}
/**
@ -124,14 +123,15 @@ function returnDirector(data: any) {
.put(config.API.evaluationChooseDirectors(id.value), {
directors: dataList,
})
.then(() => {
success($q, "บันทึกสำเร็จ");
.then(async () => {
await props.fetchdata();
await success($q, "บันทึกสำเร็จ");
await onClickClose();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
onClickClose();
hideLoader();
});
});

10
src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardMeet.vue
View file

@ -125,7 +125,6 @@ function onClickAdd() {
function onClickClose() {
modalAdd.value = false;
props.fetchdata();
}
/**
@ -150,14 +149,15 @@ function returnData(data: any) {
.put(config.API.evaluationChooseMeeting(id.value), {
meetings: dataList,
})
.then((res) => {
success($q, "บันทึกสำเร็จ");
.then(async () => {
await props.fetchdata();
await success($q, "บันทึกสำเร็จ");
await onClickClose();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
onClickClose();
hideLoader();
});
});
@ -260,7 +260,7 @@ watch(
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}

239
src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
View file

@ -24,7 +24,7 @@ const {
columnTraining,
columnProjectsProposed,
} = store;
const { date2Thai } = mixin;
const { date2Thai, showLoader, hideLoader } = mixin;
const props = defineProps({
data: {
@ -57,6 +57,7 @@ function formattedNumber(x: number) {
onMounted(() => {
if (props.data) {
showLoader();
formDetail.prefix = props.data.prefix;
formDetail.fullName = props.data.fullName;
formDetail.position = props.data.position;
@ -123,14 +124,21 @@ onMounted(() => {
}))
: [];
formDetail.assessments = props.data.assessments;
setTimeout(() => {
hideLoader();
}, 1000);
}
});
</script>
<template>
<q-card bordered class="col-12 row shadow-0 q-pa-sm" :style="$q.screen.lt.sm ? '' : 'max-height: 64vh; overflow: scroll;' ">
<q-card
bordered
class="col-12 row shadow-0 q-pa-sm"
:style="$q.screen.lt.sm ? '' : 'max-height: 64vh; overflow: scroll;'"
>
<div class="row col-12">
<q-card class="col-12 cardSp1" bordered>
<q-card class="col-12 cardSp1" bordered>
<div class="text-weight-bold row items-center bg-grey-2 col-12">
<span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
</div>
@ -227,122 +235,125 @@ onMounted(() => {
</div>
</q-card>
<q-card class="col-12 cardSp1" bordered>
<q-card class="col-12 cardSp1" bordered>
<div class="text-weight-bold row items-center bg-grey-2 col-12">
<span class="q-ml-lg q-my-sm">ประวัติการศึกษา </span>
</div>
<div class="col-12"><q-separator /></div>
<div class="row col-12 q-pa-sm" v-if="formDetail.educations && formDetail.educations.length > 0">
<div
class="row q-col-gutter-sm"
v-for="(education, index) in formDetail.educations"
:key="index"
>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="education.educationLevel"
label="ระดับศึกษา"
/>
</div>
<div
class="row col-12 q-pa-sm"
v-if="formDetail.educations && formDetail.educations.length > 0"
>
<div
class="row q-col-gutter-sm"
v-for="(education, index) in formDetail.educations"
:key="index"
>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="education.educationLevel"
label="ระดับศึกษา"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="education.institute"
label="สถานศึกษา"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="education.institute"
label="สถานศึกษา"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
:model-value="date2Thai(education.startDate)"
readonly
label="ตั้งแต่"
>
</q-input>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
:model-value="date2Thai(education.startDate)"
readonly
label="ตั้งแต่"
>
</q-input>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
:model-value="date2Thai(education.endDate)"
readonly
label="ถึง"
>
</q-input>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
:model-value="date2Thai(education.finishDate)"
readonly
label="วันที่สำเร็จการศึกษา"
>
</q-input>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
:model-value="date2Thai(education.endDate)"
readonly
label="ถึง"
>
</q-input>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
:model-value="date2Thai(education.finishDate)"
readonly
label="วันที่สำเร็จการศึกษา"
>
</q-input>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="education.isEducation ? 'ใช่' : 'ไม่ใช่'"
label="วุฒิการศึกษาในตําแหน่ง"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="education.isEducation ? 'ใช่' : 'ไม่ใช่'"
label="วุฒิการศึกษาในตําแหน่ง"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="education.degree"
label="วุฒิการศึกษา"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="education.degree"
label="วุฒิการศึกษา"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="education.field"
label="สาขาวิชา/ทาง"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="education.fundName"
label="ทุน"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="education.field"
label="สาขาวิชา/ทาง"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="education.fundName"
label="ทุน"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="education.gpa"
label="เกรดเฉลี่ย"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="education.gpa"
label="เกรดเฉลี่ย"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-6">
<q-input
borderless
readonly
:model-value="education.country"
label="ประเทศ"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-6">
<q-input
borderless
readonly
:model-value="education.country"
label="ประเทศ"
/>
</div>
</div>
</div>
<div v-else class="row col-12 q-pa-md">ไม่มีประวัติการศึกษา</div>
</q-card>
<q-card class="col-12 cardSp1" bordered>
<q-card class="col-12 cardSp1" bordered>
<div class="text-weight-bold row items-center bg-grey-2 col-12">
<span class="q-ml-lg q-my-sm">ใบอนุญาตประกอบวิชาชีพ</span>
</div>
@ -354,7 +365,7 @@ onMounted(() => {
/>
</q-card>
<q-card class="col-12 cardSp1" bordered>
<q-card class="col-12 cardSp1" bordered>
<div class="text-weight-bold row items-center bg-grey-2 col-12">
<span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
</div>
@ -363,26 +374,28 @@ onMounted(() => {
<TableData :columns="columnSalaries" :row="formDetail.salaries" />
</div>
</q-card>
<q-card class="col-12 cardSp1" bordered>
<div class="text-weight-bold row items-center bg-grey-2 col-12">
<span class="q-ml-lg q-my-sm">ประวัติการฝึกอบรมดูงาน</span>
</div>
<div class="col-12"><q-separator /></div>
<TableData class="col-12" :columns="columnTraining" :row="formDetail.trainings"/>
<TableData
class="col-12"
:columns="columnTraining"
:row="formDetail.trainings"
/>
</q-card>
<q-card class="col-12 cardSp1" bordered>
<q-card class="col-12 cardSp1" bordered>
<div class="text-weight-bold row items-center bg-grey-2 col-12">
<span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน </span>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-12 q-pa-sm">
-
</div>
<div class="col-12 q-pa-sm">-</div>
</q-card>
<q-card class="col-12 cardSp1" bordered>
<q-card class="col-12 cardSp1" bordered>
<div class="text-weight-bold row items-center bg-grey-2 col-12">
<span class="q-ml-lg q-my-sm">ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)</span>
</div>
@ -395,9 +408,9 @@ onMounted(() => {
</q-card>
</template>
<style scoped>
.cardSp1{
.cardSp1 {
border: 1px solid #d6dee1;
margin-bottom: 10px ;
margin-bottom: 10px;
box-shadow: none !important;
}
</style>
</style>

4
src/modules/12_evaluatePersonal/views/DetailPage.vue
View file

@ -48,7 +48,9 @@ async function fetchFeature() {
messageError($q, e);
})
.finally(() => {
hideLoader();
setTimeout(() => {
hideLoader();
}, 2000);
});
}

9
src/modules/13_salary/components/SalaryChart/DialogFormMain.vue
View file

@ -122,8 +122,8 @@ function fetchSalaryDetail(id: string) {
showLoader();
http
.get(config.API.salaryChartByid(id))
.then((res) => {
const data = res.data.result;
.then(async (res) => {
const data = await res.data.result;
formData.name = data.name;
formData.posTypeId = data.posTypeId;
formData.posLevelId = data.posLevelId;
@ -159,9 +159,8 @@ watch(
salaryId.value = props.data.id;
fetchPosLevel(props?.data?.posTypeId);
fetchSalaryDetail(props.data.id);
hideLoader();
}
}, 2000);
}, 1000);
}
}
}
@ -269,7 +268,7 @@ const getClass = (val: boolean) => {
<template>
<q-dialog v-model="modal" persistent>
<q-card class="col-12" style="width: 80%">
<q-card class="col-12" style="width: 55%">
<q-form greedy @submit.prevent @validation-success="onSubmit">
<Header :tittle="title" :close="closeDialog" />
<q-separator />

231
src/modules/13_salary/components/SalaryChart/DialogFormRate.vue
View file

@ -1,3 +1,4 @@
divdivdiv
<script setup lang="ts">
import { computed, ref, reactive, watch } from "vue";
import { useQuasar } from "quasar";
@ -189,132 +190,130 @@ const getClass = (val: boolean) => {
<template>
<q-dialog v-model="modal" persistent>
<q-card style="width: 700px; max-width: 80vw">
<q-card style="width: 650px; max-width: 80vw">
<q-form greedy @submit.prevent @validation-success="onSubmit">
<Header :tittle="title" :close="closeDialog" />
<q-separator />
<q-card-section>
<div class="row q-gutter-sm q-pa-sm">
<div class="row col-xs-12 col-md-12 q-col-gutter-sm">
<div class="col-6">
<q-input
:readonly="isReadonly"
:class="getClass(!isReadonly)"
ref="salaryRef"
dense
outlined
v-model="formData.salary"
label="เงินเดือนฐาน"
mask="###,###,###,###"
reverse-fill-mask
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนฐาน'}`]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-6 row items-center">
<q-checkbox dense v-model="formData.isNext" label="ทะลุขั้น" />
</div>
<div class="col-6">
<q-input
:readonly="isReadonly"
:class="getClass(!isReadonly)"
ref="salaryHalfRef"
dense
outlined
v-model="formData.salaryHalf"
label="เลื่อน 0.5 ขั้น"
mask="###,###,###,###"
reverse-fill-mask
:rules="[(val) => !!val || `${'กรุณากรอกเลื่อน 0.5 ขั้น'}`]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-6">
<q-input
:readonly="isReadonly"
:class="getClass(!isReadonly)"
ref="salaryHalfSpecialRef"
dense
outlined
v-model="formData.salaryHalfSpecial"
label="เงินพิเศษ"
mask="###,###,###,###"
reverse-fill-mask
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-6">
<q-input
:readonly="isReadonly"
:class="getClass(!isReadonly)"
ref="salaryFullRef"
dense
outlined
v-model="formData.salaryFull"
label="เลื่อน 1 ขั้น"
mask="###,###,###,###"
reverse-fill-mask
:rules="[(val) => !!val || `${'กรุณากรอกเลื่อน 1 ขั้น'}`]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-6">
<q-input
:readonly="isReadonly"
:class="getClass(!isReadonly)"
ref="salaryFullSpecialRef"
dense
outlined
v-model="formData.salaryFullSpecial"
label="เงินพิเศษ"
mask="###,###,###,###"
reverse-fill-mask
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-6">
<q-input
:readonly="isReadonly"
:class="getClass(!isReadonly)"
ref="salaryFullHalfRef"
dense
outlined
v-model="formData.salaryFullHalf"
label="เลื่อน 1.5 ขั้น"
mask="###,###,###,###"
reverse-fill-mask
:rules="[(val) => !!val || `${'กรุณากรอกเลื่อน 1.5 ขั้น'}`]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-6">
<q-input
:readonly="isReadonly"
:class="getClass(!isReadonly)"
ref="salaryFullHalfSpecialRef"
dense
outlined
v-model="formData.salaryFullHalfSpecial"
label="เงินพิเศษ"
mask="###,###,###,###"
reverse-fill-mask
lazy-rules
hide-bottom-space
/>
</div>
<div class="row col-xs-12 col-md-12 q-col-gutter-sm">
<div class="col-6">
<q-input
:readonly="isReadonly"
:class="getClass(!isReadonly)"
ref="salaryRef"
dense
outlined
v-model="formData.salary"
label="เงินเดือนฐาน"
mask="###,###,###,###"
reverse-fill-mask
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนฐาน'}`]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-6 row items-center">
<q-checkbox dense v-model="formData.isNext" label="ทะลุขั้น" />
</div>
<div class="col-6">
<q-input
:readonly="isReadonly"
:class="getClass(!isReadonly)"
ref="salaryHalfRef"
dense
outlined
v-model="formData.salaryHalf"
label="เลื่อน 0.5 ขั้น"
mask="###,###,###,###"
reverse-fill-mask
:rules="[(val) => !!val || `${'กรุณากรอกเลื่อน 0.5 ขั้น'}`]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-6">
<q-input
:readonly="isReadonly"
:class="getClass(!isReadonly)"
ref="salaryHalfSpecialRef"
dense
outlined
v-model="formData.salaryHalfSpecial"
label="เงินพิเศษ"
mask="###,###,###,###"
reverse-fill-mask
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-6">
<q-input
:readonly="isReadonly"
:class="getClass(!isReadonly)"
ref="salaryFullRef"
dense
outlined
v-model="formData.salaryFull"
label="เลื่อน 1 ขั้น"
mask="###,###,###,###"
reverse-fill-mask
:rules="[(val) => !!val || `${'กรุณากรอกเลื่อน 1 ขั้น'}`]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-6">
<q-input
:readonly="isReadonly"
:class="getClass(!isReadonly)"
ref="salaryFullSpecialRef"
dense
outlined
v-model="formData.salaryFullSpecial"
label="เงินพิเศษ"
mask="###,###,###,###"
reverse-fill-mask
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-6">
<q-input
:readonly="isReadonly"
:class="getClass(!isReadonly)"
ref="salaryFullHalfRef"
dense
outlined
v-model="formData.salaryFullHalf"
label="เลื่อน 1.5 ขั้น"
mask="###,###,###,###"
reverse-fill-mask
:rules="[(val) => !!val || `${'กรุณากรอกเลื่อน 1.5 ขั้น'}`]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-6">
<q-input
:readonly="isReadonly"
:class="getClass(!isReadonly)"
ref="salaryFullHalfSpecialRef"
dense
outlined
v-model="formData.salaryFullHalfSpecial"
label="เงินพิเศษ"
mask="###,###,###,###"
reverse-fill-mask
lazy-rules
hide-bottom-space
/>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white text-teal">
<q-card-actions align="right">
<q-btn label="บันทึก" color="secondary" type="submit"
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
>

143
src/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue
View file

@ -244,35 +244,90 @@ onMounted(() => {
</script>
<template>
<div class="row col-12 q-pa-md">
<q-toolbar style="padding: 0px">
<q-file
<q-card class="col-12">
<q-card-section>
<q-toolbar
class="q-pa-none"
v-if="
store.statusQuota == 'PENDING' &&
checkPermission($route)?.attrIsUpdate
"
bg-color="white"
clearable
outlined
dense
v-model="fileUpload"
label="อัปโหลดไฟล์"
>
<template v-slot:prepend>
<q-icon color="light-blue" name="attach_file" />
<q-file
bg-color="white"
clearable
outlined
dense
v-model="fileUpload"
label="อัปโหลดไฟล์"
>
<template v-slot:prepend>
<q-icon color="light-blue" name="attach_file" />
<q-tooltip>อัปโหลดไฟล์</q-tooltip>
</template>
</q-file>
<q-btn
dense
flat
round
color="light-blue"
icon="upload"
@click="uploadFile(fileUpload)"
v-if="fileUpload !== null"
>
<q-tooltip>อัปโหลดไฟล์</q-tooltip>
</template>
</q-file>
</q-btn>
<q-btn
flat
color="light-blue"
icon="upload"
@click="uploadFile(fileUpload)"
v-if="fileUpload !== null"
/>
<q-space />
</q-toolbar>
<div class="row">
<div class="col-6" v-if="listFile.length !== 0">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
รายการเอกสาร
</div>
<q-list bordered separator>
<q-item clickable v-ripple v-for="item in listFile">
<q-item-section>{{ item.fileName }}</q-item-section>
<q-item-section avatar>
<div class="row">
<div>
<q-btn
v-if="checkPermission($route)?.attrIsGet"
dense
flat
round
color="blue"
icon="mdi-download"
@click="downloadFile(item.fileName)"
>
<q-tooltip>ดาวน์โหลดเอกสาร</q-tooltip>
</q-btn>
</div>
<div>
<q-btn
v-if="checkPermission($route)?.attrIsDelete"
dense
flat
round
color="red"
icon="mdi-delete"
@click="onDeleteFile(item.fileName)"
><q-tooltip>ลบเอกสาร</q-tooltip></q-btn
>
</div>
</div>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card-section>
<q-space />
<q-separator />
<q-card-actions align="right">
<div>
<!-- การเจ้าหน้าที่ของหน่วยงานส่งเอกสารให้ ผอ. หน่วยงานตรวจสอบ -->
<q-btn
@ -357,50 +412,8 @@ onMounted(() => {
label="รอออกคำสั่ง"
/>
</div>
</q-toolbar>
<div class="col-6" v-if="listFile.length !== 0">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
รายการเอกสาร
</div>
<q-list bordered separator>
<q-item clickable v-ripple v-for="item in listFile">
<q-item-section>{{ item.fileName }}</q-item-section>
<q-item-section avatar>
<div class="row">
<div>
<q-btn
v-if="checkPermission($route)?.attrIsGet"
dense
flat
round
color="blue"
icon="mdi-download"
@click="downloadFile(item.fileName)"
>
<q-tooltip>ดาวน์โหลดเอกสาร</q-tooltip>
</q-btn>
</div>
<div>
<q-btn
v-if="checkPermission($route)?.attrIsDelete"
dense
flat
round
color="red"
icon="mdi-delete"
@click="onDeleteFile(item.fileName)"
><q-tooltip>ลบเอกสาร</q-tooltip></q-btn
>
</div>
</div>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card-actions>
</q-card>
<DialogPopupReason
v-model:modal="modalRecommend"

331
src/modules/13_salary/components/SalaryLists/ProcessStep.vue
View file

@ -111,7 +111,9 @@ function uploadfile(uploadUrl: string, file: any) {
});
}
/** function fetchList ไฟล์*/
/**
* fetchList ไฟล์
*/
function getListFile() {
http
.get(
@ -130,69 +132,8 @@ function getListFile() {
});
}
function saveReccommend(reason: string) {
dialogConfirm(
$q,
async () => {
showLoader();
http
.put(
config.API.salaryPeriodStatusComment(
type.value,
props.periodId ? props.periodId : "",
props.rootId ? props.rootId : ""
),
{
titleRecommend: reason,
}
)
.then(async () => {
await props.getData?.();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
sendStep.value = sendStep.value + 1;
modalRecommend.value = false;
},
"ยืนยันการ" + titleRecommend.value,
"ต้องการยืนยันการ" + titleRecommend.value + "หรือไม่?"
);
}
function sendToDirector(msg: string, type: string) {
dialogConfirm(
$q,
async () => {
showLoader();
http
.get(
config.API.salaryPeriodStatus(
type,
props.periodId ? props.periodId : "",
props.rootId ? props.rootId : ""
)
)
.then(() => {
props.getData?.();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
},
"ยืนยันการ" + msg,
"ต้องการยืนยันการ" + msg + "หรือไม่?"
);
}
/**
* function โหลดไฟล์
* โหลดไฟล์
* @param fileName ชื่อไฟล์
*/
function downloadFile(fileName: string) {
@ -220,7 +161,7 @@ function downloadFile(fileName: string) {
}
/**
* function ลบไฟล์
* ลบไฟล์
* @param fileName ชื่อไฟล์
*/
function deleteFile(fileName: string) {
@ -250,12 +191,87 @@ function deleteFile(fileName: string) {
});
}
/**
* ยืนยันการส่ง
* @param msg ส่งเอกสารให้ ผอ. ตรวจสอบ,ยืนยันและส่งเอกสารให้,ยืนยันการตรวจสอบ
* @param type officer, head,owner
*/
function sendToDirector(msg: string, type: string) {
dialogConfirm(
$q,
async () => {
showLoader();
http
.get(
config.API.salaryPeriodStatus(
type,
props.periodId ? props.periodId : "",
props.rootId ? props.rootId : ""
)
)
.then(() => {
props.getData?.();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
},
"ยืนยันการ" + msg,
"ต้องการยืนยันการ" + msg + "หรือไม่?"
);
}
/**
* ส่งคำแนะนำให้ ผอ. ตรวจสอบ
* @param title หัวข้อ
* @param typeOrder ประเภทคำสั่ง
*/
function sendAndRecommend(title: string, typeOrder: string) {
modalRecommend.value = true;
titleRecommend.value = title;
type.value = typeOrder;
}
/**
* ยินยันการบันทึกคำแนะนำ
* @param reason คำแนะนำ
*/
function saveReccommend(reason: string) {
dialogConfirm(
$q,
async () => {
showLoader();
http
.put(
config.API.salaryPeriodStatusComment(
type.value,
props.periodId ? props.periodId : "",
props.rootId ? props.rootId : ""
),
{
titleRecommend: reason,
}
)
.then(async () => {
await props.getData?.();
sendStep.value = sendStep.value + 1;
modalRecommend.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
},
"ยืนยันการ" + titleRecommend.value,
"ต้องการยืนยันการ" + titleRecommend.value + "หรือไม่?"
);
}
onMounted(() => {
if (props.rootId) {
getListFile();
@ -264,51 +280,106 @@ onMounted(() => {
</script>
<template>
<div class="row col-12 q-pa-md">
<q-toolbar class="q-pa-none">
<q-file
<q-card class="col-12">
<q-card-section>
<q-toolbar
class="q-pa-none"
v-if="
store.statusQuota == 'PENDING' &&
checkPermission($route)?.attrIsUpdate
"
bg-color="white"
clearable
outlined
dense
v-model="fileUpload"
accept=".pdf"
label="อัปโหลดไฟล์"
>
<template v-slot:prepend>
<q-icon color="light-blue" name="attach_file" />
<q-tooltip>อัปโหลดไฟล์</q-tooltip>
</template>
</q-file>
<q-file
bg-color="white"
clearable
outlined
dense
v-model="fileUpload"
accept=".pdf"
label="อัปโหลดไฟล์"
>
<template v-slot:prepend>
<q-icon color="light-blue" name="attach_file" />
<q-tooltip>อัปโหลดไฟล์</q-tooltip>
</template>
</q-file>
<q-btn
flat
color="light-blue"
icon="upload"
@click="uploadFile(fileUpload)"
v-if="fileUpload !== null"
/>
<div v-if="document">
<q-btn
dense
color="primary"
icon-right="mdi-download"
label="ดาวน์โหลดไฟล์"
outline
:href="document"
target="_blank"
flat
round
color="light-blue"
icon="upload"
@click="uploadFile(fileUpload)"
v-if="fileUpload !== null"
>
<q-tooltip>ดาวน์โหลด</q-tooltip></q-btn
>
</div>
<q-tooltip>อัปโหลดไฟล์</q-tooltip>
</q-btn>
<div v-if="document">
<q-btn
dense
color="primary"
icon-right="mdi-download"
label="ดาวน์โหลดไฟล์"
outline
:href="document"
target="_blank"
>
<q-tooltip>ดาวน์โหลด</q-tooltip></q-btn
>
</div>
<q-toolbar-title>
<!-- Toolbar -->
</q-toolbar-title>
<q-toolbar-title>
<!-- Toolbar -->
</q-toolbar-title>
</q-toolbar>
<div class="row">
<div class="col-6" v-if="listFile.length !== 0">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
รายการเอกสาร
</div>
<q-list bordered separator>
<q-item clickable v-ripple v-for="item in listFile">
<q-item-section>{{ item.fileName }}</q-item-section>
<q-item-section avatar>
<div class="row">
<div>
<q-btn
v-if="checkPermission($route)?.attrIsGet"
dense
flat
round
color="blue"
icon="mdi-download"
@click="downloadFile(item.fileName)"
>
<q-tooltip>ดาวน์โหลดเอกสาร</q-tooltip>
</q-btn>
</div>
<div>
<q-btn
v-if="checkPermission($route)?.attrIsDelete"
dense
flat
round
color="red"
icon="delete"
@click="deleteFile(item.fileName)"
><q-tooltip>ลบเอกสาร</q-tooltip></q-btn
>
</div>
</div>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<div>
<!-- การเจ้าหน้าที่ของหน่วยงานส่งเอกสารให้ ผอ. หน่วยงานตรวจสอบ -->
<q-btn
@ -373,6 +444,7 @@ onMounted(() => {
"
/>
<!-- ส่งไปออกคำสั่ง -->
<q-btn
v-if="
store.statusQuota == 'WAITOFFICER2' &&
@ -382,6 +454,8 @@ onMounted(() => {
color="public"
label="ส่งไปออกคำสั่ง"
/>
<!-- รอออกคำสั่ง -->
<q-btn
v-if="
store.statusQuota == 'REPORT' &&
@ -393,57 +467,16 @@ onMounted(() => {
label="รอออกคำสั่ง"
/>
</div>
</q-toolbar>
<div class="col-6" v-if="listFile.length !== 0">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
รายการเอกสาร
</div>
<q-list bordered separator>
<q-item clickable v-ripple v-for="item in listFile">
<q-item-section>{{ item.fileName }}</q-item-section>
<q-item-section avatar>
<div class="row">
<div>
<q-btn
v-if="checkPermission($route)?.attrIsGet"
dense
flat
round
color="blue"
icon="mdi-download"
@click="downloadFile(item.fileName)"
>
<q-tooltip>ดาวน์โหลดเอกสาร</q-tooltip>
</q-btn>
</div>
<div>
<q-btn
v-if="checkPermission($route)?.attrIsDelete"
dense
flat
round
color="red"
icon="delete"
@click="deleteFile(item.fileName)"
><q-tooltip>ลบเอกสาร</q-tooltip></q-btn
>
</div>
</div>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</q-card-actions>
</q-card>
<DialogPopupReason
v-model:modal="modalRecommend"
:title="titleRecommend"
label="คำแนะนำ"
:savaForm="saveReccommend"
textReport=""
/>
</div>
<DialogPopupReason
v-model:modal="modalRecommend"
:title="titleRecommend"
label="คำแนะนำ"
:savaForm="saveReccommend"
textReport=""
/>
</template>
<style lang="scss" scoped></style>

2
src/modules/13_salary/components/SalaryRound/DialogForm.vue
View file

@ -127,7 +127,7 @@ watch(
<template>
<q-dialog v-model="modal" persistent>
<q-card class="col-12" style="width: 30%">
<q-card class="col-12" style="width: 23%">
<q-form greedy @submit.prevent @validation-success="onSubmit">
<Header
:tittle="`${

352
src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue
View file

@ -148,7 +148,7 @@ const getClass = (val: boolean) => {
</script>
<template>
<q-dialog v-model="modal" persistent>
<q-card class="col-12" style="width: 80%">
<q-card class="col-12" style="width: 55%">
<q-form greedy @submit.prevent @validation-success="onSubmit">
<Header
:tittle="
@ -163,202 +163,194 @@ const getClass = (val: boolean) => {
<q-separator />
<q-card-section class="scroll" style="max-height: 70vh">
<div class="row col-12 q-col-gutter-sm">
<div class="col-md-12">
<div class="row col-12 q-col-gutter-sm">
<div class="col-xs-12 col-md-4">
<div class="col-xs-12 col-md-4">
<q-input
:readonly="isReadonly"
:class="getClass(!isReadonly)"
ref="nameRef"
dense
hide-bottom-space
outlined
v-model="formData.name"
label="ชื่อผังบัญชีอัตราค่าจ้าง"
:rules="[(val) => !!val || 'กรุณากรอกชื่อผังบัญชีอัตราค่าจ้าง']"
lazy-rules
/>
</div>
<div class="col-xs-12 col-md-4">
<q-input
ref="groupRef"
week-start="0"
:readonly="isReadonly"
:class="getClass(!isReadonly)"
dense
outlined
v-model="formData.group"
label="กลุ่มของผังบัญชีอัตราค่าจ้าง"
hide-bottom-space
mask="#"
reverse-fill-mask
:rules="[
(val) => !!val || 'กรุณากรอกกลุ่มของผังบัญชีอัตราค่าจ้าง',
]"
/>
</div>
<div
class="col-xs-12 col-md-4"
style="display: flex; justify-content: flex-start"
>
<q-toggle
week-start="0"
:disable="isReadonly"
color="primary"
label="สถานะการใช้งาน"
v-model="formData.isActive"
/>
</div>
<div class="col-xs-12 col-md-4">
<datepicker
menu-class-name="modalfix"
v-model="formData.date"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:readonly="isReadonly"
:class="getClass(!isReadonly)"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
:readonly="isReadonly"
:class="getClass(!isReadonly)"
ref="nameRef"
outlined
dense
hide-bottom-space
outlined
v-model="formData.name"
label="ชื่อผังบัญชีอัตราค่าจ้าง"
:rules="[
(val) => !!val || 'กรุณากรอกชื่อผังบัญชีอัตราค่าจ้าง',
]"
lazy-rules
/>
</div>
:model-value="
formData.date != null ? date2Thai(formData.date) : null
"
label="ให้ไว้ ณ วันที่"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-md-4">
<div class="col-xs-12 col-md-4">
<datepicker
:readonly="isReadonly"
:class="getClass(!isReadonly)"
menu-class-name="modalfix"
v-model="formData.startDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
@update:model-value="checkEndDate"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
ref="groupRef"
week-start="0"
:readonly="isReadonly"
:class="getClass(!isReadonly)"
dense
outlined
v-model="formData.group"
label="กลุ่มของผังบัญชีอัตราค่าจ้าง"
dense
hide-bottom-space
mask="#"
reverse-fill-mask
:rules="[
(val) => !!val || 'กรุณากรอกกลุ่มของผังบัญชีอัตราค่าจ้าง',
]"
/>
</div>
<div
class="col-xs-12 col-md-4"
style="display: flex; justify-content: flex-start"
>
<q-toggle
week-start="0"
:disable="isReadonly"
color="primary"
label="สถานะการใช้งาน"
v-model="formData.isActive"
/>
</div>
<div class="col-xs-12 col-md-4">
<datepicker
menu-class-name="modalfix"
v-model="formData.date"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:readonly="isReadonly"
:class="getClass(!isReadonly)"
:model-value="
formData.startDate != null
? date2Thai(formData.startDate)
: null
"
label="วันที่มีผลบังคับใช้"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
:readonly="isReadonly"
outlined
dense
hide-bottom-space
:model-value="
formData.date != null
? date2Thai(formData.date)
: null
"
label="ให้ไว้ ณ วันที่"
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</q-icon>
</template>
</datepicker>
</div>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-md-4">
<datepicker
:readonly="isReadonly"
:class="getClass(!isReadonly)"
menu-class-name="modalfix"
v-model="formData.startDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
@update:model-value="checkEndDate"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
:readonly="isReadonly"
outlined
dense
hide-bottom-space
:model-value="
formData.startDate != null
? date2Thai(formData.startDate)
: null
"
label="วันที่มีผลบังคับใช้"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-md-4">
<datepicker
:readonly="isReadonly"
:class="getClass(!isReadonly)"
menu-class-name="modalfix"
v-model="formData.endDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:min-date="formData.startDate"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
:readonly="isReadonly"
outlined
dense
:model-value="
formData.endDate != null
? date2Thai(formData.endDate)
: null
"
label="วันที่สิ้นสุดบังคับใช้"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-12">
<div class="col-xs-12 col-md-4">
<datepicker
:readonly="isReadonly"
:class="getClass(!isReadonly)"
menu-class-name="modalfix"
v-model="formData.endDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:min-date="formData.startDate"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
:readonly="isReadonly"
:class="getClass(!isReadonly)"
v-model="formData.details"
outlined
dense
type="textarea"
label="คำอธิบาย"
/>
</div>
</div>
:model-value="
formData.endDate != null
? date2Thai(formData.endDate)
: null
"
label="วันที่สิ้นสุดบังคับใช้"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-12">
<q-input
:readonly="isReadonly"
:class="getClass(!isReadonly)"
v-model="formData.details"
outlined
dense
type="textarea"
label="คำอธิบาย"
/>
</div>
</div>
</q-card-section>

121
src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue
View file

@ -1,3 +1,4 @@
divdiv
<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { useQuasar } from "quasar";
@ -134,7 +135,7 @@ const getClass = (val: boolean) => {
<template>
<q-dialog v-model="modal" persistent>
<q-card style="width: 500px">
<q-card style="width: 350px">
<q-form greedy @submit.prevent @validation-success="onSubmit">
<Header
:tittle="
@ -144,68 +145,66 @@ const getClass = (val: boolean) => {
/>
<q-separator />
<q-card-section>
<div class="row q-gutter-sm q-pa-sm">
<div class="row col-xs-12 col-md-12 q-col-gutter-sm">
<div class="col-12">
<q-input
:readonly="isReadonly"
:class="getClass(!isReadonly)"
ref="salaryNoRef"
dense
outlined
v-model="formData.salaryNo"
label="ลำดับชั้น"
:rules="[
(val) => !!val || 'กรุณากรอกลำดับชั้น',
(val) =>
Number(val) === Math.floor(val) ||
Number(val) === Math.floor(val) + 0.5 ||
`กรุณากรอกจำนวนเต็มเท่านั้ หรือ .5`,
]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="row col-12 q-col-gutter-sm">
<div class="col-12">
<q-input
:readonly="isReadonly"
:class="getClass(!isReadonly)"
ref="salaryNoRef"
dense
outlined
v-model="formData.salaryNo"
label="ลำดับชั้น"
:rules="[
(val) => !!val || 'กรุณากรอกลำดับชั้น',
(val) =>
Number(val) === Math.floor(val) ||
Number(val) === Math.floor(val) + 0.5 ||
`กรุณากรอกจำนวนเต็มเท่านั้ หรือ .5`,
]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-12">
<q-input
:readonly="isReadonly"
:class="getClass(!isReadonly)"
ref="salaryMonthRef"
dense
outlined
v-model="formData.salaryMonth"
label="อัตราค่าจ้าง/ขั้นวิ่ง (รายเดือน)"
mask="###,###,###,###"
reverse-fill-mask
:rules="[
(val) =>
!!val || `${'กรุณากรอกอัตราค่าจ้าง/ขั้นวิ่ง (รายเดือน)'}`,
]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-12">
<q-input
:readonly="isReadonly"
:class="getClass(!isReadonly)"
ref="salaryMonthRef"
dense
outlined
v-model="formData.salaryMonth"
label="อัตราค่าจ้าง/ขั้นวิ่ง (รายเดือน)"
mask="###,###,###,###"
reverse-fill-mask
:rules="[
(val) =>
!!val || `${'กรุณากรอกอัตราค่าจ้าง/ขั้นวิ่ง (รายเดือน)'}`,
]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-12">
<q-input
:readonly="isReadonly"
:class="getClass(!isReadonly)"
ref="salaryDayRef"
dense
outlined
v-model="formData.salaryDay"
label="อัตราค่าจ้าง/ขั้นวิ่ง (รายวัน)"
mask="###,###,###,###"
reverse-fill-mask
lazy-rules
hide-bottom-space
:rules="[
(val) =>
!!val || `${'กรุณากรอกอัตราค่าจ้าง/ขั้นวิ่ง (รายวัน)'}`,
]"
/>
</div>
<div class="col-12">
<q-input
:readonly="isReadonly"
:class="getClass(!isReadonly)"
ref="salaryDayRef"
dense
outlined
v-model="formData.salaryDay"
label="อัตราค่าจ้าง/ขั้นวิ่ง (รายวัน)"
mask="###,###,###,###"
reverse-fill-mask
lazy-rules
hide-bottom-space
:rules="[
(val) =>
!!val || `${'กรุณากรอกอัตราค่าจ้าง/ขั้นวิ่ง (รายวัน)'}`,
]"
/>
</div>
</div>
</q-card-section>

441
src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue
View file

@ -1,4 +1,4 @@
<script setup lang="ts">
div<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
@ -333,7 +333,7 @@ const getClass = (val: boolean) => {
<template>
<q-dialog v-model="modal" persistent>
<q-card class="col-12" style="width: 80%">
<q-card class="col-12" style="width: 60%">
<q-form greedy @submit.prevent @validation-success="onSubmit">
<Header
:tittle="
@ -347,229 +347,226 @@ const getClass = (val: boolean) => {
/>
<q-separator />
<q-card-section>
<div class="row q-gutter-sm q-pa-sm">
<div class="row col-xs-12 col-md-12 q-col-gutter-sm">
<div class="col-4">
<q-select
ref="posTypeRef"
:class="getClass(!isReadonly)"
:readonly="isReadonly"
dense
outlined
v-model="formData.posType"
label="กลุ่มงาน"
:rules="[(val) => !!val || 'กรุณาเลือกกลุ่มงาน']"
:options="posTypeOp"
option-label="name"
option-value="id"
map-options
lazy-rules
hide-bottom-space
use-input
@update:model-value="getPosName()"
@filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn,'group') "
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template></q-select
>
</div>
<div class="col-4">
<q-select
ref="posNameRef"
:class="getClass(!isReadonly)"
:readonly="isReadonly || formData.posType"
dense
outlined
v-model="formData.posName"
label="ตำแหน่ง"
:rules="[(val) => !!val || 'กรุณาเลือกตำแหน่ง']"
:options="posNameOp"
option-label="name"
option-value="name"
emit-value
lazy-rules
use-input
@filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn,'pos')"
hide-bottom-space
@update:model-value="getPosLevel()"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<div class="col-4">
<q-select
:class="getClass(!isReadonly)"
:readonly="isReadonly || formData.posName"
ref="posLevelRef"
dense
outlined
v-model="formData.posLevel"
:options="posLevelOp"
option-label="name"
option-value="id"
map-options
label="ระดับชั้นงาน"
:rules="[(val) => !!val || 'กรุณาเลือกระดับชั้นงาน']"
lazy-rules
hide-bottom-space
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<div class="row col-xs-12 col-md-12 q-col-gutter-sm">
<div class="col-4">
<q-select
ref="posTypeRef"
:class="getClass(!isReadonly)"
:readonly="isReadonly"
dense
outlined
v-model="formData.posType"
label="กลุ่มงาน"
:rules="[(val) => !!val || 'กรุณาเลือกกลุ่มงาน']"
:options="posTypeOp"
option-label="name"
option-value="id"
map-options
lazy-rules
hide-bottom-space
use-input
@update:model-value="getPosName()"
@filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn,'group') "
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template></q-select
>
</div>
<div class="col-4">
<q-select
ref="posNameRef"
:class="getClass(!isReadonly)"
:readonly="isReadonly || formData.posType"
dense
outlined
v-model="formData.posName"
label="ตำแหน่ง"
:rules="[(val) => !!val || 'กรุณาเลือกตำแหน่ง']"
:options="posNameOp"
option-label="name"
option-value="name"
emit-value
lazy-rules
use-input
@filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn,'pos')"
hide-bottom-space
@update:model-value="getPosLevel()"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<div class="col-4">
<q-select
:class="getClass(!isReadonly)"
:readonly="isReadonly || formData.posName"
ref="posLevelRef"
dense
outlined
v-model="formData.posLevel"
:options="posLevelOp"
option-label="name"
option-value="id"
map-options
label="ระดับชั้นงาน"
:rules="[(val) => !!val || 'กรุณาเลือกระดับชั้นงาน']"
lazy-rules
hide-bottom-space
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<div class="col-12">
<q-input
:class="getClass(!isReadonly)"
:readonly="isReadonly"
dense
outlined
v-model="formData.reson"
label="หมายเหตุ"
type="textarea"
/>
</div>
<div class="col-12">
<q-input
:class="getClass(!isReadonly)"
:readonly="isReadonly"
dense
outlined
v-model="formData.reson"
label="หมายเหตุ"
type="textarea"
/>
</div>
<div class="col-12 text-bold">อัตราค่าจ้าง</div>
<div class="col-4">
<q-input
:class="getClass(!isReadonly)"
:readonly="isReadonly"
ref="rateOldMinRef"
dense
outlined
v-model="formData.rateOldMin"
label="ขั้นต่ำสุด"
mask="###,###,###,###,###,###,###,###"
reverse-fill-mask
:rules="[
(val) => !!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นต่ำสุด'}`,
]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-4">
<q-select
:class="getClass(!isReadonly)"
:readonly="isReadonly"
ref="groupOldRef"
dense
outlined
multiple
v-model="formData.groupOld"
label="กลุ่มของผังบัญชีอัตราค่าจ้าง"
:rules="[
(val) =>
!!val ||
`${'กรุณาเลือกอัตราค่าจ้าง กลุ่มของผังบัญชีอัตราค่าจ้าง'}`,
]"
:options="groupOldOp"
map-options
option-label="name"
option-value="id"
lazy-rules
hide-bottom-space
use-input
@filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn,'groupOld')"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<div class="col-4">
<q-input
:class="getClass(!isReadonly)"
:readonly="isReadonly"
ref="rateMaxOldRef"
dense
outlined
v-model="formData.rateMaxOld"
label="ขั้นสูงสุดเดิม"
mask="###,###,###,###,###,###,###,###"
reverse-fill-mask
:rules="[
(val) =>
!!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นสูงสุดเดิม'}`,
]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-12 text-bold">อัตราค่าจ้าง</div>
<div class="col-4">
<q-input
:class="getClass(!isReadonly)"
:readonly="isReadonly"
ref="rateOldMinRef"
dense
outlined
v-model="formData.rateOldMin"
label="ขั้นต่ำสุด"
mask="###,###,###,###,###,###,###,###"
reverse-fill-mask
:rules="[
(val) => !!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นต่ำสุด'}`,
]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-4">
<q-select
:class="getClass(!isReadonly)"
:readonly="isReadonly"
ref="groupOldRef"
dense
outlined
multiple
v-model="formData.groupOld"
label="กลุ่มของผังบัญชีอัตราค่าจ้าง"
:rules="[
(val) =>
!!val ||
`${'กรุณาเลือกอัตราค่าจ้าง กลุ่มของผังบัญชีอัตราค่าจ้าง'}`,
]"
:options="groupOldOp"
map-options
option-label="name"
option-value="id"
lazy-rules
hide-bottom-space
use-input
@filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn,'groupOld')"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<div class="col-4">
<q-input
:class="getClass(!isReadonly)"
:readonly="isReadonly"
ref="rateMaxOldRef"
dense
outlined
v-model="formData.rateMaxOld"
label="ขั้นสูงสุดเดิม"
mask="###,###,###,###,###,###,###,###"
reverse-fill-mask
:rules="[
(val) => !!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นสูงสุดเดิม'}`,
]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-12 text-bold">
อัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ
</div>
<div class="col-4">
<q-select
:class="getClass(!isReadonly)"
:readonly="isReadonly"
ref="groupRateHighRef"
dense
outlined
v-model="formData.groupRateHigh"
label="กลุ่มบัญชีค่าจ้าง"
:rules="[
(val) => !!val || `${'กรุณากรอกเลือกกลุ่มบัญชีค่าจ้าง'}`,
]"
lazy-rules
:options="groupOldOp"
map-options
option-label="name"
option-value="id"
emit-value
hide-bottom-space
use-input
@filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn,'groupOld')"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<div class="col-4">
<q-input
:class="getClass(!isReadonly)"
:readonly="isReadonly"
ref="rateHighMaxRef"
dense
outlined
v-model="formData.rateHighMax"
label="อัตราค่าจ้างขั้นสูงใหม่"
mask="###,###,###,###,###,###,###,###"
reverse-fill-mask
:rules="[
(val) => !!val || `${'กรุณากรอกอัตราค่าจ้างขั้นสูงใหม่'}`,
]"
lazy-rules
hide-bottom-space
/>
</div>
<div class="col-12 text-bold">
อัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ
</div>
<div class="col-4">
<q-select
:class="getClass(!isReadonly)"
:readonly="isReadonly"
ref="groupRateHighRef"
dense
outlined
v-model="formData.groupRateHigh"
label="กลุ่มบัญชีค่าจ้าง"
:rules="[
(val) => !!val || `${'กรุณากรอกเลือกกลุ่มบัญชีค่าจ้าง'}`,
]"
lazy-rules
:options="groupOldOp"
map-options
option-label="name"
option-value="id"
emit-value
hide-bottom-space
use-input
@filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn,'groupOld')"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<div class="col-4">
<q-input
:class="getClass(!isReadonly)"
:readonly="isReadonly"
ref="rateHighMaxRef"
dense
outlined
v-model="formData.rateHighMax"
label="อัตราค่าจ้างขั้นสูงใหม่"
mask="###,###,###,###,###,###,###,###"
reverse-fill-mask
:rules="[
(val) => !!val || `${'กรุณากรอกอัตราค่าจ้างขั้นสูงใหม่'}`,
]"
lazy-rules
hide-bottom-space
/>
</div>
</div>
</q-card-section>

4
src/modules/13_salary/views/salaryChart.vue
View file

@ -159,7 +159,7 @@ function onClickCoppy(id: string) {
.post(config.API.salaryChartCopy, { id: id })
.then(async () => {
await fetchListSalaly();
await success($q, "คัดลอกข้อมูลสำเร็จ");
success($q, "คัดลอกข้อมูลสำเร็จ");
})
.catch((err) => {
messageError($q, err);
@ -180,7 +180,7 @@ function onClickDelete(id: string) {
.delete(config.API.salaryChartByid(id))
.then(async () => {
await fetchListSalaly();
await success($q, "ลบข้อมูลสำเร็จ");
success($q, "ลบข้อมูลสำเร็จ");
})
.catch((err) => {
messageError($q, err);

10
src/modules/13_salary/views/salaryEmployeeLists.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { onMounted, ref, computed, nextTick } from "vue";
import { onMounted, ref, nextTick } from "vue";
import { useQuasar } from "quasar";
import config from "@/app.config";
import http from "@/plugins/http";
@ -88,9 +88,11 @@ function getRound() {
store.roundMainCode = roundFilter.value.shortCode;
store.isClosedRound = roundFilter.value.isClose;
await getSnap(roundFilter.value.shortCode);
await getAgency(roundFilter.value.revisionId);
await getAgencyPosition(roundFilter.value.revisionId);
await Promise.all([
getSnap(roundFilter.value.shortCode),
getAgency(roundFilter.value.revisionId),
getAgencyPosition(roundFilter.value.revisionId),
]);
} else {
isLoad.value = false;
roundFilter.value = "ไม่มีข้อมูล";

15
src/modules/13_salary/views/salaryEmployeeRate.vue
View file

@ -168,17 +168,19 @@ function onEdit(data: EmployeeRateSalary) {
*/
function onDelete(id: string) {
dialogRemove($q, () => {
showLoader();
http
.delete(config.API.salaryEmployeeRateListByid(id))
.then(() => {
fetchSalalyEmployeeRate();
success($q, "ลบข้อมูลสำเร็จ");
.then(async () => {
await fetchSalalyEmployeeRate();
await success($q, "ลบข้อมูลสำเร็จ");
})
.catch((err) => {
messageError($q, err);
hideLoader();
})
.finally(() => {});
.finally(() => {
hideLoader();
});
});
}
@ -225,8 +227,7 @@ watch(
);
onMounted(async () => {
await fetchDataDetail();
await fetchSalalyEmployeeRate();
await Promise.all([fetchDataDetail(), fetchSalalyEmployeeRate()]);
});
</script>
<template>

8
src/modules/13_salary/views/salaryLists.vue
View file

@ -86,9 +86,11 @@ function getRound() {
store.roundYear = roundFilter.value.year;
store.isClosedRound = roundFilter.value.isClose;
await getSnap(roundFilter.value.shortCode);
await getAgency(roundFilter.value.revisionId);
await getAgencyPosition(roundFilter.value.revisionId);
await Promise.all([
getSnap(roundFilter.value.shortCode),
getAgency(roundFilter.value.revisionId),
getAgencyPosition(roundFilter.value.revisionId),
]);
} else {
isLoad.value = false;
roundFilter.value = "ไม่มีข้อมูล";

26
src/modules/14_KPI/components/Tab/01_Assessment.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts">
import { ref, onMounted, computed, watch, reactive } from "vue";
import { useQuasar, type QTableProps } from "quasar";
import { ref, onMounted, computed, watch } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import DialogListCriteria from "@/modules/14_KPI/components/Tab/Dialog/DialogListCriteria.vue";
@ -21,8 +21,7 @@ const dataListCriteria = ref<ListCriteria[]>([]);
const modalCriteria = ref<boolean>(false);
const $q = useQuasar();
const route = useRoute();
const { hideLoader, messageError, success, showLoader, dialogRemove } =
useCounterMixin();
const { messageError } = useCounterMixin();
const store = useKpiDataStore();
const evaluationId = ref<string>(route.params.id.toString());
@ -206,18 +205,13 @@ watch(
}
);
onMounted(() => {
showLoader(),
Promise.all([
getCriteria(),
fetchListPlanned(),
fetchListRole(),
fetchAssigned(),
]).finally(() => {
setTimeout(() => {
hideLoader();
}, 2500);
});
onMounted(async () => {
await Promise.all([
getCriteria(),
fetchListPlanned(),
fetchListRole(),
fetchAssigned(),
]);
});
</script>

5
src/modules/14_KPI/components/Tab/TabMain.vue
View file

@ -1,16 +1,11 @@
<script setup lang="ts">
import { ref } from "vue";
import { useKpiDataStore } from "@/modules/14_KPI/store";
import { useRoute } from "vue-router";
import Assessment from "@/modules/14_KPI/components/Tab/01_Assessment.vue";
import Evaluator from "@/modules/14_KPI/components/Tab/02_Evaluator.vue";
import CommanderAbove from "@/modules/14_KPI/components/Tab/03_CommanderAbove.vue";
import CommanderAboveOneStep from "@/modules/14_KPI/components/Tab/04_CommanderAboveOneStep.vue";
import File from "@/modules/14_KPI/components/Tab/05_File.vue";
const store = useKpiDataStore();
const route = useRoute();
const itemsTab = ref<any>([
{

8
src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue
View file

@ -160,8 +160,8 @@ function onDelete(id: string) {
? config.API.kpiAchievement("special") + `/${id}`
: "";
await http.delete(url);
success($q, "ลบข้อมูลสำเร็จ");
props.fetchList?.();
await props.fetchList?.();
await success($q, "ลบข้อมูลสำเร็จ");
} catch (err) {
messageError($q, err);
} finally {
@ -304,7 +304,7 @@ const isEditStep3 = computed(() => {
<q-tr :props="props" class="cursor-pointer">
<q-td>
<q-btn
v-if="isEditStep1"
v-if="isEditStep1"
flat
round
icon="mdi-eye"
@ -374,7 +374,7 @@ const isEditStep3 = computed(() => {
<q-tooltip>รายงานความก้าวหน้า</q-tooltip>
</q-btn>
<q-btn
v-if="!checkRoutePermisson"
v-if="!checkRoutePermisson"
flat
round
icon="warning"

10
src/modules/14_KPI/components/Tab/Topic/02_Competency.vue
View file

@ -220,9 +220,9 @@ function onDelete(id: string, type: string) {
showLoader();
http
.delete(config.API.kpiUserCapacity + `/${id}`)
.then((res) => {
success($q, "ลบข้อมูลสำเร็จ");
getData(type);
.then(async () => {
await getData(type);
await success($q, "ลบข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
@ -363,7 +363,9 @@ onMounted(() => {
<d-table
ref="table"
:columns="columns"
:rows="rows[item.id] && rows[item.id].length !== 0 ? rows[item.id] : []"
:rows="
rows[item.id] && rows[item.id].length !== 0 ? rows[item.id] : []
"
row-key="id"
flat
bordered

6
src/modules/14_KPI/components/Tab/Topic/03_Develop.vue
View file

@ -142,9 +142,9 @@ function onDelete(id: string) {
showLoader();
http
.delete(config.API.kpiAchievementDevelop + `/${id}`)
.then((res) => {
success($q, "ลบข้อมูลสำเร็จ");
getDevelop();
.then(async () => {
await getDevelop();
await success($q, "ลบข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);

2
src/modules/14_KPI/components/results/tableResults.vue
View file

@ -390,7 +390,7 @@ onMounted(() => {
/>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-tr :props="props">
<q-td v-if="tab === 'COMPLETE'">
<q-checkbox
v-if="tab === 'COMPLETE' && checkPermission($route)?.attrIsUpdate"

234
src/modules/14_KPI/views/detailView.vue
View file

@ -1,23 +1,17 @@
<script setup lang="ts">
import { ref, onMounted, reactive, computed, watch } from "vue";
import { ref, onMounted, reactive, onUnmounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import Avatar from "@/assets/!avatar_user.jpg";
import DialogHeader from "@/components/DialogHeader.vue";
import Assessment from "@/modules/14_KPI/components/Tab/01_Assessment.vue";
import Result from "@/modules/14_KPI/components/Tab/04_Result.vue";
import File from "@/modules/14_KPI/components/Tab/05_File.vue";
import DialogGovernment from "@/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue";
import DialogStatus from "@/modules/14_KPI/components/Tab/Dialog/DialogStatus.vue";
import type {
DataOption,
ItemsTab,
} from "@/modules/14_KPI/interface/index/Main";
import type { ResUserEvaluation } from "@/modules/14_KPI/interface/response/KPI";
import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
import { useKpiDataStore } from "@/modules/14_KPI/store";
import { useCounterMixin } from "@/stores/mixin";
@ -47,19 +41,13 @@ const itemsTab = ref<any[]>([
const splitterModel = ref<number>(12);
const modalGovernment = ref<boolean>(false);
const modalStatus = ref<boolean>(false);
// const modalScore = ref<boolean>(false);
const modalEdit = ref<boolean>(false);
const route = useRoute();
const checkRoutePermisson = ref<boolean>(route.name == "KPIDetailPage");
const id = ref<string>(route.params.id as string);
const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
// const plannedPoint = ref<string>("");
// const rolePoint = ref<string>("");
// const specialPoint = ref<string>("");
// const capacityPoint = ref<string>("");
const store = useKpiDataStore();
const $q = useQuasar();
const mixin = useCounterMixin();
@ -83,6 +71,7 @@ const commanderHighMainOp = ref<DataOption[]>([]);
const evaluatorId = ref<any>(null);
const commanderId = ref<any>(null);
const commanderHighId = ref<any>(null);
const avartar = ref<string>("");
const formProfile = reactive<any>({
fullName: "",
@ -98,45 +87,49 @@ const formProfile = reactive<any>({
const router = useRouter();
async function fetchEvaluation() {
showLoader();
await http
.get(config.API.kpiEvaluationUser + `/${id.value}`)
.then(async (res) => {
const data = res.data.result;
store.dataEvaluation = await data;
formProfile.status = store.convertStatus(data.evaluationStatus);
formProfile.result = store.convertResults(data.evaluationResults);
store.checkCompetency();
store.checkCompetencyDefaultCompetencyLevel();
formProfile.status = await store.convertStatus(data.evaluationStatus);
formProfile.result = await store.convertResults(data.evaluationResults);
fetchProfile(data.profileId);
await Promise.all([
store.checkCompetency(),
store.checkCompetencyDefaultCompetencyLevel(),
fetchProfile(data.profileId),
getProfile(),
]);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
setTimeout(() => {
hideLoader();
}, 1200);
});
}
async function fetchProfile(id: string) {
await http
.get(config.API.orgCheckAvatar(id))
.then(async (res) => {
if (res.data.result.avatarName) {
http
.get(
config.API.fileByFile(
"ทะเบียนประวัติ",
"โปรไฟล์",
id,
res.data.result.avatarName
)
await http.get(config.API.orgCheckAvatar(id)).then(async (res) => {
if (res.data.result.avatarName) {
http
.get(
config.API.fileByFile(
"ทะเบียนประวัติ",
"โปรไฟล์",
id,
res.data.result.avatarName
)
.then(async (res) => {
store.dataEvaluation.avartar = res.data.downloadUrl;
});
}
})
.catch(() => {
// profilePicture.value = avatar;
});
)
.then(async (res) => {
avartar.value = res.data.downloadUrl;
});
}
});
}
function close() {
@ -155,10 +148,10 @@ function onSubmit() {
? commanderHighId.value.id
: null,
})
.then((res) => {
fetchEvaluation();
.then(async () => {
await fetchEvaluation();
await success($q, "บันทึกสำเร็จ");
close();
success($q, "บันทึกสำเร็จ");
})
.catch((e) => {
messageError($q, e);
@ -169,6 +162,7 @@ function onSubmit() {
}
});
}
async function getOrgOp() {
http
.get(config.API.Kpiorg + `/${store.dataProfile.profileId}`)
@ -248,15 +242,15 @@ async function getProfile() {
store.dataProfile = await data;
await setTimeout(() => {
store.checkStep();
}, 800);
}, 1000);
})
.catch((e) => {
messageError($q, e);
});
}
async function getAll() {
await fetchEvaluation();
await getProfile();
}
function sendToEvaluatore() {
@ -269,9 +263,9 @@ function sendToEvaluatore() {
.put(config.API.kpiEvaluationUser + `/status/${id.value}`, {
status: "NEW_EVALUATOR",
})
.then((res) => {
success($q, "ส่งข้อตกลงให้ผู้ประเมินอนุมัติสำเร็จ");
fetchEvaluation();
.then(async () => {
await fetchEvaluation();
await success($q, "ส่งข้อตกลงให้ผู้ประเมินอนุมัติสำเร็จ");
})
.catch((e) => {
messageError($q, e);
@ -296,9 +290,9 @@ function sendToEvaluateEvaluatore() {
.put(config.API.kpiSendToStatus(id.value), {
status: "EVALUATING_EVALUATOR",
})
.then((res) => {
success($q, "ส่งให้ผู้ประเมินรายงานผลสำเร็จของงานสำเร็จ");
fetchEvaluation();
.then(async () => {
await fetchEvaluation();
await success($q, "ส่งให้ผู้ประเมินรายงานผลสำเร็จของงานสำเร็จ");
})
.catch((e) => {
messageError($q, e);
@ -323,9 +317,9 @@ function requireEdit() {
.put(config.API.kpiReqEditUser(id.value), {
status: "EVALUATOR",
})
.then((res) => {
success($q, "ขอแก้ไขสำเร็จ");
fetchEvaluation();
.then(async () => {
await fetchEvaluation();
await success($q, "ขอแก้ไขสำเร็จ");
})
.catch((e) => {
messageError($q, e);
@ -345,7 +339,6 @@ function openGovernment() {
}
function openStatus() {
router.push(`/probation-detail/${store.dataEvaluation.profileId}`);
// modalStatus.value = true;
}
function sendToEvauator() {
@ -356,7 +349,7 @@ function sendToEvauator() {
status: "EVALUATING",
id: [store.dataEvaluation.id],
})
.then(async (res) => {
.then(async () => {
await getAll();
store.tabMain = "3";
})
@ -416,6 +409,7 @@ const evaluator = ref<any>({
isPosmasterAct: false,
posmasterAct: [],
});
async function fetchProfileEvaluator(id: string) {
showLoader();
http
@ -444,6 +438,16 @@ onMounted(async () => {
store.isUpdate = await false;
await getAll();
});
onUnmounted(() => {
store.indicatorScoreVal = 0;
store.competencyScoreVal = 0;
store.devScoreVal = 0;
store.excusiveIndicator1ScoreVal = 0;
store.excusiveIndicator2ScoreVal = 0;
store.competencyScoreVal = 0;
});
</script>
<template>
@ -465,10 +469,7 @@ onMounted(async () => {
<q-card bordered flat class="relative-position">
<div class="row justify-center q-pa-md" v-if="!$q.screen.gt.xs">
<q-avatar size="80px">
<q-img
:src="store.dataEvaluation.avartar"
v-if="store.dataEvaluation.avartar !== undefined"
/>
<q-img :src="avartar" v-if="avartar !== undefined && avartar !== ''" />
<q-img src="@/assets/avatar_user.jpg" v-else />
</q-avatar>
</div>
@ -479,10 +480,7 @@ onMounted(async () => {
style="left: 2%; top: 50%; transform: translateY(-50%)"
>
<q-avatar size="80px">
<q-img
:src="store.dataEvaluation.avartar"
v-if="store.dataEvaluation.avartar !== undefined"
/>
<q-img :src="avartar" v-if="avartar !== undefined && avartar !== ''" />
<q-img src="@/assets/avatar_user.jpg" v-else />
</q-avatar>
</div>
@ -860,6 +858,7 @@ onMounted(async () => {
</q-expansion-item> </q-list
></q-card-section>
</q-card>
<q-dialog v-model="modalEdit" persistent>
<q-card bordered style="width: 50vh">
<q-form greedy @submit.prevent @validation-success="onSubmit">
@ -878,7 +877,8 @@ onMounted(async () => {
<div class="row">
<div class="col-10">
<q-select
:readonly="checkRoutePermisson||
:readonly="
checkRoutePermisson ||
!(
store.dataEvaluation.evaluationStatus === 'NEW' &&
store.rolePerson === 'USER'
@ -919,7 +919,8 @@ onMounted(async () => {
<div class="row">
<div class="col-10">
<q-select
:readonly="checkRoutePermisson||
:readonly="
checkRoutePermisson ||
!(
store.dataEvaluation.evaluationStatus === 'NEW' &&
store.rolePerson === 'USER'
@ -971,7 +972,8 @@ onMounted(async () => {
<div class="row">
<div class="col-10">
<q-select
:readonly="checkRoutePermisson||
:readonly="
checkRoutePermisson ||
!(
store.dataEvaluation.evaluationStatus === 'NEW' &&
store.rolePerson === 'USER'
@ -1026,9 +1028,10 @@ onMounted(async () => {
</div>
</div>
</q-card-section>
<q-separator v-if="!checkRoutePermisson"/>
<q-separator v-if="!checkRoutePermisson" />
<q-card-actions
v-if="!checkRoutePermisson&&
v-if="
!checkRoutePermisson &&
store.dataEvaluation.evaluationStatus === 'NEW' &&
store.rolePerson === 'USER'
"
@ -1095,13 +1098,13 @@ onMounted(async () => {
<div class="col-12">รักษาการในตำแหน่ง/การรักษาราชการแทน</div>
</div>
<div class="row">
<div class="col-12" v-if="evaluator.isPosmasterAct">
{{
`${evaluator.posmasterAct.prefix}${evaluator.posmasterAct.firstName} ${evaluator.posmasterAct.lastName} (${evaluator.posmasterAct.posNo})`
}}
<div class="col-12" v-if="evaluator.isPosmasterAct">
{{
`${evaluator.posmasterAct.prefix}${evaluator.posmasterAct.firstName} ${evaluator.posmasterAct.lastName} (${evaluator.posmasterAct.posNo})`
}}
</div>
<div class="col-12" v-else>-</div>
</div>
<div class="col-12" v-else>-</div>
</div>
</div>
</div>
</q-card-section>
@ -1109,88 +1112,7 @@ onMounted(async () => {
</q-card>
</q-dialog>
<!-- <q-dialog v-model="modalScore" persistent>
<q-card bordered style="width: 50vh">
<q-form greedy @submit.prevent @validation-success="onSubmitScore">
<DialogHeader tittle="แก้ไขคะแนนเต็ม" :close="clearScore" />
<q-separator />
<q-card-section>
<div class="column q-gutter-sm">
<q-input
v-model="plannedPoint"
label="งานตามแผนปฏิบัติราชการประจำปี"
dense
outlined
class="inputgreen"
mask="###"
:rules="[
(val) =>
!!val ||
val == '0' ||
'กรุณากรอกคะเเนนงานตามแผนปฏิบัติราชการประจำปี หรือ 0',
]"
hide-bottom-space
lazy-rules
/>
<q-input
v-model="rolePoint"
label="งานตามหน้าที่ความรับผิดชอบหลัก"
dense
outlined
class="inputgreen"
mask="###"
:rules="[(val:string) => !!val || val == '0' || `${'กรุณากรอกคะเเนนงานตามหน้าที่ความรับผิดชอบหลัก หรือ 0'}`,]"
hide-bottom-space
lazy-rules
/>
<q-input
v-model="specialPoint"
label="งานที่ได้รับมอบหมายพิเศษ"
dense
outlined
class="inputgreen"
mask="###"
:rules="[(val:string) => !!val || val == '0' ||`${'กรุณากรอกคะเเนนงานที่ได้รับมอบหมายพิเศษ หรือ 0'}`,]"
hide-bottom-space
lazy-rules
/>
<q-input
v-model="capacityPoint"
label="สมรรถนะ"
dense
outlined
class="inputgreen"
mask="###"
:rules="[(val:string) => !!val || val == '0' ||`${'กรุณากรอกคะเเนนสมรรถนะ หรือ 0'}`,]"
hide-bottom-space
lazy-rules
/>
</div>
</q-card-section>
<q-separator />
<q-card-actions class="bg-white row justify-between">
<div class="col-8 text-red q-px-sm">
<span v-if="scoreTotal == true"
>คะแนนเต็มรวมกันต้องเท่ากับ 100 คะแนน</span
>
</div>
<q-btn
label="บันทึก"
color="secondary"
type="submit"
:disable="totalScore !== 100"
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
>
</q-card-actions>
</q-form>
</q-card>
</q-dialog> -->
<DialogGovernment v-model:modal="modalGovernment" />
<!-- <DialogStatus
v-model:modal="modalStatus"
v-model:is-probation="store.dataProfile.isProbation"
/> -->
</template>
<style>
.bg-toolbar {

451
src/modules/14_KPI/views/mainDetail.vue
View file

@ -2,7 +2,6 @@
import avatar from "@/assets/avatar_user.jpg";
import { ref, reactive, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import keycloak from "@/plugins/keycloak";
import { useRoute, useRouter } from "vue-router";
@ -11,13 +10,13 @@ import config from "@/app.config";
import { useQuasar, type QTableProps } from "quasar";
interface ListMain {
id: string
id: string;
round_no: number;
date_start: string
date_finish: string
mentors: string
commander: string
chairman: string
date_start: string;
date_finish: string;
mentors: string;
commander: string;
chairman: string;
}
const profileId = ref<string>("");
@ -38,7 +37,7 @@ const mode = ref<any>($q.screen.gt.xs);
const profileImg = ref<string>("");
const router = useRouter();
const route = useRoute();
const idEva = ref<string>(route.params.id as string)
const idEva = ref<string>(route.params.id as string);
const formData = reactive<any>({
prefix: "",
firstName: "",
@ -123,7 +122,7 @@ function onMobile(type: string) {
function getMain() {
showLoader();
http
.get(config.API.profilePosition+`/${idEva.value}`)
.get(config.API.profilePosition + `/${idEva.value}`)
.then(async (res) => {
const data = res.data.result;
formData.prefix = data.prefix;
@ -182,7 +181,7 @@ onMounted(async () => {
});
</script>
<template>
<div class="toptitle col-12 row items-center">
<div class="toptitle col-12 row items-center">
<q-btn
icon="mdi-arrow-left"
unelevated
@ -195,104 +194,102 @@ onMounted(async () => {
/>
รายละเอียดงานที่ได้รับมอบหมาย
</div>
<div class="row q-col-gutter-md">
<div v-if="$q.screen.gt.xs" class="col-12">
<q-card>
<div class="bg-grey-1 row q-pa-sm items-center">
<span class="text-teal text-weight-bold text-body2">{{
formData.firstName
? `${formData.prefix}${formData.firstName} ${formData.lastName}`
: "-"
}}</span>
<div class="row q-col-gutter-md">
<div v-if="$q.screen.gt.xs" class="col-12">
<q-card>
<div class="bg-grey-1 row q-pa-sm items-center">
<span class="text-teal text-weight-bold text-body2">{{
formData.firstName
? `${formData.prefix}${formData.firstName} ${formData.lastName}`
: "-"
}}</span>
</div>
<q-resize-observer @resize="onResize" />
<q-card-section class="q-pa-md">
<div class="row">
<div class="col-2 text-center self-center">
<q-avatar :size="sizeImg" rounded>
<img
:src="profileImg"
style="border-radius: 10px; object-fit: cover"
/>
</q-avatar>
</div>
<q-resize-observer @resize="onResize" />
<q-card-section class="q-pa-md">
<div class="col-10 column justify-center no-wrap">
<div class="row text-grey-6">
<div class="col-4">ตำแหน่งในสายงาน</div>
<div class="col-4">ระดับ</div>
<div class="col-4">สังกัด</div>
</div>
<div class="row">
<div class="col-2 text-center self-center">
<q-avatar :size="sizeImg" rounded>
<img
:src="profileImg"
style="border-radius: 10px; object-fit: cover"
/>
</q-avatar>
<div class="col-4">
{{ formData.position ? formData.position : "-" }}
</div>
<div class="col-10 column justify-center no-wrap">
<div class="row text-grey-6">
<div class="col-4">ตำแหน่งในสายงาน</div>
<div class="col-4">ระดับ</div>
<div class="col-4">สังกัด</div>
</div>
<div class="row">
<div class="col-4">
{{ formData.position ? formData.position : "-" }}
</div>
<div class="col-4">
{{ formData.posLevelName ? formData.posLevelName : "-" }}
</div>
<div class="col-4">
{{ formData.org ? formData.org : "-" }}
</div>
</div>
<div class="col-4">
{{ formData.posLevelName ? formData.posLevelName : "-" }}
</div>
<div class="col-4">
{{ formData.org ? formData.org : "-" }}
</div>
</div>
</q-card-section>
</q-card>
</div>
<div v-else class="col-12">
<q-card bordered>
<div class="bg-grey-1 row q-pa-sm items-center">
<span class="text-teal text-weight-bold text-body2">{{
formData.firstName
? `${formData.prefix}${formData.firstName} ${formData.lastName}`
: "-"
}}</span>
</div>
<q-resize-observer @resize="onResize" />
<q-card-section>
<div class="text-center q-mt-md">
<q-avatar :size="sizeImg" rounded>
<img
:src="profileImg"
style="border-radius: 10px; object-fit: cover"
/>
</q-avatar>
</div>
</q-card-section>
<q-list class="q-mt-md">
<q-item>
<q-item-section>
<q-item-label class="text-grey-6"
>ตำแหน่งในสายงาน</q-item-label
>
<q-item-label>{{
formData.position ? formData.position : "-"
}}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label class="text-grey-6">ระดับ</q-item-label>
<q-item-label>{{
formData.posLevelName ? formData.posLevelName : "-"
}}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label class="text-grey-6">สังกัด</q-item-label>
<q-item-label>{{
formData.org ? formData.org : "-"
}}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</q-card-section>
</q-card>
</div>
<div v-else class="col-12">
<q-card bordered>
<div class="bg-grey-1 row q-pa-sm items-center">
<span class="text-teal text-weight-bold text-body2">{{
formData.firstName
? `${formData.prefix}${formData.firstName} ${formData.lastName}`
: "-"
}}</span>
</div>
<div class="col-12 row">
<q-card bordered class="col-12 q-pa-md">
<div class="row">
<!-- <q-btn
<q-resize-observer @resize="onResize" />
<q-card-section>
<div class="text-center q-mt-md">
<q-avatar :size="sizeImg" rounded>
<img
:src="profileImg"
style="border-radius: 10px; object-fit: cover"
/>
</q-avatar>
</div>
</q-card-section>
<q-list class="q-mt-md">
<q-item>
<q-item-section>
<q-item-label class="text-grey-6">ตำแหน่งในสายงาน</q-item-label>
<q-item-label>{{
formData.position ? formData.position : "-"
}}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label class="text-grey-6">ระดับ</q-item-label>
<q-item-label>{{
formData.posLevelName ? formData.posLevelName : "-"
}}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label class="text-grey-6">สังกัด</q-item-label>
<q-item-label>{{
formData.org ? formData.org : "-"
}}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
<div class="col-12 row">
<q-card bordered class="col-12 q-pa-md">
<div class="row">
<!-- <q-btn
@click="router.push(`/probation/add/${profileId}`)"
size="12px"
flat
@ -302,141 +299,133 @@ onMounted(async () => {
>
<q-tooltip>เพิ่มงานที่ได้รับมอบหมาย</q-tooltip>
</q-btn> -->
<q-space />
<q-input
class="inputgreen"
outlined
dense
v-model="filter"
label="ค้นหา"
:style="mode ? `max-width: 200px` : `max-width: 150px`"
>
<template v-slot:append>
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="filter = ''"
/>
<q-icon
v-else
name="search"
class="cursor-pointer"
@click="filter = ''"
/>
</template>
</q-input>
<q-select
v-if="$q.screen.gt.xs"
class="q-ml-sm"
dense
multiple
outlined
emit-value
map-options
options-cover
options-dense
option-value="name"
style="min-width: 150px"
v-model="visibleColumns"
:options="columns"
:display-value="$q.lang.table.columns"
<q-space />
<q-input
class="inputgreen"
outlined
dense
v-model="filter"
label="ค้นหา"
:style="mode ? `max-width: 200px` : `max-width: 150px`"
>
<template v-slot:append>
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="filter = ''"
/>
</div>
<div class="q-mt-sm">
<d-table
flat
dense
bordered
ref="table"
virtual-scroll
:rows="rows"
:columns="columns"
:grid="!$q.screen.gt.xs"
:filter="filter"
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<q-icon
v-else
name="search"
class="cursor-pointer"
@click="filter = ''"
/>
</template>
</q-input>
<q-select
v-if="$q.screen.gt.xs"
class="q-ml-sm"
dense
multiple
outlined
emit-value
map-options
options-cover
options-dense
option-value="name"
style="min-width: 150px"
v-model="visibleColumns"
:options="columns"
:display-value="$q.lang.table.columns"
/>
</div>
<div class="q-mt-sm">
<d-table
flat
dense
bordered
ref="table"
virtual-scroll
:rows="rows"
:columns="columns"
:grid="!$q.screen.gt.xs"
:filter="filter"
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-if="$q.screen.gt.xs" v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="(col, index) in props.cols"
:key="col.name"
<template v-if="$q.screen.gt.xs" v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="(col, index) in props.cols"
:key="col.name"
@click="onDetail(props.row.id)"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'status'">
{{ props.row.status ? props.row.status : "-" }}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
<template v-else v-slot:item="props">
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
<q-card bordered flat>
<q-list dense class="q-mt-lg relative-position">
<q-btn
icon="info"
color="info"
flat
dense
round
size="14px"
class="absolute_button"
@click="onDetail(props.row.id)"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'status'">
{{ props.row.status ? props.row.status : "-" }}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
<template v-else v-slot:item="props">
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
<q-card bordered flat>
<q-list dense class="q-mt-lg relative-position">
<q-btn
icon="info"
color="info"
flat
dense
round
size="14px"
class="absolute_button"
@click="onDetail(props.row.id)"
>
<q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
</q-btn>
<q-item v-for="col in props.cols" :key="col.name">
<q-item-section class="fix_top">
<q-item-label
class="text-grey-6 text-weight-medium"
>{{ col.label }}</q-item-label
>
</q-item-section>
<q-item-section class="fix_top">
<q-item-label
class="text-dark text-weight-medium"
>{{ col.value ? col.value : "-" }}</q-item-label
>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
<template v-slot:no-data>
<div
class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
>
<span> ไม่พบข้อมูล </span>
</div>
</template>
</d-table>
</div>
</q-card>
<q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
</q-btn>
<q-item v-for="col in props.cols" :key="col.name">
<q-item-section class="fix_top">
<q-item-label class="text-grey-6 text-weight-medium">{{
col.label
}}</q-item-label>
</q-item-section>
<q-item-section class="fix_top">
<q-item-label class="text-dark text-weight-medium">{{
col.value ? col.value : "-"
}}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
<template v-slot:no-data>
<div
class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
>
<span> ไม่พบข้อมูล </span>
</div>
</template>
</d-table>
</div>
</div>
</q-card>
</div>
</div>
</template>
<style scoped>
.absolute_button {