143 lines
4.8 KiB
Vue
143 lines
4.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
import { useRouter, useRoute } from "vue-router";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
|
|
/** importComponents*/
|
|
import BasicInfo from "@/modules/15_development/components/BasicInfo.vue"; // ข้อมูลเบื้องต้น
|
|
import Target from "@/modules/15_development/components/Target.vue"; // เป้าหมาย
|
|
import ProjectDetail from "@/modules/15_development/components/ProjectDetail.vue"; // ลักษณะโครงการ
|
|
import FollowResult from "@/modules/15_development/components/FollowResult.vue"; // การติดตามประเมินผล
|
|
import Other from "@/modules/15_development/components/Other.vue"; // อื่นๆ
|
|
import Record from "@/modules/15_development/components/Record.vue"; // บันทึกผล
|
|
|
|
/** importStore*/
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
|
|
|
|
/** use*/
|
|
const $q = useQuasar();
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const store = useDevelopmentDataStore();
|
|
const { success, showLoader, hideLoader, messageError, dialogConfirm } =
|
|
useCounterMixin();
|
|
|
|
const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
|
|
const projectId = ref<string>(route.params.id.toLocaleString());
|
|
const tab = ref<string>("BasicInfo");
|
|
const status = ref<string>("ONGOING");
|
|
|
|
/**
|
|
* function fetch สถานะ Project
|
|
* @param id projectId
|
|
*/
|
|
function getStatus(id: string) {
|
|
showLoader();
|
|
http
|
|
.get(config.API.developmentMainStatus(id))
|
|
.then((res) => {
|
|
status.value = res.data.result.status;
|
|
store.projectStatus = res.data.result.status;
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/** function ยืนยันการเสร็จสิ้นโครงการ*/
|
|
function onFinish(id: string) {
|
|
dialogConfirm(
|
|
$q,
|
|
async () => {
|
|
showLoader();
|
|
http
|
|
.get(config.API.developmentMainFinish(id))
|
|
.then(() => {
|
|
getStatus(id);
|
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
},
|
|
"ยืนยันการเสร็จสิ้นโครงการ",
|
|
"ต้องการยืนยันการเสร็จสิ้นโครงการนี้ใช่หรือไม่?"
|
|
);
|
|
}
|
|
|
|
/** hooklifecycle*/
|
|
onMounted(() => {
|
|
projectId.value && getStatus(projectId.value);
|
|
});
|
|
</script>
|
|
<template>
|
|
<div class="toptitle text-dark col-12 row items-center">
|
|
<q-btn
|
|
flat
|
|
round
|
|
dense
|
|
class="q-mr-sm"
|
|
icon="mdi-arrow-left"
|
|
color="primary"
|
|
@click="router.push('/development')"
|
|
/>
|
|
{{ `${title}โครงการ/หลักสูตรการฝึกอบรม` }}
|
|
<q-space />
|
|
<q-btn
|
|
v-if="status === 'ONGOING'"
|
|
unelevated
|
|
label="เสร็จสิ้นโครงการ"
|
|
color="green"
|
|
@click="onFinish(projectId)"
|
|
>
|
|
<q-tooltip>เสร็จสิ้นโครงการ</q-tooltip>
|
|
</q-btn>
|
|
<q-badge v-else outline color="primary" class="q-px-sm q-py-xs"
|
|
>เสร็จสิ้นโครงการ</q-badge
|
|
>
|
|
</div>
|
|
|
|
<q-card flat bordered class="col-12">
|
|
<q-tabs
|
|
v-model="tab"
|
|
dense
|
|
align="left"
|
|
inline-label
|
|
class="rounded-borders"
|
|
indicator-color="primary"
|
|
active-bg-color="teal-1"
|
|
active-class="text-primary"
|
|
>
|
|
<q-tab name="BasicInfo" label="ข้อมูลเบื้องต้น" />
|
|
<q-tab name="Target" label="เป้าหมาย" />
|
|
<q-tab name="ProjectDetail" label="ลักษณะโครงการ" />
|
|
<q-tab name="FollowResult" label="การติดตามประเมินผล" />
|
|
<q-tab name="Other" label="อื่นๆ" />
|
|
<q-tab name="Record" label="บันทึกผล" />
|
|
</q-tabs>
|
|
<q-separator />
|
|
<div class="q-pa-sm" style="padding: 0px">
|
|
<q-tab-panels v-model="tab" animated>
|
|
<q-tab-panel style="padding: 0px" name="BasicInfo">
|
|
<BasicInfo />
|
|
</q-tab-panel>
|
|
<q-tab-panel name="Target"> <Target /></q-tab-panel>
|
|
<q-tab-panel name="ProjectDetail"> <ProjectDetail /> </q-tab-panel>
|
|
<q-tab-panel name="FollowResult"> <FollowResult /> </q-tab-panel>
|
|
<q-tab-panel name="Other"> <Other /> </q-tab-panel>
|
|
<q-tab-panel name="Record"> <Record /> </q-tab-panel>
|
|
</q-tab-panels>
|
|
</div>
|
|
</q-card>
|
|
</template>
|
|
|
|
<style scoped></style>
|