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

Merge branch 'develop' of github.com:Frappet/bma-ehr-frontend into me

Browse source 
# Conflicts:
#	src/api/05_placement/api.placement.ts
#	src/api/index.ts
#	src/modules/05_placement/components/pass/Table.vue
This commit is contained in:
Thanit Konmek 2023-07-13 09:14:47 +07:00
commit 3230b5e8c4
29 changed files with 5189 additions and 4217 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/api/02_organizational/api.treelist.ts
View file

@ -10,6 +10,7 @@ import env from "../index";
const organizationPath = `${env.API_URI_ORG_SERVICE}/Organization/`; const organizationPath = `${env.API_URI_ORG_SERVICE}/Organization/`;
const postionMasterPath = `${env.API_URI_ORG_SERVICE}/PositionMaster`; const postionMasterPath = `${env.API_URI_ORG_SERVICE}/PositionMaster`;
const organizationPosition = `${env.API_URI_ORG_SERVICE}/OrganizationPosition/`; const organizationPosition = `${env.API_URI_ORG_SERVICE}/OrganizationPosition/`;
const organizationEmployeePosition = `${env.API_URI_ORG_EMPLOYEE_SERVICE}/organization-employee/`;
const report = `${env.API_URI}/report/organization/`; const report = `${env.API_URI}/report/organization/`;
@ -83,8 +84,7 @@ export default {
getPositionNumberIdByOcId: (OcId: string) => getPositionNumberIdByOcId: (OcId: string) =>
`${postionMasterPath}/position-number/Oc/${OcId}`, `${postionMasterPath}/position-number/Oc/${OcId}`,
organizationEmployeePosition: `${organizationEmployeePosition}`,
/** organizationEmployeePositionId: (id: string) =>
* api ประวัติการ publish `${organizationEmployeePosition}${id}`,
*/
}; };

20
src/api/05_placement/api.placement.ts
View file

@ -1,11 +1,21 @@
/**
* api บรรจุ แต่งตั้ง ย้าย โอน
*/
import env from "../index"; import env from "../index";
const placement = `${env.API_URI}/Placement/placement`;
const placement = `${env.API_PLACEMENT_URI}/Placement/placement/`; const orgTree = `${env.API_URI_ORG_TREE}`;
export default { export default {
MainDetail: (year: number) => `${placement}/exam/${year}`,
yearOptions: () => `${placement}/fiscal`,
redirectToPage: (examId: string) => `${placement}/pass/${examId}`,
disclaimF: () => `${placement}/pass/disclaim`,
deferment: () => `${placement}/pass/deferment`,
getStatCard: (examId: string) => `${placement}/pass/stat/${examId}`,
getDatapersonal: (id: string) => `${placement}/personal/${id}`,
putProperty: (id: string) => `${placement}/property/${id}`,
orgTree: orgTree,
placementPass: () => `${placement}/pass`,
placementDefermentInfo: (id: string) => `${placement}/pass/deferment/${id}`,
placementDisclaimInfo: (id: string) => `${placement}/pass/disclaim/${id}`,
//personal //personal
placementPersonalId: (personalId: string) => placementPersonalId: (personalId: string) =>
`${placement}personal/${personalId}`, `${placement}personal/${personalId}`,

15
src/api/index.ts
View file

@ -8,10 +8,12 @@ const env = ref<string>(process.env.NODE_ENV || "development");
const config = ref<any>({ const config = ref<any>({
development: { development: {
// API_URI: "https://localhost:7006/api/v1", // API_URI: "https://localhost:7260/api",
API_URI: "https://bma-ehr.frappet.synology.me/api/v1", API_URI: "https://bma-ehr.frappet.synology.me/api/v1",
// API_URI_ORG_SERVICE: "https://localhost:7056/api/v1", //ใช้ชั่วคราว // API_URI_ORG_SERVICE: "https://localhost:7056/api/v1", //ใช้ชั่วคราว
API_URI_ORG_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว API_URI_ORG_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
API_URI_ORG_EMPLOYEE_SERVICE: "https://localhost:7208/api/v1", //ใช้ชั่วคราว
// API_URI_ORG_EMPLOYEE_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
// API_URI_PROFILE_SERVICE: "https://localhost:7159/api/v1", // API_URI_PROFILE_SERVICE: "https://localhost:7159/api/v1",
API_URI_PROFILE_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว API_URI_PROFILE_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
// API_CANDIDATE_URI: "https://localhost:7007/api/v1", // API_CANDIDATE_URI: "https://localhost:7007/api/v1",
@ -19,6 +21,8 @@ const config = ref<any>({
// API_REPORT_URI: "https://localhost:7187/api/v1", // API_REPORT_URI: "https://localhost:7187/api/v1",
API_REPORT_URI: "https://bma-ehr.frappet.synology.me/api/v1", API_REPORT_URI: "https://bma-ehr.frappet.synology.me/api/v1",
API_PLACEMENT_URI: "https://localhost:7260/api", API_PLACEMENT_URI: "https://localhost:7260/api",
API_URI_ORG_TREE:
"https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230712_172702.json",
MEET_URI: "meet.frappet.com", MEET_URI: "meet.frappet.com",
}, },
test: { test: {
@ -31,9 +35,12 @@ const config = ref<any>({
// API_URI: "https://localhost:5010", // API_URI: "https://localhost:5010",
API_URI: `${window.location.protocol}//${window.location.host}/api/v1`, API_URI: `${window.location.protocol}//${window.location.host}/api/v1`,
API_URI_ORG_SERVICE: `${window.location.protocol}//${window.location.host}/api/v1`, //ใช้ชั่วคราว API_URI_ORG_SERVICE: `${window.location.protocol}//${window.location.host}/api/v1`, //ใช้ชั่วคราว
API_URI_ORG_EMPLOYEE_SERVICE: `${window.location.protocol}//${window.location.host}/api/v1`, //ใช้ชั่วคราว
API_URI_PROFILE_SERVICE: `${window.location.protocol}//${window.location.host}/api/v1`, API_URI_PROFILE_SERVICE: `${window.location.protocol}//${window.location.host}/api/v1`,
API_CANDIDATE_URI: `${window.location.protocol}//${window.location.host}/api/v1`, API_CANDIDATE_URI: `${window.location.protocol}//${window.location.host}/api/v1`,
API_REPORT_URI: `${window.location.protocol}//${window.location.host}/api/v1`, API_REPORT_URI: `${window.location.protocol}//${window.location.host}/api/v1`,
API_URI_ORG_TREE:
"https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230707_115124.json",
MEET_URI: "meet.frappet.com", MEET_URI: "meet.frappet.com",
}, },
}); });
@ -46,6 +53,9 @@ const API_REPORT_URI = ref<string>(config.value[env.value].API_REPORT_URI);
const API_URI_ORG_SERVICE = ref<string>( const API_URI_ORG_SERVICE = ref<string>(
config.value[env.value].API_URI_ORG_SERVICE config.value[env.value].API_URI_ORG_SERVICE
); );
const API_URI_ORG_EMPLOYEE_SERVICE = ref<string>(
config.value[env.value].API_URI_ORG_EMPLOYEE_SERVICE
);
const MEET_URI = ref<string>(config.value[env.value].MEET_URI); const MEET_URI = ref<string>(config.value[env.value].MEET_URI);
const API_URI_PROFILE_SERVICE = ref<string>( const API_URI_PROFILE_SERVICE = ref<string>(
config.value[env.value].API_URI_PROFILE_SERVICE config.value[env.value].API_URI_PROFILE_SERVICE
@ -53,6 +63,7 @@ const API_URI_PROFILE_SERVICE = ref<string>(
const API_PLACEMENT_URI = ref<string>( const API_PLACEMENT_URI = ref<string>(
config.value[env.value].API_PLACEMENT_URI config.value[env.value].API_PLACEMENT_URI
); );
const API_URI_ORG_TREE = ref<string>(config.value[env.value].API_URI_ORG_TREE);
export default { export default {
env: env.value, env: env.value,
@ -61,7 +72,9 @@ export default {
API_CANDIDATE_URI: API_CANDIDATE_URI.value, API_CANDIDATE_URI: API_CANDIDATE_URI.value,
API_REPORT_URI: API_REPORT_URI.value, API_REPORT_URI: API_REPORT_URI.value,
API_URI_ORG_SERVICE: API_URI_ORG_SERVICE.value, API_URI_ORG_SERVICE: API_URI_ORG_SERVICE.value,
API_URI_ORG_EMPLOYEE_SERVICE: API_URI_ORG_EMPLOYEE_SERVICE.value,
API_URI_PROFILE_SERVICE: API_URI_PROFILE_SERVICE.value, API_URI_PROFILE_SERVICE: API_URI_PROFILE_SERVICE.value,
API_PLACEMENT_URI: API_PLACEMENT_URI.value, API_PLACEMENT_URI: API_PLACEMENT_URI.value,
API_URI_ORG_TREE: API_URI_ORG_TREE.value,
MEET_URI: MEET_URI.value, MEET_URI: MEET_URI.value,
}; };

2
src/api/manage/api.organization.ts
View file

@ -3,6 +3,7 @@
* เมนูย่อย: ข้อมูลโครงสร้างหน่วยงาน * เมนูย่อย: ข้อมูลโครงสร้างหน่วยงาน
*/ */
import env from "../index"; import env from "../index";
const organizationMain = `${env.API_URI}/metadata/main/`;
const organization = `${env.API_URI}/metadata/organization/`; const organization = `${env.API_URI}/metadata/organization/`;
const organizationOrganization = `${env.API_URI}/metadata/organization-organization/`; const organizationOrganization = `${env.API_URI}/metadata/organization-organization/`;
const organizationShortName = `${env.API_URI}/metadata/organization-shortname/`; const organizationShortName = `${env.API_URI}/metadata/organization-shortname/`;
@ -21,6 +22,7 @@ export default {
/** /**
* api จำนวนข้อมูลใน ระบบจัดการข้อมูลหลัก tab ย่อยแต่ละ tab * api จำนวนข้อมูลใน ระบบจัดการข้อมูลหลัก tab ย่อยแต่ละ tab
*/ */
organizationMain: `${organizationMain}organization`,
organization, organization,
countDashbordSubHistory: (type: number) => `${dashbord}${type}`, countDashbordSubHistory: (type: number) => `${dashbord}${type}`,
countDashbordHistory: `${dashbord}`, countDashbordHistory: `${dashbord}`,

2
src/api/manage/api.positionEmployee.ts
View file

@ -3,6 +3,7 @@
* เมนูย่อย: ข้อมูลตำแหน่งของลูกจ้างกรุงเทพมหานคร * เมนูย่อย: ข้อมูลตำแหน่งของลูกจ้างกรุงเทพมหานคร
*/ */
import env from "../index"; import env from "../index";
const positionEmployee = `${env.API_URI}/metadata/main/`;
const positionEmployeePosition = `${env.API_URI}/metadata/position-employee-position/`; const positionEmployeePosition = `${env.API_URI}/metadata/position-employee-position/`;
const positionEmployeePositionSide = `${env.API_URI}/metadata/position-employee-position-side/`; const positionEmployeePositionSide = `${env.API_URI}/metadata/position-employee-position-side/`;
const positionEmployeeGroup = `${env.API_URI}/metadata/position-employee-group/`; const positionEmployeeGroup = `${env.API_URI}/metadata/position-employee-group/`;
@ -11,6 +12,7 @@ const positionEmployeeLevel = `${env.API_URI}/metadata/position-employee-level/`
const positionEmployeeStatus = `${env.API_URI}/metadata/position-employee-status/`; const positionEmployeeStatus = `${env.API_URI}/metadata/position-employee-status/`;
export default { export default {
positionEmployee: `${positionEmployee}positionEmployee`,
/** /**
* api ตำแหน่ง * api ตำแหน่ง
*/ */

7
src/interface/request/main/main.ts
View file

@ -88,11 +88,16 @@ const menuList = readonly<any[]>([
}, },
{ {
key: 3.5, key: 3.5,
label: "ผังโครงสร้างลูกจ้าง",
path: "organizationalEmployee",
},
{
key: 3.6,
label: "จัดการบัญชี 2", label: "จัดการบัญชี 2",
path: "manageReport2", path: "manageReport2",
}, },
{ {
key: 3.6, key: 3.7,
label: "รายงานบัญชี", label: "รายงานบัญชี",
path: "organizationalReport", path: "organizationalReport",
}, },

2
src/modules/01_metadata/components/positionEmployee/Group.vue
View file

@ -437,7 +437,7 @@ const fetchHistory = async () => {
.catch((e) => { .catch((e) => {
messageError($q, e); messageError($q, e);
}) })
.finally(async () => { .finally(() => {
hideLoader(); hideLoader();
}); });
}; };

12
src/modules/02_organizational/router.ts
View file

@ -9,6 +9,8 @@ const MainStructChart = () =>
const MainOrgChart = () => const MainOrgChart = () =>
import("@/modules/02_organizational/views/MainOrgChart.vue"); import("@/modules/02_organizational/views/MainOrgChart.vue");
const MainTree = () => import("@/modules/02_organizational/views/MainTree.vue"); const MainTree = () => import("@/modules/02_organizational/views/MainTree.vue");
const MainTreeEmployee = () =>
import("@/modules/02_organizational/views/MainTreeEmployee.vue");
const MainReport = () => const MainReport = () =>
import("@/modules/02_organizational/views/MainReport.vue"); import("@/modules/02_organizational/views/MainReport.vue");
const ManageReport2 = () => const ManageReport2 = () =>
@ -60,6 +62,16 @@ export default [
Role: "organization", Role: "organization",
}, },
}, },
{
path: "/organizational/employee",
name: "organizationalEmployee",
component: MainTreeEmployee,
meta: {
Auth: true,
Key: [9],
Role: "organization",
},
},
{ {
path: "/organizational/manage/report", path: "/organizational/manage/report",
name: "manageReport2", name: "manageReport2",

3112
src/modules/02_organizational/views/MainTree.vue
View file

File diff suppressed because it is too large Load diff

1749
src/modules/02_organizational/views/MainTreeEmployee.vue Normal file
View file

File diff suppressed because it is too large Load diff

376
src/modules/03_recruiting/components/Table.vue
View file

@ -1,128 +1,126 @@
<template> <template>
<div class="q-pb-sm row q-col-gutter-sm"> <div class="q-pb-sm row q-col-gutter-sm">
<!-- --> <!-- -->
<div class="q-gutter-sm" v-if="nornmalData == true"> <div class="q-gutter-sm" v-if="nornmalData == true">
<q-btn <q-btn
size="12px" size="12px"
flat flat
round round
color="add" color="add"
@click="checkAdd" @click="checkAdd"
icon="mdi-plus" icon="mdi-plus"
> >
<q-tooltip>เพิ่มข้อมูล</q-tooltip> <q-tooltip>เพิ่มข้อมูล</q-tooltip>
</q-btn> </q-btn>
</div> </div>
<div class="row q-gutter-sm q-pb-sm" v-if="conclude == true"> <div class="row q-gutter-sm q-pb-sm" v-if="conclude == true">
<q-card bordered flat class="q-px-md no-wrap row"> <q-card bordered flat class="q-px-md no-wrap row">
<div class="col-12 text-subtitle2 row items-center"> <div class="col-12 text-subtitle2 row items-center">
<span class="text-weight-medium text-dark" <span class="text-weight-medium text-dark">ผู้สมัครสอบ</span>
>ผู้สมัครสอบ</span <q-space />
> <q-badge
<q-space /> color="white"
<q-badge class="text-weight-bold text-subtitle1 text-primary"
color="white" :label="`${count}`"
class="text-weight-bold text-subtitle1 text-primary" rounded
:label="`${count}`" />
rounded </div>
/> </q-card>
</div> <q-card bordered flat class="q-px-md no-wrap row">
</q-card> <div class="col-12 text-subtitle2 row items-center">
<q-card bordered flat class="q-px-md no-wrap row"> <span class="text-weight-medium text-dark">สอบผ่าน</span>
<div class="col-12 text-subtitle2 row items-center"> <q-space />
<span class="text-weight-medium text-dark">สอบผ่าน</span> <q-badge
<q-space /> color="white"
<q-badge class="text-weight-bold text-subtitle1 text-blue"
color="white" :label="`${pass}`"
class="text-weight-bold text-subtitle1 text-blue" rounded
:label="`${pass}`" />
rounded </div>
/> </q-card>
</div>
</q-card>
<q-card bordered flat class="q-px-md no-wrap row"> <q-card bordered flat class="q-px-md no-wrap row">
<div class="col-12 text-subtitle2 row items-center"> <div class="col-12 text-subtitle2 row items-center">
<span class="text-weight-medium text-dark">สอบไม่ผ่าน</span> <span class="text-weight-medium text-dark">สอบไม่ผ่าน</span>
<q-space /> <q-space />
<q-badge <q-badge
color="white" color="white"
class="text-weight-bold text-subtitle1 text-pink" class="text-weight-bold text-subtitle1 text-pink"
:label="`${notpass}`" :label="`${notpass}`"
rounded rounded
/> />
</div> </div>
</q-card> </q-card>
</div> </div>
<q-space /> <q-space />
<div class="items-center q-gutter-sm" style="display: flex"> <div class="items-center q-gutter-sm" style="display: flex">
<!-- ค้นหาข้อความใน table --> <!-- ค้นหาข้อความใน table -->
<q-input <q-input
standout standout
dense dense
:model-value="inputfilter" :model-value="inputfilter"
ref="filterRef" ref="filterRef"
@update:model-value="updateInput" @update:model-value="updateInput"
outlined outlined
debounce="300" debounce="300"
placeholder="ค้นหา" placeholder="ค้นหา"
style="max-width: 200px" style="max-width: 200px"
> >
<template v-slot:append> <template v-slot:append>
<q-icon v-if="inputfilter == ''" name="search" /> <q-icon v-if="inputfilter == ''" name="search" />
<q-icon <q-icon
v-if="inputfilter !== ''" v-if="inputfilter !== ''"
name="clear" name="clear"
class="cursor-pointer" class="cursor-pointer"
@click="resetFilter" @click="resetFilter"
/> />
</template> </template>
</q-input> </q-input>
<!-- แสดงคอลัมน์ใน table --> <!-- แสดงคอลัมน์ใน table -->
<q-select <q-select
:model-value="inputvisible" :model-value="inputvisible"
@update:model-value="updateVisible" @update:model-value="updateVisible"
:display-value="$q.lang.table.columns" :display-value="$q.lang.table.columns"
multiple multiple
outlined outlined
dense dense
:options="attrs.columns" :options="attrs.columns"
options-dense options-dense
option-value="name" option-value="name"
map-options map-options
emit-value emit-value
style="min-width: 150px" style="min-width: 150px"
class="gt-xs" class="gt-xs"
> >
<template> </template> <template> </template>
</q-select> </q-select>
</div> </div>
</div> </div>
<q-table <q-table
ref="table" ref="table"
flat flat
bordered bordered
class="custom-table2" class="custom-header-table"
v-bind="attrs" v-bind="attrs"
virtual-scroll virtual-scroll
:virtual-scroll-sticky-size-start="48" :virtual-scroll-sticky-size-start="48"
dense dense
:pagination-label="paginationLabel" :pagination-label="paginationLabel"
:pagination="initialPagination" :pagination="initialPagination"
:rows-per-page-options="[0]" :rows-per-page-options="[0]"
> >
<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">
<span class="text-weight-medium" v-html="col.label" /> <span class="text-weight-medium" v-html="col.label" />
</q-th> </q-th>
<q-th auto-width v-if="nornmalData == true" /> <q-th auto-width v-if="nornmalData == true" />
</q-tr> </q-tr>
</template> </template>
<template #body="props"> <template #body="props">
<slot v-bind="props" name="columns"></slot> <slot v-bind="props" name="columns"></slot>
</template> </template>
</q-table> </q-table>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, useAttrs } from "vue"; import { ref, useAttrs } from "vue";
@ -132,106 +130,106 @@ const attrs = ref<any>(useAttrs());
const table = ref<any>(null); const table = ref<any>(null);
const filterRef = ref<any>(null); const filterRef = ref<any>(null);
const initialPagination = ref<Pagination>({ const initialPagination = ref<Pagination>({
rowsPerPage: 0, rowsPerPage: 0,
}); });
const props = defineProps({ const props = defineProps({
count: Number, count: Number,
pass: Number, pass: Number,
notpass: Number, notpass: Number,
inputfilter: String, inputfilter: String,
name: String, name: String,
icon: String, icon: String,
inputvisible: Array, inputvisible: Array,
editvisible: Boolean, editvisible: Boolean,
add: { add: {
type: Function, type: Function,
default: () => console.log("not function"), default: () => console.log("not function"),
}, },
validate: { validate: {
type: Function, type: Function,
default: () => console.log("not function"), default: () => console.log("not function"),
}, },
nornmalData: { nornmalData: {
type: Boolean, type: Boolean,
defualt: true, defualt: true,
}, },
conclude: { conclude: {
type: Boolean, type: Boolean,
defualt: false, defualt: false,
}, },
}); });
const emit = defineEmits([ const emit = defineEmits([
"update:inputfilter", "update:inputfilter",
"update:inputvisible", "update:inputvisible",
"update:editvisible", "update:editvisible",
]); ]);
const updateInput = (value: string | number | null) => { const updateInput = (value: string | number | null) => {
emit("update:inputfilter", value); emit("update:inputfilter", value);
}; };
const updateVisible = (value: []) => { const updateVisible = (value: []) => {
emit("update:inputvisible", value); emit("update:inputvisible", value);
}; };
const paginationLabel = (start: string, end: string, total: string) => { const paginationLabel = (start: string, end: string, total: string) => {
return start + "-" + end + " ใน " + total; return start + "-" + end + " ใน " + total;
}; };
const checkAdd = () => { const checkAdd = () => {
props.add(); props.add();
}; };
const resetFilter = () => { const resetFilter = () => {
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
emit("update:inputfilter", ""); emit("update:inputfilter", "");
filterRef.value.focus(); filterRef.value.focus();
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.icon-color { .icon-color {
color: #4154b3; color: #4154b3;
} }
.custom-table2 { .custom-table2 {
max-height: 64vh; max-height: 64vh;
.q-table tr:nth-child(odd) td { .q-table tr:nth-child(odd) td {
background: white; background: white;
} }
.q-table tr:nth-child(even) td { .q-table tr:nth-child(even) td {
background: #f8f8f8; background: #f8f8f8;
} }
.q-table thead tr { .q-table thead tr {
background: #ecebeb; background: #ecebeb;
} }
.q-table thead tr th { .q-table thead tr th {
position: sticky; position: sticky;
} }
.q-table td:nth-of-type(2) { .q-table td:nth-of-type(2) {
z-index: 3 !important; z-index: 3 !important;
} }
.q-table th:nth-of-type(2), .q-table th:nth-of-type(2),
.q-table td:nth-of-type(2) { .q-table td:nth-of-type(2) {
position: sticky; position: sticky;
left: 0; left: 0;
z-index: 1; z-index: 1;
} }
/* this will be the loading indicator */ /* this will be the loading indicator */
.q-table thead tr:last-child th { .q-table thead tr:last-child th {
/* height of all previous header rows */ /* height of all previous header rows */
top: 48px; top: 48px;
} }
.q-table thead tr:first-child th { .q-table thead tr:first-child th {
top: 0; top: 0;
} }
} }
</style> </style>

609
src/modules/03_recruiting/views/02_qualify/Period.vue
View file

@ -1,88 +1,79 @@
<!-- page:จัดการรอบการสอบ สรรหา --> <!-- page:จัดการรอบการสอบ สรรหา -->
<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-pt-sm q-pa-md"> <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
<div> <div>
<Table <Table
style="max-height: 80vh" style="max-height: 80vh"
:rows="examData" :rows="examData"
:columns="columns" :columns="columns"
:filter="filter" :filter="filter"
:visible-columns="visibleColumns" :visible-columns="visibleColumns"
v-model:inputfilter="filter" v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns" v-model:inputvisible="visibleColumns"
:pagination="initialPagination" :pagination="initialPagination"
:nornmalData="true" :nornmalData="true"
:add="clickAdd" :add="clickAdd"
:paging="true" :paging="true"
:titleText="''" :titleText="''"
> >
<template #columns="props"> <template #columns="props">
<q-tr :props="props" class="cursor-pointer"> <q-tr :props="props" class="cursor-pointer">
<q-td <q-td
v-for="col in props.cols" v-for="col in props.cols"
:key="col.name" :key="col.name"
:props="props" :props="props"
@click="clickEdit(props.row)" @click="clickEdit(props.row)"
> >
<div <div v-if="col.name == 'no'" class="table_ellipsis2">
v-if="col.name == 'no'" {{ props.rowIndex + 1 }}
class="table_ellipsis2" </div>
> <div v-else-if="col.name == 'yearly'" class="table_ellipsis2">
{{ props.rowIndex + 1 }} {{ col.value + 543 }}
</div> </div>
<div <div
v-else-if="col.name == 'yearly'" v-else-if="
class="table_ellipsis2" col.name == 'dateRegister' ||
> col.name == 'datePayment' ||
{{ col.value + 543 }} col.name == 'dateAnnouncement'
</div> "
<div class="table_ellipsis2"
v-else-if=" >
col.name == 'dateRegister' || {{ dateThaiRange(col.value) }}
col.name == 'datePayment' || </div>
col.name == 'dateAnnouncement' <div
" v-else-if="col.name == 'announcementExam'"
class="table_ellipsis2" class="table_ellipsis2"
> >
{{ dateThaiRange(col.value) }} {{ col.value ? "ข่าวการสอบ" : "ข่าวทั่วไป" }}
</div> </div>
<div <div v-else-if="col.name == 'category'" class="table_ellipsis2">
v-else-if="col.name == 'announcementExam'" {{ typeCategoryExam(col.value) }}
class="table_ellipsis2" </div>
> <div v-else class="table_ellipsis2">
{{ col.value ? "ข่าวการสอบ" : "ข่าวทั่วไป" }} {{ col.value }}
</div> </div>
<div </q-td>
v-else-if="col.name == 'category'" <q-td>
class="table_ellipsis2" <q-btn
> dense
{{ typeCategoryExam(col.value) }} size="12px"
</div> flat
<div v-else class="table_ellipsis2"> round
{{ col.value }} color="red"
</div> @click="clickDelete(props.row.id)"
</q-td> icon="mdi-delete"
<q-td> >
<q-btn <q-tooltip>ลบข้อมูล</q-tooltip>
dense </q-btn>
size="12px" </q-td>
flat </q-tr>
round </template>
color="red" </Table>
@click="clickDelete(props.row.id)" </div>
icon="mdi-delete" </q-card>
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
</Table>
</div>
</q-card>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
@ -90,14 +81,14 @@ import { onMounted, ref } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import type { import type {
RequestPeriodExam, RequestPeriodExam,
RequestPosition, RequestPosition,
RequestPayment, RequestPayment,
} from "@/modules/03_recruiting/interface/request/Period"; } from "@/modules/03_recruiting/interface/request/Period";
import type { import type {
ResponsePeriodExam, ResponsePeriodExam,
ResponsePosition, ResponsePosition,
ResponsePayment, ResponsePayment,
} from "@/modules/03_recruiting/interface/response/Period"; } from "@/modules/03_recruiting/interface/response/Period";
import type { Pagination } from "@/modules/03_recruiting/interface/index/Main"; import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
import Table from "@/modules/03_recruiting/components/Table.vue"; import Table from "@/modules/03_recruiting/components/Table.vue";
@ -114,248 +105,236 @@ const router = useRouter();
const { date2Thai, success, typeCategoryExam, messageError } = mixin; const { date2Thai, success, typeCategoryExam, messageError } = mixin;
const filter = ref<string>(""); //search data table const filter = ref<string>(""); //search data table
const initialPagination = ref<Pagination>({ const initialPagination = ref<Pagination>({
rowsPerPage: 0, rowsPerPage: 0,
}); });
const examData = ref<ResponsePeriodExam[]>([]); const examData = ref<ResponsePeriodExam[]>([]);
const visibleColumns = ref<String[]>([ const visibleColumns = ref<String[]>([
"no", "no",
"announcementExam", "announcementExam",
"yearly", "yearly",
"category", "category",
"name", "name",
"document", "document",
"dateAnnouncement", "dateAnnouncement",
"dateRegister", "dateRegister",
"datePayment", "datePayment",
"fee", "fee",
]); ]);
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "no", name: "no",
align: "center", align: "center",
label: "ลำดับ", label: "ลำดับ",
sortable: true, sortable: true,
field: "no", field: "no",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
{ {
name: "announcementExam", name: "announcementExam",
align: "left", align: "left",
label: "ประเภทการประกาศ", label: "ประเภทการประกาศ",
sortable: true, sortable: true,
field: "announcementExam", field: "announcementExam",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
{ {
name: "yearly", name: "yearly",
align: "center", align: "center",
label: "ปีงบประมาณ", label: "ปีงบประมาณ",
sortable: true, sortable: true,
field: "yearly", field: "yearly",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
{ {
name: "category", name: "category",
align: "left", align: "left",
label: "สังกัด", label: "สังกัด",
sortable: true, sortable: true,
field: "category", field: "category",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
{ {
name: "name", name: "name",
align: "left", align: "left",
label: "รายการประกาศ", label: "รายการประกาศ",
sortable: true, sortable: true,
field: "name", field: "name",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
{ {
name: "fee", name: "fee",
align: "right", align: "right",
label: "ค่าธรรมเนียม", label: "ค่าธรรมเนียม",
sortable: true, sortable: true,
field: "fee", field: "fee",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
{ {
name: "dateAnnouncement", name: "dateAnnouncement",
align: "left", align: "left",
label: "วันที่สมัคร", label: "วันที่สมัคร",
sortable: true, sortable: true,
field: "dateAnnouncement", field: "dateAnnouncement",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
{ {
name: "dateRegister", name: "dateRegister",
align: "left", align: "left",
label: "วันที่ชำระเงิน", label: "วันที่ชำระเงิน",
sortable: true, sortable: true,
field: "dateRegister", field: "dateRegister",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
{ {
name: "datePayment", name: "datePayment",
align: "left", align: "left",
label: "วันที่ประกาศ", label: "วันที่ประกาศ",
sortable: true, sortable: true,
field: "datePayment", field: "datePayment",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
]); ]);
onMounted(async () => { onMounted(async () => {
loaderPage(false); loaderPage(false);
await fetchData(); await fetchData();
}); });
const fetchData = async () => { const fetchData = async () => {
loaderPage(true); loaderPage(true);
await http await http
.get(config.API.periodExamType("all")) .get(config.API.periodExamType("all"))
.then((res) => { .then((res) => {
const data = res.data.result; const data = res.data.result;
let result: ResponsePeriodExam[] = []; let result: ResponsePeriodExam[] = [];
if (data.length > 0) { if (data.length > 0) {
data.map((r: RequestPeriodExam) => { data.map((r: RequestPeriodExam) => {
const positionData: ResponsePosition[] = []; const positionData: ResponsePosition[] = [];
r.positionExam.map((r: RequestPosition) => { r.positionExam.map((r: RequestPosition) => {
positionData.push({ positionData.push({
id: r.id, id: r.id,
position: { position: {
id: r.positionId, id: r.positionId,
name: r.positionName, name: r.positionName,
}, },
type: { type: {
id: r.typeId, id: r.typeId,
name: r.typeName, name: r.typeName,
}, },
highDegree: r.highDegree, highDegree: r.highDegree,
}); });
}); });
const bankData: ResponsePayment[] = []; const bankData: ResponsePayment[] = [];
r.bankExam.map((r: RequestPayment) => { r.bankExam.map((r: RequestPayment) => {
bankData.push({ bankData.push({
id: r.id, id: r.id,
accountNumber: r.accountNumber, accountNumber: r.accountNumber,
bankName: r.bankName, bankName: r.bankName,
accountName: r.accountName, accountName: r.accountName,
}); });
}); });
result.push({ result.push({
id: r.id, id: r.id,
dateAnnounce: dateAnnounce:
r.announcementDate !== null r.announcementDate !== null ? new Date(r.announcementDate) : null,
? new Date(r.announcementDate) announcementExam: r.announcementExam,
: null, name: r.name,
announcementExam: r.announcementExam, checkDocument: r.checkDocument,
name: r.name, checkDisability: r.checkDisability,
checkDocument: r.checkDocument, round: r.round,
checkDisability: r.checkDisability, yearly: r.year,
round: r.round, fee: r.fee,
yearly: r.year, dateAnnouncement:
fee: r.fee, r.announcementStartDate !== null && r.announcementEndDate !== null
dateAnnouncement: ? [
r.announcementStartDate !== null && new Date(r.announcementStartDate),
r.announcementEndDate !== null new Date(r.announcementEndDate),
? [ ]
new Date(r.announcementStartDate), : null,
new Date(r.announcementEndDate), dateExam: r.examDate !== null ? new Date(r.examDate) : null,
] dateRegister:
: null, r.registerStartDate !== null && r.registerEndDate !== null
dateExam: ? [new Date(r.registerStartDate), new Date(r.registerEndDate)]
r.examDate !== null ? new Date(r.examDate) : null, : null,
dateRegister: datePayment:
r.registerStartDate !== null && r.paymentStartDate !== null && r.paymentEndDate !== null
r.registerEndDate !== null ? [new Date(r.paymentStartDate), new Date(r.paymentEndDate)]
? [ : null,
new Date(r.registerStartDate), organizationName: {
new Date(r.registerEndDate), id: r.organizationId,
] name: r.organizationName,
: null, },
datePayment: organizationShortName: {
r.paymentStartDate !== null && id: r.organizationCodeId,
r.paymentEndDate !== null name: r.organizationCodeName,
? [ },
new Date(r.paymentStartDate), positionExam: positionData,
new Date(r.paymentEndDate), pay: r.bankExam.length > 0 ? "payment2" : "payment1",
] bankExam: bankData,
: null, editor: r.detail,
organizationName: { note: r.note,
id: r.organizationId, category: r.category,
name: r.organizationName, });
}, });
organizationShortName: { }
id: r.organizationCodeId, examData.value = result;
name: r.organizationCodeName, })
}, .catch((e) => {
positionExam: positionData, messageError($q, e);
pay: r.bankExam.length > 0 ? "payment2" : "payment1", })
bankExam: bankData, .finally(() => {
editor: r.detail, loaderPage(false);
note: r.note, });
category: r.category,
});
});
}
examData.value = result;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
loaderPage(false);
});
}; };
const clickEdit = (col: ResponsePeriodExam) => { const clickEdit = (col: ResponsePeriodExam) => {
router.push(`/qualify/period/${col.id}`); router.push(`/qualify/period/${col.id}`);
}; };
const clickDelete = (id: string) => { const clickDelete = (id: string) => {
$q.dialog({ $q.dialog({
title: "ยืนยันการลบข้อมูล", title: "ยืนยันการลบข้อมูล",
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?", message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
cancel: { cancel: {
flat: true, flat: true,
color: "negative", color: "negative",
}, },
persistent: true, persistent: true,
}) })
.onOk(async () => { .onOk(async () => {
await deleteData(id); await deleteData(id);
}) })
.onCancel(() => {}) .onCancel(() => {})
.onDismiss(() => {}); .onDismiss(() => {});
}; };
const clickAdd = () => { const clickAdd = () => {
router.push({ name: "qualifyPeriodAdd" }); router.push({ name: "qualifyPeriodAdd" });
}; };
const deleteData = async (id: string) => { const deleteData = async (id: string) => {
loaderPage(true); loaderPage(true);
await http await http
.delete(config.API.periodExamId(id)) .delete(config.API.periodExamId(id))
.then((res) => { .then((res) => {
success($q, "ลบข้อมูลสำเร็จ"); success($q, "ลบข้อมูลสำเร็จ");
}) })
.catch((e) => { .catch((e) => {
messageError($q, e); messageError($q, e);
}) })
.finally(async () => { .finally(async () => {
loaderPage(false); loaderPage(false);
await fetchData(); await fetchData();
}); });
}; };
/** /**
@ -363,13 +342,13 @@ const deleteData = async (id: string) => {
* @param val ช่วงวันที่ * @param val ช่วงวันที่
*/ */
const dateThaiRange = (val: [Date, Date]) => { const dateThaiRange = (val: [Date, Date]) => {
if (val === null) { if (val === null) {
return ""; return "";
} else if (date2Thai(val[0], true) === date2Thai(val[1], true)) { } else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
return `${date2Thai(val[0], true)}`; return `${date2Thai(val[0], true)}`;
} else { } else {
return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`; return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
} }
}; };
</script> </script>

6
src/modules/04_registry/components/Record.vue
View file

@ -309,9 +309,7 @@ const tittleHistory = ref<string>(
); );
const filterHistory = ref<string>(""); //search data table history const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const profileId = ref<string>( const profileId = ref<string>(route.params.id ? route.params.id.toString():'');
route.params.id ? route.params.id.toString() : ""
);
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่ const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
const rows = ref<RequestItemsObject[]>([]); const rows = ref<RequestItemsObject[]>([]);
const filter = ref<string>(""); //search data table const filter = ref<string>(""); //search data table
@ -480,7 +478,7 @@ onMounted(async () => {
}); });
const fetchData = async () => { const fetchData = async () => {
if (profileId.value) { if (profileId.value!='') {
loaderPage(true); loaderPage(true);
await http await http
.get(config.API.profileNopaidId(profileId.value)) .get(config.API.profileNopaidId(profileId.value))

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

@ -1,21 +1,21 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, reactive, ref, useAttrs } from "vue"; import { onMounted, ref, reactive } from "vue";
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import type { FormPlacementMainData } from "@/modules/05_placement/interface/request/Main"; import { useQuasar } from "quasar";
import type { DataOption } from "@/modules/05_placement/interface/index/Main"; import type {
DataOption,
DataOption1,
} 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";
import http from "@/plugins/http";
import config from "@/app.config";
const DataStore = usePlacementDataStore(); const DataStore = usePlacementDataStore();
const $q = useQuasar();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { dateText } = mixin; const { showLoader, hideLoader, messageError, date2Thai } = mixin;
// แปลงเวลา ค.ศ ให้เป็น พ.ศ
const textDate = (value: Date) => {
return dateText(value);
};
// หัวตาราง // หัวตาราง
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
@ -58,175 +58,119 @@ const columns = ref<QTableProps["columns"]>([
style: "font-size: 14px", style: "font-size: 14px",
}, },
{ {
name: "numberofCandidates", name: "numberOfCandidates",
align: "left", align: "left",
label: "จำนวนผู้สอบได้", label: "จำนวนผู้สอบได้",
sortable: false, sortable: false,
field: "numberofCandidates", field: "numberOfCandidates",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
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" }),
}, },
{ {
name: "examType", name: "examTypeName",
align: "left", align: "left",
label: "ประเภทการสอบ", label: "ประเภทการสอบ",
sortable: false, sortable: false,
field: "examType", field: "examTypeName",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
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" }),
}, },
{
name: "accountStartDate",
align: "left",
label: "วันที่บัญชีใช้ได้ตั้งแต่",
sortable: true,
field: "accountStartDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{ {
name: "accountExpirationDate", name: "accountExpirationDate",
align: "left", align: "left",
label: "วันที่บัญชีหมดอายุ", label: "วันที่บัญชีใช้ได้ถึง",
sortable: true, sortable: true,
field: "accountExpirationDate", field: "accountExpirationDate",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
// ข้อมูลตาราง (จำลอง) // ข้อมูลตาราง (จำลอง)
const rows = ref<FormPlacementMainData[]>([ const rows = ref<QTableProps["rows"]>([]);
{ // const yearValue = ref<number>(0); // เพิ่มตัวแปรในโมดูล
id: 1,
examRound: // let OriginalData = ref<FormPlacementMainData[]>([]);
"การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป", // let UpdataData = ref<FormPlacementMainData[]>([]);
examOrder: 3, const searchYear = ref();
fiscalYear: 2023, const yearOptions = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
numberofCandidates: 8,
examType: 1, const dataPlacement = ref<any>([]);
accountExpirationDate: "2023-02-28T14:47:04.1785384Z", const visibleColumns = ref([
}, "id",
{ "examRound",
id: 2, "examOrder",
examRound: "examOrder",
"การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป", "fiscalYear",
examOrder: 2, "numberOfCandidates",
fiscalYear: 2023, "examTypeName",
numberofCandidates: 12, "accountStartDate",
examType: 1, "accountExpirationDate",
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 () => { onMounted(async () => {
await OriginalDataFetch(); await fetchYearOptions();
fiscalYearFilter();
examTimeFilter();
examTypeFilter();
await expiredAccountFilter();
searchFilterTable();
}); });
const fetchPlacementData = async (val: number) => {
showLoader();
http
.get(config.API.MainDetail(val))
.then((res) => {
dataPlacement.value = res.data.result;
DataStore.DataMainOrig = dataPlacement.value;
rows.value = DataStore.DataMainOrig;
examTypeFilter();
examTimeFilter();
expiredAccountFilter();
})
.catch((e) => {
console.log(e);
})
.finally(() => {
hideLoader();
});
};
const fetchYearOptions = async () => {
http
.get(config.API.yearOptions())
.then((res) => {
const response = res.data.result;
yearOptions.push(...response);
const maxNumber = yearOptions.reduce((max: any, e: any) => {
return e.id > max ? e.id : max;
}, "");
searchYear.value = maxNumber;
DataStore.DataMainYearSet(searchYear.value);
// DataStore.DataMainYear = yearOptions.value;
fetchPlacementData(searchYear.value);
})
.catch((e) => {
messageError($q, e);
});
};
const filterYear = () => {
console.log("searchYear", searchYear.value);
fetchPlacementData(searchYear.value);
};
// ดูรายการสอบแข่งขัน หน้าต่อไป // ดูรายการสอบแข่งขัน หน้าต่อไป
const redirectToPage = (id?: number) => { const redirectToPage = (examId?: number) => {
// router.push({ name: 'placementDetail'}); router.push(`/placement/pass/${examId}`);
router.push(`/placement/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 filterKeyword = ref<string>("");
const filterRef = ref<any>(null); const filterRef = ref<any>(null);
const resetFilter = () => { const resetFilter = () => {
@ -234,63 +178,64 @@ const resetFilter = () => {
filterRef.value.focus(); filterRef.value.focus();
}; };
const attrs = ref<any>(useAttrs()); //-------------------|ครั้งที่สอบ|------------------------------//
const visibleColumns = ref<string[]>([ const examTime = ref<number | string>("all");
"id", const examTimeOP = reactive<DataOption1[]>([{ id: "all", name: "ทั้งหมด" }]);
"examRound", const addedExamTimeValues: Set<number> = new Set();
"examOrder",
"fiscalYear",
"numberofCandidates",
"examType",
"accountExpirationDate",
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
// ครั้งที่สอบ
const examTime = ref<number | null>(null);
const examTimeOP = ref<number[]>([]);
const examTimeFilter = async () => { const examTimeFilter = async () => {
for (let data of OriginalData.value) { // examTimeOP.push({ id: "all", name: "ทั้งหมด" });
if (!examTimeOP.value.includes(data.examOrder)) { for (const data of dataPlacement.value) {
examTimeOP.value.push(data.examOrder); const examOrder = data.examOrder;
if (examOrder !== null && !addedExamTimeValues.has(examOrder)) {
examTimeOP.push({ id: examOrder.toString(), name: examOrder.toString() });
addedExamTimeValues.add(examOrder);
} }
} }
examTimeOP.value.sort((a, b) => a - b); // เรียงลำดับ examTimeOP.sort((a, b) => {
if (a.id === "all") return -1; // ให้ตัวเลือก "ทั้งหมด" อยู่ด้านหน้า
if (b.id === "all") return 1;
return Number(a.id) - Number(b.id);
}); // เรียงลำดับตาม id ที่แปลงเป็นตัวเลข
}; };
// ประเภทการสอบ // ประเภทการสอบ
const examType = ref<number | null>(0); const examType = ref<string | null>("all");
const examTypeOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]); const examTypeOP = ref<DataOption1[]>([{ id: "all", name: "ทั้งหมด" }]);
const addedexamTypeValues: number[] = []; const addedExamTypeValues: Set<string> = new Set();
const examTypeFilter = async () => { const examTypeFilter = () => {
for (let data of OriginalData.value) { dataPlacement.value.forEach((item: any) => {
const examTypeValue = data.examType; const examTypeName = item.examTypeName;
if (examTypeValue == 1 && !addedexamTypeValues.includes(1)) { const examTypeValue = item.examTypeValue;
examTypeOP.push({ id: 1, name: "คัดเลือก" }); if (examTypeName && !addedExamTypeValues.has(examTypeName)) {
addedexamTypeValues.push(1); examTypeOP.value.push({
} else if (examTypeValue == 2 && !addedexamTypeValues.includes(2)) { id: examTypeValue,
examTypeOP.push({ id: 2, name: "สอบแข่งขัน" }); name: examTypeName,
addedexamTypeValues.push(2); });
addedExamTypeValues.add(examTypeName);
} }
});
};
//--------------|ฟิลเตอร์|--------------------------------------//
const searchFilterTable = async () => {
if (examType.value !== undefined && examType.value !== null) {
await DataStore.DataUpdateMain(
examTime.value,
examType.value,
expiredAccount.value
);
rows.value = DataStore.DataMainUpdate;
} }
}; };
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 expiredAccount = ref<boolean>(false);
const expiredAccountFilter = async () => { const expiredAccountFilter = async () => {
const currentDate = new Date(); // const currentDate = new Date();
const updatedRows = OriginalData.value.map((data) => { const updatedRows = dataPlacement.value.map((data: any) => {
let expirationDate = new Date(data.accountExpirationDate); // let expirationDate = new Date(data.accountExpirationDate);
let isExpired = expirationDate < currentDate; // let isExpired = currentDate > expirationDate;
let isExpired = data.isExpired == expiredAccount;
return { ...data, isExpired }; return { ...data, isExpired };
}); });
@ -298,13 +243,13 @@ const expiredAccountFilter = async () => {
}; };
const paging = ref<boolean>(true); const paging = ref<boolean>(true);
const pagination = ref({ const pagination = ref({
sortBy: "desc", sortBy: "accountStartDate",
descending: false, descending: false,
page: 1, page: 1,
rowsPerPage: 10, rowsPerPage: 10,
}); });
const paginationLabel = (start: string, end: string, total: string) => { const paginationLabel = (start: number, end: number, total: number) => {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total; if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total; else return start + "-" + end + " ใน " + total;
}; };
@ -315,16 +260,16 @@ const paginationLabel = (start: string, end: string, total: string) => {
รายการสอบแข่งขัน / คัดเลือก รายการสอบแข่งขัน / คัดเลือก
</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-sm"> <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 <q-select
class="col-xs-12 col-sm-3 col-md-2" class="col-xs-12 col-sm-3 col-md-2"
v-model="fiscalyear" v-model="searchYear"
label="ปีงบประมาณ" label="ปีงบประมาณ"
dense dense
emit-value emit-value
map-options map-options
:options="fiscalyearOP" :options="yearOptions"
option-value="id" option-value="id"
option-label="name" option-label="name"
lazy-rules lazy-rules
@ -333,7 +278,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
:borderless="false" :borderless="false"
:outlined="true" :outlined="true"
:hide-dropdown-icon="false" :hide-dropdown-icon="false"
@update:model-value="searchfiscalyear" @update:model-value="filterYear"
/> />
<q-space /> <q-space />
<q-input <q-input
@ -423,15 +368,14 @@ const paginationLabel = (start: string, end: string, total: string) => {
<div class="col-12"> <div class="col-12">
<q-table <q-table
ref="table" ref="table"
:rows="rows"
:columns="columns" :columns="columns"
:rows="UpdataData"
:filter="filterKeyword" :filter="filterKeyword"
row-key="id" row-key="id"
flat flat
bordered bordered
dense dense
class="custom-header-table" class="custom-header-table"
v-bind="attrs"
:visible-columns="visibleColumns" :visible-columns="visibleColumns"
:pagination-label="paginationLabel" :pagination-label="paginationLabel"
v-model:pagination="pagination" v-model:pagination="pagination"
@ -454,7 +398,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
@click="redirectToPage(props.row.id)" @click="redirectToPage(props.row.id)"
> >
<q-td key="id" :props="props"> <q-td key="id" :props="props">
{{ props.row.id }} {{ props.rowIndex + 1 }}
</q-td> </q-td>
<q-td key="examRound" :props="props"> <q-td key="examRound" :props="props">
{{ props.row.examRound }} {{ props.row.examRound }}
@ -463,16 +407,19 @@ const paginationLabel = (start: string, end: string, total: string) => {
{{ props.row.examOrder }} {{ props.row.examOrder }}
</q-td> </q-td>
<q-td key="fiscalYear" :props="props"> <q-td key="fiscalYear" :props="props">
{{ props.row.fiscalYear + 543 }} {{ props.row.fiscalYear }}
</q-td> </q-td>
<q-td key="numberofCandidates" :props="props"> <q-td key="numberOfCandidates" :props="props">
{{ props.row.numberofCandidates }} {{ props.row.numberOfCandidates }}
</q-td> </q-td>
<q-td key="examType" :props="props"> <q-td key="examTypeName" :props="props">
{{ props.row.examType == 1 ? "คัดเลือก" : "สอบแข่งขัน" }} {{ props.row.examTypeName }}
</q-td>
<q-td key="accountStartDate" :props="props">
{{ date2Thai(props.row.accountStartDate) }}
</q-td> </q-td>
<q-td key="accountExpirationDate" :props="props"> <q-td key="accountExpirationDate" :props="props">
{{ textDate(props.row.accountExpirationDate) }} {{ date2Thai(props.row.accountExpirationDate) }}
</q-td> </q-td>
</q-tr> </q-tr>
</template> </template>

2
src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
View file

@ -82,7 +82,7 @@ const step04 = defineAsyncComponent(
); );
const router = useRouter(); const router = useRouter();
const step = ref<number>(4); const step = ref<number>(1);
const stepper = ref<QStepper>(); const stepper = ref<QStepper>();
const nextStep = () => { const nextStep = () => {

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

@ -325,7 +325,7 @@
round round
color="public" color="public"
icon="mdi-content-save-outline" icon="mdi-content-save-outline"
@click="next" @click="clickClose"
> >
<q-tooltip>บันทึก</q-tooltip> <q-tooltip>บันทึก</q-tooltip>
</q-btn> </q-btn>

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

@ -22,15 +22,11 @@
<q-menu> <q-menu>
<q-list style="min-width: 150px"> <q-list style="min-width: 150px">
<q-item clickable v-close-popup> <q-item clickable v-close-popup>
<q-item-section avatar <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
><q-icon color="red" name="mdi-file-pdf"
/></q-item-section>
<q-item-section>ไฟล์ .PDF</q-item-section> <q-item-section>ไฟล์ .PDF</q-item-section>
</q-item> </q-item>
<q-item clickable v-close-popup> <q-item clickable v-close-popup>
<q-item-section avatar <q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
><q-icon color="blue" name="mdi-file-word"
/></q-item-section>
<q-item-section>ไฟล์ .docx</q-item-section> <q-item-section>ไฟล์ .docx</q-item-section>
</q-item> </q-item>
</q-list> </q-list>
@ -51,84 +47,82 @@
<q-menu> <q-menu>
<q-list style="min-width: 150px"> <q-list style="min-width: 150px">
<q-item clickable v-close-popup> <q-item clickable v-close-popup>
<q-item-section avatar <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
><q-icon color="red" name="mdi-file-pdf"
/></q-item-section>
<q-item-section>ไฟล์ .PDF</q-item-section> <q-item-section>ไฟล์ .PDF</q-item-section>
</q-item> </q-item>
<q-item clickable v-close-popup> <q-item clickable v-close-popup>
<q-item-section avatar <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
><q-icon color="green-7" name="mdi-file-excel"
/></q-item-section>
<q-item-section>ไฟล์ .xls</q-item-section> <q-item-section>ไฟล์ .xls</q-item-section>
</q-item> </q-item>
</q-list> </q-list>
</q-menu> </q-menu>
</q-btn> </q-btn>
</div> </div>
<q-space />
<q-btn
class="text-dark"
flat
dense
icon="mdi-fullscreen"
color="add"
@click="dialog = true"
/>
</div> </div>
<q-separator style="margin-top: -1px; z-index: 1" /> <q-separator style="margin-top: -1px; z-index: 1;" />
<q-card bordered class="card-pdf q-ma-md q-pa-md"> <q-card bordered class="card-pdf q-ma-md q-pa-md">
<div class="justify-between items-center align-center q-pb-sm row"> <div
<q-btn class="justify-between items-center align-center q-pb-sm row"
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
> >
<q-icon name="mdi-chevron-left" /> <q-btn
</q-btn> class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-icon name="mdi-chevron-left" />
</q-btn>
<span class="body-2 grey--text"> <span class="body-2 grey--text">
หน้าที่ {{ page }} จาก {{ numOfPages }} หน้าที่ {{ page }} จาก {{ numOfPages }}
</span> </span>
<q-btn <q-btn
class="text-dark bg-grey-4" class="text-dark bg-grey-4"
flat flat
dense dense
@click="page = page < numOfPages ? page + 1 : page" @click="page = page < numOfPages ? page + 1 : page"
>
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
<div class="pdfWidth">
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
</div>
<div
class="justify-between items-center align-center q-pt-sm row"
> >
<q-icon name="mdi-chevron-right" /> <q-btn
</q-btn> class="text-dark bg-grey-4"
</div> flat
<div class="pdfWidth"> dense
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent /> @click="page = page > 1 ? page - 1 : page"
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> --> >
</div> <q-icon name="mdi-chevron-left" />
<div class="justify-between items-center align-center q-pt-sm row"> </q-btn>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-icon name="mdi-chevron-left" />
</q-btn>
<span class="body-2 grey--text"> <span class="body-2 grey--text">
หน้าที่ {{ page }} จาก {{ numOfPages }} หน้าที่ {{ page }} จาก {{ numOfPages }}
</span> </span>
<q-btn <q-btn
class="text-dark bg-grey-4" class="text-dark bg-grey-4"
flat flat
dense dense
@click="page = page < numOfPages ? page + 1 : page" @click="page = page < numOfPages ? page + 1 : page"
> >
<q-icon name="mdi-chevron-right" /> <q-icon name="mdi-chevron-right" />
</q-btn> </q-btn>
</div> </div>
</q-card> </q-card>
<!-- <div class="card-pdf q-ma-md q-pa-md" v-if="tab == 'main'">
<pdf-viewer v-model:PDFV="vuePDFRef" />
</div> -->
<!-- <div class="card-pdf q-ma-md q-pa-md" v-else>
<pdf-viewer v-model:PDFV="vuePDFRef" />
</div> -->
<!-- <pdf-viewer /> -->
</template> </template>
<template v-slot:separator> <template v-slot:separator>
@ -281,21 +275,6 @@
</div> </div>
</div> </div>
</fieldset> </fieldset>
<div class="flex justify-around">
<q-btn
unelevated
label="ออกคำสั่ง"
:color="validateForm() ? 'public' : 'grey'"
:disable="!validateForm()"
/>
<q-btn
class="text-dark"
unelevated
label="ส่งไปลงนาม"
color="grey"
disable
/>
</div>
</div> </div>
</q-form> </q-form>
</template> </template>
@ -326,94 +305,6 @@
<q-tooltip>ต่อไป</q-tooltip> <q-tooltip>ต่อไป</q-tooltip>
</q-btn> --> </q-btn> -->
</div> </div>
<q-dialog
v-model="dialog"
persistent
:maximized="true"
transition-show="slide-up"
transition-hide="slide-down"
>
<q-card class="bg-white text-white">
<!-- <q-bar>
<q-space />
<q-btn dense flat icon="close" v-close-popup>
<q-tooltip>ปิดหน้าต่าง</q-tooltip>
</q-btn>
</q-bar> -->
<div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
<q-btn
icon="close"
unelevated
round
dense
style="color: #ff8080; background-color: #ffdede"
size="12px"
v-close-popup
/>
</div>
<q-card-section bordered class="card-pdf q-ma-md q-pa-md">
<div class="justify-between items-center align-center q-pb-sm row">
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-icon name="mdi-chevron-left" />
</q-btn>
<span class="body-2 grey--text text-black">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
<div class="pdfWidth">
<VuePDF
ref="vuePDFRef"
:pdf="pdfSrc"
:page="page"
fit-parent
:scale="0.1"
/>
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
</div>
<div class="justify-between items-center align-center q-pt-sm row">
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-icon name="mdi-chevron-left" />
</q-btn>
<span class="body-2 grey--text text-black">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
>
<q-icon name="mdi-chevron-right" />
</q-btn>
</div>
</q-card-section>
</q-card>
</q-dialog>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -426,8 +317,6 @@ import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { date2Thai } = mixin; const { date2Thai } = mixin;
const dialog = ref<boolean>(false);
// onUnmounted(() => { // onUnmounted(() => {
// window.removeEventListener("resize", (e: any) => { // window.removeEventListener("resize", (e: any) => {
// myEventHandler(e); // myEventHandler(e);

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

@ -1,32 +1,74 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import { defineAsyncComponent } from "@vue/runtime-core"; import { defineAsyncComponent } from "@vue/runtime-core";
import { useRouter } from "vue-router"; import { useRouter ,useRoute} from "vue-router";
import cardTop from "@/modules/05_placement/components/pass/StatCard.vue"; import cardTop from "@/modules/05_placement/components/pass/StatCard.vue";
import keycloak from "@/plugins/keycloak"; import keycloak from "@/plugins/keycloak";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import { usePlacementDataStore } from "@/modules/05_placement/store";
const DataStore = usePlacementDataStore();
const $q = useQuasar
const mixin = useCounterMixin()
const { messageError } = mixin
let roleAdmin = ref<boolean>(false); let roleAdmin = ref<boolean>(false);
const router = useRouter(); const router = useRouter();
const year = ref<string>("2566"); const route = useRoute();
const round = ref<string>("1"); const examId = route.params.examId;
const title = ref<string>("การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ"); const year = ref<string>("");
const round = ref<string>("");
const title = ref<string>("");
const examData = ref<any>();
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>({ const stat = ref<any>({
total: 5, total: 0,
unContain: 1, unContain: 0,
prepareContain: 3, prepareContain: 0,
contain: 1, contain: 0,
disclaim: 0, disclaim: 0,
}); });
const getStat = async () => {
const examIdString = Array.isArray(examId) ? examId[0] : examId;
await http
.get(config.API.getStatCard(examIdString))
.then((res) =>{
const statCard = res.data.result;
// อัปเดตค่าในตัวแปร stat
stat.value = {
total: statCard.total,
unContain: statCard.unContain,
prepareContain: statCard.prepareContain,
contain: statCard.contain,
disclaim: statCard.disclaim,
};
console.log("🚀 ~ file: Table.vue:96 ~ getStatCard ~ data:", statCard);
})
.catch((e) => {
messageError($q, e);
})
};
onMounted(async () => { onMounted(async () => {
examData.value = await DataStore.DataMainOrig.find((x: any) => x.id == examId);
// console.log("DataStore===>", DataStore.DataMainOrig.find((x: any) => x.id == examId))
title.value = examData.value.examRound;
round.value = examData.value.examOrder;
year.value = examData.value.fiscalYear;
await getStat()
if (keycloak.tokenParsed != null) { if (keycloak.tokenParsed != null) {
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1"); roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
} }
}); });
</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">
@ -59,7 +101,7 @@ onMounted(async () => {
</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">
<div> <div>
<AddTablePosition class="q-pa-none" /> <AddTablePosition :statCard="getStat" class="q-pa-none" @get-stat="getStat"/>
</div> </div>
</q-card> </q-card>
</template> </template>

0
src/modules/05_placement/components/pass/DialogAppoint.vue
View file

6
src/modules/05_placement/components/pass/DialogFooter.vue
View file

@ -29,9 +29,9 @@ const emit = defineEmits([
const updateEdit = (value: Boolean) => { const updateEdit = (value: Boolean) => {
emit("update:editvisible", value); emit("update:editvisible", value);
}; };
const cancel = async () => { // const cancel = async () => {
props.cancel(); // props.cancel();
}; // };
const edit = async () => { const edit = async () => {
updateEdit(!props.editvisible); updateEdit(!props.editvisible);
props.edit(); props.edit();

503
src/modules/05_placement/components/pass/OrgTree.vue Normal file
View file

@ -0,0 +1,503 @@
<script setup lang="ts">
import { useQuasar, QForm } from "quasar";
import { onMounted, reactive, ref } from "vue";
import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
const $q = useQuasar();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { date2Thai, hideLoader, messageError, showLoader, success } = mixin; //ฟังก์ชันกลางที่เรียกใช้
const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
const noData = ref<string>("ไม่พบข้อมูลผังโครงสร้าง");
const checkValidate = ref<boolean>(false);
const myFormPosition = ref<any>();
const selected = ref<string>("")
// Set form field
let dataForm = reactive({
personalId: "",
containDate: new Date(),
posNoId: "",
positionId: "",
positionLevelId: "",
positionLineId: "",
positionPathSideId: "",
positionTypeId: "",
salaryAmount: null,
mouthSalaryAmount: null,
positionSalaryAmount: null,
});
onMounted(() => {
loadTreeData();
})
// โหลดข้อมูลโครงสร้างจาก json
const treeData = ref<Array<any>>([]);
const loadTreeData = async () => {
await http
.get(config.API.orgTree)
.then((res: any) => {
treeData.value = res.data;
})
.catch((e: any) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const search = ref<string>("");
//reset Tree Filter
const filterRef = ref<any>(null)
const resetFilter = () => {
search.value = "";
filterRef.value.focus();
};
const props = defineProps({
personalId: String,
modal: Boolean,
close: {
type: Function,
default: () => console.log('close modal'),
},
});
const myFilterMethod = (node: any, filter: string) => {
const filt = filter;
return ((node.name && node.name == null) || !node.name) && ((node.organizationName && node.organizationName.indexOf(filt) > -1) ||
(node.positionNum && node.positionNum.indexOf(filt) > -1) ||
(node.positionName && node.positionName.indexOf(filt) > -1) ||
(node.governmentCode &&
node.governmentCode.toString().indexOf(filt) > -1) ||
(node.agency && node.agency.indexOf(filt) > -1) ||
(node.government && node.government.indexOf(filt) > -1) ||
(node.department && node.department.indexOf(filt) > -1) ||
(node.pile && node.pile.indexOf(filt) > -1) ||
(node.organizationShortName &&
node.organizationShortName.indexOf(filt) > -1) ||
(node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
(node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
(node.executivePositionSide &&
node.executivePositionSide.indexOf(filt) > -1) ||
(node.positionLevel && node.positionLevel.indexOf(filt) > -1))
}
const validateData = async () => {
checkValidate.value = true;
await myFormPosition.value.validate().then((result: boolean) => {
if (result == false) {
checkValidate.value = false;
}
});
};
const saveAppoint = async () => {
myFormPosition.value.validate().then(async (result: boolean) => {
if (result) {
const dataAppoint = await {
personalId: props.personalId,
containDate: dataForm.containDate,
posNoId: dataForm.posNoId,
positionId: dataForm.positionId,
positionLevelId: dataForm.positionLevelId,
positionLineId: dataForm.positionLineId,
positionPathSideId: dataForm.positionPathSideId,
positionTypeId: dataForm.positionTypeId,
salaryAmount: dataForm.salaryAmount,
mouthSalaryAmount: dataForm.mouthSalaryAmount,
positionSalaryAmount: dataForm.positionSalaryAmount,
};
// console.log("save appoint===>", dataAppoint);
showLoader();
await http
.post(config.API.placementPass(), dataAppoint)
.then((res) => {
console.log("respone=>", res)
success($q, "บันทึกสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await closeAndClear()
await resetFilter()
hideLoader()
});
}
});
};
const editDataStatus = ref<boolean>(false);
const clickEditRow = () => {
editDataStatus.value = true;
};
const closeModal = () => {
if (editDataStatus.value == true) {
$q.dialog({
title: `ข้อมูลมีการแก้ไข`,
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
}).onOk(() => {
editDataStatus.value = false;
closeAndClear()
});
} else {
closeAndClear()
}
}
const closeAndClear = async () => {
await props.close();
editDataStatus.value = false;
selected.value = ""
dataForm.personalId = '';
dataForm.containDate = new Date()
dataForm.posNoId = ""
dataForm.positionId = ""
dataForm.positionLevelId = ""
dataForm.positionLineId = ""
dataForm.positionPathSideId = ""
dataForm.positionTypeId = ""
dataForm.salaryAmount = null
dataForm.mouthSalaryAmount = null;
dataForm.positionSalaryAmount = null
}
// ตำแหน่งเลขที่
const posNoOptions = ref<Object[]>([{
label: '',
value: ''
}]);
// ตำแหน่ง
const positionOptions = ref<Object[]>([{
label: '',
value: ''
}]);
// ด้าน/สาขา
const positionPathSideOptions = ref<Object[]>([{
label: '',
value: ''
}]);
// ตำแหน่งประเภท
const positionTypeOptions = ref<Object[]>([{
label: '',
value: ''
}]);
// สายงาน
const positionLineOptions = ref<Object[]>([{
label: '',
value: ''
}]);
// ระดับ
const positionLevelOptions = ref<Object[]>([{
label: '',
value: ''
}]);
const selectedPosition = async (data: any) => {
if (data.name == null && selected.value != data.keyId) {
console.log("selecteds", data)
editDataStatus.value = true;
selected.value = data.keyId
// posNo Options
posNoOptions.value = [{
label: data.positionNum,
value: data.positionNumId,
}]
dataForm.posNoId = data.positionNumId;
// position Options
positionOptions.value = [{
label: data.positionName,
value: data.positionNameId,
}]
dataForm.positionId = data.positionNameId;
// positionPathSide Options
let positionPathSideArr: any = [];
if (data.positionSideNameObj != null) {
data.positionSideNameObj.map((x: any) => {
positionLevelsArr.push({
label: x.Name,
value: x.Id,
})
})
positionPathSideOptions.value = positionPathSideArr;
dataForm.positionPathSideId = positionPathSideArr.length > 1 || positionPathSideArr.length == 0 ? '' : positionPathSideArr[0].value;
}
// positionType Options
positionTypeOptions.value = [{
label: data.positionType,
value: data.positionTypeId,
}]
dataForm.positionTypeId = data.positionTypeId;
// positionLine Options
positionLineOptions.value = [{
label: data.positionLine,
value: data.positionLineId,
}]
dataForm.positionLineId = data.positionLineId;
// positionLevel Options
let positionLevelsArr: any = [];
if (data.positionLevelObj != null) {
data.positionLevelObj.map((x: any) => {
positionLevelsArr.push({
label: x.Name,
value: x.Id,
})
})
positionLevelOptions.value = positionLevelsArr;
dataForm.positionLevelId = positionLevelsArr.length > 1 || positionLevelsArr.length == 0 ? '' : positionLevelsArr[0].value;
}
} else if (selected.value == data.keyId) {
selected.value = '';
dataForm.posNoId = "";
dataForm.positionId = "";
dataForm.positionLevelId = "";
dataForm.positionLineId = "";
dataForm.positionPathSideId = "";
dataForm.positionTypeId = "";
}
}
</script>
<template>
<q-dialog v-model="props.modal" persistent full-width>
<q-card>
<q-form ref="myFormPosition">
<DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="closeModal" />
<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-6 row">
<q-card flat bordered class="fit q-pa-sm">
<q-scroll-area visible style="height: 70vh">
<q-input outlined dense ref="filterRef" v-model="search" placeholder="ค้นหา"
class="q-mb-sm">
<template v-slot:append>
<q-icon name="mdi-magnify" />
</template>
</q-input>
<div class="q-pa-sm q-gutter-sm">
<q-tree no-transition dense :nodes="treeData" node-key="keyId" :filter="search"
:no-results-label="notFound" :no-nodes-label="noData"
:filter-method="myFilterMethod">
<template v-slot:header-organization="prop">
<div class="col">
<div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
<!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
<div class="text-weight-medium">
{{ prop.node.organizationName }}
</div>
<!--แสดง Total Count PositionNum-->
<!-- <q-badge rounded color="grey-2" text-color="dark"
:label="prop.node.totalPositionCount" /> -->
<q-badge v-if="prop.node.totalPositionVacant > 0" rounded
color="red" outline :label="prop.node.totalPositionVacant" />
<q-space />
</div>
<div class="col items-center q-px-xs q-pt-xs">
<div class="text-weight-medium text-grey-7">
{{ prop.node.governmentCode }}
{{ prop.node.organizationShortName }}
</div>
</div>
</div>
</template>
<template v-slot:header-person="prop">
<q-item clickable :active="selected == prop.node.keyId"
@click="selectedPosition(prop.node)" :disable="prop.node.name != null"
active-class="my-list-link text-primary text-weight-medium"
class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list">
<img v-if="prop.node.avatar == '' ||
prop.node.avatar ==
'https://cdn.quasar.dev/img/boy-avatar.png'
" src="@/assets/avatar_user.jpg" class="col-xs-1 col-sm-2"
style="width: 28px; height: 28px; border-radius: 50%" />
<img v-else :src="prop.node.avatar" class="col-xs-1 col-sm-2"
style="width: 28px; height: 28px; border-radius: 50%" />
<!--=====ตำแหน่งว่าง สีแดง=====-->
<div v-if="prop.node.name == null
" class="q-px-sm text-weight-medium text-red">
ว่าง
</div>
<!--=====หัวหน้า สีเขียว=====-->
<div v-else-if="prop.node.positionLeaderFlag">
<div class="q-px-sm text-weight-medium text-primary">
{{ prop.node.name }}
</div>
</div>
<!--=====ลูกน้อง สีปกติ=====-->
<div v-else>
<div class="q-px-sm text-weight-medium">
{{ prop.node.name }}
</div>
</div>
<!--ต่อท้ายชื่อคน แสดงสีปกติ-->
<div class="q-pr-sm">
{{ prop.node.positionName }}
</div>
<div class="q-pr-sm">
{{ prop.node.positionNum }}
</div>
<div class="q-pr-sm">
{{ prop.node.positionLevel }}
</div>
<q-icon v-if="prop.node.positionLeaderFlag" class="q-mr-sm" size="15px"
color="primary" name="mdi-bookmark"></q-icon>
<q-space />
</q-item>
</template>
</q-tree>
</div>
</q-scroll-area>
</q-card>
</div>
<div class="col-xs-12 col-sm-6">
<q-card flat bordered class="fit q-pa-sm">
<q-scroll-area visible style="height: 70vh">
<div class="row col-12 q-col-gutter-xs">
<div class="col-xs-12 col-sm-12 col-md-12"></div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker menu-class-name="modalfix" v-model="dataForm.containDate"
:locale="'th'" autoApply :enableTimePicker="false" week-start="0">
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input class="full-width inputgreen cursor-pointer" outlined dense
lazy-rules :model-value="date2Thai(new Date(dataForm.containDate))
" :rules="[
(val: string) =>
!!val ||
`${'วันที่รายงานตัว'}`,
]" :label="`${'วันที่รายงานตัว'}`" hide-bottom-space>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer"
style="color: var(--q-primary)">
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<q-space />
<div class="col-xs-6 col-sm-6 col-md-6">
<q-select class="full-width inputgreen cursor-pointer custom-input" outlined
standout dense hide-bottom-space lazy-rules :options="posNoOptions"
v-model="dataForm.posNoId" :label="`${'ตำแหน่งเลขที่'}`" map-options />
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-select outlined class="full-width inputgreen cursor-pointer custom-input"
standout dense hide-bottom-space lazy-rules :options="positionOptions"
v-model="dataForm.positionId" :label="`${'ตำแหน่ง'}`" map-options />
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-select outlined class="full-width inputgreen cursor-pointer custom-input"
standout dense hide-bottom-space lazy-rules
:options="positionPathSideOptions" v-model="dataForm.positionPathSideId"
:label="`${'ด้าน/สาขา'}`" map-options />
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-select outlined class="full-width inputgreen cursor-pointer custom-input"
standout dense hide-bottom-space lazy-rules :options="positionTypeOptions"
v-model="dataForm.positionTypeId" :label="`${'ประเภทตำแหน่ง'}`"
map-options />
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-select outlined class="full-width inputgreen cursor-pointer custom-input"
standout dense hide-bottom-space lazy-rules :options="positionLineOptions"
v-model="dataForm.positionLineId" :label="`${'สายงาน'}`" map-options />
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-select outlined class="full-width inputgreen cursor-pointer custom-input"
standout dense lazy-rules :options="positionLevelOptions"
v-model="dataForm.positionLevelId" :label="`${'ระดับ'}`" hide-bottom-space
:rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]" emit-value
map-options />
</div>
<div class="col-sx-12 col-sm-12 col-md-12">
<q-separator inset size="2px" class="q-my-md" />
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input outlined dense lazy-rules v-model="dataForm.salaryAmount"
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
:label="`${'เงินเดือน'}`" @update:modelValue="clickEditRow" type="number"
hide-bottom-space />
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input outlined dense lazy-rules v-model="dataForm.positionSalaryAmount"
:rules="[
(val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
]" :label="`${'เงินประจำตำแหน่ง'}`" @update:modelValue="clickEditRow"
type="number" hide-bottom-space />
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input outlined dense lazy-rules v-model="dataForm.mouthSalaryAmount" :rules="[
(val) =>
!!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
]" :label="`${'เงินค่าตอบแทนรายเดือน'}`" @update:modelValue="clickEditRow"
type="number" hide-bottom-space />
</div>
</div>
</q-scroll-area>
</q-card>
</div>
</div>
</q-card-section>
<q-separator />
<DialogFooter :editvisible="true" :validate="validateData" :save="saveAppoint"
v-model:modalEdit="editDataStatus" />
</q-form>
</q-card>
</q-dialog>
</template>
<style scoped lang="scss">
.q-tree__node-header {
padding: 0px;
margin-top: 0px;
border-radius: 4px;
outline: 0;
}
.my-list-link {
color: rgb(118, 168, 222);
border-radius: 5px;
background: #a3d3fb48 !important;
font-weight: 600;
border: 1px solid rgba(175, 185, 196, 0.217);
/* box-shadow: 1px 1px 7px 1px rgba(41, 95, 255, 0.15) !important; */
}
</style>

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

File diff suppressed because it is too large Load diff

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

@ -1,39 +1,40 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref, watch } 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 { 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 { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import type { CheckboxItem } from "@/modules/05_placement/interface/index/Main";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const modal = ref<boolean>(); const { success, showLoader, hideLoader, date2Thai, modalConfirm } = mixin;
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: { personalId: {
type: Object, type: String,
required: true, default: ""
}, },
validate: { validate: {
type: Function, type: Function,
default: () => console.log("not function"), default: () => console.log("not function"),
}, },
}); });
const rows = ref<any[]>([
{
university: props.getdetail.university || "-",
degree: props.getdetail.degree || "-",
major: props.getdetail.major || "-",
graduation: "2022-01-01",
},
]); const rows = ref<any[]>([
]);
//--------------------(แปลงวันที่เป็นไทย)------------------------------------//
// const graduationDate = new Date(graduationExample);
// rows.value[0].graduation = date2Thai(graduationDate, false, false);
//--------------------------------------------------------------------//
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "university", name: "university",
@ -76,86 +77,112 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
const myForm = ref<any>(); const myForm = ref<any>([]);
const checkValidate = ref<boolean>(false); const personalForm = ref<any>([]);
const selection = ref<number[]>([]); const selection = ref<any>([]);
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:
"เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ",
},
];
const $q = useQuasar(); const $q = useQuasar();
function isRequired(val: any): boolean | string { function isRequired(val: any): boolean | string {
return !!val || "กรุณาเลือกไฟล์เอกสารหลักฐาน"; return !!val || "กรุณาเลือกไฟล์เอกสารหลักฐาน";
} }
const validateData = () => {
const selectedIds = selection.value;
const selectedItems = checkboxItems.filter((item) =>
selectedIds.includes(item.id)
);
watch(props, () => {
if (props.Modal === true) {
// console.log(props.getdetail);
fetchData();
}
});
const validateData = () => {
const selectedIds = personalForm.value.isProperty;
const selectedItems = personalForm.value.isProperty.filter(
(item: any) => item.value === true
// selectedIds.includes(item.value)
);
return ( return (
selectedItems.length > 0 && selectedItems.length === selectedIds.length selectedItems.length > 0 || selectedItems.length === selectedIds.length
); );
}; };
const ClickSave = () => { const ClickSave = () => {
const isValid = validateData(); const isValid = validateData();
if (isValid) { if (isValid) {
console.log(selection.value); // props.close();
console.log("rerer", props.Modal); // props.validate();
props.close(); // putpersonalForm();
props.validate(); modalConfirm(
selection.value = []; $q,
"การยืนยัน",
"ยืนยันการบันทึกการคัดกรองคุณสมบัติ",
putpersonalForm
);
} else { } else {
success($q, "กรอกให้ครบ"); success($q, "กรอกให้ครบ");
console.log();
}
};
const fetchData = async () => {
showLoader();
await http
.get(config.API.getDatapersonal(props.personalId))
.then((res) => {
personalForm.value = res.data.result;
personalForm.value.education.map((e: any) => {
rows.value.push({
university: e.name,
degree: e.degree,
major: e.field,
graduation: e.finishDate,
});
});
})
.catch((e) => {
console.log("e", e);
})
.finally(() => {
hideLoader();
});
};
const formBmaofficer = (val: string) => {
switch (val) {
case "officer":
return "ขรก.กทม. สามัญ";
break;
case "employee_perm":
return "ลูกจ้างประจำ";
break;
case "employee_temp":
return "ลูกจ้างชั่วคราว";
break;
default:
"";
} }
}; };
const close = async () => { const close = async () => {
props.close(); props.close();
selection.value = []; selection.value = [];
rows.value = [];
};
const putpersonalForm = async () => {
await http
.put(
config.API.putProperty("0a846508-4932-40de-9a9e-5b519492217c"),
personalForm.value.isProperty
)
.then((res) => {
success($q, res.data.message);
})
.catch((e) => {
console.log(e);
})
.finally(() => {
props.close();
props.validate();
});
}; };
</script> </script>
<template> <template>
@ -164,7 +191,7 @@ const close = async () => {
<q-form ref="myForm"> <q-form ref="myForm">
<div class="row"> <div class="row">
<DialogHeader <DialogHeader
:title="`รายละเอียดของ ${props.getdetail.fullName}`" :title="`รายละเอียดของ ${personalForm.fullName}`"
@click="close" @click="close"
/> />
</div> </div>
@ -176,7 +203,10 @@ const close = async () => {
<div class="row items-center q-pa-xs header-text"> <div class="row items-center q-pa-xs header-text">
ข้อมูลทั่วไป ข้อมูลทั่วไป
<span class="check-officer" <span class="check-officer"
><q-icon name="mdi-check" /> ข้าราชการฯ กทม</span ><q-icon
name="mdi-check"
v-if="personalForm.bmaofficer !== null && ''"
/>{{ formBmaofficer(personalForm.bmaofficer) }}</span
> >
</div> </div>
<div class="row q-pa-xs"> <div class="row q-pa-xs">
@ -186,10 +216,10 @@ const close = async () => {
</div> </div>
<div class="col-4 sub-text"> <div class="col-4 sub-text">
<div class="q-pb-md"> <div class="q-pb-md">
{{ props.getdetail.profileID }} {{ personalForm.idCard }}
</div> </div>
<div> <div>
{{ props.getdetail.dateOfBirth }} {{ date2Thai(personalForm.dateOfBirth) }}
</div> </div>
</div> </div>
<div class="col-2 header-sub-text"> <div class="col-2 header-sub-text">
@ -198,10 +228,10 @@ const close = async () => {
</div> </div>
<div class="col-3 sub-text"> <div class="col-3 sub-text">
<div class="q-pb-md"> <div class="q-pb-md">
{{ props.getdetail.fullName }} {{ personalForm.fullName }}
</div> </div>
<div> <div>
{{ props.getdetail.gender }} {{ personalForm.gender }}
</div> </div>
</div> </div>
</div> </div>
@ -213,7 +243,7 @@ const close = async () => {
<div class="row q-pa-xs"> <div class="row q-pa-xs">
<div class="col-3 header-sub-text">ที่อยู่</div> <div class="col-3 header-sub-text">ที่อยู่</div>
<div class="col-9 sub-text"> <div class="col-9 sub-text">
{{ props.getdetail.address }} {{ personalForm.address }}
</div> </div>
</div> </div>
</q-card> </q-card>
@ -231,6 +261,7 @@ const close = async () => {
virtual-scroll virtual-scroll
:virtual-scroll-sticky-size-start="48" :virtual-scroll-sticky-size-start="48"
dense dense
hide-bottom
> >
</q-table> </q-table>
</q-card> </q-card>
@ -252,31 +283,31 @@ const close = async () => {
<div class="col-4 q-pa-xs"> <div class="col-4 q-pa-xs">
<div class="header-sub-text-exam-2">คะแนนที่ได้</div> <div class="header-sub-text-exam-2">คะแนนที่ได้</div>
<div class="sub-text-exam"> <div class="sub-text-exam">
{{ props.getdetail.scoreResult.scoreAFull }} {{ personalForm.pointTotalA }}
</div> </div>
<div class="sub-text-exam"> <div class="sub-text-exam">
{{ props.getdetail.scoreResult.scoreBFull }} {{ personalForm.pointTotalB }}
</div> </div>
<div class="sub-text-exam"> <div class="sub-text-exam">
{{ props.getdetail.scoreResult.scoreCFull }} {{ personalForm.pointTotalC }}
</div> </div>
<div class="sub-text-exam"> <div class="sub-text-exam">
{{ props.getdetail.scoreResult.scoreSumFull }} {{ personalForm.pointTotal }}
</div> </div>
</div> </div>
<div class="col-4 q-pa-xs header-sub-text-exam-2"> <div class="col-4 q-pa-xs header-sub-text-exam-2">
<div class="header-sub-text-exam-2">ผลการสอบ</div> <div class="header-sub-text-exam-2">ผลการสอบ</div>
<div class="sub-text-exam"> <div class="sub-text-exam">
{{ props.getdetail.scoreResult.scoreA }} {{ personalForm.pointA }}
</div> </div>
<div class="sub-text-exam"> <div class="sub-text-exam">
{{ props.getdetail.scoreResult.scoreB }} {{ personalForm.pointB }}
</div> </div>
<div class="sub-text-exam"> <div class="sub-text-exam">
{{ props.getdetail.scoreResult.scoreC }} {{ personalForm.pointC }}
</div> </div>
<div class="sub-text-exam"> <div class="sub-text-exam">
{{ props.getdetail.scoreResult.scoreSum }} {{ personalForm.point }}
</div> </div>
</div> </div>
</div> </div>
@ -292,10 +323,10 @@ const close = async () => {
</div> </div>
<div class="col-5 sub-text-exam"> <div class="col-5 sub-text-exam">
<div class="q-pb-sm"> <div class="q-pb-sm">
{{ props.getdetail.scoreResult.examResult }} {{ personalForm.pass }}
</div> </div>
<div class="q-pb-sm">{{ props.getdetail.number }}</div> <div class="q-pb-sm">{{ personalForm.examNumber }}</div>
<div class="q-pb-sm">{{ props.getdetail.examCount }}</div> <div class="q-pb-sm">{{ personalForm.examRound }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -308,12 +339,16 @@ const close = async () => {
<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, index) of personalForm.isProperty"
:key="index"
class="q-pa-sm"
>
<q-checkbox <q-checkbox
size="xs" size="xs"
v-model="selection" v-model="item.value"
:val="item.id" :val="item.value"
:label="item.label" :label="item.name"
keep-color keep-color
color="teal" color="teal"
:rules="[isRequired]" :rules="[isRequired]"

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

@ -43,18 +43,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, useAttrs } from "vue"; import { ref, useAttrs } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
const $q = useQuasar(); const $q = useQuasar();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { dialogMessage } = mixin;
const editvisible = ref<boolean>(false);
const attrs = ref<any>(useAttrs()); const attrs = ref<any>(useAttrs());
const paging = ref<boolean>(true); 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 modalDelete = ref<boolean>(false);
const props = defineProps({ const props = defineProps({
inputfilter: String, inputfilter: String,
inputvisible: Array, inputvisible: Array,
@ -143,8 +137,8 @@ const props = defineProps({
roleAdmin: Boolean roleAdmin: Boolean
}); });
const pagination = ref({ const pagination = ref({
sortBy: "desc", sortBy: "number",
descending: false, descending: true,
page: 1, page: 1,
rowsPerPage: 10, rowsPerPage: 10,
}); });

11
src/modules/05_placement/interface/index/Main.ts
View file

@ -1,10 +1,14 @@
import type { zipCodeOption } from "../../components/PersonalDetail/profileType"; import type { zipCodeOption } from "../../components/PersonalDetail/profileType";
interface DataOption { interface DataOption {
id: number | string; id: number|null;
name: string; name:string|null;
disable?: boolean;
}
interface DataOption1 {
id: string|null;
name:string|null;
disable?: boolean; disable?: boolean;
} }
interface DataOptionInsignia { interface DataOptionInsignia {
id: string; id: string;
name: string; name: string;
@ -137,6 +141,7 @@ export type {
AddressOps, AddressOps,
Pagination, Pagination,
EduOps, EduOps,
DataOption1,
InsigniaOps, InsigniaOps,
CheckboxItem, CheckboxItem,
Property, Property,

6
src/modules/05_placement/interface/request/Main.ts
View file

@ -4,8 +4,10 @@ interface FormPlacementMainData {
examRound: string; examRound: string;
examOrder: number; examOrder: number;
fiscalYear: number; fiscalYear: number;
numberofCandidates: number; numberOfCandidates: number;
examType: number; examTypeValue:string;
examTypeName: string;
accountStartDate: string;
accountExpirationDate: string; accountExpirationDate: string;
isExpired?: boolean; isExpired?: boolean;
} }

32
src/modules/05_placement/interface/request/placement.ts
View file

@ -1,5 +1,5 @@
interface TableName { interface TableName {
profileID: string; personalId: string;
position: number; position: number;
fullName: string; fullName: string;
dateOfBirth: string; dateOfBirth: string;
@ -7,14 +7,20 @@ interface TableName {
ExamOrder: number; ExamOrder: number;
unitId: string; unitId: string;
UnitGroup: string; UnitGroup: string;
positionNumber:string;
positionPath:string;
Unit: string; Unit: string;
ReportingDate: string; //วันที่รายงานตัว reportingDate: string; //วันที่รายงานตัว
BMAOfficer: string; bmaOfficer: string;
Status: string; statusId: string;
checkList: any; checkList: any;
address: string; address: string;
university: string; university: string;
degree: string; degree: string;
disclaim: string;
profilePhoto:string;
organizationName:string;
organizationShortName:string;
major: string; major: string;
remark: string; remark: string;
number: number; number: number;
@ -31,5 +37,19 @@ interface TableName {
examResult: string; examResult: string;
}; };
} }
interface PartialTableName {
export type { TableName }; personalId: string;
fullName: string;
idCard: string;
profilePhoto: string;
organizationName: string;
organizationShortName: string;
positionNumber: string;
positionPath: string;
reportingDate: string;
bmaOfficer: string;
number: number;
statusId: string;
deferment: string;
}
export type { TableName ,PartialTableName};

2
src/modules/05_placement/router.ts
View file

@ -43,7 +43,7 @@ export default [
}, },
}, },
{ {
path: "/placement/detail", path: "/placement/pass/:examId",
name: "placementDetail", name: "placementDetail",
component: PlacementDetail, component: PlacementDetail,
meta: { meta: {

36
src/modules/05_placement/store.ts
View file

@ -104,77 +104,77 @@ export const usePlacementDataStore = defineStore("placement", () => {
(DataMainYear.value = val); (DataMainYear.value = val);
const DataMain = (val: FormPlacementMainData[]) => (DataMainOrig.value = val); const DataMain = (val: FormPlacementMainData[]) => (DataMainOrig.value = val);
const DataUpdateMain = ( const DataUpdateMain = (
filter_1: number | null, filter_1: number | string,
filter_2: number | null, filter_2: string | null,
filter_3: boolean filter_3: boolean
) => { ) => {
DataMainUpdate.value = []; DataMainUpdate.value = [];
if (filter_1 === null && filter_2 === 0 && filter_3 === false) { if (filter_1 === "all" && filter_2 === "all" && filter_3 === false) {
// console.log('case 1'); // console.log('case 1');
// return DataMainUpdate.value = DataMainOrig.value; อันเก่า // return DataMainUpdate.value = DataMainOrig.value; อันเก่า
return (DataMainUpdate.value = DataMainOrig.value.filter( return (DataMainUpdate.value = DataMainOrig.value.filter(
(item) => item.isExpired === filter_3 (item) => item.isExpired === filter_3
)); ));
} else if (filter_1 === null && filter_2 === null && filter_3 === false) { } else if (filter_1 === "all" && filter_2 === "all" && filter_3 === false) {
// console.log('case 1.1'); // console.log('case 1.1');
return (DataMainUpdate.value = DataMainOrig.value.filter( return (DataMainUpdate.value = DataMainOrig.value.filter(
(item) => item.isExpired === filter_3 (item) => item.isExpired === filter_3
)); ));
} else if (filter_1 !== null && filter_2 === 0 && filter_3 === false) { } else if (filter_1 !== "all" && filter_2 === "all" && filter_3 === false) {
// console.log('case 2'); // console.log('case 2');
return (DataMainUpdate.value = DataMainOrig.value.filter( return (DataMainUpdate.value = DataMainOrig.value.filter(
(item) => item.examOrder === filter_1 && item.isExpired === filter_3 (item) => item.examOrder === filter_1 && item.isExpired === filter_3
)); ));
} else if (filter_1 !== null && filter_2 === null && filter_3 === false) { } else if (filter_1 !== "all" && filter_2 === "all" && filter_3 === false) {
// console.log('case 2.1'); // console.log('case 2.1');
return (DataMainUpdate.value = DataMainOrig.value.filter( return (DataMainUpdate.value = DataMainOrig.value.filter(
(item) => item.examOrder === filter_1 && item.isExpired === filter_3 (item) => item.examOrder === filter_1 && item.isExpired === filter_3
)); ));
} else if (filter_1 !== null && filter_2 !== 0 && filter_3 === false) { } else if (filter_1 !== "all" && filter_2 !== "all" && filter_3 === false) {
// console.log('case 2.2'); // console.log('case 2.2');
return (DataMainUpdate.value = DataMainOrig.value.filter( return (DataMainUpdate.value = DataMainOrig.value.filter(
(item) => (item) =>
item.examOrder === filter_1 && item.examOrder === filter_1 &&
item.examType === filter_2 && item.examTypeValue === filter_2 &&
item.isExpired === filter_3 item.isExpired === filter_3
)); ));
} else if (filter_1 === null && filter_2 !== 0 && filter_3 === false) { } else if (filter_1 === "all" && filter_2 !== "all" && filter_3 === false) {
// console.log('case 3'); // console.log('case 3');
return (DataMainUpdate.value = DataMainOrig.value.filter( return (DataMainUpdate.value = DataMainOrig.value.filter(
(item) => item.examType === filter_2 && item.isExpired === filter_3 (item) => item.examTypeValue === filter_2 && item.isExpired === filter_3
)); ));
} else if (filter_1 === null && filter_2 === 0 && filter_3 === true) { } else if (filter_1 === "all" && filter_2 === "all" && filter_3 === true) {
// console.log('case 3.1'); // console.log('case 3.1');
return (DataMainUpdate.value = DataMainOrig.value.filter( return (DataMainUpdate.value = DataMainOrig.value.filter(
(item) => item.isExpired === filter_3 (item) => item.isExpired === filter_3
)); ));
} else if (filter_1 === null && filter_2 === null && filter_3 === true) { } else if (filter_1 === "all" && filter_2 === "all" && filter_3 === true) {
// console.log('case 3.2'); // console.log('case 3.2');
return (DataMainUpdate.value = DataMainOrig.value.filter( return (DataMainUpdate.value = DataMainOrig.value.filter(
(item) => item.isExpired === filter_3 (item) => item.isExpired === filter_3
)); ));
} else if (filter_1 !== null && filter_2 === 0 && filter_3 === true) { } else if (filter_1 !== "all" && filter_2 === "all" && filter_3 === true) {
// console.log('case 3.3'); // console.log('case 3.3');
return (DataMainUpdate.value = DataMainOrig.value.filter( return (DataMainUpdate.value = DataMainOrig.value.filter(
(item) => item.examOrder == filter_1 && item.isExpired == filter_3 (item) => item.examOrder == filter_1 && item.isExpired == filter_3
)); ));
} else if (filter_1 !== null && filter_2 === null && filter_3 === true) { } else if (filter_1 !== "all" && filter_2 === "all" && filter_3 === true) {
// console.log('case 3.4'); // console.log('case 3.4');
return (DataMainUpdate.value = DataMainOrig.value.filter( return (DataMainUpdate.value = DataMainOrig.value.filter(
(item) => item.examOrder == filter_1 && item.isExpired == filter_3 (item) => item.examOrder == filter_1 && item.isExpired == filter_3
)); ));
} else if (filter_1 !== null && filter_2 !== 0 && filter_3 === true) { } else if (filter_1 !== "all" && filter_2 !== "all" && filter_3 === true) {
// console.log('case 3.5'); // console.log('case 3.5');
return (DataMainUpdate.value = DataMainOrig.value.filter( return (DataMainUpdate.value = DataMainOrig.value.filter(
(item) => (item) =>
item.examOrder == filter_1 && item.examOrder == filter_1 &&
item.examType == filter_2 && item.examTypeValue == filter_2 &&
item.isExpired == filter_3 item.isExpired == filter_3
)); ));
} else if (filter_1 === null && filter_2 !== 0 && filter_3 === true) { } else if (filter_1 === "all" && filter_2 !== "all" && filter_3 === true) {
// console.log('case 3.6'); // console.log('case 3.6');
return (DataMainUpdate.value = DataMainOrig.value.filter( return (DataMainUpdate.value = DataMainOrig.value.filter(
(item) => item.examType == filter_2 && item.isExpired == filter_3 (item) => item.examTypeValue == filter_2 && item.isExpired == filter_3
)); ));
} }
}; };