hrms-mgt/src/modules/05_placement/components/probation/FormEvaluation/Template2.vue
setthawutttty e4c357bcf9 no message
2023-09-08 09:52:13 +07:00

151 lines
4 KiB
Vue

<script setup lang="ts">
import { ref, defineAsyncComponent, onMounted } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useAssignDataStore } from "@/modules/05_placement/storeAssign";
const Header = defineAsyncComponent(
() =>
import(
"@/modules/05_placement/components/probation/FormEvaluation/Header.vue"
)
);
const FormEvaluate = defineAsyncComponent(
() =>
import(
"@/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue"
)
);
const router = useRouter();
const route = useRoute();
const mixin = useCounterMixin();
const $q = useQuasar();
const { showLoader, hideLoader, messageError } = mixin;
const assignStore = useAssignDataStore();
const { fecthdataAssign } = assignStore;
const assignId = ref<string>(route.params.form.toString());
const personalId = ref<string>(route.params.personalId.toString());
const fullname = ref<string>("");
const tab = ref<string>("save1");
const tabs = ref<any>([]);
const dataArrayNumber = ref<number>(1);
const evaluate = ref<any>([]);
const changeTab = (tabVal: string) => {
tab.value = tabVal;
dataArrayNumber.value = Number(tabVal.charAt(4));
};
onMounted(() => {
fecthAssign(assignId.value);
});
const fecthAssign = async (id: string) => {
showLoader();
await http
.get(config.API.createformCommader(id))
.then(async (res: any) => {
await fecthdataAssign(res.data.data);
evaluate.value = assignStore.evaluate;
tabs.value = evaluate.value;
fullname.value = res.data.data.experimentee ? res.data.data.experimentee.name : "";
dataArrayNumber.value = 1;
})
.catch((e: any) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const downloadFile = (response: any, filename: string) => {
const link = document.createElement("a");
var fileName = filename;
link.href = window.URL.createObjectURL(new Blob([response.data]));
link.setAttribute("download", fileName);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
const FileDownload = async (type: string) => {
let numTab = evaluate.value.find((e: any) => e.no === dataArrayNumber.value);
showLoader();
await http
.get(config.API.reportEvaluate(type, numTab.assign_id,numTab.no), {
responseType: "blob",
})
.then(async (res) => {
downloadFile(
res,
`แบบประเมินผล(ผู้บังคับบัญชา)_${fullname.value}_ครั้งที่${numTab.no}.${type}`
);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const addData = () => {
router.push(
`/probation/detail/addevalua/${personalId.value}/${assignId.value}`
);
};
</script>
<template>
<Header
v-if="tabs.length > 0"
:change-tab="changeTab"
:loop="tabs.length"
:add-data="addData"
:FileDownload="FileDownload"
/>
<q-tab-panels
v-model="tab"
animated
swipeable
vertical
transition-prev="jump-up"
transition-next="jump-up"
v-if="tabs.length > 0"
class="mt"
>
<q-tab-panel
v-for="item in assignStore.evaluate"
:name="`save${item.no}`"
:key="item.no"
>
<FormEvaluate
:tab="tab"
:data="assignStore.evaluate.find((x: any) => x.no === dataArrayNumber)"
action="edit"
/>
</q-tab-panel>
</q-tab-panels>
<!-- <q-page-container v-if="tabs.length > 0">
<FormEvaluate
:tab="tab"
:data="evaluate.find((x: any) => x.no === dataArrayNumber)"
action="edit"
/>
</q-page-container> -->
<div v-else class="q-gutter-md">
<div class="flex justify-center items-center q-my-md q-gutter-md">
<q-btn outline color="primary" label="สร้างแบบประเมิน" @click="addData" />
</div>
</div>
</template>
<style lang="scss" scoped>
.mt {
margin-top: 25px;
}
</style>