re-structure folder & route ในส่วนของบรรจุ

This commit is contained in:
Warunee Tamkoo 2023-06-28 11:15:22 +07:00
parent c05505071f
commit 1295a7f7fb
18 changed files with 66 additions and 497 deletions

View file

@ -2,22 +2,25 @@
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { useDataStore } from "@/stores/data";
import { useRouter } from "vue-router";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
import Informationvue from "@/modules/05_placement/components/exams_other/Information/layout.vue";
import EducationVue from "@/modules/05_placement/components/exams_other/Education.vue";
import Certicate from "@/modules/05_placement/components/exams_other/Information/Certicate.vue";
import InsigniaVue from "@/modules/05_placement/components/exams_other/Insignia.vue";
import ExamResult from "@/modules/05_placement/components/exams_other/ExamResult.vue";
import Qualification from "@/modules/05_placement/components/exams_other/Qualification.vue";
import Informationvue from "@/modules/05_placement/components/PersonalDetail/Information/layout.vue";
import EducationVue from "@/modules/05_placement/components/PersonalDetail/Education.vue";
import Certicate from "@/modules/05_placement/components/PersonalDetail/Information/Certicate.vue";
import InsigniaVue from "@/modules/05_placement/components/PersonalDetail/Insignia.vue";
import ExamResult from "@/modules/05_placement/components/PersonalDetail/ExamResult.vue";
import Qualification from "@/modules/05_placement/components/PersonalDetail/Qualification.vue";
const store = useDataStore();
const { changeTab } = store;
const statusEdit = ref<boolean>(false);
const profileType = ref<string>("");
const route = useRoute();
const examId = ref<string>(route.params.personalId.toString());
const FormData = reactive<any>({
fullName: "นาย กอ กอกอก",
fullName: examId,
});
onMounted(async () => {

View file

@ -4,9 +4,9 @@ import { useRoute } from "vue-router";
import { useProfileDataStore } from "@/modules/05_placement/store";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import ProfileTable from "@/modules/05_placement/components/exams_other/Table.vue";
import DialogHeader from "@/modules/05_placement/components/exams_other/DialogHeader.vue";
import DialogFooter from "@/modules/05_placement/components/exams_other/DialogFooter.vue";
import ProfileTable from "@/modules/05_placement/components/PersonalDetail/Table.vue";
import DialogHeader from "@/modules/05_placement/components/PersonalDetail/DialogHeader.vue";
import DialogFooter from "@/modules/05_placement/components/PersonalDetail/DialogFooter.vue";
import { useQuasar } from "quasar";
import type {
RequestItemsObject,

View file

@ -10,9 +10,9 @@ import type {
Address,
DataOption,
zipCodeOption,
} from "@/modules/05_placement/components/exams_other/profileType";
import { defaultAddress } from "@/modules/05_placement/components/exams_other/profileType";
import HeaderTop from "@/modules/05_placement/components/exams_other/Information/top.vue";
} from "@/modules/05_placement/components/PersonalDetail/profileType";
import { defaultAddress } from "@/modules/05_placement/components/PersonalDetail/profileType";
import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
import type { RequestItemsHistoryObject } from "@/modules//05_placement/interface/request/Address";
import type { ResponseObject } from "@/modules//05_placement/interface/response/Address";
import HistoryTable from "@/components/TableHistory.vue";

View file

@ -5,9 +5,9 @@ import { useRoute } from "vue-router";
import { useProfileDataStore } from "@/modules/05_placement/store";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import ProfileTable from "@/modules/05_placement/components/exams_other/Table.vue";
import DialogHeader from "@/modules/05_placement/components/exams_other/DialogHeader.vue";
import DialogFooter from "@/modules/05_placement/components/exams_other/DialogFooter.vue";
import ProfileTable from "@/modules/05_placement/components/PersonalDetail/Table.vue";
import DialogHeader from "@/modules/05_placement/components/PersonalDetail/DialogHeader.vue";
import DialogFooter from "@/modules/05_placement/components/PersonalDetail/DialogFooter.vue";
import { useQuasar } from "quasar";
import type {
RequestItemsObject,

View file

@ -7,15 +7,15 @@ import { useQuasar } from "quasar";
import type {
Information,
DataOption,
} from "@/modules/05_placement/components/exams_other/profileType";
import { defaultInformation } from "@/modules/05_placement/components/exams_other/profileType";
} from "@/modules/05_placement/components/PersonalDetail/profileType";
import { defaultInformation } from "@/modules/05_placement/components/PersonalDetail/profileType";
import type {
RequestItemsHistoryObject,
Columns,
} from "@/modules/05_placement/interface/request/Information";
import type { ResponseObject } from "@/modules/05_placement/interface/response/Information";
import type { InformationOps } from "@/modules/05_placement/interface/index/Main";
import HeaderTop from "@/modules/05_placement/components/exams_other/Information/top.vue";
import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
import HistoryTable from "@/components/TableHistory.vue";
import http from "@/plugins/http";
import config from "@/app.config";

View file

@ -1,8 +1,8 @@
<!-- card รวม อมลสวนต อย -->
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import Information from "@/modules/05_placement/components/exams_other/Information/Information.vue";
import Address from "@/modules/05_placement/components/exams_other/Information/Address.vue";
import Information from "@/modules/05_placement/components/PersonalDetail/Information/Information.vue";
import Address from "@/modules/05_placement/components/PersonalDetail/Information/Address.vue";
import { useCounterMixin } from "@/stores/mixin";
const props = defineProps({

View file

@ -4,9 +4,9 @@ import { useRoute } from "vue-router";
import { useProfileDataStore } from "@/modules/05_placement/store";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import ProfileTable from "@/modules/05_placement/components/exams_other/Table.vue";
import DialogHeader from "@/modules/05_placement/components/exams_other/DialogHeader.vue";
import DialogFooter from "@/modules/05_placement/components/exams_other/DialogFooter.vue";
import ProfileTable from "@/modules/05_placement/components/PersonalDetail/Table.vue";
import DialogHeader from "@/modules/05_placement/components/PersonalDetail/DialogHeader.vue";
import DialogFooter from "@/modules/05_placement/components/PersonalDetail/DialogFooter.vue";
import { useQuasar } from "quasar";
import type {
RequestItemsObject,

View file

@ -4,7 +4,7 @@ import type { CheckboxItem } from "@/modules/05_placement/interface/index/Main";
import type { QForm } from 'quasar';
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import HeaderTop from "@/modules/05_placement/components/exams_other/Information/top.vue";
import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
const $q = useQuasar();
const mixin = useCounterMixin();
const {

View file

@ -1,6 +1,6 @@
<script setup lang="ts">
import { ref, useAttrs } from "vue";
import HeaderTop from "@/modules/05_placement/components/exams_other/Information/top.vue";
import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
import type { Pagination } from "@/modules/05_placement/interface/index/Main";
const attrs = ref<any>(useAttrs());

View file

@ -1,421 +0,0 @@
<script setup lang="ts">
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';
const DataStore = usePlacementDataStore()
const mixin = useCounterMixin();
const { dateText } = mixin;
// . .
const textDate = (value: Date) => {
return dateText(value);
};
//
const columns = ref<QTableProps["columns"]>([
{
name: "id",
align: "left",
label: "ลำดับ",
sortable: true,
field: "id",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "examRound",
align: "left",
label: "รอบการสอบ",
sortable: true,
field: "examRound",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "examOrder",
align: "left",
label: "ครั้งที่",
sortable: true,
field: "examOrder",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fiscalYear",
align: "left",
label: "ปีงบประมาณ",
sortable: true,
field: "fiscalYear",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "numberofCandidates",
align: "left",
label: "จำนวนผู้สอบได้",
sortable: false,
field: "numberofCandidates",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "examType",
align: "left",
label: "ประเภทการสอบ",
sortable: false,
field: "examType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "accountExpirationDate",
align: "left",
label: "วันที่บัญชีหมดอายุ",
sortable: true,
field: "accountExpirationDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
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",
},
]);
let OriginalData = ref<FormPlacementMainData[]>([]);
let UpdataData = ref<FormPlacementMainData[]>([]);
const OriginalDataFetch = async () => {
// API
// await http
// .get(config.API.// )
// .then((res: any) => {
// })
// .catch((e: any) => {
// messageError($q, e);
// })
// .finally(async () => {
// });
await DataStore.DataMain(rows.value)
OriginalData.value = await DataStore.DataMainOrig
UpdataData.value = OriginalData.value
}
onMounted(async () => {
await OriginalDataFetch()
fiscalYearFilter()
examTimeFilter()
examTypeFilter()
await expiredAccountFilter()
searchFilterTable()
})
//
const redirectToPage = (id?: number) => {
router.push(`/placement2/detail`);
};
//
const fiscalyear = ref<number | null>(0);
const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: 'ทั้งหมด' }]);
const addedfiscalYearValues: number[] = [];
const fiscalYearFilter = async () => {
// API
// await http
// .get(config.API.// )
// .then((res: any) => {
// DataStore.DataMainYearSet(rows.value);
// fiscalyearOP.value = DataStore.DataMainYearGet;
// })
// .catch((e: any) => {
// messageError($q, e);
// })
// .finally(async () => {
// });
for (let data of OriginalData.value) {
const year = data.fiscalYear + 543;
if (fiscalyear.value === null || year > fiscalyear.value) {
fiscalyear.value = year;
}
if (!addedfiscalYearValues.includes(year)) {
fiscalyearOP.push({ id: year, name: year.toString() });
addedfiscalYearValues.push(year);
}
}
}
// API
const searchfiscalyear = () => {
console.log('Input value changed:', fiscalyear.value);
// API
// await http
// .get(config.API.// )
// .then((res: any) => {
// })
// .catch((e: any) => {
// messageError($q, e);
// })
// .finally(async () => {
// });
};
//
const filterKeyword = ref<string>("");
const filterRef = ref<any>(null);
const resetFilter = () => {
filterKeyword.value = "";
filterRef.value.focus();
};
const attrs = ref<any>(useAttrs());
const visibleColumns = ref<string[]>(['id', 'examRound', 'examOrder', 'fiscalYear', 'numberofCandidates', 'examType', 'accountExpirationDate']) //
//
const examTime = ref<number | null>(null);
const examTimeOP = ref<number[]>([]);
const examTimeFilter = async () => {
for (let data of OriginalData.value) {
if (!examTimeOP.value.includes(data.examOrder)) {
examTimeOP.value.push(data.examOrder);
}
}
examTimeOP.value.sort((a, b) => a - b); //
}
//
const examType = ref<number | null>(0);
const examTypeOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
const addedexamTypeValues: number[] = [];
const examTypeFilter = async () => {
for (let data of OriginalData.value) {
const examTypeValue = data.examType;
if (examTypeValue == 1 && !addedexamTypeValues.includes(1)) {
examTypeOP.push({ id: 1, name: "คัดเลือก" });
addedexamTypeValues.push(1);
} else if (examTypeValue == 2 && !addedexamTypeValues.includes(2)) {
examTypeOP.push({ id: 2, name: "สอบแข่งขัน" });
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
};
//
const expiredAccount = ref<boolean>(false);
const expiredAccountFilter = async () => {
const currentDate = new Date();
const updatedRows = OriginalData.value.map((data) => {
let expirationDate = new Date(data.accountExpirationDate);
let isExpired = expirationDate < currentDate
return { ...data, isExpired };
});
await DataStore.DataMain(updatedRows);
};
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;
};
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
รายการสอบแขงข / ดเลอก
</div>
<div>
<q-card flat bordered class="col-12 q-mt-sm">
<div class="row q-pa-md">
<div class="col-xs-12 col-sm-3 col-md-2">
<q-select 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" />
</div>
<div class="col-xs-12 col-sm-3 col-md-6"></div>
<div class="col-xs-12 col-sm-3 col-md-2">
<q-input standout dense v-model="filterKeyword" ref="filterRef" outlined debounce="300" placeholder="ค้นหา"
class="q-ml-sm">
<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>
</div>
<div class="col-xs-12 col-sm-3 col-md-2">
<q-select 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 style="min-width: 150px"
class="gt-xs q-ml-sm" />
</div>
</div>
<div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
<q-card bordered class="col-12 filter-card">
<div class="row q-pa-sm">
<div class="col-xs-12 col-sm-3 col-md-2 q-pl-sm">
<q-select 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" />
</div>
<div class="col-xs-12 col-sm-3 col-md-2 q-pl-sm">
<q-select 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" />
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<q-toggle v-model="expiredAccount" class="toggle-expired-account" color="blue" label="แสดงบัญชีหมดอายุ"
@update:model-value="searchFilterTable" />
</div>
</div>
</q-card>
</div>
<div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
<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>
</div>
</template>
<style lang="scss" scope>
.filter-card {
background-color: #f1f1f1b0;
}
.toggle-expired-account {
font-size: 12px;
font-weight: 400;
font-size: 15px;
line-height: 150%;
color: #35373C;
}
.icon-color {
color: #4154b3;
}
.custom-header-table {
max-height: 64vh;
.q-table tr:nth-child(odd) td {
background: white;
}
.q-table tr:nth-child(even) td {
background: #f8f8f8;
}
.q-table thead tr {
background: #ecebeb;
}
.q-table thead tr th {
position: sticky;
z-index: 1;
}
/* this will be the loading indicator */
.q-table thead tr:last-child th {
/* height of all previous header rows */
top: 48px;
}
.q-table thead tr:first-child th {
top: 0;
}
}
</style>

View file

@ -1,4 +1,4 @@
import type { zipCodeOption } from "../../components/exams_other/profileType";
import type { zipCodeOption } from "../../components/PersonalDetail/profileType";
interface DataOption {
id: number | string;
name: string;
@ -16,7 +16,6 @@ interface EduOps {
positionPathOptions: DataOption[];
}
interface InformationOps {
prefixOps: DataOption[];
genderOps: DataOption[];
@ -54,14 +53,14 @@ interface CheckboxItem {
label: string;
}
export type {
DataOption,
DataOptionInsignia,
treeTab,
InformationOps,
AddressOps,
Pagination,
EduOps,
export type {
DataOption,
DataOptionInsignia,
treeTab,
InformationOps,
AddressOps,
Pagination,
EduOps,
InsigniaOps,
CheckboxItem
CheckboxItem,
};

View file

@ -2,14 +2,12 @@
* Router (Placement)
*/
const MainSorkorcho = () =>
import("@/modules/05_placement/components/exams_sorkorcho/Main.vue");
const PlacementMain = () =>
import("@/modules/05_placement/components/Main.vue");
const PlacementDetail = () =>
import("@/modules/05_placement/components/pass/Detail.vue");
const MainOther = () =>
import("@/modules/05_placement/components/exams_other/Main.vue");
const Placement2Detail = () =>
import("@/modules/05_placement/components/exams_other/Detail.vue");
const PlacementPersonalDetail = () =>
import("@/modules/05_placement/components/PersonalDetail/Detail.vue");
const addOrderPlacement = () =>
import(
"@/modules/05_placement/components/OrderPlacement/addOrderPlacement.vue"
@ -25,9 +23,29 @@ const detailOrderReplace = () =>
export default [
{
path: "/placement/Sorkorcho",
path: "/placement",
name: "placement",
component: MainSorkorcho,
component: PlacementMain,
meta: {
Auth: true,
Key: [7],
Role: "placement",
},
},
{
path: "/placement/detail",
name: "placement-detail",
component: PlacementDetail,
meta: {
Auth: true,
Key: [7],
Role: "placement",
},
},
{
path: "/placement/detail/:personalId",
name: "placement-personal-detail",
component: PlacementPersonalDetail,
meta: {
Auth: true,
Key: [7],
@ -54,36 +72,6 @@ export default [
Role: "placement",
},
},
{
path: "/placement/detail",
name: "placementDetail",
component: PlacementDetail,
meta: {
Auth: true,
Key: [7],
Role: "placement",
},
},
{
path: "/placement2",
name: "placement2",
component: MainOther,
meta: {
Auth: true,
Key: [7],
Role: "placement",
},
},
{
path: "/placement2/detail",
name: "placement2Detail",
component: Placement2Detail,
meta: {
Auth: true,
Key: [7],
Role: "placement",
},
},
{
path: "/placement/addOrderPlacement",
name: "addOrderPlacement",