ปรับฟอร์มบันทึกโครงการตาม tab
This commit is contained in:
parent
91b1b381d1
commit
c4c8f45d84
9 changed files with 882 additions and 697 deletions
|
|
@ -36,19 +36,18 @@ const {
|
|||
} = useCounterMixin();
|
||||
|
||||
const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
|
||||
const projectId = ref<string | null>(
|
||||
route.params.id ? route.params.id.toLocaleString() : null
|
||||
);
|
||||
const projectId = ref<string>(route.params.id.toLocaleString());
|
||||
const tab = ref<string>("BasicInfo");
|
||||
|
||||
const status = ref<string>("ONGOING");
|
||||
function fetchDataProject(id: string) {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.developmentMainById(id))
|
||||
.then((res) => {
|
||||
const data: ResDataProject = res.data.result;
|
||||
console.log(data);
|
||||
/** ข้อมูลเบื้องต้น*/
|
||||
status.value = data.status ? data.status : "ONGOING";
|
||||
store.formAddProject.year = data.year;
|
||||
store.formAddProject.projectName = data.projectName;
|
||||
store.formAddProject.reason = data.reason;
|
||||
|
|
@ -128,8 +127,8 @@ function fetchDataProject(id: string) {
|
|||
store.formAddProject.approved = data.approved;
|
||||
store.formAddProject.budgetPay = data.budgetPay;
|
||||
store.formAddProject.issues = data.issues;
|
||||
store.formAddProject.chance = data.chance;
|
||||
store.formAddProject.effects = data.effects;
|
||||
store.formAddProject.chance = Number(data.chance);
|
||||
store.formAddProject.effects = Number(data.effects);
|
||||
store.formAddProject.riskLevel = data.riskLevel;
|
||||
store.formAddProject.riskManagement = data.riskManagement;
|
||||
store.formAddProject.expect = data.expect;
|
||||
|
|
@ -212,6 +211,28 @@ function onSubmit() {
|
|||
}
|
||||
}
|
||||
|
||||
function onFinish(id: string) {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.developmentMainById(id)) // change path
|
||||
.then((res) => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
},
|
||||
"ยืนยันการเสร็จสิ้นโครงการ",
|
||||
"ต้องการยืนยันการเสร็จสิ้นโครงการนี้ใช่หรือไม่?"
|
||||
);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
projectId.value && fetchDataProject(projectId.value);
|
||||
});
|
||||
|
|
@ -221,68 +242,77 @@ onUnmounted(() => {
|
|||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<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
|
||||
dense
|
||||
unelevated
|
||||
label="บันทึก"
|
||||
id="onSubmit"
|
||||
type="submit"
|
||||
color="public"
|
||||
class="q-px-md"
|
||||
>
|
||||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
<!-- <q-btn unelevated label="บันทึก" color="public" @click="onSubmit">
|
||||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||
</q-btn> -->
|
||||
</div>
|
||||
<!-- <q-form greedy @submit.prevent @validation-success="onSubmit"> -->
|
||||
<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
|
||||
dense
|
||||
unelevated
|
||||
label="บันทึก"
|
||||
id="onSubmit"
|
||||
type="submit"
|
||||
color="public"
|
||||
class="q-px-md"
|
||||
>
|
||||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||
</q-btn> -->
|
||||
<q-btn
|
||||
v-if="status === 'FINISH'"
|
||||
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>
|
||||
</q-form>
|
||||
<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>
|
||||
<!-- </q-form> -->
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue