validate statcard dropdown Pagination รายชื่อผู้สอบผ่าน
This commit is contained in:
setthawutttty
parent
25768eb853
commit
e6544f702a
6 changed files with 1455 additions and 1240 deletions
|
|
@ -1,13 +1,13 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, reactive, ref, useAttrs } from 'vue';
|
import { onMounted, reactive, ref, useAttrs } from "vue";
|
||||||
import type { QTableProps } from 'quasar';
|
import type { QTableProps } from "quasar";
|
||||||
import type { FormPlacementMainData } from "@/modules/05_placement/interface/request/Main";
|
import type { FormPlacementMainData } from "@/modules/05_placement/interface/request/Main";
|
||||||
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
|
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
import { usePlacementDataStore } from "@/modules/05_placement/store";
|
import { usePlacementDataStore } from "@/modules/05_placement/store";
|
||||||
import router from '@/router';
|
import router from "@/router";
|
||||||
|
|
||||||
const DataStore = usePlacementDataStore()
|
const DataStore = usePlacementDataStore();
|
||||||
|
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin();
|
||||||
const { dateText } = mixin;
|
const { dateText } = mixin;
|
||||||
|
|
@ -90,55 +90,60 @@ const columns = ref<QTableProps["columns"]>([
|
||||||
sort: (a: string, b: string) =>
|
sort: (a: string, b: string) =>
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
},
|
},
|
||||||
|
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// ข้อมูลตาราง (จำลอง)
|
// ข้อมูลตาราง (จำลอง)
|
||||||
const rows = ref<FormPlacementMainData[]>([{
|
const rows = ref<FormPlacementMainData[]>([
|
||||||
id: 1,
|
{
|
||||||
examRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
|
id: 1,
|
||||||
examOrder: 3,
|
examRound:
|
||||||
fiscalYear: 2023,
|
"การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
|
||||||
numberofCandidates: 8,
|
examOrder: 3,
|
||||||
examType: 1,
|
fiscalYear: 2023,
|
||||||
accountExpirationDate: "2023-02-28T14:47:04.1785384Z"
|
numberofCandidates: 8,
|
||||||
},
|
examType: 1,
|
||||||
{
|
accountExpirationDate: "2023-02-28T14:47:04.1785384Z",
|
||||||
id: 2,
|
},
|
||||||
examRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
|
{
|
||||||
examOrder: 2,
|
id: 2,
|
||||||
fiscalYear: 2023,
|
examRound:
|
||||||
numberofCandidates: 12,
|
"การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
|
||||||
examType: 1,
|
examOrder: 2,
|
||||||
accountExpirationDate: "2023-02-28T14:47:04.1785384Z"
|
fiscalYear: 2023,
|
||||||
},
|
numberofCandidates: 12,
|
||||||
{
|
examType: 1,
|
||||||
id: 3,
|
accountExpirationDate: "2023-02-28T14:47:04.1785384Z",
|
||||||
examRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
|
},
|
||||||
examOrder: 2,
|
{
|
||||||
fiscalYear: 2023,
|
id: 3,
|
||||||
numberofCandidates: 20,
|
examRound:
|
||||||
examType: 1,
|
"การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
|
||||||
accountExpirationDate: "2023-01-31T14:47:04.1785384Z"
|
examOrder: 2,
|
||||||
},
|
fiscalYear: 2023,
|
||||||
{
|
numberofCandidates: 20,
|
||||||
id: 4,
|
examType: 1,
|
||||||
examRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
|
accountExpirationDate: "2023-01-31T14:47:04.1785384Z",
|
||||||
examOrder: 2,
|
},
|
||||||
fiscalYear: 2022,
|
{
|
||||||
numberofCandidates: 16,
|
id: 4,
|
||||||
examType: 2,
|
examRound:
|
||||||
accountExpirationDate: "2023-11-30T14:47:04.1785384Z"
|
"การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
|
||||||
},
|
examOrder: 2,
|
||||||
{
|
fiscalYear: 2022,
|
||||||
id: 5,
|
numberofCandidates: 16,
|
||||||
examRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
|
examType: 2,
|
||||||
examOrder: 1,
|
accountExpirationDate: "2023-11-30T14:47:04.1785384Z",
|
||||||
fiscalYear: 2021,
|
},
|
||||||
numberofCandidates: 20,
|
{
|
||||||
examType: 2,
|
id: 5,
|
||||||
accountExpirationDate: "2024-05-21T14:47:04.1785384Z",
|
examRound:
|
||||||
},
|
"การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
|
||||||
|
examOrder: 1,
|
||||||
|
fiscalYear: 2021,
|
||||||
|
numberofCandidates: 20,
|
||||||
|
examType: 2,
|
||||||
|
accountExpirationDate: "2024-05-21T14:47:04.1785384Z",
|
||||||
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
let OriginalData = ref<FormPlacementMainData[]>([]);
|
let OriginalData = ref<FormPlacementMainData[]>([]);
|
||||||
|
|
@ -155,19 +160,19 @@ const OriginalDataFetch = async () => {
|
||||||
// })
|
// })
|
||||||
// .finally(async () => {
|
// .finally(async () => {
|
||||||
// });
|
// });
|
||||||
await DataStore.DataMain(rows.value)
|
await DataStore.DataMain(rows.value);
|
||||||
OriginalData.value = await DataStore.DataMainOrig
|
OriginalData.value = await DataStore.DataMainOrig;
|
||||||
UpdataData.value = OriginalData.value
|
UpdataData.value = OriginalData.value;
|
||||||
}
|
};
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await OriginalDataFetch()
|
await OriginalDataFetch();
|
||||||
fiscalYearFilter()
|
fiscalYearFilter();
|
||||||
examTimeFilter()
|
examTimeFilter();
|
||||||
examTypeFilter()
|
examTypeFilter();
|
||||||
await expiredAccountFilter()
|
await expiredAccountFilter();
|
||||||
searchFilterTable()
|
searchFilterTable();
|
||||||
})
|
});
|
||||||
|
|
||||||
// ดูรายการสอบแข่งขัน หน้าต่อไป
|
// ดูรายการสอบแข่งขัน หน้าต่อไป
|
||||||
const redirectToPage = (id?: number) => {
|
const redirectToPage = (id?: number) => {
|
||||||
|
|
@ -177,7 +182,7 @@ const redirectToPage = (id?: number) => {
|
||||||
|
|
||||||
// เลือกปีงบประมาณ
|
// เลือกปีงบประมาณ
|
||||||
const fiscalyear = ref<number | null>(0);
|
const fiscalyear = ref<number | null>(0);
|
||||||
const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: 'ทั้งหมด' }]);
|
const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
|
||||||
const addedfiscalYearValues: number[] = [];
|
const addedfiscalYearValues: number[] = [];
|
||||||
const fiscalYearFilter = async () => {
|
const fiscalYearFilter = async () => {
|
||||||
// API
|
// API
|
||||||
|
|
@ -204,11 +209,11 @@ const fiscalYearFilter = async () => {
|
||||||
addedfiscalYearValues.push(year);
|
addedfiscalYearValues.push(year);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
// เลือกปีงบประมาณตาม API
|
// เลือกปีงบประมาณตาม API
|
||||||
const searchfiscalyear = () => {
|
const searchfiscalyear = () => {
|
||||||
console.log('Input value changed:', fiscalyear.value);
|
console.log("Input value changed:", fiscalyear.value);
|
||||||
// API
|
// API
|
||||||
// await http
|
// await http
|
||||||
// .get(config.API.// ตัวอย่าง)
|
// .get(config.API.// ตัวอย่าง)
|
||||||
|
|
@ -230,7 +235,15 @@ const resetFilter = () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const attrs = ref<any>(useAttrs());
|
const attrs = ref<any>(useAttrs());
|
||||||
const visibleColumns = ref<string[]>(['id', 'examRound', 'examOrder', 'fiscalYear', 'numberofCandidates', 'examType', 'accountExpirationDate']) //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
const visibleColumns = ref<string[]>([
|
||||||
|
"id",
|
||||||
|
"examRound",
|
||||||
|
"examOrder",
|
||||||
|
"fiscalYear",
|
||||||
|
"numberofCandidates",
|
||||||
|
"examType",
|
||||||
|
"accountExpirationDate",
|
||||||
|
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
||||||
|
|
||||||
// ครั้งที่สอบ
|
// ครั้งที่สอบ
|
||||||
const examTime = ref<number | null>(null);
|
const examTime = ref<number | null>(null);
|
||||||
|
|
@ -242,7 +255,7 @@ const examTimeFilter = async () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
examTimeOP.value.sort((a, b) => a - b); // เรียงลำดับ
|
examTimeOP.value.sort((a, b) => a - b); // เรียงลำดับ
|
||||||
}
|
};
|
||||||
|
|
||||||
// ประเภทการสอบ
|
// ประเภทการสอบ
|
||||||
const examType = ref<number | null>(0);
|
const examType = ref<number | null>(0);
|
||||||
|
|
@ -259,12 +272,16 @@ const examTypeFilter = async () => {
|
||||||
addedexamTypeValues.push(2);
|
addedexamTypeValues.push(2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const searchFilterTable = async () => {
|
const searchFilterTable = async () => {
|
||||||
// console.log('Input value changed:', examTime.value, examType.value, expiredAccount.value);
|
// console.log('Input value changed:', examTime.value, examType.value, expiredAccount.value);
|
||||||
await DataStore.DataUpdateMain(examTime.value, examType.value, expiredAccount.value);
|
await DataStore.DataUpdateMain(
|
||||||
UpdataData.value = DataStore.DataMainUpdate
|
examTime.value,
|
||||||
|
examType.value,
|
||||||
|
expiredAccount.value
|
||||||
|
);
|
||||||
|
UpdataData.value = DataStore.DataMainUpdate;
|
||||||
};
|
};
|
||||||
|
|
||||||
// บัญชีหมดอายุ
|
// บัญชีหมดอายุ
|
||||||
|
|
@ -273,7 +290,7 @@ const expiredAccountFilter = async () => {
|
||||||
const currentDate = new Date();
|
const currentDate = new Date();
|
||||||
const updatedRows = OriginalData.value.map((data) => {
|
const updatedRows = OriginalData.value.map((data) => {
|
||||||
let expirationDate = new Date(data.accountExpirationDate);
|
let expirationDate = new Date(data.accountExpirationDate);
|
||||||
let isExpired = expirationDate < currentDate
|
let isExpired = expirationDate < currentDate;
|
||||||
|
|
||||||
return { ...data, isExpired };
|
return { ...data, isExpired };
|
||||||
});
|
});
|
||||||
|
|
@ -281,81 +298,188 @@ const expiredAccountFilter = async () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const paging = ref<boolean>(true);
|
const paging = ref<boolean>(true);
|
||||||
|
const pagination = ref({
|
||||||
|
sortBy: "desc",
|
||||||
|
descending: false,
|
||||||
|
page: 1,
|
||||||
|
rowsPerPage: 10,
|
||||||
|
});
|
||||||
const paginationLabel = (start: string, end: string, total: string) => {
|
const paginationLabel = (start: string, end: string, total: string) => {
|
||||||
if (paging.value == true)
|
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
|
||||||
return " " + start + "-" + end + " ใน " + total;
|
|
||||||
else return start + "-" + end + " ใน " + total;
|
else return start + "-" + end + " ใน " + total;
|
||||||
};
|
};
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
<div class="toptitle text-dark col-12 row items-center">
|
||||||
รายการสอบแข่งขัน / คัดเลือก
|
รายการสอบแข่งขัน / คัดเลือก
|
||||||
</div>
|
</div>
|
||||||
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
|
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
|
||||||
<div class="row q-col-gutter-md">
|
<div class="row q-col-gutter-md">
|
||||||
<div class="row col-12 q-col-gutter-sm">
|
<div class="row col-12 q-col-gutter-sm">
|
||||||
<q-select class="col-xs-12 col-sm-3 col-md-2" v-model="fiscalyear" label="ปีงบประมาณ" dense clearable emit-value map-options :options="fiscalyearOP"
|
<q-select
|
||||||
option-value="id" option-label="name" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
|
class="col-xs-12 col-sm-3 col-md-2"
|
||||||
:outlined="true" :hide-dropdown-icon="false" @update:model-value="searchfiscalyear" />
|
v-model="fiscalyear"
|
||||||
<q-space />
|
label="ปีงบประมาณ"
|
||||||
<q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined debounce="300" placeholder="ค้นหา">
|
dense
|
||||||
<template v-slot:append>
|
emit-value
|
||||||
<q-icon v-if="filterKeyword == ''" name="search" />
|
map-options
|
||||||
<q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
|
:options="fiscalyearOP"
|
||||||
</template>
|
option-value="id"
|
||||||
</q-input>
|
option-label="name"
|
||||||
<q-select class="col-xs-12 col-sm-3 col-md-2" v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
|
lazy-rules
|
||||||
emit-value map-options :options="columns" option-value="name" options-cover />
|
hide-bottom-space
|
||||||
</div>
|
:readonly="false"
|
||||||
<div class="col-12">
|
:borderless="false"
|
||||||
<q-card bordered class="col-12 filter-card q-pa-sm">
|
:outlined="true"
|
||||||
<div class="row col-12 q-col-gutter-sm">
|
:hide-dropdown-icon="false"
|
||||||
<q-select class="col-xs-12 col-sm-3 col-md-2" v-model="examTime" label="ครั้งที่" dense clearable emit-value map-options :options="examTimeOP"
|
@update:model-value="searchfiscalyear"
|
||||||
option-value="id" option-label="name" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
|
/>
|
||||||
:outlined="true" :hide-dropdown-icon="false" @update:model-value="searchFilterTable" />
|
<q-space />
|
||||||
<q-select class="col-xs-12 col-sm-3 col-md-2" v-model="examType" label="ประเภทการสอบ" dense clearable emit-value map-options option-label="name"
|
<q-input
|
||||||
:options="examTypeOP" option-value="id" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
|
class="col-xs-12 col-sm-3 col-md-2"
|
||||||
:outlined="true" :hide-dropdown-icon="false" @update:model-value="searchFilterTable" />
|
standout
|
||||||
<q-toggle class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account" v-model="expiredAccount" color="blue" label="แสดงบัญชีหมดอายุ"
|
dense
|
||||||
@update:model-value="searchFilterTable" />
|
v-model="filterKeyword"
|
||||||
</div>
|
ref="filterRef"
|
||||||
</q-card>
|
outlined
|
||||||
</div>
|
debounce="300"
|
||||||
<div class="col-12">
|
placeholder="ค้นหา"
|
||||||
<q-table ref="table" :columns="columns" :rows="UpdataData" :filter="filterKeyword" row-key="id" flat bordered
|
>
|
||||||
dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
|
<template v-slot:append>
|
||||||
:pagination-label="paginationLabel">
|
<q-icon v-if="filterKeyword == ''" name="search" />
|
||||||
<template v-slot:body="props">
|
<q-icon
|
||||||
<q-tr :props="props" class="cursor-pointer" @click="redirectToPage(props.row.id)">
|
v-if="filterKeyword !== ''"
|
||||||
<q-td key="id" :props="props">
|
name="clear"
|
||||||
{{ props.row.id }}
|
class="cursor-pointer"
|
||||||
</q-td>
|
@click="resetFilter"
|
||||||
<q-td key="examRound" :props="props">
|
/>
|
||||||
{{ props.row.examRound }}
|
</template>
|
||||||
</q-td>
|
</q-input>
|
||||||
<q-td key="examOrder" :props="props">
|
<q-select
|
||||||
{{ props.row.examOrder }}
|
class="col-xs-12 col-sm-3 col-md-2"
|
||||||
</q-td>
|
v-model="visibleColumns"
|
||||||
<q-td key="fiscalYear" :props="props">
|
multiple
|
||||||
{{ props.row.fiscalYear + 543 }}
|
outlined
|
||||||
</q-td>
|
dense
|
||||||
<q-td key="numberofCandidates" :props="props">
|
options-dense
|
||||||
{{ props.row.numberofCandidates }}
|
:display-value="$q.lang.table.columns"
|
||||||
</q-td>
|
emit-value
|
||||||
<q-td key="examType" :props="props">
|
map-options
|
||||||
{{ props.row.examType == 1 ? 'คัดเลือก' : 'สอบแข่งขัน' }}
|
:options="columns"
|
||||||
</q-td>
|
option-value="name"
|
||||||
<q-td key="accountExpirationDate" :props="props">
|
options-cover
|
||||||
{{ textDate(props.row.accountExpirationDate) }}
|
/>
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
</q-table>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</q-card>
|
<div class="col-12">
|
||||||
|
<q-card bordered class="col-12 filter-card q-pa-sm">
|
||||||
|
<div class="row col-12 q-col-gutter-sm">
|
||||||
|
<q-select
|
||||||
|
class="col-xs-12 col-sm-3 col-md-2"
|
||||||
|
v-model="examTime"
|
||||||
|
label="ครั้งที่"
|
||||||
|
dense
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
:options="examTimeOP"
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
:readonly="false"
|
||||||
|
:borderless="false"
|
||||||
|
:outlined="true"
|
||||||
|
:hide-dropdown-icon="false"
|
||||||
|
@update:model-value="searchFilterTable"
|
||||||
|
/>
|
||||||
|
<q-select
|
||||||
|
class="col-xs-12 col-sm-3 col-md-2"
|
||||||
|
v-model="examType"
|
||||||
|
label="ประเภทการสอบ"
|
||||||
|
dense
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
option-label="name"
|
||||||
|
:options="examTypeOP"
|
||||||
|
option-value="id"
|
||||||
|
lazy-rules
|
||||||
|
hide-bottom-space
|
||||||
|
:readonly="false"
|
||||||
|
:borderless="false"
|
||||||
|
:outlined="true"
|
||||||
|
:hide-dropdown-icon="false"
|
||||||
|
@update:model-value="searchFilterTable"
|
||||||
|
/>
|
||||||
|
<q-toggle
|
||||||
|
class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
|
||||||
|
v-model="expiredAccount"
|
||||||
|
color="blue"
|
||||||
|
label="แสดงบัญชีหมดอายุ"
|
||||||
|
@update:model-value="searchFilterTable"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<q-table
|
||||||
|
ref="table"
|
||||||
|
:columns="columns"
|
||||||
|
:rows="UpdataData"
|
||||||
|
:filter="filterKeyword"
|
||||||
|
row-key="id"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
dense
|
||||||
|
class="custom-header-table"
|
||||||
|
v-bind="attrs"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
:pagination-label="paginationLabel"
|
||||||
|
v-model:pagination="pagination"
|
||||||
|
>
|
||||||
|
<template v-slot:pagination="scope">
|
||||||
|
<q-pagination
|
||||||
|
v-model="pagination.page"
|
||||||
|
color="primary"
|
||||||
|
:max="scope.pagesNumber"
|
||||||
|
:max-pages="5"
|
||||||
|
size="sm"
|
||||||
|
boundary-links
|
||||||
|
direction-links
|
||||||
|
></q-pagination>
|
||||||
|
</template>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr
|
||||||
|
:props="props"
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="redirectToPage(props.row.id)"
|
||||||
|
>
|
||||||
|
<q-td key="id" :props="props">
|
||||||
|
{{ props.row.id }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="examRound" :props="props">
|
||||||
|
{{ props.row.examRound }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="examOrder" :props="props">
|
||||||
|
{{ props.row.examOrder }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="fiscalYear" :props="props">
|
||||||
|
{{ props.row.fiscalYear + 543 }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="numberofCandidates" :props="props">
|
||||||
|
{{ props.row.numberofCandidates }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="examType" :props="props">
|
||||||
|
{{ props.row.examType == 1 ? "คัดเลือก" : "สอบแข่งขัน" }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="accountExpirationDate" :props="props">
|
||||||
|
{{ textDate(props.row.accountExpirationDate) }}
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</q-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scope>
|
<style lang="scss" scope>
|
||||||
|
|
@ -368,7 +492,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
line-height: 150%;
|
line-height: 150%;
|
||||||
color: #35373C;
|
color: #35373c;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-color {
|
.icon-color {
|
||||||
|
|
|
||||||
|
|
@ -1,81 +1,51 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { reactive, ref } from "vue";
|
import { ref } from "vue";
|
||||||
import { useQuasar } from "quasar";
|
|
||||||
import { defineAsyncComponent } from "@vue/runtime-core";
|
import { defineAsyncComponent } from "@vue/runtime-core";
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
const $q = useQuasar();
|
import cardTop from "@/modules/05_placement/components/pass/StatCard.vue";
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const year = ref<string>("2566");
|
const year = ref<string>("2566");
|
||||||
const round = ref<string>("1");
|
const round = ref<string>("1");
|
||||||
const title = ref<string>("การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ");
|
const title = ref<string>("การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ");
|
||||||
const sizeCard = (val: number) => {
|
|
||||||
if (val === 5) {
|
|
||||||
return "width:15%;";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const itemTop = reactive([
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
num: 7,
|
|
||||||
title: "จำนวนทั้งหมด",
|
|
||||||
color: "#016987",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
num: 1,
|
|
||||||
title: "ยังไม่บรรจุ",
|
|
||||||
color: "#02A998",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
num: 5,
|
|
||||||
title: "เตรียมบรรจุ",
|
|
||||||
color: "#2EA0FF",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
num: 1,
|
|
||||||
title: "บรรจุเเล้ว",
|
|
||||||
color: "#4154B3",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
num: 0,
|
|
||||||
title: "สละสิทธิ์",
|
|
||||||
color: "#FF5C5F",
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
const AddTablePosition = defineAsyncComponent(
|
const AddTablePosition = defineAsyncComponent(
|
||||||
() => import("@/modules/05_placement/components/pass/Table.vue")
|
() => import("@/modules/05_placement/components/pass/Table.vue")
|
||||||
);
|
);
|
||||||
|
const stat = ref<any>({
|
||||||
|
total: 5,
|
||||||
|
unContain: 1,
|
||||||
|
prepareContain: 3,
|
||||||
|
contain: 1,
|
||||||
|
disclaim: 0,
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row">
|
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row">
|
||||||
<div class="toptitle">
|
<div class="toptitle">
|
||||||
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
|
<q-btn
|
||||||
|
icon="mdi-arrow-left"
|
||||||
|
unelevated
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
color="primary"
|
||||||
|
class="q-mr-sm"
|
||||||
|
@click="router.go(-1)"
|
||||||
|
/>
|
||||||
รายชื่อผู้สอบในรอบ {{ title }} ครั้งที่ {{ round }} ปี {{ year }}
|
รายชื่อผู้สอบในรอบ {{ title }} ครั้งที่ {{ round }} ปี {{ year }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<q-card bordered class="q-py-sm row col-12">
|
<q-card bordered class="q-py-sm row col-12">
|
||||||
<div class="col-12 row bg-white">
|
<div class="col-12 row bg-white">
|
||||||
<div class="fit q-px-md q-py-sm">
|
<div class="fit q-px-md q-py-sm">
|
||||||
<div class="row col-12 q-col-gutter-md fit">
|
<div class="row col-12 q-col-gutter-md fit">
|
||||||
<div class="" v-for="item in itemTop" :key="item.id" :style="$q.screen.lt.md ? '' : sizeCard(5)" :class="$q.screen.lt.sm ? 'col-4' : ''">
|
<cardTop :amount="stat.total" label="จำนวนทั้งหมด" color="#016987" />
|
||||||
<div class="q-card q-card--bordered q-card--flat no-shadow row fit cardNum items-center q-px-sm">
|
<cardTop :amount="stat.unContain" label="จำนวนที่ยังไม่บรรจุ" color="#02A998" />
|
||||||
<div class="col-12 row items-center q-pa-sm">
|
<cardTop :amount="stat.prepareContain" label="จำนวนที่เตรียมบรรจุ" color="#2EA0FF" />
|
||||||
<div class="col-12 text-h5 text-weight-bold" :style="{ color: item.color }">
|
<cardTop :amount="stat.contain" label="จำนวนที่บรรจุแล้ว" color="#4154B3" />
|
||||||
{{ item.num }}
|
<cardTop :amount="stat.disclaim" label="จำนวนที่สละสิทธิ์" color="#FF5C5F" />
|
||||||
</div>
|
|
||||||
<div class="col-12 text-dark ellipsis">
|
|
||||||
{{ item.title }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</q-card>
|
</q-card>
|
||||||
</div>
|
</div>
|
||||||
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
|
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
|
||||||
|
|
@ -88,7 +58,6 @@ const AddTablePosition = defineAsyncComponent(
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.cardNum {
|
.cardNum {
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
/* border-left: 3px solid #016987 !important; */
|
|
||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
43
src/modules/05_placement/components/pass/StatCard.vue
Normal file
43
src/modules/05_placement/components/pass/StatCard.vue
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
const sizeCard = (val: number) => {
|
||||||
|
if (val === 5) {
|
||||||
|
return "width:15%;";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const props = defineProps({
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
amount: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:style="$q.screen.lt.md ? '' : sizeCard(5)"
|
||||||
|
:class="$q.screen.lt.sm ? 'col-4' : ''"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="q-card q-card--bordered q-card--flat no-shadow row fit cardNum items-center q-px-sm"
|
||||||
|
>
|
||||||
|
<div class="col-12 row items-center q-pa-sm">
|
||||||
|
<div
|
||||||
|
class="col-12 text-h5 text-weight-bold"
|
||||||
|
:style="{ color: props.color }"
|
||||||
|
>
|
||||||
|
{{ props.amount }}
|
||||||
|
</div>
|
||||||
|
<div class="col-12 text-dark ellipsis">
|
||||||
|
{{ props.label }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,309 +1,377 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from "vue";
|
import { ref, computed } from "vue";
|
||||||
import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
|
import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
|
||||||
|
import { useQuasar } from 'quasar'
|
||||||
import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
|
import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
|
||||||
import type { CheckboxItem } from "@/modules/05_placement/interface/index/Main";
|
import type { CheckboxItem } from "@/modules/05_placement/interface/index/Main";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
||||||
|
const modal = ref<boolean>();
|
||||||
|
const { success } = mixin;
|
||||||
const save = ref<boolean>(true);
|
const save = ref<boolean>(true);
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
Modal: Boolean,
|
Modal: Boolean,
|
||||||
close: {
|
close: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: () => console.log("not function"),
|
default: () => console.log("not function"),
|
||||||
},
|
},
|
||||||
getdetail: {
|
getdetail: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true
|
required: true,
|
||||||
}
|
},
|
||||||
|
validate: {
|
||||||
|
type: Function,
|
||||||
|
default: () => console.log("not function"),
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
const myForm = ref<any>();
|
||||||
|
const checkValidate = ref<boolean>(false);
|
||||||
|
const selection = ref<number[]>([]);
|
||||||
const selection = ref([]);
|
|
||||||
const checkboxItems: CheckboxItem[] = [
|
const checkboxItems: CheckboxItem[] = [
|
||||||
{ id: 1, label: 'ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง' },
|
{ id: 1, label: "ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง" },
|
||||||
{ id: 2, label: 'ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.' },
|
{
|
||||||
{ id: 3, label: 'ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
|
id: 2,
|
||||||
{ id: 4, label: 'ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม' },
|
label:
|
||||||
{ id: 5, label: 'ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง' },
|
"ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.",
|
||||||
{ id: 6, label: 'ไม่เป็นบุคคลล้มละลาย' },
|
},
|
||||||
{ id: 7, label: 'ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ' },
|
{
|
||||||
{ id: 8, label: 'ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ' },
|
id: 3,
|
||||||
{ id: 9, label: 'เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
|
label:
|
||||||
{ id: 10, label: 'เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
|
"ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น",
|
||||||
{ id: 11, label: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' },
|
},
|
||||||
|
{ id: 4, label: "ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม" },
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
label:
|
||||||
|
"ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง",
|
||||||
|
},
|
||||||
|
{ id: 6, label: "ไม่เป็นบุคคลล้มละลาย" },
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
label:
|
||||||
|
"ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
label:
|
||||||
|
"ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
label:
|
||||||
|
"เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
label:
|
||||||
|
"เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
label:
|
||||||
|
"เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
const $q = useQuasar()
|
||||||
|
function isRequired(val: any): boolean | string {
|
||||||
|
return !!val || "กรุณาเลือกไฟล์เอกสารหลักฐาน";
|
||||||
|
}
|
||||||
|
const validateData = () => {
|
||||||
|
const selectedIds = selection.value;
|
||||||
|
const selectedItems = checkboxItems.filter((item) =>
|
||||||
|
selectedIds.includes(item.id)
|
||||||
|
);
|
||||||
|
|
||||||
const clickSave = async () => {
|
return (
|
||||||
console.log(selection.value)
|
selectedItems.length > 0 && selectedItems.length === selectedIds.length
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const ClickSave = () => {
|
||||||
|
const isValid = validateData();
|
||||||
|
if (isValid) {
|
||||||
|
console.log(selection.value);
|
||||||
|
console.log("rerer", props.Modal);
|
||||||
|
props.close();
|
||||||
|
props.validate();
|
||||||
|
selection.value = [];
|
||||||
|
} else {
|
||||||
|
success($q, "กรอกให้ครบ");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const close = async () => {
|
||||||
|
props.close();
|
||||||
|
selection.value = [];
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<q-dialog v-model="props.Modal">
|
<q-dialog v-model="props.Modal">
|
||||||
<q-card style="max-width: 100%;width:80%;">
|
<q-card style="max-width: 100%; width: 80%">
|
||||||
<q-form ref="myForm">
|
<q-form ref="myForm">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<DialogHeader :title="`รายละเอียดของ ${props.getdetail.fullName}`" :close="close" />
|
<DialogHeader
|
||||||
</div>
|
:title="`รายละเอียดของ ${props.getdetail.fullName}`"
|
||||||
<q-separator />
|
@click="close"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
<div class="contanier-box-main">
|
<div class="contanier-box-main">
|
||||||
<div class="contanier-box-mini">
|
<div class="contanier-box-mini">
|
||||||
<q-card bordered class="card-panding">
|
<q-card bordered class="card-panding">
|
||||||
<div class="row items-center q-pa-xs header-text">
|
<div class="row items-center q-pa-xs header-text">
|
||||||
ข้อมูลทั่วไป <span class="check-officer"><q-icon name="mdi-check" />
|
ข้อมูลทั่วไป
|
||||||
ข้าราชการฯ กทม</span>
|
<span class="check-officer"
|
||||||
</div>
|
><q-icon name="mdi-check" /> ข้าราชการฯ กทม</span
|
||||||
<div class="row q-pa-xs">
|
>
|
||||||
<div class="col-3 header-sub-text">
|
</div>
|
||||||
<div class="q-pb-md">
|
<div class="row q-pa-xs">
|
||||||
เลขที่ประจำตัวประชาชน
|
<div class="col-3 header-sub-text">
|
||||||
</div>
|
<div class="q-pb-md">เลขที่ประจำตัวประชาชน</div>
|
||||||
<div class="q-pb-md">
|
<div class="q-pb-md">วัน/เดือน/ปีเกิด</div>
|
||||||
วัน/เดือน/ปีเกิด
|
</div>
|
||||||
</div>
|
<div class="col-4 sub-text">
|
||||||
</div>
|
<div class="q-pb-md">
|
||||||
<div class="col-4 sub-text">
|
{{ props.getdetail.profileID }}
|
||||||
<div class="q-pb-md">
|
</div>
|
||||||
{{ props.getdetail.profileID }}
|
<div class="q-pb-md">
|
||||||
</div>
|
{{ props.getdetail.dateOfBirth }}
|
||||||
<div class="q-pb-md">
|
</div>
|
||||||
{{ props.getdetail.dateOfBirth }}
|
</div>
|
||||||
</div>
|
<div class="col-2 header-sub-text">
|
||||||
</div>
|
<div class="q-pb-md">ชื่อ-นามสกุล</div>
|
||||||
<div class="col-2 header-sub-text">
|
<div class="q-pb-md">เพศ</div>
|
||||||
<div class="q-pb-md">
|
</div>
|
||||||
ชื่อ-นามสกุล
|
<div class="col-3 sub-text">
|
||||||
</div>
|
<div class="q-pb-md">
|
||||||
<div class="q-pb-md">
|
{{ props.getdetail.fullName }}
|
||||||
เพศ
|
</div>
|
||||||
</div>
|
<div class="q-pb-md">
|
||||||
</div>
|
{{ props.getdetail.gender }}
|
||||||
<div class="col-3 sub-text">
|
</div>
|
||||||
<div class="q-pb-md">
|
</div>
|
||||||
{{ props.getdetail.fullName }}
|
</div>
|
||||||
</div>
|
</q-card>
|
||||||
<div class="q-pb-md">
|
</div>
|
||||||
{{ props.getdetail.gender }}
|
<div class="contanier-box-mini">
|
||||||
</div>
|
<q-card bordered class="card-panding">
|
||||||
</div>
|
<div class="row items-center q-pa-xs header-text">ภูมิลำเนา</div>
|
||||||
</div>
|
<div class="row q-pa-xs">
|
||||||
</q-card>
|
<div class="col-3 header-sub-text">ที่อยู่</div>
|
||||||
|
<div class="col-9 sub-text">
|
||||||
|
{{ props.getdetail.address }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
<div class="contanier-box-mini">
|
||||||
|
<q-card bordered class="card-panding">
|
||||||
|
<div class="row items-center q-pa-xs header-text">การศึกษา</div>
|
||||||
|
<div class="row q-pa-xs">
|
||||||
|
<div class="col-3 header-sub-text">
|
||||||
|
<div class="q-pb-md">สถานศึกษา</div>
|
||||||
|
<div class="q-pb-md">สาขาวิชาเอก</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-4 sub-text">
|
||||||
|
<div class="q-pb-md">
|
||||||
|
{{ props.getdetail.university }}
|
||||||
|
</div>
|
||||||
|
<div class="q-pb-md">
|
||||||
|
{{ props.getdetail.major }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-2 header-sub-text">
|
||||||
|
<div class="q-pb-md">วุฒิการศึกษา</div>
|
||||||
|
<div class="q-pb-md">อื่นๆ</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-3 sub-text">
|
||||||
|
<div class="q-pb-md">
|
||||||
|
{{ props.getdetail.degree ? props.getdetail.degree : "-" }}
|
||||||
|
</div>
|
||||||
|
<div class="q-pb-md">
|
||||||
|
{{ props.getdetail.remark ? props.getdetail.remark : "-" }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
<div class="contanier-box-mini">
|
||||||
|
<q-card bordered class="card-panding">
|
||||||
|
<div class="row items-center q-pa-xs header-text">การสอบ</div>
|
||||||
|
<div class="row q-pa-xs">
|
||||||
|
<div class="col-6">
|
||||||
|
<q-card class="card-exam q-pa-sm">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-4 q-pa-xs header-sub-text-exam">
|
||||||
|
<div>ประเภท</div>
|
||||||
|
<div>ภาค ก</div>
|
||||||
|
<div>ภาค ข</div>
|
||||||
|
<div>ภาค ค</div>
|
||||||
|
<div>รวมทั้งหมด</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-4 q-pa-xs">
|
||||||
|
<div class="header-sub-text-exam-2">คะแนนที่ได้</div>
|
||||||
|
<div class="sub-text-exam">
|
||||||
|
{{ props.getdetail.scoreResult.scoreAFull }}
|
||||||
|
</div>
|
||||||
|
<div class="sub-text-exam">
|
||||||
|
{{ props.getdetail.scoreResult.scoreBFull }}
|
||||||
|
</div>
|
||||||
|
<div class="sub-text-exam">
|
||||||
|
{{ props.getdetail.scoreResult.scoreCFull }}
|
||||||
|
</div>
|
||||||
|
<div class="sub-text-exam">
|
||||||
|
{{ props.getdetail.scoreResult.scoreSumFull }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-4 q-pa-xs header-sub-text-exam-2">
|
||||||
|
<div class="header-sub-text-exam-2">ผลการสอบ</div>
|
||||||
|
<div class="sub-text-exam">
|
||||||
|
{{ props.getdetail.scoreResult.scoreA }}
|
||||||
|
</div>
|
||||||
|
<div class="sub-text-exam">
|
||||||
|
{{ props.getdetail.scoreResult.scoreB }}
|
||||||
|
</div>
|
||||||
|
<div class="sub-text-exam">
|
||||||
|
{{ props.getdetail.scoreResult.scoreC }}
|
||||||
|
</div>
|
||||||
|
<div class="sub-text-exam">
|
||||||
|
{{ props.getdetail.scoreResult.scoreSum }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="contanier-box-mini">
|
</q-card>
|
||||||
<q-card bordered class="card-panding">
|
</div>
|
||||||
<div class="row items-center q-pa-xs header-text">
|
<div class="col-1"></div>
|
||||||
ภูมิลำนำ
|
<div class="col-5 q-pt-sm q-pl-lg">
|
||||||
</div>
|
<div class="row">
|
||||||
<div class="row q-pa-xs">
|
<div class="col-7 header-sub-text">
|
||||||
<div class="col-3 header-sub-text">
|
<div class="q-pb-sm">ผลการสอบ</div>
|
||||||
ที่อยู่
|
<div class="q-pb-sm">ลำดับที่สอบได้</div>
|
||||||
</div>
|
<div class="q-pb-sm">จำนวนครั้งที่สมัครสอบ</div>
|
||||||
<div class="col-9 sub-text">
|
|
||||||
{{ props.getdetail.address }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="contanier-box-mini">
|
<div class="col-5 sub-text-exam">
|
||||||
<q-card bordered class="card-panding">
|
<div class="q-pb-sm">
|
||||||
<div class="row items-center q-pa-xs header-text">
|
{{ props.getdetail.scoreResult.examResult }}
|
||||||
การศึกษา
|
</div>
|
||||||
</div>
|
<div class="q-pb-sm">{{ props.getdetail.number }}</div>
|
||||||
<div class="row q-pa-xs">
|
<div class="q-pb-sm">{{ props.getdetail.examCount }}</div>
|
||||||
<div class="col-3 header-sub-text">
|
|
||||||
<div class="q-pb-md">
|
|
||||||
สถานศึกษา
|
|
||||||
</div>
|
|
||||||
<div class="q-pb-md">
|
|
||||||
สาขาวิชาเอก
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-4 sub-text">
|
|
||||||
<div class="q-pb-md">
|
|
||||||
{{ props.getdetail.university }}
|
|
||||||
</div>
|
|
||||||
<div class="q-pb-md">
|
|
||||||
{{ props.getdetail.major }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-2 header-sub-text">
|
|
||||||
<div class="q-pb-md">
|
|
||||||
วุฒิการศึกษา
|
|
||||||
</div>
|
|
||||||
<div class="q-pb-md">
|
|
||||||
อื่นๆ
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-3 sub-text">
|
|
||||||
<div class="q-pb-md">
|
|
||||||
{{ props.getdetail.degree ? props.getdetail.degree : '-' }}
|
|
||||||
</div>
|
|
||||||
<div class="q-pb-md">
|
|
||||||
{{ props.getdetail.remark ? props.getdetail.remark : '-' }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
</div>
|
|
||||||
<div class="contanier-box-mini">
|
|
||||||
<q-card bordered class="card-panding">
|
|
||||||
<div class="row items-center q-pa-xs header-text">
|
|
||||||
การสอบ
|
|
||||||
</div>
|
|
||||||
<div class="row q-pa-xs">
|
|
||||||
<div class="col-6">
|
|
||||||
<q-card class="card-exam q-pa-sm">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-4 q-pa-xs header-sub-text-exam">
|
|
||||||
<div> ประเภท </div>
|
|
||||||
<div> ภาค ก </div>
|
|
||||||
<div> ภาค ข </div>
|
|
||||||
<div> ภาค ค </div>
|
|
||||||
<div> รวมทั้งหมด </div>
|
|
||||||
</div>
|
|
||||||
<div class="col-4 q-pa-xs">
|
|
||||||
<div class="header-sub-text-exam-2"> คะแนนที่ได้</div>
|
|
||||||
<div class="sub-text-exam"> {{
|
|
||||||
props.getdetail.scoreResult.scoreAFull }}</div>
|
|
||||||
<div class="sub-text-exam"> {{
|
|
||||||
props.getdetail.scoreResult.scoreBFull }}</div>
|
|
||||||
<div class="sub-text-exam"> {{
|
|
||||||
props.getdetail.scoreResult.scoreCFull }}</div>
|
|
||||||
<div class="sub-text-exam"> {{
|
|
||||||
(props.getdetail.scoreResult.scoreSumFull) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-4 q-pa-xs header-sub-text-exam-2">
|
|
||||||
<div class="header-sub-text-exam-2">ผลการสอบ</div>
|
|
||||||
<div class="sub-text-exam">{{ props.getdetail.scoreResult.scoreA
|
|
||||||
}}</div>
|
|
||||||
<div class="sub-text-exam">{{ props.getdetail.scoreResult.scoreB
|
|
||||||
}}</div>
|
|
||||||
<div class="sub-text-exam">{{ props.getdetail.scoreResult.scoreC
|
|
||||||
}}</div>
|
|
||||||
<div class="sub-text-exam">{{
|
|
||||||
(props.getdetail.scoreResult.scoreSum) }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
</div>
|
|
||||||
<div class="col-1"></div>
|
|
||||||
<div class="col-5 q-pt-sm q-pl-lg">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-7 header-sub-text">
|
|
||||||
<div class="q-pb-sm">ผลการสอบ</div>
|
|
||||||
<div class="q-pb-sm">ลำดับที่สอบได้</div>
|
|
||||||
<div class="q-pb-sm">จำนวนครั้งที่สมัครสอบ</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-5 sub-text-exam">
|
|
||||||
<div class="q-pb-sm">{{ props.getdetail.scoreResult.examResult }}
|
|
||||||
</div>
|
|
||||||
<div class="q-pb-sm">{{ props.getdetail.number }}</div>
|
|
||||||
<div class="q-pb-sm">{{ props.getdetail.examCount }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="contanier-box-mini">
|
<div class="contanier-box-mini">
|
||||||
<q-card bordered class="card-panding">
|
<q-card bordered class="card-panding">
|
||||||
<div class="col-12 row items-center q-pa-sm header-text">
|
<div class="col-12 row items-center q-pa-sm header-text">
|
||||||
การคัดกรองคุณสมบัติ
|
การคัดกรองคุณสมบัติ
|
||||||
</div>
|
</div>
|
||||||
<div v-for="item of checkboxItems" :key="item.id" class="q-pa-sm">
|
<div v-for="item of checkboxItems" :key="item.id" class="q-pa-sm">
|
||||||
<q-checkbox size="xs" v-model="selection" :val="item.id" :label="item.label" keep-color
|
<q-checkbox
|
||||||
color="teal" class="checkbox-group" />
|
size="xs"
|
||||||
<q-separator />
|
v-model="selection"
|
||||||
</div>
|
:val="item.id"
|
||||||
</q-card>
|
:label="item.label"
|
||||||
</div>
|
keep-color
|
||||||
</div>
|
color="teal"
|
||||||
|
:rules="[isRequired]"
|
||||||
|
class="checkbox-group"
|
||||||
|
/>
|
||||||
<q-separator />
|
<q-separator />
|
||||||
<div>
|
</div>
|
||||||
<DialogFooter :save="clickSave" v-model:editvisible="save" />
|
</q-card>
|
||||||
</div>
|
</div>
|
||||||
</q-form>
|
</div>
|
||||||
</q-card>
|
<q-separator />
|
||||||
</q-dialog>
|
<div>
|
||||||
|
<DialogFooter
|
||||||
|
@click="ClickSave"
|
||||||
|
:model="props.Modal"
|
||||||
|
:editvisible="save"
|
||||||
|
:validate="validateData"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
</template>
|
</template>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.icon-officer {
|
.icon-officer {
|
||||||
color: #00AA86;
|
color: #00aa86;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.check-officer {
|
.check-officer {
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
color: #00AA86;
|
color: #00aa86;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contanier-box-main {
|
.contanier-box-main {
|
||||||
padding: 10px 21px 10px 21px;
|
padding: 10px 21px 10px 21px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contanier-box-mini {
|
.contanier-box-mini {
|
||||||
padding: 10px 0px 10px 0px;
|
padding: 10px 0px 10px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-panding {
|
.card-panding {
|
||||||
padding: 15px 21px 15px 21px;
|
padding: 15px 21px 15px 21px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-text {
|
.header-text {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #4F4F4F;
|
color: #4f4f4f;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-sub-text {
|
.header-sub-text {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 150%;
|
line-height: 150%;
|
||||||
color: #818181;
|
color: #818181;
|
||||||
}
|
}
|
||||||
.sub-text {
|
.sub-text {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
letter-spacing: 0.0025em;
|
letter-spacing: 0.0025em;
|
||||||
color: #35373C;
|
color: #35373c;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-exam {
|
.card-exam {
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
background: #FAFAFA;
|
background: #fafafa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-sub-text-exam {
|
.header-sub-text-exam {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 150%;
|
line-height: 150%;
|
||||||
color: #818181;
|
color: #818181;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-sub-text-exam-2 {
|
.header-sub-text-exam-2 {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 150%;
|
line-height: 150%;
|
||||||
color: #00AA86;
|
color: #00aa86;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sub-text-exam {
|
.sub-text-exam {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkbox-group {
|
.checkbox-group {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #35373C;
|
color: #35373c;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="q-px-md q-pb-md">
|
<div class="q-px-md q-pb-md">
|
||||||
<div class="col-12 row q-py-sm" v-if="nornmalData == false">
|
<div class="col-12 row q-py-sm" v-if="nornmalData == false">
|
||||||
<q-space />
|
<q-space />
|
||||||
<div class="items-center" style="display: flex">
|
<div class="items-center" style="display: flex">
|
||||||
<div
|
<div
|
||||||
|
|
@ -115,9 +115,19 @@
|
||||||
:virtual-scroll-sticky-size-start="48"
|
:virtual-scroll-sticky-size-start="48"
|
||||||
dense
|
dense
|
||||||
:pagination-label="paginationLabel"
|
:pagination-label="paginationLabel"
|
||||||
:pagination="initialPagination"
|
v-model:pagination="pagination"
|
||||||
:rows-per-page-options="[0]"
|
|
||||||
>
|
>
|
||||||
|
<template v-slot:pagination="scope">
|
||||||
|
<q-pagination
|
||||||
|
v-model="pagination.page"
|
||||||
|
color="primary"
|
||||||
|
:max="scope.pagesNumber"
|
||||||
|
:max-pages="5"
|
||||||
|
size="sm"
|
||||||
|
boundary-links
|
||||||
|
direction-links
|
||||||
|
></q-pagination>
|
||||||
|
</template>
|
||||||
<template v-slot:header="props">
|
<template v-slot:header="props">
|
||||||
<q-tr :props="props">
|
<q-tr :props="props">
|
||||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
|
|
@ -136,12 +146,12 @@
|
||||||
import { ref, useAttrs } from "vue";
|
import { ref, useAttrs } from "vue";
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar";
|
||||||
|
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
||||||
const { dialogMessage } = mixin;
|
const { dialogMessage } = mixin;
|
||||||
const editvisible = ref<boolean>(false);
|
const editvisible = ref<boolean>(false);
|
||||||
const attrs = ref<any>(useAttrs());
|
const attrs = ref<any>(useAttrs());
|
||||||
|
const paging = ref<boolean>(true);
|
||||||
const table = ref<any>(null);
|
const table = ref<any>(null);
|
||||||
const filterRef = ref<any>(null);
|
const filterRef = ref<any>(null);
|
||||||
const modalPublish = ref<boolean>(false);
|
const modalPublish = ref<boolean>(false);
|
||||||
|
|
@ -231,7 +241,16 @@ const props = defineProps({
|
||||||
default: () => console.log("not function"),
|
default: () => console.log("not function"),
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
const pagination = ref({
|
||||||
|
sortBy: "desc",
|
||||||
|
descending: false,
|
||||||
|
page: 1,
|
||||||
|
rowsPerPage: 10,
|
||||||
|
});
|
||||||
|
const paginationLabel = (start: string, end: string, total: string) => {
|
||||||
|
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
|
||||||
|
else return start + "-" + end + " ใน " + total;
|
||||||
|
};
|
||||||
const refresh = () => props.refresh();
|
const refresh = () => props.refresh();
|
||||||
const initialPagination = ref<any>({
|
const initialPagination = ref<any>({
|
||||||
// descending: false,
|
// descending: false,
|
||||||
|
|
@ -259,12 +278,6 @@ const updateVisibleFilter = (value: any) => {
|
||||||
emit("update:inputvisibleFilter", value);
|
emit("update:inputvisibleFilter", value);
|
||||||
};
|
};
|
||||||
|
|
||||||
const paginationLabel = (start: string, end: string, total: string) => {
|
|
||||||
if (props.paging == true)
|
|
||||||
return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
|
|
||||||
else return start + "-" + end + " ใน " + total;
|
|
||||||
};
|
|
||||||
|
|
||||||
const checkSave = () => {
|
const checkSave = () => {
|
||||||
props.validate();
|
props.validate();
|
||||||
props.save();
|
props.save();
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue