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

Merge branch 'nice_dev' into develop

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-07-20 17:57:31 +07:00
commit f1d1b722d8
5 changed files with 752 additions and 200 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<script setup lang="ts">
import { useQuasar, QForm } from "quasar";
import { onMounted, reactive, ref } from "vue";
import { onMounted, reactive, ref, watch } 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";
@ -18,6 +18,7 @@ const checkValidate = ref<boolean>(false);
const myFormPosition = ref<any>();
const selected = ref<string>("");
const selectedFile = ref<string>("");
const dataRespone = ref<any>();
// Set form field
let dataForm = reactive({
@ -29,9 +30,9 @@ let dataForm = reactive({
positionLineId: "",
positionPathSideId: "",
positionTypeId: "",
salaryAmount: null,
mouthSalaryAmount: null,
positionSalaryAmount: null,
// salaryAmount: null,
// mouthSalaryAmount: null,
// positionSalaryAmount: null,
});
onMounted(async () => {
@ -61,6 +62,7 @@ const loadTreeData = async () => {
.get(`${config.s3ClusterUrl}${selectedFile.value}`)
.then((res: any) => {
treeData.value = res.data;
dataRespone.value = res.data;
// Filter objects with "name" null
const filteredData = res.data.filter(filterByPersonIdNull);
@ -75,6 +77,7 @@ const loadTreeData = async () => {
};
function filterByPersonIdNull(obj: any) {
// console.log(obj);
if (obj.name === null && obj.isCondition != true) {
return true;
}
@ -113,6 +116,7 @@ const props = defineProps({
type: Function,
default: () => console.log("close modal"),
},
personal: Object,
});
const myFilterMethod = (node: any, filter: string) => {
@ -160,9 +164,9 @@ const saveAppoint = async () => {
positionLineId: dataForm.positionLineId,
positionPathSideId: dataForm.positionPathSideId,
positionTypeId: dataForm.positionTypeId,
salaryAmount: dataForm.salaryAmount,
mouthSalaryAmount: dataForm.mouthSalaryAmount,
positionSalaryAmount: dataForm.positionSalaryAmount,
// salaryAmount: dataForm.salaryAmount,
// mouthSalaryAmount: dataForm.mouthSalaryAmount,
// positionSalaryAmount: dataForm.positionSalaryAmount,
};
// console.log("save appoint===>", dataAppoint);
@ -219,9 +223,9 @@ const closeAndClear = async () => {
dataForm.positionLineId = "";
dataForm.positionPathSideId = "";
dataForm.positionTypeId = "";
dataForm.salaryAmount = null;
dataForm.mouthSalaryAmount = null;
dataForm.positionSalaryAmount = null;
// dataForm.salaryAmount = null;
// dataForm.mouthSalaryAmount = null;
// dataForm.positionSalaryAmount = null;
};
// ตำแหน่งเลขที่
const posNoOptions = ref<Object[]>([
@ -354,11 +358,42 @@ const checkPosition = (val: string) => {
const num = placementPosition.value.findIndex((e: string) => e === val);
return num;
};
const personal = ref<any>();
watch(props, () => {
const dataPersonal = props.personal;
if (dataPersonal) {
dataPersonal.map((data: any) => {
personal.value = data;
});
console.log("personal", personal.value);
}
if (personal.value.draft === false) {
const findData = dataRespone.value.find(findByPerson);
console.log(findData);
loadTreeData();
selectedPosition(findData.children.children.children)
}
});
const findByPerson = (obj: any) => {
if (
obj.positionLineId === personal.value.positionLineId &&
obj.positionTypeId === personal.value.positionTypeId &&
obj.positionNumId === personal.value.posNoId
) {
return true;
}
if (obj.children && obj.children.length > 0) {
obj.children = obj.children.find(findByPerson);
return obj.children;
}
return false;
};
</script>
<template>
<q-dialog v-model="props.modal" persistent full-width>
<q-card>
<q-dialog v-model="props.modal" persistent>
<q-card style="width: 700px; max-width: 80vw">
<q-form ref="myFormPosition">
<DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="closeModal" />
<q-separator />
@ -510,7 +545,7 @@ const checkPosition = (val: string) => {
<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">
<div class="col-xs-12 col-sm-12 col-md-12">
<datepicker
menu-class-name="modalfix"
v-model="dataForm.containDate"
@ -532,10 +567,7 @@ const checkPosition = (val: string) => {
:model-value="
date2Thai(new Date(dataForm.containDate))
"
:rules="[
(val: string) =>
!!val ||
`${'วันที่รายงานตัว'}`,
:rules="[ (val: string) =>!!val ||`${'วันที่รายงานตัว'}`,
]"
:label="`${'วันที่รายงานตัว'}`"
hide-bottom-space
@ -553,7 +585,7 @@ const checkPosition = (val: string) => {
</datepicker>
</div>
<q-space />
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="col-xs-12 col-sm-12 col-md-12">
<q-select
class="full-width inputgreen cursor-pointer custom-input"
outlined
@ -567,7 +599,7 @@ const checkPosition = (val: string) => {
map-options
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="col-xs-12 col-sm-12 col-md-12">
<q-select
outlined
class="full-width inputgreen cursor-pointer custom-input"
@ -581,7 +613,7 @@ const checkPosition = (val: string) => {
map-options
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="col-xs-12 col-sm-12 col-md-12">
<q-select
outlined
class="full-width inputgreen cursor-pointer custom-input"
@ -596,7 +628,7 @@ const checkPosition = (val: string) => {
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="col-xs-12 col-sm-12 col-md-12">
<q-select
outlined
class="full-width inputgreen cursor-pointer custom-input"
@ -610,7 +642,7 @@ const checkPosition = (val: string) => {
map-options
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="col-xs-12 col-sm-12 col-md-12">
<q-select
outlined
class="full-width inputgreen cursor-pointer custom-input"
@ -624,7 +656,7 @@ const checkPosition = (val: string) => {
map-options
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="col-xs-12 col-sm-12 col-md-12">
<q-select
outlined
class="full-width inputgreen cursor-pointer custom-input"
@ -640,10 +672,10 @@ const checkPosition = (val: string) => {
map-options
/>
</div>
<div class="col-sx-12 col-sm-12 col-md-12">
<!-- <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">
</div> -->
<!-- <div class="col-xs-6 col-sm-6 col-md-6">
<q-input
outlined
dense
@ -655,9 +687,9 @@ const checkPosition = (val: string) => {
type="number"
hide-bottom-space
/>
</div>
</div> -->
<div class="col-xs-6 col-sm-6 col-md-6">
<!-- <div class="col-xs-6 col-sm-6 col-md-6">
<q-input
outlined
dense
@ -671,9 +703,9 @@ const checkPosition = (val: string) => {
type="number"
hide-bottom-space
/>
</div>
</div> -->
<div class="col-xs-6 col-sm-6 col-md-6">
<!-- <div class="col-xs-6 col-sm-6 col-md-6">
<q-input
outlined
dense
@ -688,7 +720,7 @@ const checkPosition = (val: string) => {
type="number"
hide-bottom-space
/>
</div>
</div> -->
</div>
</q-scroll-area>
</q-card>

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

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted, watch, reactive } from "vue";
import { ref, onMounted, watch, reactive, computed } from "vue";
import { useQuasar, QForm } from "quasar";
import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
@ -37,6 +37,7 @@ const filter = ref<string>("");
const Name = ref<string>();
const rowsAll = ref<any>([]);
const rows = ref<any>([]);
const rowsFilter = ref<any>([]);
const myForm = ref<any>();
const files = ref<any>(null);
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
@ -52,13 +53,15 @@ const personalId = ref<string>("");
const visibleColumns = ref<any[]>([
"position",
"fullName",
"number",
"examNumber",
"idCard",
"positionNumber",
"organizationName",
"reportingDate",
"bmaOfficer",
"statusName",
"draft",
"positionCandidate",
]);
const columns = ref<QTableProps["columns"]>([
@ -81,11 +84,11 @@ const columns = ref<QTableProps["columns"]>([
style: "font-size: 14px",
},
{
name: "number",
name: "examNumber",
align: "center",
label: "ลำดับที่สอบได้",
sortable: true,
field: "number",
field: "examNumber",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
@ -100,6 +103,15 @@ const columns = ref<QTableProps["columns"]>([
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionCandidate",
align: "left",
label: "ตำแหน่งที่สอบ",
sortable: true,
field: "positionCandidate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "reportingDate",
align: "left",
@ -120,6 +132,17 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "draft",
align: "left",
label: "สถานะการส่งรายชื่อ",
sortable: true,
field: "draft",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "statusName",
align: "left",
@ -160,38 +183,64 @@ const convertContainStatus = (val: string) => {
return "-";
}
};
const convertDraft = (val: boolean) => {
switch (val) {
case false:
return "รอส่งตัว";
case true:
return "ส่งตัวแล้ว";
default:
return "-";
}
};
const getTable = async () => {
showLoader();
await http
.get(config.API.personalList(examIdString))
.then(async (res: any) => {
console.log(res);
dataRes.value = res.data.result;
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: convertBmaOfficer(data.bmaOfficer),
statusId: data.statusId,
statusName: convertContainStatus(data.statusId)
,
deferment: data.deferment,
};
(rowsFilter.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)),
examNumber: data.examNumber,
bmaOfficer: convertBmaOfficer(data.bmaOfficer),
statusId: data.statusId,
statusName: convertContainStatus(data.statusId),
deferment: data.deferment,
draft: convertDraft(data.draft),
positionCandidate: data.positionCandidate,
};
rowsAll.value.push(rowData);
});
rowsAll.value.push(rowData);
});
rows.value = roleAdmin ? rowsAll.value : rowsAll.value.filter((x: any) => x.statusId != 'CONTAIN');
rows.value = roleAdmin
? rowsAll.value
: rowsAll.value.filter((x: any) => x.statusId != "CONTAIN");
rowsFilter.value = rows.value.filter((e: any) => e.draft == "รอส่งตัว");
console.log(rowsFilter.value);
})
.catch((e) => {
messageError($q, e);
@ -206,27 +255,40 @@ 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, "บันทึกสำเร็จ");
$q.dialog({
title: "ยืนยันการขอผ่อนผัน",
message: "ต้องการยืนยันการขอผ่อนผันข้อมูลนี้ใช่หรือไม่ ?",
cancel: {
flat: true,
const: "negative",
},
persistent: true,
})
.onOk(async () => {
showLoader();
console.log("ยืนยันการขอผ่อนผัน");
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();
});
})
.catch((e) => {
console.log(e);
})
.finally(async () => {
await getTable();
props.statCard();
userNote.value = "";
modalDefermentDisclaim.value = false;
hideLoader();
});
.onCancel(() => {})
.onDismiss(() => {});
}
});
};
@ -234,29 +296,40 @@ const saveDeferment = async () => {
const saveDisclaim = async () => {
myForm.value.validate().then(async (result: boolean) => {
if (result) {
showLoader();
// 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,
$q.dialog({
title: "ยืนยันการสละสิทธิ์",
message: "ต้องการยืนยันการสละสิทธิ์ข้อมูลนี้ใช่หรือไม่ ?",
cancel: {
flat: true,
const: "negative",
},
})
.onOk(async () => {
showLoader();
console.log("ยืนยันการสละสิทธิ์");
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();
});
})
.then(() => {
success($q, "บันทึกสำเร็จ");
})
.finally(async () => {
await getTable();
props.statCard();
userNote.value = "";
modalDefermentDisclaim.value = false;
hideLoader();
});
.onCancel(() => {})
.onDismiss(() => {});
}
});
};
@ -334,9 +407,14 @@ const editDetail = (
}
};
const dataRes = ref<any>([]);
const personal = ref<any>([]);
const openAppointModal = (pid: string) => {
appointModal.value = true;
personalId.value = pid;
personal.value = dataRes.value.filter(
(e: any) => e.personalId == personalId.value
);
};
const clickCloseModalTree = async () => {
@ -387,30 +465,94 @@ 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');
rows.value = rowsAll.value.filter((x: any) => x.statusId == "CONTAIN");
} else {
rows.value = rowsAll.value.filter((x: any) => x.statusId != 'CONTAIN');
rows.value = rowsAll.value.filter((x: any) => x.statusId != "CONTAIN");
}
});
const modaladdlist = ref<boolean>(false);
const selected = ref<any>([]);
const personal_selected = ref<any>([]);
const savelist = () => {
selected.value.map((e: any) => {
personal_selected.value.push(e.personalId);
});
if (personal_selected.value) {
console.log(personal_selected.value);
$q.dialog({
title: "ยืนยันการส่งตัว",
message: "ต้องการยืนยันการส่งตัวข้อมูลนี้หรือไม่ ?",
cancel: {
flat: true,
const: "negative",
},
})
.onOk(async () => {
showLoader();
await http.put(config.API.putPosition(examId), personal_selected.value);
})
.then(() => {
success($q, "บันทึกสำเร็จ");
})
.catch(() => {
console.log(e);
})
.finally(async () => {
await getTable();
hideLoader();
});
}
};
const handleModalAddListUpdate = (val: boolean) => {
modaladdlist.value = val;
(selected.value = []), (personal_selected.value = []);
};
const checkSelected = computed(() => {
if (selected.value.length === 0) {
return true;
}
});
</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">
<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"
@update-modaladdlist="handleModalAddListUpdate"
: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>
@ -418,39 +560,37 @@ watch(containStatus, () => {
</div>
</div>
</template>
<template v-else-if="col.name === 'number'">
<template v-else-if="col.name === 'examNumber'">
<div class="text-weight-medium">
{{ props.row.number !== null ? props.row.number : "-" }}
{{ props.row.examNumber !== null ? props.row.examNumber : "-" }}
</div>
</template>
<template v-else-if="col.name === 'organizationName'">
<div v-if="props.row.orgName !== null ||
props.row.positionPath !== null
">
<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.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>
@ -461,7 +601,20 @@ watch(containStatus, () => {
</div>
</div>
</template>
<template v-else-if="col.name === 'reportingDate' && col.value !== '-'">
<template v-else-if="col.name === 'positionCandidate'">
<div
class="text-weight-medium"
v-if="props.row.positionCandidate == null"
>
-
</div>
<div class="text-weight-medium" v-else>
{{ props.row.positionCandidate }}
</div>
</template>
<template
v-else-if="col.name === 'reportingDate' && col.value !== '-'"
>
<div class="text-weight-medium">
{{ props.row.reportingDate }}
</div>
@ -471,6 +624,11 @@ watch(containStatus, () => {
{{ props.row.bmaOfficer !== null ? props.row.bmaOfficer : "-" }}
</div>
</template>
<template v-else-if="col.name === 'draft'">
<div class="text-weight-medium">
{{ props.row.draft }}
</div>
</template>
<template v-else-if="col.name === 'statusName'">
<div class="text-weight-medium">
{{ props.row.statusName }}
@ -478,45 +636,120 @@ watch(containStatus, () => {
</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') ||
props.row.draft === 'รอส่งตัว'
"
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>
@ -530,25 +763,58 @@ watch(containStatus, () => {
</q-form>
<!-- เลือกหน่วยงานที่บรรจุ -->
<DialogOrgTree v-model:modal="appointModal" :personalId="personalId" :close="clickCloseModalTree" />
<DialogOrgTree
v-model:modal="appointModal"
:personalId="personalId"
:close="clickCloseModalTree"
:personal="personal"
/>
<!-- 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>
@ -556,7 +822,11 @@ watch(containStatus, () => {
</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>
@ -565,7 +835,10 @@ watch(containStatus, () => {
<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">
@ -575,8 +848,17 @@ watch(containStatus, () => {
<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>
@ -584,6 +866,180 @@ watch(containStatus, () => {
</q-form>
</q-card>
</q-dialog>
<!-- dialog เพิ่มรายชื่อ -->
<q-dialog v-model="modaladdlist">
<q-card style="width: 850px; max-width: 80vw">
<q-card-section>
<div class="text-h6">ส่งรายชื่อไปยังหน่วยงาน</div>
</q-card-section>
<q-card-section class="q-pt-none">
<q-table
flat
bordered
dense
:rows="rowsFilter"
:columns="columns"
row-key="name"
class="custom-header-table"
selection="multiple"
v-model:selected="selected"
>
<template v-slot:header-selection="scope">
<q-checkbox
keep-color
color="primary"
dense
v-model="scope.selected"
/>
</template>
<!-- <template v-slot:body-selection="scope">
<q-checkbox
keep-color
color="primary"
dense
v-model="scope.selected"
/>
</template> -->
<template v-slot:body="props">
<q-tr :props="props">
<q-td>
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
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 === 'examNumber'">
<div class="text-weight-medium">
{{
props.row.examNumber !== null ? props.row.examNumber : "-"
}}
</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 === 'positionCandidate'">
<div
class="text-weight-medium"
v-if="props.row.positionCandidate == null"
>
-
</div>
<div class="text-weight-medium" v-else>
{{ props.row.positionCandidate }}
</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 === 'draft'">
<div class="text-weight-medium">
{{ props.row.draft }}
</div>
</template>
<template v-else-if="col.name === 'statusName'">
<div class="text-weight-medium">
{{ props.row.statusName }}
</div>
</template>
</q-td>
</q-tr>
</template>
</q-table>
</q-card-section>
<q-card-actions align="right" class="bg-white text-teal">
<q-btn
flat
label="ยืนยันการส่งตัว"
@click="savelist"
:disable="checkSelected"
/>
</q-card-actions>
</q-card>
</q-dialog>
</template>
<style lang="scss" scoped>

136
src/modules/05_placement/components/PersonalList/TableView.vue
View file

@ -1,44 +1,97 @@
<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="containStatus" color="blue" label="แสดงสถานะบรรจุแล้ว" @update:model-value="updateContain" />
<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"
/>
<div>
<q-btn flat round color="primary" icon="mdi-account-arrow-right" @click="updateModaladdlist" />
</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-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" active-color="primary" color="dark" :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"
active-color="primary"
color="dark"
: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">
@ -55,6 +108,7 @@ const props = defineProps({
inputvisibleFilter: String,
editvisible: Boolean,
titleText: String,
modaladdlist: Boolean,
optionsFilter: {
type: Array,
defualt: [],
@ -134,7 +188,7 @@ const props = defineProps({
default: () => console.log("not function"),
},
containStatus: Boolean,
roleAdmin: Boolean
roleAdmin: Boolean,
});
const pagination = ref({
sortBy: "number",
@ -158,7 +212,8 @@ const emit = defineEmits([
"update:editvisible",
"update:titleText",
"update:inputvisibleFilter",
"update:containfilter"
"update:containfilter",
"update-modaladdlist",
]);
const updateInput = (value: any) => {
@ -177,6 +232,9 @@ const resetFilter = () => {
emit("update:inputfilter", "");
filterRef.value.focus();
};
const updateModaladdlist = () => {
emit("update-modaladdlist", true);
};
</script>
<style lang="scss">
.icon-color {