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

# 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

View file

@ -10,6 +10,7 @@ import env from "../index";
const organizationPath = `${env.API_URI_ORG_SERVICE}/Organization/`;
const postionMasterPath = `${env.API_URI_ORG_SERVICE}/PositionMaster`;
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/`;
@ -83,8 +84,7 @@ export default {
getPositionNumberIdByOcId: (OcId: string) =>
`${postionMasterPath}/position-number/Oc/${OcId}`,
/**
* api publish
*/
organizationEmployeePosition: `${organizationEmployeePosition}`,
organizationEmployeePositionId: (id: string) =>
`${organizationEmployeePosition}${id}`,
};

View file

@ -1,11 +1,21 @@
/**
* api
*/
import env from "../index";
const placement = `${env.API_PLACEMENT_URI}/Placement/placement/`;
const placement = `${env.API_URI}/Placement/placement`;
const orgTree = `${env.API_URI_ORG_TREE}`;
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
placementPersonalId: (personalId: string) =>
`${placement}personal/${personalId}`,

View file

@ -8,10 +8,12 @@ const env = ref<string>(process.env.NODE_ENV || "development");
const config = ref<any>({
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_ORG_SERVICE: "https://localhost:7056/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://bma-ehr.frappet.synology.me/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://bma-ehr.frappet.synology.me/api/v1",
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",
},
test: {
@ -31,9 +35,12 @@ const config = ref<any>({
// API_URI: "https://localhost:5010",
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_EMPLOYEE_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_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",
},
});
@ -46,6 +53,9 @@ const API_REPORT_URI = ref<string>(config.value[env.value].API_REPORT_URI);
const API_URI_ORG_SERVICE = ref<string>(
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 API_URI_PROFILE_SERVICE = ref<string>(
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>(
config.value[env.value].API_PLACEMENT_URI
);
const API_URI_ORG_TREE = ref<string>(config.value[env.value].API_URI_ORG_TREE);
export default {
env: env.value,
@ -61,7 +72,9 @@ export default {
API_CANDIDATE_URI: API_CANDIDATE_URI.value,
API_REPORT_URI: API_REPORT_URI.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_PLACEMENT_URI: API_PLACEMENT_URI.value,
API_URI_ORG_TREE: API_URI_ORG_TREE.value,
MEET_URI: MEET_URI.value,
};

View file

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

View file

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

View file

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

View file

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

View file

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

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

View file

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

View file

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

View file

@ -309,9 +309,7 @@ const tittleHistory = ref<string>(
);
const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal
const profileId = ref<string>(
route.params.id ? route.params.id.toString() : ""
);
const profileId = ref<string>(route.params.id ? route.params.id.toString():'');
const checkValidate = ref<boolean>(false); //validate data
const rows = ref<RequestItemsObject[]>([]);
const filter = ref<string>(""); //search data table
@ -480,7 +478,7 @@ onMounted(async () => {
});
const fetchData = async () => {
if (profileId.value) {
if (profileId.value!='') {
loaderPage(true);
await http
.get(config.API.profileNopaidId(profileId.value))

View file

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

View file

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

View file

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

View file

@ -22,15 +22,11 @@
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="red" name="mdi-file-pdf"
/></q-item-section>
<q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
<q-item-section>ไฟล .PDF</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="blue" name="mdi-file-word"
/></q-item-section>
<q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
<q-item-section>ไฟล .docx</q-item-section>
</q-item>
</q-list>
@ -51,84 +47,82 @@
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="red" name="mdi-file-pdf"
/></q-item-section>
<q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
<q-item-section>ไฟล .PDF</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="green-7" name="mdi-file-excel"
/></q-item-section>
<q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
<q-item-section>ไฟล .xls</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
<q-space />
<q-btn
class="text-dark"
flat
dense
icon="mdi-fullscreen"
color="add"
@click="dialog = true"
/>
</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">
<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"
<div
class="justify-between items-center align-center q-pb-sm row"
>
<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">
หนาท {{ page }} จาก {{ numOfPages }}
</span>
<span class="body-2 grey--text">
หนาท {{ page }} จาก {{ numOfPages }}
</span>
<q-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page < numOfPages ? page + 1 : page"
<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 />
<!-- <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>
</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-btn
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">
หนาท {{ page }} จาก {{ numOfPages }}
</span>
<span class="body-2 grey--text">
หนาท {{ 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-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>
<!-- <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 v-slot:separator>
@ -281,21 +275,6 @@
</div>
</div>
</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>
</q-form>
</template>
@ -326,94 +305,6 @@
<q-tooltip>อไป</q-tooltip>
</q-btn> -->
</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>
</template>
<script setup lang="ts">
@ -426,8 +317,6 @@ import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const dialog = ref<boolean>(false);
// onUnmounted(() => {
// window.removeEventListener("resize", (e: any) => {
// myEventHandler(e);

View file

@ -1,32 +1,74 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
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 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);
const router = useRouter();
const year = ref<string>("2566");
const round = ref<string>("1");
const title = ref<string>("การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ");
const route = useRoute();
const examId = route.params.examId;
const year = ref<string>("");
const round = ref<string>("");
const title = ref<string>("");
const examData = ref<any>();
const AddTablePosition = defineAsyncComponent(
() => import("@/modules/05_placement/components/pass/Table.vue")
);
const stat = ref<any>({
total: 5,
unContain: 1,
prepareContain: 3,
contain: 1,
total: 0,
unContain: 0,
prepareContain: 0,
contain: 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 () => {
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) {
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
}
});
</script>
<template>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row">
@ -59,7 +101,7 @@ onMounted(async () => {
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
<div>
<AddTablePosition class="q-pa-none" />
<AddTablePosition :statCard="getStat" class="q-pa-none" @get-stat="getStat"/>
</div>
</q-card>
</template>

View file

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

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>

File diff suppressed because it is too large Load diff

View file

@ -1,39 +1,40 @@
<script setup lang="ts">
import { ref } from "vue";
import { ref, watch } from "vue";
import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
import { useQuasar } from "quasar";
import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
import type { QTableProps } from "quasar";
import type { CheckboxItem } from "@/modules/05_placement/interface/index/Main";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
const mixin = useCounterMixin(); //
const modal = ref<boolean>();
const { success } = mixin;
const { success, showLoader, hideLoader, date2Thai, modalConfirm } = mixin;
const save = ref<boolean>(true);
const props = defineProps({
Modal: Boolean,
close: {
type: Function,
default: () => console.log("not function"),
},
getdetail: {
type: Object,
required: true,
personalId: {
type: String,
default: ""
},
validate: {
type: 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"]>([
{
name: "university",
@ -76,86 +77,112 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const myForm = ref<any>();
const checkValidate = ref<boolean>(false);
const selection = ref<number[]>([]);
const myForm = ref<any>([]);
const personalForm = ref<any>([]);
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();
function isRequired(val: any): boolean | string {
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 (
selectedItems.length > 0 && selectedItems.length === selectedIds.length
selectedItems.length > 0 || selectedItems.length === selectedIds.length
);
};
const ClickSave = () => {
const isValid = validateData();
if (isValid) {
console.log(selection.value);
console.log("rerer", props.Modal);
props.close();
props.validate();
selection.value = [];
// props.close();
// props.validate();
// putpersonalForm();
modalConfirm(
$q,
"การยืนยัน",
"ยืนยันการบันทึกการคัดกรองคุณสมบัติ",
putpersonalForm
);
} else {
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 () => {
props.close();
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>
<template>
@ -164,7 +191,7 @@ const close = async () => {
<q-form ref="myForm">
<div class="row">
<DialogHeader
:title="`รายละเอียดของ ${props.getdetail.fullName}`"
:title="`รายละเอียดของ ${personalForm.fullName}`"
@click="close"
/>
</div>
@ -176,7 +203,10 @@ const close = async () => {
<div class="row items-center q-pa-xs header-text">
อมลทวไป
<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 class="row q-pa-xs">
@ -186,10 +216,10 @@ const close = async () => {
</div>
<div class="col-4 sub-text">
<div class="q-pb-md">
{{ props.getdetail.profileID }}
{{ personalForm.idCard }}
</div>
<div>
{{ props.getdetail.dateOfBirth }}
{{ date2Thai(personalForm.dateOfBirth) }}
</div>
</div>
<div class="col-2 header-sub-text">
@ -198,10 +228,10 @@ const close = async () => {
</div>
<div class="col-3 sub-text">
<div class="q-pb-md">
{{ props.getdetail.fullName }}
{{ personalForm.fullName }}
</div>
<div>
{{ props.getdetail.gender }}
{{ personalForm.gender }}
</div>
</div>
</div>
@ -213,7 +243,7 @@ const close = async () => {
<div class="row q-pa-xs">
<div class="col-3 header-sub-text">อย</div>
<div class="col-9 sub-text">
{{ props.getdetail.address }}
{{ personalForm.address }}
</div>
</div>
</q-card>
@ -231,6 +261,7 @@ const close = async () => {
virtual-scroll
:virtual-scroll-sticky-size-start="48"
dense
hide-bottom
>
</q-table>
</q-card>
@ -252,31 +283,31 @@ const close = async () => {
<div class="col-4 q-pa-xs">
<div class="header-sub-text-exam-2">คะแนนทได</div>
<div class="sub-text-exam">
{{ props.getdetail.scoreResult.scoreAFull }}
{{ personalForm.pointTotalA }}
</div>
<div class="sub-text-exam">
{{ props.getdetail.scoreResult.scoreBFull }}
{{ personalForm.pointTotalB }}
</div>
<div class="sub-text-exam">
{{ props.getdetail.scoreResult.scoreCFull }}
{{ personalForm.pointTotalC }}
</div>
<div class="sub-text-exam">
{{ props.getdetail.scoreResult.scoreSumFull }}
{{ personalForm.pointTotal }}
</div>
</div>
<div class="col-4 q-pa-xs header-sub-text-exam-2">
<div class="header-sub-text-exam-2">ผลการสอบ</div>
<div class="sub-text-exam">
{{ props.getdetail.scoreResult.scoreA }}
{{ personalForm.pointA }}
</div>
<div class="sub-text-exam">
{{ props.getdetail.scoreResult.scoreB }}
{{ personalForm.pointB }}
</div>
<div class="sub-text-exam">
{{ props.getdetail.scoreResult.scoreC }}
{{ personalForm.pointC }}
</div>
<div class="sub-text-exam">
{{ props.getdetail.scoreResult.scoreSum }}
{{ personalForm.point }}
</div>
</div>
</div>
@ -292,10 +323,10 @@ const close = async () => {
</div>
<div class="col-5 sub-text-exam">
<div class="q-pb-sm">
{{ props.getdetail.scoreResult.examResult }}
{{ personalForm.pass }}
</div>
<div class="q-pb-sm">{{ props.getdetail.number }}</div>
<div class="q-pb-sm">{{ props.getdetail.examCount }}</div>
<div class="q-pb-sm">{{ personalForm.examNumber }}</div>
<div class="q-pb-sm">{{ personalForm.examRound }}</div>
</div>
</div>
</div>
@ -308,12 +339,16 @@ const close = async () => {
<div class="col-12 row items-center q-pa-sm header-text">
การคดกรองคณสมบ
</div>
<div v-for="item of checkboxItems" :key="item.id" class="q-pa-sm">
<div
v-for="(item, index) of personalForm.isProperty"
:key="index"
class="q-pa-sm"
>
<q-checkbox
size="xs"
v-model="selection"
:val="item.id"
:label="item.label"
v-model="item.value"
:val="item.value"
:label="item.name"
keep-color
color="teal"
:rules="[isRequired]"

View file

@ -43,18 +43,12 @@
<script setup lang="ts">
import { ref, useAttrs } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
const $q = useQuasar();
const mixin = useCounterMixin(); //
const { dialogMessage } = mixin;
const editvisible = ref<boolean>(false);
const attrs = ref<any>(useAttrs());
const paging = ref<boolean>(true);
const table = ref<any>(null);
const filterRef = ref<any>(null);
const modalPublish = ref<boolean>(false);
const modalDelete = ref<boolean>(false);
const props = defineProps({
inputfilter: String,
inputvisible: Array,
@ -143,8 +137,8 @@ const props = defineProps({
roleAdmin: Boolean
});
const pagination = ref({
sortBy: "desc",
descending: false,
sortBy: "number",
descending: true,
page: 1,
rowsPerPage: 10,
});

View file

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

View file

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

View file

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

View file

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

View file

@ -104,77 +104,77 @@ export const usePlacementDataStore = defineStore("placement", () => {
(DataMainYear.value = val);
const DataMain = (val: FormPlacementMainData[]) => (DataMainOrig.value = val);
const DataUpdateMain = (
filter_1: number | null,
filter_2: number | null,
filter_1: number | string,
filter_2: string | null,
filter_3: boolean
) => {
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');
// return DataMainUpdate.value = DataMainOrig.value; อันเก่า
return (DataMainUpdate.value = DataMainOrig.value.filter(
(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');
return (DataMainUpdate.value = DataMainOrig.value.filter(
(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');
return (DataMainUpdate.value = DataMainOrig.value.filter(
(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');
return (DataMainUpdate.value = DataMainOrig.value.filter(
(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');
return (DataMainUpdate.value = DataMainOrig.value.filter(
(item) =>
item.examOrder === filter_1 &&
item.examType === filter_2 &&
item.examTypeValue === filter_2 &&
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');
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');
return (DataMainUpdate.value = DataMainOrig.value.filter(
(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');
return (DataMainUpdate.value = DataMainOrig.value.filter(
(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');
return (DataMainUpdate.value = DataMainOrig.value.filter(
(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');
return (DataMainUpdate.value = DataMainOrig.value.filter(
(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');
return (DataMainUpdate.value = DataMainOrig.value.filter(
(item) =>
item.examOrder == filter_1 &&
item.examType == filter_2 &&
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.6');
return (DataMainUpdate.value = DataMainOrig.value.filter(
(item) => item.examType == filter_2 && item.isExpired == filter_3
(item) => item.examTypeValue == filter_2 && item.isExpired == filter_3
));
}
};