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

แก้ assess เป็น evaluate

Browse source
This commit is contained in:
Warunee Tamkoo 2023-12-14 14:49:27 +07:00
parent 5f97ee9377
commit d71b2a172f
25 changed files with 83 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

73
src/modules/06_evaluate/components/Stepper.vue Normal file
View file

@ -0,0 +1,73 @@
<script setup lang="ts">
import { ref } from "vue";
import { useEvaluateStore } from "@/modules/06_evaluate/store";
const store = useEvaluateStore();
</script>
<template>
<q-stepper
v-model="store.step"
vertical
animated
flat
ref="stepper"
:bordered="false"
>
<q-step
keep-alive
:name="1"
prefix="1"
title="ตรวจสอบคุณสมบัติ"
:done="store.step > 1"
>
</q-step>
<q-step :name="2" prefix="2" title="จัดเตรียมเอกสาร" :done="store.step > 2">
</q-step>
<q-step :name="3" prefix="3" title="ตรวจสอบเอกสาร" :done="store.step > 3">
</q-step>
<q-step
:name="4"
prefix="4"
title="รอตรวจสอบคุณสมบัติ"
:done="store.step > 4"
>
</q-step>
<q-step
:name="5"
prefix="5"
title="ประกาศบนเว็บไซต์"
:done="store.step > 5"
>
</q-step>
<q-step
:name="6"
prefix="6"
title="จัดเตรียมเอกสารเล่ม 2"
:done="store.step > 6"
>
</q-step>
<q-step
:name="7"
prefix="7"
title="ตรวจสอบเอกสารเล่ม 2"
:done="store.step > 7"
>
</q-step>
<q-step :name="8" prefix="8" title="รอพิจารณาผล" :done="store.step > 8">
</q-step>
<q-step :name="9" prefix="9" title="เสร็จสิ้น" :done="store.step > 9">
</q-step>
</q-stepper>
</template>
<style scoped></style>

197
src/modules/06_evaluate/components/Tab1.vue Normal file
View file

@ -0,0 +1,197 @@
<script setup lang="ts">
import { onMounted } from "vue";
import { useQuasar } from "quasar";
import Stepper from "@/modules/06_evaluate/components/Stepper.vue";
import Step1 from "@/modules/06_evaluate/components/step/step1.vue";
import Step2 from "@/modules/06_evaluate/components/step/step2.vue";
import Step3 from "@/modules/06_evaluate/components/step/step3.vue";
import Step4 from "@/modules/06_evaluate/components/step/step4.vue";
import Step5 from "@/modules/06_evaluate/components/step/step5.vue";
import Step6 from "@/modules/06_evaluate/components/step/step6.vue";
import Step7 from "@/modules/06_evaluate/components/step/step7.vue";
import Step8 from "@/modules/06_evaluate/components/step/step8.vue";
import Step9 from "@/modules/06_evaluate/components/step/step9.vue";
import ViewStep1 from "@/modules/06_evaluate/components/viewstep/viewStep1.vue";
import ViewStep3 from "@/modules/06_evaluate/components/viewstep/viewStep3.vue";
import ViewStep7 from "@/modules/06_evaluate/components/viewstep/viewStep7.vue";
import { useEvaluateStore } from "@/modules/06_evaluate/store";
import { useCounterMixin } from "@/stores/mixin";
const store = useEvaluateStore();
const mixin = useCounterMixin();
const { dialogConfirm } = mixin;
const $q = useQuasar();
function onCilckNextStep() {
store.step < 9 &&
dialogConfirm(
$q,
async () => {
const functionCreateDoc: (() => Promise<void>) | null =
store.step === 1
? await saveStep1
: store.step === 2
? await saveStep2
: store.step === 3
? await saveStep3
: store.step === 4
? await saveStep4
: store.step === 5
? await saveStep5
: store.step === 5
? await saveStep5
: store.step === 6
? await saveStep6
: store.step === 7
? await saveStep7
: store.step === 8
? await saveStep8
: store.step === 9
? await saveStep9
: null;
functionCreateDoc?.();
store.step++;
},
"ยืนยันการดำเนินการ",
"ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
);
}
function onCilckprPeviousStep() {
store.step > 1 &&
dialogConfirm(
$q,
() => {
store.step--;
},
"ยืนยันการย้อนกลับ",
"ต้องการย้อนกลับใช่หรือไม่?"
);
}
function updatedFormStep2() {}
async function saveStep1() {
console.log("Save 1");
}
async function saveStep2() {
console.log("Save 2");
}
async function saveStep3() {
console.log("Save 3");
}
async function saveStep4() {
console.log("Save 4");
}
async function saveStep5() {
console.log("Save 5");
}
async function saveStep6() {
console.log("Save 6");
}
async function saveStep7() {
console.log("Save 7");
}
async function saveStep8() {
console.log("Save 8");
}
async function saveStep9() {
console.log("Save 9");
}
onMounted(() => {
store.step = 1;
});
</script>
<template>
<div class="row q-col-gutter-md">
<div class="col-xs-12 col-sm-3">
<div class="toptitle">ประเมินชำนาญการ</div>
<Stepper />
</div>
<div class="col-xs-12 col-sm-9">
<div class="col-12 row">
<div class="col-9">
<div class="toptitle">
{{ store.step }}.{{ store.titel[store.step - 1] }}
</div>
</div>
<div class="col-3 text-right">
<router-link to="https://accreditation.ocsc.go.th/accreditation/search/curriculum">ไปยัง ก.พ. เพื่อตรวจสอบข้อมูล</router-link>
</div>
</div>
<div class="row q-col-gutter-md col-12">
<div
:class="
store.step === 2 ||
store.step === 4 ||
store.step === 5 ||
store.step === 6 ||
store.step === 8 ||
store.step === 9
? 'col-xs-12 col-sm-12 row'
: 'col-xs-12 col-sm-5 row'
"
>
<q-card flat bordered class="col-12 q-pa-md">
<q-card-section>
<Step1 v-if="store.step === 1" />
<Step2
v-if="store.step === 2"
@update:updatedForm="updatedFormStep2"
/>
<Step3 v-if="store.step === 3" />
<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-section>
</q-card>
</div>
<div
class="col-xs-12 col-sm-7 row"
v-if="store.step === 1 || store.step === 3 || store.step === 7"
>
<q-card flat bordered class="col-12">
<q-card-section>
<ViewStep1 v-if="store.step === 1" />
<ViewStep3 v-if="store.step === 3" />
<ViewStep7 v-if="store.step === 7" /> </q-card-section
></q-card>
</div>
</div>
<div class="q-mt-md q-gutter-md" align="right">
<q-btn
v-if="store.step !== 1"
unelevated
outline
label="ย้อนกลับ"
color="public"
@click="onCilckprPeviousStep"
/>
<q-btn
unelevated
label="ดำเนินการต่อ"
color="public"
@click="onCilckNextStep"
/>
</div>
</div>
</div>
</template>
<style>
.q-stepper--vertical .q-stepper__step-inner {
padding: 0;
}
</style>

122
src/modules/06_evaluate/components/Tab2.vue Normal file
View file

@ -0,0 +1,122 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import Stepper from "@/modules/06_evaluate/components/Stepper.vue";
import Step1 from "@/modules/06_evaluate/components/step/step1.vue";
import Step2 from "@/modules/06_evaluate/components/step/step2.vue";
import Step3 from "@/modules/06_evaluate/components/step/step3.vue";
import Step4 from "@/modules/06_evaluate/components/step/step4.vue";
import Step5 from "@/modules/06_evaluate/components/step/step5.vue";
import Step6 from "@/modules/06_evaluate/components/step/step6.vue";
import Step7 from "@/modules/06_evaluate/components/step/step7.vue";
import Step8 from "@/modules/06_evaluate/components/step/step8.vue";
import Step9 from "@/modules/06_evaluate/components/step/step9.vue";
import ViewStep1 from "@/modules/06_evaluate/components/viewstep/viewStep1.vue";
import ViewStep3 from "@/modules/06_evaluate/components/viewstep/viewStep3.vue";
import ViewStep7 from "@/modules/06_evaluate/components/viewstep/viewStep7.vue";
import { useEvaluateStore } from "@/modules/06_evaluate/store";
import { useCounterMixin } from "@/stores/mixin";
const store = useEvaluateStore();
const mixin = useCounterMixin();
const { dialogConfirm } = mixin;
const $q = useQuasar();
function onCilckNextStep() {
store.step < 9 &&
dialogConfirm($q, () => {
store.step++;
});
}
function onCilckprPeviousStep() {
store.step > 1 &&
dialogConfirm($q, () => {
store.step--;
});
}
onMounted(() => {
store.step = 1;
});
</script>
<template>
<div class="row q-col-gutter-md">
<div class="col-xs-12 col-sm-3">
<div class="toptitle">ประเมินชำนาญการพิเศษ</div>
<Stepper />
</div>
<div class="col-xs-12 col-sm-9">
<div class="toptitle">
{{ store.step }}.{{ store.titel[store.step - 1] }}
</div>
<div class="row q-col-gutter-md col-12">
<div
:class="
store.step === 2 ||
store.step === 4 ||
store.step === 5 ||
store.step === 6 ||
store.step === 8 ||
store.step === 9
? 'col-xs-12 col-sm-12 row'
: 'col-xs-12 col-sm-5 row'
"
>
<q-card flat bordered class="col-12 q-pa-md">
<q-card-section>
<Step1 v-if="store.step === 1" />
<Step2 v-if="store.step === 2" />
<Step3 v-if="store.step === 3" />
<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-section>
</q-card>
</div>
<div
class="col-xs-12 col-sm-7 row"
v-if="store.step === 1 || store.step === 3 || store.step === 7"
>
<q-card flat bordered class="col-12">
<q-card-section>
<ViewStep1 v-if="store.step === 1" />
<ViewStep3 v-if="store.step === 3" />
<ViewStep7 v-if="store.step === 7" /> </q-card-section
></q-card>
</div>
</div>
<div class="q-mt-md q-gutter-md" align="right">
<q-btn
v-if="store.step !== 1"
unelevated
outline
label="ย้อนกลับ"
color="public"
@click="onCilckprPeviousStep"
/>
<q-btn
unelevated
label="ดำเนินการต่อ"
color="public"
@click="onCilckNextStep"
/>
</div>
</div>
</div>
</template>
<style>
.q-stepper--vertical .q-stepper__step-inner {
padding: 0;
}
</style>

117
src/modules/06_evaluate/components/step/step1.vue Normal file
View file

@ -0,0 +1,117 @@
<script setup lang="ts">
import { reactive } from "vue";
const formData = reactive<any>({
isEducationalQft: false, // คุณวุฒิการศึกษา
isGovermantServiceHtr: false, // ประวัติการรับราชการ
isOperatingExp: false, // ประสบการณ์ในการปฏิบัติงาน
isMinPeriodOfTenure: false, // ระยะเวลาขั้นต่ำในการดำรงตำแหน่งในสายงานที่ขอเข้ารับการคัดเลือก
isHaveSpecificQft: false, // มีคุณสมบัติตรงตามคุณสมบัติเฉพาะสำหรับตำแหน่งที่กำหนด ในมาตราฐานกำหนดตำแหน่ง
isHaveProLicense: false, // มีใบอนุญาตประกอบวิชาชีพของสายงานต่างๆ
isHaveMinPeriodOrHoldPos: false, // มีระยะเวลาขั้นต่ำในการดำรงตำแหน่งหรือเคยดำรงตำแหน่งในสายงานที่จะคัดเลือกตามคุณวุฒิของบุคคลและระดับตำแหน่งที่จะคัดเลือก]
});
</script>
<template>
<q-list>
<q-item v-ripple>
<q-item-section avatar>
<q-checkbox
keep-color
color="primary"
v-model="formData.isEducationalQft"
/>
</q-item-section>
<q-item-section>
<q-item-label>คุณวุฒิการศึกษา </q-item-label>
</q-item-section>
</q-item>
<q-item v-ripple>
<q-item-section avatar>
<q-checkbox
keep-color
color="primary"
v-model="formData.isGovermantServiceHtr"
/>
</q-item-section>
<q-item-section>
<q-item-label>ประวัติการรับราชการ </q-item-label>
</q-item-section>
</q-item>
<q-item v-ripple>
<q-item-section avatar>
<q-checkbox
keep-color
color="primary"
v-model="formData.isOperatingExp"
/>
</q-item-section>
<q-item-section>
<q-item-label>ประสบการณ์ในการปฏิบัติงาน </q-item-label>
</q-item-section>
</q-item>
<q-item v-ripple>
<q-item-section avatar>
<q-checkbox
keep-color
color="primary"
v-model="formData.isMinPeriodOfTenure"
/>
</q-item-section>
<q-item-section>
<q-item-label
>ระยะเวลาขั้นต่ำในการดำรงตำแหน่งในสายงานที่ขอเข้ารับการคัดเลือก</q-item-label
>
</q-item-section>
</q-item>
<q-item v-ripple>
<q-item-section avatar>
<q-checkbox
keep-color
color="primary"
v-model="formData.isHaveSpecificQft"
/>
</q-item-section>
<q-item-section>
<q-item-label
>มีคุณสมบัติตรงตามคุณสมบัติเฉพาะ สำหรับตำแหน่งที่กำหนด
ในมาตรฐานกำหนดตำแหน่ง</q-item-label
>
</q-item-section>
</q-item>
<q-item v-ripple>
<q-item-section avatar>
<q-checkbox
keep-color
color="primary"
v-model="formData.isHaveProLicense"
/>
</q-item-section>
<q-item-section>
<q-item-label
>มีใบอนุญาตประกอบวิชาชีพของสายงานต่างๆ และ/หรือ
คุณวุฒิเพิ่มเติมครบถ้วนตามที่ ก.ก. กำหนด (แพทย์พยาบาล วิศวกรโยธา
สถาปนิก ฯลฯ)</q-item-label
>
</q-item-section>
</q-item>
<q-item v-ripple>
<q-item-section avatar>
<q-checkbox
keep-color
color="primary"
v-model="formData.isHaveMinPeriodOrHoldPos"
/>
</q-item-section>
<q-item-section>
<q-item-label
>มีระยะเวลาขั้นต่ำในการดำรงตำแหน่งหรือเคย
ดำรงตำแหน่งในสายงานที่จะคัดเลือก
ตามคุณวุฒิของบุคคลและระดับตำแหน่งที่จะคัดเลือก</q-item-label
>
</q-item-section>
</q-item>
</q-list>
</template>
<style scoped></style>

533
src/modules/06_evaluate/components/step/step2.vue Normal file
View file

@ -0,0 +1,533 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import keycloak from "@/plugins/keycloak";
import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
const $q = useQuasar();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError } = mixin;
const fullName = ref<string>(
keycloak.tokenParsed ? keycloak.tokenParsed.name!.toString() : ""
);
const fileEvaluation1 = ref<any>();
const fileEvaluation2 = ref<any>();
const fileEvaluation3 = ref<any>();
const fileEvaluation4 = ref<any>();
const fileEvaluation5 = ref<any>();
const fileEvaluation6 = ref<any>();
const modalView = ref<boolean>(false);
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const pdfSrc = ref<any>();
function onClickViewPDF(file: any) {
pdfSrc.value = file.webkitRelativePath;
modalView.value = true;
}
/** ไปหน้าต่อไปของรายงาน */
function nextPage() {
if (page.value < numOfPages.value) {
page.value++;
}
}
/** กลับหน้าก่อนหน้าของรายงาน */
function backPage() {
if (page.value !== 1) {
page.value--;
}
}
async function onClickDowloadFile(tp: string, templateName: string) {
showLoader();
const data = Object.assign(
{ fullName: fullName.value },
tp === "EV1_005" || tp === "EV1_007" ? { organizationName: "-" } : null,
tp === "EV1_007" ? { positionName: "-" } : null,
tp === "EV1_007" ? { positionLeaveName: "-" } : null
);
const body = {
template: tp,
reportName: templateName,
data: data,
};
console.log(body);
await http
.post(config.API.reportTemplate(), body)
.then((res) => {
console.log(res);
})
.catch((err) => {
messageError($q,err)
})
.finally(() => {
hideLoader();
});
}
</script>
<template>
<div class="row q-col-gutter-md">
<!-- แบบพิจารณาคุณสมบัติบุคคล -->
<div class="col-6">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
แบบพิจารณาคุณสมบัติบุคคล
</div>
<div class="col-12"><q-separator /></div>
<div class="row">
<div class="col-12 q-pa-sm">
<div class="row q-col-gutter-md col-12">
<div class="col-xs-12 col-sm-6 row">
<q-btn
class="col-12"
outline
icon="download"
label="ดาวน์โหลดต้นแบบ"
color="primary"
@click="onClickDowloadFile('EV1_005', 'template-1')"
>
<q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-6 row">
<q-btn
v-if="fileEvaluation1"
class="col-12"
outline
icon="visibility"
label="ดูไฟล์เอกสาร"
color="primary"
@click="onClickViewPDF(fileEvaluation1)"
>
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-11 row">
<q-file
v-model="fileEvaluation1"
class="col-12"
outlined
dense
hide-bottom-space
lazy-rules
accept=".pdf"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</div>
<div class="col-1 self-center text-center">
<q-btn flat round dense color="primary" icon="mdi-upload"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</div>
</div>
</div>
</div>
</q-card>
</div>
<!-- แบบแสดงรายละเอียดการเสนอผลงาน -->
<div class="col-6">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
แบบแสดงรายละเอียดการเสนอผลงาน
</div>
<div class="col-12"><q-separator /></div>
<div class="row">
<div class="col-12 q-pa-sm">
<div class="row q-col-gutter-md col-12">
<div class="col-xs-12 col-sm-6 row">
<q-btn
class="col-12"
outline
icon="download"
label="ดาวน์โหลดต้นแบบ"
color="primary"
@click="onClickDowloadFile('EV1_006', 'template-2')"
>
<q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-6 row">
<q-btn
v-if="fileEvaluation2"
class="col-12"
outline
icon="visibility"
label="ดูไฟล์เอกสาร"
color="primary"
>
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-11 row">
<q-file
v-model="fileEvaluation2"
class="col-12"
outlined
dense
hide-bottom-space
lazy-rules
accept=".pdf"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</div>
<div class="col-1 self-center text-center">
<q-btn flat round dense color="primary" icon="mdi-upload"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</div>
</div>
</div>
</div>
</q-card>
</div>
<!-- แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล -->
<div class="col-6">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
</div>
<div class="col-12"><q-separator /></div>
<div class="row">
<div class="col-12 q-pa-sm">
<div class="row q-col-gutter-md col-12">
<div class="col-xs-12 col-sm-6 row">
<q-btn
class="col-12"
outline
icon="download"
label="ดาวน์โหลดต้นแบบ"
color="primary"
@click="onClickDowloadFile('EV1_007', 'template-3')"
>
<q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-6 row">
<q-btn
v-if="fileEvaluation3"
class="col-12"
outline
icon="visibility"
label="ดูไฟล์เอกสาร"
color="primary"
>
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-11 row">
<q-file
v-model="fileEvaluation3"
class="col-12"
outlined
dense
hide-bottom-space
lazy-rules
accept=".pdf"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</div>
<div class="col-1 self-center text-center">
<q-btn flat round dense color="primary" icon="mdi-upload"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</div>
</div>
</div>
</div>
</q-card>
</div>
<!-- แบบประเมินคุณลักษณะบุคคล -->
<div class="col-6">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
แบบประเมินคุณลักษณะบุคคล
</div>
<div class="col-12"><q-separator /></div>
<div class="row">
<div class="col-12 q-pa-sm">
<div class="row q-col-gutter-md col-12">
<div class="col-xs-12 col-sm-6 row">
<q-btn
class="col-12"
outline
icon="download"
label="ดาวน์โหลดต้นแบบ"
color="primary"
@click="onClickDowloadFile('EV1_008', 'template-4')"
>
<q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-6 row">
<q-btn
v-if="fileEvaluation4"
class="col-12"
outline
icon="visibility"
label="ดูไฟล์เอกสาร"
color="primary"
>
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-11 row">
<q-file
v-model="fileEvaluation4"
class="col-12"
outlined
dense
hide-bottom-space
lazy-rules
accept=".pdf"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</div>
<div class="col-1 self-center text-center">
<q-btn flat round dense color="primary" icon="mdi-upload"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</div>
</div>
</div>
</div>
</q-card>
</div>
<!-- แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก -->
<div class="col-6">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก
</div>
<div class="col-12"><q-separator /></div>
<div class="row">
<div class="col-12 q-pa-sm">
<div class="row q-col-gutter-md col-12">
<div class="col-xs-12 col-sm-6 row">
<q-btn
class="col-12"
outline
icon="download"
label="ดาวน์โหลดต้นแบบ"
color="primary"
@click="onClickDowloadFile('EV1_009', 'template-5')"
>
<q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-6 row">
<q-btn
v-if="fileEvaluation5"
class="col-12"
outline
icon="visibility"
label="ดูไฟล์เอกสาร"
color="primary"
@click="onClickDowloadFile('EV1_009', 'template-5')"
>
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-11 row">
<q-file
v-model="fileEvaluation5"
class="col-12"
outlined
dense
hide-bottom-space
lazy-rules
accept=".pdf"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</div>
<div class="col-1 self-center text-center">
<q-btn flat round dense color="primary" icon="mdi-upload"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</div>
</div>
</div>
</div>
</q-card>
</div>
<!--ผลงานที่จะส่งประเมิน -->
<div class="col-6">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
ผลงานที่จะส่งประเมิน
</div>
<div class="col-12"><q-separator /></div>
<div class="row">
<div class="col-12 q-pa-sm">
<div class="row q-col-gutter-md col-12">
<div class="col-xs-12 col-sm-6 row">
<q-btn
class="col-12"
outline
icon="download"
label="ดาวน์โหลดต้นแบบ"
color="primary"
@click="onClickDowloadFile('EV1_010', 'template-6')"
>
<q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-6 row">
<q-btn
v-if="fileEvaluation6"
class="col-12"
outline
icon="visibility"
label="ดูไฟล์เอกสาร"
color="primary"
>
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-11 row">
<q-file
v-model="fileEvaluation6"
class="col-12"
outlined
dense
hide-bottom-space
lazy-rules
accept=".pdf"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</div>
<div class="col-1 self-center text-center">
<q-btn flat round dense color="primary" icon="mdi-upload"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</div>
</div>
</div>
</div>
</q-card>
</div>
</div>
<!-- Dialog Full Screen -->
<q-dialog
v-model="modalView"
persistent
:maximized="true"
transition-show="slide-up"
transition-hide="slide-down"
>
<q-card class="bg-white">
<div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
<q-btn
icon="close"
unelevated
round
dense
style="color: #ff8080; background-color: #ffdede"
size="12px"
v-close-popup
/>
</div>
<div class="q-pa-md">
<div class="row items-start items-center">
<div class="col">
<q-btn
padding="xs"
icon="mdi-chevron-left"
color="grey-2"
text-color="grey-5"
size="md"
class="my-auto"
@click="backPage"
:disable="page == 1"
/>
</div>
<div class="col-12 col-md-auto">
<div class="q-pa-md flex">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</div>
</div>
<div class="col text-right">
<q-btn
padding="xs"
icon="mdi-chevron-right"
color="grey-2"
text-color="grey-5"
size="md"
@click="nextPage"
:disable="page === numOfPages"
/>
</div>
</div>
<div class="row items- items-center">
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
</div>
<div class="row items- items-end">
<div class="col">
<q-btn
padding="xs"
icon="mdi-chevron-left"
color="grey-2"
text-color="grey-5"
size="md"
class="my-auto"
@click="backPage"
:disable="page == 1"
/>
</div>
<div class="col-12 col-md-auto">
<div class="q-pa-md flex">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</div>
</div>
<div class="col text-right">
<q-btn
padding="xs"
icon="mdi-chevron-right"
color="grey-2"
text-color="grey-5"
size="md"
@click="nextPage"
:disable="page === numOfPages"
/>
</div>
</div>
</div>
</q-card>
</q-dialog>
</template>
<style scoped></style>

80
src/modules/06_evaluate/components/step/step3.vue Normal file
View file

@ -0,0 +1,80 @@
<script setup lang="ts">
import { reactive, ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useEvaluateStore } from "@/modules/06_evaluate/store";
const store = useEvaluateStore();
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const selectedItem = ref(1);
function handleItemClick(itemNumber: number) {
store.tabPanels = itemNumber.toString();
selectedItem.value = itemNumber;
}
</script>
<template>
<q-list separator>
<q-item
clickable
v-ripple
:active="selectedItem === 1 ? true : false"
active-class="text-primary"
@click="handleItemClick(1)"
>
<q-item-section>แบบพิจารณาคุณสมบัติบุคคล</q-item-section>
</q-item>
<q-item
clickable
v-ripple
:active="selectedItem === 2 ? true : false"
active-class="text-primary"
@click="handleItemClick(2)"
>
<q-item-section>แบบแสดงรายละเอียดการเสนอผลงาน</q-item-section>
</q-item>
<q-item
clickable
v-ripple
:active="selectedItem === 3 ? true : false"
active-class="text-primary"
@click="handleItemClick(3)"
>
<q-item-section
>แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล</q-item-section
>
</q-item>
<q-item
clickable
v-ripple
:active="selectedItem === 4 ? true : false"
active-class="text-primary"
@click="handleItemClick(4)"
>
<q-item-section> แบบประเมินคุณลักษณะบุคคล </q-item-section>
</q-item>
<q-item
clickable
v-ripple
:active="selectedItem === 5 ? true : false"
active-class="text-primary"
@click="handleItemClick(5)"
>
<q-item-section> แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก </q-item-section>
</q-item>
<q-item
clickable
v-ripple
:active="selectedItem === 6 ? true : false"
active-class="text-primary"
@click="handleItemClick(6)"
>
<q-item-section> ผลงานที่จะส่งประเมิน </q-item-section>
</q-item>
</q-list>
</template>
<style scoped></style>

22
src/modules/06_evaluate/components/step/step4.vue Normal file
View file

@ -0,0 +1,22 @@
<script setup lang="ts">
import { ref } from "vue";
const status = ref<string>("WAIT_CHECK_DOC_V1");
</script>
<template>
<div class="row">
<div class="col-12 text-center">
<q-badge
v-if="status == 'WAIT_CHECK_DOC_V1'"
outline
color="orange-5"
label="รอตรวจสอบคุณสมบัติ"
class="q-pa-sm"
style="font-size: 16px"
/>
</div>
</div>
</template>
<style scoped></style>

26
src/modules/06_evaluate/components/step/step5.vue Normal file
View file

@ -0,0 +1,26 @@
<script setup lang="ts">
import { ref } from "vue";
const status = ref<string>("ANNOUNCE_WEB");
const website = ref<string>("https://bma-ehr.frappet.com/");
</script>
<template>
<div class="row">
<div class="col-12 text-center q-">
<q-badge
v-if="status == 'ANNOUNCE_WEB'"
outline
color="primary"
label="ประกาศบนเว็บไซต์"
class="q-pa-sm"
style="font-size: 16px"
/>
<div>
<a :href="website" target="_blank">{{ website }}</a>
</div>
</div>
</div>
</template>
<style scoped></style>

106
src/modules/06_evaluate/components/step/step6.vue Normal file
View file

@ -0,0 +1,106 @@
<script setup lang="ts">
import { ref } from "vue";
import ViewPDF from "@/modules/06_evaluate/components/viewstep/viewPDF.vue";
const fileEvaluation1 = ref<any>();
const pdfSrc = ref<any>();
const modalView = ref<boolean>(false);
function onClickViewPDF(file: any) {
pdfSrc.value = file.webkitRelativePath;
modalView.value = true;
}
</script>
<template>
<div class="row q-col-gutter-md">
<div class="col-6">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
เอกสารเล่ม 2
</div>
<div class="col-12"><q-separator /></div>
<div class="row">
<div class="col-12 q-pa-sm">
<div class="row q-col-gutter-md col-12">
<!-- <div class="col-xs-12 col-sm-6 row">
<q-btn
class="col-12"
outline
icon="download"
label="ดาวน์โหลดต้นแบบ"
color="primary"
>
<q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
>
</div> -->
<div class="col-xs-12 col-sm-6 row">
<q-btn
v-if="fileEvaluation1"
class="col-12"
outline
icon="visibility"
label="ดูไฟล์เอกสาร"
color="primary"
@click="onClickViewPDF(fileEvaluation1)"
>
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-11 row">
<q-file
v-model="fileEvaluation1"
class="col-12"
outlined
dense
hide-bottom-space
lazy-rules
accept=".pdf"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</div>
<div class="col-1 self-center text-center">
<q-btn flat round dense color="primary" icon="mdi-upload"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</div>
</div>
</div>
</div>
</q-card>
</div>
</div>
<!-- Dialog Full Screen -->
<q-dialog
v-model="modalView"
persistent
:maximized="true"
transition-show="slide-up"
transition-hide="slide-down"
>
<q-card class="bg-white">
<div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
<q-btn
icon="close"
unelevated
round
dense
style="color: #ff8080; background-color: #ffdede"
size="12px"
v-close-popup
/>
</div>
<div class="q-pa-md">
<ViewPDF />
</div>
</q-card>
</q-dialog>
</template>
<style scoped></style>

33
src/modules/06_evaluate/components/step/step7.vue Normal file
View file

@ -0,0 +1,33 @@
<script setup lang="ts">
import { reactive, ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useEvaluateStore } from "@/modules/06_evaluate/store";
const store = useEvaluateStore();
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const selectedItem = ref(1);
function handleItemClick(itemNumber: number) {
store.tabPanels = itemNumber.toString();
selectedItem.value = itemNumber;
}
</script>
<template>
<q-list separator>
<q-item
clickable
v-ripple
:active="selectedItem === 1 ? true : false"
active-class="text-primary"
@click="handleItemClick(1)"
>
<q-item-section>เอกสารเล่ม 2</q-item-section>
</q-item>
</q-list>
</template>
<style scoped></style>

22
src/modules/06_evaluate/components/step/step8.vue Normal file
View file

@ -0,0 +1,22 @@
<script setup lang="ts">
import { ref } from "vue";
const status = ref<string>("WAIT_CHECK_DOC_V2");
</script>
<template>
<div class="row">
<div class="col-12 text-center">
<q-badge
v-if="status == 'WAIT_CHECK_DOC_V2'"
outline
color="orange-5"
label="รอพิจารณาผลการประเมิน"
class="q-pa-sm"
style="font-size: 16px"
/>
</div>
</div>
</template>
<style scoped></style>

22
src/modules/06_evaluate/components/step/step9.vue Normal file
View file

@ -0,0 +1,22 @@
<script setup lang="ts">
import { ref } from "vue";
const status = ref<string>("DONE");
</script>
<template>
<div class="row">
<div class="col-12 text-center">
<q-badge
v-if="status == 'DONE'"
outline
color="green"
label="เสร็จสิ้น"
class="q-pa-sm"
style="font-size: 16px"
/>
</div>
</div>
</template>
<style scoped></style>

180
src/modules/06_evaluate/components/viewstep/viewPDF.vue Normal file
View file

@ -0,0 +1,180 @@
<script setup lang="ts">
import { ref } from "vue";
const splitterModel = ref(14);
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const pdfSrc = ref<any>();
/** ไปหน้าต่อไปของรายงาน */
function nextPage() {
if (page.value < numOfPages.value) {
page.value++;
}
}
/** กลับหน้าก่อนหน้าของรายงาน */
function backPage() {
if (page.value !== 1) {
page.value--;
}
}
</script>
<template>
<q-splitter
v-model="splitterModel"
horizontal
style="
height: 50vh;
border: 1px solid rgb(210, 210, 210);
border-radius: 5px;
"
before-class="overflow-hidden disable"
separator-class="bg-white disabled"
>
<template v-slot:before>
<div class="q-px-sm">
<div class="row items-start items-center">
<div class="col">
<q-btn
padding="xs"
icon="mdi-chevron-left"
color="grey-2"
text-color="grey-5"
size="md"
class="my-auto"
@click="backPage"
:disable="page == 1"
/>
</div>
<div class="col-12 col-md-auto">
<div class="q-pa-md flex">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</div>
</div>
<div class="col text-right">
<q-btn
padding="xs"
icon="mdi-chevron-right"
color="grey-2"
text-color="grey-5"
size="md"
@click="nextPage"
:disable="page === numOfPages"
/>
</div>
</div>
</div>
</template>
<template v-slot:after>
<div class="q-pa-md">
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
</div>
</template>
<template v-slot:default>
<div class="q-pa-md">
<div class="row items-start items-center">
<div class="col">
<q-btn
padding="xs"
icon="mdi-chevron-left"
color="grey-2"
text-color="grey-5"
size="md"
class="my-auto"
@click="backPage"
:disable="page == 1"
/>
</div>
<div class="col-12 col-md-auto">
<div class="q-pa-md flex">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</div>
</div>
<div class="col text-right">
<q-btn
padding="xs"
icon="mdi-chevron-right"
color="grey-2"
text-color="grey-5"
size="md"
@click="nextPage"
:disable="page === numOfPages"
/>
</div>
</div>
</div>
</template>
</q-splitter>
<!-- <q-card class="bg-white">
<div class="q-pa-md">
<div class="row items-start items-center">
<div class="col">
<q-btn
padding="xs"
icon="mdi-chevron-left"
color="grey-2"
text-color="grey-5"
size="md"
class="my-auto"
@click="backPage"
:disable="page == 1"
/>
</div>
<div class="col-12 col-md-auto">
<div class="q-pa-md flex">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</div>
</div>
<div class="col text-right">
<q-btn
padding="xs"
icon="mdi-chevron-right"
color="grey-2"
text-color="grey-5"
size="md"
@click="nextPage"
:disable="page === numOfPages"
/>
</div>
</div>
<div class="row items- items-center">
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
</div>
<div class="row items- items-end">
<div class="col">
<q-btn
padding="xs"
icon="mdi-chevron-left"
color="grey-2"
text-color="grey-5"
size="md"
class="my-auto"
@click="backPage"
:disable="page == 1"
/>
</div>
<div class="col-12 col-md-auto">
<div class="q-pa-md flex">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</div>
</div>
<div class="col text-right">
<q-btn
padding="xs"
icon="mdi-chevron-right"
color="grey-2"
text-color="grey-5"
size="md"
@click="nextPage"
:disable="page === numOfPages"
/>
</div>
</div>
</div>
</q-card> -->
</template>
<style scoped></style>

7
src/modules/06_evaluate/components/viewstep/viewStep1.vue Normal file
View file

@ -0,0 +1,7 @@
<script setup lang="ts"></script>
<template>
<div>ข้อมูลคุณสมบัติ</div>
</template>
<style scoped></style>

34
src/modules/06_evaluate/components/viewstep/viewStep3.vue Normal file
View file

@ -0,0 +1,34 @@
<script setup lang="ts">
import ViewPDF from "@/modules/06_evaluate/components/viewstep/viewPDF.vue";
import { useEvaluateStore } from "@/modules/06_evaluate/store";
const store = useEvaluateStore();
</script>
<template>
<q-tab-panels v-model="store.tabPanels" animated swipeable vertical>
<q-tab-panel name="1">
<ViewPDF />
</q-tab-panel>
<q-tab-panel name="2">
<ViewPDF />
</q-tab-panel>
<q-tab-panel name="3">
<ViewPDF />
</q-tab-panel>
<q-tab-panel name="4">
<ViewPDF />
</q-tab-panel>
<q-tab-panel name="5">
<ViewPDF />
</q-tab-panel>
<q-tab-panel name="6">
<ViewPDF />
</q-tab-panel>
</q-tab-panels>
</template>
<style scoped></style>

17
src/modules/06_evaluate/components/viewstep/viewStep7.vue Normal file
View file

@ -0,0 +1,17 @@
<script setup lang="ts">
import ViewPDF from "@/modules/06_evaluate/components/viewstep/viewPDF.vue";
import { useEvaluateStore } from "@/modules/06_evaluate/store";
const store = useEvaluateStore();
</script>
<template>
<q-tab-panels v-model="store.tabPanels" animated swipeable vertical>
<q-tab-panel name="1">
<ViewPDF />
</q-tab-panel>
</q-tab-panels>
</template>
<style scoped></style>