329 lines
10 KiB
Vue
329 lines
10 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed, onMounted, watch } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
import { useRouter } from "vue-router";
|
|
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import { useEvaluateStore } from "@/modules/06_evaluate/store";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
|
|
/** import Components*/
|
|
import TableListEvaluate from "@/modules/06_evaluate/components/TableListEvaluate.vue"; // ตารางประเมิน
|
|
import DialogMain from "@/modules/06_evaluate/components/DialogMain.vue"; // popup การเพิ่มประเมิน
|
|
|
|
/** import Type*/
|
|
import type { ListMenu } from "@/modules/06_evaluate/interface/evalute";
|
|
import type { OptionStatus } from "@/modules/06_evaluate/interface/main";
|
|
|
|
/** use*/
|
|
const $q = useQuasar();
|
|
const mixin = useCounterMixin();
|
|
const store = useEvaluateStore();
|
|
const router = useRouter();
|
|
const { showLoader, hideLoader, messageError } = mixin;
|
|
|
|
/** ตัวแปร*/
|
|
const modal = ref<boolean>(false);
|
|
const menu = ref<ListMenu>();
|
|
const listMenu = ref<ListMenu[]>([
|
|
{
|
|
val: "EXPERT",
|
|
label: "ประเมินชำนาญการ",
|
|
type: 2,
|
|
level: 2,
|
|
},
|
|
{
|
|
val: "SPECIAL_EXPERT",
|
|
label: "ประเมินชำนาญการพิเศษ",
|
|
type: 2,
|
|
level: 3,
|
|
},
|
|
{
|
|
val: "PROFESSIONAL",
|
|
label: "ประเมินเชี่ยวชาญ",
|
|
type: 2,
|
|
level: 4,
|
|
},
|
|
]);
|
|
|
|
/**
|
|
* function เปืด popup เพิ่มการประเมิน
|
|
* @param data
|
|
*/
|
|
function onclickAddEvaluate(data: ListMenu) {
|
|
modal.value = !modal.value;
|
|
menu.value = data;
|
|
}
|
|
|
|
function openExpert() {
|
|
router.push("/evaluate/expert");
|
|
}
|
|
|
|
/** ตัวแปร Paging*/
|
|
const page = ref<number>(1);
|
|
const pageSize = ref<number>(25);
|
|
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
|
|
.put(config.API.evaluationList(), body)
|
|
.then(async (res) => {
|
|
maxPage.value = Math.ceil(res.data.result.total / pageSize.value);
|
|
store.fetchEvaluateList(res.data.result.data);
|
|
await getProfileCheck();
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/** function เรียกรายการประเมิน*/
|
|
const statusSubmit = ref<boolean>(true);
|
|
async function getProfileCheck() {
|
|
await http
|
|
.get(config.API.profilePosition())
|
|
.then(async (res: any) => {
|
|
const data = res.data.result;
|
|
if (
|
|
data.posTypeRank != 2 ||
|
|
(data.posTypeRank == 2 && data.posLevelRank >= 4)
|
|
) {
|
|
statusSubmit.value = false;
|
|
} else {
|
|
listMenu.value = await listMenu.value.filter(
|
|
(x: ListMenu) => x.level > data.posLevelRank
|
|
);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* function updatePaging
|
|
* @param newPagination ข้อมูลใหม่ของ Paging
|
|
* @param currentPage หน้า Page
|
|
*/
|
|
async function updatePaging(newPagination: any, currentPage: number) {
|
|
page.value = currentPage;
|
|
pageSize.value = newPagination.rowsPerPage;
|
|
|
|
await fetchEvaluteList();
|
|
}
|
|
|
|
async function filterFn() {
|
|
page.value = 1;
|
|
pageSize.value = pageSize.value;
|
|
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: "ตรวจสอบเอกสารเล่ม 2" },
|
|
{ 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
|
|
);
|
|
});
|
|
}
|
|
|
|
watch(
|
|
() => store.filterKeyword,
|
|
async () => {
|
|
store.filterKeyword === "" && (await fetchEvaluteList());
|
|
}
|
|
);
|
|
|
|
/** hook lifecycle*/
|
|
onMounted(async () => {
|
|
await fetchEvaluteList();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="col-12 row justify-center">
|
|
<div class="col-xs-12 col-sm-12 col-md-11">
|
|
<div class="toptitle text-white col-12 row items-center">
|
|
<q-btn
|
|
icon="mdi-arrow-left"
|
|
unelevated
|
|
round
|
|
dense
|
|
flat
|
|
color="primary"
|
|
class="q-mr-sm"
|
|
@click="router.go(-1)"
|
|
/>
|
|
<div>ประเมินบุคคล</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
|
|
<div class="col-12 row">
|
|
<q-card bordered class="col-12 row caedNone q-pa-md">
|
|
<div class="row col-12 q-mb-sm q-col-gutter-sm">
|
|
<div class="col-xs-12 col-sm-3 col-md-2">
|
|
<q-btn
|
|
v-if="statusSubmit"
|
|
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="
|
|
item.val == 'PROFESSIONAL'
|
|
? openExpert()
|
|
: 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>
|
|
<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="!$q.screen.gt.xs ? '' : 'width: 35vw'"
|
|
@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>
|
|
</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="col-12">
|
|
<TableListEvaluate
|
|
:page="page"
|
|
:pageSize="pageSize"
|
|
:maxPage="maxPage"
|
|
@update:pagination="updatePaging"
|
|
:fetchData="fetchEvaluteList"
|
|
/>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogMain :modal="modal" :menu="menu" :close="onclickAddEvaluate" />
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|