ปรับ fetch ข้อมูลรายการประเมินบุคคล
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
c8f1e9770c
commit
86ae8fa847
2 changed files with 151 additions and 5 deletions
6
src/modules/06_evaluate/interface/main.ts
Normal file
6
src/modules/06_evaluate/interface/main.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
interface OptionStatus {
|
||||
val: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export type { OptionStatus };
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted } from "vue";
|
||||
import { ref, computed, onMounted, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRouter } from "vue-router";
|
||||
import http from "@/plugins/http";
|
||||
|
|
@ -7,6 +7,7 @@ import config from "@/app.config";
|
|||
|
||||
/** import Type*/
|
||||
import type { ListMenu } from "@/modules/06_evaluate/interface/evalute";
|
||||
import type { OptionStatus } from "@/modules/06_evaluate/interface/main";
|
||||
|
||||
/** import Components*/
|
||||
import TableListEvaluate from "@/modules/06_evaluate/components/TableListEvaluate.vue"; // ตารางประเมิน
|
||||
|
|
@ -55,11 +56,14 @@ const maxPage = ref<number>(10);
|
|||
/** function เรียกรายการประเมิน*/
|
||||
async function fetchEvaluteList() {
|
||||
showLoader();
|
||||
const body = {
|
||||
page: page.value,
|
||||
pageSize: pageSize.value,
|
||||
keyword: store.filterKeyword,
|
||||
status: selectedStatus.value,
|
||||
};
|
||||
await http
|
||||
.get(
|
||||
config.API.evaluationList() +
|
||||
`?page=${page.value}&pageSize=${pageSize.value}&keyword=${store.filterKeyword}`
|
||||
)
|
||||
.put(config.API.evaluationList(), body)
|
||||
.then((res) => {
|
||||
maxPage.value = Math.ceil(res.data.result.total / pageSize.value);
|
||||
store.fetchEvaluateList(res.data.result.data);
|
||||
|
|
@ -90,10 +94,67 @@ async function filterFn() {
|
|||
await fetchEvaluteList();
|
||||
}
|
||||
|
||||
const selectedStatus = ref<string[]>([
|
||||
"CHECK_SPEC",
|
||||
"PREPARE_DOC_V1",
|
||||
"CHECK_DOC_V1",
|
||||
"WAIT_CHECK_DOC_V1",
|
||||
"ANNOUNCE_WEB",
|
||||
"PREPARE_DOC_V2",
|
||||
"WAIT_CHECK_DOC_V2",
|
||||
"CHECK_DOC_V2",
|
||||
]);
|
||||
const options = ref<OptionStatus[]>([]);
|
||||
const optionsMain = ref<OptionStatus[]>([
|
||||
{ val: "CHECK_SPEC", label: "ตรวจสอบคุณสมบัติด้วยตนเอง" },
|
||||
{ val: "PREPARE_DOC_V1", label: "จัดเตรียมเอกสารเล่ม 1" },
|
||||
{ val: "CHECK_DOC_V1", label: "ตรวจสอบความถูกต้องของเอกสารเล่ม 1" },
|
||||
{ val: "WAIT_CHECK_DOC_V1", label: "รอตรวจสอบคุณสมบัติ" },
|
||||
{ val: "ANNOUNCE_WEB", label: "ประกาศบนเว็บไซต์" },
|
||||
{ val: "PREPARE_DOC_V2", label: "จัดเตรียมเอกสารเล่ม 2" },
|
||||
{ val: "WAIT_CHECK_DOC_V2", label: "รอพิจารณาผลการประเมิน" },
|
||||
{ val: "CHECK_DOC_V2", label: "ตรวจสอบความถูกต้องของเอกสารเล่ม" },
|
||||
{ val: "DONE", label: "เสร็จสิ้น" },
|
||||
]);
|
||||
|
||||
/** ชื่อค่าที่ค้นหาสภานะ*/
|
||||
const label = computed(() => {
|
||||
const filterOption = optionsMain.value.filter((option) =>
|
||||
selectedStatus.value.includes(option.val)
|
||||
);
|
||||
const labelval = filterOption.map((e) => e.label);
|
||||
if (labelval.length !== 0) {
|
||||
return labelval.length <= 2
|
||||
? `${labelval.slice(0, 2).join(", ")}`
|
||||
: `${labelval.slice(0, 2).join(", ")} + ,(${labelval.length - 2})`;
|
||||
} else return "";
|
||||
});
|
||||
|
||||
/**
|
||||
* function ต้นหาข้อมูลของ Option ขอสถานะ
|
||||
* @param val ค่าที่ต้องการฟิลเตอร์
|
||||
* @param update อัพเดทค่า
|
||||
* @param refData ดาต้าที่ต้องการฟิลเตอร์
|
||||
*/
|
||||
function filterOption(val: any, update: Function) {
|
||||
update(() => {
|
||||
options.value = optionsMain.value.filter(
|
||||
(v: any) => v.label.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
/** hook lifecycle*/
|
||||
onMounted(async () => {
|
||||
await fetchEvaluteList();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => store.filterKeyword,
|
||||
async () => {
|
||||
store.filterKeyword === "" && (await fetchEvaluteList());
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-12 row justify-center">
|
||||
|
|
@ -137,6 +198,85 @@ onMounted(async () => {
|
|||
</q-btn>
|
||||
</div>
|
||||
<q-space />
|
||||
<!-- <div class="col-xs-12 col-sm-3 col-md-2">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="store.filterKeyword"
|
||||
label="ค้นหา"
|
||||
debounce="300"
|
||||
@keydown.enter.prevent="filterFn"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div> -->
|
||||
<!-- <div class="col-xs-12 col-sm-3 col-md-2">
|
||||
<q-select
|
||||
v-model="store.visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="store.columns"
|
||||
option-value="name"
|
||||
options-cover
|
||||
/>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="row col-12 q-mb-sm q-col-gutter-sm">
|
||||
<div class="col-xs-12 col-sm-3 col-md-2">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
multiple
|
||||
v-model="selectedStatus"
|
||||
emit-value
|
||||
map-options
|
||||
:options="options"
|
||||
option-value="val"
|
||||
label="ค้นหาสถานะ"
|
||||
style="width: 28vw"
|
||||
@update:model-value="fetchEvaluteList"
|
||||
use-input
|
||||
@filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
|
||||
>
|
||||
<template v-slot:selected>
|
||||
<div>
|
||||
{{ label }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
<!-- <q-btn size="12px" flat round color="primary" icon="mdi-plus">
|
||||
<q-menu>
|
||||
<q-list style="min-width: auto">
|
||||
<q-item
|
||||
v-for="(item, index) in listMenu"
|
||||
:key="index"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click.stop="onclickAddEvaluate(item)"
|
||||
>
|
||||
<q-item-section>{{ item.label }}</q-item-section>
|
||||
<q-tooltip>{{ item.label }}</q-tooltip>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
<q-tooltip>เพิ่มการประเมินบุคคล</q-tooltip>
|
||||
</q-btn> -->
|
||||
</div>
|
||||
<q-space />
|
||||
<div class="col-xs-12 col-sm-3 col-md-2">
|
||||
<q-input
|
||||
dense
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue