no message
This commit is contained in:
STW_TTTY\stwtt
parent
8f878e2f57
commit
02249deedf
3 changed files with 784 additions and 115 deletions
|
|
@ -6,6 +6,7 @@ import { ref, reactive, onMounted } from "vue";
|
|||
//history dialog
|
||||
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
|
||||
|
||||
import DialogDevelop from "@/modules/10_registry/Dialog/DialogDevelopmant.vue";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
|
|
@ -17,25 +18,19 @@ const $q = useQuasar();
|
|||
const mode = ref<any>($q.screen.gt.xs);
|
||||
const mixin = useCounterMixin();
|
||||
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
|
||||
const modalDevelop = ref<boolean>(false);
|
||||
const kpiDevelopmentId = ref<string>("");
|
||||
|
||||
const modalHistory = ref<boolean>(false);
|
||||
/** ตัวแปรข้อมูล */
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"no",
|
||||
"Knowledge",
|
||||
"develop",
|
||||
"name",
|
||||
"developmentProjects",
|
||||
"target",
|
||||
"developmentResults",
|
||||
"developmentReport",
|
||||
]);
|
||||
const visibleColumnsHistory = ref<string[]>([
|
||||
"no",
|
||||
"Knowledge",
|
||||
"develop",
|
||||
"target",
|
||||
"developmentResults",
|
||||
"developmentReport",
|
||||
"point",
|
||||
]);
|
||||
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
|
|
@ -50,22 +45,22 @@ const columns = ref<QTableProps["columns"]>([
|
|||
format: (v) => date2Thai(v),
|
||||
},
|
||||
{
|
||||
name: "Knowledge",
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "ความรู้ / ทักษะ / สมรรถนะที่ต้องได้รับการพัฒนา",
|
||||
sortable: true,
|
||||
field: "Knowledge",
|
||||
field: "name",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "develop",
|
||||
name: "developmentProjects",
|
||||
align: "left",
|
||||
label: "วิธีการพัฒนา",
|
||||
sortable: true,
|
||||
field: "develop",
|
||||
field: "developmentProjects",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
|
|
@ -94,11 +89,11 @@ const columns = ref<QTableProps["columns"]>([
|
|||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "developmentReport",
|
||||
name: "point",
|
||||
align: "left",
|
||||
label: "รายงานผลการพัฒนา",
|
||||
sortable: true,
|
||||
field: "developmentReport",
|
||||
field: "point",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
|
|
@ -106,73 +101,10 @@ const columns = ref<QTableProps["columns"]>([
|
|||
},
|
||||
]);
|
||||
|
||||
const columnsHistory = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => date2Thai(v),
|
||||
},
|
||||
{
|
||||
name: "Knowledge",
|
||||
align: "left",
|
||||
label: "ความรู้ / ทักษะ / สมรรถนะที่ต้องได้รับการพัฒนา",
|
||||
sortable: true,
|
||||
field: "Knowledge",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "develop",
|
||||
align: "left",
|
||||
label: "วิธีการพัฒนา",
|
||||
sortable: true,
|
||||
field: "develop",
|
||||
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: "developmentResults",
|
||||
align: "left",
|
||||
label: "วิธีการวัดผลการพัฒนา",
|
||||
sortable: true,
|
||||
field: "developmentResults",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "developmentReport",
|
||||
align: "left",
|
||||
label: "รายงานผลการพัฒนา",
|
||||
sortable: true,
|
||||
field: "developmentReport",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
const paginationPlan = ref({
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
|
||||
function onHistory(id: string) {
|
||||
modalHistory.value = true;
|
||||
|
|
@ -183,7 +115,7 @@ function onHistory(id: string) {
|
|||
function getData() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.dataUserCertificate("assessments"))
|
||||
.get(config.API.developmentUser)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
rows.value = data;
|
||||
|
|
@ -213,6 +145,15 @@ function getHistory() {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* เปิด Dialog การพัฒนารายบุคคล
|
||||
* @param data ข้อมูลตาม row
|
||||
*/
|
||||
function openDialogDevelop(data: any) {
|
||||
modalDevelop.value = true;
|
||||
kpiDevelopmentId.value = data.kpiDevelopmentId;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
|
|
@ -290,31 +231,75 @@ onMounted(() => {
|
|||
</template>
|
||||
|
||||
<template v-if="mode" v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td v-for="(col, index) in props.cols" :key="col.name">
|
||||
<q-tr :props="props" class="vertical-top">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
{{
|
||||
(paginationPlan.page - 1) * paginationPlan.rowsPerPage +
|
||||
props.rowIndex +
|
||||
1
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'status'">
|
||||
{{ props.row.status ? props.row.status : "-" }}
|
||||
<div v-else-if="col.name == 'developmentProjects'">
|
||||
<div class="column">
|
||||
<q-checkbox
|
||||
size="xs"
|
||||
:model-value="props.row.isDevelopment70"
|
||||
label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
|
||||
/>
|
||||
<q-checkbox
|
||||
size="xs"
|
||||
:model-value="props.row.isDevelopment20"
|
||||
label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
|
||||
/>
|
||||
<q-checkbox
|
||||
size="xs"
|
||||
:model-value="props.row.isDevelopment10"
|
||||
label="10 การฝึกอบรมอื่นๆ"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-else-if="col.name == 'developmentResults'">
|
||||
<div class="column">
|
||||
<span>
|
||||
{{
|
||||
props.row.achievement10
|
||||
? `- ${props.row.achievement10} (10)`
|
||||
: ""
|
||||
}}
|
||||
</span>
|
||||
<span>
|
||||
{{
|
||||
props.row.achievement5
|
||||
? `- ${props.row.achievement5} (5)`
|
||||
: ""
|
||||
}}
|
||||
</span>
|
||||
<span>
|
||||
{{
|
||||
props.row.achievement0
|
||||
? `- ${props.row.achievement10} (0)`
|
||||
: ""
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="table_ellipsis">
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
color="info"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
icon="mdi-history"
|
||||
@click="onHistory(props.row.id)"
|
||||
dense
|
||||
color="info"
|
||||
icon="mdi-eye"
|
||||
@click="openDialogDevelop(props.row)"
|
||||
>
|
||||
<q-tooltip>ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
<q-tooltip>รายละเอียด</q-tooltip>
|
||||
</q-btn></q-td
|
||||
>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-else v-slot:item="props">
|
||||
|
|
@ -322,18 +307,16 @@ onMounted(() => {
|
|||
<q-card bordered flat>
|
||||
<q-list dense class="q-mt-lg relative-position">
|
||||
<q-btn
|
||||
icon="mdi-history"
|
||||
color="info"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
dense
|
||||
color="info"
|
||||
icon="mdi-eye"
|
||||
size="14px"
|
||||
class="absolute_button"
|
||||
@click="onHistory(props.row.id)"
|
||||
@click="openDialogDevelop(props.row)"
|
||||
>
|
||||
<q-tooltip
|
||||
>ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ</q-tooltip
|
||||
>
|
||||
<q-tooltip>รายละเอียด</q-tooltip>
|
||||
</q-btn>
|
||||
<q-item v-for="col in props.cols" :key="col.name">
|
||||
<q-item-section class="fix_top">
|
||||
|
|
@ -341,7 +324,62 @@ onMounted(() => {
|
|||
col.label
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section class="fix_top">
|
||||
|
||||
<q-item-section
|
||||
v-if="col.name == 'developmentProjects'"
|
||||
class="fix_top"
|
||||
>
|
||||
<div class="column">
|
||||
<q-checkbox
|
||||
class="check_box"
|
||||
size="xs"
|
||||
:model-value="props.row.isDevelopment70"
|
||||
label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
|
||||
/>
|
||||
<q-checkbox
|
||||
class="check_box"
|
||||
size="xs"
|
||||
:model-value="props.row.isDevelopment20"
|
||||
label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
|
||||
/>
|
||||
<q-checkbox
|
||||
class="check_box"
|
||||
size="xs"
|
||||
:model-value="props.row.isDevelopment10"
|
||||
label="10 การฝึกอบรมอื่นๆ"
|
||||
/>
|
||||
</div>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section
|
||||
v-else-if="col.name == 'developmentResults'"
|
||||
class="fix_top"
|
||||
>
|
||||
<div class="column">
|
||||
<span>
|
||||
{{
|
||||
props.row.achievement10
|
||||
? `- ${props.row.achievement10} (10)`
|
||||
: ""
|
||||
}}
|
||||
</span>
|
||||
<span>
|
||||
{{
|
||||
props.row.achievement5
|
||||
? `- ${props.row.achievement5} (5)`
|
||||
: ""
|
||||
}}
|
||||
</span>
|
||||
<span>
|
||||
{{
|
||||
props.row.achievement0
|
||||
? `- ${props.row.achievement10} (0)`
|
||||
: ""
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</q-item-section>
|
||||
<q-item-section v-else class="fix_top">
|
||||
<q-item-label class="text-dark text-weight-medium">{{
|
||||
col.value ? col.value : "-"
|
||||
}}</q-item-label>
|
||||
|
|
@ -364,14 +402,8 @@ onMounted(() => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DialogHistory
|
||||
v-model:modal="modalHistory"
|
||||
:title="'ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ'"
|
||||
:getData="getHistory"
|
||||
:rows="rowsHistory"
|
||||
:visibleColumns="visibleColumnsHistory"
|
||||
:columns="columnsHistory"
|
||||
/>
|
||||
|
||||
<DialogDevelop v-model:modal="modalDevelop" v-model:id="kpiDevelopmentId" />
|
||||
</template>
|
||||
<style scoped>
|
||||
.absolute_button {
|
||||
|
|
@ -383,4 +415,9 @@ onMounted(() => {
|
|||
.fix_top {
|
||||
justify-content: start !important;
|
||||
}
|
||||
|
||||
.check_box {
|
||||
align-items: start;
|
||||
text-wrap: wrap;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue