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

update by req

Browse source
This commit is contained in:
Warunee Tamkoo 2023-07-12 16:56:52 +07:00
parent 71884b950f
commit 3aa9b68b23
4 changed files with 185 additions and 296 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -7,7 +7,7 @@ export default {
yearOptions: () => `${placement}/fiscal`, yearOptions: () => `${placement}/fiscal`,
redirectToPage: (examId: string) => `${placement}/pass/${examId}`, redirectToPage: (examId: string) => `${placement}/pass/${examId}`,
disclaimF: () => `${placement}/pass/disclaim`, disclaimF: () => `${placement}/pass/disclaim`,
defermentF: () => `${placement}/pass/deferment`, deferment: () => `${placement}/pass/deferment`,
getStatCard: (examId: string) => `${placement}/pass/stat/${examId}`, getStatCard: (examId: string) => `${placement}/pass/stat/${examId}`,
getDatapersonal: (id: string) => `${placement}/personal/${id}`, getDatapersonal: (id: string) => `${placement}/personal/${id}`,
putProperty: (id: string) => `${placement}/property/${id}`, putProperty: (id: string) => `${placement}/property/${id}`,

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

@ -2,7 +2,6 @@
import { onMounted, ref, reactive } from "vue"; import { onMounted, ref, reactive } from "vue";
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import type { FormPlacementMainData } from "@/modules/05_placement/interface/request/Main";
import type { import type {
DataOption, DataOption,
DataOption1, DataOption1,
@ -17,7 +16,6 @@ const DataStore = usePlacementDataStore();
const $q = useQuasar(); const $q = useQuasar();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai } = mixin; const { showLoader, hideLoader, messageError, date2Thai } = mixin;
const selectedFiscalYear = ref(0);
// หัวตาราง // หัวตาราง
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
@ -84,24 +82,20 @@ const columns = ref<QTableProps["columns"]>([
{ {
name: "accountStartDate", name: "accountStartDate",
align: "left", align: "left",
label: "วันที่เริ่มคำสั่ง", label: "วันที่บัญชีใช้ได้ตั้งแต่",
sortable: true, sortable: true,
field: "accountStartDate", field: "accountStartDate",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "accountExpirationDate", name: "accountExpirationDate",
align: "left", align: "left",
label: "วันที่บัญชีหมดอายุ", label: "วันที่บัญชีใช้ได้ถึง",
sortable: true, sortable: true,
field: "accountExpirationDate", field: "accountExpirationDate",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
// ข้อมูลตาราง (จำลอง) // ข้อมูลตาราง (จำลอง)
@ -128,11 +122,6 @@ const visibleColumns = ref([
onMounted(async () => { onMounted(async () => {
await fetchYearOptions(); await fetchYearOptions();
// await fiscalYearFilter();
// examTimeFilter();
// await examTypeFilter();
// expiredAccountFilter();
// await searchFilterTable();
}); });
const fetchPlacementData = async (val: number) => { const fetchPlacementData = async (val: number) => {
showLoader(); showLoader();
@ -159,12 +148,12 @@ const fetchYearOptions = async () => {
.then((res) => { .then((res) => {
const response = res.data.result; const response = res.data.result;
yearOptions.push(...response); yearOptions.push(...response);
const maxNumber = yearOptions.reduce((max, e) => { const maxNumber = yearOptions.reduce((max: any, e: any) => {
return e.id > max ? e.id : max; return e.id > max ? e.id : max;
}, ""); }, "");
searchYear.value = maxNumber; searchYear.value = maxNumber;
DataStore.DataMainYearSet(searchYear.value); DataStore.DataMainYearSet(searchYear.value);
DataStore.DataMainYear = yearOptions.value; // DataStore.DataMainYear = yearOptions.value;
fetchPlacementData(searchYear.value); fetchPlacementData(searchYear.value);
}) })
.catch((e) => { .catch((e) => {
@ -176,83 +165,11 @@ const filterYear = () => {
fetchPlacementData(searchYear.value); fetchPlacementData(searchYear.value);
}; };
// watchEffect(() => {
// rows.value = OriginalData.value;
// });
// const OriginalDataFetch = async (year: number) => {
// yearValue.value = year;
// try {
// const response = await http.get(config.API.MainDetail(year));
// const apiData = response.data.result;
// console.log(`🚀 ข้อมูลจากการ get (${year})`, apiData);
// await DataStore.DataMain(apiData);
// OriginalData.value = await DataStore.DataMainOrig;
// UpdataData.value = OriginalData.value.filter(
// (data) => data.fiscalYear === year
// );
// } catch (error) {
// messageError($q, error);
// }
// };
// ดูรายการสอบแข่งขัน หน้าต่อไป // ดูรายการสอบแข่งขัน หน้าต่อไป
const redirectToPage = (examId?: number) => { const redirectToPage = (examId?: number) => {
router.push(`/placement/pass/${examId}`); router.push(`/placement/pass/${examId}`);
}; };
//-------------------|เลือกปีงบประมาณ|-----------------------//
const fiscalyear = ref<number>(0);
const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
const addedfiscalYearValues: number[] = [];
// const fiscalYearFilter = async () => {
// try {
// const response = await http.get(config.API.yearOptions());
// const dataOptions = response.data.result;
// fiscalyearOP.push(...dataOptions);
// let maxYear = 0;
// for (let data of dataOptions) {
// if (data.id > maxYear) {
// maxYear = data.id;
// }
// }
// fiscalyear.value = maxYear;
// // อัพเดตค่าของ selectedFiscalYear
// selectedFiscalYear.value = fiscalyear.value;
// // โหลดข้อมูลใหม่เมื่อตัวเลือกปีเปลี่ยนแปลง
// await OriginalDataFetch(selectedFiscalYear.value);
// } catch (e) {
// messageError($q, e);
// }
// };
//-------------------|เลือกปีงบประมาณตาม API|--------------------//
// const searchfiscalyear = async () => {
// try {
// const res = await http.get(config.API.yearOptions());
// const dataOptions: YearOption[] = res.data.result;
// if (fiscalyear.value === 0) {
// await OriginalDataFetch(0);
// } else {
// const selectedYearObject = dataOptions.find(
// (option: YearOption) => option.id === fiscalyear.value
// );
// OriginalDataFetch(fiscalyear.value);
// if (selectedYearObject) {
// } else {
// console.log("No Selected Year Object");
// }
// }
// } catch (e) {
// messageError($q, e);
// }
// };
//-------------------|ค้นหาในตาราง|-----------------// //-------------------|ค้นหาในตาราง|-----------------//
const filterKeyword = ref<string>(""); const filterKeyword = ref<string>("");
const filterRef = ref<any>(null); const filterRef = ref<any>(null);
@ -286,38 +203,8 @@ const examTimeFilter = async () => {
const examType = ref<string | null>("all"); const examType = ref<string | null>("all");
const examTypeOP = ref<DataOption1[]>([{ id: "all", name: "ทั้งหมด" }]); const examTypeOP = ref<DataOption1[]>([{ id: "all", name: "ทั้งหมด" }]);
const addedExamTypeValues: Set<string> = new Set(); const addedExamTypeValues: Set<string> = new Set();
const data = [
{
accountEndDate: "2024-06-21T01:22:59.251572",
accountExpirationDate: "2024-06-21T01:22:59.251572",
accountStartDate: "2023-06-22T01:22:59.251572",
examOrder: "1",
examRound:
"การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
examTypeName: "แข่งขัน",
examTypeValue: "0a846508-4932-40de-9a9e-5b519492211c",
fiscalYear: 2566,
id: "0a846508-4932-40de-9a9e-5b519492216c",
isExpired: false,
numberOfCandidates: 1,
},
{
accountEndDate: "2024-06-21T01:22:59.251572",
accountExpirationDate: "2024-06-21T01:22:59.251572",
accountStartDate: "2023-06-22T01:22:59.251572",
examOrder: "2",
examRound:
"การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
examTypeName: "แข่งขัน",
examTypeValue: "0a846508-4932-40de-9a9e-5b519492211c",
fiscalYear: 2566,
id: "0a846508-4932-40de-9a9e-5b519492216c",
isExpired: false,
numberOfCandidates: 1,
},
];
const examTypeFilter = () => { const examTypeFilter = () => {
dataPlacement.value.forEach((item) => { dataPlacement.value.forEach((item: any) => {
const examTypeName = item.examTypeName; const examTypeName = item.examTypeName;
const examTypeValue = item.examTypeValue; const examTypeValue = item.examTypeValue;
if (examTypeName && !addedExamTypeValues.has(examTypeName)) { if (examTypeName && !addedExamTypeValues.has(examTypeName)) {
@ -345,7 +232,7 @@ const searchFilterTable = async () => {
const expiredAccount = ref<boolean>(false); const expiredAccount = ref<boolean>(false);
const expiredAccountFilter = async () => { const expiredAccountFilter = async () => {
const currentDate = new Date(); const currentDate = new Date();
const updatedRows = dataPlacement.value.map((data) => { const updatedRows = dataPlacement.value.map((data: any) => {
let expirationDate = new Date(data.accountExpirationDate); let expirationDate = new Date(data.accountExpirationDate);
let isExpired = currentDate > expirationDate; let isExpired = currentDate > expirationDate;
@ -356,7 +243,7 @@ const expiredAccountFilter = async () => {
const paging = ref<boolean>(true); const paging = ref<boolean>(true);
const pagination = ref({ const pagination = ref({
sortBy: "desc", sortBy: "accountStartDate",
descending: false, descending: false,
page: 1, page: 1,
rowsPerPage: 10, rowsPerPage: 10,

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

@ -7,7 +7,6 @@ import Table from "@/modules/05_placement/components/pass/TableView.vue";
import DialogCard from "@/modules/05_placement/components/pass/TableDetail.vue"; import DialogCard from "@/modules/05_placement/components/pass/TableDetail.vue";
import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue"; import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue"; import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
import type { TableName } from "@/modules/05_placement/interface/request/placement";
import type { PartialTableName } from "@/modules/05_placement/interface/request/placement"; 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/pass/OrgTree.vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
@ -80,7 +79,6 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
}, },
{ {
name: "number", name: "number",
align: "center", align: "center",
@ -153,9 +151,9 @@ const getTable = async () => {
positionPath: data.positionPath, positionPath: data.positionPath,
reportingDate: dateText(new Date(data.reportingDate)), reportingDate: dateText(new Date(data.reportingDate)),
number: data.number, number: data.number,
bmaOfficer: data.bmaOfficer, bmaOfficer: data.bmaOfficer == 'OFFICER' ? 'ขรก.กทม. สามัญ' : data.bmaOfficer == 'EMPLOYEE_PERM' ? 'ลูกจ้างประจำ' : data.bmaOfficer == 'EMPLOYEE_TEMP' ? 'ลูกจ้างชั่วคราว' : data.bmaOfficer == null ? 'บุคคลภายนอก' : '-',
statusId: data.statusId, statusId: data.statusId,
statusName: data.statusId == 'un-contain' ? 'ยังไม่บรรจุ' : data.statusId == 'PREPARE-CONTAIN' ? 'เตรียมบรรจุ' : data.statusId == 'CONTAIN'? 'บรรจุแล้ว' : data.statusId == 'DISCLAIM' ? 'สละสิทธิ์' : '-', statusName: data.statusId == 'UN-CONTAIN' ? 'ยังไม่บรรจุ' : data.statusId == 'PREPARE-CONTAIN' ? 'เตรียมบรรจุ' : data.statusId == 'CONTAIN' ? 'บรรจุแล้ว' : data.statusId == 'DISCLAIM' ? 'สละสิทธิ์' : '-',
deferment: data.deferment, deferment: data.deferment,
}; };
@ -172,16 +170,17 @@ const getTable = async () => {
const appointModal = ref<boolean>(false); const appointModal = ref<boolean>(false);
const savePostpone = async () => { const saveDeferment = async () => {
myForm.value.validate().then(async (result: boolean) => { myForm.value.validate().then(async (result: boolean) => {
if (result) { if (result) {
showLoader()
const formData = new FormData(); const formData = new FormData();
formData.append("personalId", personalId.value); formData.append("personalId", personalId.value);
formData.append("note", userNote.value), formData.append("note", userNote.value);
formData.append("files", files.value); formData.append("files", files.value[0]);
await http await http
.post(config.API.defermentF(), formData) .post(config.API.deferment(), formData)
.then((res) => { .then((res) => {
success($q, "บันทึกสำเร็จ"); success($q, "บันทึกสำเร็จ");
}) })
@ -200,6 +199,7 @@ const savePostpone = async () => {
const saveDisclaim = async () => { const saveDisclaim = async () => {
myForm.value.validate().then(async (result: boolean) => { myForm.value.validate().then(async (result: boolean) => {
if (result) { if (result) {
showLoader()
const dataPost = { const dataPost = {
note: userNote.value, note: userNote.value,
personId: personalId.value, personId: personalId.value,
@ -271,7 +271,7 @@ const editDetail = (
.get(config.API.placementDefermentInfo(props.personalId)) .get(config.API.placementDefermentInfo(props.personalId))
.then((res: any) => { .then((res: any) => {
dataInfo.reason = res.data.result.reliefReason; dataInfo.reason = res.data.result.reliefReason;
dataInfo.reliefDoc = res.data.reliefDoc dataInfo.reliefDoc = res.data.result.reliefDoc
}) })
.catch((e) => { .catch((e) => {
messageError($q, e); messageError($q, e);
@ -350,172 +350,179 @@ const expiredAccount = ref<boolean>(false);
watch(expiredAccount, () => { watch(expiredAccount, () => {
console.log("expiredAccount===>", expiredAccount.value); console.log("expiredAccount===>", expiredAccount.value);
}); });
const pagination = ref({
sortBy: "number",
descending: false,
page: 1,
rowsPerPage: 10,
});
</script> </script>
<template> <template>
<q-form ref="myForm"> <q-form ref="myForm">
<Table :expired-account="expiredAccount" :rows="rows" :columns="columns" :filter="filter" <Table :expired-account="expiredAccount" :rows="rows" :columns="columns" :filter="filter"
:visible-columns="visibleColumns" v-model:inputfilter="filter" v-model:inputvisible="visibleColumns" :visible-columns="visibleColumns" v-model:inputfilter="filter" v-model:inputvisible="visibleColumns"
v-model:editvisible="editvisible" v-model:expiredaccountfilter="expiredAccount" :history="true" :boss="true" v-model:editvisible="editvisible" v-model:expiredaccountfilter="expiredAccount" :history="true" :boss="true"
:saveNoDraft="true" :role-admin="roleAdmin"> :saveNoDraft="true" :role-admin="roleAdmin">
<template #columns="props"> <template #columns="props">
<q-tr :props="props"> <q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row.personalId)" <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row.personalId)"
class="cursor-pointer"> class="cursor-pointer">
<template v-if="col.name === 'position'"> <template v-if="col.name === 'position'">
{{ props.rowIndex + 1 }} {{ props.rowIndex + 1 }}
</template> </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"> <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" /> <img v-else :src="props.row.avatar" class="col-4 img-info" />
<div class="col-4"> <div class="col-4">
<div class="text-weight-medium">{{ props.row.fullName }}</div> <div class="text-weight-medium">{{ props.row.fullName }}</div>
<div class="text-weight-light">{{ props.row.idCard }}</div> <div class="text-weight-light">{{ props.row.idCard }}</div>
</div> </div>
</div> </div>
</template> </template>
<template v-else-if="col.name === 'number'"> <template v-else-if="col.name === 'number'">
<div class="text-weight-medium"> <div class="text-weight-medium">
{{ props.row.number !== null ? props.row.number : "-" }} {{ props.row.number !== null ? props.row.number : "-" }}
</div> </div>
</template> </template>
<template v-else-if="col.name === 'organizationName'"> <template v-else-if="col.name === 'organizationName'">
<div v-if="props.row.organizationName !== null || <div v-if="props.row.organizationName !== null ||
props.row.positionPath !== null props.row.positionPath !== null
"> ">
<div class="col-4"> <div class="col-4">
<div class="text-weight-medium"> <div class="text-weight-medium">
{{ {{
props.row.organizationName !== null props.row.organizationName !== null
? props.row.organizationName ? props.row.organizationName
: "-" : "-"
}} }}
{{ {{
props.row.organizationShortName !== null props.row.organizationShortName !== null
? `(${props.row.organizationShortName})` ? `(${props.row.organizationShortName})`
: "" : ""
}} }}
</div> </div>
<div class="text-weight-light"> <div class="text-weight-light">
{{ {{
props.row.positionPath !== null props.row.positionPath !== null
? props.row.positionPath ? props.row.positionPath
: "-" : "-"
}} }}
{{ {{
props.row.positionNumber !== null props.row.positionNumber !== null
? `(${props.row.positionNumber})` ? `(${props.row.positionNumber})`
: "" : ""
}} }}
</div> </div>
</div> </div>
</div> </div>
<div v-else> <div v-else>
<div class="col-4"> <div class="col-4">
<div class="text-weight-medium">-</div> <div class="text-weight-medium">-</div>
<div class="text-weight-light">-</div> <div class="text-weight-light">-</div>
</div> </div>
</div> </div>
</template> </template>
<template v-else-if="col.name === 'reportingDate' && col.value !== '-'"> <template v-else-if="col.name === 'reportingDate' && col.value !== '-'">
<div class="text-weight-medium"> <div class="text-weight-medium">
{{ props.row.reportingDate }} {{ props.row.reportingDate }}
</div> </div>
</template> </template>
<template v-else-if="col.name === 'bmaOfficer'"> <template v-else-if="col.name === 'bmaOfficer'">
<div class="text-weight-medium"> <div class="text-weight-medium">
{{ props.row.bmaOfficer !== null ? props.row.bmaOfficer : "-" }} {{ props.row.bmaOfficer !== null ? props.row.bmaOfficer : "-" }}
</div> </div>
</template> </template>
<template v-else-if="col.name === 'statusName'"> <template v-else-if="col.name === 'statusName'">
<div class="text-weight-medium"> <div class="text-weight-medium">
{{ props.row.statusName }} {{ props.row.statusName }}
</div> </div>
</template> </template>
</q-td> </q-td>
<q-td auto-width> <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-menu transition-show="jump-down" transition-hide="jump-up">
<q-list dense style="min-width: 100px"> <q-list dense style="min-width: 100px">
<q-item v-if="roleAdmin && props.row.statusId === 'un-contain'" clickable v-close-popup <q-item v-if="roleAdmin && props.row.statusId === 'un-contain'" clickable v-close-popup
@click="openAppointModal(props.row.personalId)"> @click="openAppointModal(props.row.personalId)">
<q-item-section style="min-width: 0px" avatar class="q-py-sm"> <q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-icon color="primary" size="xs" name="mdi-bookmark-outline" /> <q-icon color="primary" size="xs" name="mdi-bookmark-outline" />
</q-item-section> </q-item-section>
<q-item-section>เลือกหน่วยงานที่รับบรรจุ</q-item-section> <q-item-section>เลือกหน่วยงานที่รับบรรจุ</q-item-section>
</q-item> </q-item>
<q-separator /> <q-separator />
<q-item v-if="roleAdmin && props.row.statusId === 'un-contain'" clickable v-close-popup <q-item v-if="roleAdmin && props.row.statusId === 'un-contain'" clickable v-close-popup
@click="editDetail(props.row, 'deferment')"> @click="editDetail(props.row, 'deferment')">
<q-item-section style="min-width: 0px" avatar class="q-py-sm"> <q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-icon color="blue" size="xs" name="mdi-account-alert-outline" /> <q-icon color="blue" size="xs" name="mdi-account-alert-outline" />
</q-item-section> </q-item-section>
<q-item-section>ขอผ่อนผัน</q-item-section> <q-item-section>ขอผ่อนผัน</q-item-section>
</q-item> </q-item>
<q-item v-else-if="props.row.deferment === true && props.row.statusId != 'DISCLAIM'" clickable v-close-popup <q-item v-else-if="props.row.deferment === true && props.row.statusId != 'DISCLAIM'" clickable v-close-popup
@click="editDetail(props.row, 'defermentInfo')"> @click="editDetail(props.row, 'defermentInfo')">
<q-item-section style="min-width: 0px" avatar class="q-py-sm"> <q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-icon color="blue" size="xs" name="mdi-account-details-outline" /> <q-icon color="blue" size="xs" name="mdi-account-details-outline" />
</q-item-section> </q-item-section>
<q-item-section>ข้อมูลการผ่อนผัน</q-item-section> <q-item-section>ข้อมูลการผ่อนผัน</q-item-section>
</q-item> </q-item>
<q-separator /> <q-separator />
<q-item v-if="props.row.statusId === 'un-contain' || <q-item v-if="props.row.statusId === 'un-contain' ||
props.row.statusId === 'PREPARE-CONTAIN' props.row.statusId === 'PREPARE-CONTAIN'
" clickable v-close-popup " clickable v-close-popup
@click="editDetail(props.row, 'disclaim')"> @click="editDetail(props.row, 'disclaim')">
<q-item-section style="min-width: 0px" avatar class="q-py-sm"> <q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-icon color="pink" size="xs" name="mdi-account-cancel-outline" /> <q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
</q-item-section> </q-item-section>
<q-item-section>สละสิทธิ์</q-item-section> <q-item-section>สละสิทธิ์</q-item-section>
</q-item> </q-item>
<q-item v-else-if="props.row.statusId === 'DISCLAIM'" clickable v-close-popup <q-item v-else-if="props.row.statusId === 'DISCLAIM'" clickable v-close-popup
@click="editDetail(props.row, 'disclaimInfo')"> @click="editDetail(props.row, 'disclaimInfo')">
<q-item-section style="min-width: 0px" avatar class="q-py-sm"> <q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-icon color="pink" size="xs" name="mdi-account-cancel-outline" /> <q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
</q-item-section> </q-item-section>
<q-item-section>ข้อมูลการสละสิทธิ์</q-item-section> <q-item-section>ข้อมูลการสละสิทธิ์</q-item-section>
</q-item> </q-item>
</q-list> </q-list>
</q-menu> </q-menu>
</q-btn> </q-btn>
</q-td> </q-td>
</q-tr> </q-tr>
</template> </template>
</Table> </Table>
</q-form> </q-form>
<!-- เลือกหน่วยงานที่บรรจุ --> <!-- เลือกหน่วยงานที่บรรจุ -->
<DialogOrgTree v-model:modal="appointModal" :personalId="personalId" :close="clickCloseModalTree" /> <DialogOrgTree v-model:modal="appointModal" :personalId="personalId" :close="clickCloseModalTree" />
<!-- popup ขอผ่อนผัน / สละสิทธิ์ --> <!-- popup ขอผ่อนผัน / สละสิทธิ์ -->
<q-form ref="myForm"> <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-form>
<q-dialog v-model="modalDefermentDisclaim" persistent> <q-dialog v-model="modalDefermentDisclaim" persistent>
<q-card style="width: 800px"> <q-card style="width: 800px">
<q-form ref="myForm"> <q-form ref="myForm">
<DialogHeader :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`" :close="clickClose" /> <DialogHeader :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`" :close="clickClose" />
<q-separator /> <q-separator />
<q-card-section class="q-p-sm"> <q-card-section class="q-p-sm">
<div class="col-xs-12 col-sm-12 col-md-12"> <div class="col-xs-12 col-sm-12 col-md-12">
<q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules
:rules="[(val) => !!val || 'กรุณากรอกเหตุผล']" :readonly="!edit" :borderless="!edit" v-model="userNote" :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']" :readonly="!edit" :borderless="!edit" v-model="userNote"
:label="`${'กรอกเหตุผล'}`" @update:model-value="clickEditRow" type="textarea" /> :label="`${'กรอกเหตุผล'}`" @update:model-value="clickEditRow" type="textarea" />
<q-file v-if="getNumFile === 1" v-model="files" dense :label="`${'เลือกไฟล์เอกสารหลักฐาน'}`" outlined <q-file v-if="getNumFile === 1" v-model="files" dense :label="`${'เลือกไฟล์เอกสารหลักฐาน'}`" outlined
use-chips :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']" multiple use-chips :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']" multiple
@update:model-value="clickEditRow" class="q-py-sm"> @update:model-value="clickEditRow" class="q-py-sm">
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="attach_file" color="primary" /> <q-icon name="attach_file" color="primary" />
</template> </template>
</q-file> </q-file>
</div> </div>
</q-card-section> </q-card-section>
<q-separator /> <q-separator />
<DialogFooter :editvisible="true" :validate="validateData" :save="modalDisclaim ? saveDisclaim : savePostpone" /> <DialogFooter :editvisible="true" :validate="validateData" :save="modalDisclaim ? saveDisclaim : saveDeferment" />
</q-form> </q-form>
</q-card> </q-card>
</q-dialog> </q-dialog>

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

@ -46,15 +46,10 @@ import { ref, useAttrs } from "vue";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
const $q = useQuasar(); const $q = useQuasar();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { dialogMessage } = mixin;
const editvisible = ref<boolean>(false);
const attrs = ref<any>(useAttrs()); const attrs = ref<any>(useAttrs());
const paging = ref<boolean>(true); const paging = ref<boolean>(true);
const table = ref<any>(null); const table = ref<any>(null);
const filterRef = ref<any>(null); const filterRef = ref<any>(null);
const modalPublish = ref<boolean>(false);
const modalDelete = ref<boolean>(false);
const props = defineProps({ const props = defineProps({
inputfilter: String, inputfilter: String,
inputvisible: Array, inputvisible: Array,
@ -143,8 +138,8 @@ const props = defineProps({
roleAdmin: Boolean roleAdmin: Boolean
}); });
const pagination = ref({ const pagination = ref({
sortBy: "desc", sortBy: "number",
descending: false, descending: true,
page: 1, page: 1,
rowsPerPage: 10, rowsPerPage: 10,
}); });