Merge branch 'nice_dev' into develop
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
commit
4e348b3c63
19 changed files with 4442 additions and 41 deletions
|
|
@ -1,3 +1,244 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import TabMain from "@/modules/14_KPI/components/detailList/TabMain.vue";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
|
||||
|
||||
// import type { FormProfile } from "@/modules/08_KPI/interface/request/index";
|
||||
|
||||
const route = useRoute();
|
||||
const id = ref<string>(route.params.id as string);
|
||||
const isReadonly = <boolean>(route.name === "KPIDetail" ? true : false);
|
||||
|
||||
const store = useKPIDataStore();
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { showLoader, hideLoader, messageError } = mixin;
|
||||
|
||||
const formProfile = reactive<any>({
|
||||
fullName: "",
|
||||
position: "",
|
||||
type: "",
|
||||
level: "",
|
||||
status: "",
|
||||
result: "",
|
||||
score: "-",
|
||||
avartar: "",
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
function fetchEvaluation() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.kpiUserEvaluation + `/${id.value}`)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
store.dataEvaluation = data;
|
||||
formProfile.status = store.convertStatus(data.evaluationStatus);
|
||||
formProfile.result = store.convertResults(data.evaluationResults);
|
||||
fetchProfile(data.profileId);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function getProfile() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.profilePosition())
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
store.dataProfile = data;
|
||||
store.checkCompetency();
|
||||
store.checkCompetencyDefaultCompetencyLevel();
|
||||
formProfile.fullName = `${data.prefix}${data.firstName} ${data.lastName}`;
|
||||
formProfile.position = data.position;
|
||||
formProfile.type = data.posTypeName;
|
||||
formProfile.level = data.posLevelName;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
async function fetchProfile(id: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(
|
||||
config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, `profile-${id}`)
|
||||
)
|
||||
.then(async (res) => {
|
||||
formProfile.avartar = res.data.downloadUrl;
|
||||
})
|
||||
.catch(() => {
|
||||
// profilePicture.value = avatar;
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** save */
|
||||
function onSave() {}
|
||||
|
||||
onMounted(() => {
|
||||
fetchEvaluation();
|
||||
getProfile();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>detail</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-11">
|
||||
<div class="toptitle 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-list`) : router.push(`/KPI`)"
|
||||
/>
|
||||
{{ 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">
|
||||
<img
|
||||
v-if="formProfile.avartar == null"
|
||||
src="@/assets/avatar_user.jpg"
|
||||
class="bg-grey-3"
|
||||
style="object-fit: cover"
|
||||
/>
|
||||
|
||||
<img v-else :src="formProfile.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">{{
|
||||
formProfile.fullName ? formProfile.fullName : "-"
|
||||
}}</span>
|
||||
<q-space />
|
||||
<div class="q-gutter-x-sm">
|
||||
<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 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">{{
|
||||
formProfile.position
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="column">
|
||||
<span class="text-grey-6">ประเภทตำแหน่ง</span>
|
||||
<span class="text-weight-medium text-dark">{{
|
||||
formProfile.type
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="column">
|
||||
<span class="text-grey-6">ระดับตำแหน่ง</span>
|
||||
<span class="text-weight-medium text-dark">{{
|
||||
formProfile.level
|
||||
}}</span>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="column">
|
||||
<span class="text-grey-6">คะแนนประเมิน</span>
|
||||
<span class="text-weight-medium text-primary">{{
|
||||
formProfile.score
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card class="q-mt-md rounded">
|
||||
<TabMain />
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.bg-toolbar {
|
||||
background-color: #f2fbfa;
|
||||
}
|
||||
|
||||
.absolute-center-left {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,328 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive, watch } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
|
||||
import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
|
||||
import type { QTableProps } from "quasar";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
|
||||
|
||||
const $q = useQuasar();
|
||||
const router = useRouter();
|
||||
const store = useKPIDataStore();
|
||||
|
||||
const { showLoader, hideLoader, messageError, date2Thai, dialogConfirm } =
|
||||
useCounterMixin();
|
||||
|
||||
const filterKeyword = ref<string>("");
|
||||
|
||||
const rows = ref<any>();
|
||||
|
||||
const year = ref<number>(new Date().getFullYear());
|
||||
|
||||
const round = ref<string>("");
|
||||
const roundOp = ref<DataOption[]>([]);
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"name",
|
||||
"createdAt",
|
||||
"evaluationStatus",
|
||||
"evaluationStatus",
|
||||
]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "ผู้ขอรับการประเมิน",
|
||||
sortable: true,
|
||||
field: "name",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "createdAt",
|
||||
align: "left",
|
||||
label: "วันที่สร้างแบบประเมิน",
|
||||
sortable: true,
|
||||
field: "createdAt",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => date2Thai(v),
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "evaluationStatus",
|
||||
align: "left",
|
||||
label: "สถานะการประเมิน",
|
||||
sortable: true,
|
||||
field: "evaluationStatus",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => store.convertResults(v),
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "evaluationStatus",
|
||||
align: "left",
|
||||
label: "ผลการประเมิน",
|
||||
sortable: true,
|
||||
field: "evaluationStatus",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => store.convertResults(v),
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
|
||||
const formQuery = reactive({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
const maxPage = ref<number>(1);
|
||||
const totalList = ref<number>(0);
|
||||
|
||||
function fetchRoundOption() {
|
||||
showLoader();
|
||||
http
|
||||
.get(
|
||||
config.API.kpiPeriod +
|
||||
`?page=${1}&pageSize=${10}&keyword=${""}&year=${year.value}`
|
||||
)
|
||||
.then((res) => {
|
||||
const data = res.data.result.data;
|
||||
const list = data.map((e: any) => ({
|
||||
id: e.id,
|
||||
name:
|
||||
e.durationKPI === "OCT"
|
||||
? "รอบตุลาคม"
|
||||
: e.durationKPI === "APR"
|
||||
? "รอบเมษายน"
|
||||
: "",
|
||||
}));
|
||||
roundOp.value = list;
|
||||
fetchList();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function fetchList() {
|
||||
showLoader();
|
||||
http
|
||||
.get(
|
||||
config.API.kpiUserEvaluation +
|
||||
`/admin?page=${formQuery.page}&pageSize=${formQuery.pageSize}&kpiPeriodId=${round.value}`
|
||||
)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
maxPage.value = Math.ceil(data.total / formQuery.pageSize);
|
||||
totalList.value = data.total;
|
||||
rows.value = data.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function changRound() {
|
||||
formQuery.page = 1;
|
||||
fetchList();
|
||||
}
|
||||
|
||||
function redirectViewDetail(id: string) {
|
||||
router.push(`KPI-list/${id}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* function updatePagination
|
||||
* @param newPagination ข้อมูล Pagination ใหม่
|
||||
*/
|
||||
function updatePagination(newPagination: any) {
|
||||
formQuery.page = 1;
|
||||
formQuery.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
const pagination = ref({
|
||||
sortBy: "desc",
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
|
||||
watch(
|
||||
() => formQuery.pageSize,
|
||||
() => {
|
||||
fetchList();
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
fetchRoundOption();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>list</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-11">
|
||||
<div class="toptitle col-12 row items-center">
|
||||
รายการการประเมินผลการปฏิบัติราชการระดับบุคคล
|
||||
</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="year"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
@update:model-value="fetchRoundOption()"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
lazy-rules
|
||||
outlined
|
||||
class="inputgreen"
|
||||
hide-bottom-space
|
||||
:model-value="!!year ? year + 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="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>
|
||||
|
||||
<q-space />
|
||||
<div class="row q-gutter-sm">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
v-model="filterKeyword"
|
||||
label="ค้นหา"
|
||||
></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>
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
:filter="filterKeyword"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:visible-columns="visibleColumns"
|
||||
v-model:pagination="pagination"
|
||||
@update:pagination="updatePagination"
|
||||
>
|
||||
<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-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"
|
||||
@click="redirectViewDetail(props.row.id)"
|
||||
>
|
||||
<div v-if="col.name === 'name'">
|
||||
{{
|
||||
`${props.row.prefix}${props.row.firstname} ${props.row.lastname}`
|
||||
}}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ totalList }} รายการ
|
||||
<q-pagination
|
||||
v-model="formQuery.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPage)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
:max-pages="5"
|
||||
@update:model-value="fetchList"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.icon-color {
|
||||
color: #4154b3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue