hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Merge branch 'develop' into anandadev

Browse source
This commit is contained in:
AnandaTon 2023-06-30 10:07:43 +07:00
commit ffa060b501
13 changed files with 2036 additions and 1459 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/modules/03_recruiting/components/TableCandidate.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="q-px-md q-pb-md">
<div class="col-12 row q-py-sm items-center">
<div class="col-12 row q-py-sm q-gutter-sm items-center">
<span class="text-subtitle1">{{ titleText }}</span>
<q-select
dense
@ -23,7 +23,6 @@
use-chips
multiple
v-if="statusPayment"
class="q-pl-sm"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="blue" />

177
src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
View file

@ -21,18 +21,19 @@
<q-card flat bordered class="col-12 q-my-sm q-pt-sm">
<q-form ref="myForm">
<q-card-section class="q-pa-md">
<div class="col-xs-12 col-sm-8 items-top q-pb-md">
<div class="col-xs-12 col-sm-8 items-top q-pb-md" v-if="!edit">
<q-toggle
v-model="announcementExam"
:false-value="true"
:true-value="false"
color="primary"
dense
class="text-weight-medium text-dark"
label="ประกาศข่าวทั่วไป"
v-if="!edit"
/>
</div>
<div class="col-12 row items-top q-col-gutter-x-sm">
<div class="col-xs-12 col-sm-6 col-sm-5">
<div class="col-xs-12 col-sm-6 col-sm-8">
<q-input
outlined
v-model="name"
@ -69,7 +70,7 @@
]"
></q-input>
</div>
<div class="col-xs-12 col-sm-4 col-md-1" v-if="announcementExam">
<div class="col-xs-12 col-sm-4 col-md-2" v-if="announcementExam">
<datepicker
menu-class-name="modalfix"
v-model="yearly"
@ -104,45 +105,7 @@
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
<datepicker
menu-class-name="modalfix"
v-model="dateExam"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker q-mb-md"
:model-value="dateExam != null ? date2Thai(dateExam) : null"
:label="`${'วันที่สอบ'}`"
clearable
@clear="clearDateExam"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="col-xs-12 col-sm-3 col-md-4">
<datepicker
menu-class-name="modalfix"
v-model="dateAnnouncement"
@ -163,7 +126,7 @@
<q-input
outlined
dense
class="full-width datepicker q-mb-md"
class="full-width datepicker "
:model-value="dateThaiRange(dateAnnouncement)"
:label="`${'วันที่ประกาศ'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ประกาศ'}`]"
@ -180,7 +143,7 @@
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
<div class="col-xs-12 col-sm-3 col-md-4" v-if="announcementExam">
<datepicker
menu-class-name="modalfix"
v-model="dateRegister"
@ -202,7 +165,7 @@
<q-input
outlined
dense
class="full-width datepicker q-mb-md"
class="full-width datepicker "
:model-value="dateThaiRange(dateRegister)"
:label="`${'วันที่สมัคร'}`"
clearable
@ -220,7 +183,7 @@
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
<div class="col-xs-12 col-sm-3 col-md-4" v-if="announcementExam">
<datepicker
menu-class-name="modalfix"
v-model="datePayment"
@ -241,7 +204,7 @@
<q-input
outlined
dense
class="full-width datepicker q-mb-md"
class="full-width datepicker "
:model-value="dateThaiRange(datePayment)"
:label="`${'วันที่ชำระเงิน'}`"
clearable
@ -259,7 +222,7 @@
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
<div class="col-xs-12 col-sm-2 col-md-2" v-if="announcementExam">
<datepicker
menu-class-name="modalfix"
v-model="dateAnnounce"
@ -279,7 +242,7 @@
<q-input
outlined
dense
class="full-width datepicker q-mb-md"
class="full-width datepicker "
:model-value="
dateAnnounce != null ? date2Thai(dateAnnounce) : null
"
@ -299,7 +262,45 @@
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="col-xs-12 col-sm-2 col-md-2" v-if="announcementExam">
<datepicker
menu-class-name="modalfix"
v-model="dateExam"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker "
:model-value="dateExam != null ? date2Thai(dateExam) : null"
:label="`${'วันที่สอบ'}`"
clearable
@clear="clearDateExam"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<selector
outlined
v-model="category"
@ -315,43 +316,41 @@
:rules="[(val:any) => !!val || `${'กรุณาเลือกสังกัด'}`]"
></selector>
</div>
<div class="col-12" v-if="announcementExam">
<div class="row q-col-gutter-x-sm">
<div class="col-xs-12 col-sm-6 col-md-6">
<selector
outlined
v-model="organizationShortName"
:options="governmentCodeOption"
label="รหัสส่วนราชการ"
clearable
option-value="id"
option-label="name"
dense
lazy-rules
:rules="[(val:any) => !!val || `${'กรุณาเลือกรหัสส่วนราชการ'}`]"
@update:model-value="(value:any) => selectGovernmentCode(value)"
></selector>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<selector
outlined
v-model="organizationName"
:options="organizationNameOptions"
label="หน่วยงาน"
clearable
option-value="id"
option-label="name"
dense
lazy-rules
:rules="[(val:any) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
@update:model-value="(value:any) => selectOrganization(value)"
></selector>
</div>
</div>
<div class="col-12 q-mb-sm">
<q-separator size="5px" color="grey-2" />
</div>
<q-form ref="myFormPosition">
<div class="col-xs-12 col-sm-4 col-md-2" v-if="announcementExam">
<selector
outlined
v-model="organizationShortName"
:options="governmentCodeOption"
label="รหัสส่วนราชการ"
clearable
option-value="id"
option-label="name"
dense
lazy-rules
:rules="[(val:any) => !!val || `${'กรุณาเลือกรหัสส่วนราชการ'}`]"
@update:model-value="(value:any) => selectGovernmentCode(value)"
></selector>
</div>
<div class="col-xs-12 col-sm-6 col-md-6" v-if="announcementExam">
<selector
outlined
v-model="organizationName"
:options="organizationNameOptions"
label="หน่วยงาน"
clearable
option-value="id"
option-label="name"
dense
lazy-rules
:rules="[(val:any) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
@update:model-value="(value:any) => selectOrganization(value)"
></selector>
</div>
<div class="col-12 q-mb-sm">
<q-separator size="5px" color="grey-2" />
</div>
<div class="col-12 row" v-if="announcementExam">
<q-form ref="myFormPosition" class="col-12">
<ProfileTable
:rows="rowsPosition"
:columns="columnsPosition"
@ -473,7 +472,7 @@
<div class="text-bold text-subtitle2 q-pb-md">
เลือกวีธีการชำระเงิน
</div>
<div class="row col-12 q-gutter-y-md q-mb-md">
<div class="row col-12 q-gutter-y-md ">
<q-list dense bordered class="col-12 rounded-borders">
<q-item tag="label" v-ripple class="q-pa-md">
<q-radio

18
src/modules/03_recruiting/views/02_qualify/manageDetail.vue
View file

@ -34,13 +34,13 @@
<q-slide-transition>
<q-card class="row col-12 q-mb-sm" v-show="visible">
<div class="col-12 row">
<div class="q-py-md row col-12 no-wrap">
<div class="q-pb-md q-pt-sm row col-12 no-wrap">
<!-- การ์ดแสดงจำนวนข้อมูล -->
<div class="col-12 row">
<div class="text-grey-7 row text-weight-medium col-12 q-pl-md">
สรุปจำนวนผู้สมัครคัดเลือก
<div class="col-12 row q-px-md ">
<div class="row items-center col-12 q-gutter-sm q-pb-sm">
<div class="text-weight-medium">สรุปจำนวนผู้สมัครคัดเลือก</div>
<datepicker
class="q-pl-sm"
class="col-xs-12 col-sm-5 col-md-4"
v-model="dateFilter"
:locale="'th'"
autoApply
@ -58,9 +58,9 @@
<q-input
class="full-width inputgreen cursor-pointer"
hide-bottom-space
outlined
dense
label="วันที่"
prefix="วันที่"
borderless
lazy-rules
:model-value="dateThaiRange(dateFilter)"
>
@ -75,8 +75,10 @@
</q-input>
</template>
</datepicker>
<q-space />
<q-btn
size="md"
dense
icon="mdi-download"
round
flat
@ -110,7 +112,7 @@
<q-tooltip>ดาวน์โหลดรายชื่อผู้สอบแข่งขันได้</q-tooltip>
</q-btn>
</div>
<div class="row col-12 q-col-gutter-md fit q-pa-md">
<div class="row col-12 q-col-gutter-md">
<div
style="width: 25%"
v-for="(num, index) in dataNum"

10
src/modules/04_registry/components/Profile.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="col-12 row">
<div class="row col-12" style="padding-top: 80px">
<div id="information" name="1" class="row col-12 information">
<div id="information" name="1" class="row col-12 information q-mt-sm">
<!-- <Informationvue
v-model:statusEdit="statusEdit"
:profileType="profileType"
@ -11,16 +11,16 @@
:fetchDataProfile="fetchData"
/>
</div>
<div id="government" name="16" class="row col-12 q-mt-md">
<div id="government" name="16" class="row col-12">
<Government v-model:statusEdit="statusEdit" />
</div>
<div id="address" name="17" class="row col-12 q-mt-md">
<div id="address" name="17" class="row col-12">
<Address v-model:statusEdit="statusEdit" />
</div>
<div id="family" name="18" class="row col-12 q-mt-md">
<div id="family" name="18" class="row col-12">
<Family v-model:statusEdit="statusEdit" />
</div>
<div id="certicate" name="15" class="row col-12 q-mt-md">
<div id="certicate" name="15" class="row col-12">
<Certicate v-model:statusEdit="statusEdit" :profileType="profileType" />
</div>
<div id="education" name="2" class="row col-12 q-mt-md">

396
src/modules/05_placement/components/Main.vue
View file

@ -1,13 +1,13 @@
<script setup lang="ts">
import { onMounted, reactive, ref, useAttrs } from 'vue';
import type { QTableProps } from 'quasar';
import { onMounted, reactive, ref, useAttrs } from "vue";
import type { QTableProps } from "quasar";
import type { FormPlacementMainData } from "@/modules/05_placement/interface/request/Main";
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
import { useCounterMixin } from "@/stores/mixin";
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 { dateText } = mixin;
@ -90,55 +90,60 @@ const columns = ref<QTableProps["columns"]>([
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
// ข้อมูลตาราง (จำลอง)
const rows = ref<FormPlacementMainData[]>([{
id: 1,
examRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
examOrder: 3,
fiscalYear: 2023,
numberofCandidates: 8,
examType: 1,
accountExpirationDate: "2023-02-28T14:47:04.1785384Z"
},
{
id: 2,
examRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
examOrder: 2,
fiscalYear: 2023,
numberofCandidates: 12,
examType: 1,
accountExpirationDate: "2023-02-28T14:47:04.1785384Z"
},
{
id: 3,
examRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
examOrder: 2,
fiscalYear: 2023,
numberofCandidates: 20,
examType: 1,
accountExpirationDate: "2023-01-31T14:47:04.1785384Z"
},
{
id: 4,
examRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
examOrder: 2,
fiscalYear: 2022,
numberofCandidates: 16,
examType: 2,
accountExpirationDate: "2023-11-30T14:47:04.1785384Z"
},
{
id: 5,
examRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
examOrder: 1,
fiscalYear: 2021,
numberofCandidates: 20,
examType: 2,
accountExpirationDate: "2024-05-21T14:47:04.1785384Z",
},
const rows = ref<FormPlacementMainData[]>([
{
id: 1,
examRound:
"การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
examOrder: 3,
fiscalYear: 2023,
numberofCandidates: 8,
examType: 1,
accountExpirationDate: "2023-02-28T14:47:04.1785384Z",
},
{
id: 2,
examRound:
"การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
examOrder: 2,
fiscalYear: 2023,
numberofCandidates: 12,
examType: 1,
accountExpirationDate: "2023-02-28T14:47:04.1785384Z",
},
{
id: 3,
examRound:
"การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
examOrder: 2,
fiscalYear: 2023,
numberofCandidates: 20,
examType: 1,
accountExpirationDate: "2023-01-31T14:47:04.1785384Z",
},
{
id: 4,
examRound:
"การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
examOrder: 2,
fiscalYear: 2022,
numberofCandidates: 16,
examType: 2,
accountExpirationDate: "2023-11-30T14:47:04.1785384Z",
},
{
id: 5,
examRound:
"การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
examOrder: 1,
fiscalYear: 2021,
numberofCandidates: 20,
examType: 2,
accountExpirationDate: "2024-05-21T14:47:04.1785384Z",
},
]);
let OriginalData = ref<FormPlacementMainData[]>([]);
@ -155,19 +160,19 @@ const OriginalDataFetch = async () => {
// })
// .finally(async () => {
// });
await DataStore.DataMain(rows.value)
OriginalData.value = await DataStore.DataMainOrig
UpdataData.value = OriginalData.value
}
await DataStore.DataMain(rows.value);
OriginalData.value = await DataStore.DataMainOrig;
UpdataData.value = OriginalData.value;
};
onMounted(async () => {
await OriginalDataFetch()
fiscalYearFilter()
examTimeFilter()
examTypeFilter()
await expiredAccountFilter()
searchFilterTable()
})
await OriginalDataFetch();
fiscalYearFilter();
examTimeFilter();
examTypeFilter();
await expiredAccountFilter();
searchFilterTable();
});
// ดูรายการสอบแข่งขัน หน้าต่อไป
const redirectToPage = (id?: number) => {
@ -177,7 +182,7 @@ const redirectToPage = (id?: number) => {
// เลือกปีงบประมาณ
const fiscalyear = ref<number | null>(0);
const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: 'ทั้งหมด' }]);
const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
const addedfiscalYearValues: number[] = [];
const fiscalYearFilter = async () => {
// API
@ -204,11 +209,11 @@ const fiscalYearFilter = async () => {
addedfiscalYearValues.push(year);
}
}
}
};
// เลือกปีงบประมาณตาม API
const searchfiscalyear = () => {
console.log('Input value changed:', fiscalyear.value);
console.log("Input value changed:", fiscalyear.value);
// API
// await http
// .get(config.API.// ตัวอย่าง)
@ -230,7 +235,15 @@ const resetFilter = () => {
};
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);
@ -242,7 +255,7 @@ const examTimeFilter = async () => {
}
}
examTimeOP.value.sort((a, b) => a - b); // เรียงลำดับ
}
};
// ประเภทการสอบ
const examType = ref<number | null>(0);
@ -259,12 +272,16 @@ const examTypeFilter = async () => {
addedexamTypeValues.push(2);
}
}
}
};
const searchFilterTable = async () => {
// console.log('Input value changed:', examTime.value, examType.value, expiredAccount.value);
await DataStore.DataUpdateMain(examTime.value, examType.value, expiredAccount.value);
UpdataData.value = DataStore.DataMainUpdate
await DataStore.DataUpdateMain(
examTime.value,
examType.value,
expiredAccount.value
);
UpdataData.value = DataStore.DataMainUpdate;
};
// บัญชีหมดอายุ
@ -273,7 +290,7 @@ const expiredAccountFilter = async () => {
const currentDate = new Date();
const updatedRows = OriginalData.value.map((data) => {
let expirationDate = new Date(data.accountExpirationDate);
let isExpired = expirationDate < currentDate
let isExpired = expirationDate < currentDate;
return { ...data, isExpired };
});
@ -281,81 +298,188 @@ const expiredAccountFilter = async () => {
};
const paging = ref<boolean>(true);
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;
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
};
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
รายการสอบแข่งขัน / คัดเลือก
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row q-col-gutter-md">
<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"
option-value="id" option-label="name" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
:outlined="true" :hide-dropdown-icon="false" @update:model-value="searchfiscalyear" />
<q-space />
<q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined debounce="300" placeholder="ค้นหา">
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
</template>
</q-input>
<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"
emit-value map-options :options="columns" option-value="name" options-cover />
</div>
<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 clearable 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 clearable 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">
<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>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row q-col-gutter-md">
<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
emit-value
map-options
:options="fiscalyearOP"
option-value="id"
option-label="name"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
@update:model-value="searchfiscalyear"
/>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<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"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
/>
</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>
<style lang="scss" scope>
@ -368,7 +492,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
font-weight: 400;
font-size: 15px;
line-height: 150%;
color: #35373C;
color: #35373c;
}
.icon-color {

26
src/modules/05_placement/components/OrderPlacement/step/step02.vue
View file

@ -20,9 +20,9 @@
class="q-ml-sm"
>
<template v-slot:append>
<q-icon v-if="inputfilter == ''" name="search" />
<q-icon v-if="filter == ''" name="search" />
<q-icon
v-if="inputfilter !== ''"
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
@ -62,13 +62,19 @@
v-model:pagination="pagination"
>
<template v-slot:header-selection="scope">
<q-checkbox keep-color color="primary" v-model="scope.selected" />
<q-checkbox
keep-color
color="primary"
dense
v-model="scope.selected"
/>
</template>
<template v-slot:body-selection="scope">
<q-checkbox
keep-color
color="primary"
dense
:model-value="scope.selected"
@update:model-value="
(val, evt) => {
@ -80,6 +86,7 @@
"
/>
</template>
<template v-slot:body-cell="props">
<q-td :props="props">
<div v-if="props.col.name == 'no'">
@ -96,7 +103,7 @@
:readonly="!true"
:borderless="!true"
v-model="props.value"
:rules="[(val:any) => !!val || `${'กรุณาเลือกเลือกวุฒิการศึกษา'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกเลือกวุฒิการศึกษา'}`]"
:rules="[(val:any) => !!val || `${'กรุณาเลือกวุฒิการศึกษา'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกวุฒิการศึกษา'}`]"
:label="`${'เลือกวุฒิการศึกษา'}`"
emit-value
map-options
@ -123,6 +130,17 @@
</div>
</q-td>
</template>
<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>
</q-table>
</div>
<q-separator />

561
src/modules/05_placement/components/OrderPlacement/step/step03.vue
View file

@ -1,19 +1,10 @@
<template>
<div>
<div class="q-pa-sm" style="max-height: 68vh; overflow-y: scroll">
<div class="col-12 row q-pb-sm items-center">
<q-btn
size="12px"
flat
round
color="add"
@click="clickAdd"
icon="mdi-plus"
>
<div class="q-pa-md" style="min-height: 70vh; overflow-y: scroll">
<div class="col-12 row q-py-sm items-center">
<q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
</q-btn>
<!-- การ์ดเพิ่มข้อมูล-->
<q-form ref="myForm"> </q-form>
<q-space />
<div class="items-center" style="display: flex">
<!-- ค้นหาข้อความใน table -->
@ -29,9 +20,9 @@
class="q-ml-sm"
>
<template v-slot:append>
<q-icon v-if="inputfilter == ''" name="search" />
<q-icon v-if="filter == ''" name="search" />
<q-icon
v-if="inputfilter !== ''"
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
@ -64,34 +55,50 @@
:visible-columns="visibleColumns"
:filter="filter"
row-key="name"
v-model:selected="selected"
class="custom-header-table"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:body-cell="props">
<q-td :props="props">
<div v-if="props.col.name == 'no'">
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="props.col.name == 'notification'">
</q-td>
<q-td key="idcard" :props="props">
{{ props.row.idcard }}
</q-td>
<q-td key="name" :props="props">
{{ props.row.name }}
</q-td>
<q-td key="position" :props="props">
{{ props.row.position }}
</q-td>
<q-td key="agency" :props="props">
{{ props.row.agency }}
</q-td>
<q-td key="send" :props="props">
<q-select
:class="getClass(true)"
hide-bottom-space
multiple
:outlined="true"
dense
use-chips
lazy-rules
:readonly="!true"
:borderless="!true"
v-model="props.value"
:rules="[(val:any) => !!val || `${'กรุณาเลือกช่องทาง'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกช่องทาง'}`]"
:label="`${'เลือกช่องทาง'}`"
v-model="filter"
:rules="[(val:any) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`]"
:label="`${'เลือกช่องทางการส่งสำเนา'}`"
emit-value
map-options
option-label="name"
:options="notificationOption"
:options="optionSelect"
option-value="id"
input-debounce="0"
color="primary"
@ -104,17 +111,26 @@
</q-item>
</template>
</q-select>
</div>
<div v-else @click="click(props)">
{{ props.value }}
</div>
</q-td>
</q-td>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
color="red"
@click="clickDelete(props.row.id)"
icon="mdi-delete"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
color="primary"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
@ -126,14 +142,15 @@
</div>
<q-separator />
<div class="flex justify-end q-pa-sm q-gutter-sm">
<q-btn
dense
outline
color="primary"
icon="chevron_left"
@click="previous"
<q-btn
dense
outline
color="primary"
icon="chevron_left"
@click="previous"
class="q-pr-md"
label="เลือกรายชื่อ">
label="เลือกรายชื่อ"
>
</q-btn>
<q-btn
dense
@ -142,7 +159,7 @@
color="public"
@click="next"
class="q-px-md"
><!-- icon="mdi-content-save-outline"
><!-- icon="mdi-content-save-outline"
<q-tooltip>บันทึก</q-tooltip> -->
</q-btn>
<!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
@ -150,12 +167,176 @@
</q-btn> -->
</div>
</div>
<q-dialog v-model="modal" persistent full-width>
<q-card>
<q-form ref="myForm">
<DialogHeader tittle="เลือกรายชื่อตามหน่วยงาน" :close="clickClose" />
<q-separator />
<q-card-section class="q-pa-sm bg-grey-1">
<div class="row col-12 q-col-gutter-sm">
<div class="col-xs-12 col-sm-5 row">
<q-card flat bordered class="fit q-pa-sm">
<q-scroll-area visible style="height: 70vh">
<q-input
outlined
dense
v-model="search"
placeholder="ค้นหา"
class="q-mb-sm"
>
<template v-slot:append>
<q-icon name="mdi-magnify" />
</template>
</q-input>
<q-tree
:nodes="nodesTree"
dense
node-key="id"
v-model:selected="selected"
v-model:expanded="expanded"
no-selection-unset
selected-color="primary"
@update:selected="onSelected"
default-expand-all
/>
</q-scroll-area>
</q-card>
</div>
<div class="col-xs-12 col-sm-7">
<div class="col-12 row q-py-sm items-center">
<q-space />
<div class="items-center" style="display: flex">
<q-input
standout
dense
v-model="filterModal"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
style="max-width: 200px"
class="q-ml-sm"
>
<template v-slot:append>
<q-icon v-if="filterModal == ''" name="search" />
<q-icon
v-if="filterModal !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumnsModal"
:display-value="$q.lang.table.columns"
multiple
outlined
dense
:options="columnsModal"
options-dense
option-value="name"
map-options
emit-value
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</div>
</div>
<q-table
flat
bordered
dense
:rows="rowsModal"
:columns="columnsModal"
:visible-columns="visibleColumnsModal"
:filter="filterModal"
row-key="name"
selection="multiple"
v-model:selected="selectedModal"
class="custom-header-table"
:pagination-label="paginationLabel"
v-model:pagination="paginationModal"
>
<template v-slot:header-selection="scope">
<q-checkbox
keep-color
color="primary"
dense
v-model="scope.selected"
/>
</template>
<template v-slot:body-selection="scope">
<q-checkbox
keep-color
color="primary"
dense
:model-value="scope.selected"
@update:model-value="
(val, evt) => {
Object.getOwnPropertyDescriptor(scope, 'selected').set(
val,
evt
);
}
"
/>
</template>
<template v-slot:body-cell="props">
<q-td :props="props">
<div v-if="props.col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else>
{{ props.value }}
</div>
</q-td>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="paginationModal.page"
color="primary"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn
flat
round
color="public"
icon="mdi-content-save-outline"
@click="next"
>
<q-tooltip>บันทึก</q-tooltip>
</q-btn>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { useQuasar, QInput, QForm } from "quasar";
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
import router from "@/router";
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
import type { QInput, QForm } from "quasar";
import type { treeTab } from "@/modules/05_placement/interface/index/Main.ts";
import http from "@/plugins/http";
import config from "@/app.config";
const props = defineProps({
next: {
@ -172,16 +353,133 @@ const next = () => props.next();
const previous = () => props.previous();
const $q = useQuasar();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { dialogMessage, messageError, showLoader, hideLoader } = mixin;
const myForm = ref<QForm>();
const filterRef = ref<QInput>();
const filter = ref<string>("");
const modal = ref<boolean>(false);
const search = ref<string>("");
const expanded = ref<string[]>([]);
const selected = ref<string>("");
const nodesTree = ref<treeTab[]>([]);
const selectedModal = ref([]);
const filterModal = ref<string>("");
const visibleColumnsModal = ref<String[]>(["no", "idcard", "name"]);
const columnsModal = [
{ name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
{
name: "idcard",
align: "left",
label: "เลขประจำตัวประชาชน",
field: "idcard",
sortable: true,
},
{
name: "name",
align: "left",
label: "ชื่อ-สกุล",
field: "name",
sortable: true,
},
];
const rowsModal = [
{
no: "0ac56905-1a74-4606-a120-233340adde95",
name: "นางนัทธ์ เหล่าสกุล",
idcard: "9158455632145",
educate: "",
},
{
no: "0de607a0-b094-4a6d-9e30-979343ab5e53",
name: "นางขรรค์ จันทรสมบัติ",
idcard: "8558455632126",
educate: "",
},
{
no: "93ca7366-2a35-4f94-a331-9c23c9ea78d3",
name: "นางโอภาส จรัสวงศ์",
idcard: "8158455635425",
educate: "",
},
{
no: "d3777c19-2bd0-42df-90ce-c3eeeee55ac6",
name: "นางธิญา หงษ์ทอง",
idcard: "4558455632145",
educate: "",
},
{
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
name: "นางธนวิทย์ พิกุลเทพ",
idcard: "5542455632145",
educate: "",
},
{
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
name: "นางหนึ่ง สตาภิรมย์",
idcard: "7448455632145",
educate: "",
},
{
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
name: "นางสัจพร คมคาย",
idcard: "1236455632145",
educate: "",
},
{
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
name: "นางตุลยากร ปรีดาศิริกุล",
idcard: "1523455632145",
educate: "",
},
{
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
name: "นางบัลลังค์ จิรวาณิชย์",
idcard: "1258455632145",
educate: "",
},
{
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
name: "นางคมคาย เรืองรังสรรค์",
idcard: "8548455632145",
educate: "",
},
{
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
name: "นางพรทิพา คมคาย",
idcard: "6598455632145",
educate: "",
},
];
const paginationModal = ref({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
});
const pagination = ref({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
});
const optionSelect = ref<any>([
{ id: 1, name: "อีเมล" },
{ id: 2, name: "แจ้งเตือน" },
]);
const visibleColumns = ref<String[]>([
"no",
"idcard",
"name",
"position",
"department",
"notification",
"agency",
"send",
]);
const columns = [
{ name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
@ -207,17 +505,17 @@ const columns = [
sortable: true,
},
{
name: "department",
name: "agency",
align: "left",
label: "หน่วยงาน",
field: "department",
field: "agency",
sortable: true,
},
{
name: "notification",
name: "send",
align: "left",
label: "ช่องทางการส่งสำเนา",
field: "notification",
field: "send",
sortable: true,
},
];
@ -227,120 +525,101 @@ const rows = [
no: "0ac56905-1a74-4606-a120-233340adde95",
name: "นางนัทธ์ เหล่าสกุล",
idcard: "9158455632145",
send: "",
position: "ผู้อำนวยการ",
department: "กลุ่มงานช่วยบริหาร",
notification: "Email ",
agency: "กลุ่มงานช่วยบริหาร",
},
{
no: "0de607a0-b094-4a6d-9e30-979343ab5e53",
name: "นางขรรค์ จันทรสมบัติ",
idcard: "8558455632126",
position: "ผู้อำนวยการ",
department: "กลุ่มงานช่วยบริหาร",
notification: "Inbox",
send: "",
position: "นักจัดการทั่วไป",
agency: "กลุ่มงานช่วยบริหาร",
},
{
no: "93ca7366-2a35-4f94-a331-9c23c9ea78d3",
name: "นางโอภาส จรัสวงศ์",
idcard: "8158455635425",
position: "ผู้อำนวยการ",
department: "กลุ่มงานช่วยบริหาร",
notification: "Notification",
send: "",
position: "นักจัดการทั่วไป",
agency: "กลุ่มงานช่วยบริหาร",
},
{
no: "d3777c19-2bd0-42df-90ce-c3eeeee55ac6",
name: "นางธิญา หงษ์ทอง",
idcard: "4558455632145",
position: "ผู้อำนวยการ",
department: "กลุ่มงานช่วยบริหาร",
notification: "Notification",
send: "",
position: "นักจัดการทั่วไป",
agency: "กลุ่มงานช่วยบริหาร",
},
{
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
name: "นางธนวิทย์ พิกุลเทพ",
idcard: "5542455632145",
position: "ผู้อำนวยการ",
department: "กลุ่มงานช่วยบริหาร",
notification: "Inbox ",
send: "",
position: "นักจัดการทั่วไป",
agency: "กลุ่มงานช่วยบริหาร",
},
{
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
name: "นางหนึ่ง สตาภิรมย์",
idcard: "7448455632145",
position: "ผู้อำนวยการ",
department: "กลุ่มงานช่วยบริหาร",
notification: "Inbox ",
send: "",
position: "นิติกร",
agency: "กลุ่มงานนิติกร",
},
{
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
name: "นางสัจพร คมคาย",
idcard: "1236455632145",
position: "ผู้อำนวยการ",
department: "กลุ่มงานช่วยบริหาร",
notification: "Inbox ",
send: "",
position: "นิติกร",
agency: "กลุ่มงานนิติกร",
},
{
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
name: "นางตุลยากร ปรีดาศิริกุล",
idcard: "1523455632145",
position: "ผู้อำนวยการ",
department: "กลุ่มงานช่วยบริหาร",
notification: "Inbox ",
send: "",
position: "นิติกร",
agency: "กลุ่มงานนิติกร",
},
{
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
name: "นางบัลลังค์ จิรวาณิชย์",
idcard: "1258455632145",
position: "ผู้อำนวยการ",
department: "กลุ่มงานช่วยบริหาร",
notification: "Inbox ",
send: "",
position: "นิติกร",
agency: "กลุ่มงานนิติกร",
},
{
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
name: "นางคมคาย เรืองรังสรรค์",
idcard: "8548455632145",
position: "ผู้อำนวยการ",
department: "กลุ่มงานช่วยบริหาร",
notification: "Inbox ",
send: "",
position: "นิติกร",
agency: "กลุ่มงานนิติกร",
},
{
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
name: "นางพรทิพา คมคาย",
idcard: "6598455632145",
position: "ผู้อำนวยการ",
department: "กลุ่มงานช่วยบริหาร",
notification: "Inbox ",
send: "",
position: "นิติกร",
agency: "กลุ่มงานนิติกร",
},
];
// const clickAdd = () => {
// router.push({ name: "OrderplacementDetail" });
// };
const selected = ref([]);
const pagination = ref({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
onMounted(async () => {
await nodeTree();
});
const notificationOption = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
const click = (e: any) => {
console.log(e);
};
const myForm = ref<QForm | null>(null);
const clickAdd = async () => {
await myForm.value!.validate().then(async (result: boolean) => {
// console.log(result);
});
};
const selectData = (row: any) => {};
const paging = ref<boolean>(true);
const paginationLabel = (start: string, end: string, total: string) => {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
// if (props.paging == true)
// return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
// else
return start + "-" + end + " ใน " + total;
};
const resetFilter = () => {
@ -355,12 +634,74 @@ const getClass = (val: boolean) => {
"full-width cursor-pointer": !val,
};
};
const clickClose = async () => {
// if (editRow.value == true) {
// dialogMessage(
// $q,
// "ข้อมูลมีการแก้ไข",
// "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?",
// "mdi-help-circle-outline",
// "ตกลง",
// "orange",
// () => (modal.value = false),
// undefined
// );
// } else {
modal.value = false;
// next.value = false;
// previous.value = false;
// }
};
const clickAdd = () => {
modal.value = true;
};
const clickDelete = (id: string) => {
dialogMessage(
$q,
"ยืนยันการลบข้อมูล",
"ต้องการลบข้อมูลนี้ใช่หรือไม่?",
"mdi-help-circle-outline",
"ตกลง",
"red",
() => deleteData(id),
undefined
);
};
const nodeTree = async () => {
showLoader();
await http
.get(config.API.profileOrganizRoot)
.then((res: any) => {
const data = res.data.result;
nodesTree.value = data;
if (data.length > 0) {
expanded.value = [data[0].id];
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const onSelected = async (id: string) => {
// await fetchPositionNumber(id);
};
const deleteData = async (id: string) => {};
</script>
<style lang="scss">
.icon-color {
color: #4154b3;
}
.custom-header-table {
max-height: 64vh;
.q-table tr:nth-child(odd) td {
background: white;
}

5
src/modules/05_placement/components/OrderPlacement/step/step04.vue
View file

@ -51,7 +51,10 @@
</q-btn>
</div>
</div>
<div class="card-pdf q-ma-md q-pa-md">asd</div>
<div class="card-pdf q-ma-md q-pa-md" v-if="tab == 'main'">
คำสั่ง
</div>
<div class="card-pdf q-ma-md q-pa-md" v-else>เอกสารแนบท้าย</div>
</template>
<template v-slot:separator>

85
src/modules/05_placement/components/pass/Detail.vue
View file

@ -1,81 +1,51 @@
<script setup lang="ts">
import { reactive, ref } from "vue";
import { useQuasar } from "quasar";
import { ref } from "vue";
import { defineAsyncComponent } from "@vue/runtime-core";
import { useRouter } from "vue-router";
const $q = useQuasar();
import cardTop from "@/modules/05_placement/components/pass/StatCard.vue";
const router = useRouter();
const year = ref<string>("2566");
const round = ref<string>("1");
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(
() => import("@/modules/05_placement/components/pass/Table.vue")
);
const stat = ref<any>({
total: 5,
unContain: 1,
prepareContain: 3,
contain: 1,
disclaim: 0,
});
</script>
<template>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row">
<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 }}
</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="fit q-px-md q-py-sm">
<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' : ''">
<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: item.color }">
{{ item.num }}
</div>
<div class="col-12 text-dark ellipsis">
{{ item.title }}
</div>
</div>
</div>
</div>
</div>
<cardTop :amount="stat.total" label="จำนวนทั้งหมด" color="#016987" />
<cardTop :amount="stat.unContain" label="จำนวนที่ยังไม่บรรจุ" color="#02A998" />
<cardTop :amount="stat.prepareContain" label="จำนวนที่เตรียมบรรจุ" color="#2EA0FF" />
<cardTop :amount="stat.contain" label="จำนวนที่บรรจุแล้ว" color="#4154B3" />
<cardTop :amount="stat.disclaim" label="จำนวนที่สละสิทธิ์" color="#FF5C5F" />
</div>
</div>
</div>
</q-card>
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
@ -88,7 +58,6 @@ const AddTablePosition = defineAsyncComponent(
<style lang="scss">
.cardNum {
border-radius: 5px;
/* border-left: 3px solid #016987 !important; */
padding-left: 8px;
}
</style>

43
src/modules/05_placement/components/pass/StatCard.vue Normal file
View 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>

1568
src/modules/05_placement/components/pass/Table.vue
View file

File diff suppressed because it is too large Load diff

568
src/modules/05_placement/components/pass/TableDetail.vue
View file

@ -1,309 +1,377 @@
<script setup lang="ts">
import { ref } from "vue";
import { ref, computed } from "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 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 props = defineProps({
Modal: Boolean,
close: {
type: Function,
default: () => console.log("not function"),
},
getdetail: {
type: Object,
required: true
}
Modal: Boolean,
close: {
type: Function,
default: () => console.log("not function"),
},
getdetail: {
type: Object,
required: true,
},
validate: {
type: Function,
default: () => console.log("not function"),
},
});
const selection = ref([]);
const myForm = ref<any>();
const checkValidate = ref<boolean>(false);
const selection = ref<number[]>([]);
const checkboxItems: CheckboxItem[] = [
{ id: 1, label: 'ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง' },
{ id: 2, label: 'ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.' },
{ id: 3, 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: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' },
{ id: 1, label: "ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง" },
{
id: 2,
label:
"ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.",
},
{
id: 3,
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 () => {
console.log(selection.value)
return (
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>
<template>
<q-dialog v-model="props.Modal">
<q-card style="max-width: 100%;width:80%;">
<q-form ref="myForm">
<div class="row">
<DialogHeader :title="`รายละเอียดของ ${props.getdetail.fullName}`" :close="close" />
</div>
<q-separator />
<q-dialog v-model="props.Modal">
<q-card style="max-width: 100%; width: 80%">
<q-form ref="myForm">
<div class="row">
<DialogHeader
:title="`รายละเอียดของ ${props.getdetail.fullName}`"
@click="close"
/>
</div>
<q-separator />
<div class="contanier-box-main">
<div class="contanier-box-mini">
<q-card bordered class="card-panding">
<div class="row items-center q-pa-xs header-text">
ข้อมูลทั่วไป <span class="check-officer"><q-icon name="mdi-check" />
ข้าราชการฯ กทม</span>
</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.profileID }}
</div>
<div class="q-pb-md">
{{ props.getdetail.dateOfBirth }}
</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.fullName }}
</div>
<div class="q-pb-md">
{{ props.getdetail.gender }}
</div>
</div>
</div>
</q-card>
<div class="contanier-box-main">
<div class="contanier-box-mini">
<q-card bordered class="card-panding">
<div class="row items-center q-pa-xs header-text">
ข้อมูลทั่วไป
<span class="check-officer"
><q-icon name="mdi-check" /> ข้าราชการฯ กทม</span
>
</div>
<div class="row q-pa-xs">
<div class="col-3 header-sub-text">
<div class="q-pb-md">เลขที่ประจำตัวประชาชน</div>
<div>วัน/เดือน/ปีเกิด</div>
</div>
<div class="col-4 sub-text">
<div class="q-pb-md">
{{ props.getdetail.profileID }}
</div>
<div>
{{ props.getdetail.dateOfBirth }}
</div>
</div>
<div class="col-2 header-sub-text">
<div class="q-pb-md">ชื่อ-นามสกุล</div>
<div>เพศ</div>
</div>
<div class="col-3 sub-text">
<div class="q-pb-md">
{{ props.getdetail.fullName }}
</div>
<div>
{{ props.getdetail.gender }}
</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-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>สาขาวิชาเอก</div>
</div>
<div class="col-4 sub-text">
<div class="q-pb-md">
{{ props.getdetail.university }}
</div>
<div>
{{ props.getdetail.major }}
</div>
</div>
<div class="col-2 header-sub-text">
<div class="q-pb-md">วุฒิการศึกษา</div>
<div>อื่นๆ</div>
</div>
<div class="col-3 sub-text">
<div class="q-pb-md">
{{ props.getdetail.degree ? props.getdetail.degree : "-" }}
</div>
<div>
{{ 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 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>
<div class="col-9 sub-text">
{{ props.getdetail.address }}
</div>
</div>
</q-card>
</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="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>
</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 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 class="contanier-box-mini">
<q-card bordered class="card-panding">
<div class="col-12 row items-center q-pa-sm header-text">
การคัดกรองคุณสมบัติ
</div>
<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
color="teal" class="checkbox-group" />
<q-separator />
</div>
</q-card>
</div>
</div>
<div class="contanier-box-mini">
<q-card bordered class="card-panding">
<div class="col-12 row items-center q-pa-sm header-text">
การคัดกรองคุณสมบัติ
</div>
<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
color="teal"
:rules="[isRequired]"
class="checkbox-group"
/>
<q-separator />
<div>
<DialogFooter :save="clickSave" v-model:editvisible="save" />
</div>
</q-form>
</q-card>
</q-dialog>
</div>
</q-card>
</div>
</div>
<q-separator />
<div>
<DialogFooter
@click="ClickSave"
:model="props.Modal"
:editvisible="save"
:validate="validateData"
/>
</div>
</q-form>
</q-card>
</q-dialog>
</template>
<style lang="scss" scoped>
.icon-officer {
color: #00AA86;
padding-left: 20px;
color: #00aa86;
padding-left: 20px;
}
.check-officer {
font-size: 17px;
font-weight: 500;
line-height: 26px;
color: #00AA86;
padding-left: 20px;
font-size: 17px;
font-weight: 500;
line-height: 26px;
color: #00aa86;
padding-left: 20px;
}
.contanier-box-main {
padding: 10px 21px 10px 21px;
padding: 10px 21px 10px 21px;
}
.contanier-box-mini {
padding: 10px 0px 10px 0px;
padding: 10px 0px 10px 0px;
}
.card-panding {
padding: 15px 21px 15px 21px;
padding: 15px 21px 15px 21px;
}
.header-text {
font-size: 18px;
font-weight: 600;
color: #4F4F4F;
font-size: 18px;
font-weight: 600;
color: #4f4f4f;
}
.header-sub-text {
font-size: 16px;
font-weight: 400;
line-height: 150%;
color: #818181;
font-size: 16px;
font-weight: 400;
line-height: 150%;
color: #818181;
}
.sub-text {
font-weight: 400;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.0025em;
color: #35373C;
font-weight: 400;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.0025em;
color: #35373c;
}
.card-exam {
border-radius: 5px;
background: #FAFAFA;
border-radius: 5px;
background: #fafafa;
}
.header-sub-text-exam {
font-size: 15px;
font-weight: 500;
line-height: 150%;
color: #818181;
font-size: 15px;
font-weight: 500;
line-height: 150%;
color: #818181;
}
.header-sub-text-exam-2 {
font-size: 15px;
font-weight: 500;
line-height: 150%;
color: #00AA86;
font-size: 15px;
font-weight: 500;
line-height: 150%;
color: #00aa86;
}
.sub-text-exam {
font-size: 15px;
font-weight: 500;
color: #000000;
font-size: 15px;
font-weight: 500;
color: #000000;
}
.checkbox-group {
font-size: 16px;
font-weight: 400;
color: #35373C;
font-size: 16px;
font-weight: 400;
color: #35373c;
}
</style>
</style>

35
src/modules/05_placement/components/pass/TableView.vue
View file

@ -1,6 +1,6 @@
<template>
<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 />
<div class="items-center" style="display: flex">
<div
@ -115,9 +115,19 @@
:virtual-scroll-sticky-size-start="48"
dense
:pagination-label="paginationLabel"
:pagination="initialPagination"
:rows-per-page-options="[0]"
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:header="props">
<q-tr :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 { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
const $q = useQuasar();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { dialogMessage } = mixin;
const editvisible = ref<boolean>(false);
const attrs = ref<any>(useAttrs());
const paging = ref<boolean>(true);
const table = ref<any>(null);
const filterRef = ref<any>(null);
const modalPublish = ref<boolean>(false);
@ -231,7 +241,16 @@ const props = defineProps({
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 initialPagination = ref<any>({
// descending: false,
@ -259,12 +278,6 @@ const updateVisibleFilter = (value: any) => {
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 = () => {
props.validate();
props.save();