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

Merge commit '5bfdd3cc2a' into develop

Browse source
This commit is contained in:
Tanyalak 2023-07-14 09:13:49 +07:00
commit aebf13cdc7
53 changed files with 6943 additions and 6197 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

12
src/modules/02_organizational/router.ts
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",

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>
<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>

609
src/modules/03_recruiting/views/02_qualify/Period.vue
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>

7
src/modules/04_registry/components/Information/layout.vue
View file

@ -1,6 +1,11 @@
<template>
<Information :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
<Government :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
<Government
:notiNoEdit="notiNoEdit"
v-model:statusEdit="statusEdit"
profileType="profileType"
employeeClass="employeeClass"
/>
<Address :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
<Family :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
<!-- <Certicate v-model:statusEdit="statusEdit" :profileType="profileType" /> -->

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

@ -309,7 +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.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
@ -478,7 +478,7 @@ onMounted(async () => {
});
const fetchData = async () => {
if (profileId.value) {
if (profileId.value!='') {
loaderPage(true);
await http
.get(config.API.profileNopaidId(profileId.value))

396
src/modules/05_placement/components/Main.vue
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,141 @@ 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();
rows.value = [];
http
.get(config.API.MainDetail(val))
.then(async (res) => {
dataPlacement.value = res.data.result;
DataStore.DataMainOrig = dataPlacement.value;
console.log(DataStore.DataMainOrig);
// rows.value = DataStore.DataMainOrig;
const dataArr: any = [];
await DataStore.DataMainOrig.map((e: any) => {
dataArr.push({
id: e.id,
examRound: e.examRound,
examOrder: e.examOrder,
examTypeName: e.examTypeName,
examTypeValue: e.examTypeValue,
accountEndDate: date2Thai(e.accountEndDate),
accountExpirationDate: date2Thai(e.accountExpirationDate),
accountStartDate: date2Thai(e.accountStartDate),
fiscalYear: e.fiscalYear,
numberOfCandidates: e.numberOfCandidates,
});
});
rows.value = dataArr;
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/personal-list/${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 +200,81 @@ 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 () => {
rows.value = [];
if (examType.value !== undefined && examType.value !== null) {
await DataStore.DataUpdateMain(
examTime.value,
examType.value,
expiredAccount.value
);
const dataArr: any = [];
await DataStore.DataMainUpdate.map((e: any) => {
dataArr.push({
id: e.id,
examRound: e.examRound,
examOrder: e.examOrder,
examTypeName: e.examTypeName,
examTypeValue: e.examTypeValue,
accountEndDate: date2Thai(e.accountEndDate),
accountExpirationDate: date2Thai(e.accountExpirationDate),
accountStartDate: date2Thai(e.accountStartDate),
fiscalYear: e.fiscalYear,
numberOfCandidates: e.numberOfCandidates,
});
});
rows.value = dataArr;
}
};
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 +282,13 @@ const expiredAccountFilter = async () => {
};
const paging = ref<boolean>(true);
const pagination = ref({
sortBy: "desc",
descending: false,
const pagination = ref({
sortBy: "accountStartDate",
descending: true,
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 +299,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 +317,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 +407,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 +437,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 +446,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">
{{ props.row.accountStartDate }}
</q-td>
<q-td key="accountExpirationDate" :props="props">
{{ textDate(props.row.accountExpirationDate) }}
{{ props.row.accountExpirationDate }}
</q-td>
</q-tr>
</template>

21
src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
View file

@ -23,7 +23,14 @@
@update:model-value="searchFilterTable"
/>
<div>
<q-btn size="12px" flat round color="add" icon="mdi-plus" @click="clickAdd">
<q-btn
size="12px"
flat
round
color="add"
icon="mdi-plus"
@click="clickAdd"
>
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
<!-- <q-menu>
<q-list style="min-width: 100px">
@ -542,7 +549,7 @@ const clickDelete = (id: string) => {
persistent: true,
})
.onOk(async () => {
await deleteData(id);
// await deleteData(id);
})
.onCancel(() => {})
.onDismiss(() => {});
@ -609,7 +616,7 @@ const fiscalYearFilter = async () => {
};
const OrderType = ref<string>("");
const OrderTypeOption = reactive<DataOption[]>([{ id: "", name: "ทั้งหมด" }]);
const OrderTypeOption = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
const addedOrderTypeValues: string[] = [];
const OrderTypeFilter = async () => {
// API
@ -633,7 +640,8 @@ const OrderTypeFilter = async () => {
// }
if (!addedOrderTypeValues.includes(OrderTypeValue)) {
OrderTypeOption.push({
id: OrderTypeValue,
// id: OrderTypeValue ?? 0,
id: OrderTypeOption.length,
name: OrderTypeValue,
});
addedOrderTypeValues.push(OrderTypeValue);
@ -651,7 +659,7 @@ const OrderStatus = ref<string>("");
const OrderStatusText = ref<FormOrderPlacementMainData[]>(
DataStore.DataMainOrigOrder
);
const OrderStatusOption = reactive<DataOption[]>([{ id: "", name: "ทั้งหมด" }]);
const OrderStatusOption = reactive<DataOption[]>([{ id: 1, name: "ทั้งหมด" }]);
const addedOrderStatusValues: string[] = [];
const OrderStatusFilter = async () => {
// API
@ -679,7 +687,8 @@ const OrderStatusFilter = async () => {
if (!addedOrderStatusValues.includes(OrderStatusValue)) {
OrderStatusOption.push({
id: OrderStatusValue,
// id: OrderStatusValue,
id: OrderStatusOption.length,
name: OrderStatusValue,
});
addedOrderStatusValues.push(OrderStatusValue);

13
src/modules/05_placement/components/OrderPlacement/addOrderPlacement.vue
View file

@ -37,7 +37,6 @@
<li>{{ rejectMessage }}</li>
</div>
</q-card-actions>
<ExamForm :fetchStep="fetchStep" :status="status" />
</q-card>
</q-step>
<q-step
@ -54,9 +53,7 @@
"
v-if="stepPayment"
>
<q-card bordered class="q-pa-lg">
<ExamPayment :fetchStep="fetchStep" :status="status" />
</q-card>
<q-card bordered class="q-pa-lg"> </q-card>
</q-step>
<q-step
:done="step > 4"
@ -65,9 +62,7 @@
title="เลือก"
:icon="stepRaw >= 4 ? 'mdi-check-bold' : 'mdi-flag-variant'"
>
<q-card bordered class="q-pa-lg">
<ExamFinished :fetchStep="fetchStep" :status="status" />
</q-card>
<q-card bordered class="q-pa-lg"> </q-card>
</q-step>
<q-step
:done="step > 5"
@ -76,9 +71,7 @@
title="รายละเอียดคำสั่งและแนบท้าย"
:icon="stepRaw >= 4 ? 'mdi-check-bold' : 'mdi-flag-variant'"
>
<q-card bordered class="q-pa-lg">
<ExamFinished :fetchStep="fetchStep" :status="status" />
</q-card>
<q-card bordered class="q-pa-lg"> </q-card>
</q-step>
</q-stepper>
<q-dialog :model-value="modalConsend" persistent>

12
src/modules/05_placement/components/OrderPlacement/step/step01.vue
View file

@ -449,14 +449,14 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
case "typeOrderOption":
update(() => {
typeOrderOption.value = typeOrderOptionFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;
case "byOrderOption":
update(() => {
byOrderOption.value = byOrderOptionFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;
@ -464,7 +464,7 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
case "registerOption":
update(() => {
registerOption.value = registerOptionFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;
@ -472,7 +472,7 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
case "announceOption":
update(() => {
announceOption.value = announceOptionFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;
@ -480,14 +480,14 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
case "positionOption":
update(() => {
positionOption.value = positionOptionFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;
case "testOption":
update(() => {
testOption.value = testOptionFilter.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: DataOption) => v.name!.indexOf(val) > -1
);
});
break;

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

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

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

@ -22,11 +22,15 @@
<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>
@ -47,82 +51,84 @@
<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"
<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-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-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>
<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 < numOfPages ? page + 1 : page"
>
<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-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>
<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>
@ -275,6 +281,21 @@
</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>
@ -302,9 +323,97 @@
</q-btn>
<!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
<q-tooltip>ต่อไป</q-tooltip>
</q-btn> -->
<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">
@ -317,6 +426,8 @@ import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const dialog = ref<boolean>(false);
// onUnmounted(() => {
// window.removeEventListener("resize", (e: any) => {
// myEventHandler(e);

329
src/modules/05_placement/components/PersonalDetail/Detail.vue
View file

@ -3,89 +3,316 @@
import { onMounted, reactive, ref } from "vue";
import { useDataStore } from "@/stores/data";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
import Informationvue from "@/modules/05_placement/components/PersonalDetail/Information/layout.vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import Informationvue from "@/modules/05_placement/components/PersonalDetail/Information/Information.vue";
import Addressvue from "@/modules/05_placement/components/PersonalDetail/Information/Address.vue";
import EducationVue from "@/modules/05_placement/components/PersonalDetail/Education.vue";
import Certicate from "@/modules/05_placement/components/PersonalDetail/Information/Certicate.vue";
import ExamResult from "@/modules/05_placement/components/PersonalDetail/ExamResult.vue";
import Qualification from "@/modules/05_placement/components/PersonalDetail/Qualification.vue";
import Family from "@/modules/05_placement/components/PersonalDetail/Information/Family.vue";
import Familyvue from "@/modules/05_placement/components/PersonalDetail/Information/Family.vue";
import {
AddressDataDefualt,
FamilyDataDefualt,
} from "@/modules/05_placement/interface/index/Main";
import type {
Property,
PointExam,
Education,
Family,
Address,
Certificate,
} from "@/modules/05_placement/interface/index/Main";
import type { Information } from "@/modules/05_placement/components/PersonalDetail/profileType";
const $q = useQuasar(); // show dialog
const router = useRouter();
const store = useDataStore();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { showLoader, hideLoader, messageError } = mixin;
const { changeTab } = store;
const statusEdit = ref<boolean>(false);
const profileType = ref<string>("");
const route = useRoute();
const examId = ref<string>(route.params.personalId.toString());
const examId = ref<string>(
route.params.personalId ? route.params.personalId.toString() : ""
);
const FormData = reactive<any>({
fullName: examId,
const ExamDataDefualt: PointExam = {
pointA: 0,
pointB: 0,
pointC: 0,
pointTotalA: 0,
pointTotalB: 0,
pointTotalC: 0,
point: 0,
pointTotal: 0,
examNumber: 0,
examRound: 0,
pass: "",
};
const InformationDataDefualt: Information = {
idCard: "",
prefix: "",
prefixId: "",
fullName: "",
firstname: "",
lastname: "",
nationality: "",
race: "",
dateOfBirth: new Date(),
age: "",
telephone: "",
gender: "",
genderId: "",
relationship: "",
relationshipId: "",
bloodGroup: "",
bloodGroupId: "",
religion: "",
religionId: "",
};
const personalData = ref({
id: "",
fullName: "",
});
const QualificationData = ref<Property[]>([]);
const ExamData = ref<PointExam>(ExamDataDefualt);
const InformationData = ref<Information>(InformationDataDefualt);
const EducationData = ref<Education[]>([]);
const FamilyData = ref<Family>(FamilyDataDefualt);
const AddressData = ref<Address>(AddressDataDefualt);
const CertificateData = ref<Certificate[]>([]);
onMounted(async () => {
// await checkProfileData();
// await fetchData();
await changeTab("information");
// await checkProfileData();
await fetchData();
await changeTab("information");
});
const fetchData = async () => {
showLoader();
await http
.get(config.API.placementPersonalId(examId.value))
.then((res: any) => {
const data = res.data.result;
// data.value = data;
// console.log(data);
personalData.value.fullName = data.fullName;
personalData.value.id = data.personalId;
InformationData.value.idCard = data.idCard;
InformationData.value.fullName = data.fullName;
InformationData.value.firstname = data.firstname;
InformationData.value.lastname = data.lastname;
InformationData.value.nationality = data.nationality;
InformationData.value.race = data.race;
InformationData.value.genderId = data.genderId;
InformationData.value.prefixId = data.prefixId;
InformationData.value.relationshipId = data.relationshipId;
InformationData.value.religionId = data.religionId;
InformationData.value.bloodGroupId = data.bloodGroupId;
InformationData.value.dateOfBirth = new Date(data.dateOfBirth);
InformationData.value.age = data.age;
InformationData.value.telephone = data.telephone;
AddressData.value.registAddress = data.registAddress ?? "";
AddressData.value.currentAddress = data.currentAddress ?? "";
AddressData.value.registSame = data.registSame ? "1" : "0";
AddressData.value.registSubDistrict = data.registSubDistrict ?? "";
AddressData.value.registSubDistrictId = data.registSubDistrictId ?? "";
AddressData.value.registZipCode = data.registZipCode ?? "";
AddressData.value.registDistrict = data.registDistrict ?? "";
AddressData.value.registDistrictId = data.registDistrictId ?? "";
AddressData.value.registProvince = data.registProvince ?? "";
AddressData.value.registProvinceId = data.registProvinceId ?? "";
AddressData.value.currentSubDistrict = data.currentSubDistrict ?? "";
AddressData.value.currentSubDistrictId = data.currentSubDistrictId ?? "";
AddressData.value.currentZipCode = data.currentZipCode ?? "";
AddressData.value.currentDistrict = data.currentDistrict ?? "";
AddressData.value.currentDistrictId = data.currentDistrictId ?? "";
AddressData.value.currentProvince = data.currentProvince ?? "";
AddressData.value.currentProvinceId = data.currentProvinceId ?? "";
FamilyData.value.couple = data.couple ? "1" : "0";
FamilyData.value.marryPrefix = data.marryPrefix ?? "";
FamilyData.value.marryPrefixId = data.marryPrefixId ?? "";
FamilyData.value.marryFirstName = data.marryFirstName ?? "";
FamilyData.value.marryLastName = data.marryLastName ?? "";
FamilyData.value.marryOccupation = data.marryOccupation ?? "";
FamilyData.value.fatherPrefix = data.fatherPrefix ?? "";
FamilyData.value.fatherPrefixId = data.fatherPrefixId ?? "";
FamilyData.value.fatherFirstName = data.fatherFirstName ?? "";
FamilyData.value.fatherLastName = data.fatherLastName ?? "";
FamilyData.value.fatherOccupation = data.fatherOccupation ?? "";
FamilyData.value.motherPrefix = data.motherPrefix ?? "";
FamilyData.value.motherPrefixId = data.motherPrefixId ?? "";
FamilyData.value.motherFirstName = data.motherFirstName ?? "";
FamilyData.value.motherLastName = data.motherLastName ?? "";
FamilyData.value.motherOccupation = data.motherOccupation ?? "";
ExamData.value.pointA = data.pointA;
ExamData.value.pointB = data.pointB;
ExamData.value.pointC = data.pointC;
ExamData.value.point = data.point;
ExamData.value.pointTotalA = data.pointTotalA;
ExamData.value.pointTotalB = data.pointTotalB;
ExamData.value.pointTotalC = data.pointTotalC;
ExamData.value.pointTotal = data.pointTotal;
ExamData.value.examNumber = data.examNumber;
ExamData.value.examRound = data.examRound;
ExamData.value.pass = data.pass;
QualificationData.value = data.isProperty;
let listRow: Education[] = [];
data.education.map((row: any) => {
listRow.push({
id: row.id ?? "",
educationLevel: row.educationLevel ?? "",
institute: row.institute ?? "",
degree: row.degree ?? "",
field: row.field ?? "",
gpa: row.gpa ?? "",
country: row.country ?? "",
duration: row.duration ?? "",
other: row.other ?? "",
fundName: row.fundName ?? "",
durationYear: row.durationYear ?? 0,
finishDate: row.finishDate ?? new Date(),
isDate: row.isDate ?? "",
startDate: row.startDate ? new Date(row.startDate).getFullYear() : 0,
endDate: row.endDate ? new Date(row.endDate).getFullYear() : 0,
positionPath: row.positionPath ?? "",
isEducation: row.isEducation ?? "",
});
});
EducationData.value = listRow;
let listCert: Certificate[] = [];
data.certificates.map((row: any) => {
listCert.push({
id: row.id ?? "",
certificateNo: row.certificateNo ?? "",
issuer: row.issuer ?? "",
issueDate: new Date(row.issueDate) ?? new Date(),
expireDate: new Date(row.expireDate) ?? new Date(),
certificateType: row.certificateType ?? "",
});
});
CertificateData.value = listCert;
})
.catch((e: any) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
</script>
<template>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row q-pb-sm">
<div class="header-text">
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm"
@click="router.go(-1)" />
รายละเอียดของ {{ FormData.fullName }}
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row q-pb-sm">
<div class="header-text">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.go(-1)"
/>
รายละเอียดของ {{ personalData.fullName }}
</div>
<div class="q-pb-lg">
<q-card class="row q-pb-lg">
<div id="information" name="1" class="col-12 q-pa-sm">
<Informationvue v-model:statusEdit="statusEdit" :profileType="profileType" />
</div>
</div>
<div class="q-pb-lg">
<q-card class="row q-pb-lg">
<div id="information" name="1" class="col-12 q-pa-sm">
<Informationvue
v-model:statusEdit="statusEdit"
v-model:data="InformationData"
:fetch="fetchData"
/>
<div class="col-12 q-px-md"><q-separator size="4px" /></div>
<Addressvue
v-model:statusEdit="statusEdit"
v-model:data="AddressData"
:fetch="fetchData"
/>
</div>
<div id="family" name="10" class="col-12 q-pa-sm" >
<div class="col-12 q-px-md"><q-separator size="4px"/></div>
<Family v-model:statusEdit="statusEdit" />
</div>
<div id="family" name="10" class="col-12 q-pa-sm">
<div class="col-12 q-px-md"><q-separator size="4px" /></div>
<Familyvue
v-model:statusEdit="statusEdit"
v-model:data="FamilyData"
:fetch="fetchData"
/>
</div>
<div id="certicate" name="2" class="col-12 q-pa-sm" >
<div class="col-12 q-px-md"><q-separator size="4px"/></div>
<Certicate v-model:statusEdit="statusEdit" :profileType="profileType" />
</div>
<div id="certicate" name="2" class="col-12 q-pa-sm">
<div class="col-12 q-px-md"><q-separator size="4px" /></div>
<Certicate
v-model:statusEdit="statusEdit"
:profileType="profileType"
v-model:data="CertificateData"
:fetch="fetchData"
/>
</div>
<div id="education" name="3" class="col-12 q-pa-sm" >
<div class="col-12 q-px-md"><q-separator size="4px"/></div>
<EducationVue v-model:statusEdit="statusEdit" />
</div>
<div id="education" name="3" class="col-12 q-pa-sm">
<div class="col-12 q-px-md"><q-separator size="4px" /></div>
<EducationVue
v-model:statusEdit="statusEdit"
v-model:data="EducationData"
:fetch="fetchData"
/>
</div>
<div id="examresult" name="4" class="col-12 q-pa-sm" >
<div class="col-12 q-px-md"><q-separator size="4px"/></div>
<ExamResult />
</div>
<div id="examresult" name="4" class="col-12 q-pa-sm">
<div class="col-12 q-px-md"><q-separator size="4px" /></div>
<ExamResult v-model:data="ExamData" />
</div>
<div id="qualification" name="5" class="col-12 q-pa-sm" >
<div class="col-12 q-px-md"><q-separator size="4px"/></div>
<Qualification v-model:statusEdit="statusEdit" />
</div>
</q-card>
</div>
<div id="qualification" name="5" class="col-12 q-pa-sm">
<div class="col-12 q-px-md"><q-separator size="4px" /></div>
<Qualification
v-model:statusEdit="statusEdit"
v-model:data="QualificationData"
:fetch="fetchData"
/>
</div>
</q-card>
</div>
</template>
<style lang="scss" scoped>
.header-text {
font-size: 24px;
font-weight: 700;
line-height: 32px;
letter-spacing: 0.0025em;
color: #35373C;
font-size: 24px;
font-weight: 700;
line-height: 32px;
letter-spacing: 0.0025em;
color: #35373c;
}
.information:target {
padding-top: 84px;
padding-top: 84px;
}
.horizontal-line {
background-color: #F4F4F4;
height: 5px;
background-color: #f4f4f4;
height: 5px;
}
</style>
</style>

148
src/modules/05_placement/components/PersonalDetail/Education.vue
View file

@ -13,25 +13,36 @@ import type {
DataProps,
} from "@/modules/05_placement/interface/request/Education";
import type { ResponseObject } from "@/modules/05_placement/interface/response/Education";
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
import HistoryTable from "@/components/TableHistory.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type { EduOps } from "@/modules/05_placement/interface/index/Main";
import type {
EduOps,
Education,
DataOption,
optionData,
} from "@/modules/05_placement/interface/index/Main";
import type { QTableProps } from "quasar";
import type { PropType } from "vue";
const props = defineProps({
statusEdit: {
type: Boolean,
required: true,
},
fetch: {
type: Function,
default: () => console.log("not function"),
},
data: {
type: Array as PropType<Education[]>,
default: [],
},
});
const $q = useQuasar();
const store = useProfileDataStore();
const { profileData, changeProfileColumns } = store;
const dataStore = useDataStore();
const { loaderPage } = dataStore;
const mixin = useCounterMixin();
const { success, dateToISO, date2Thai, messageError, showLoader, hideLoader } =
mixin;
@ -74,14 +85,14 @@ const tittleHistory = ref<string>("ประวัติแก้ไขประ
const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
const profileId = ref<string>('');
const profileId = ref<string>("");
// const profileId = ref<string>(route.params.id.toString());
const rows = ref<RequestItemsObject[]>([]);
const rows = ref<Education[]>(props.data);
const filter = ref<string>(""); //search data table
const visibleColumns = ref<String[]>([]);
profileData.education.columns.length == 0
? (visibleColumns.value = [
"level",
"educationLevel",
"institute",
"degree",
"field",
@ -99,11 +110,11 @@ profileData.education.columns.length == 0
: (visibleColumns.value = profileData.education.columns);
const columns = ref<QTableProps["columns"]>([
{
name: "level",
name: "educationLevel",
align: "left",
label: "ระดับศึกษา",
sortable: true,
field: "level",
field: "educationLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
@ -459,9 +470,10 @@ watch(visibleColumns, async (count: String[], prevCount: String[]) => {
});
onMounted(async () => {
// await fetchLevel();
// await fetchPositionPath();
// await fetchData();
await fetchLevel();
await fetchPositionPath();
await props.fetch();
rows.value = props.data;
});
const fetchLevel = async () => {
@ -470,8 +482,8 @@ const fetchLevel = async () => {
.get(config.API.educationLevel)
.then((res) => {
const data = res.data.result;
let option: DataOption[] = [];
data.map((r: DataOption) => {
let option: optionData[] = [];
data.map((r: optionData) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
Ops.value.levelOptions = option;
@ -491,8 +503,8 @@ const fetchPositionPath = async () => {
.get(config.API.positionPath)
.then((res) => {
const data = res.data.result;
let option: DataOption[] = [];
data.map((r: DataOption) => {
let option: optionData[] = [];
data.map((r: optionData) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
Ops.value.positionPathOptions = option;
@ -511,7 +523,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
case "levelOptions":
update(() => {
Ops.value.levelOptions = OpsFilter.value.levelOptions.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: optionData) => v.name.indexOf(val) > -1
);
});
break;
@ -519,7 +531,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
update(() => {
Ops.value.positionPathOptions =
OpsFilter.value.positionPathOptions.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: optionData) => v.name.indexOf(val) > -1
);
});
break;
@ -528,45 +540,6 @@ const filterSelector = (val: any, update: Function, refData: string) => {
}
};
const fetchData = async () => {
showLoader();
await http
.get(config.API.profileEduId(profileId.value))
.then((res) => {
let data = res.data.result;
rows.value = [];
data.map((e: ResponseObject) => {
rows.value.push({
id: e.id,
level: e.educationLevel,
levelId: e.educationLevelId,
positionPath: e.positionPath,
positionPathId: e.positionPathId,
institute: e.institute,
degree: e.degree,
field: e.field,
gpa: e.gpa,
country: e.country,
duration: e.duration,
durationYear: e.durationYear,
other: e.other,
fundName: e.fundName,
finishDate: new Date(e.finishDate),
startDate: new Date(e.startDate).getFullYear(),
endDate: new Date(e.endDate).getFullYear(),
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
/**
* กดดูข้อมูลก่อนหน้า
*/
@ -592,8 +565,18 @@ const clickNext = async () => {
*/
const getData = () => {
const row = rows.value[rowIndex.value];
levelId.value = row.levelId;
positionPathId.value = row.positionPathId;
const filter = OpsFilter.value.levelOptions.filter(
(r: any) => r.name == row.educationLevel
);
const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
(r: any) => r.name == row.positionPath
);
const result = filter.length > 0 ? filter[0].id : "";
const resultPath =
filterPositionPath.length > 0 ? filterPositionPath[0].id : "";
levelId.value = result;
positionPathId.value = resultPath;
institute.value = row.institute;
degree.value = row.degree;
field.value = row.field;
@ -660,15 +643,9 @@ const clickSave = async () => {
* บันทึกเพิ่มข้อมูล
*/
const saveData = async () => {
// const filter = OpsFilter.value.levelOptions.filter(
// (r: any) => r.id == levelId.value
// );
// const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
// (r: any) => r.id == positionPathId.value
// );
showLoader();
await http
.post(config.API.profileEduId(profileId.value), {
.post(config.API.placementEducationId(route.params.personalId.toString()), {
id: id.value,
// educationLevel: filter[0].name,
educationLevelId: levelId.value,
@ -679,7 +656,7 @@ const saveData = async () => {
gpa: gpa.value,
country: country.value,
duration: duration.value,
durationYear: durationYear.value,
durationYear: Number(durationYear.value),
other: other.value,
fundName: fundName.value,
finishDate: dateToISO(finishDate.value),
@ -694,7 +671,8 @@ const saveData = async () => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
await props.fetch();
rows.value = props.data;
});
};
@ -710,7 +688,7 @@ const editData = async () => {
// );
showLoader();
await http
.put(config.API.profileEduId(id.value), {
.put(config.API.placementEducationId(route.params.personalId.toString()), {
id: id.value,
// educationLevel: filter[0].name,
educationLevelId: levelId.value,
@ -721,10 +699,10 @@ const editData = async () => {
gpa: gpa.value,
country: country.value,
duration: duration.value,
durationYear: durationYear.value,
durationYear: Number(durationYear.value),
other: other.value,
fundName: fundName.value,
finishDate: dateToISO(finishDate.value),
finishDate: new Date(finishDate.value),
startDate: new Date(`${startDate.value}-01-01`),
endDate: new Date(`${endDate.value}-01-01`),
})
@ -736,7 +714,8 @@ const editData = async () => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
await props.fetch();
rows.value = props.data;
});
};
@ -754,7 +733,7 @@ const clickDelete = async () => {
.onOk(async () => {
showLoader();
await http
.delete(config.API.profileEduId(id.value))
.delete(config.API.placementEducationId(id.value))
.then((res) => {
success($q, "ลบข้อมูลสำเร็จ");
modal.value = false;
@ -763,11 +742,13 @@ const clickDelete = async () => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
await props.fetch();
rows.value = props.data;
});
})
.onCancel(async () => {
await fetchData();
await props.fetch();
rows.value = props.data;
});
};
@ -799,13 +780,26 @@ const clickClose = async () => {
* @param _props ค่า props ใน row ที่เลือก
*/
const selectData = async (_props: DataProps) => {
const filter = OpsFilter.value.levelOptions.filter(
(r: any) => r.name == _props.row.educationLevel
);
const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
(r: any) => r.name == _props.row.positionPath
);
const result = filter.length > 0 ? filter[0].id : "";
const resultPath =
filterPositionPath.length > 0 ? filterPositionPath[0].id : "";
// console.log(_props.row);
modalEdit.value = true;
modal.value = true;
edit.value = false;
rawItem.value = _props.row;
rowIndex.value = _props.rowIndex;
levelId.value = _props.row.levelId;
positionPathId.value = _props.row.positionPathId;
levelId.value = result;
positionPathId.value = resultPath;
// levelId.value = _props.row.levelId;
// positionPathId.value = _props.row.positionPathId;
institute.value = _props.row.institute;
degree.value = _props.row.degree;
field.value = _props.row.field;

178
src/modules/05_placement/components/PersonalDetail/ExamResult.vue
View file

@ -1,101 +1,137 @@
<script setup lang="ts">
import type { PropType } from "vue";
import type { PointExam } from "@/modules/05_placement/interface/index/Main";
const props = defineProps({
data: {
type: Object as PropType<PointExam>,
default: {
pointA: 0,
pointB: 0,
pointC: 0,
pointTotalA: 0,
pointTotalB: 0,
pointTotalC: 0,
point: 0,
pointTotal: 0,
examNumber: 0,
examRound: 0,
pass: "",
},
},
});
</script>
<template>
<div class="row col-12 q-px-lg q-pt-lg q-pb-sm no-border">
<q-icon name="mdi-briefcase-edit" size="1.5em" color="grey-5" class="q-pr-md" />
<span class="text-bold text-subtitle2">ผลการสอบ</span>
</div>
<div class="row q-px-md">
<div class="col-7">
<q-card class="card-exam">
<div class="row q-px-md q-py-sm">
<div class="col q-pa-xs header-sub-text-exam">
<div class="q-pb-xs"> ประเภท </div>
<div class="q-pb-xs"> ภาค ก </div>
<div class="q-pb-xs"> ภาค ข </div>
<div class="q-pb-xs"> ภาค ค </div>
<div> รวมทั้งหมด </div>
</div>
<div class="col q-pa-xs">
<div class="header-sub-text-exam-2 q-pb-xs">คะแนนเต็ม</div>
<div class="sub-text-exam q-pb-xs">200</div>
<div class="sub-text-exam q-pb-xs">200</div>
<div class="sub-text-exam q-pb-xs">100</div>
<div class="sub-text-exam ">500</div>
</div>
<div class="col q-pa-xs header-sub-text-exam-2">
<div class="header-sub-text-exam-2 q-pb-xs">คะแนนที่ได้</div>
<div class="sub-text-exam q-pb-xs">133</div>
<div class="sub-text-exam q-pb-xs">149</div>
<div class="sub-text-exam q-pb-xs">100</div>
<div class="sub-text-exam q-pb-xs">382</div>
</div>
</div>
</q-card>
</div>
<div class="col q-pl-xl">
<q-card class="q-pt-xs">
<div class="header-text-right q-px-xs">ผลการสอบ</div>
<div class="sub-text-right q-px-xs q-pb-sm">ผ่าน</div>
<div class="header-text-right q-px-xs">ลำดับที่สอบได้</div>
<div class="sub-text-right q-px-xs q-pb-sm">3</div>
<div class="header-text-right q-px-xs">จำนวนครั้งที่สมัครสอบ</div>
<div class="sub-text-right q-px-xs q-pb-sm">5</div>
</q-card>
<div class="row col-12 q-px-lg q-pt-lg q-pb-sm no-border">
<q-icon
name="mdi-briefcase-edit"
size="1.5em"
color="grey-5"
class="q-pr-md"
/>
<span class="text-bold text-subtitle2">ผลการสอบ</span>
</div>
<div class="row q-px-md">
<div class="col-7">
<q-card class="card-exam">
<div class="row q-px-md q-py-sm">
<div class="col q-pa-xs header-sub-text-exam">
<div class="q-pb-xs">ประเภท</div>
<div class="q-pb-xs">ภาค ก</div>
<div class="q-pb-xs">ภาค ข</div>
<div class="q-pb-xs">ภาค ค</div>
<div>รวมทั้งหมด</div>
</div>
<div class="col q-pa-xs">
<div class="header-sub-text-exam-2 q-pb-xs">คะแนนเต็ม</div>
<div class="sub-text-exam q-pb-xs">
{{ props.data.pointTotalA }}
</div>
<div class="sub-text-exam q-pb-xs">
{{ props.data.pointTotalB }}
</div>
<div class="sub-text-exam q-pb-xs">
{{ props.data.pointTotalC }}
</div>
<div class="sub-text-exam">{{ props.data.pointTotal }}</div>
</div>
<div class="col q-pa-xs header-sub-text-exam-2">
<div class="header-sub-text-exam-2 q-pb-xs">คะแนนที่ได้</div>
<div class="sub-text-exam q-pb-xs">{{ props.data.pointA }}</div>
<div class="sub-text-exam q-pb-xs">{{ props.data.pointB }}</div>
<div class="sub-text-exam q-pb-xs">{{ props.data.pointC }}</div>
<div class="sub-text-exam q-pb-xs">{{ props.data.point }}</div>
</div>
</div>
</q-card>
</div>
<div class="col q-pl-xl">
<q-card class="q-pt-xs">
<div class="header-text-right q-px-xs">ผลการสอบ</div>
<div class="sub-text-right q-px-xs q-pb-sm">{{ props.data.pass }}</div>
<div class="header-text-right q-px-xs">ลำดับที่สอบได้</div>
<div class="sub-text-right q-px-xs q-pb-sm">
{{ props.data.examNumber }}
</div>
<div class="header-text-right q-px-xs">จำนวนครั้งที่สมัครสอบ</div>
<div class="sub-text-right q-px-xs q-pb-sm">
{{ props.data.examRound }}
</div>
</q-card>
</div>
</div>
</template>
<style lang="scss" scoped>
.header-text {
font-size: 18px;
font-weight: 600;
color: #4F4F4F;
font-size: 18px;
font-weight: 600;
color: #4f4f4f;
}
.header-text-right {
font-size: 14px;
font-weight: 400;
line-height: 150%;
color: #818181;
font-size: 14px;
font-weight: 400;
line-height: 150%;
color: #818181;
}
.sub-text-right {
font-size: 14px;
font-weight: 600;
line-height: 150%;
color: #000000;
font-size: 14px;
font-weight: 600;
line-height: 150%;
color: #000000;
}
.sub-text {
font-weight: 400;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.0025em;
color: #35373C;
font-weight: 400;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.0025em;
color: #35373c;
}
.card-exam {
border-radius: 5px;
background: #FAFAFA;
border-radius: 5px;
background: #fafafa;
}
.header-sub-text-exam {
font-size: 15px;
font-weight: 500;
line-height: 150%;
color: #818181;
font-size: 15px;
font-weight: 500;
line-height: 150%;
color: #818181;
}
.header-sub-text-exam-2 {
font-size: 15px;
font-weight: 500;
line-height: 150%;
color: #00AA86;
font-size: 15px;
font-weight: 500;
line-height: 150%;
color: #00aa86;
}
.sub-text-exam {
font-size: 15px;
font-weight: 500;
color: #000000;
font-size: 15px;
font-weight: 500;
color: #000000;
}
</style>
</style>

457
src/modules/05_placement/components/PersonalDetail/Information/Address.vue
View file

@ -2,23 +2,22 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import type {
Address,
DataOption,
zipCodeOption,
} from "@/modules/05_placement/components/PersonalDetail/profileType";
import { defaultAddress } from "@/modules/05_placement/components/PersonalDetail/profileType";
import type { zipCodeOption } from "@/modules/05_placement/components/PersonalDetail/profileType";
import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
import type { RequestItemsHistoryObject } from "@/modules//05_placement/interface/request/Address";
import type { ResponseObject } from "@/modules//05_placement/interface/response/Address";
import HistoryTable from "@/components/TableHistory.vue";
import { useRoute } from "vue-router";
import type { AddressOps } from "@/modules//05_placement/interface/index/Main";
import type { QTableProps } from "quasar";
import { AddressDataDefualt } from "@/modules//05_placement/interface/index/Main";
import type {
AddressOps,
Address as AddressType,
optionData,
} from "@/modules//05_placement/interface/index/Main";
import type { PropType } from "vue";
const props = defineProps({
statusEdit: {
@ -29,24 +28,26 @@ const props = defineProps({
type: Function,
default: () => console.log("not function"),
},
fetch: {
type: Function,
default: () => console.log("not function"),
},
data: {
type: Object as PropType<AddressType>,
default: AddressDataDefualt,
},
});
const emit = defineEmits(["update:statusEdit"]);
const route = useRoute();
const $q = useQuasar();
const dataStore = useDataStore();
const { loaderPage } = dataStore;
const mixin = useCounterMixin();
const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
const edit = ref<boolean>(false);
const addressData = ref<Address>(defaultAddress);
const addressData = ref<AddressType>(props.data);
const myform = ref<any>();
const codep = ref<string>("");
const codec = ref<string>("");
const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลที่อยู่"); //
const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const Ops = ref<AddressOps>({
provinceOps: [],
districtOps: [],
@ -61,169 +62,9 @@ const OpsFilter = ref<AddressOps>({
subdistrictOps: [],
subdistrictCOps: [],
});
const columnsHistory = ref<QTableProps["columns"]>([
{
name: "registrationAddress",
align: "left",
label: "ที่อยู่ตามทะเบียนบ้าน",
sortable: true,
field: "registrationAddress",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "registrationProvince",
align: "left",
label: "จังหวัดตามทะเบียนบ้าน",
sortable: true,
field: "registrationProvince",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "registrationDistrict",
align: "left",
label: "เขต/อำเภอตามทะเบียนบ้าน",
sortable: true,
field: "registrationDistrict",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "registrationSubDistrict",
align: "left",
label: "ตำบล/แขวงตามทะเบียนบ้าน",
sortable: true,
field: "registrationSubDistrict",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "registrationZipCode",
align: "left",
label: "รหัสไปรษณีย์ตามทะเบียนบ้าน",
sortable: true,
field: "registrationZipCode",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "registrationSame",
align: "left",
label: "ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน",
sortable: true,
field: "registrationSame",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "currentAddress",
align: "left",
label: "ที่อยู่ปัจจุบัน",
sortable: true,
field: "currentAddress",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "currentProvince",
align: "left",
label: "จังหวัดปัจจุบัน",
sortable: true,
field: "currentProvince",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "currentDistrict",
align: "left",
label: "เขต/อำเภอปัจจุบัน",
sortable: true,
field: "currentDistrict",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "currentSubDistrict",
align: "left",
label: "ตำบล/แขวงปัจจุบัน",
sortable: true,
field: "currentSubDistrict",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "currentZipCode",
align: "left",
label: "รหัสไปรษณีย์ปัจจุบัน",
sortable: true,
field: "currentZipCode",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "createdFullName",
align: "left",
label: "ผู้ดำเนินการ",
sortable: true,
field: "createdFullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "createdAt",
align: "left",
label: "วันที่แก้ไข",
sortable: true,
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const visibleColumnsHistory = ref<String[]>([
"currentAddress",
"currentDistrict",
"currentProvince",
"currentSubDistrict",
"currentZipCode",
"registrationAddress",
"registrationDistrict",
"registrationProvince",
"registrationSame",
"registrationSubDistrict",
"registrationZipCode",
"createdFullName",
"createdAt",
]);
onMounted(async () => {
// await getNewData();
await getNewData();
emit("update:statusEdit", false);
});
@ -232,35 +73,35 @@ const filterSelector = (val: any, update: Function, refData: string) => {
case "provinceOps":
update(() => {
Ops.value.provinceOps = OpsFilter.value.provinceOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: optionData) => v.name.indexOf(val) > -1
);
});
break;
case "districtOps":
update(() => {
Ops.value.districtOps = OpsFilter.value.districtOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: optionData) => v.name.indexOf(val) > -1
);
});
break;
case "districtCOps":
update(() => {
Ops.value.districtCOps = OpsFilter.value.districtCOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: optionData) => v.name.indexOf(val) > -1
);
});
break;
case "subdistrictOps":
update(() => {
Ops.value.subdistrictOps = OpsFilter.value.subdistrictOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: optionData) => v.name.indexOf(val) > -1
);
});
break;
case "subdistrictCOps":
update(() => {
Ops.value.subdistrictCOps = OpsFilter.value.subdistrictCOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: optionData) => v.name.indexOf(val) > -1
);
});
break;
@ -270,145 +111,85 @@ const filterSelector = (val: any, update: Function, refData: string) => {
}
};
/**
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
*/
const clickHistory = async () => {
modalHistory.value = true;
showLoader();
await http
.get(config.API.profileAdrsHisId(route.params.id.toString()))
.then((res) => {
let data = res.data.result;
rowsHistory.value = [];
data.map((e: RequestItemsHistoryObject) => {
rowsHistory.value.push({
currentAddress: e.currentAddress,
currentDistrict: e.currentDistrict,
currentProvince: e.currentProvince,
currentSubDistrict: e.currentSubDistrict,
currentZipCode: e.currentZipCode,
registrationSame: e.registrationSame,
registrationAddress: e.registrationAddress,
registrationDistrict: e.registrationDistrict,
registrationProvince: e.registrationProvince,
registrationSubDistrict: e.registrationSubDistrict,
registrationZipCode: e.registrationZipCode,
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const refreshData = async () => {
myform.value.reset();
await getNewData();
};
const getNewData = async () => {
await fetchData();
await props.fetch();
await fetchProvince();
await fetchDistrict(addressData.value.provinceId, "1");
await fetchDistrict(addressData.value.provinceIdC, "2");
await fetchSubDistrict(addressData.value.districtId, "1");
await fetchSubDistrict(addressData.value.districtIdC, "2");
await selectSubDistrict(addressData.value.subdistrictId, "1");
await selectSubDistrict(addressData.value.subdistrictIdC, "2");
await fetchDistrict(addressData.value.registProvinceId, "1");
await fetchDistrict(addressData.value.currentProvinceId, "2");
await fetchSubDistrict(addressData.value.registDistrictId, "1");
await fetchSubDistrict(addressData.value.currentDistrictId, "2");
await selectSubDistrict(addressData.value.registSubDistrictId, "1");
await selectSubDistrict(addressData.value.currentSubDistrictId, "2");
};
const fetchData = async () => {
const editData = async () => {
const body = {
registrationSame: addressData.value.registSame == "1",
registrationAddress: addressData.value.registAddress,
registrationSubDistrictId: addressData.value.registSubDistrictId,
registrationDistrictId: addressData.value.registDistrictId,
registrationProvinceId: addressData.value.registProvinceId,
registrationZipCode: codep.value,
currentAddress:
addressData.value.registSame == "1"
? addressData.value.registAddress
: addressData.value.currentAddress,
currentSubDistrictId:
addressData.value.registSame == "1"
? addressData.value.registSubDistrictId
: addressData.value.currentSubDistrictId,
currentDistrictId:
addressData.value.registSame == "1"
? addressData.value.registDistrict
: addressData.value.currentDistrictId,
currentProvinceId:
addressData.value.registSame == "1"
? addressData.value.registProvinceId
: addressData.value.currentProvinceId,
currentZipCode:
addressData.value.registSame == "1" ? codep.value : codec.value,
};
showLoader();
await http
.get(config.API.profileAdrsId(route.params.id.toString()))
.put(
config.API.placementAddressId(route.params.personalId.toString()),
body
)
.then((res) => {
const data: ResponseObject = res.data.result;
addressData.value.address = data.registrationAddress;
addressData.value.addressC = data.currentAddress;
addressData.value.districtId = data.registrationDistrictId;
addressData.value.districtIdC = data.currentDistrictId;
addressData.value.provinceId = data.registrationProvinceId;
addressData.value.provinceIdC = data.currentProvinceId;
addressData.value.subdistrictId = data.registrationSubDistrictId;
addressData.value.subdistrictIdC = data.currentSubDistrictId;
addressData.value.same = data.registrationSame ? "1" : "0";
success($q, "แก้ไขข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
.finally(async () => {
edit.value = false;
emit("update:statusEdit", false);
await getNewData();
});
};
const editData = async () => {
// const body: ResponseObject = {
// registrationSame: addressData.value.same == "1",
// registrationAddress: addressData.value.address,
// registrationSubDistrictId: addressData.value.subdistrictId,
// registrationDistrictId: addressData.value.districtId,
// registrationProvinceId: addressData.value.provinceId,
// registrationZipCode: codep.value,
// currentAddress:
// addressData.value.same == "1"
// ? addressData.value.address
// : addressData.value.addressC,
// currentSubDistrictId:
// addressData.value.same == "1"
// ? addressData.value.subdistrictId
// : addressData.value.subdistrictIdC,
// currentDistrictId:
// addressData.value.same == "1"
// ? addressData.value.districtId
// : addressData.value.districtIdC,
// currentProvinceId:
// addressData.value.same == "1"
// ? addressData.value.provinceId
// : addressData.value.provinceIdC,
// currentZipCode: addressData.value.same == "1" ? codep.value : codec.value,
// createdAt: new Date(),
// createdFullName: "-",
// };
// showLoader();
// await http
// .put(config.API.profileAdrsId(route.params.id.toString()), body)
// .then((res) => {
// success($q, "บันทึกข้อมูลสำเร็จ");
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(async () => {
// edit.value = false;
// emit("update:statusEdit", false);
// await getNewData();
// });
};
const saveData = async () => {
// await myform.value.validate().then(async (success: boolean) => {
// if (success) {
// await editData();
// } else {
// }
// });
await myform.value.validate().then(async (success: boolean) => {
if (success) {
await editData();
}
});
};
const selectProvince = async (e: string | null, name: string) => {
if (e != null) {
if (name == "1") {
addressData.value.districtId = "";
addressData.value.subdistrictId = "";
addressData.value.registDistrictId = "";
addressData.value.registSubDistrictId = "";
codep.value = "";
} else {
addressData.value.districtIdC = "";
addressData.value.subdistrictIdC = "";
addressData.value.currentDistrictId = "";
addressData.value.currentSubDistrictId = "";
codec.value = "";
}
myform.value.resetValidation();
@ -419,10 +200,10 @@ const selectProvince = async (e: string | null, name: string) => {
const selectDistrict = async (e: string | null, name: string) => {
if (e != null) {
if (name == "1") {
addressData.value.subdistrictId = "";
addressData.value.registSubDistrictId = "";
codep.value = "";
} else {
addressData.value.subdistrictIdC = "";
addressData.value.currentSubDistrictId = "";
codec.value = "";
}
myform.value.resetValidation();
@ -450,7 +231,7 @@ const fetchProvince = async () => {
.get(config.API.province)
.then((res) => {
const data = res.data.result;
let option: DataOption[] = [];
let option: optionData[] = [];
data.map((r: any) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
@ -472,7 +253,7 @@ const fetchDistrict = async (id: string | null, position: string) => {
.get(config.API.listDistrict(id))
.then((res) => {
const data = res.data.result;
let option: DataOption[] = [];
let option: optionData[] = [];
data.map((r: any) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
@ -556,7 +337,6 @@ const getClass = (val: boolean) => {
:changeBtn="changeBtn"
:disable="statusEdit"
:cancel="refreshData"
:historyClick="clickHistory"
/>
<q-form ref="myform">
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
@ -571,7 +351,7 @@ const getClass = (val: boolean) => {
autogrow
:readonly="!edit"
:borderless="!edit"
v-model="addressData.address"
v-model="addressData.registAddress"
:rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
:label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
/>
@ -587,7 +367,7 @@ const getClass = (val: boolean) => {
:outlined="edit"
dense
lazy-rules
v-model="addressData.provinceId"
v-model="addressData.registProvinceId"
emit-value
map-options
option-label="name"
@ -613,7 +393,7 @@ const getClass = (val: boolean) => {
:outlined="edit"
dense
lazy-rules
v-model="addressData.districtId"
v-model="addressData.registDistrictId"
emit-value
map-options
option-label="name"
@ -639,7 +419,7 @@ const getClass = (val: boolean) => {
:outlined="edit"
dense
lazy-rules
v-model="addressData.subdistrictId"
v-model="addressData.registSubDistrictId"
emit-value
map-options
option-label="name"
@ -673,7 +453,7 @@ const getClass = (val: boolean) => {
>ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
>
<q-radio
v-model="addressData.same"
v-model="addressData.registSame"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="1"
@ -682,7 +462,7 @@ const getClass = (val: boolean) => {
:disable="!edit"
/>
<q-radio
v-model="addressData.same"
v-model="addressData.registSame"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="0"
@ -692,7 +472,7 @@ const getClass = (val: boolean) => {
/>
</div>
<div class="col-xs-12" v-if="addressData.same == '0'">
<div class="col-xs-12" v-if="addressData.registSame == '0'">
<q-input
:class="getClass(edit)"
hide-bottom-space
@ -703,12 +483,15 @@ const getClass = (val: boolean) => {
autogrow
:readonly="!edit"
:borderless="!edit"
v-model="addressData.addressC"
v-model="addressData.currentAddress"
:rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
:label="`${'ที่อยู่ปัจจุบัน'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<div
class="col-xs-6 col-sm-3 col-md-3"
v-if="addressData.registSame == '0'"
>
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
@ -719,7 +502,7 @@ const getClass = (val: boolean) => {
:outlined="edit"
dense
lazy-rules
v-model="addressData.provinceIdC"
v-model="addressData.currentProvinceId"
emit-value
map-options
option-label="name"
@ -734,7 +517,10 @@ const getClass = (val: boolean) => {
) "
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<div
class="col-xs-6 col-sm-3 col-md-3"
v-if="addressData.registSame == '0'"
>
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
@ -745,7 +531,7 @@ const getClass = (val: boolean) => {
:outlined="edit"
dense
lazy-rules
v-model="addressData.districtIdC"
v-model="addressData.currentDistrictId"
emit-value
map-options
option-label="name"
@ -760,7 +546,10 @@ const getClass = (val: boolean) => {
) "
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<div
class="col-xs-6 col-sm-3 col-md-3"
v-if="addressData.registSame == '0'"
>
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
@ -771,7 +560,7 @@ const getClass = (val: boolean) => {
:outlined="edit"
dense
lazy-rules
v-model="addressData.subdistrictIdC"
v-model="addressData.currentSubDistrictId"
emit-value
map-options
option-label="name"
@ -786,7 +575,10 @@ const getClass = (val: boolean) => {
) "
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<div
class="col-xs-6 col-sm-3 col-md-3"
v-if="addressData.registSame == '0'"
>
<q-input
:class="getClass(edit)"
hide-bottom-space
@ -802,33 +594,4 @@ const getClass = (val: boolean) => {
</div>
</q-form>
</q-card>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'createdAt'" class="table_ellipsis">
{{ date2Thai(col.value) }}
</div>
<div
v-else-if="col.name == 'registrationSame'"
class="table_ellipsis"
>
{{ col.value ? "ใช่" : "ไม่" }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
</template>

126
src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue
View file

@ -18,6 +18,8 @@ import HistoryTable from "@/components/TableHistory.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar";
import type { PropType } from "vue";
import type { Certificate } from "@/modules/05_placement/interface/index/Main";
const props = defineProps({
statusEdit: {
@ -28,13 +30,20 @@ const props = defineProps({
type: String,
required: true,
},
fetch: {
type: Function,
default: () => console.log("not function"),
},
data: {
type: Array as PropType<Certificate[]>,
default: [],
},
});
const $q = useQuasar();
const store = useProfileDataStore();
const { profileData, changeProfileColumns } = store;
const dataStore = useDataStore();
const { loaderPage } = dataStore;
const mixin = useCounterMixin();
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
mixin;
@ -64,7 +73,7 @@ const checkValidate = ref<boolean>(false); //validate data ผ่านหรื
// route.params.id ? route.params.id.toString() : ""
// );
const profileId = ref<string>("");
const rows = ref<RequestItemsObject[]>([]);
const rows = ref<Certificate[]>([]);
const filter = ref<string>(""); //search data table
const visibleColumns = ref<String[]>([]);
profileData.certicate.columns.length == 0
@ -229,40 +238,12 @@ watch(visibleColumns, async (count: String[], prevCount: String[]) => {
onMounted(async () => {
// await fetchData();
if (route.params.id) {
profileId.value = route.params.id.toString();
profileId.value = route.params.personalId.toString();
}
await props.fetch();
rows.value = props.data;
});
const fetchData = async () => {
if (profileId.value != "") {
showLoader();
await http
.get(config.API.profileCertId(profileId.value))
.then((res) => {
let data = res.data.result;
rows.value = [];
data.map((e: ResponseObject) => {
rows.value.push({
id: e.id,
certificateNo: e.certificateNo,
issuer: e.issuer,
issueDate: new Date(e.issueDate),
expireDate: new Date(e.expireDate),
certificateType: e.certificateType,
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
};
/**
* กดดูข้อมูลก่อนหน้า
*/
@ -347,42 +328,16 @@ const clickSave = async () => {
* บันทึกเพิ่มข้อมูล
*/
const saveData = async () => {
if (profileId.value !== "") {
showLoader();
await http
.post(config.API.profileCertId(profileId.value), {
id: id.value,
certificateNo: certificateNo.value,
issuer: issuer.value,
issueDate: dateToISO(issueDate.value),
expireDate: dateToISO(expireDate.value),
certificateType: certificateType.value,
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
}
};
// console.log("saveData");
/**
* บันทึกแก้ไขข้อมูล
*/
const editData = async () => {
showLoader();
await http
.put(config.API.profileCertId(id.value), {
.post(config.API.placementCertId(route.params.personalId.toString()), {
id: id.value,
certificateNo: certificateNo.value,
issuer: issuer.value,
issueDate: dateToISO(issueDate.value),
expireDate: dateToISO(expireDate.value),
issueDate: new Date(issueDate.value),
expireDate: new Date(expireDate.value),
certificateType: certificateType.value,
})
.then((res) => {
@ -393,7 +348,35 @@ const editData = async () => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
await props.fetch();
rows.value = props.data;
});
};
/**
* บันทึกแก้ไขข้อมูล
*/
const editData = async () => {
showLoader();
await http
.put(config.API.placementCertId(route.params.personalId.toString()), {
id: id.value,
certificateNo: certificateNo.value,
issuer: issuer.value,
issueDate: new Date(issueDate.value),
expireDate: new Date(expireDate.value),
certificateType: certificateType.value,
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await props.fetch();
rows.value = props.data;
});
};
@ -411,7 +394,12 @@ const clickDelete = async () => {
.onOk(async () => {
showLoader();
await http
.delete(config.API.profileCertId(id.value))
.delete(
config.API.placementCertDetailId(
route.params.personalId.toString(),
id.value
)
)
.then((res) => {
success($q, "ลบข้อมูลสำเร็จ");
modal.value = false;
@ -420,11 +408,13 @@ const clickDelete = async () => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
await props.fetch();
rows.value = props.data;
});
})
.onCancel(async () => {
await fetchData();
await props.fetch();
rows.value = props.data;
});
};

845
src/modules/05_placement/components/PersonalDetail/Information/Family.vue
View file

File diff suppressed because it is too large Load diff

530
src/modules/05_placement/components/PersonalDetail/Information/Information.vue
View file

@ -2,26 +2,26 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import { useQuasar } from "quasar";
import type {
Information,
DataOption,
} from "@/modules/05_placement/components/PersonalDetail/profileType";
import { defaultInformation } from "@/modules/05_placement/components/PersonalDetail/profileType";
import type {
RequestItemsHistoryObject,
Columns,
} from "@/modules/05_placement/interface/request/Information";
import type { ResponseObject } from "@/modules/05_placement/interface/response/Information";
import type { InformationOps } from "@/modules/05_placement/interface/index/Main";
InformationOps,
optionData,
} from "@/modules/05_placement/interface/index/Main";
import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
import HistoryTable from "@/components/TableHistory.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRoute } from "vue-router";
import { useProfileDataStore } from "@/modules/05_placement/store";
import type { QTableColumn, QForm } from "quasar";
import type { QForm } from "quasar";
import type { PropType } from "vue";
const props = defineProps({
statusEdit: {
@ -32,6 +32,14 @@ const props = defineProps({
type: Function,
default: () => console.log("not function"),
},
fetch: {
type: Function,
default: () => console.log("not function"),
},
data: {
type: Object as PropType<Information>,
default: defaultInformation,
},
});
const emit = defineEmits(["update:statusEdit"]);
@ -47,16 +55,11 @@ const {
showLoader,
hideLoader,
} = mixin;
const dataStore = useDataStore();
const { loaderPage } = dataStore;
const profileStore = useProfileDataStore();
const { changeRetireText, changeBirth } = profileStore;
const edit = ref<boolean>(false);
const informaData = ref<Information>(defaultInformation);
const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว"); //
const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const informaData = ref<Information>(props.data);
const age = ref<boolean>(true);
const myform = ref<QForm | null>(null);
const Ops = ref<InformationOps>({
@ -89,214 +92,17 @@ const OpsFilter = ref<InformationOps>({
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
],
});
const columnsHistory = ref<QTableColumn[]>([
{
name: "citizenId",
align: "left",
label: "เลขบัตรประจำตัวประชาชน",
sortable: true,
field: "citizenId",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "prefix",
align: "left",
label: "คำนำหน้า",
sortable: true,
field: "prefix",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "firstName",
align: "left",
label: "ชื่อ",
sortable: true,
field: "firstName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "lastName",
align: "left",
label: "นามสกุล",
sortable: true,
field: "lastName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "birthDate",
align: "left",
label: "วัน/เดือน/ปี เกิด",
sortable: true,
field: "birthDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "gender",
align: "left",
label: "เพศ",
sortable: true,
field: "gender",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "relationship",
align: "left",
label: "สถานภาพ",
sortable: true,
field: "relationship",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "bloodGroup",
align: "left",
label: "หมู่เลือด",
sortable: true,
field: "bloodGroup",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "nationality",
align: "left",
label: "สัญชาติ",
sortable: true,
field: "nationality",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "race",
align: "left",
label: "เชื้อชาติ",
sortable: true,
field: "race",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "religion",
align: "left",
label: "ศาสนา",
sortable: true,
field: "religion",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "telephoneNumber",
align: "left",
label: "เบอร์โทร",
sortable: true,
field: "telephoneNumber",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "employeeType",
align: "left",
label: "ประเภทการจ้าง",
sortable: true,
field: "employeeType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "employeeClass",
align: "left",
label: "ประเภทลูกจ้าง",
sortable: true,
field: "employeeClass",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "createdFullName",
align: "left",
label: "ผู้ดำเนินการ",
sortable: true,
field: "createdFullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "createdAt",
align: "left",
label: "วันที่แก้ไข",
sortable: true,
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const visibleColumnsHistory = ref<String[]>([
"citizenId",
"prefix",
"firstName",
"lastName",
"birthDate",
"gender",
"relationship",
"bloodGroup",
"nationality",
"race",
"religion",
"telephoneNumber",
"employeeType",
"employeeClass",
"createdFullName",
"createdAt",
]);
onMounted(async () => {
// await fetchPerson();
// await fetchData();
await fetchPerson();
emit("update:statusEdit", false);
});
const onCancel = async () => {
// if (myform.value != null) {
// myform.value.reset();
// }
// await fetchData();
if (myform.value != null) {
myform.value.reset();
}
await props.fetch();
};
/**
@ -308,51 +114,52 @@ const fetchPerson = async () => {
.get(config.API.person)
.then((res) => {
const data = res.data.result;
let optionbloodGroups: DataOption[] = [];
let optionbloodGroups: optionData[] = [];
// console.log(data);
data.bloodGroups.map((r: any) => {
optionbloodGroups.push({
id: r.id.toString(),
name: r.name.toString(),
id: r.id ?? "",
name: r.name ?? "",
});
});
Ops.value.bloodOps = optionbloodGroups;
OpsFilter.value.bloodOps = optionbloodGroups;
let optiongenders: DataOption[] = [];
let optiongenders: optionData[] = [];
data.genders.map((r: any) => {
optiongenders.push({
id: r.id.toString(),
name: r.name.toString(),
id: r.id ?? "",
name: r.name ?? "",
});
});
Ops.value.genderOps = optiongenders;
OpsFilter.value.genderOps = optiongenders;
let optionprefixs: DataOption[] = [];
let optionprefixs: optionData[] = [];
data.prefixs.map((r: any) => {
optionprefixs.push({
id: r.id.toString(),
name: r.name.toString(),
id: r.id ?? "",
name: r.name ?? "",
});
});
Ops.value.prefixOps = optionprefixs;
OpsFilter.value.prefixOps = optionprefixs;
let optionrelationships: DataOption[] = [];
let optionrelationships: optionData[] = [];
data.relationships.map((r: any) => {
optionrelationships.push({
id: r.id.toString(),
name: r.name.toString(),
id: r.id ?? "",
name: r.name ?? "",
});
});
Ops.value.statusOps = optionrelationships;
OpsFilter.value.statusOps = optionrelationships;
let optionreligions: DataOption[] = [];
let optionreligions: optionData[] = [];
data.religions.map((r: any) => {
optionreligions.push({
id: r.id.toString(),
name: r.name.toString(),
id: r.id ?? "",
name: r.name ?? "",
});
});
Ops.value.religionOps = optionreligions;
@ -364,56 +171,6 @@ const fetchPerson = async () => {
});
};
/**
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
*/
const clickHistory = async () => {
modalHistory.value = true;
showLoader();
await http
.get(config.API.profileInforHisId(route.params.id.toString()))
.then((res) => {
let data = res.data.result;
rowsHistory.value = [];
data.map((e: RequestItemsHistoryObject) => {
rowsHistory.value.push({
citizenId: e.citizenId,
prefix: e.prefix,
firstName: e.firstName,
lastName: e.lastName,
birthDate: new Date(e.birthDate),
gender: e.gender,
relationship: e.relationship,
bloodGroup: e.bloodGroup,
nationality: e.nationality,
race: e.race,
religion: e.religion,
telephoneNumber: e.telephoneNumber,
employeeType:
e.employeeType == "gov"
? "งบประมาณเงินอุดหนุนรัฐบาล"
: e.employeeType == "bkk"
? "งบประมาณกรุงเทพมหานคร"
: "-",
employeeClass:
e.employeeClass == "perm"
? "ลูกจ้างประจำ"
: e.employeeClass == "temp"
? "ลูกจ้างชั่วคราว"
: "-",
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const filterSelector = (val: any, update: Function, refData: string) => {
switch (refData) {
case "prefixOps":
@ -472,7 +229,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
};
const handleDate = async (modelData: Date) => {
informaData.value.birthDate = modelData;
informaData.value.dateOfBirth = modelData;
await calRetire(modelData);
};
@ -500,91 +257,51 @@ const calRetire = async (birth: Date) => {
});
};
const fetchData = async () => {
const editData = async () => {
if (age.value == false) {
modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
return;
}
const body: any = {
citizenId: informaData.value.idCard,
prefixId: informaData.value.prefixId,
firstName: informaData.value.firstname,
lastName: informaData.value.lastname,
genderId: informaData.value.genderId,
nationality: informaData.value.nationality,
race: informaData.value.race,
religionId: informaData.value.religionId,
birthDate: informaData.value.dateOfBirth,
bloodGroupId: informaData.value.bloodGroupId,
relationshipId: informaData.value.relationshipId,
telephoneNumber: informaData.value.telephone,
};
showLoader();
await http
.get(config.API.profileInforId(route.params.id.toString()))
.then(async (res: any) => {
const data: ResponseObject = res.data.result;
informaData.value.cardid = data.citizenId;
informaData.value.prefix = "";
informaData.value.prefixId = data.prefixId;
informaData.value.firstname = data.firstName;
informaData.value.lastname = data.lastName;
informaData.value.birthDate = new Date(data.birthDate);
informaData.value.genderId = data.genderId;
informaData.value.bloodId = data.bloodGroupId;
informaData.value.nationality = data.nationality;
informaData.value.ethnicity = data.race;
informaData.value.statusId = data.relationshipId;
informaData.value.religionId = data.religionId;
informaData.value.tel = data.telephoneNumber;
informaData.value.age = data.age;
informaData.value.employeeType = data.employeeType;
informaData.value.employeeClass = data.employeeClass;
informaData.value.profileType = data.profileType;
await calRetire(new Date(dateToISO(new Date(data.birthDate))));
if (data.profileType == "officer" && columnsHistory.value.length >= 15) {
columnsHistory.value.splice(13, 1);
columnsHistory.value.splice(12, 1);
}
.put(
config.API.placementInformationId(route.params.personalId.toString()),
body
)
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
.finally(async () => {
edit.value = false;
emit("update:statusEdit", false);
await props.fetch();
await changeBirth(informaData.value.dateOfBirth ?? new Date());
});
};
const editData = async () => {
// if (age.value == false) {
// modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
// return;
// }
// const body: any = {
// citizenId: informaData.value.cardid,
// prefixId: informaData.value.prefixId,
// firstName: informaData.value.firstname,
// lastName: informaData.value.lastname,
// genderId: informaData.value.genderId,
// nationality: informaData.value.nationality,
// race: informaData.value.ethnicity,
// religionId: informaData.value.religionId,
// birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
// bloodGroupId: informaData.value.bloodId,
// relationshipId: informaData.value.statusId,
// telephoneNumber: informaData.value.tel,
// createdAt: new Date(),
// age: null,
// employeeType: informaData.value.employeeType,
// employeeClass: informaData.value.employeeClass,
// profileType: informaData.value.profileType,
// createdFullName: "-",
// };
// showLoader();
// await http
// .put(config.API.profileInforId(route.params.id.toString()), body)
// .then((res) => {
// success($q, "บันทึกข้อมูลสำเร็จ");
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(async () => {
// edit.value = false;
// emit("update:statusEdit", false);
// await fetchData();
// await changeBirth(informaData.value.birthDate ?? new Date());
// });
};
const saveData = async () => {
if (myform.value != null) {
await myform.value.validate().then(async (success: boolean) => {
if (success) {
await editData();
} else {
}
});
}
@ -621,7 +338,6 @@ const getClass = (val: boolean) => {
:changeBtn="changeBtn"
:disable="statusEdit"
:cancel="onCancel"
:historyClick="clickHistory"
/>
<q-form ref="myform" class="col-12">
<div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
@ -634,7 +350,7 @@ const getClass = (val: boolean) => {
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.cardid"
v-model="informaData.idCard"
maxlength="13"
:rules="[
(val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
@ -702,7 +418,7 @@ const getClass = (val: boolean) => {
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<datepicker
v-model="informaData.birthDate"
v-model="informaData.dateOfBirth"
:locale="'th'"
autoApply
:enableTimePicker="false"
@ -726,7 +442,11 @@ const getClass = (val: boolean) => {
lazy-rules
:readonly="!edit"
:borderless="!edit"
:model-value="date2Thai(informaData.birthDate)"
:model-value="
informaData.dateOfBirth
? date2Thai(informaData.dateOfBirth)
: ''
"
:rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
:label="`${'วัน/เดือน/ปี เกิด'}`"
>
@ -793,7 +513,7 @@ const getClass = (val: boolean) => {
:outlined="edit"
dense
lazy-rules
v-model="informaData.statusId"
v-model="informaData.relationshipId"
emit-value
map-options
option-label="name"
@ -818,7 +538,7 @@ const getClass = (val: boolean) => {
:outlined="edit"
dense
lazy-rules
v-model="informaData.bloodId"
v-model="informaData.bloodGroupId"
emit-value
map-options
option-label="name"
@ -855,7 +575,7 @@ const getClass = (val: boolean) => {
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.ethnicity"
v-model="informaData.race"
:rules="[(val:string) => !!val || `${'กรุณากรอก เชื้อชาติ'}`]"
:label="`${'เชื้อชาติ'}`"
/>
@ -885,7 +605,7 @@ const getClass = (val: boolean) => {
) "
/>
</div>
<!-- <div class="col-xs-6 col-sm-3 col-md-3">
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
hide-bottom-space
:outlined="edit"
@ -895,7 +615,7 @@ const getClass = (val: boolean) => {
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
v-model="informaData.tel"
v-model="informaData.telephone"
:rules="[
(val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
(val:string) => val.length >= 10 || `${'กรุณากรอกข้อมูลเบอร์โทรให้ครบ'}`,
@ -903,90 +623,8 @@ const getClass = (val: boolean) => {
:label="`${'เบอร์โทร'}`"
mask="##########"
/>
</div> -->
<div
class="col-xs-6 col-sm-4 col-md-4"
v-if="informaData.profileType == 'employee'"
>
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทการจ้าง'}`]"
:outlined="edit"
dense
lazy-rules
v-model="informaData.employeeType"
emit-value
map-options
option-label="name"
:options="Ops.employeeTypeOps"
option-value="id"
:label="`${'ประเภทการจ้าง'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
) "
/>
</div>
<div
class="col-xs-6 col-sm-2 col-md-2"
v-if="informaData.profileType == 'employee'"
>
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทลูกจ้าง'}`]"
:outlined="edit"
dense
lazy-rules
v-model="informaData.employeeClass"
emit-value
map-options
option-label="name"
:options="Ops.employeeClassOps"
option-value="id"
:label="`${'ประเภทลูกจ้าง'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
) "
/>
</div>
</div>
</q-form>
</q-card>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div
v-if="col.name == 'birthDate' || col.name == 'createdAt'"
class="table_ellipsis"
>
{{ date2Thai(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
</template>

5
src/modules/05_placement/components/PersonalDetail/Information/layout.vue
View file

@ -43,7 +43,6 @@ const notiNoEdit = () => {
const closeModalError = () => {
modalNoEdit.value = false;
};
</script>
<template>
<div class="row col-12 items-center">
@ -51,7 +50,7 @@ const closeModalError = () => {
<Information :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
</div>
<div class="col-12 q-px-md"><q-separator size="4px"/></div>
<div class="col-12 q-px-md"><q-separator size="4px" /></div>
<div>
<Address :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
@ -60,7 +59,7 @@ const closeModalError = () => {
</template>
<style lang="scss" scoped>
.horizontal-line {
background-color: #F4F4F4;
background-color: #f4f4f4;
height: 5px;
}
</style>

108
src/modules/05_placement/components/PersonalDetail/Qualification.vue
View file

@ -1,46 +1,69 @@
<script setup lang="ts">
import { ref } from 'vue';
import type { CheckboxItem } from "@/modules/05_placement/interface/index/Main";
import type { QForm } from 'quasar';
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useRoute } from "vue-router";
import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type { PropType } from "vue";
import type { Property } from "@/modules/05_placement/interface/index/Main";
const $q = useQuasar();
const mixin = useCounterMixin();
const {
modalError,
} = mixin;
const route = useRoute();
const { showLoader, hideLoader, messageError, success } = mixin;
const props = defineProps({
statusEdit: {
type: Boolean,
required: true,
},
notiNoEdit: {
data: {
type: Array as PropType<Property[]>,
default: [],
},
fetch: {
type: Function,
default: () => console.log("not function"),
},
});
const emit = defineEmits(["update:statusEdit"]);
const emit = defineEmits(["update:statusEdit", "update:data"]);
const edit = ref<boolean>(false);
const myform = ref<QForm | null>(null);
onMounted(() => {
emit("update:statusEdit", false);
});
const saveData = async () => {
if (myform.value != null) {
await myform.value.validate().then(async (success: boolean) => {
if (success) {
await editData();
} else {
}
showLoader();
await http
.put(
config.API.placementPropertyId(route.params.personalId.toString()),
props.data
)
.then((res: any) => {
success($q, "แก้ไขข้อมูลสำเร็จ");
})
.catch((e: any) => {
messageError($q, e);
})
.finally(async () => {
await props.fetch();
edit.value = false;
hideLoader();
changeBtn();
});
}
};
const changeBtn = async () => {
if (edit.value == true) {
if (props.statusEdit === true) {
edit.value = false;
props.notiNoEdit();
} else {
emit("update:statusEdit", true);
}
@ -49,43 +72,34 @@ const changeBtn = async () => {
}
};
const editData = async () => {
modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
}
const onCancel = async () => {
if (myform.value != null) {
myform.value.reset();
}
// await fetchData();
await props.fetch();
};
const selection = ref([]);
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: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' },
]
</script>
<template>
<div class="row col-12 q-px-lg q-pt-lg q-pb-sm no-border">
<HeaderTop v-model:edit="edit" header="การคัดกรองคุณสมบัติ" icon="mdi-account-search" :save="saveData"
:history="false" :changeBtn="changeBtn" :disable="statusEdit" :cancel="onCancel" />
<HeaderTop
v-model:edit="edit"
header="การคัดกรองคุณสมบัติ"
icon="mdi-account-search"
:save="saveData"
:history="false"
:changeBtn="changeBtn"
:disable="statusEdit"
:cancel="onCancel"
/>
</div>
<div class="row q-px-lg">
<div v-for="item of checkboxItems" :key="item.id" class="col-12 q-pt-sm">
<q-checkbox size="xs" v-model="selection" :val="item.id" :label="item.label" keep-color color="gray-5"
:disable="!statusEdit" />
<div v-for="item of props.data" :key="item.name" class="col-12 q-pt-sm">
<q-checkbox
size="xs"
v-model="item.value"
:label="item.name"
keep-color
color="gray-5"
:disable="!statusEdit"
/>
<q-separator />
</div>
</div>
</template>
</template>

48
src/modules/05_placement/components/PersonalDetail/profileType.ts
View file

@ -8,23 +8,25 @@ interface ChangeActive {
//ข้อมูลส่วนตัว
interface Information {
cardid: string | null;
idCard: string | null;
prefix: string | null;
age: string | null;
prefixId: string | null;
fullName: string | null;
firstname: string | null;
lastname: string | null;
birthDate: Date;
genderId: string | null;
bloodId: string | null;
nationality: string | null;
ethnicity: string | null;
statusId: string | null;
race: string | null;
dateOfBirth: Date | null;
age: string | null;
telephone: string | null;
gender: string | null;
genderId: string | null;
relationship: string | null;
relationshipId: string | null;
bloodGroup: string | null;
bloodGroupId: string | null;
religion: string | null;
religionId: string | null;
tel: string | null;
employeeType: string | null;
employeeClass: string | null;
profileType: string | null;
}
interface Family {
@ -119,23 +121,25 @@ const defaultAddress: Address = {
};
const defaultInformation: Information = {
cardid: null,
age: null,
idCard: null,
prefix: null,
prefixId: null,
fullName: null,
firstname: null,
lastname: null,
birthDate: new Date(),
genderId: null,
bloodId: null,
nationality: null,
ethnicity: null,
statusId: null,
race: null,
dateOfBirth: new Date(),
age: null,
telephone: null,
gender: null,
genderId: null,
relationship: null,
relationshipId: null,
bloodGroup: null,
bloodGroupId: null,
religion: null,
religionId: null,
tel: null,
employeeType: null,
employeeClass: null,
profileType: null,
};
const defaultFamily: Family = {

125
src/modules/05_placement/components/PersonalList/Detail.vue Normal file
View file

@ -0,0 +1,125 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { defineAsyncComponent } from "@vue/runtime-core";
import { useRouter, useRoute } from "vue-router";
import cardTop from "@/modules/05_placement/components/PersonalList/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, showLoader, hideLoader } = mixin
let roleAdmin = ref<boolean>(false);
const router = useRouter();
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/PersonalList/Table.vue")
);
const stat = ref<any>({
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 () => {
if (DataStore.DataMainOrig.length == 0) {
await fetchPlacementData();
}
if (keycloak.tokenParsed != null) {
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
}
await getStat()
examData.value = await DataStore.DataMainOrig.find((x: any) => x.id == examId);
title.value = examData.value.examRound;
round.value = examData.value.examOrder;
year.value = examData.value.fiscalYear;
});
const fetchPlacementData = async () => {
showLoader();
http
.get(config.API.MainDetail(0))
.then(async (res) => {
DataStore.DataMainOrig = res.data.result;
})
.catch((e) => {
console.log(e);
})
.finally(() => {
hideLoader();
});
};
</script>
<template>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row">
<div class="toptitle">
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
รายชื่อผู้สอบในรอบ {{ title }} ครั้งที่ {{ round }} ปี {{ year }}
</div>
<q-card bordered class="q-py-sm row col-12">
<div class="col-12 row bg-white">
<div class="fit q-px-md q-py-sm">
<div class="row col-12 q-col-gutter-md fit">
<cardTop :amount="stat.total" label="จำนวนทั้งหมด" color="#016987" />
<cardTop v-if="roleAdmin" :amount="stat.unContain" label="จำนวนที่ยังไม่บรรจุ" color="#02A998" />
<cardTop :amount="stat.prepareContain" label="จำนวนที่เตรียมบรรจุ" color="#2EA0FF" />
<cardTop :amount="stat.contain" label="จำนวนที่บรรจุแล้ว" color="#4154B3" />
<cardTop :amount="stat.disclaim" label="จำนวนที่สละสิทธิ์" color="#FF5C5F" />
</div>
</div>
</div>
</q-card>
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
<div>
<AddTablePosition :statCard="getStat" class="q-pa-none" @get-stat="getStat" />
</div>
</q-card>
</template>
<style lang="scss">
.cardNum {
border-radius: 5px;
padding-left: 8px;
}
</style>

6
src/modules/05_placement/components/pass/DialogFooter.vue → src/modules/05_placement/components/PersonalList/DialogFooter.vue
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();

0
src/modules/05_placement/components/pass/DialogHeader.vue → src/modules/05_placement/components/PersonalList/DialogHeader.vue
View file

695
src/modules/05_placement/components/PersonalList/OrgTree.vue Normal file
View file

@ -0,0 +1,695 @@
<script setup lang="ts">
import { useQuasar, QForm } from "quasar";
import { onMounted, reactive, ref } from "vue";
import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
import DialogFooter from "@/modules/05_placement/components/PersonalList/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();
fetchplacementPosition();
});
// โหลดข้อมูลโครงสร้างจาก 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();
});
};
// โหลด position
const placementPosition = ref<any>([]);
const fetchplacementPosition = async () => {
await http
.get(config.API.placementPosition())
.then((res: any) => {
placementPosition.value = res.data.result;
})
.catch((e: any) => {
messageError($q, e);
});
};
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 = "";
}
};
const checkPosition = (val: string) => {
const num = placementPosition.value.findIndex((e: string) => e === val);
return num;
};
</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 ||
checkPosition(prop.node.positionNumId) != -1
"
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>

0
src/modules/05_placement/components/pass/StatCard.vue → src/modules/05_placement/components/PersonalList/StatCard.vue
View file

602
src/modules/05_placement/components/PersonalList/Table.vue Normal file
View file

@ -0,0 +1,602 @@
<script setup lang="ts">
import { ref, onMounted, watch, reactive } from "vue";
import { useQuasar, QForm } from "quasar";
import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import Table from "@/modules/05_placement/components/PersonalList/TableView.vue";
import DialogCard from "@/modules/05_placement/components/PersonalList/TableDetail.vue";
import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
import type { PartialTableName } from "@/modules/05_placement/interface/request/placement";
import DialogOrgTree from "@/modules/05_placement/components/PersonalList/OrgTree.vue";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import keycloak from "@/plugins/keycloak";
import router from "@/router";
let roleAdmin = ref<boolean>(false);
const props = defineProps({
statCard: {
type: Function,
default: () => console.log("getStat"),
},
});
const edit = ref<boolean>(true);
const modal = ref<boolean>(false); //modal ขอผ่อนผัน + สละสิทธิ์
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
const modalDisclaim = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
const editvisible = ref<boolean>(true);
const modalDefermentDisclaim = ref<boolean>(false); //modal add detail
const checkValidate = ref<boolean>(false);
const modalwaitInfo = ref<boolean>(false); //modal add detail
const userNote = ref<string>("");
const filter = ref<string>("");
const Name = ref<string>();
const rowsAll = ref<any>([]);
const rows = ref<any>([]);
const myForm = ref<any>();
const files = ref<any>(null);
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const $q = useQuasar(); // show dialog
const { messageError, showLoader, hideLoader, dateText, success } = mixin;
const route = useRoute();
const examId = route.params.examId;
const examIdString = Array.isArray(examId) ? examId[0] : examId;
const personalId = ref<string>("");
const visibleColumns = ref<any[]>([
"position",
"fullName",
"number",
"idCard",
"positionNumber",
"organizationName",
"reportingDate",
"bmaOfficer",
"statusName",
]);
const columns = ref<QTableProps["columns"]>([
{
name: "position",
align: "center",
label: "ลำดับ",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fullName",
align: "left",
label: "ชื่อ-สกุล",
sortable: true,
field: "fullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "number",
align: "center",
label: "ลำดับที่สอบได้",
sortable: true,
field: "number",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organizationName",
align: "left",
label: "หน่วยงานที่รับการบรรจุ",
sortable: true,
field: "organizationName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "reportingDate",
align: "left",
label: "วันที่รายงานตัว",
sortable: true,
field: "reportingDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "bmaOfficer",
align: "left",
label: "สถานภาพ",
sortable: true,
field: "bmaOfficer",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "statusName",
align: "left",
label: "สถานะการบรรจุ",
sortable: true,
field: "statusName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const getTable = async () => {
showLoader();
await http
.get(config.API.personalList(examIdString))
.then(async (res: any) => {
rowsAll.value = [];
res.data.result.map((data: any) => {
const rowData = {
personalId: data.personalId,
idCard: data.idCard,
fullName: data.fullName + ' ' + data.idCard,
name: data.fullName,
profilePhoto: data.profilePhoto,
organizationName: data.organizationName + ' ' + data.organizationShortName + ' ' + data.positionNumber + ' ' + data.positionPath,
orgName: data.organizationName,
organizationShortName: data.organizationShortName,
positionNumber: data.positionNumber,
positionPath: data.positionPath,
reportingDate: dateText(new Date(data.reportingDate)),
number: data.number,
bmaOfficer:
data.bmaOfficer == "OFFICER"
? "ขรก.กทม. สามัญ"
: data.bmaOfficer == "EMPLOYEE_PERM"
? "ลูกจ้างประจำ"
: data.bmaOfficer == "EMPLOYEE_TEMP"
? "ลูกจ้างชั่วคราว"
: data.bmaOfficer == null
? "บุคคลภายนอก"
: "-",
statusId: data.statusId,
statusName:
data.statusId == "UN-CONTAIN"
? "ยังไม่บรรจุ"
: data.statusId == "PREPARE-CONTAIN"
? "เตรียมบรรจุ"
: data.statusId == "CONTAIN"
? "บรรจุแล้ว"
: data.statusId == "DISCLAIM"
? "สละสิทธิ์"
: "-",
deferment: data.deferment,
};
rowsAll.value.push(rowData);
});
rows.value = roleAdmin ? rowsAll.value : rowsAll.value.filter((x: any) => x.statusId != 'CONTAIN');
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
};
const appointModal = ref<boolean>(false);
const saveDeferment = async () => {
myForm.value.validate().then(async (result: boolean) => {
if (result) {
showLoader();
const formData = new FormData();
formData.append("personalId", personalId.value);
formData.append("note", userNote.value);
formData.append("files", files.value[0]);
await http
.post(config.API.deferment(), formData)
.then((res) => {
success($q, "บันทึกสำเร็จ");
})
.catch((e) => {
console.log(e);
})
.finally(async () => {
await getTable();
props.statCard();
userNote.value = "";
modalDefermentDisclaim.value = false;
hideLoader();
});
}
});
};
const saveDisclaim = async () => {
myForm.value.validate().then(async (result: boolean) => {
if (result) {
showLoader();
const dataPost = {
note: userNote.value,
personId: personalId.value,
};
// console.log("save disclaim===>", dataPost);
await http
.post(config.API.disclaimF(), {
note: dataPost.note,
personalId: dataPost.personId,
})
.then(() => {
success($q, "บันทึกสำเร็จ");
})
.finally(async () => {
await getTable();
props.statCard();
userNote.value = "";
modalDefermentDisclaim.value = false;
hideLoader();
});
}
});
};
const clickEditRow = () => {
editRow.value = true;
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer ": val,
"full-width cursor-pointer": !val,
};
};
const selectData = (pid: string) => {
if (roleAdmin.value === true) {
personalId.value = pid;
modal.value = true;
} else {
router.push("/placement/personal-detail/" + pid);
}
};
const getNumFile = ref(0);
const dataInfo = reactive({
reason: "",
reliefDoc: "",
});
const editDetail = (
props: PartialTableName,
action: "disclaim" | "deferment" | "defermentInfo" | "disclaimInfo"
) => {
Name.value = props.name;
personalId.value = props.personalId;
editRow.value = false;
edit.value = true;
if (action === "disclaim") {
getNumFile.value = 0;
modalDisclaim.value = true;
modalDefermentDisclaim.value = true;
} else if (action === "deferment") {
getNumFile.value = 1;
modalDisclaim.value = false;
modalDefermentDisclaim.value = true;
} else if (action === "defermentInfo") {
http
.get(config.API.placementDefermentInfo(props.personalId))
.then((res: any) => {
dataInfo.reason = res.data.result.reliefReason;
dataInfo.reliefDoc = res.data.result.reliefDoc;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
modalDisclaim.value = false;
modalwaitInfo.value = true;
});
} else if (action === "disclaimInfo") {
http
.get(config.API.placementDisclaimInfo(props.personalId))
.then((res: any) => {
dataInfo.reason = res.data.result.rejectReason;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
modalDisclaim.value = true;
modalwaitInfo.value = true;
});
}
};
const openAppointModal = (pid: string) => {
appointModal.value = true;
personalId.value = pid;
};
const clickCloseModalTree = async () => {
await getTable();
appointModal.value = false;
};
const validateData = async () => {
checkValidate.value = true;
await myForm.value.validate().then((result: boolean) => {
if (result == false) {
checkValidate.value = false;
}
});
};
const clickClose = async () => {
userNote.value = "";
if (editRow.value == true) {
$q.dialog({
title: `ข้อมูลมีการแก้ไข`,
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
}).onOk(async () => {
modalDefermentDisclaim.value = false;
modalwaitInfo.value = false;
modal.value = false;
files.value = null;
});
} else {
modalDefermentDisclaim.value = false;
modalwaitInfo.value = false;
modal.value = false;
}
};
onMounted(async () => {
if (keycloak.tokenParsed != null) {
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
console.log("roleAdmin===>", roleAdmin);
}
await getTable();
});
const containStatus = ref<boolean>(false);
watch(containStatus, () => {
// console.log("containStatus===>", containStatus.value);
if (containStatus.value) {
rows.value = rowsAll.value.filter((x: any) => x.statusId == 'CONTAIN');
} else {
rows.value = rowsAll.value.filter((x: any) => x.statusId != 'CONTAIN');
}
});
</script>
<template>
<q-form ref="myForm">
<Table :contain-status="containStatus" :rows="rows" :columns="columns" :filter="filter"
:visible-columns="visibleColumns" v-model:inputfilter="filter" v-model:inputvisible="visibleColumns"
v-model:editvisible="editvisible" v-model:containfilter="containStatus" :history="true" :boss="true"
:saveNoDraft="true" :role-admin="roleAdmin">
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row.personalId)"
class="cursor-pointer">
<template v-if="col.name === 'position'">
{{ props.rowIndex + 1 }}
</template>
<template v-else-if="col.name === 'fullName'" class="table_ellipsis">
<div class="row col-12 text-no-wrap items-center">
<img v-if="props.row.avatar == null" src="@/assets/avatar_user.jpg" class="col-4 img-info" />
<img v-else :src="props.row.avatar" class="col-4 img-info" />
<div class="col-4">
<div class="text-weight-medium">{{ props.row.name }}</div>
<div class="text-weight-light">{{ props.row.idCard }}</div>
</div>
</div>
</template>
<template v-else-if="col.name === 'number'">
<div class="text-weight-medium">
{{ props.row.number !== null ? props.row.number : "-" }}
</div>
</template>
<template v-else-if="col.name === 'organizationName'">
<div v-if="props.row.orgName !== null ||
props.row.positionPath !== null
">
<div class="col-4">
<div class="text-weight-medium">
{{
props.row.orgName !== null
? props.row.orgName
: "-"
}}
{{
props.row.organizationShortName !== null
? `(${props.row.organizationShortName})`
: ""
}}
</div>
<div class="text-weight-light">
{{
props.row.positionPath !== null
? props.row.positionPath
: "-"
}}
{{
props.row.positionNumber !== null
? `(${props.row.positionNumber})`
: ""
}}
</div>
</div>
</div>
<div v-else>
<div class="col-4">
<div class="text-weight-medium">-</div>
</div>
</div>
</template>
<template v-else-if="col.name === 'reportingDate' && col.value !== '-'">
<div class="text-weight-medium">
{{ props.row.reportingDate }}
</div>
</template>
<template v-else-if="col.name === 'bmaOfficer'">
<div class="text-weight-medium">
{{ props.row.bmaOfficer !== null ? props.row.bmaOfficer : "-" }}
</div>
</template>
<template v-else-if="col.name === 'statusName'">
<div class="text-weight-medium">
{{ props.row.statusName }}
</div>
</template>
</q-td>
<q-td auto-width>
<q-btn icon="mdi-dots-vertical" size="12px" color="grey-7" flat round dense>
<q-menu transition-show="jump-down" transition-hide="jump-up">
<q-list dense style="min-width: 100px">
<q-item v-if="roleAdmin && props.row.statusId === 'UN-CONTAIN'" clickable v-close-popup
@click="openAppointModal(props.row.personalId)">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-icon color="primary" size="xs" name="mdi-bookmark-outline" />
</q-item-section>
<q-item-section>เลือกหน่วยงานที่รับบรรจุ</q-item-section>
</q-item>
<q-separator />
<q-item v-if="roleAdmin && props.row.statusId === 'UN-CONTAIN'" clickable v-close-popup
@click="editDetail(props.row, 'deferment')">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-icon color="blue" size="xs" name="mdi-account-alert-outline" />
</q-item-section>
<q-item-section>ขอผ่อนผัน</q-item-section>
</q-item>
<q-item v-else-if="props.row.deferment === true &&
props.row.statusId != 'DISCLAIM'
" clickable v-close-popup @click="editDetail(props.row, 'defermentInfo')">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-icon color="blue" size="xs" name="mdi-account-details-outline" />
</q-item-section>
<q-item-section>ข้อมูลการผ่อนผัน</q-item-section>
</q-item>
<q-separator />
<q-item v-if="props.row.statusId === 'UN-CONTAIN' ||
props.row.statusId === 'PREPARE-CONTAIN'
" clickable v-close-popup @click="editDetail(props.row, 'disclaim')">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
</q-item-section>
<q-item-section>สละสิทธิ์</q-item-section>
</q-item>
<q-item v-else-if="props.row.statusId === 'DISCLAIM'" clickable v-close-popup
@click="editDetail(props.row, 'disclaimInfo')">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
</q-item-section>
<q-item-section>ข้อมูลการสละสิทธิ์</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-td>
</q-tr>
</template>
</Table>
</q-form>
<!-- เลือกหน่วยงานที่บรรจุ -->
<DialogOrgTree v-model:modal="appointModal" :personalId="personalId" :close="clickCloseModalTree" />
<!-- popup ขอผ่อนผัน / สละสิทธิ์ -->
<q-form ref="myForm">
<DialogCard v-model:Modal="modal" :personal-id="personalId" :close="clickClose" :validate="validateData" />
</q-form>
<q-dialog v-model="modalDefermentDisclaim" persistent>
<q-card style="width: 800px">
<q-form ref="myForm">
<DialogHeader :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm">
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules
:rules="[(val) => !!val || 'กรุณากรอกเหตุผล']" :readonly="!edit" :borderless="!edit" v-model="userNote"
:label="`${'กรอกเหตุผล'}`" @update:model-value="clickEditRow" type="textarea" />
<q-file v-if="getNumFile === 1" v-model="files" dense :label="`${'เลือกไฟล์เอกสารหลักฐาน'}`" outlined
use-chips :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']" multiple
@update:model-value="clickEditRow" class="q-py-sm">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
</q-card-section>
<q-separator />
<DialogFooter :editvisible="true" :validate="validateData" :save="modalDisclaim ? saveDisclaim : saveDeferment" />
</q-form>
</q-card>
</q-dialog>
<!-- dialog ข้อมูลขอผ่อนผัน / สละสิทธิ์ -->
<q-dialog v-model="modalwaitInfo" persistent>
<q-card style="width: 500px; max-width: 500px">
<q-form ref="myForm">
<DialogHeader :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm">
<div class="row">
<div class="col-3 text-grey-7">เหตุผล</div>
<div class="col-4">{{ dataInfo.reason }}</div>
</div>
<div v-if="!modalDisclaim" class="row q-pt-md">
<div class="col-3 text-grey-7 q-mt-sm">เอกสารหลักฐาน</div>
<div class="col-2 q-mt-sm">
<q-btn type="a" :href="dataInfo.reliefDoc" color="primary" flat dense round size="14px" icon="mdi-download"
target="_blank" />
</div>
</div>
</q-card-section>
<q-separator />
</q-form>
</q-card>
</q-dialog>
</template>
<style lang="scss" scoped>
.custom-input {
font-size: 16px;
}
.my-list-link {
border-radius: 5px;
font-weight: 600;
border: 1px solid #00aa86;
}
.q-table p {
margin-bottom: 0;
color: #818181;
}
.img-info {
width: 30px !important;
height: 30px !important;
border-radius: 50%;
object-fit: cover;
margin-right: 10px;
}
</style>

256
src/modules/05_placement/components/pass/TableDetail.vue → src/modules/05_placement/components/PersonalList/TableDetail.vue
View file

@ -1,39 +1,40 @@
<script setup lang="ts">
import { ref } from "vue";
import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
import { ref, watch } from "vue";
import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
import { useQuasar } from "quasar";
import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
import DialogFooter from "@/modules/05_placement/components/PersonalList/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>
@ -163,10 +190,7 @@ const close = async () => {
<q-card style="max-width: 100%; width: 80%">
<q-form ref="myForm">
<div class="row">
<DialogHeader
:title="`รายละเอียดของ ${props.getdetail.fullName}`"
@click="close"
/>
<DialogHeader :title="`รายละเอียดของ ${personalForm.fullName}`" @click="close" />
</div>
<q-separator />
@ -175,9 +199,8 @@ const close = async () => {
<q-card bordered class="card-panding">
<div class="row items-center q-pa-xs header-text">
ข้อมูลทั่วไป
<span class="check-officer"
><q-icon name="mdi-check" /> ข้าราชการฯ กทม</span
>
<span class="check-officer"><q-icon name="mdi-check" v-if="personalForm.bmaofficer !== null && ''" />{{
formBmaofficer(personalForm.bmaofficer) }}</span>
</div>
<div class="row q-pa-xs">
<div class="col-3 header-sub-text">
@ -186,10 +209,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 +221,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 +236,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>
@ -221,17 +244,8 @@ const close = async () => {
<div class="contanier-box-mini">
<q-card bordered class="card-panding">
<div class="row items-center q-pa-xs header-text">การศึกษา</div>
<q-table
ref="table"
:rows="rows"
:columns="columns"
flat
bordered
class="custom-header-table"
virtual-scroll
:virtual-scroll-sticky-size-start="48"
dense
>
<q-table ref="table" :rows="rows" :columns="columns" flat bordered class="custom-header-table"
virtual-scroll :virtual-scroll-sticky-size-start="48" dense hide-bottom>
</q-table>
</q-card>
</div>
@ -252,31 +266,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 +306,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,17 +322,9 @@ 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">
<q-checkbox
size="xs"
v-model="selection"
:val="item.id"
:label="item.label"
keep-color
color="teal"
:rules="[isRequired]"
class="checkbox-group"
/>
<div v-for="(item, index) of personalForm.isProperty" :key="index" class="q-pa-sm">
<q-checkbox size="xs" v-model="item.value" :val="item.value" :label="item.name" keep-color color="teal"
:rules="[isRequired]" class="checkbox-group" />
<q-separator />
</div>
</q-card>
@ -326,12 +332,7 @@ const close = async () => {
</div>
<q-separator />
<div>
<DialogFooter
@click="ClickSave"
:model="props.Modal"
:editvisible="save"
:validate="validateData"
/>
<DialogFooter @click="ClickSave" :model="props.Modal" :editvisible="save" :validate="validateData" />
</div>
</q-form>
</q-card>
@ -375,6 +376,7 @@ const close = async () => {
line-height: 150%;
color: #818181;
}
.sub-text {
font-weight: 400;
font-size: 16px;

102
src/modules/05_placement/components/pass/TableView.vue → src/modules/05_placement/components/PersonalList/TableView.vue
View file

@ -1,60 +1,54 @@
<template>
<div class="q-px-md q-pb-md">
<div class="col-12 row q-py-sm">
<q-toggle v-if="roleAdmin === false" class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
:model-value="expiredAccount" color="blue" label="แสดงบัญชีหมดอายุ" @update:model-value="updateExpiredAccount" />
<q-toggle v-if="roleAdmin === false" class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
:model-value="containStatus" color="blue" label="แสดงสถานะบรรจุแล้ว" @update:model-value="updateContain" />
<q-space />
<div class="items-center" style="display: flex">
<q-input standout dense :model-value="inputfilter" ref="filterRef" @update:model-value="updateInput" outlined
debounce="300" placeholder="ค้นหา" style="max-width: 200px" class="q-ml-sm">
<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 q-ml-sm" />
</div>
</div>
<q-space />
<div class="items-center" style="display: flex">
<q-input standout dense :model-value="inputfilter" ref="filterRef" @update:model-value="updateInput" outlined
debounce="300" placeholder="ค้นหา" style="max-width: 200px" class="q-ml-sm">
<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 q-ml-sm" />
</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" v-model:pagination="pagination">
<template v-slot:pagination="scope">
<q-pagination v-model="pagination.page" color="primary" :max="scope.pagesNumber" :max-pages="5" size="sm"
boundary-links direction-links></q-pagination>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width v-if="history == true" />
</q-tr>
</template>
<template #body="props">
<slot v-bind="props" name="columns"></slot>
</template>
</q-table>
</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" v-model:pagination="pagination">
<template v-slot:pagination="scope">
<q-pagination v-model="pagination.page" color="primary" :max="scope.pagesNumber" :max-pages="5" size="sm"
boundary-links direction-links></q-pagination>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width v-if="history == true" />
</q-tr>
</template>
<template #body="props">
<slot v-bind="props" name="columns"></slot>
</template>
</q-table>
</div>
</template>
<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,
@ -139,11 +133,11 @@ const props = defineProps({
type: Function,
default: () => console.log("not function"),
},
expiredAccount: Boolean,
containStatus: Boolean,
roleAdmin: Boolean
});
const pagination = ref({
sortBy: "desc",
sortBy: "number",
descending: false,
page: 1,
rowsPerPage: 10,
@ -164,7 +158,7 @@ const emit = defineEmits([
"update:editvisible",
"update:titleText",
"update:inputvisibleFilter",
"update:expiredaccountfilter"
"update:containfilter"
]);
const updateInput = (value: any) => {
@ -173,23 +167,9 @@ const updateInput = (value: any) => {
const updateVisible = (value: any) => {
emit("update:inputvisible", value);
};
const updateVisibleFilter = (value: any) => {
emit("update:inputvisibleFilter", value);
};
const updateExpiredAccount = (value: any) => {
emit("update:expiredaccountfilter", value);
};
const checkSave = () => {
props.validate();
props.save();
// if (myForm.value !== null) {
// myForm.value.validate().then((success) => {
// if (success) {
// }
// });
// }
const updateContain = (value: any) => {
emit("update:containfilter", value);
};
const resetFilter = () => {

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

@ -1,72 +0,0 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { defineAsyncComponent } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import cardTop from "@/modules/05_placement/components/pass/StatCard.vue";
import keycloak from "@/plugins/keycloak";
let roleAdmin = ref<boolean>(false);
const router = useRouter();
const year = ref<string>("2566");
const round = ref<string>("1");
const title = ref<string>("การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ");
const AddTablePosition = defineAsyncComponent(
() => import("@/modules/05_placement/components/pass/Table.vue")
);
const stat = ref<any>({
total: 5,
unContain: 1,
prepareContain: 3,
contain: 1,
disclaim: 0,
});
onMounted(async () => {
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">
<div class="toptitle">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.go(-1)"
/>
รายชื่อผู้สอบในรอบ {{ title }} ครั้งที่ {{ round }} ปี {{ year }}
</div>
<q-card bordered class="q-py-sm row col-12">
<div class="col-12 row bg-white">
<div class="fit q-px-md q-py-sm">
<div class="row col-12 q-col-gutter-md fit">
<cardTop :amount="stat.total" label="จำนวนทั้งหมด" color="#016987" />
<cardTop v-if="roleAdmin" :amount="stat.unContain" label="จำนวนที่ยังไม่บรรจุ" color="#02A998" />
<cardTop :amount="stat.prepareContain" label="จำนวนที่เตรียมบรรจุ" color="#2EA0FF" />
<cardTop :amount="stat.contain" label="จำนวนที่บรรจุแล้ว" color="#4154B3" />
<cardTop :amount="stat.disclaim" label="จำนวนที่สละสิทธิ์" color="#FF5C5F" />
</div>
</div>
</div>
</q-card>
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
<div>
<AddTablePosition class="q-pa-none" />
</div>
</q-card>
</template>
<style lang="scss">
.cardNum {
border-radius: 5px;
padding-left: 8px;
}
</style>

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

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

File diff suppressed because it is too large Load diff

5
src/modules/05_placement/components/probation/AddWork.vue
View file

@ -839,10 +839,11 @@ s borderless
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
import { ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import type { QForm } from "quasar";
// import type { QForm } from "quasar";
const router = useRouter();
const mixin = useCounterMixin();
const { date2Thai } = mixin;

2
src/modules/05_placement/components/probation/form.vue
View file

@ -910,6 +910,8 @@ const radio_2 = ref<any>(null);
const radio_3 = ref<any>(null);
const radio_4 = ref<any>(null);
const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
const text2_1 = ref<string>('');
const text2_2 = ref<string>('');
const onSubmit = () => {
$q.notify({

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

@ -1,35 +1,44 @@
import type { zipCodeOption } from "../../components/PersonalDetail/profileType";
interface DataOption {
id: number | string;
id: number | null;
name: string;
disable?: boolean;
}
interface DataOption1 {
id: string | null;
name: string | null;
disable?: boolean;
}
interface DataOptionInsignia {
id: string;
name: string;
typeName: string;
}
interface optionData {
id: string;
name: string;
}
interface EduOps {
levelOptions: DataOption[];
positionPathOptions: DataOption[];
levelOptions: optionData[];
positionPathOptions: optionData[];
}
interface InformationOps {
prefixOps: DataOption[];
genderOps: DataOption[];
bloodOps: DataOption[];
statusOps: DataOption[];
religionOps: DataOption[];
employeeClassOps: DataOption[];
employeeTypeOps: DataOption[];
prefixOps: optionData[];
genderOps: optionData[];
bloodOps: optionData[];
statusOps: optionData[];
religionOps: optionData[];
employeeClassOps: optionData[];
employeeTypeOps: optionData[];
}
interface AddressOps {
provinceOps: DataOption[];
districtOps: DataOption[];
districtCOps: DataOption[];
provinceOps: optionData[];
districtOps: optionData[];
districtCOps: optionData[];
subdistrictOps: zipCodeOption[];
subdistrictCOps: zipCodeOption[];
}
@ -53,6 +62,131 @@ interface CheckboxItem {
label: string;
}
interface Property {
name: string;
value: boolean;
}
interface PointExam {
pointA: number;
pointB: number;
pointC: number;
pointTotalA: number;
pointTotalB: number;
pointTotalC: number;
point: number;
pointTotal: number;
examNumber: number;
examRound: number;
pass: string | null;
}
interface Education {
id: string;
educationLevel: string;
institute: string;
degree: string;
field: string;
gpa: string;
country: string;
duration: string;
other: string;
fundName: string;
durationYear: number;
finishDate: Date;
isDate: string;
startDate: number;
endDate: number;
positionPath: string;
isEducation: string;
}
interface Family {
couple: string;
marryPrefix: string;
marryPrefixId: string;
marryFirstName: string;
marryLastName: string;
marryOccupation: string;
fatherPrefix: string;
fatherPrefixId: string;
fatherFirstName: string;
fatherLastName: string;
fatherOccupation: string;
motherPrefix: string;
motherPrefixId: string;
motherFirstName: string;
motherLastName: string;
motherOccupation: string;
}
interface Address {
registAddress: string;
registSubDistrict: string;
registSubDistrictId: string;
registZipCode: string;
registDistrict: string;
registDistrictId: string;
registProvince: string;
registProvinceId: string;
currentAddress: string;
currentSubDistrict: string;
currentSubDistrictId: string;
currentZipCode: string;
currentDistrict: string;
currentDistrictId: string;
currentProvince: string;
currentProvinceId: string;
registSame: string;
}
interface Certificate {
id: string;
certificateNo: string;
issuer: string;
issueDate: Date;
expireDate: Date;
certificateType: string;
}
const AddressDataDefualt: Address = {
registAddress: "",
currentAddress: "",
registSubDistrict: "",
registSubDistrictId: "",
registZipCode: "",
registDistrict: "",
registDistrictId: "",
registProvince: "",
registProvinceId: "",
currentSubDistrict: "",
currentSubDistrictId: "",
currentZipCode: "",
currentDistrict: "",
currentDistrictId: "",
currentProvince: "",
currentProvinceId: "",
registSame: "0",
};
const FamilyDataDefualt: Family = {
couple: "0",
marryPrefix: "",
marryPrefixId: "",
marryFirstName: "",
marryLastName: "",
marryOccupation: "",
fatherPrefix: "",
fatherPrefixId: "",
fatherFirstName: "",
fatherLastName: "",
fatherOccupation: "",
motherPrefix: "",
motherPrefixId: "",
motherFirstName: "",
motherLastName: "",
motherOccupation: "",
};
export type {
DataOption,
DataOptionInsignia,
@ -61,6 +195,16 @@ export type {
AddressOps,
Pagination,
EduOps,
DataOption1,
InsigniaOps,
CheckboxItem,
Property,
PointExam,
Education,
Family,
Address,
optionData,
Certificate,
};
export { AddressDataDefualt, FamilyDataDefualt };

1
src/modules/05_placement/interface/request/Education.ts
View file

@ -6,6 +6,7 @@ interface DataProps {
//ข้อมูล
interface RequestItemsObject {
id: string;
educationLevel: string;
level: string;
levelId: string;
positionPath: string;

6
src/modules/05_placement/interface/request/Main.ts
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;
}

33
src/modules/05_placement/interface/request/placement.ts
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,20 @@ interface TableName {
examResult: string;
};
}
export type { TableName };
interface PartialTableName {
personalId: string;
fullName: string;
name: 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};

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

@ -5,7 +5,7 @@
const PlacementMain = () =>
import("@/modules/05_placement/components/Main.vue");
const PlacementDetail = () =>
import("@/modules/05_placement/components/pass/Detail.vue");
import("@/modules/05_placement/components/PersonalList/Detail.vue");
const PlacementPersonalDetail = () =>
import("@/modules/05_placement/components/PersonalDetail/Detail.vue");
const addOrderPlacement = () =>
@ -29,8 +29,8 @@ const probationDetail = () =>
const probationForm = () =>
import("@/modules/05_placement/components/probation/form.vue");
const probationWorkAdd = () =>
import("@/modules/05_placement/components/probation/AddWork.vue");
const probationWorkAdd = () =>
import("@/modules/05_placement/components/probation/AddWork.vue");
export default [
{
path: "/placement",
@ -43,7 +43,7 @@ export default [
},
},
{
path: "/placement/detail",
path: "/placement/personal-list/:examId",
name: "placementDetail",
component: PlacementDetail,
meta: {
@ -53,7 +53,7 @@ export default [
},
},
{
path: "/placement/detail/:personalId",
path: "/placement/personal-detail/:personalId",
name: "PlacementPersonalDetail",
component: PlacementPersonalDetail,
meta: {
@ -130,7 +130,7 @@ export default [
Auth: true,
Key: [6.3],
Role: "placement",
}
},
},
{
path: "/probation/work/:id",
@ -141,5 +141,5 @@ export default [
Key: [6.3],
Role: "placement",
},
}
},
];

36
src/modules/05_placement/store.ts
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
));
}
};

5
src/modules/08_registryEmployee/views/Main.vue
View file

@ -116,7 +116,7 @@
<q-item
clickable
v-close-popup
@click="editDetail(props.row, 'wait')"
@click="editDetail(props.row)"
>
<q-item-section
style="min-width: 0px"
@ -127,7 +127,7 @@
<q-item-section>กำหนดตำแหน่ง</q-item-section>
</q-item>
<q-separator />
<q-item clickable v-close-popup @click="clickDelete">
<q-item clickable v-close-popup @click="clickDelete('test')">
<q-item-section
style="min-width: 0px"
avatar
@ -168,6 +168,7 @@ import type { QInput, QForm, QTableProps } from "quasar";
import { useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import type { treeTab } from "@/modules/05_placement/interface/index/Main";
const props = defineProps({
next: {