ปรับ responsive

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-05-24 13:52:58 +07:00
parent 650948d68a
commit 542b830a91
8 changed files with 611 additions and 560 deletions

View file

@ -312,251 +312,260 @@ function requireEdit() {
onMounted(async () => {
showLoader();
await getAll();
console.log(store.dataEvaluation.avartar);
});
</script>
<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" />
</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
v-if="
store.rolePerson == 'USER' &&
store.dataEvaluation.evaluationStatus == 'EVALUATING'
"
unelevated
round
icon="mdi-send"
color="grey-2"
text-color="blue-6"
size="md"
@click="sendToEvaluatore('EVALUATING_EVALUATOR')"
>
<q-tooltip>งใหประเมนอนผลการประเม</q-tooltip>
</q-btn>
<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>
<q-btn
v-if="
store.rolePerson == 'USER' &&
store.tabOpen < 3 &&
store.dataEvaluation.evaluationStatus != 'NEW' &&
(store.dataEvaluation.evaluationReqEdit == null ||
store.dataEvaluation.evaluationReqEdit == 'DONE')
"
:disabled="store.dataEvaluation.evaluatorId == null"
unelevated
round
icon="mdi-file-edit"
color="grey-2"
text-color="red-6"
size="md"
@click="requireEdit()"
>
<q-tooltip>ขอแกไขขอตกลง</q-tooltip>
</q-btn>
<q-btn
v-if="
store.rolePerson == 'USER' &&
store.dataEvaluation.evaluationStatus == 'EVALUATING'
"
unelevated
round
icon="mdi-send"
color="grey-2"
text-color="blue-6"
size="md"
@click="sendToEvaluatore('EVALUATING_EVALUATOR')"
>
<q-tooltip
>งใหประเมนอนผลการประเม</q-tooltip
>
</q-btn>
<!-- <q-btn
v-if="!isReadonly"
unelevated
round
icon="mdi-format-list-bulleted-square"
color="grey-2"
text-color="amber-10"
size="md"
@click="modalScore = true"
>
<q-tooltip>แกไขคะแนนเต</q-tooltip>
</q-btn> -->
<q-btn
unelevated
round
icon="mdi-account"
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>
<q-btn
v-if="
store.rolePerson == 'USER' &&
store.tabOpen < 3 &&
store.dataEvaluation.evaluationStatus != 'NEW' &&
(store.dataEvaluation.evaluationReqEdit == null ||
store.dataEvaluation.evaluationReqEdit == 'DONE')
"
:disabled="store.dataEvaluation.evaluatorId == null"
unelevated
round
icon="mdi-file-edit"
color="grey-2"
text-color="red-6"
size="md"
@click="requireEdit()"
>
<q-tooltip>ขอแกไขขอตกลง</q-tooltip>
</q-btn>
<!-- <q-btn
v-if="!isReadonly"
unelevated
round
icon="mdi-format-list-bulleted-square"
color="grey-2"
text-color="amber-10"
size="md"
@click="modalScore = true"
>
<q-tooltip>แกไขคะแนนเต</q-tooltip>
</q-btn> -->
<q-btn
unelevated
round
icon="mdi-account"
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 class="row items-center bg-toolbar col-12 q-pa-sm">
<div class="col-12 q-py-xs" style="padding-left: 12%">
<div class="row no-wrap">
<div class="col-2">
<div class="column">
<span class="text-grey-6">ตำแหนงในสายงาน</span>
<span class="text-weight-medium text-dark">{{
store.dataEvaluation.position
}}</span>
<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="row no-wrap">
<div class="col-2">
<div class="column">
<span class="text-grey-6">ตำแหนงในสายงาน</span>
<span class="text-weight-medium text-dark">{{
store.dataEvaluation.position
}}</span>
</div>
</div>
</div>
<div class="col-2">
<div class="column">
<span class="text-grey-6">ประเภทตำแหน</span>
<span class="text-weight-medium text-dark">{{
store.dataEvaluation.posTypeName
}}</span>
<div class="col-2">
<div class="column">
<span class="text-grey-6">ประเภทตำแหน</span>
<span class="text-weight-medium text-dark">{{
store.dataEvaluation.posTypeName
}}</span>
</div>
</div>
</div>
<div class="col-2">
<div class="column">
<span class="text-grey-6">ระดบตำแหน</span>
<span class="text-weight-medium text-dark">{{
store.dataEvaluation.posLevelName
}}</span>
<div class="col-2">
<div class="column">
<span class="text-grey-6">ระดบตำแหน</span>
<span class="text-weight-medium text-dark">{{
store.dataEvaluation.posLevelName
}}</span>
</div>
</div>
</div>
<div class="col-2">
<div class="column">
<span class="text-grey-6">สถานะการประเม</span>
<span class="text-weight-medium text-dark">{{
formProfile.status
}}</span>
<div class="col-2">
<div class="column">
<span class="text-grey-6">สถานะการประเม</span>
<span class="text-weight-medium text-dark">{{
formProfile.status
}}</span>
</div>
</div>
</div>
<div class="col-2">
<div class="column">
<span class="text-grey-6">ผลการประเม</span>
<span class="text-weight-medium text-dark">{{
formProfile.result
}}</span>
<div class="col-2">
<div class="column">
<span class="text-grey-6">ผลการประเม</span>
<span class="text-weight-medium text-dark">{{
formProfile.result
}}</span>
</div>
</div>
</div>
<div class="col-2">
<div class="column">
<span class="text-grey-6">คะแนนประเม</span>
<span class="text-weight-medium text-primary">
{{
store.dataEvaluation.posExecutiveName == null
? (
store.indicatorScoreVal +
store.competencyScoreVal +
store.devScoreVal
).toFixed(2)
: (
store.excusiveIndicator1ScoreVal +
store.excusiveIndicator2ScoreVal +
store.competencyScoreVal
).toFixed(2)
}}
</span>
<div class="col-2">
<div class="column">
<span class="text-grey-6">คะแนนประเม</span>
<span class="text-weight-medium text-primary">
{{
store.dataEvaluation.posExecutiveName == null
? (
store.indicatorScoreVal +
store.competencyScoreVal +
store.devScoreVal
).toFixed(2)
: (
store.excusiveIndicator1ScoreVal +
store.excusiveIndicator2ScoreVal +
store.competencyScoreVal
).toFixed(2)
}}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</q-card>
</q-card>
<q-card class="q-mt-md rounded">
<TabMain />
</q-card>
<q-card class="q-mt-md rounded">
<TabMain />
</q-card>
</div>
</div>
</div>
</div>
<q-dialog v-model="modalEdit" persistent>
<q-card bordered style="width: 50vh">

View file

@ -213,94 +213,93 @@ onMounted(async () => {
</div>
<div class="col-12">
<q-card bordered class="q-pa-md">
<q-toolbar style="padding: 0">
<div class="row q-gutter-sm">
<datepicker
menu-class-name="modalfix"
v-model="store.yearRound"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
@update:model-value="fetchRoundOption(true)"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
lazy-rules
outlined
hide-bottom-space
:model-value="
!!store.yearRound ? store.yearRound + 543 : null
"
:label="`${'ปีงบประมาณ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-select
v-model="store.formQuery.round"
outlined
label="รอบการประเมิน"
dense
option-label="name"
option-value="id"
:options="roundOp"
style="min-width: 200px"
emit-value
map-options
@update:model-value="changRound"
/>
</div>
<div class="items-center col-12 row q-col-gutter-sm q-mb-sm">
<datepicker
class="col-md-1 col-xs-12"
menu-class-name="modalfix"
v-model="store.yearRound"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
@update:model-value="fetchRoundOption(true)"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
lazy-rules
outlined
hide-bottom-space
:model-value="
!!store.yearRound ? store.yearRound + 543 : null
"
:label="`${'ปีงบประมาณ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-select
class="col-md-2 col-xs-12"
v-model="store.formQuery.round"
outlined
label="รอบการประเมิน"
dense
option-label="name"
option-value="id"
:options="roundOp"
emit-value
map-options
@update:model-value="changRound"
/>
<q-space />
<div class="row q-gutter-sm">
<q-input
outlined
dense
v-model="store.formQuery.keyword"
label="ค้นหาผู้ขอรับการประเมิน"
@keydown.enter.prevent="changRound"
>
<template v-slot:append>
<q-icon
v-if="store.formQuery.keyword !== ''"
name="clear"
class="cursor-pointer"
@click="(store.formQuery.keyword = ''), changRound()"
/>
<q-icon v-else name="search" color="grey-5" />
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
/>
</div>
</q-toolbar>
<q-input
class="col-md-2 col-xs-12"
outlined
dense
v-model="store.formQuery.keyword"
label="ค้นหาผู้ขอรับการประเมิน"
@keydown.enter.prevent="changRound"
>
<template v-slot:append>
<q-icon
v-if="store.formQuery.keyword !== ''"
name="clear"
class="cursor-pointer"
@click="(store.formQuery.keyword = ''), changRound()"
/>
<q-icon v-else name="search" color="grey-5" />
</template>
</q-input>
<q-select
class="col-md-1 col-xs-12"
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
/>
</div>
<div class="col-12">
<q-card bordered class="q-mt-sm">
<q-tabs