kpi
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
7084c9e839
commit
a7b3397f74
3 changed files with 171 additions and 94 deletions
|
|
@ -37,6 +37,8 @@ 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 result = defineModel<string>("result", { required: true });
|
||||
|
||||
const porps = defineProps({
|
||||
fetchData: { type: Function, required: true }, // function เรีนกข้อมูลประกาศผล
|
||||
});
|
||||
|
|
@ -167,6 +169,7 @@ const pagination = ref({
|
|||
/** ตัวแปร*/
|
||||
const year = ref<number | null>(new Date().getFullYear()); //ปีงบประมาณ
|
||||
const roundOp = ref<DataOption[]>([]); // รายการรอบการประเมิน
|
||||
const resultOp = ref<DataOption[]>(store.resultsOptions);
|
||||
|
||||
/** function บันทึกการประกาศผล*/
|
||||
function onAnnounce() {
|
||||
|
|
@ -246,6 +249,27 @@ function onSearchData() {
|
|||
porps.fetchData();
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันค้นหาข้อมูลในรายการตัวเลือก
|
||||
* @param val คำค้นหา
|
||||
* @param update ฟังก์ชัน
|
||||
* @param refData ประเภทของตัวเลือก
|
||||
*/
|
||||
function filterSelector(val: string, update: Function, refData: string) {
|
||||
switch (refData) {
|
||||
case "result":
|
||||
update(() => {
|
||||
resultOp.value = store.resultsOptions.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/** ทำงานเมื่อมีการเปลี่ยนแถวต่อหน้า*/
|
||||
watch(pagination, () => {
|
||||
page.value = 1;
|
||||
|
|
@ -261,8 +285,8 @@ onMounted(async () => {
|
|||
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="items-center col-12 row q-gutter-x-sm q-mb-sm">
|
||||
<div class="row q-gutter-sm">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="row col-12">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="year"
|
||||
|
|
@ -297,111 +321,158 @@ onMounted(async () => {
|
|||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-select
|
||||
v-model="store.formQuery.round"
|
||||
outlined
|
||||
label="รอบการประเมิน"
|
||||
<q-space />
|
||||
|
||||
<q-input
|
||||
borderless
|
||||
dense
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
:options="roundOp"
|
||||
style="min-width: 150px"
|
||||
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
|
||||
class="q-ml-sm"
|
||||
v-model="visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
@update:model-value="changRound"
|
||||
:options="columns"
|
||||
option-value="name"
|
||||
style="min-width: 140px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-space />
|
||||
<div class="col-12">
|
||||
<q-card bordered class="col-12 filter-card q-pa-sm">
|
||||
<div class="items-center col-12 row q-gutter-x-sm">
|
||||
<div class="row q-gutter-sm">
|
||||
<q-select
|
||||
v-model="store.formQuery.round"
|
||||
outlined
|
||||
label="รอบการประเมิน"
|
||||
dense
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
:options="roundOp"
|
||||
style="min-width: 150px"
|
||||
emit-value
|
||||
map-options
|
||||
@update:model-value="changRound"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
style="min-width: 140px"
|
||||
/>
|
||||
</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"
|
||||
:visible-columns="visibleColumns"
|
||||
>
|
||||
<template v-slot:header-selection="scope" v-if="tab === 'COMPLETE'">
|
||||
<q-checkbox
|
||||
v-if="tab === 'COMPLETE' && checkPermission($route)?.attrIsUpdate"
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="scope.selected"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props">
|
||||
<q-td v-if="tab === 'COMPLETE'">
|
||||
<q-select
|
||||
v-model="result"
|
||||
label="ผลการประเมิน"
|
||||
class="select_ellipsis3"
|
||||
dense
|
||||
emit-value
|
||||
map-options
|
||||
:options="resultOp"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
outlined
|
||||
@clear="(result = ''), (resultOp = store.resultsOptions)"
|
||||
use-input
|
||||
:clearable="result !== ''"
|
||||
@update:model-value="onSearchData()"
|
||||
input-debounce="0"
|
||||
style="width: 250px"
|
||||
@filter="(inputValue: string,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'result'
|
||||
)"
|
||||
><template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-space />
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<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"
|
||||
:visible-columns="visibleColumns"
|
||||
>
|
||||
<template v-slot:header-selection="scope" v-if="tab === 'COMPLETE'">
|
||||
<q-checkbox
|
||||
v-if="tab === 'COMPLETE' && checkPermission($route)?.attrIsUpdate"
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="props.selected"
|
||||
v-model="scope.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 class="table_ellipsis2">
|
||||
{{ 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>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props">
|
||||
<q-td v-if="tab === 'COMPLETE'">
|
||||
<q-checkbox
|
||||
v-if="
|
||||
tab === 'COMPLETE' && checkPermission($route)?.attrIsUpdate
|
||||
"
|
||||
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 class="table_ellipsis2">
|
||||
{{ 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>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator
|
||||
v-if="tab === 'COMPLETE' && checkPermission($route)?.attrIsUpdate"
|
||||
|
|
|
|||
|
|
@ -433,6 +433,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
ref="table"
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ const pageSize = ref<number>(10);
|
|||
const maxPage = ref<number>(1);
|
||||
const total = ref<number>(1);
|
||||
const keyword = ref<string>("");
|
||||
const result = ref<string>("");
|
||||
|
||||
/** function fetch รายการประกาศผล*/
|
||||
async function fetcDataList() {
|
||||
|
|
@ -43,6 +44,7 @@ async function fetcDataList() {
|
|||
pageSize: pageSize.value,
|
||||
keyword: keyword.value,
|
||||
kpiPeriodId: store.formQuery.round ? store.formQuery.round : "",
|
||||
results: result.value === "" ? undefined : result.value,
|
||||
})
|
||||
.then(async (res) => {
|
||||
const data = await res.data.result;
|
||||
|
|
@ -61,6 +63,7 @@ async function fetcDataList() {
|
|||
/** ทำงานเมื่อมีการเปลี่ยน Tab */
|
||||
watch(tab, () => {
|
||||
page.value = 1;
|
||||
result.value = "";
|
||||
keyword.value = "";
|
||||
dataList.value = [];
|
||||
});
|
||||
|
|
@ -99,6 +102,7 @@ watch(pageSize, () => {
|
|||
v-model:maxPage="maxPage"
|
||||
v-model:total="total"
|
||||
v-model:keyword="keyword"
|
||||
v-model:result="result"
|
||||
:fetchData="fetcDataList"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
|
|
@ -112,6 +116,7 @@ watch(pageSize, () => {
|
|||
v-model:maxPage="maxPage"
|
||||
v-model:total="total"
|
||||
v-model:keyword="keyword"
|
||||
v-model:result="result"
|
||||
:fetchData="fetcDataList"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue