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

- rename folder personal list

Browse source 
- add filter status contain ของหน่วยงาน
This commit is contained in:
Warunee Tamkoo 2023-07-13 14:20:28 +07:00
parent 37b3fa9f0c
commit 0a74df75bc
11 changed files with 234 additions and 410 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,7 +5,7 @@ const orgTree = `${env.API_URI_ORG_TREE}`;
export default {
MainDetail: (year: number) => `${placement}/exam/${year}`,
yearOptions: () => `${placement}/fiscal`,
redirectToPage: (examId: string) => `${placement}/pass/${examId}`,
personalList: (examId: string) => `${placement}/pass/${examId}`,
disclaimF: () => `${placement}/pass/disclaim`,
deferment: () => `${placement}/pass/deferment`,
getStatCard: (examId: string) => `${placement}/pass/stat/${examId}`,

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

@ -128,14 +128,15 @@ const fetchPlacementData = async (val: number) => {
rows.value = [];
http
.get(config.API.MainDetail(val))
.then((res) => {
.then(async (res) => {
dataPlacement.value = res.data.result;
DataStore.DataMainOrig = dataPlacement.value;
console.log(DataStore.DataMainOrig);
// rows.value = DataStore.DataMainOrig;
DataStore.DataMainOrig.map((e: any) => {
rows.value.push({
const dataArr: any = [];
await DataStore.DataMainOrig.map((e: any) => {
dataArr.push({
id: e.id,
examRound: e.examRound,
examOrder: e.examOrder,
@ -149,6 +150,8 @@ const fetchPlacementData = async (val: number) => {
});
});
rows.value = dataArr;
examTypeFilter();
examTimeFilter();
expiredAccountFilter();
@ -160,6 +163,7 @@ const fetchPlacementData = async (val: number) => {
hideLoader();
});
};
const fetchYearOptions = async () => {
http
.get(config.API.yearOptions())
@ -185,7 +189,7 @@ const filterYear = () => {
// ดูรายการสอบแข่งขัน หน้าต่อไป
const redirectToPage = (examId?: number) => {
router.push(`/placement/pass/${examId}`);
router.push(`/placement/personal-list/${examId}`);
};
//-------------------|ค้นหาในตาราง|-----------------//
@ -243,9 +247,10 @@ const searchFilterTable = async () => {
examType.value,
expiredAccount.value
);
// rows.value = DataStore.DataMainUpdate;
DataStore.DataMainUpdate.map((e: any) => {
rows.value.push({
const dataArr: any = [];
await DataStore.DataMainUpdate.map((e: any) => {
dataArr.push({
id: e.id,
examRound: e.examRound,
examOrder: e.examOrder,
@ -258,6 +263,7 @@ const searchFilterTable = async () => {
numberOfCandidates: e.numberOfCandidates,
});
});
rows.value = dataArr;
}
};
@ -278,7 +284,7 @@ const expiredAccountFilter = async () => {
const paging = ref<boolean>(true);
const pagination = ref({
sortBy: "accountStartDate",
descending: false,
descending: true,
page: 1,
rowsPerPage: 10,
});

95
src/modules/05_placement/components/pass/Detail.vue → src/modules/05_placement/components/PersonalList/Detail.vue
View file

@ -1,8 +1,8 @@
<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/pass/StatCard.vue";
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";
@ -14,7 +14,7 @@ const DataStore = usePlacementDataStore();
const $q = useQuasar
const mixin = useCounterMixin()
const { messageError } = mixin
const { messageError, showLoader, hideLoader } = mixin
let roleAdmin = ref<boolean>(false);
const router = useRouter();
const route = useRoute();
@ -24,7 +24,7 @@ const round = ref<string>("");
const title = ref<string>("");
const examData = ref<any>();
const AddTablePosition = defineAsyncComponent(
() => import("@/modules/05_placement/components/pass/Table.vue")
() => import("@/modules/05_placement/components/PersonalList/Table.vue")
);
const stat = ref<any>({
total: 0,
@ -37,71 +37,82 @@ const stat = ref<any>({
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,
};
.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);
})
})
.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);
// console.log("DataStore===>", DataStore.DataMainOrig.find((x: any) => x.id == examId))
title.value = examData.value.examRound;
round.value = examData.value.examOrder;
year.value = examData.value.fiscalYear;
await getStat()
if (keycloak.tokenParsed != null) {
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
}
});
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)"
/>
<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" />
<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>
</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"/>
<AddTablePosition :statCard="getStat" class="q-pa-none" @get-stat="getStat" />
</div>
</q-card>
</template>

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

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

4
src/modules/05_placement/components/pass/OrgTree.vue → src/modules/05_placement/components/PersonalList/OrgTree.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import { useQuasar, QForm } from "quasar";
import { onMounted, reactive, ref } from "vue";
import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
import 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";

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

352
src/modules/05_placement/components/pass/Table.vue → src/modules/05_placement/components/PersonalList/Table.vue
View file

@ -3,12 +3,12 @@ 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/pass/TableView.vue";
import DialogCard from "@/modules/05_placement/components/pass/TableDetail.vue";
import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
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/pass/OrgTree.vue";
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";
@ -35,6 +35,7 @@ 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);
@ -135,11 +136,10 @@ const columns = ref<QTableProps["columns"]>([
const getTable = async () => {
showLoader();
await http
.get(config.API.redirectToPage(examIdString))
.then((res: any) => {
const dataArray: PartialTableName[] = res.data.result;
rows.value = [];
dataArray.map((data) => {
.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,
@ -157,28 +157,30 @@ const getTable = async () => {
data.bmaOfficer == "OFFICER"
? "ขรก.กทม. สามัญ"
: data.bmaOfficer == "EMPLOYEE_PERM"
? "ลูกจ้างประจำ"
: data.bmaOfficer == "EMPLOYEE_TEMP"
? "ลูกจ้างชั่วคราว"
: data.bmaOfficer == null
? "บุคคลภายนอก"
: "-",
? "ลูกจ้างประจำ"
: 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"
? "สละสิทธิ์"
: "-",
? "เตรียมบรรจุ"
: data.statusId == "CONTAIN"
? "บรรจุแล้ว"
: data.statusId == "DISCLAIM"
? "สละสิทธิ์"
: "-",
deferment: data.deferment,
};
rows.value.push(rowData);
rowsAll.value.push(rowData);
});
rows.value = roleAdmin ? rowsAll.value : rowsAll.value.filter((x: any) => x.statusId != 'CONTAIN');
})
.catch((e) => {
messageError($q, e);
@ -370,101 +372,74 @@ onMounted(async () => {
await getTable();
});
const expiredAccount = ref<boolean>(false);
watch(expiredAccount, () => {
console.log("expiredAccount===>", expiredAccount.value);
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');
}
});
const pagination = ref({
sortBy: "number",
descending: false,
page: 1,
rowsPerPage: 10,
});
</script>
<template>
<q-form ref="myForm">
<Table
:expired-account="expiredAccount"
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
v-model:editvisible="editvisible"
v-model:expiredaccountfilter="expiredAccount"
:history="true"
:boss="true"
:saveNoDraft="true"
:role-admin="roleAdmin"
>
<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"
>
<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"
>
<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-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 class="text-weight-medium">{{ props.row.name }}</div>
<div class="text-weight-light">{{ props.row.idCard }}</div>
</div>
</template>
<template v-else-if="col.name === 'number'">
<div class="text-weight-medium">
{{ props.row.number !== null ? props.row.number : "-" }}
</div>
</template>
</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
: "-"
<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})`
: ""
? `(${props.row.organizationShortName})`
: ""
}}
</div>
<div class="text-weight-light">
{{
props.row.positionPath !== null
? props.row.positionPath
: "-"
? props.row.positionPath
: "-"
}}
{{
props.row.positionNumber !== null
? `(${props.row.positionNumber})`
: ""
? `(${props.row.positionNumber})`
: ""
}}
</div>
</div>
@ -475,9 +450,7 @@ const pagination = ref({
</div>
</div>
</template>
<template
v-else-if="col.name === 'reportingDate' && col.value !== '-'"
>
<template v-else-if="col.name === 'reportingDate' && col.value !== '-'">
<div class="text-weight-medium">
{{ props.row.reportingDate }}
</div>
@ -494,116 +467,45 @@ const pagination = ref({
</template>
</q-td>
<q-td auto-width>
<q-btn
icon="mdi-dots-vertical"
size="12px"
color="grey-7"
flat
round
dense
>
<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 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 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 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 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 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>
@ -617,57 +519,25 @@ const pagination = ref({
</q-form>
<!-- เลือกหน่วยงานที่บรรจุ -->
<DialogOrgTree
v-model:modal="appointModal"
:personalId="personalId"
:close="clickCloseModalTree"
/>
<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"
/>
<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"
/>
<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"
>
<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>
@ -675,11 +545,7 @@ const pagination = ref({
</div>
</q-card-section>
<q-separator />
<DialogFooter
:editvisible="true"
:validate="validateData"
:save="modalDisclaim ? saveDisclaim : saveDeferment"
/>
<DialogFooter :editvisible="true" :validate="validateData" :save="modalDisclaim ? saveDisclaim : saveDeferment" />
</q-form>
</q-card>
</q-dialog>
@ -688,10 +554,7 @@ const pagination = ref({
<q-dialog v-model="modalwaitInfo" persistent>
<q-card style="width: 500px; max-width: 500px">
<q-form ref="myForm">
<DialogHeader
:title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`"
:close="clickClose"
/>
<DialogHeader :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm">
<div class="row">
@ -701,17 +564,8 @@ const pagination = ref({
<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"
/>
<q-btn type="a" :href="dataInfo.reliefDoc" color="primary" flat dense round size="14px" icon="mdi-download"
target="_blank" />
</div>
</div>
</q-card-section>

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

@ -1,8 +1,8 @@
<script setup lang="ts">
import { ref, watch } from "vue";
import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.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 { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
@ -28,7 +28,7 @@ const props = defineProps({
});
const rows = ref<any[]>([
]);
]);
//--------------------(แปลงวันที่เป็นไทย)------------------------------------//
// const graduationDate = new Date(graduationExample);
// rows.value[0].graduation = date2Thai(graduationDate, false, false);
@ -190,10 +190,7 @@ const putpersonalForm = async () => {
<q-card style="max-width: 100%; width: 80%">
<q-form ref="myForm">
<div class="row">
<DialogHeader
:title="`รายละเอียดของ ${personalForm.fullName}`"
@click="close"
/>
<DialogHeader :title="`รายละเอียดของ ${personalForm.fullName}`" @click="close" />
</div>
<q-separator />
@ -202,12 +199,8 @@ const putpersonalForm = 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"
v-if="personalForm.bmaofficer !== null && ''"
/>{{ formBmaofficer(personalForm.bmaofficer) }}</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">
@ -251,18 +244,8 @@ const putpersonalForm = 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
hide-bottom
>
<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>
@ -339,21 +322,9 @@ const putpersonalForm = async () => {
<div class="col-12 row items-center q-pa-sm header-text">
การคัดกรองคุณสมบัติ
</div>
<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"
/>
<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>
@ -361,12 +332,7 @@ const putpersonalForm = 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>
@ -410,6 +376,7 @@ const putpersonalForm = async () => {
line-height: 150%;
color: #818181;
}
.sub-text {
font-weight: 400;
font-size: 16px;

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

@ -1,44 +1,44 @@
<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">
@ -133,12 +133,12 @@ const props = defineProps({
type: Function,
default: () => console.log("not function"),
},
expiredAccount: Boolean,
containStatus: Boolean,
roleAdmin: Boolean
});
const pagination = ref({
sortBy: "number",
descending: true,
descending: false,
page: 1,
rowsPerPage: 10,
});
@ -158,7 +158,7 @@ const emit = defineEmits([
"update:editvisible",
"update:titleText",
"update:inputvisibleFilter",
"update:expiredaccountfilter"
"update:containfilter"
]);
const updateInput = (value: any) => {
@ -167,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 = () => {

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/pass/:examId",
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",
},
}
},
];