98 lines
2.9 KiB
Vue
98 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
|
|
/** impolerType*/
|
|
import type { PersonInformation } from "@/modules/12_evaluatePersonal/interface/response/evalute";
|
|
|
|
/** importComponents*/
|
|
import Tab1 from "@/modules/12_evaluatePersonal/components/Detail/Tab1.vue"; // ชำนาญการ
|
|
import Tab2 from "@/modules/12_evaluatePersonal/components/Detail/Tab2.vue"; // ชำนาญการพิเศษ
|
|
|
|
/** importStore*/
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
|
|
|
|
/** use*/
|
|
const mixin = useCounterMixin();
|
|
const store = useEvaluateDetailStore();
|
|
const router = useRouter();
|
|
const $q = useQuasar();
|
|
const route = useRoute();
|
|
|
|
const { showLoader, hideLoader, messageError } = mixin;
|
|
|
|
const id = ref<string>(route.params.id as string); // id รายการประเมิน
|
|
|
|
const data = ref<PersonInformation[]>([]);
|
|
const prefix = ref<string>("");
|
|
const fullName = ref<string>("");
|
|
|
|
/** funmction เรียกขอ้มูลคุณสมบัติ*/
|
|
async function fetchFeature() {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.evaluateGetDetail(id.value))
|
|
.then((res) => {
|
|
data.value = res.data.result;
|
|
const person: any = data.value;
|
|
if (data.value) {
|
|
fullName.value = person.fullName;
|
|
prefix.value = person.prefix;
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/** HookLifecycle*/
|
|
onMounted(async () => {
|
|
await fetchFeature();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="col-xs-12 col-sm-12 col-md-11">
|
|
<div class="toptitle col-12 row items-center">
|
|
<q-btn
|
|
icon="mdi-arrow-left"
|
|
unelevated
|
|
round
|
|
dense
|
|
flat
|
|
color="primary"
|
|
class="q-mr-sm"
|
|
@click="router.go(-1)"
|
|
/>
|
|
<div>รายละเอียดการประเมินบุคคลของ {{ `${prefix}${fullName}` }}</div>
|
|
</div>
|
|
</div>
|
|
<q-card flat bordered class="col-12">
|
|
<q-tabs
|
|
v-model="store.tabMenu"
|
|
dense
|
|
align="left"
|
|
inline-label
|
|
class="rounded-borders"
|
|
indicator-color="primary"
|
|
active-bg-color="teal-1"
|
|
active-class="text-primary"
|
|
>
|
|
<q-tab name="1" label="รายละเอียดการประเมิน" />
|
|
<q-tab name="2" label="กรรมการและการประชุม" />
|
|
</q-tabs>
|
|
<q-separator />
|
|
<q-tab-panels v-model="store.tabMenu" animated>
|
|
<q-tab-panel name="1"> <Tab1 :data="data" /></q-tab-panel>
|
|
|
|
<q-tab-panel name="2"> <Tab2 :data="data" /></q-tab-panel>
|
|
</q-tab-panels>
|
|
</q-card>
|
|
</template>
|