hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

ปรับ ตัวชี้วัด ตามแผน รอ API

Browse source
This commit is contained in:
STW_TTTY\stwtt 2024-05-07 15:18:52 +07:00
parent 789627a6a9
commit ad66cacc1e
6 changed files with 385 additions and 212 deletions
Download patch file Download diff file Expand all files Collapse all files

65
src/modules/14_KPI/components/DialogHistory.vue Normal file
View file

@ -0,0 +1,65 @@
<script setup lang="ts">
import { ref } from "vue";
import DialogHeader from "@/components/DialogHeader.vue";
import type { QTableProps } from "quasar";
const modal = defineModel<boolean>("modal", { required: true });
const rows = ref<any[]>([]);
const visibleColumns = ref<string[]>(["fullName"]);
const columns = ref<QTableProps["columns"]>([
{
name: "fullName",
align: "left",
label: "ชื่อ",
sortable: true,
field: "fullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
function close() {
modal.value = false;
}
</script>
<template>
<q-dialog persistent v-model="modal">
<q-card style="min-width: 50vw">
<DialogHeader tittle="ประวัติการแก้ไข" :close="close" />
<q-separator />
<q-card-section>
<d-table
for="table"
ref="table"
:columns="columns"
:rows="rows"
row-key="id"
flat
bordered
dense
class="custom-header-table"
: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-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.name" :props="props">
<div class="table_ellipsis">
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</q-card-section>
</q-card>
</q-dialog>
</template>

152
src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue
View file

@ -28,14 +28,15 @@ const {
} = mixin;
const id = ref<string>(route.params.id ? route.params.id.toLocaleString() : "");
const editCheck = ref<boolean>(route.params.id ? true : false);
/**form ตัวชี้วัดตามแผนฯ*/
const planData = reactive({
kpiPeriodId: "", //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
period: "", //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
including: "", //รหัสตัวชี้วัด
includingName: "", //ชื่อตัวชี้วัด
target: "", //ค่าเป้าหมาย
unit: null, //หน่วยนับ
unit: "", //หน่วยนับ
weight: null, //น้ำหนัก
achievement1: "", //ผลสำเร็จของงาน 1
achievement2: "", //ผลสำเร็จของงาน 2
@ -49,10 +50,14 @@ const planData = reactive({
orgRevisionId: "", //RevisionId หน่วยงาน
strategy: null, //ระดับยุทธศาสตร์
strategyId: "", //id ยุทธศาสตร์
documentInfoEvidence: "", //ข้อมูลเอกสารหลักฐาน
});
const year = ref<number>(0); // ปีงยประมาณ
const roundOp = ref<DataOption[]>([]);
const year = ref<number | null>(0); // ปีงยประมาณ
const roundOp = ref<DataOption[]>([
{ id: "APR", name: "รอบเมษายน" },
{ id: "OCT", name: "รอบตุลาคม" },
]);
const nodeplan = ref<any>([]);
const nodeAgency = ref<any>([]);
@ -64,36 +69,6 @@ const expandedAgency = ref<string[]>([]);
const editStatus = ref<boolean>(false);
const inputRef = ref<any>(null);
/** functiopn fetch รอบการประเมิน*/
function fetchRoundOption(isId: number | null = null) {
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;
if (isId) {
planData.kpiPeriodId = "";
inputRef.value.resetValidation();
}
})
.catch((err) => {
messageError($q, err);
});
}
/** function fetch หาโครงสร้างที่ใช้งาน*/
function fetchOrganizationActive() {
http
@ -147,7 +122,7 @@ function fetchDataById(id: string) {
.then((res) => {
const data = res.data.result;
year.value = data.year;
planData.kpiPeriodId = data.kpiPeriodId;
planData.period = data.round;
planData.including = data.including;
planData.includingName = data.includingName;
planData.target = data.target;
@ -189,8 +164,6 @@ function fetchDataById(id: string) {
expandedPlan.value = arrayexpandedPlan
.filter((e) => e !== null)
.slice(0, -1);
fetchRoundOption();
})
.catch((err) => {
messageError($q, err);
@ -235,6 +208,27 @@ function onSubmit() {
dialogConfirm(
$q,
async () => {
const body = {
year: year.value == 0 ? null : year.value,
period: planData.period,
includingName: planData.includingName,
target: planData.target,
unit: planData.unit,
weight: planData.weight,
achievement1: planData.achievement1,
achievement2: planData.achievement2,
achievement3: planData.achievement3,
achievement4: planData.achievement4,
achievement5: planData.achievement5,
meaning: planData.meaning,
formula: planData.formula,
node: planData.node,
nodeId: planData.nodeId,
orgRevisionId: planData.orgRevisionId,
strategy: planData.strategy,
strategyId: planData.strategyId,
documentInfoEvidence: planData.documentInfoEvidence,
};
showLoader();
// editStatus.value ? editData(id.value) : addData();
try {
@ -242,7 +236,7 @@ function onSubmit() {
? config.API.kpiPlanById(id.value)
: config.API.kpiPlan;
const method = editStatus.value ? "put" : "post";
const res = await http[method](url, planData);
const res = await http[method](url, body);
success($q, "บันทึกข้อมูลสำเร็จ");
editStatus.value
? fetchDataById(id.value)
@ -272,6 +266,29 @@ onMounted(() => {
<q-form @submit.prevent greedy @validation-success="onSubmit()">
<div>
<div class="row q-col-gutter-md q-pa-md">
<div class="col-2" v-if="editCheck">
<q-input
outlined
v-model="planData.including"
label="ลำดับ/รหัสตัวชี้วัด"
bg-color="white"
readonly
dense
class="inputgreen"
/>
</div>
<div :class="`${editCheck ? 'col-6' : 'col-8'}`">
<q-input
outlined
v-model="planData.includingName"
label="ชื่อตัวชี้วัด"
bg-color="white"
dense
class="inputgreen"
:rules="[(val) => !!val || `${'กรุณากรอกชิ่อตัวชี้วัด'}`]"
hide-bottom-space
/>
</div>
<div class="col-2">
<datepicker
menu-class-name="modalfix"
@ -280,7 +297,7 @@ onMounted(() => {
autoApply
year-picker
:enableTimePicker="false"
@update:modelValue="fetchRoundOption"
@update:modelValue="planData.period = ''"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
@ -303,6 +320,17 @@ onMounted(() => {
>
</q-icon>
</template>
<template v-slot:append>
<q-icon
v-if="year"
name="cancel"
class="cursor-pointer"
@click.stop.prevent="
year = 0;
planData.period = '';
"
/>
</template>
</q-input>
</template>
</datepicker>
@ -310,47 +338,17 @@ onMounted(() => {
<div class="col-2">
<q-select
ref="inputRef"
:readonly="roundOp.length === 0"
:readonly="year == 0"
dense
outlined
v-model="planData.kpiPeriodId"
v-model="planData.period"
:options="roundOp"
label="รอบการประเมิน"
hide-bottom-space
option-label="name"
option-value="id"
map-options
emit-value
lazy-rules
class="inputgreen"
:rules="[
(val:string) =>
!!val || `${'กรุณาเลือกรอบการประเมิน'}`,
]"
/>
</div>
<div class="col-2">
<q-input
outlined
v-model="planData.including"
label="รหัสตัวชี้วัด"
bg-color="white"
dense
class="inputgreen"
:rules="[(val) => !!val || `${'กรุณากรอกรหัสตัวชี้วัด'}`]"
hide-bottom-space
/>
</div>
<div class="col-6">
<q-input
outlined
v-model="planData.includingName"
label="ชื่อตัวชี้วัด"
bg-color="white"
dense
class="inputgreen"
:rules="[(val) => !!val || `${'กรุณากรอกชิ่อตัวชี้วัด'}`]"
hide-bottom-space
/>
</div>
<div class="col-4">
@ -371,8 +369,8 @@ onMounted(() => {
v-model="planData.unit"
label="หน่วยนับ"
bg-color="white"
type="number"
dense
lazy-rules
class="inputgreen"
:rules="[(val) => !!val || `${'กรุณากรอกหน่วยนับ'}`]"
hide-bottom-space
@ -644,6 +642,16 @@ onMounted(() => {
</q-card-section>
</q-card>
</div>
<div class="col-12">
<q-input
class="inputgreen"
v-model="planData.documentInfoEvidence"
label="ข้อมูลเอกสารหลักฐาน"
outlined
dense
type="textarea"
></q-input>
</div>
</div>
<q-separator color="grey-4" />
</div>

66
src/modules/14_KPI/components/indicatorByRole/DetailView.vue
View file

@ -45,6 +45,7 @@ const form = reactive<FormDataRole>({
weight: "", //น้ำหนัก
meaning: "", //นิยามหรือความหมาย
formula: "", //สูตรคำนวณ
documentInfoEvidence: "", //ข้อมูลเอกสารหลักฐาน
node: null,
nodeId: null,
@ -71,7 +72,10 @@ const positionOp = ref<DataOption[]>([]);
const positionMainOp = ref<DataOption[]>([]);
/** Option รอบการประเมิน*/
const roundOp = ref<DataOption[]>([]);
const roundOp = ref<DataOption[]>([
{ id: "APR", name: "รอบเมษายน" },
{ id: "OCT", name: "รอบตุลาคม" },
]);
/**
* function ต้นหาข้อมูลของ Option
@ -121,9 +125,9 @@ function onSubmit() {
: config.API.kpiRoleMainList;
const body = {
year: form.year == 0 ? null:form.year,
position: form.position, //ตำแหน่ง
kpiPeriodId: form.round, //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
including: form.including, //รหัสตัวชี้วัด
period: form.round, //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
includingName: form.includingName, //ชื่อตัวชี้วัด
target: form.target, //ค่าเป้าหมาย
unit: form.unit, //หน่วยนับ
@ -135,6 +139,7 @@ function onSubmit() {
achievement5: formScore.score5, //ผลสำเร็จของงาน 5
meaning: form.meaning, //นิยามหรือความหมาย
formula: form.formula, //สูตรคำนวณ
documentInfoEvidence: form.documentInfoEvidence, //ข้อมูลเอกสารหลักฐาน
node: form.node, //ระดับหน่วยงาน
nodeId: form.nodeId, //id หน่วยงาน
@ -171,7 +176,7 @@ function getDetail() {
const data = res.data.result;
form.position = data.position;
form.year = data.year == null ? 0 : data.year;
form.round = data.kpiPeriodId;
form.round = data.round;
form.including = data.including;
form.includingName = data.includingName;
form.target = data.target;
@ -244,21 +249,6 @@ function updateSelected(data: any) {
form.orgRevisionId = data.orgRevisionId;
}
function getRound() {
showLoader();
http
.get(config.API.kpiPeriod + `?year=${form.year}`)
.then((res) => {
const data = res.data.result.data;
roundOp.value = data.map((item: any) => ({
id: item.id,
name: statusTothai(item.durationKPI),
}));
})
.finally(() => {
hideLoader();
});
}
function statusTothai(val: string) {
switch (val) {
@ -284,7 +274,6 @@ function setModel(val: string) {
onMounted(() => {
fetchActive();
getOptions();
getRound();
if (id.value !== "") {
getDetail();
}
@ -345,7 +334,7 @@ onMounted(() => {
autoApply
year-picker
:enableTimePicker="false"
@update:model-value="(form.round = ''), getRound()"
@update:model-value="form.round = ''"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
@ -355,8 +344,6 @@ onMounted(() => {
<q-input
dense
class="inputgreen"
:rules="[(val:string) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`,]"
hide-bottom-space
outlined
:model-value="
form.year === 0 ? null : Number(form.year) + 543
@ -371,12 +358,24 @@ onMounted(() => {
>
</q-icon>
</template>
<template v-slot:append>
<q-icon
v-if="form.year"
name="cancel"
class="cursor-pointer"
@click.stop.prevent="
form.year = 0;
form.round = '';
"
/>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-2">
<q-select
:readonly="form.year == 0"
dense
outlined
v-model="form.round"
@ -388,21 +387,16 @@ onMounted(() => {
input-class="text-red"
label="รอบการประเมิน"
class="inputgreen"
lazy-rules
:rules="[(val:string) => !!val || `${'กรุณาเลือกรอบการประเมิน'}`,]"
hide-bottom-space
/>
</div>
<div class="col-2">
<div class="col-2" v-if="id">
<q-input
label="รหัสตัวชี้วัด"
label="ลำดับ/รหัสตัวชี้วัด"
v-model="form.including"
outlined
readonly
dense
class="inputgreen"
lazy-rules
:rules="[(val:string) => !!val || `${'กรุณากรอกรหัสตัวชี้วัด'}`,]"
hide-bottom-space
/>
</div>
<div class="col-4">
@ -632,6 +626,16 @@ onMounted(() => {
type="textarea"
/>
</div>
<div class="col-12">
<q-input
class="inputgreen"
v-model="form.documentInfoEvidence"
label="ข้อมูลเอกสารหลักฐาน"
outlined
dense
type="textarea"
></q-input>
</div>
</div>
</q-card-section>
<q-separator />

13
src/modules/14_KPI/interface/request/Main.ts
View file

@ -36,6 +36,7 @@ interface FormDataRole {
weight: string;
meaning: string;
formula: string;
documentInfoEvidence: string;
node: number | null;
nodeId: string | null;
orgRevisionId: string | null;
@ -48,6 +49,15 @@ interface NewPagination {
sortBy: string;
}
interface FormListMainByRole {
page:number
pageSize:number
position:string
round:string
keyword:string
year:number|null
}
interface ListGroup{
id:string
nameGroupKPI:string
@ -66,5 +76,6 @@ export type {
FormDataRole,
NewPagination,
FormQueryCapacity,
ListGroup
ListGroup,
FormListMainByRole
};

166
src/modules/14_KPI/views/indicatorByPlan.vue
View file

@ -4,6 +4,7 @@ import { useQuasar, type QTableProps } from "quasar";
import { useRouter } from "vue-router";
import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
import DialogHistory from '@/modules/14_KPI/components/DialogHistory.vue'
/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
@ -11,6 +12,8 @@ import http from "@/plugins/http";
import config from "@/app.config";
/** use*/
const modalHistory = ref<boolean>(false)
const isAll = ref<boolean>(false);
const $q = useQuasar();
const router = useRouter();
const { showLoader, hideLoader, dialogRemove, success, messageError } =
@ -22,7 +25,7 @@ const columns = ref<QTableProps["columns"]>([
{
name: "including",
align: "left",
label: "รหัสตัวชี้วัด",
label: "ลำดับ/รหัสตัวชี้วัด",
sortable: true,
field: "including",
headerStyle: "font-size: 14px",
@ -43,11 +46,14 @@ const expanded = ref<any>([]);
const filterMain = ref<string>("");
const visibleColumns = ref<string[]>(["including", "includingName"]);
const roundOp = ref<DataOption[]>([]);
const roundOp = ref<DataOption[]>([
{ id: "APR", name: "รอบเมษายน" },
{ id: "OCT", name: "รอบตุลาคม" },
]);
const totalList = ref<number>(1);
const year = ref<number>(new Date().getFullYear());
const year = ref<number|null>(new Date().getFullYear());
const nodeData = reactive<any>({
page: 1,
pageSize: 10,
@ -57,41 +63,12 @@ const nodeData = reactive<any>({
keyword: "",
});
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;
nodeData.round = "";
fetchListProjectNew();
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
function fetchList() {
showLoader();
http
.get(
config.API.kpiPlan +
`?page=${nodeData.page}&pageSize=${nodeData.pageSize}&kpiPeriodId=${nodeData.round}&nodeId=${nodeData.nodeId}&node=${nodeData.node}&keyword=${nodeData.keyword}`
`?page=${nodeData.page}&pageSize=${nodeData.pageSize}&period=${nodeData.round}&nodeId=${nodeData.nodeId}&node=${nodeData.node}&keyword=${nodeData.keyword}&year=${year.value}&isAll=${isAll.value}`
)
.then((res) => {
const data = res.data.result.data;
@ -178,12 +155,20 @@ async function deleteData(idData: string) {
function clearFilter() {
nodeData.keyword = "";
fetchActive();
fetchRoundOption();
fetchListProjectNew();
}
onMounted(() => {
fetchActive();
fetchRoundOption();
// fetchData();
/**
* เปิด dialog history
* @param id
*/
function onClickHistory(id:string){
modalHistory.value = true
}
onMounted(async () => {
await fetchActive();
await fetchList();
});
</script>
@ -270,7 +255,7 @@ onMounted(() => {
year-picker
:enableTimePicker="false"
style="width: 150px"
@update:model-value="fetchRoundOption"
@update:model-value="fetchListProjectNew"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
@ -281,7 +266,7 @@ onMounted(() => {
class="inputgreen"
dense
outlined
:model-value="year === 0 ? 'ทั้งหมด' : Number(year) + 543"
:model-value="year === null ? 'ทั้งหมด' : Number(year) + 543"
:label="`${'ปีงบประมาณ'}`"
>
<template v-slot:prepend>
@ -292,6 +277,15 @@ onMounted(() => {
>
</q-icon>
</template>
<template v-if="year" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
(year = null), (nodeData.page = 1), fetchListProjectNew()
"
class="cursor-pointer"
/>
</template>
</q-input>
</template>
</datepicker>
@ -323,7 +317,20 @@ onMounted(() => {
</q-toolbar-title>
</div>
<q-space />
<div class="row q-gutter-sm">
<q-checkbox
keep-color
v-model="isAll"
label="แสดงตำแหน่งทั้งหมด"
color="primary"
@update:model-value="fetchListProjectNew"
>
<q-tooltip
>แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
>
</q-checkbox>
<q-input
class="inputgreen"
standout
@ -367,11 +374,12 @@ onMounted(() => {
ref="table"
:columns="columns"
:rows="rows"
row-key="subject"
row-key="id"
flat
bordered
dense
class="custom-header-table"
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
>
<template v-slot:header="props">
@ -389,29 +397,66 @@ onMounted(() => {
{{ col.value ? col.value : "-" }}
</div>
</q-td>
<q-td>
<q-td auto-width>
<q-btn
color="primary"
flat
dense
round
class="q-mr-xs"
color="grey"
@click.stop
size="14px"
icon="mdi-pencil-outline"
clickable
@click="onClickAddOrView(true, props.row.id)"
icon="more_vert"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
<q-btn
flat
round
icon="delete"
color="red"
@click.stop.pervent="deleteData(props.row.id)"
>
<q-tooltip>ลบข้อมูล </q-tooltip>
<q-menu>
<q-list style="min-width: 180px">
<q-item
clickable
v-close-popup
@click="onClickAddOrView(true, props.row.id)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
<q-icon color="primary" size="xs" name="mdi-pencil-outline" />
</q-item-section>
<q-item-section>แก้ไขข้อมูล</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click="onClickHistory(props.row.id)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-tooltip>ประวัติการแก้ไข</q-tooltip>
<q-icon color="info" size="xs" name="mdi-history" />
</q-item-section>
<q-item-section>ประวัติการแก้ไข</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click.stop.pervent="deleteData(props.row.id)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
<q-icon color="red" size="xs" name="mdi-delete" />
</q-item-section>
<q-item-section>ลบข้อมูล</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-td>
</q-tr>
</template>
@ -420,6 +465,11 @@ onMounted(() => {
</div>
</div>
</q-card>
<DialogHistory
v-model:modal="modalHistory"
/>
</template>
<style lang="scss" scoped>

135
src/modules/14_KPI/views/indicatorByRole.vue
View file

@ -7,10 +7,14 @@ import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import type { NewPagination } from "@/modules/14_KPI/interface/request/Main";
import type {
NewPagination,
FormListMainByRole,
} from "@/modules/14_KPI/interface/request/Main";
import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
import DialogHistory from "@/modules/14_KPI/components/DialogHistory.vue";
/** use*/
const modalHistory = ref<boolean>(false);
const total = ref<number>();
const $q = useQuasar();
const router = useRouter();
@ -56,7 +60,7 @@ const columns = ref<QTableProps["columns"]>([
]);
const visibleColumns = ref<string[]>(["including", "includingName"]);
const formFilter = reactive({
const formFilter = reactive<FormListMainByRole>({
page: 1,
pageSize: 10,
position: "",
@ -70,13 +74,16 @@ const pagination = ref({
});
/** Option รอบการประเมิน*/
const roundOp = ref<DataOption[]>([]);
const roundOp = ref<DataOption[]>([
{ id: "APR", name: "รอบเมษายน" },
{ id: "OCT", name: "รอบตุลาคม" },
]);
function fetchList() {
http
.get(
config.API.kpiRoleMainList +
`?page=${formFilter.page}&pageSize=${formFilter.pageSize}&kpiPeriodId=${formFilter.round}&position=${formFilter.position}&keyword=${formFilter.keyword}`
`?page=${formFilter.page}&pageSize=${formFilter.pageSize}&period=${formFilter.round}&position=${formFilter.position}&keyword=${formFilter.keyword}&year=${formFilter.year}`
)
.then((res) => {
const data = res.data.result.data;
@ -172,28 +179,6 @@ function getOptions() {
});
}
function getRound() {
showLoader();
http
.get(
config.API.kpiPeriod +
`?page=${formFilter.page}&pageSize=${formFilter.pageSize}&keyword=${formFilter.keyword}&year=${formFilter.year}`
)
.then((res) => {
const data = res.data.result.data;
roundOp.value = data.map((item: any) => ({
id: item.id,
name: statusTothai(item.durationKPI),
}));
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
function statusTothai(val: string) {
switch (val) {
case "SPECIAL":
@ -211,9 +196,16 @@ function setModel(val: string) {
formFilter.position = val;
}
/**
* เปิด dialog history
* @param id
*/
function onClickHistory(id: string) {
modalHistory.value = true;
}
onMounted(async () => {
await getOptions();
await getRound();
await fetchList();
});
</script>
@ -281,10 +273,7 @@ onMounted(async () => {
year-picker
:enableTimePicker="false"
@update:model-value="
(formFilter.page = 1),
(formFilter.round = ''),
getRound(),
fetchList()
(formFilter.page = 1), (formFilter.round = ''), fetchList()
"
>
<template #year="{ year }">{{ year + 543 }}</template>
@ -297,7 +286,7 @@ onMounted(async () => {
outlined
class="inputgreen"
:model-value="
formFilter.year === 0
formFilter.year === null
? 'ทั้งหมด'
: Number(formFilter.year) + 543
"
@ -311,15 +300,15 @@ onMounted(async () => {
>
</q-icon>
</template>
<!-- <template v-if="formFilter.year" v-slot:append>
<template v-if="formFilter.year" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
(formFilter.year = 0), (formFilter.page = 1), getRound(),fetchList()
(formFilter.year = null), (formFilter.page = 1), fetchList()
"
class="cursor-pointer"
/>
</template> -->
</template>
</q-input>
</template>
</datepicker>
@ -443,24 +432,68 @@ onMounted(async () => {
{{ col.value ? col.value : "-" }}
</div>
</q-td>
<q-td>
<q-td auto-width>
<q-btn
flat
round
icon="edit"
color="edit"
@click.stop.pervent="onClickAddOrView(true, props.row.id)"
color="grey"
@click.stop
size="14px"
icon="more_vert"
>
<q-tooltip>แก้ไข </q-tooltip>
</q-btn>
<q-btn
flat
round
icon="delete"
color="red"
@click.stop.pervent="onClickDelete(props.row.id)"
>
<q-tooltip>ลบข้อมูล </q-tooltip>
<q-menu>
<q-list style="min-width: 180px">
<q-item
clickable
v-close-popup
@click.stop.pervent="onClickAddOrView(true, props.row.id)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
<q-icon
color="primary"
size="xs"
name="mdi-pencil-outline"
/>
</q-item-section>
<q-item-section>แก้ไขข้อมูล</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click="onClickHistory(props.row.id)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-tooltip>ประวัติการแก้ไข</q-tooltip>
<q-icon color="info" size="xs" name="mdi-history" />
</q-item-section>
<q-item-section>ประวัติการแก้ไข</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click.stop.pervent="onClickDelete(props.row.id)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
<q-icon color="red" size="xs" name="mdi-delete" />
</q-item-section>
<q-item-section>ลบข้อมูล</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-td>
</q-tr>
@ -468,6 +501,8 @@ onMounted(async () => {
</d-table>
</div>
</q-card>
<DialogHistory v-model:modal="modalHistory" />
</template>
<style scoped></style>