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

ปรับ responesive

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-05-24 16:57:35 +07:00
parent 8628be8fcf
commit 72ca700702
8 changed files with 342 additions and 282 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/modules/05_leave/components/Calendar.vue
View file

@ -274,7 +274,7 @@ onMounted(async () => {
<template> <template>
<div class="row"> <div class="row">
<div class="col-sm-12 col-md-3 q-mt-sm q-pr-sm row"> <div class="col-xs-12 col-md-3 q-mt-sm q-pr-sm row">
<q-card class="col-12" flat bordered> <q-card class="col-12" flat bordered>
<div class="q-gutter-sm col-12"> <div class="q-gutter-sm col-12">
<q-list class="rounded-borders q-pt-sm" dense> <q-list class="rounded-borders q-pt-sm" dense>
@ -299,7 +299,7 @@ onMounted(async () => {
</q-card> </q-card>
</div> </div>
<div class="col-sm-12 col-md-9 row"> <div class="col-xs-12 col-md-9 row">
<div class="q-mt-sm col-12"> <div class="q-mt-sm col-12">
<div class="row col-12 q-gutter-sm"> <div class="row col-12 q-gutter-sm">
<div class="demo-app-main"> <div class="demo-app-main">

45
src/modules/07_appealComplain/views/Form.vue
View file

@ -1,3 +1,4 @@
div
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, defineProps, watch } from "vue"; import { ref, reactive, defineProps, watch } from "vue";
import { useAppealComplainStore } from "@/modules/07_appealComplain/store"; import { useAppealComplainStore } from "@/modules/07_appealComplain/store";
@ -96,7 +97,7 @@ function validateForm() {
} }
} }
if (hasError.every((result) => result === true)) { if (hasError.every((result) => result === true)) {
onSubmit(formData); onSubmit(formData);
} else { } else {
console.log("ไม่ผ่าน "); console.log("ไม่ผ่าน ");
console.log(hasError); console.log(hasError);
@ -161,7 +162,7 @@ function onSubmit(data: any) {
</script> </script>
<template> <template>
<div class="row"> <div class="row">
<div class="col-sm-12 col-md-12"> <div class="col-sm-12 col-md-12 col-xs-12">
<form @submit.prevent="validateForm"> <form @submit.prevent="validateForm">
<q-card bordered> <q-card bordered>
<div class="q-pa-md"> <div class="q-pa-md">
@ -184,10 +185,14 @@ function onSubmit(data: any) {
<q-icon name="mdi-information-outline" size="20px" /> <q-icon name="mdi-information-outline" size="20px" />
คำอุทธรณ์/ร้องทุกข์นี้จะยังไม่สมบูรณ์ คำอุทธรณ์/ร้องทุกข์นี้จะยังไม่สมบูรณ์
จนกว่าผู้อุทธรณ์/ร้องทุกข์จะ “พิมพ์แบบฟอร์มคำร้อง” จากระบบ จนกว่าผู้อุทธรณ์/ร้องทุกข์จะ “พิมพ์แบบฟอร์มคำร้อง” จากระบบ
พร้อมเอกสารหลักฐานทั้งหมดนำส่งไปรษณีย์ให้ กพค. หรือนำเอกสารทั้งหมดไปส่งด้วยตนเองที่ชั้น 14 อาคารศรีจุลทรัพย์ พร้อมเอกสารหลักฐานทั้งหมดนำส่งไปรษณีย์ให้ กพค.
หรือนำเอกสารทั้งหมดไปส่งด้วยตนเองที่ชั้น 14 อาคารศรีจุลทรัพย์
</q-banner> </q-banner>
</div> </div>
<div class="q-gutter-sm" v-else-if="isReadOnly||formData.status === 'NEW'"> <div
class="q-gutter-sm"
v-else-if="isReadOnly || formData.status === 'NEW'"
>
<q-banner <q-banner
inline-actions inline-actions
bordered bordered
@ -202,7 +207,7 @@ function onSubmit(data: any) {
</q-banner> </q-banner>
</div> </div>
<div class="row q-gutter-x-sm"> <div class="row q-gutter-x-sm">
<div class="col-3"> <div class="col-xs-12 col-md-3">
<q-select <q-select
:class="inputEdit(isReadOnly)" :class="inputEdit(isReadOnly)"
:readonly="isReadOnly" :readonly="isReadOnly"
@ -221,22 +226,20 @@ function onSubmit(data: any) {
hide-bottom-space hide-bottom-space
/> />
</div> </div>
<div class="col-3"> <div class="col-xs-12 col-md-3">
<div class="col-3"> <q-input
<q-input :class="inputEdit(isReadOnly)"
:class="inputEdit(isReadOnly)" :readonly="isReadOnly"
:readonly="isReadOnly" ref="titleRef"
ref="titleRef" :rules="[
:rules="[ (val) => !!val || 'กรุณากรอกเรื่องอุทธรณ์/ร้องทุกข์',
(val) => !!val || 'กรุณากรอกเรื่องอุทธรณ์/ร้องทุกข์', ]"
]" v-model="formData.title"
v-model="formData.title" dense
dense outlined
outlined label="เรื่องอุทธรณ์/ร้องทุกข์"
label="เรื่องอุทธรณ์/ร้องทุกข์" hide-bottom-space
hide-bottom-space />
/>
</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">

10
src/modules/07_appealComplain/views/Main.vue
View file

@ -14,7 +14,7 @@ import config from "@/app.config";
import type { FormType } from "@/modules/07_appealComplain/interface/response/mainType"; import type { FormType } from "@/modules/07_appealComplain/interface/response/mainType";
import type { DataOption } from "@/modules/07_appealComplain/interface/index/main"; import type { DataOption } from "@/modules/07_appealComplain/interface/index/main";
const total = ref<number>(0) const total = ref<number>(0);
const currentPage = ref<number>(1); const currentPage = ref<number>(1);
const maxPage = ref<number>(1); const maxPage = ref<number>(1);
const page = ref<number>(1); const page = ref<number>(1);
@ -175,7 +175,7 @@ const getData = async () => {
) )
) )
.then((res: any) => { .then((res: any) => {
total.value = res.data.result.total total.value = res.data.result.total;
maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value); maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
let data = res.data.result.data; let data = res.data.result.data;
dataStore.fetchAppealComplain(data); dataStore.fetchAppealComplain(data);
@ -280,7 +280,7 @@ onMounted(async () => {
</div> </div>
</div> </div>
<div class="row col-12 q-col-gutter-sm q-mb-sm"> <div class="row col-12 q-col-gutter-sm q-mb-sm">
<div class="col-2"> <div class="col-xs-12 col-md-2">
<datepicker <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formData.year" v-model="formData.year"
@ -316,7 +316,7 @@ onMounted(async () => {
</datepicker> </datepicker>
</div> </div>
<div class="col-2"> <div class="col-xs-12 col-md-2">
<q-select <q-select
v-model="formData.type" v-model="formData.type"
label="ประเภท" label="ประเภท"
@ -330,7 +330,7 @@ onMounted(async () => {
@update:model-value="dataUpdate" @update:model-value="dataUpdate"
/> />
</div> </div>
<div class="col-2"> <div class="col-xs-12 col-md-2">
<q-select <q-select
v-model="formData.status" v-model="formData.status"
label="สถานะ" label="สถานะ"

2
src/modules/08_KPI/components/Tab/01_Assessment.vue
View file

@ -212,7 +212,7 @@ onMounted(() => {
<template> <template>
<q-scroll-area <q-scroll-area
style="height: 100vh" style="height: 100vh; width: auto"
class="bg-white row col-12 text-dark q-pa-md" class="bg-white row col-12 text-dark q-pa-md"
> >
<div class="text-weight-bold text-body2"> <div class="text-weight-bold text-body2">

25
src/modules/08_KPI/components/Tab/TabMain.vue
View file

@ -35,7 +35,12 @@ const splitterModel = ref<number>(12);
</script> </script>
<template> <template>
<q-splitter v-model="splitterModel" :horizontal="!$q.screen.gt.xs" disable> <q-splitter
v-model="splitterModel"
:horizontal="!$q.screen.gt.xs"
disable
v-if="$q.screen.gt.xs"
>
<template v-slot:before> <template v-slot:before>
<q-tabs <q-tabs
v-model="store.tabMain" v-model="store.tabMain"
@ -82,6 +87,24 @@ const splitterModel = ref<number>(12);
</q-tab-panels> </q-tab-panels>
</template> </template>
</q-splitter> </q-splitter>
<q-list bordered class="rounded-borders" v-else>
<q-expansion-item expand-separator label="จัดทำข้อตกลง">
<Assessment />
</q-expansion-item>
<q-expansion-item expand-separator label="รายงานความก้าวหน้า">
<Assessment :type="'evaluator'" />
</q-expansion-item>
<q-expansion-item expand-separator label="รายงานผลสำเร็จของงาน">
<Assessment :type="'commander'" />
</q-expansion-item>
<q-expansion-item expand-separator label="ไฟล์เอกสาร">
<File />
</q-expansion-item>
</q-list>
</template> </template>
<style scoped> <style scoped>

444
src/modules/08_KPI/views/form.vue
View file

@ -3,8 +3,8 @@ import { ref, onMounted, reactive, computed, watch } from "vue";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import TabMain from "@/modules/08_KPI/components/Tab/TabMain.vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import TabMain from "@/modules/08_KPI/components/Tab/TabMain.vue";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/08_KPI/store"; import { useKpiDataStore } from "@/modules/08_KPI/store";
@ -317,255 +317,239 @@ onMounted(async () => {
</script> </script>
<template> <template>
<div class="col-12 row justify-center">
<div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle text-white col-12 row items-center">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="
isReadonly ? router.push(`/KPI-evaluator`) : router.push(`/KPI`)
"
/>
{{
isReadonly
? "รายละเอียดการประเมินผลการปฏิบัติราชการระดับบุคคล"
: id
? `แก้ไขแบบประเมิน`
: `เพิ่มแบบประเมิน`
}}
<q-space />
</div>
<div class="col-12">
<q-card bordered flat class="relative-position">
<div
class="absolute-center-left"
style="left: 2%; top: 50%; transform: translateY(-50%)"
>
<q-avatar size="95px">
<q-img
:src="store.dataEvaluation.avartar"
v-if="store.dataEvaluation.avartar !== undefined"
/>
<q-img src="@/assets/avatar_user.jpg" v-else />
</q-avatar>
</div>
<div class="row col-12">
<div class="row items-center col-12 q-pa-sm">
<div class="col-12" style="padding-left: 12%">
<div class="row col-12 items-center">
<span class="text-h6 text-weight-medium text-primary">{{
`${store.dataEvaluation.prefix}${store.dataEvaluation.firstName} ${store.dataEvaluation.lastName}`
}}</span>
<q-space />
<div class="q-gutter-x-sm">
<span
v-if="
(store.dataEvaluation.posExecutiveName == null &&
store.indicatorWeightTotal != 100) ||
(store.dataEvaluation.posExecutiveName != null &&
(store.indicatorWeight1Total != 100 ||
store.indicatorWeight2Total != 20))
"
class="text-red"
>*น้ำหนัก(ร้อยละ) ผลสัมฤทธิ์ของงานไม่ถูกต้อง</span
>
<q-btn
v-if="
store.rolePerson == 'USER' &&
store.dataEvaluation.evaluationStatus == 'NEW'
"
:disabled="
(store.dataEvaluation.posExecutiveName == null &&
store.indicatorWeightTotal != 100) ||
(store.dataEvaluation.posExecutiveName != null &&
(store.indicatorWeight1Total != 100 ||
store.indicatorWeight2Total != 20))
"
unelevated
round
icon="mdi-send"
color="grey-2"
text-color="blue-6"
size="md"
@click="sendToEvaluatore('NEW_EVALUATOR')"
>
<q-tooltip>ส่งให้ผู้ประเมินอนุมัติ</q-tooltip>
</q-btn>
<div class="col-12 row justify-center"> <q-btn
<div class="col-xs-12 col-sm-12 col-md-11"> v-if="
<div class="toptitle text-white col-12 row items-center"> store.rolePerson == 'USER' &&
<q-btn store.dataEvaluation.evaluationStatus == 'EVALUATING'
icon="mdi-arrow-left" "
unelevated unelevated
round round
dense icon="mdi-send"
flat color="grey-2"
color="primary" text-color="blue-6"
class="q-mr-sm" size="md"
@click=" @click="sendToEvaluatore('EVALUATING_EVALUATOR')"
isReadonly ? router.push(`/KPI-evaluator`) : router.push(`/KPI`) >
" <q-tooltip>ส่งให้ผู้ประเมินอนุมัติผลการประเมิน</q-tooltip>
/> </q-btn>
{{
isReadonly
? "รายละเอียดการประเมินผลการปฏิบัติราชการระดับบุคคล"
: id
? `แก้ไขแบบประเมิน`
: `เพิ่มแบบประเมิน`
}}
<q-space />
</div>
<div class="col-12">
<q-card bordered flat class="relative-position">
<div
class="absolute-center-left"
style="left: 2%; top: 50%; transform: translateY(-50%)"
>
<q-avatar size="95px">
<q-img
:src="store.dataEvaluation.avartar"
v-if="store.dataEvaluation.avartar !== undefined"
/>
<q-img src="@/assets/avatar_user.jpg" v-else />
</q-avatar>
</div>
<div class="row col-12">
<div class="row items-center col-12 q-pa-sm">
<div class="col-12" style="padding-left: 12%">
<div class="row col-12 items-center">
<span class="text-h6 text-weight-medium text-primary">{{
`${store.dataEvaluation.prefix}${store.dataEvaluation.firstName} ${store.dataEvaluation.lastName}`
}}</span>
<q-space />
<div class="q-gutter-x-sm">
<span
v-if="
(store.dataEvaluation.posExecutiveName == null &&
store.indicatorWeightTotal != 100) ||
(store.dataEvaluation.posExecutiveName != null &&
(store.indicatorWeight1Total != 100 ||
store.indicatorWeight2Total != 20))
"
class="text-red"
>*น้ำหนัก(ร้อยละ) ผลสัมฤทธิ์ของงานไม่ถูกต้อง</span
>
<q-btn
v-if="
store.rolePerson == 'USER' &&
store.dataEvaluation.evaluationStatus == 'NEW'
"
:disabled="
(store.dataEvaluation.posExecutiveName == null &&
store.indicatorWeightTotal != 100) ||
(store.dataEvaluation.posExecutiveName != null &&
(store.indicatorWeight1Total != 100 ||
store.indicatorWeight2Total != 20))
"
unelevated
round
icon="mdi-send"
color="grey-2"
text-color="blue-6"
size="md"
@click="sendToEvaluatore('NEW_EVALUATOR')"
>
<q-tooltip>ส่งให้ผู้ประเมินอนุมัติ</q-tooltip>
</q-btn>
<q-btn <q-btn
v-if=" v-if="
store.rolePerson == 'USER' && store.rolePerson == 'USER' &&
store.dataEvaluation.evaluationStatus == 'EVALUATING' store.tabOpen < 3 &&
" store.dataEvaluation.evaluationStatus != 'NEW' &&
unelevated (store.dataEvaluation.evaluationReqEdit == null ||
round store.dataEvaluation.evaluationReqEdit == 'DONE')
icon="mdi-send" "
color="grey-2" :disabled="store.dataEvaluation.evaluatorId == null"
text-color="blue-6" unelevated
size="md" round
@click="sendToEvaluatore('EVALUATING_EVALUATOR')" icon="mdi-file-edit"
> color="grey-2"
<q-tooltip text-color="red-6"
>ส่งให้ผู้ประเมินอนุมัติผลการประเมิน</q-tooltip size="md"
> @click="requireEdit()"
</q-btn> >
<q-tooltip>ขอแก้ไขข้อตกลง</q-tooltip>
</q-btn>
<q-btn <q-btn
v-if=" unelevated
store.rolePerson == 'USER' && round
store.tabOpen < 3 && icon="mdi-account"
store.dataEvaluation.evaluationStatus != 'NEW' && color="grey-2"
(store.dataEvaluation.evaluationReqEdit == null || text-color="edit"
store.dataEvaluation.evaluationReqEdit == 'DONE') size="md"
" @click="modalEdit = true"
:disabled="store.dataEvaluation.evaluatorId == null" >
unelevated <q-tooltip>{{
round store.dataEvaluation.evaluationStatus === "NEW" &&
icon="mdi-file-edit" store.rolePerson === "USER"
color="grey-2" ? "แก้ไขผู้ประเมิน"
text-color="red-6" : "ข้อมูลผู้ประเมิน"
size="md" }}</q-tooltip>
@click="requireEdit()" </q-btn>
> <q-btn
<q-tooltip>ขอแก้ไขข้อตกลง</q-tooltip> unelevated
</q-btn> round
icon="mdi-file-eye-outline"
<!-- <q-btn color="grey-2"
v-if="!isReadonly" text-color="primary"
unelevated size="md"
round >
icon="mdi-format-list-bulleted-square" <q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip>
color="grey-2" </q-btn>
text-color="amber-10" <q-btn
size="md" unelevated
@click="modalScore = true" round
> color="grey-2"
<q-tooltip>แก้ไขคะแนนเต็ม</q-tooltip> text-color="blue-5"
</q-btn> --> icon="mdi-file-eye-outline"
<q-btn size="md"
unelevated >
round <q-tooltip>ดูข้อมูลการทดลองงาน</q-tooltip>
icon="mdi-account" </q-btn>
color="grey-2"
text-color="edit"
size="md"
@click="modalEdit = true"
>
<q-tooltip>{{
store.dataEvaluation.evaluationStatus === "NEW" &&
store.rolePerson === "USER"
? "แก้ไขผู้ประเมิน"
: "ข้อมูลผู้ประเมิน"
}}</q-tooltip>
</q-btn>
<q-btn
unelevated
round
icon="mdi-file-eye-outline"
color="grey-2"
text-color="primary"
size="md"
>
<q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip>
</q-btn>
<q-btn
unelevated
round
color="grey-2"
text-color="blue-5"
icon="mdi-file-eye-outline"
size="md"
>
<q-tooltip>ดูข้อมูลการทดลองงาน</q-tooltip>
</q-btn>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="row items-center bg-toolbar col-12 q-pa-sm"> <div class="row items-center bg-toolbar col-12 q-pa-sm">
<div class="col-12 q-py-xs" style="padding-left: 12%"> <div class="col-12 q-py-xs" style="padding-left: 12%">
<div class="row no-wrap"> <div class="row no-wrap">
<div class="col-2"> <div class="col-2">
<div class="column"> <div class="column">
<span class="text-grey-6">ตำแหน่งในสายงาน</span> <span class="text-grey-6">ตำแหน่งในสายงาน</span>
<span class="text-weight-medium text-dark">{{ <span class="text-weight-medium text-dark">{{
store.dataEvaluation.position store.dataEvaluation.position
}}</span> }}</span>
</div>
</div> </div>
<div class="col-2"> </div>
<div class="column"> <div class="col-2">
<span class="text-grey-6">ประเภทตำแหน่ง</span> <div class="column">
<span class="text-weight-medium text-dark">{{ <span class="text-grey-6">ประเภทตำแหน่ง</span>
store.dataEvaluation.posTypeName <span class="text-weight-medium text-dark">{{
}}</span> store.dataEvaluation.posTypeName
</div> }}</span>
</div> </div>
<div class="col-2"> </div>
<div class="column"> <div class="col-2">
<span class="text-grey-6">ระดับตำแหน่ง</span> <div class="column">
<span class="text-weight-medium text-dark">{{ <span class="text-grey-6">ระดับตำแหน่ง</span>
store.dataEvaluation.posLevelName <span class="text-weight-medium text-dark">{{
}}</span> store.dataEvaluation.posLevelName
</div> }}</span>
</div> </div>
<div class="col-2"> </div>
<div class="column"> <div class="col-2">
<span class="text-grey-6">สถานะการประเมิน</span> <div class="column">
<span class="text-weight-medium text-dark">{{ <span class="text-grey-6">สถานะการประเมิน</span>
formProfile.status <span class="text-weight-medium text-dark">{{
}}</span> formProfile.status
</div> }}</span>
</div> </div>
<div class="col-2"> </div>
<div class="column"> <div class="col-2">
<span class="text-grey-6">ผลการประเมิน</span> <div class="column">
<span class="text-weight-medium text-dark">{{ <span class="text-grey-6">ผลการประเมิน</span>
formProfile.result <span class="text-weight-medium text-dark">{{
}}</span> formProfile.result
</div> }}</span>
</div> </div>
<div class="col-2"> </div>
<div class="column"> <div class="col-2">
<span class="text-grey-6">คะแนนประเมิน</span> <div class="column">
<span class="text-weight-medium text-primary"> <span class="text-grey-6">คะแนนประเมิน</span>
{{ <span class="text-weight-medium text-primary">
store.dataEvaluation.posExecutiveName == null {{
? ( store.dataEvaluation.posExecutiveName == null
store.indicatorScoreVal + ? (
store.competencyScoreVal + store.indicatorScoreVal +
store.devScoreVal store.competencyScoreVal +
).toFixed(2) store.devScoreVal
: ( ).toFixed(2)
store.excusiveIndicator1ScoreVal + : (
store.excusiveIndicator2ScoreVal + store.excusiveIndicator1ScoreVal +
store.competencyScoreVal store.excusiveIndicator2ScoreVal +
).toFixed(2) store.competencyScoreVal
}} ).toFixed(2)
</span> }}
</div> </span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</q-card> </div>
</q-card>
<q-card class="q-mt-md rounded"> <q-card class="q-mt-md rounded">
<TabMain /> <TabMain />
</q-card> </q-card>
</div>
</div> </div>
</div> </div>
</div>
<q-dialog v-model="modalEdit" persistent> <q-dialog v-model="modalEdit" persistent>
<q-card bordered style="width: 50vh"> <q-card bordered style="width: 50vh">

73
src/modules/08_KPI/views/main.vue
View file

@ -383,7 +383,23 @@ onMounted(() => {
<template> <template>
<div class="col-12 row justify-center"> <div class="col-12 row justify-center">
<div class="col-xs-12 col-sm-12 col-md-11"> <div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle text-white col-12 row items-center"> <q-toolbar style="padding: 0px">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.push(`/`)"
/>
<q-toolbar-title class="toptitle text-white items-center">
รายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล</q-toolbar-title
>
</q-toolbar>
<!-- <div class="toptitle text-white col-12 row items-center">
<q-btn <q-btn
icon="mdi-arrow-left" icon="mdi-arrow-left"
unelevated unelevated
@ -395,11 +411,11 @@ onMounted(() => {
@click="router.push(`/`)" @click="router.push(`/`)"
/> />
รายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล รายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล
</div> </div> -->
<div class="col-12"> <div class="col-12">
<q-card bordered class="q-pa-md"> <q-card bordered class="q-pa-md">
<q-toolbar style="padding: 0"> <div class="row col-12 q-col-gutter-sm q-mb-sm">
<div class="row q-gutter-sm"> <div class="col-xs-12 col-md-3">
<datepicker <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="year" v-model="year"
@ -418,7 +434,6 @@ onMounted(() => {
dense dense
lazy-rules lazy-rules
outlined outlined
class="inputgreen"
hide-bottom-space hide-bottom-space
:model-value="!!year ? year + 543 : null" :model-value="!!year ? year + 543 : null"
:label="`${'ปีงบประมาณ'}`" :label="`${'ปีงบประมาณ'}`"
@ -434,6 +449,9 @@ onMounted(() => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<div class="col-xs-10 col-md-3">
<q-select <q-select
v-model="round" v-model="round"
outlined outlined
@ -442,11 +460,13 @@ onMounted(() => {
option-label="name" option-label="name"
option-value="id" option-value="id"
:options="roundMainOp" :options="roundMainOp"
style="min-width: 200px"
emit-value emit-value
map-options map-options
@update:model-value="changRound" @update:model-value="changRound"
/> />
</div>
<div class="col-xs-2 col-md-2">
<q-btn <q-btn
flat flat
round round
@ -459,13 +479,7 @@ onMounted(() => {
</div> </div>
<q-space /> <q-space />
<div class="row q-gutter-sm"> <div class="col-xs-12 col-md-2">
<!-- <q-input
outlined
dense
v-model="filterKeyword"
label="ค้นหา"
></q-input> -->
<q-select <q-select
v-model="visibleColumns" v-model="visibleColumns"
multiple multiple
@ -481,10 +495,10 @@ onMounted(() => {
style="min-width: 150px" style="min-width: 150px"
/> />
</div> </div>
</q-toolbar> </div>
<div class="col-12"> <div class="col-12">
<q-table <d-table
ref="table" ref="table"
:columns="columns" :columns="columns"
:rows="rows" :rows="rows"
@ -494,7 +508,6 @@ onMounted(() => {
bordered bordered
:paging="true" :paging="true"
dense dense
class="custom-table2"
:rows-per-page-options="[10, 25, 50, 100]" :rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns" :visible-columns="visibleColumns"
v-model:pagination="pagination" v-model:pagination="pagination"
@ -524,6 +537,26 @@ onMounted(() => {
</q-td> </q-td>
</q-tr> </q-tr>
</template> </template>
<template #item="props">
<div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
<q-card bordered flat>
<q-list @click="redirectViewDetail(props.row.id)">
<q-item
v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
:key="col.name"
>
<q-item-section>
<q-item-label caption>{{ col.label }}</q-item-label>
<q-item-label>
{{ col.value ? col.value : "-" }}</q-item-label
>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
<template v-slot:pagination="scope"> <template v-slot:pagination="scope">
ทั้งหมด {{ total }} รายการ ทั้งหมด {{ total }} รายการ
<q-pagination <q-pagination
@ -538,7 +571,7 @@ onMounted(() => {
@update:model-value="fetchList" @update:model-value="fetchList"
></q-pagination> ></q-pagination>
</template> </template>
</q-table> </d-table>
</div> </div>
</q-card> </q-card>
</div> </div>
@ -546,7 +579,10 @@ onMounted(() => {
</div> </div>
<q-dialog v-model="modalDialog" persistent> <q-dialog v-model="modalDialog" persistent>
<q-card class="col-12" style="width: 25vw"> <q-card
class="col-12"
:style="$q.screen.gt.xs ? 'width: 25vw' : 'width: 100vw'"
>
<q-form greedy @submit.prevent @validation-success="onSubmit"> <q-form greedy @submit.prevent @validation-success="onSubmit">
<DialogHeader :tittle="'สร้างแบบประเมินผลฯ'" :close="onCloseDialog" /> <DialogHeader :tittle="'สร้างแบบประเมินผลฯ'" :close="onCloseDialog" />
<q-separator /> <q-separator />
@ -571,7 +607,6 @@ onMounted(() => {
dense dense
lazy-rules lazy-rules
outlined outlined
class="inputgreen"
hide-bottom-space hide-bottom-space
:model-value="!!yearDialog ? yearDialog + 543 : null" :model-value="!!yearDialog ? yearDialog + 543 : null"
:label="`${'ปีงบประมาณ'}`" :label="`${'ปีงบประมาณ'}`"

21
src/modules/08_KPI/views/mainEvaluator.vue
View file

@ -198,7 +198,7 @@ onMounted(async () => {
<template> <template>
<div class="col-12 row justify-center"> <div class="col-12 row justify-center">
<div class="col-xs-12 col-sm-12 col-md-11"> <div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle text-white col-12 row items-center"> <q-toolbar style="padding: 0px;">
<q-btn <q-btn
icon="mdi-arrow-left" icon="mdi-arrow-left"
unelevated unelevated
@ -209,8 +209,23 @@ onMounted(async () => {
class="q-mr-sm" class="q-mr-sm"
@click="router.push(`/`)" @click="router.push(`/`)"
/> />
รายการการประเมินผลการปฏิบัติราชการระดับบุคคล <q-toolbar-title class="toptitle text-white items-center">
</div> รายการการประเมินผลการปฏิบัติราชการระดับบุคคล</q-toolbar-title
>
</q-toolbar>
<!-- <div class="toptitle text-white col-12 row items-center">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.push(`/`)"
/>
</div> -->
<div class="col-12"> <div class="col-12">
<q-card bordered class="q-pa-md"> <q-card bordered class="q-pa-md">
<div class="items-center col-12 row q-col-gutter-sm q-mb-sm"> <div class="items-center col-12 row q-col-gutter-sm q-mb-sm">