Refactoring code module 12_evaluatePersonal
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
381ec04492
commit
490f02309e
33 changed files with 598 additions and 1036 deletions
|
|
@ -1,9 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ref, onBeforeMount } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
|
||||
|
||||
/** impolerType*/
|
||||
import type { PersonInformation } from "@/modules/12_evaluatePersonal/interface/response/evalute";
|
||||
|
|
@ -12,36 +15,31 @@ import type { PersonInformation } from "@/modules/12_evaluatePersonal/interface/
|
|||
import Tab1 from "@/modules/12_evaluatePersonal/components/Detail/Tab1.vue"; // ชำนาญการ
|
||||
import Tab2 from "@/modules/12_evaluatePersonal/components/Detail/Tab2.vue"; // ชำนาญการพิเศษ
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
|
||||
|
||||
/** use*/
|
||||
const mixin = useCounterMixin();
|
||||
const store = useEvaluateDetailStore();
|
||||
const router = useRouter();
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
|
||||
const { showLoader, hideLoader, messageError } = mixin;
|
||||
|
||||
const id = ref<string>(route.params.id as string); // id รายการประเมิน
|
||||
const data = ref<PersonInformation>(); //ข้อมูลคุณสมบัติ
|
||||
const prefix = ref<string>(""); //คำนำหน้ส
|
||||
const fullName = ref<string>(""); //ชื่อ-นามสกุล
|
||||
|
||||
const data = ref<PersonInformation[]>([]);
|
||||
const prefix = ref<string>("");
|
||||
const fullName = ref<string>("");
|
||||
|
||||
/** funmction เรียกขอ้มูลคุณสมบัติ*/
|
||||
/**
|
||||
* funmction เรียกข้อมูลคุณสมบัติ
|
||||
*/
|
||||
async function fetchFeature() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.evaluateGetDetail(id.value))
|
||||
.then((res) => {
|
||||
data.value = res.data.result;
|
||||
const person: any = data.value;
|
||||
if (data.value) {
|
||||
fullName.value = person.fullName;
|
||||
prefix.value = person.prefix;
|
||||
fullName.value = data.value.fullName;
|
||||
prefix.value = data.value.prefix;
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
|
|
@ -54,8 +52,10 @@ async function fetchFeature() {
|
|||
});
|
||||
}
|
||||
|
||||
/** HookLifecycle*/
|
||||
onMounted(async () => {
|
||||
/**
|
||||
* HookLifecycle ทำงานเมื่อ Components ถูกเรียกใช้งาน
|
||||
*/
|
||||
onBeforeMount(async () => {
|
||||
await fetchFeature();
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -21,12 +21,37 @@ const store = useEvalutuonStore();
|
|||
const { showLoader, hideLoader, messageError } = mixin;
|
||||
|
||||
/** request body*/
|
||||
const currentPage = ref<number>(1);
|
||||
const maxPage = ref<number>(0);
|
||||
const page = ref<number>(1);
|
||||
const total = ref<number>(0);
|
||||
const filter = ref<string>("");
|
||||
const pageSize = ref<number>(10);
|
||||
const currentPage = ref<number>(1); //หน้าปัจจุบัน
|
||||
const maxPage = ref<number>(0); //จำนวนหน่า
|
||||
const page = ref<number>(1); //หน้า
|
||||
const total = ref<number>(0); //จำนวนข้อมูลทั้งหมด
|
||||
const filter = ref<string>(""); //คำค้นหา
|
||||
const pageSize = ref<number>(10); //จำนวนรายการต่อหน้า
|
||||
const filterRef = ref<HTMLInputElement | null>(null);
|
||||
//ค้นหาตามสถานะ
|
||||
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 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 options = ref<OptionStatus[]>([]); //ตัวเลือกค้นหาตามสถานะ
|
||||
|
||||
/** pagination ของตาราง*/
|
||||
const initialPagination = ref<any>({
|
||||
|
|
@ -45,23 +70,18 @@ async function updatePagination(initialPagination: any) {
|
|||
pageSize.value = initialPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/** function callback เมื่อมีการเปลี่ยนหน้า*/
|
||||
watch(
|
||||
() => pageSize.value,
|
||||
() => {
|
||||
fetchEvaluteList();
|
||||
}
|
||||
);
|
||||
|
||||
const filterRef = ref<HTMLInputElement | null>(null);
|
||||
/** function ค้นหาตาม keyword*/
|
||||
/**
|
||||
* function ค้นหาตาม keyword
|
||||
*/
|
||||
function filterFn() {
|
||||
updatePagination(filter.value);
|
||||
pageSize.value = initialPagination.value.rowsPerPage;
|
||||
fetchEvaluteList();
|
||||
}
|
||||
|
||||
/** functrion ล้างค้นหา*/
|
||||
/**
|
||||
* functrion ล้างค้นหาD
|
||||
*/
|
||||
function resetFilter() {
|
||||
filter.value = "";
|
||||
fetchEvaluteList();
|
||||
|
|
@ -70,7 +90,9 @@ function resetFilter() {
|
|||
}
|
||||
}
|
||||
|
||||
/** function เรียกรายการคำขอประเมิน*/
|
||||
/**
|
||||
* function เรียกรายการคำขอประเมินD
|
||||
*/
|
||||
async function fetchEvaluteList() {
|
||||
showLoader();
|
||||
const body = {
|
||||
|
|
@ -103,30 +125,9 @@ function Detailpage(id: string) {
|
|||
router.push(`/evaluate/detail/${id}`);
|
||||
}
|
||||
|
||||
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)
|
||||
|
|
@ -145,14 +146,22 @@ const label = computed(() => {
|
|||
* @param update อัพเดทค่า
|
||||
* @param refData ดาต้าที่ต้องการฟิลเตอร์
|
||||
*/
|
||||
function filterOption(val: any, update: Function) {
|
||||
function filterOption(val: string, update: Function) {
|
||||
update(() => {
|
||||
options.value = optionsMain.value.filter(
|
||||
(v: any) => v.label.indexOf(val) > -1
|
||||
(v: OptionStatus) => v.label.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
/** function callback เมื่อมีการเปลี่ยนหน้า*/
|
||||
watch(
|
||||
() => pageSize.value,
|
||||
() => {
|
||||
fetchEvaluteList();
|
||||
}
|
||||
);
|
||||
|
||||
/** HookLifecycle */
|
||||
onMounted(async () => {
|
||||
await fetchEvaluteList(); // เรียกข้อมูลรายการปรัเมิน
|
||||
|
|
@ -163,6 +172,7 @@ onMounted(async () => {
|
|||
<div class="toptitle text-dark col-12 row items-center">
|
||||
รายการคำขอประเมิน
|
||||
</div>
|
||||
|
||||
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
|
||||
<div class="row col-12 q-col-gutter-sm q-mb-sm">
|
||||
<q-select
|
||||
|
|
@ -178,7 +188,7 @@ onMounted(async () => {
|
|||
style="width: 35vw"
|
||||
@update:model-value="fetchEvaluteList"
|
||||
use-input
|
||||
@filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
|
||||
@filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn) "
|
||||
>
|
||||
<template v-slot:selected>
|
||||
<div>
|
||||
|
|
@ -280,7 +290,7 @@ onMounted(async () => {
|
|||
<div class="table_ellipsis">{{ props.row.agency }}</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value }}
|
||||
{{ col.value ?? "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue