KPI
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
f7f1022b3b
commit
7041a9e050
4 changed files with 361 additions and 0 deletions
|
|
@ -20,6 +20,7 @@ const urlFile = `${env.API_URI}/salary`;
|
||||||
|
|
||||||
const kpiGroup = `${env.API_URI}/kpi/group`;
|
const kpiGroup = `${env.API_URI}/kpi/group`;
|
||||||
const kpiLink = `${env.API_URI}/kpi/link`;
|
const kpiLink = `${env.API_URI}/kpi/link`;
|
||||||
|
const placementKeycloak = `${env.API_URI}/placement/officer/profileId`;
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
KPI,
|
KPI,
|
||||||
|
|
@ -69,6 +70,7 @@ export default {
|
||||||
kpiLink,
|
kpiLink,
|
||||||
|
|
||||||
profilePosition: () => `${env.API_URI}/org/profile/profileid/position`,
|
profilePosition: () => `${env.API_URI}/org/profile/profileid/position`,
|
||||||
|
placementKeycloak,
|
||||||
|
|
||||||
/** Report*/
|
/** Report*/
|
||||||
kpiReport: () => `${KPI}/report/announcement`,
|
kpiReport: () => `${KPI}/report/announcement`,
|
||||||
|
|
|
||||||
276
src/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue
Normal file
276
src/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue
Normal file
|
|
@ -0,0 +1,276 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
import { ref,watch } from "vue";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import { useRouter, useRoute } from "vue-router";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const {
|
||||||
|
dialogConfirm,
|
||||||
|
success,
|
||||||
|
showLoader,
|
||||||
|
hideLoader,
|
||||||
|
messageError,
|
||||||
|
findPosMasterNoOld,
|
||||||
|
findOrgNameOld,
|
||||||
|
date2Thai,
|
||||||
|
} = mixin;
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
const id = ref<string>(route.params.id as string)
|
||||||
|
const modal = defineModel<boolean>("modal", { required: true });
|
||||||
|
const filterKeyword = ref<string>("");
|
||||||
|
const rows = ref<any[]>([]);
|
||||||
|
|
||||||
|
//หัวตาราง
|
||||||
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "no",
|
||||||
|
align: "left",
|
||||||
|
label: "ลำดับ",
|
||||||
|
sortable: false,
|
||||||
|
field: "no",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "name",
|
||||||
|
align: "left",
|
||||||
|
label: "ชื่อ-นามสกุล",
|
||||||
|
sortable: true,
|
||||||
|
field: "name",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
format(val, row) {
|
||||||
|
return `${row.prefix}${row.firstName} ${row.lastName}`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "posMasterNoOld",
|
||||||
|
align: "left",
|
||||||
|
label: "เลขที่ตำแหน่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "posMasterNoOld",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
format(val, row) {
|
||||||
|
return findPosMasterNoOld(row);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionOld",
|
||||||
|
align: "left",
|
||||||
|
label: "ตำแหน่งในสายงาน",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionOld",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "positionLevel",
|
||||||
|
align: "left",
|
||||||
|
label: "ประเภทตำแหน่ง",
|
||||||
|
sortable: true,
|
||||||
|
field: "positionLevel",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
format(val, row) {
|
||||||
|
let name = "";
|
||||||
|
if (row.posTypeNameOld && row.posLevelNameOld) {
|
||||||
|
name = `${row.posTypeNameOld} (${row.posLevelNameOld})`;
|
||||||
|
} else if (row.posTypeNameOld) {
|
||||||
|
name = `${row.posTypeNameOld}`;
|
||||||
|
} else if (row.posLevelNameOld) {
|
||||||
|
name = `(${row.posLevelNameOld})`;
|
||||||
|
} else name = "-";
|
||||||
|
return name;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "organizationPositionOld",
|
||||||
|
align: "left",
|
||||||
|
label: "สังกัด",
|
||||||
|
sortable: true,
|
||||||
|
field: "organization",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
format: (val, row) => findOrgNameOld(row),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "organization",
|
||||||
|
align: "left",
|
||||||
|
label: "หน่วยงานที่ให้ช่วยราชการ",
|
||||||
|
sortable: true,
|
||||||
|
field: "organization",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "dateStart",
|
||||||
|
align: "left",
|
||||||
|
label: "วันเริ่มช่วยราชการ",
|
||||||
|
sortable: true,
|
||||||
|
field: "dateStart",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
format: (val) => date2Thai(val),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "dateEnd",
|
||||||
|
align: "left",
|
||||||
|
label: "วันสิ้นสุดการช่วยราชการ",
|
||||||
|
sortable: true,
|
||||||
|
field: "dateEnd",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
format: (val) => date2Thai(val),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "createdAt",
|
||||||
|
align: "left",
|
||||||
|
label: "วันที่ดำเนินการ",
|
||||||
|
sortable: true,
|
||||||
|
field: "createdAt",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
format: (val) => date2Thai(val),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "status",
|
||||||
|
align: "left",
|
||||||
|
label: "สถานะ",
|
||||||
|
sortable: true,
|
||||||
|
field: "status",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
format: (val) => statusText(val),
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const visibleColumns = ref<string[]>([
|
||||||
|
"no",
|
||||||
|
"name",
|
||||||
|
"posMasterNoOld",
|
||||||
|
"positionOld",
|
||||||
|
"positionLevel",
|
||||||
|
"organizationPositionOld",
|
||||||
|
"organization",
|
||||||
|
"dateStart",
|
||||||
|
"dateEnd",
|
||||||
|
"createdAt",
|
||||||
|
"status",
|
||||||
|
]);
|
||||||
|
|
||||||
|
const statusText = (val: string) => {
|
||||||
|
switch (val) {
|
||||||
|
case "WAITTING":
|
||||||
|
return "รอดำเนินการ";
|
||||||
|
case "PENDING":
|
||||||
|
return "เลือกตำแหน่งแล้ว";
|
||||||
|
case "APPROVE":
|
||||||
|
return "อนุมัติ";
|
||||||
|
case "REJECT":
|
||||||
|
return "ไม่อนุมัติ";
|
||||||
|
case "REPORT":
|
||||||
|
return "ส่งรายชื่อไปออกคำสั่ง";
|
||||||
|
case "DONE":
|
||||||
|
return "ออกคำสั่งเสร็จแล้ว";
|
||||||
|
|
||||||
|
default:
|
||||||
|
return "-";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function close() {
|
||||||
|
modal.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getData(){
|
||||||
|
showLoader()
|
||||||
|
http
|
||||||
|
.get(config.API.placementKeycloak+`/${id.value}`)
|
||||||
|
.then((res)=>{
|
||||||
|
const data = res.data.result
|
||||||
|
rows.value = data
|
||||||
|
}).catch((e)=>{
|
||||||
|
messageError($q,e)
|
||||||
|
}).finally(()=>{
|
||||||
|
hideLoader()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
watch(()=>modal.value,(n)=>{
|
||||||
|
if(n == true){
|
||||||
|
getData()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<q-dialog persistent v-model="modal">
|
||||||
|
<q-card bordered style="min-width: 80vw">
|
||||||
|
<DialogHeader tittle="ข้อมูลการช่วยราชการ" :close="close" />
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section>
|
||||||
|
<div class="row">
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<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">
|
||||||
|
<div v-if="col.name === 'no'">
|
||||||
|
{{ props.rowIndex + 1 }}
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
{{ col.value ? col.value : "-" }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
<!-- <template v-slot:pagination="scope">
|
||||||
|
ทั้งหมด {{ total }} รายการ
|
||||||
|
<q-pagination
|
||||||
|
v-model="formQuery.page"
|
||||||
|
active-color="primary"
|
||||||
|
color="dark"
|
||||||
|
:max="Number(totalList)"
|
||||||
|
size="sm"
|
||||||
|
boundary-links
|
||||||
|
direction-links
|
||||||
|
:max-pages="5"
|
||||||
|
@update:model-value="fetchList"
|
||||||
|
></q-pagination>
|
||||||
|
</template> -->
|
||||||
|
</d-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
64
src/modules/14_KPI/components/Tab/Dialog/DialogStatus.vue
Normal file
64
src/modules/14_KPI/components/Tab/Dialog/DialogStatus.vue
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||||||
|
|
||||||
|
import { ref, watch } from "vue";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import { useRouter, useRoute } from "vue-router";
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
|
const work = ref<boolean>(false);
|
||||||
|
const $q = useQuasar();
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const { showLoader, hideLoader, messageError } = mixin;
|
||||||
|
|
||||||
|
const modal = defineModel<boolean>("modal", { required: true });
|
||||||
|
const profileId = defineModel<string>("profileId", { required: true });
|
||||||
|
|
||||||
|
function close() {
|
||||||
|
modal.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getData() {
|
||||||
|
showLoader();
|
||||||
|
http
|
||||||
|
.get(config.API.profilePosition() + `/${profileId.value}`)
|
||||||
|
.then((res) => {
|
||||||
|
const data = res.data.result.isProbation;
|
||||||
|
work.value = data;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
messageError($q, e);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoader();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
watch(
|
||||||
|
() => modal.value,
|
||||||
|
(n) => {
|
||||||
|
if (n == true) {
|
||||||
|
getData();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<q-dialog persistent v-model="modal">
|
||||||
|
<q-card bordered style="min-width: 20vw">
|
||||||
|
<DialogHeader tittle="สถานะการทดลองงาน" :close="close" />
|
||||||
|
<q-separator />
|
||||||
|
<q-card-section class="q-pa-sm">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 text-center bg-grey-1 q-pa-md rounded-borders">
|
||||||
|
<span class="text-weight-bold text-teal">{{
|
||||||
|
work ? `อยู่ระหว่างทดลองงาน` : "พ้นจากการทดลองงาน"
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
|
@ -9,6 +9,8 @@ import Avatar from "@/assets/!avatar_user.jpg";
|
||||||
import DialogHeader from "@/components/DialogHeader.vue";
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||||||
import Assessment from "@/modules/14_KPI/components/Tab/01_Assessment.vue";
|
import Assessment from "@/modules/14_KPI/components/Tab/01_Assessment.vue";
|
||||||
import File from "@/modules/14_KPI/components/Tab/05_File.vue";
|
import File from "@/modules/14_KPI/components/Tab/05_File.vue";
|
||||||
|
import DialogGovernment from "@/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue";
|
||||||
|
import DialogStatus from "@/modules/14_KPI/components/Tab/Dialog/DialogStatus.vue";
|
||||||
|
|
||||||
import type {
|
import type {
|
||||||
DataOption,
|
DataOption,
|
||||||
|
|
@ -27,6 +29,7 @@ const { showLoader, hideLoader, messageError, dialogConfirm, success } =
|
||||||
useCounterMixin();
|
useCounterMixin();
|
||||||
|
|
||||||
const kpiId = ref<string>(route.params.id as string);
|
const kpiId = ref<string>(route.params.id as string);
|
||||||
|
const profileId = ref<string>("");
|
||||||
|
|
||||||
/** Header*/
|
/** Header*/
|
||||||
const dataEvaluation = ref<ResUserEvaluation>();
|
const dataEvaluation = ref<ResUserEvaluation>();
|
||||||
|
|
@ -39,6 +42,7 @@ function fetchEvaluation() {
|
||||||
const data = res.data.result;
|
const data = res.data.result;
|
||||||
store.dataEvaluation = data;
|
store.dataEvaluation = data;
|
||||||
dataEvaluation.value = data;
|
dataEvaluation.value = data;
|
||||||
|
profileId.value = data.profileId;
|
||||||
fetchProfile(data.profileId);
|
fetchProfile(data.profileId);
|
||||||
fetchProfilePosition(data.profileId);
|
fetchProfilePosition(data.profileId);
|
||||||
})
|
})
|
||||||
|
|
@ -249,6 +253,16 @@ function filterOption(val: any, update: Function, refData: string) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const modalGovernment = ref<boolean>(false);
|
||||||
|
function openGovernment() {
|
||||||
|
modalGovernment.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
const modalStatus = ref<boolean>(false);
|
||||||
|
function openStatus() {
|
||||||
|
modalStatus.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
/** ์ Body*/
|
/** ์ Body*/
|
||||||
const splitterModel = ref<number>(15);
|
const splitterModel = ref<number>(15);
|
||||||
const itemsTab = ref<ItemsTab[]>([
|
const itemsTab = ref<ItemsTab[]>([
|
||||||
|
|
@ -406,6 +420,7 @@ onMounted(() => {
|
||||||
color="grey-2"
|
color="grey-2"
|
||||||
text-color="primary"
|
text-color="primary"
|
||||||
size="md"
|
size="md"
|
||||||
|
@click="openGovernment"
|
||||||
>
|
>
|
||||||
<q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip>
|
<q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
|
|
@ -416,6 +431,7 @@ onMounted(() => {
|
||||||
text-color="blue-5"
|
text-color="blue-5"
|
||||||
icon="mdi-file-eye-outline"
|
icon="mdi-file-eye-outline"
|
||||||
size="md"
|
size="md"
|
||||||
|
@click="openStatus"
|
||||||
>
|
>
|
||||||
<q-tooltip>ดูข้อมูลการทดลองงาน</q-tooltip>
|
<q-tooltip>ดูข้อมูลการทดลองงาน</q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
|
|
@ -685,6 +701,9 @@ onMounted(() => {
|
||||||
</q-form>
|
</q-form>
|
||||||
</q-card>
|
</q-card>
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
|
|
||||||
|
<DialogGovernment v-model:modal="modalGovernment" />
|
||||||
|
<DialogStatus v-model:modal="modalStatus" :profileId="profileId" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue