Merge branch 'fix/development' into develop
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
commit
79e958d521
2 changed files with 215 additions and 12 deletions
|
|
@ -0,0 +1,72 @@
|
|||
<script setup lang="ts">
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
const showDialog = defineModel<boolean>("modal", { default: false });
|
||||
const formQuery = defineModel<{
|
||||
citizenId: string;
|
||||
guarantorCitizenId: string;
|
||||
}>("formQuery", { default: () => ({ citizenId: "", guarantorCitizenId: "" }) });
|
||||
|
||||
const props = defineProps({
|
||||
onSearchData: Function,
|
||||
});
|
||||
|
||||
function handleSearch() {
|
||||
props?.onSearchData?.();
|
||||
handleCloseDialog();
|
||||
}
|
||||
|
||||
function handleCloseDialog() {
|
||||
showDialog.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="showDialog" persistent>
|
||||
<q-card style="max-width: 400px">
|
||||
<q-form @submit.prevent="handleSearch">
|
||||
<DialogHeader tittle="ค้นหาขั้นสูง" :close="handleCloseDialog" />
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<div class="col-12 row q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="formQuery.citizenId"
|
||||
dense
|
||||
outlined
|
||||
label="เลขประจำตัวประชาชนข้าราชการฯ ผู้ได้รับทุน"
|
||||
maxlength="13"
|
||||
mask="#############"
|
||||
hide-bottom-space
|
||||
:rules="[(val: string) => !val || val.length >= 13 || 'กรุณากรอกเลขประจำตัวประชาชนข้าราชการฯ ผู้ได้รับทุนให้ครบ']"
|
||||
clearable
|
||||
@clear="formQuery.citizenId = ''"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="formQuery.guarantorCitizenId"
|
||||
dense
|
||||
outlined
|
||||
label="เลขประจำตัวประชาชนผู้ค้ำประกัน"
|
||||
maxlength="13"
|
||||
mask="#############"
|
||||
hide-bottom-space
|
||||
:rules="[(val: string) => !val || val.length >= 13 || 'กรุณากรอกเลขประจำตัวประชาชนผู้ค้ำประกันให้ครบ']"
|
||||
clearable
|
||||
@clear="formQuery.guarantorCitizenId = ''"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<q-btn label="ค้นหา" color="secondary" type="submit" />
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { ref, reactive, onMounted, computed } from "vue";
|
||||
import { useQuasar, type QTableProps } from "quasar";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
|
|
@ -10,14 +10,16 @@ import { useCounterMixin } from "@/stores/mixin";
|
|||
import { calculateFiscalYear } from "@/utils/function";
|
||||
import { usePagination } from "@/composables/usePagination";
|
||||
|
||||
import DialogAdvancedSearch from "@/modules/15_development/components/scholarship/DialogAdvancedSearch.vue";
|
||||
|
||||
import type { DataOption } from "@/modules/15_development/interface/index/Main";
|
||||
import type { ListSholarship } from "@/modules/15_development/interface/response/Scholarship";
|
||||
|
||||
/** use */
|
||||
const $q = useQuasar();
|
||||
const router = useRouter();
|
||||
const { showLoader, hideLoader, messageError } = useCounterMixin();
|
||||
const { pagination, params, onRequest } = usePagination("", fetchList);
|
||||
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
|
||||
const { pagination, params, onRequest } = usePagination("startDate", fetchList);
|
||||
/** หัวตาราง */
|
||||
const rows = ref<ListSholarship[]>([]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
|
|
@ -88,6 +90,62 @@ const columns = ref<QTableProps["columns"]>([
|
|||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "scholarshipType",
|
||||
align: "left",
|
||||
label: "ประเภททุน",
|
||||
sortable: true,
|
||||
field: "scholarshipType",
|
||||
format(val) {
|
||||
return convertScholarshipType(val);
|
||||
},
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "startDate",
|
||||
align: "left",
|
||||
label: "วันที่เริ่มต้น",
|
||||
sortable: true,
|
||||
field: "startDate",
|
||||
format(val) {
|
||||
return date2Thai(val);
|
||||
},
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "endDate",
|
||||
align: "left",
|
||||
label: "วันที่สิ้นสุด",
|
||||
sortable: true,
|
||||
field: "endDate",
|
||||
format(val) {
|
||||
return date2Thai(val);
|
||||
},
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
||||
{
|
||||
name: "guarantorCitizenId",
|
||||
align: "left",
|
||||
label: "เลขประจำตัวประชาชนผู้ค้ำประกัน",
|
||||
sortable: true,
|
||||
field: "guarantorCitizenId",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
||||
{
|
||||
name: "fullNameGuarantor",
|
||||
align: "left",
|
||||
label: "ชื่อ–นามสกุลผู้ค้ำประกัน",
|
||||
sortable: true,
|
||||
field: "fullNameGuarantor",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
||||
{
|
||||
name: "status",
|
||||
|
|
@ -96,7 +154,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
sortable: true,
|
||||
field: "status",
|
||||
format(val, row) {
|
||||
return conventStatus(val);
|
||||
return conventStatus(val, row.scholarshipType);
|
||||
},
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -110,10 +168,16 @@ const visibleColumns = ref<string[]>([
|
|||
"posType",
|
||||
"posLevel",
|
||||
"posExecutive",
|
||||
"scholarshipType",
|
||||
"startDate",
|
||||
"endDate",
|
||||
"guarantorCitizenId",
|
||||
"fullNameGuarantor",
|
||||
"status",
|
||||
]);
|
||||
|
||||
const scholarshipTypeOp = ref<DataOption[]>([
|
||||
{ id: "ALL", name: "ทั้งหมด" },
|
||||
{ id: "DOMESTICE", name: "การศึกษาในประเทศ" },
|
||||
{
|
||||
id: "NOABROAD",
|
||||
|
|
@ -137,12 +201,24 @@ const scholarshipTypeOp = ref<DataOption[]>([
|
|||
},
|
||||
]);
|
||||
|
||||
const modalAdvancedSearch = ref(false);
|
||||
const badgeAdvancedSearch = ref<number>(0);
|
||||
|
||||
const formQuery = reactive({
|
||||
year: calculateFiscalYear(new Date()), //ปีงบประมาณ
|
||||
type: "DOMESTICE",
|
||||
type: "ALL", //ประเภททุน
|
||||
keyword: "",
|
||||
citizenId: "",
|
||||
guarantorCitizenId: "",
|
||||
});
|
||||
|
||||
// const badgeAdvancedSearch = computed(() => {
|
||||
// let count = 0;
|
||||
// if (formQuery.citizenId.length === 13) count++;
|
||||
// if (formQuery.guarantorCitizenId.length === 13) count++;
|
||||
// return count;
|
||||
// });
|
||||
|
||||
/** ดึงข้อมูล */
|
||||
async function fetchList() {
|
||||
showLoader();
|
||||
|
|
@ -152,7 +228,9 @@ async function fetchList() {
|
|||
...params.value,
|
||||
keyword: formQuery.keyword.trim(),
|
||||
year: formQuery.year,
|
||||
scholarshipType: formQuery.type,
|
||||
scholarshipType: formQuery.type === "ALL" ? undefined : formQuery.type,
|
||||
citizenId: formQuery.citizenId.trim() || undefined,
|
||||
guarantorCitizenId: formQuery.guarantorCitizenId.trim() || undefined,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
|
|
@ -172,6 +250,7 @@ async function fetchList() {
|
|||
function fetchNewList() {
|
||||
pagination.value.page = 1;
|
||||
fetchList();
|
||||
checkBadgeAdvancedSearch();
|
||||
}
|
||||
|
||||
/** ย้ายไป หน้า เพิ่ม หรือ แก้ไข */
|
||||
|
|
@ -187,10 +266,21 @@ function onDetail(id: string) {
|
|||
}
|
||||
|
||||
/** ฟังก์ชั่นแปลงสถานะ */
|
||||
function conventStatus(val: string) {
|
||||
function conventStatus(val: string, type: string) {
|
||||
// DOMESTICE การศึกษาในประเทศ
|
||||
// NOABROAD ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)
|
||||
// ABROAD ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)
|
||||
// EXECUTIVE ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรประเภทนักบริหาร)
|
||||
// STUDY ทุนการศึกษา ณ ต่างประเทศ
|
||||
// TRAINING ทุนฝึกอบรม ณ ต่างประเทศ
|
||||
switch (val) {
|
||||
case "PENDING":
|
||||
return "อยู่ระหว่างศึกษา";
|
||||
if (type === "TRAINING") {
|
||||
return "อยู่ระหว่างฝึกอบรม";
|
||||
} else if (type === "DOMESTICE" || type === "STUDY") {
|
||||
return "อยู่ระหว่างศึกษา";
|
||||
}
|
||||
return "-";
|
||||
case "REPORTED":
|
||||
return "รายงานตัวกลับเข้าปฏิบัติราชการแล้ว";
|
||||
case "GRADUATE":
|
||||
|
|
@ -198,12 +288,28 @@ function conventStatus(val: string) {
|
|||
case "NOTGRADUATE":
|
||||
return "เรียนไม่จบ";
|
||||
default:
|
||||
break;
|
||||
return "-";
|
||||
}
|
||||
}
|
||||
|
||||
function convertScholarshipType(val: string) {
|
||||
return scholarshipTypeOp.value.find((e) => e.id === val)?.name || "-";
|
||||
}
|
||||
|
||||
function handlerAdvancedSearch() {
|
||||
modalAdvancedSearch.value = true;
|
||||
}
|
||||
|
||||
function checkBadgeAdvancedSearch() {
|
||||
let count = 0;
|
||||
if (formQuery.citizenId.length === 13) count++;
|
||||
if (formQuery.guarantorCitizenId.length === 13) count++;
|
||||
badgeAdvancedSearch.value = count;
|
||||
}
|
||||
|
||||
/** ดึงข้อมูลเมื่ออยู่ในหน้า */
|
||||
onMounted(() => {
|
||||
pagination.value.descending = true;
|
||||
fetchList();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -270,10 +376,12 @@ onMounted(() => {
|
|||
label="เลือกประเภททุน"
|
||||
@update:model-value="fetchNewList"
|
||||
class="select_ellipsis"
|
||||
:clearable="formQuery.type !== 'ALL'"
|
||||
@clear="formQuery.type = 'ALL'"
|
||||
>
|
||||
<q-tooltip>{{
|
||||
scholarshipTypeOp.find((e) => e.id === formQuery.type)?.name
|
||||
}}</q-tooltip>
|
||||
<q-tooltip>
|
||||
{{ scholarshipTypeOp.find((e) => e.id === formQuery.type)?.name }}
|
||||
</q-tooltip>
|
||||
</q-select>
|
||||
</div>
|
||||
|
||||
|
|
@ -291,6 +399,23 @@ onMounted(() => {
|
|||
|
||||
<q-space />
|
||||
<div class="row q-gutter-sm">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="mdi-filter-variant"
|
||||
color="primary"
|
||||
@click="handlerAdvancedSearch"
|
||||
>
|
||||
<q-tooltip>ค้นหาขั้นสูง</q-tooltip>
|
||||
<q-badge
|
||||
v-if="badgeAdvancedSearch !== 0"
|
||||
color="red"
|
||||
floating
|
||||
transparent
|
||||
>{{ badgeAdvancedSearch }}</q-badge
|
||||
>
|
||||
</q-btn>
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
|
|
@ -385,6 +510,12 @@ onMounted(() => {
|
|||
</p-table>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<DialogAdvancedSearch
|
||||
v-model:modal="modalAdvancedSearch"
|
||||
v-model:formQuery="formQuery"
|
||||
:onSearchData="fetchNewList"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue