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

ตรวจสอบคุณสมบัติ รายละเอียดส่วนบุคคล - ประเมิน

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-12-15 17:23:33 +07:00
parent eab7abb890
commit 6ebe44e821
8 changed files with 878 additions and 594 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/modules/12_evaluatePersonal/components/Detail/Stepper.vue
View file

@ -24,10 +24,20 @@ const store = useEvaluateDetailStore();
>
</q-step>
<q-step :name="2" prefix="2" title="จัดเตรียมเอกสาร" :done="store.step > 2">
<q-step
:name="2"
prefix="2"
title="จัดเตรียมเอกสารเล่ม 1"
:done="store.step > 2"
>
</q-step>
<q-step :name="3" prefix="3" title="ตรวจสอบเอกสาร" :done="store.step > 3">
<q-step
:name="3"
prefix="3"
title="ตรวจสอบเอกสารเล่ม 1"
:done="store.step > 3"
>
</q-step>
<q-step

139
src/modules/12_evaluatePersonal/components/Detail/Tab1.vue
View file

@ -1,7 +1,12 @@
<script setup lang="ts">
import { onMounted } from "vue";
import { onMounted, ref, reactive } from "vue";
import { useQuasar } from "quasar";
import type {
FormCommand,
FormCommandRef,
} from "@/modules/12_evaluatePersonal/interface/index/evalute";
import Stepper from "@/modules/12_evaluatePersonal/components/Detail/Stepper.vue";
import Step1 from "@/modules/12_evaluatePersonal/components/Detail/step/step1.vue";
import Step2 from "@/modules/12_evaluatePersonal/components/Detail/step/step2.vue";
@ -29,16 +34,61 @@ const $q = useQuasar();
const externalLink =
"https://accreditation.ocsc.go.th/accreditation/search/curriculum";
function onCilckNextStep() {
store.step < 9 &&
dialogConfirm(
$q,
() => {
store.step++;
},
"ยืนยันการดำเนินการ",
"ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
);
const formCommand = reactive<FormCommand>({
elementaryFullName: "",
elementaryPosition: "",
abovelevelFullname: "",
abovelevelPosition: "",
});
const elementaryFullNameRef = ref<object | null>(null);
const elementaryPositonRef = ref<object | null>(null);
const abovelevelFullnameRef = ref<object | null>(null);
const abovelevelPositionRef = ref<object | null>(null);
const formCommandRef: FormCommandRef = {
elementaryFullName: elementaryFullNameRef,
elementaryPosition: elementaryPositonRef,
abovelevelFullname: abovelevelFullnameRef,
abovelevelPosition: abovelevelPositionRef,
};
async function onCilckNextStep() {
const functionCreateDoc: (() => Promise<void>) | null =
store.step === 1
? await saveStep1
: 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;
store.step === 2
? validateStep2()
: store.step < 9 &&
dialogConfirm(
$q,
() => {
functionCreateDoc?.();
store.step++;
},
"ยืนยันการดำเนินการ",
"ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
);
// functionCreateDoc?.();
// store.step < 9 &&
}
function onCilckprPeviousStep() {
@ -53,6 +103,71 @@ function onCilckprPeviousStep() {
);
}
function updateformCommand(val: any, ref: any) {
formCommand.elementaryFullName = val.elementaryFullName;
formCommand.elementaryPosition = val.elementaryPosition;
formCommand.abovelevelFullname = val.abovelevelFullname;
formCommand.abovelevelPosition = val.abovelevelPosition;
elementaryFullNameRef.value = ref.elementaryFullNameRef;
elementaryPositonRef.value = ref.elementaryPositonRef;
abovelevelFullnameRef.value = ref.abovelevelFullnameRef;
abovelevelPositionRef.value = ref.abovelevelPositionRef;
}
async function validateStep2() {
const hasError = [];
for (const key in formCommandRef) {
if (Object.prototype.hasOwnProperty.call(formCommandRef, key)) {
const property = formCommandRef[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) {
saveStep2();
} else {
console.log("ไม่ผ่าน");
}
}
async function saveStep1() {
console.log("Save 1");
}
async function saveStep2() {
dialogConfirm(
$q,
() => {
store.step++;
},
"ยืนยันการดำเนินการ",
"ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
);
}
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;
});
@ -87,7 +202,7 @@ onMounted(() => {
<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" />
<Step2 v-if="store.step === 2" @update:form="updateformCommand" />
<Step3 v-if="store.step === 3" />
<Step4 v-if="store.step === 4" />
<Step5 v-if="store.step === 5" />

139
src/modules/12_evaluatePersonal/components/Detail/step/step2.vue
View file

@ -1,11 +1,13 @@
<script setup lang="ts">
import { ref } from "vue";
import { ref, reactive, onMounted } from "vue";
import keycloak from "@/plugins/keycloak";
import http from "@/plugins/http";
import config from "@/app.config";
import genReport from "@/plugins/genreport";
import { useQuasar } from "quasar";
import type { FormCommand } from "@/modules/12_evaluatePersonal/interface/index/evalute";
import { useCounterMixin } from "@/stores/mixin";
const $q = useQuasar();
@ -17,6 +19,30 @@ const fullName = ref<string>(
keycloak.tokenParsed ? keycloak.tokenParsed.name!.toString() : ""
);
const emit = defineEmits(["update:form"]);
const formCommand = reactive<FormCommand>({
elementaryFullName: "",
elementaryPosition: "",
abovelevelFullname: "",
abovelevelPosition: "",
});
const elementaryFullNameRef = ref<object | null>(null);
const elementaryPositonRef = ref<object | null>(null);
const abovelevelFullnameRef = ref<object | null>(null);
const abovelevelPositionRef = ref<object | null>(null);
const updateInput = (value: any) => {
const ref = {
elementaryFullNameRef: elementaryFullNameRef.value,
elementaryPositonRef: elementaryPositonRef.value,
abovelevelFullnameRef: abovelevelFullnameRef.value,
abovelevelPositionRef: abovelevelPositionRef.value,
};
emit("update:form", value, ref);
};
const fileEvaluation1 = ref<any>();
const fileEvaluation2 = ref<any>();
const fileEvaluation3 = ref<any>();
@ -69,6 +95,16 @@ async function onClickDowloadFile(
};
await genReport(body, fileName);
}
onMounted(() => {
const ref = {
elementaryFullNameRef: elementaryFullNameRef.value,
elementaryPositonRef: elementaryPositonRef.value,
abovelevelFullnameRef: abovelevelFullnameRef.value,
abovelevelPositionRef: abovelevelPositionRef.value,
};
emit("update:form", formCommand, ref);
});
</script>
<template>
@ -114,7 +150,7 @@ async function onClickDowloadFile(
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-11 row">
<div class="col-xs-12 col-sm-10 row">
<q-file
v-model="fileEvaluation1"
class="col-12"
@ -129,7 +165,7 @@ async function onClickDowloadFile(
</template>
</q-file>
</div>
<div class="col-1 self-center text-center">
<div class="col-2 self-center text-center q-pl-none">
<q-btn flat round dense color="primary" icon="mdi-upload"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
@ -180,7 +216,7 @@ async function onClickDowloadFile(
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-11 row">
<div class="col-xs-12 col-sm-10 row">
<q-file
v-model="fileEvaluation2"
class="col-12"
@ -195,7 +231,7 @@ async function onClickDowloadFile(
</template>
</q-file>
</div>
<div class="col-1 self-center text-center">
<div class="col-2 self-center text-center q-pl-none">
<q-btn flat round dense color="primary" icon="mdi-upload"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
@ -246,7 +282,7 @@ async function onClickDowloadFile(
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-11 row">
<div class="col-xs-12 col-sm-10 row">
<q-file
v-model="fileEvaluation3"
class="col-12"
@ -261,7 +297,7 @@ async function onClickDowloadFile(
</template>
</q-file>
</div>
<div class="col-1 self-center text-center">
<div class="col-2 self-center text-center q-pl-none">
<q-btn flat round dense color="primary" icon="mdi-upload"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
@ -312,7 +348,7 @@ async function onClickDowloadFile(
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-11 row">
<div class="col-xs-12 col-sm-10 row">
<q-file
v-model="fileEvaluation4"
class="col-12"
@ -327,7 +363,7 @@ async function onClickDowloadFile(
</template>
</q-file>
</div>
<div class="col-1 self-center text-center">
<div class="col-2 self-center text-center q-pl-none">
<q-btn flat round dense color="primary" icon="mdi-upload"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
@ -379,7 +415,7 @@ async function onClickDowloadFile(
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-11 row">
<div class="col-xs-12 col-sm-10 row">
<q-file
v-model="fileEvaluation5"
class="col-12"
@ -394,7 +430,7 @@ async function onClickDowloadFile(
</template>
</q-file>
</div>
<div class="col-1 self-center text-center">
<div class="col-2 self-center text-center q-pl-none">
<q-btn flat round dense color="primary" icon="mdi-upload"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
@ -445,7 +481,7 @@ async function onClickDowloadFile(
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-11 row">
<div class="col-xs-12 col-sm-10 row">
<q-file
v-model="fileEvaluation6"
class="col-12"
@ -460,7 +496,7 @@ async function onClickDowloadFile(
</template>
</q-file>
</div>
<div class="col-1 self-center text-center">
<div class="col-2 self-center text-center q-pl-none">
<q-btn flat round dense color="primary" icon="mdi-upload"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
@ -470,6 +506,83 @@ async function onClickDowloadFile(
</div>
</q-card>
</div>
<!-- เลือกผู้เซ็นเอกสาร -->
<div class="col-12">
<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-12 row">
<div class="text-weight-medium q-py-sm">
ผู้บังคับบัญชาชั้นต้น
</div>
<div class="row col-12 q-col-gutter-md q-pa-sm">
<q-input
ref="elementaryFullNameRef"
dense
class="col-xs-12 col-sm-6"
outlined
label="ชื่อ-นามสกุล"
v-model="formCommand.elementaryFullName"
@update:model-value="updateInput(formCommand)"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
lazy-rules
/>
<q-input
ref="elementaryPositonRef"
class="col-xs-12 col-sm-6"
dense
outlined
v-model="formCommand.elementaryPosition"
@update:model-value="updateInput(formCommand)"
label="ตำแหน่ง"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
lazy-rules
/>
</div>
</div>
</div>
<div class="row q-col-gutter-md col-12">
<div class="col-xs-12 col-sm-12 row">
<div class="text-weight-medium q-py-sm">
ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
</div>
<div class="row col-12 q-col-gutter-md q-pa-sm">
<q-input
ref="abovelevelFullnameRef"
dense
class="col-xs-12 col-sm-6"
outlined
v-model="formCommand.abovelevelFullname"
label="ชื่อ-นามสกุล"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
lazy-rules
@update:model-value="updateInput(formCommand)"
/>
<q-input
ref="abovelevelPositionRef"
class="col-xs-12 col-sm-6"
dense
outlined
v-model="formCommand.abovelevelPosition"
label="ตำแหน่ง"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
lazy-rules
@update:model-value="updateInput(formCommand)"
/>
</div>
</div>
</div>
</div>
</div>
</q-card>
</div>
</div>
<!-- Dialog Full Screen -->

41
src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue Normal file
View file

@ -0,0 +1,41 @@
<script setup lang="ts">
const props = defineProps({
columns: {
type: Object,
require: true,
},
});
</script>
<template>
<d-table
ref="table"
:columns="props.columns"
row-key="name"
flat
bordered
dense
class="custom-header-table"
style="width: 580px"
>
<!-- <template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium" v-html="col.label" />
</q-th>
<q-th auto-width />
</q-tr>
</template> -->
<!-- <template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template> -->
</d-table>
</template>
<style scoped></style>

560
src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
View file

@ -1,304 +1,292 @@
<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useEvalutuonStore } from "@/modules/12_evaluatePersonal/store/Evaluate";
import TableData from "@/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue";
const storageEvalutuon = useEvalutuonStore();
import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
const store = useEvaluateDetailStore();
const {
rows,
columnsLicense,
columnPeriodhistory,
columnTrainingHistory,
columnProjectsProposed,
} = storeToRefs(storageEvalutuon);
} = store;
</script>
<template>
<q-card class="bg-grey-2">
<div class="text-weight-bold row items-center">
<span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
</div>
<div>
<q-scroll-area style="height: 450px; max-width: 100%">
<div class="q-pa-xs">
<q-card class="q-gutter-md" style="max-width: 100%">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-bold row items-center bg-grey-2">
<span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
</div>
<q-separator />
<div class="row q-pa-sm">
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
model-value="นาย"
label="คำนำหน้าชื่อ"
/>
</div>
<q-separator />
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
model-value="ธนพนธ์ แสงจันทร์"
label="ชื่อ - นามสกุล"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
model-value="19/03/44"
readonly
label="วันเดือนปีเกิด"
>
<template v-slot:prepend>
<q-icon class="size-icon" name="o_calendar_today" />
</template>
</q-input>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
model-value="ไม่มี"
label="ตำแหน่ง"
/>
</div>
<q-card-actions class="q-ml-md">
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input borderless readonly model-value="นาย" label="คำนำหน้าชื่อ" />
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
model-value="กย.11"
label="ตำแหน่งเลขที่"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
model-value="หน่วยใหม่กับหน่วยเก่า"
label="สังกัด"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
model-value="1,0000"
label="เงินเดือน"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
model-value="ระดับปัจจุบัน"
label="ระดับปัจจุบัน"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
model-value="ระดับที่ประเมิน"
label="ระดับที่ประเมิน"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
model-value="1000 ปี"
label="อายุราชการ"
/>
</div>
</div>
</q-card>
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-bold row items-center bg-grey-2">
<span class="q-ml-lg q-my-sm">ประวัติการศึกษา</span>
</div>
<q-separator />
<div class="row q-pa-sm">
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
model-value="ปริญญาตรี"
label="ระดับศึกษา"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
model-value="มหาวิทยาลัยก."
label="สถานศึกษา"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
model-value="19/03/44"
readonly
label="ตั้งแต่"
>
<template v-slot:prepend>
<q-icon class="size-icon" name="o_calendar_today" />
</template>
</q-input>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input borderless model-value="19/03/44" readonly label="ถึง">
<template v-slot:prepend>
<q-icon class="size-icon" name="o_calendar_today" />
</template>
</q-input>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
model-value="19/03/44"
readonly
label="วันทราสำเร็จการศึกษา"
>
<template v-slot:prepend>
<q-icon class="size-icon" name="o_calendar_today" />
</template>
</q-input>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
model-value="ปริญญาตรี"
label="วุฒิการศึกษาในตําแหน่ง"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
model-value="ปริญญาตรี"
label="วุฒิการศึกษา"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
model-value="-"
label="สาขาวิชา/ทาง"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input borderless readonly model-value="-" label="ทุน" />
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
model-value="3.33"
label="เกรดเฉลี่ย"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-6">
<q-input borderless readonly model-value="ไทย" label="ประเทศ" />
</div>
</div>
</q-card>
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-bold row items-center bg-grey-2">
<span class="q-ml-lg q-my-sm">ใบอนุญาตประกอบวิชาชีพ</span>
</div>
<q-separator />
<div class="row q-pa-sm">
<div class="col-xs-12 col-sm-12 col-md-12">
<TableData :columns="columnsLicense" />
</div>
</div>
</q-card>
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-bold row items-center bg-grey-2">
<span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
</div>
<q-separator />
<div class="row q-pa-sm">
<div class="col-xs-12 col-sm-12 col-md-12">
<TableData :columns="columnPeriodhistory" />
</div>
</div>
</q-card>
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-bold row items-center bg-grey-2">
<span class="q-ml-lg q-my-sm">ประวัติการฝึกอบรมดูงาน</span>
</div>
<q-separator />
<div class="row q-pa-sm">
<div class="col-xs-12 col-sm-12 col-md-12">
<TableData :columns="columnTrainingHistory" />
</div>
</div>
</q-card>
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-bold row items-center bg-grey-2">
<span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน </span>
</div>
<q-separator />
<div class="row q-pa-sm">
<div class="col-xs-12 col-sm-12 col-md-12">
<TableData :columns="columnTrainingHistory" />
</div>
</div>
</q-card>
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-bold row items-center bg-grey-2">
<span class="q-ml-lg q-my-sm"
>ผลงานทีเคยเสนอขอประเมิน (ถ้ามี)</span
>
</div>
<q-separator />
<div class="row q-pa-sm">
<div class="col-xs-12 col-sm-12 col-md-12">
<TableData :columns="columnProjectsProposed" />
</div>
</div>
</q-card>
</q-card>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
borderless
readonly
model-value="ธนพนธ์ แสงจันทร์"
label="ชื่อ - นามสกุล"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
borderless
model-value="19/03/44"
readonly
label="วันเดือนปีเกิด"
>
<template v-slot:prepend>
<q-icon class="size-icon" name="o_calendar_today" />
</template>
</q-input>
</div>
</q-card-actions>
<q-card-actions class="q-ml-md">
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input borderless readonly model-value="ไม่มี" label="ตำแหน่ง" />
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
borderless
readonly
model-value="กย.11"
label="ตำแหน่งเลขที่"
/>
</div>
<div class="col-xs-9 col-sm-6 col-md-6">
<q-input
borderless
readonly
model-value="หน่วยใหม่กับหน่วยเก่า"
label="สังกัด"
/>
</div>
</q-card-actions>
<q-card-actions class="q-ml-md">
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input borderless readonly model-value="" label="เงินเดือน" />
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input borderless readonly model-value="" label="ระดับปัจจุบัน" />
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input borderless readonly model-value="" label="ระดับที่ประเมิน" />
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input borderless readonly model-value="1000 ปี" label="อายุราชการ" />
</div>
</q-card-actions>
</q-card>
<q-card class="bg-grey-2 q-mt-xl">
<div class=" text-weight-bold row items-center">
<span class="q-ml-lg q-my-sm">ประวัติการศึกษา</span>
</div>
<q-separator />
<q-card-actions class="q-ml-md">
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
borderless
readonly
model-value="ปริญญาตรี"
label="ระดับศึกษา"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
borderless
readonly
model-value="มหาวิทยาลัยก."
label="สถานศึกษา"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input borderless model-value="19/03/44" readonly label="ตั้งแต่">
<template v-slot:prepend>
<q-icon class="size-icon" name="o_calendar_today" />
</template>
</q-input>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input borderless model-value="19/03/44" readonly label="ถึง">
<template v-slot:prepend>
<q-icon class="size-icon" name="o_calendar_today" />
</template>
</q-input>
</div>
</q-card-actions>
<q-card-actions class="q-ml-md">
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
borderless
model-value="19/03/44"
readonly
label="วันทราสำเร็จการศึกษา"
>
<template v-slot:prepend>
<q-icon class="size-icon" name="o_calendar_today" />
</template>
</q-input>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
borderless
readonly
model-value="ปริญญาตรี"
label="วุฒิการศึกษาในตําแหน่ง"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
borderless
readonly
model-value="ปริญญาตรี"
label="วุฒิการศึกษา"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input borderless readonly model-value="-" label="สาขาวิชา/ทาง" />
</div>
</q-card-actions>
<q-card-actions class="q-ml-md">
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input borderless readonly model-value="-" label="ทุน" />
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input borderless readonly model-value="3.33" label="เกรดเฉลี่ย" />
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input borderless readonly model-value="ไทย" label="ประเทศ" />
</div>
</q-card-actions>
</q-card>
<q-card class="bg-grey-2 q-mt-xl">
<div class=" text-weight-bold row items-center">
<span class="q-ml-lg q-my-sm">ใบอนุญาตประกอบวิชาชีพ</span>
</div>
<q-separator />
<q-card-actions class="q-ma-md">
<div class="col-xs-12 col-sm-12 col-md-12">
<q-table
table-header-class="bg-grey-4 "
flat
bordered
:rows="rows"
:columns="columnsLicense"
>
</q-table>
</div>
</q-card-actions>
</q-card>
<q-card class="bg-grey-2 q-mt-xl">
<div class=" text-weight-bold row items-center">
<span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
</div>
<q-separator />
<q-card-actions class="q-ma-md">
<div class="col-xs-12 col-sm-12 col-md-12">
<q-table
table-header-class="bg-grey-4 "
flat
bordered
:rows="rows"
:columns="columnPeriodhistory"
>
</q-table>
</div>
</q-card-actions>
</q-card>
<q-card class="bg-grey-2 q-mt-xl">
<div class=" text-weight-bold row items-center">
<span class="q-ml-lg q-my-sm">ประวัติการฝึกอบรมดูงาน</span>
</div>
<q-separator />
<q-card-actions class="q-ma-md">
<div class="col-xs-12 col-sm-12 col-md-12">
<q-table
table-header-class="bg-grey-4 "
flat
bordered
:rows="rows"
:columns="columnTrainingHistory"
>
</q-table>
</div>
</q-card-actions>
</q-card>
<q-card class="bg-grey-2 q-mt-xl">
<div class=" text-weight-bold row items-center">
<span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน</span>
</div>
<q-separator />
<q-card-actions class="q-ma-md">
<div class="col-xs-12 col-sm-12 col-md-12">
<q-table
table-header-class="bg-grey-4 "
flat
bordered
:rows="rows"
:columns="columnTrainingHistory"
>
</q-table>
</div>
</q-card-actions>
</q-card>
<q-card class="bg-grey-2 q-mt-xl">
<div class=" text-weight-bold row items-center">
<span class="q-ml-lg q-my-sm">ผลงานทีเคยเสนอขอประเมิน (ถ้ามี)</span>
</div>
<q-separator />
<q-card-actions class="q-ma-md">
<div class="col-xs-12 col-sm-12 col-md-12">
<q-table
table-header-class="bg-grey-4 "
flat
bordered
:rows="rows"
:columns="columnProjectsProposed"
>
</q-table>
</div>
</q-card-actions>
</q-card>
</q-scroll-area>
</div>
</template>
<style scoped lang="scss">
.size-icon {
font-size: 20px; /* ปรับขนาดตามที่คุณต้องการ */
}
font-size: 20px; /* ปรับขนาดตามที่คุณต้องการ */
}
</style>
@/modules/12_evaluatePersonal/store/evaluate
@/modules/12_evaluatePersonal/store/evaluate

17
src/modules/12_evaluatePersonal/interface/index/evalute.ts Normal file
View file

@ -0,0 +1,17 @@
interface FormCommand {
elementaryFullName: string;
elementaryPosition: string;
abovelevelFullname: string;
abovelevelPosition: string;
}
interface FormCommandRef {
elementaryFullName: object | null;
elementaryPosition: object | null;
abovelevelFullname: object | null;
abovelevelPosition: object | null;
[key: string]: any;
}
export type { FormCommand, FormCommandRef };

277
src/modules/12_evaluatePersonal/store/Evaluate.ts
View file

@ -28,7 +28,6 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
return "ตรวจสอบความถูกต้องของเอกสารเล่ม";
case "DONE":
return "เสร็จสิ้น";
}
}
@ -140,287 +139,11 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
},
]);
const columnsLicense = ref<QTableProps["columns"]>([
{
name: "",
align: "center",
label: "ชื่อใบอนุณาต",
sortable: false,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "หน่วยงานผู้ออกใบอนุญาต",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "เลขที่ใบอนุญาต",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "วันที่ออกใบอนุญาต",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "",
align: "left",
label: "วันที่หมดอายุ",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const columnPeriodhistory = ref<QTableProps["columns"]>([
{
name: "",
align: "center",
label: "วัน เดือน ปี",
sortable: false,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "",
align: "left",
label: "สังกัด",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "ตำแหน่ง",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "ตำแหน่งเลขที่",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "",
align: "left",
label: "สายงาน",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "ด้าน/สาขา",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "ตำแหน่งประเภท",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "ระดับ",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "ตำแหน่งทางการบริหาร",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "ด้านทางการบริหาร",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const columnTrainingHistory = ref<QTableProps["columns"]>([
{
name: "",
align: "center",
label: "ชื่อโครงการ/หลักสูตรการฝึกอบรม",
sortable: false,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "หัวข้อการฝึกอบรม/ดูงาน",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "วันเริ่มต้นการฝึกอบรม/ดูงาน",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "",
align: "left",
label: "วันสิ้นสุดการฝึกอบรม/ดูงาน",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "",
align: "left",
label: "ปีที่อบรม/ดูงาน",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "รวมระยะเวลาในการฝึกอบรม/ดูงาน",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const columnProjectsProposed = ref<QTableProps["columns"]>([
{
name: "",
align: "center",
label: "วันที่ได้รับ",
sortable: false,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "",
align: "left",
label: "ผู้มีอำนาจลงนาม",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "รายละเอียด",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "เลขที่คำสั่ง",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "",
align: "left",
label: "เอกสารอ้างอิง",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
return {
visibleColumns,
columns,
rows,
convertStatus,
fetchData,
columnsLicense,
columnPeriodhistory,
columnTrainingHistory,
columnProjectsProposed,
};
});

285
src/modules/12_evaluatePersonal/store/EvaluateDetail.ts
View file

@ -1,14 +1,15 @@
import { defineStore } from "pinia";
import { ref } from "vue";
import type { QTableProps } from "quasar";
export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
const tabMenu = ref<string>("1");
const step = ref<number>(1);
const titel = ref<string[]>([
"ตรวจสอบคุณสมบัติ",
"จัดเตรียมเอกสาร",
"ตรวจสอบเอกสาร",
"จัดเตรียมเอกสารเล่ม 1",
"ตรวจสอบเอกสารเล่ม 1",
"รอตรวจสอบคุณสมบัติ",
"ประกาศบนเว็บไซต์",
"จัดเตรียมเอกสารเล่ม 2",
@ -19,10 +20,286 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
const tabPanels = ref<string>("1");
const columnsLicense = ref<QTableProps["columns"]>([
{
name: "",
align: "center",
label: "ชื่อใบอนุณาต",
sortable: false,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "หน่วยงานผู้ออกใบอนุญาต",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "เลขที่ใบอนุญาต",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "วันที่ออกใบอนุญาต",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "",
align: "left",
label: "วันที่หมดอายุ",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const columnPeriodhistory = ref<QTableProps["columns"]>([
{
name: "",
align: "center",
label: "วัน เดือน ปี",
sortable: false,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "",
align: "left",
label: "สังกัด",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "ตำแหน่ง",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "ตำแหน่งเลขที่",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "",
align: "left",
label: "สายงาน",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "ด้าน/สาขา",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "ตำแหน่งประเภท",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "ระดับ",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "ตำแหน่งทางการบริหาร",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "ด้านทางการบริหาร",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const columnTrainingHistory = ref<QTableProps["columns"]>([
{
name: "",
align: "center",
label: "ชื่อโครงการ/หลักสูตรการฝึกอบรม",
sortable: false,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "หัวข้อการฝึกอบรม/ดูงาน",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "วันเริ่มต้นการฝึกอบรม/ดูงาน",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "",
align: "left",
label: "วันสิ้นสุดการฝึกอบรม/ดูงาน",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "",
align: "left",
label: "ปีที่อบรม/ดูงาน",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "รวมระยะเวลาในการฝึกอบรม/ดูงาน",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const columnProjectsProposed = ref<QTableProps["columns"]>([
{
name: "",
align: "center",
label: "วันที่ได้รับ",
sortable: false,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "",
align: "left",
label: "ผู้มีอำนาจลงนาม",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "รายละเอียด",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "",
align: "left",
label: "เลขที่คำสั่ง",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "",
align: "left",
label: "เอกสารอ้างอิง",
sortable: true,
field: "",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
return {
tabMenu,
step,
titel,
tabPanels,
/** step1*/
columnsLicense,
columnPeriodhistory,
columnTrainingHistory,
columnProjectsProposed,
};
});
});