UI ประเมินผล
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
75c677f58c
commit
27f564588c
12 changed files with 332 additions and 40 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import Stepper from "@/modules/06_assess/componenst/Stepper.vue";
|
||||
|
|
@ -15,6 +15,7 @@ import Step9 from "@/modules/06_assess/componenst/step/step9.vue";
|
|||
|
||||
import ViewStep1 from "@/modules/06_assess/componenst/viewstep/viewStep1.vue";
|
||||
import ViewStep3 from "@/modules/06_assess/componenst/viewstep/viewStep3.vue";
|
||||
import ViewStep7 from "@/modules/06_assess/componenst/viewstep/viewStep7.vue";
|
||||
|
||||
import { useAssessStore } from "@/modules/06_assess/store";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
|
@ -38,6 +39,10 @@ function onCilckprPeviousStep() {
|
|||
store.step--;
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
store.step = 1;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -54,7 +59,12 @@ function onCilckprPeviousStep() {
|
|||
<div class="row q-col-gutter-md col-12">
|
||||
<div
|
||||
:class="
|
||||
store.step === 2
|
||||
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'
|
||||
"
|
||||
|
|
@ -73,11 +83,15 @@ function onCilckprPeviousStep() {
|
|||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-7 row" v-if="store.step !== 2">
|
||||
<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" /> </q-card-section
|
||||
<ViewStep3 v-if="store.step === 3" />
|
||||
<ViewStep7 v-if="store.step === 7" /> </q-card-section
|
||||
></q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import Stepper from "@/modules/06_assess/componenst/Stepper.vue";
|
||||
|
|
@ -15,6 +15,7 @@ import Step9 from "@/modules/06_assess/componenst/step/step9.vue";
|
|||
|
||||
import ViewStep1 from "@/modules/06_assess/componenst/viewstep/viewStep1.vue";
|
||||
import ViewStep3 from "@/modules/06_assess/componenst/viewstep/viewStep3.vue";
|
||||
import ViewStep7 from "@/modules/06_assess/componenst/viewstep/viewStep7.vue";
|
||||
|
||||
import { useAssessStore } from "@/modules/06_assess/store";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
|
@ -38,6 +39,10 @@ function onCilckprPeviousStep() {
|
|||
store.step--;
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
store.step = 1;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -54,7 +59,12 @@ function onCilckprPeviousStep() {
|
|||
<div class="row q-col-gutter-md col-12">
|
||||
<div
|
||||
:class="
|
||||
store.step === 2
|
||||
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'
|
||||
"
|
||||
|
|
@ -73,11 +83,15 @@ function onCilckprPeviousStep() {
|
|||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-7 row" v-if="store.step !== 2">
|
||||
<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" /> </q-card-section
|
||||
<ViewStep3 v-if="store.step === 3" />
|
||||
<ViewStep7 v-if="store.step === 7" /> </q-card-section
|
||||
></q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,53 +1,114 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { reactive } from "vue";
|
||||
|
||||
const feature1 = ref<boolean>(false);
|
||||
const feature2 = ref<boolean>(false);
|
||||
const feature3 = ref<boolean>(false);
|
||||
const feature4 = ref<boolean>(false);
|
||||
const feature5 = ref<boolean>(false);
|
||||
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="feature1" />
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
v-model="formData.isEducationalQft"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>ตรวจสอบคุณสมบัติ</q-item-label>
|
||||
<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="feature2" />
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
v-model="formData.isGovermantServiceHtr"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>ตรวจสอบคุณสมบัติ</q-item-label>
|
||||
<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="feature3" />
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
v-model="formData.isOperatingExp"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>ตรวจสอบคุณสมบัติ</q-item-label>
|
||||
<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="feature4" />
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
v-model="formData.isMinPeriodOfTenure"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>ตรวจสอบคุณสมบัติ</q-item-label>
|
||||
<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="feature5" />
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
v-model="formData.isHaveSpecificQft"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>ตรวจสอบคุณสมบัติ</q-item-label>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,22 @@
|
|||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
const status = ref<string>("WAIT_CHECK_DOC_V1");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div><h1>4</h1></div>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,26 @@
|
|||
<script setup lang="ts"></script>
|
||||
<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><h1>5</h1></div>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,106 @@
|
|||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import ViewPDF from "@/modules/06_assess/componenst/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><h1>6</h1></div>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,33 @@
|
|||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from "vue";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useAssessStore } from "@/modules/06_assess/store";
|
||||
|
||||
const store = useAssessStore();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai } = mixin;
|
||||
|
||||
const selectedItem = ref(1);
|
||||
|
||||
function handleItemClick(itemNumber: number) {
|
||||
store.tabPanels = itemNumber.toString();
|
||||
selectedItem.value = itemNumber;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div><h1>7</h1></div>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,22 @@
|
|||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
const status = ref<string>("WAIT_CHECK_DOC_V2");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div><h1>8</h1></div>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,22 @@
|
|||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
const status = ref<string>("DONE");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div><h1>9</h1></div>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h1>VIEW 1</h1>
|
||||
</div>
|
||||
<div>ข้อมูลคุณสมบัติ</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
17
src/modules/06_assess/componenst/viewstep/viewStep7.vue
Normal file
17
src/modules/06_assess/componenst/viewstep/viewStep7.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
import ViewPDF from "@/modules/06_assess/componenst/viewstep/viewPDF.vue";
|
||||
|
||||
import { useAssessStore } from "@/modules/06_assess/store";
|
||||
|
||||
const store = useAssessStore();
|
||||
</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>
|
||||
|
|
@ -3,7 +3,6 @@ import { ref } from "vue";
|
|||
|
||||
export const useAssessStore = defineStore("asses", () => {
|
||||
const tabMenu = ref<string>("1");
|
||||
|
||||
const step = ref<number>(1);
|
||||
const titel = ref<string[]>([
|
||||
"ตรวจสอบคุณสมบัติ",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue