Merge branch 'develop' into devTee

This commit is contained in:
STW_TTTY\stwtt 2024-07-09 16:22:38 +07:00
commit f86250b668
12 changed files with 557 additions and 42 deletions

View file

@ -83,4 +83,10 @@ export default {
kpiSendToGet: (id: string) => `${kpiEvaluationUser}/reason/${id}`,
openPoint: (id: string) => `${kpiEvaluationUser}/open/${id}`,
/**
*
*/
evaluationUser: `${KpiUser}/evaluation/list`,
evaluationUserDone: `${KpiUser}/evaluation/done/kp7`,
};

View file

@ -567,6 +567,11 @@ const menuList = readonly<any[]>([
path: "KPIList",
role: "evaluateKPI",
},
{
label: "ประกาศผล",
path: "KPIResults",
role: "evaluateKPI",
},
{
label: "รายงาน",
path: "KPIReport",

View file

@ -1,21 +1,44 @@
<script setup lang="ts">
import { ref, computed, watch } from "vue";
import { ref, watch } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
/**
* import Type
*/
import type { QTableProps } from "quasar";
import type { HistoryPos } from "@/modules/02_organizationalNew/interface/response/organizational";
/**
* import Components
*/
import Header from "@/components/DialogHeader.vue";
/**
* import Store
*/
import { useCounterMixin } from "@/stores/mixin";
import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
/** Use*/
const store = useOrganizational();
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
const $q = useQuasar();
const modal = defineModel<boolean>("modal", { required: true });
/**
* props
*/
const modal = defineModel<boolean>("modal", { required: true });
const props = defineProps({
rowId: {
type: String,
},
});
/**
* Table
*/
const columns = ref<QTableProps["columns"]>([
{
name: "no",
@ -26,6 +49,15 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fullname",
align: "left",
label: "ชื่อคนครอง",
sortable: true,
field: "fullname",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "orgShortName",
align: "left",
@ -35,14 +67,6 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "lastUpdatedAt",
align: "left",
label: "วันที่แก้ไข",
field: "lastUpdatedAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "posMasterNoPrefix",
align: "left",
@ -70,29 +94,66 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const rows = ref<any>([]);
const props = defineProps({
rowId: {
type: String,
{
name: "position",
align: "left",
label: "ตำแแหน่ง",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "posType",
align: "left",
label: "ประเภทตำแหน่ง",
sortable: true,
field: "posType",
format(val, row) {
let name = "";
if (row.posType && row.position) {
name = `${row.posType} (${row.position})`;
} else if (row.posType) {
name = `${row.posType}`;
} else if (row.position) {
name = `(${row.position})`;
} else name = "-";
return name;
},
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
});
async function fetchHistoryPos(id: string) {
{
name: "posExecutive",
align: "left",
label: "ตำแหน่งทางการบริหาร",
sortable: true,
field: "posExecutive",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "lastUpdatedAt",
align: "left",
label: "วันที่แก้ไข",
field: "lastUpdatedAt",
format(val, row) {
return date2Thai(val);
},
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const rows = ref<HistoryPos[]>([]);
function fetchHistoryPos(id: string) {
showLoader();
await http
http
.get(config.API.orgPosHistory(id))
.then((res) => {
const data: HistoryPos[] = res.data.result;
const list = data.map((e: HistoryPos) => ({
...e,
lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "-",
posMasterNoPrefix: e.posMasterNoPrefix ?? "-",
posMasterNo: e.posMasterNo ?? "-",
posMasterNoSuffix: e.posMasterNoSuffix ?? "-",
}));
rows.value = list;
rows.value = data;
})
.catch((err) => {
messageError($q, err);
@ -102,6 +163,9 @@ async function fetchHistoryPos(id: string) {
});
}
/**
* callback function ทำงานเม modal === true
*/
watch(
() => modal.value,
() => {
@ -111,7 +175,7 @@ watch(
</script>
<template>
<q-dialog v-model="modal">
<q-card style="width: 700px; max-width: 80vw">
<q-card style="width: 1000px; max-width: 100vw">
<Header
:tittle="'ประวัติตำแหน่ง'"
:close="
@ -153,7 +217,7 @@ watch(
</div>
<div v-else>
{{ col.value }}
{{ col.value ?? "-" }}
</div>
</q-td>
</q-tr>

View file

@ -190,7 +190,7 @@ watch(
<template>
<div class="col-12 row q-pb-sm q-col-gutter-sm items-center">
<div v-if="empType === 'officer'">
<!-- <div v-if="empType === 'officer'">
<q-btn
round
flat
@ -202,7 +202,7 @@ watch(
>
<q-tooltip>เพมขอม</q-tooltip></q-btn
>
</div>
</div> -->
<div>
<q-btn
round

View file

@ -237,7 +237,7 @@ const conditionPopup = () => {
}
};
//pop up
//pop up
const confirmpopUp = async () => {
dialogConfirm(
$q,
@ -248,7 +248,7 @@ const confirmpopUp = async () => {
await http
.put(config.API.resignConfirm(roleUser.value, id.value), body)
.then(() => {
success($q, "การอนุมัติสำเร็จ");
success($q, "การอนุญาตสำเร็จ");
closeModal();
})
.catch((e) => {
@ -258,8 +258,8 @@ const confirmpopUp = async () => {
fetchData(id.value);
});
},
"ยืนยันการอนุมัติ",
"ต้องการยืนยันการอนุมัติการลานี้หรือไม่ ?"
"ยืนยันการอนุญาต",
"ต้องการยืนยันการอนุญาตการลานี้หรือไม่ ?"
);
};
@ -379,9 +379,9 @@ const getClass = (val: boolean) => {
const statusOrder = (val: boolean) => {
switch (val) {
case true:
return "ยับยั้งการลาออก";
return "ยับยั้ง";
case false:
return "อนุมัติการลาออก";
return "อนุญาต";
}
};
@ -580,7 +580,7 @@ function removeFile(fileName: string) {
dense
icon-right="check"
class="q-px-sm"
label="อนุมัติ"
label="อนุญาต"
@click="popUp('pass')"
/>
<q-btn
@ -1282,7 +1282,7 @@ function removeFile(fileName: string) {
<q-card style="width: 800px">
<q-form ref="myFormConfirm">
<DialogHeader
:title="`${actionPass ? 'การอนุมัติการลาออก' : 'การยับยั้งการลาออก'}`"
:title="`${actionPass ? 'อนุญาตการลาออก' : 'ยับยั้งการลาออก'}`"
:close="closeModal"
/>
<q-separator />

View file

@ -346,6 +346,7 @@ function onClickDownload(data: DataOption) {
data.id === "gov-05" ||
data.id === "gov-05-01" ||
data.id === "gov-07" ||
data.id === "gov-07-01" ||
data.id === "gov-08";
const finalUrl = isGovernmentId ? `${url}/${store.tabGroup}` : url;

View file

@ -243,7 +243,7 @@ onMounted(async () => {
class="q-mr-sm"
@click="router.go(-1)"
/>
ตราคาจาง กลมท{{ groupSalary }}
ตราคาจางของ กลมท {{ groupSalary }}
</div>
</div>
<q-card flat bordered class="q-pa-md">

View file

@ -240,7 +240,7 @@ watch([() => formQuery.page, () => formQuery.pageSize], async () => {
class="q-mr-sm"
@click="router.go(-1)"
/>
ตราเงนเดอน ของ{{ posType }}
ตราเงนเดอนของ {{ posType }}
</div>
</div>
<q-card flat bordered class="q-pa-md">

View file

@ -0,0 +1,271 @@
<script setup lang="ts">
import { ref, watch } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
/**
* importType
*/
import type { QTableProps } from "quasar";
import type { ResResults } from "@/modules/14_KPI/interface/response/Main";
/**
* importStore
*/
import { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/14_KPI/store";
/**
* use
*/
const $q = useQuasar();
const {
showLoader,
success,
messageError,
dialogConfirm,
hideLoader,
date2Thai,
} = useCounterMixin();
const { convertResults, convertStatus } = useKpiDataStore();
/**
* props
*/
const tab = defineModel<string>("tab", { required: true });
const rows = defineModel<ResResults[]>("row", { required: true });
const page = defineModel<number>("page", { required: true });
const pageSize = defineModel<number>("pageSize", { required: true });
const maxPage = defineModel<number>("maxPage", { required: true });
const total = defineModel<number>("total", { required: true });
const keyword = defineModel<string>("keyword", { required: true });
const porps = defineProps({
fetchData: { type: Function, required: true },
});
/**
* Table
*/
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: false,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fullName",
align: "left",
label: "ผู้รับการประเมิน",
sortable: true,
field: "fullName",
format: (val, row) => {
return `${row.prefix ?? ""}${row.firstname ?? ""} ${row.lastname ?? ""}`;
},
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "createdAt",
align: "left",
label: "วันที่สร้างแบบประเมิน",
sortable: true,
field: "createdAt",
headerStyle: "font-size: 14px",
format(val, row) {
return date2Thai(val);
},
style: "font-size: 14px",
},
{
name: "evaluationStatus",
align: "left",
label: "สถานะการประเมิน",
sortable: true,
field: "evaluationStatus",
format(val, row) {
return val === "KP7" ? "ประการผลแล้ว" : convertStatus(val);
},
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "evaluationResults",
align: "left",
label: "ผลการประเมิน",
sortable: true,
field: "evaluationResults",
format(val, row) {
return convertResults(val);
},
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const visibleColumns = ref<string[]>([
"no",
"fullName",
"createdAt",
"evaluationStatus",
"evaluationResults",
]);
const pagination = ref({
page: page.value,
rowsPerPage: pageSize.value,
});
const selected = ref<ResResults[]>([]);
/**
* function นทกการประกาศผล
*/
function onAnnounce() {
const ids = selected.value.map((item) => item.id);
dialogConfirm(
$q,
() => {
showLoader();
http
.post(config.API.evaluationUserDone, {
id: ids,
})
.then(() => {
setTimeout(async () => {
await porps.fetchData();
await success($q, "ประกาศผลสำเร็จ");
selected.value = [];
}, 1000);
})
.catch((err) => {
messageError($q, err);
hideLoader();
});
},
"ยืนยันการประกาศผล",
"ต้องการยืนยันการประกาศผลใช่หรือไม่?"
);
}
/**
* นหาขอม
*/
function onSearchData() {
page.value = 1;
porps.fetchData();
}
/**
* ทำงานเมอมการเปลยนแถวตอหน
*/
watch(pagination, () => {
page.value = 1;
pageSize.value = pagination.value.rowsPerPage;
});
</script>
<template>
<q-card-section>
<div class="items-center col-12 row q-gutter-x-sm q-mb-sm">
<q-space />
<q-input
borderless
dense
outlined
v-model="keyword"
placeholder="ค้นหา"
@keydown.enter="onSearchData"
>
<template v-slot:append>
<q-icon v-if="keyword === ''" name="search" />
<q-icon
v-else
name="clear"
class="cursor-pointer"
@click="(keyword = ''), onSearchData()"
/>
</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
/>
</div>
<d-table
:columns="columns"
:rows="rows"
row-key="id"
:selection="tab === 'COMPLETE' ? 'multiple' : null"
v-model:selected="selected"
:rows-per-page-options="[10, 25, 50, 100]"
v-model:pagination="pagination"
:paging="true"
>
<template v-slot:header-selection="scope" v-if="tab === 'COMPLETE'">
<q-checkbox keep-color color="primary" dense v-model="scope.selected" />
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-if="tab === 'COMPLETE'">
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{ (page - 1) * pageSize + props.rowIndex + 1 }}
</div>
<div v-else>
{{ col.value ?? "-" }}
</div>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
งหมด {{ total }} รายการ
<q-pagination
v-model="page"
active-color="primary"
color="dark"
:max="Number(maxPage)"
size="sm"
boundary-links
direction-links
:max-pages="5"
@update:model-value="porps.fetchData()"
></q-pagination>
</template>
</d-table>
</q-card-section>
<q-separator v-if="tab === 'COMPLETE'" />
<q-card-actions
align="right"
class="bg-white text-teal"
v-if="tab === 'COMPLETE'"
>
<q-btn
label="ประกาศผล"
color="public"
@click="onAnnounce"
:disable="selected.length === 0"
/>
</q-card-actions>
</template>
<style scoped></style>

View file

@ -39,5 +39,19 @@ interface ResEvaluator {
topic: string;
type: string;
}
interface ResResults {
commanderHighId: string | null;
commanderId: string | null;
createdAt: string;
evaluationResults: string;
evaluationStatus: string;
evaluatorId: string;
firstname: string;
id: string;
kpiPeriodId: string;
lastname: string;
prefix: string;
profileId: string;
}
export type { ResRound, ResDataCapacity, ResEvaluator };
export type { ResRound, ResDataCapacity, ResEvaluator, ResResults };

View file

@ -14,6 +14,7 @@ const listPage = () => import("@/modules/14_KPI/views/list.vue");
const detailPage = () => import("@/modules/14_KPI/views/detail.vue");
const reportPage = () => import("@/modules/14_KPI/views/report.vue");
const detailView = () => import("@/modules/14_KPI/views/detailView.vue");
const ResultsView = () => import("@/modules/14_KPI/views/resultsMain.vue");
export default [
{
@ -68,4 +69,15 @@ export default [
Role: "evaluateKPI",
},
},
{
path: "/KPI/results",
name: "KPIResults",
component: ResultsView,
meta: {
Auth: true,
Key: [1.1],
Role: "evaluateKPI",
},
},
];

View file

@ -0,0 +1,142 @@
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
/**
* import type
*/
import type { ItemsTab } from "@/modules/14_KPI/interface/index/Main";
import type { ResResults } from "@/modules/14_KPI/interface/response/Main";
/**
* import components
*/
import TableResults from "@/modules/14_KPI/components/results/tableResults.vue";
/**
* importStore
*/
import { useCounterMixin } from "@/stores/mixin";
/**
* use
*/
const $q = useQuasar();
const { messageError, showLoader, hideLoader } = useCounterMixin();
/**
* วแปร
*/
const tab = ref<string>("COMPLETE");
const tabItems = ref<ItemsTab[]>([
{ name: "COMPLETE", label: " รอประกาศผล" },
{ name: "KP7", label: "ประกาศผลแล้ว" },
]);
const dataList = ref<ResResults[]>([]); //
const page = ref<number>(1);
const pageSize = ref<number>(10);
const maxPage = ref<number>(1);
const total = ref<number>(1);
const keyword = ref<string>("");
/**
* function fetch รายการประกาศผล
*/
function fetcDataList() {
showLoader();
http
.post(config.API.evaluationUser, {
status: tab.value,
page: page.value,
pageSize: pageSize.value,
keyword: keyword.value,
})
.then((res) => {
const data = res.data.result;
dataList.value = data.data;
total.value = data.total;
maxPage.value = Math.ceil(total.value / pageSize.value);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
/**
* ทำงานเมอมการเปลยน Tab
*/
watch(tab, () => {
page.value = 1;
keyword.value = "";
fetcDataList();
});
/**
* ทำงานเมอมการเปลยนแถวตอหน
*/
watch(pageSize, () => {
fetcDataList();
});
/**
* HooK
*/
onMounted(() => {
fetcDataList();
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">ประกาศผล</div>
<q-card flast bordered>
<q-tabs
v-model="tab"
dense
align="left"
inline-label
class="bg-white text-grey"
active-color="primary"
indicator-color="primary"
>
<div v-for="item in tabItems">
<q-tab :name="item.name" :label="item.label" />
</div>
</q-tabs>
<q-separator />
<q-tab-panels v-model="tab" animated class="shadow-2 rounded-borders">
<q-tab-panel name="COMPLETE" style="padding: 0px">
<TableResults
:tab="tab"
:row="dataList"
v-model:page="page"
v-model:pageSize="pageSize"
v-model:maxPage="maxPage"
v-model:total="total"
v-model:keyword="keyword"
:fetchData="fetcDataList"
/>
</q-tab-panel>
<q-tab-panel name="KP7" style="padding: 0px">
<TableResults
:tab="tab"
:row="dataList"
v-model:page="page"
v-model:pageSize="pageSize"
v-model:maxPage="maxPage"
v-model:total="total"
v-model:keyword="keyword"
:fetchData="fetcDataList"
/>
</q-tab-panel>
</q-tab-panels>
</q-card>
</template>
<style scoped></style>