แบบประเมิน => class rating
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
3c0c3717a0
commit
6f5fb7117f
3 changed files with 233 additions and 13 deletions
|
|
@ -1,6 +1,211 @@
|
|||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
import { useKpiDataStore } from "@/modules/08_KPI/store";
|
||||
|
||||
import type { QTableProps } from "quasar";
|
||||
|
||||
const store = useKpiDataStore();
|
||||
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const rows = defineModel<any>("data", { required: true });
|
||||
|
||||
/** table*/
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "includingName",
|
||||
align: "left",
|
||||
label: "ตัวชี้วัด",
|
||||
sortable: true,
|
||||
field: "includingName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "target",
|
||||
align: "left",
|
||||
label: "ค่าเป้าหมาย",
|
||||
sortable: true,
|
||||
field: "target",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "point",
|
||||
align: "left",
|
||||
label: "ระดับคะแนนตามเกณฑ์การประเมิน",
|
||||
sortable: true,
|
||||
field: "point",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "weight",
|
||||
align: "left",
|
||||
label: "น้ำหนัก (ร้อยละ)",
|
||||
sortable: true,
|
||||
field: "weight",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "achievement",
|
||||
align: "left",
|
||||
label: "ผลสำเร็จของงาน",
|
||||
sortable: true,
|
||||
field: "achievement",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "evaluationResults",
|
||||
align: "left",
|
||||
label: "ผลการประเมิน",
|
||||
sortable: true,
|
||||
field: "evaluationResults",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
const visibleColumns = ref<string[]>([
|
||||
"includingName",
|
||||
"target",
|
||||
"point",
|
||||
"weight",
|
||||
"achievement",
|
||||
"evaluationResults",
|
||||
]);
|
||||
|
||||
const answer3 = ref<number>(0);
|
||||
|
||||
function closeDialog() {
|
||||
modal.value = false;
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div></div>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="width: 1200px; max-width: 80vw">
|
||||
<DialogHeader :tittle="'ประเมิน'" :close="closeDialog" />
|
||||
<q-separator />
|
||||
<q-card-section class="q-pt-none">
|
||||
<div class="col-12 q-pa-sm">
|
||||
<q-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
hide-pagination
|
||||
class="custom-table2"
|
||||
:visible-columns="visibleColumns"
|
||||
:rows-per-page-options="[20]"
|
||||
no-data-label="ไม่มีข้อมูล"
|
||||
>
|
||||
<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">{{ col.label }}</span>
|
||||
</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.id">
|
||||
<div v-if="col.name === 'point'">
|
||||
<q-rating
|
||||
v-model="props.row.point"
|
||||
max="5"
|
||||
size="sm"
|
||||
color="grey"
|
||||
:color-selected="store.ratingColors"
|
||||
label="ระดับการประเมินพฤติกรรม"
|
||||
>
|
||||
<template v-slot:tip-1>
|
||||
<q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
|
||||
</template>
|
||||
<template v-slot:tip-2>
|
||||
<q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
|
||||
</template>
|
||||
<template v-slot:tip-3>
|
||||
<q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
|
||||
</template>
|
||||
<template v-slot:tip-4>
|
||||
<q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
|
||||
</template>
|
||||
<template v-slot:tip-5>
|
||||
<q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
|
||||
</template>
|
||||
</q-rating>
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
.custom-table2 {
|
||||
max-height: 64vh;
|
||||
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.q-table thead tr {
|
||||
background: #ecebeb;
|
||||
}
|
||||
|
||||
.q-table thead tr th {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.q-table td:nth-of-type(2) {
|
||||
z-index: 3 !important;
|
||||
}
|
||||
|
||||
.q-table th:nth-of-type(2),
|
||||
.q-table td:nth-of-type(2) {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* this will be the loading indicator */
|
||||
.q-table thead tr:last-child th {
|
||||
/* height of all previous header rows */
|
||||
top: 48px;
|
||||
}
|
||||
|
||||
.q-table thead tr:first-child th {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,10 +5,12 @@ import { useRoute } from "vue-router";
|
|||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
|
||||
import type { QTableProps } from "quasar";
|
||||
|
||||
import Dialog from "@/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue";
|
||||
import Dialog03 from "@/modules/08_KPI/components/Tab/Dialog/03_FormIndicatorSpecial.vue";
|
||||
import DialogEvaluate from "@/modules/08_KPI/components/Tab/DialogEvaluate/01_Indicator.vue";
|
||||
|
||||
import type { QTableProps } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const $q = useQuasar();
|
||||
|
|
@ -30,12 +32,6 @@ const props = defineProps({
|
|||
fetchList: { type: Function, required: true },
|
||||
});
|
||||
|
||||
const kpiUserPlannedId = ref<string>("");
|
||||
const filterKeyword = ref<string>("");
|
||||
const modal = ref<boolean>(false);
|
||||
const modalAssigned = ref<boolean>(false);
|
||||
const isStatusEdit = ref<boolean>(false);
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"includingName",
|
||||
"target",
|
||||
|
|
@ -44,7 +40,6 @@ const visibleColumns = ref<string[]>([
|
|||
"achievement",
|
||||
"evaluationResults",
|
||||
]);
|
||||
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "includingName",
|
||||
|
|
@ -114,6 +109,13 @@ const columns = ref<QTableProps["columns"]>([
|
|||
},
|
||||
]);
|
||||
|
||||
const kpiUserPlannedId = ref<string>("");
|
||||
const filterKeyword = ref<string>("");
|
||||
const modal = ref<boolean>(false);
|
||||
const modalAssigned = ref<boolean>(false);
|
||||
const isStatusEdit = ref<boolean>(false);
|
||||
const moalEvaluate = ref<boolean>(false);
|
||||
|
||||
function onAdd(edit: boolean = false, id: string = "") {
|
||||
isStatusEdit.value = edit;
|
||||
kpiUserPlannedId.value = id;
|
||||
|
|
@ -124,7 +126,9 @@ function onAdd(edit: boolean = false, id: string = "") {
|
|||
}
|
||||
}
|
||||
|
||||
function onEvaluate() {}
|
||||
function onEvaluate() {
|
||||
moalEvaluate.value = true;
|
||||
}
|
||||
|
||||
function onDelete(id: string) {
|
||||
dialogRemove($q, async () => {
|
||||
|
|
@ -270,6 +274,8 @@ watch(
|
|||
:isStatusEdit="isStatusEdit"
|
||||
:kpiUserPlannedId="kpiUserPlannedId"
|
||||
/>
|
||||
|
||||
<DialogEvaluate v-model:modal="moalEvaluate" v-model:data="rows" />
|
||||
</template>
|
||||
<style scoped>
|
||||
.custom-table2 {
|
||||
|
|
|
|||
|
|
@ -170,6 +170,14 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
|
|||
}
|
||||
}
|
||||
|
||||
const ratingColors = ref<string[]>([
|
||||
"light-blue-3",
|
||||
"light-blue-6",
|
||||
"blue",
|
||||
"blue-9",
|
||||
"blue-10",
|
||||
]);
|
||||
|
||||
return {
|
||||
tabMain,
|
||||
dataProfile,
|
||||
|
|
@ -181,6 +189,7 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
|
|||
checkCompetency,
|
||||
checkCompetencyDefaultCompetencyLevel,
|
||||
defaultCompetencyCoreLevel,
|
||||
defaultCompetencyGroupLevel
|
||||
defaultCompetencyGroupLevel,
|
||||
ratingColors,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue