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

Mock up รายรับโอน

Browse source
This commit is contained in:
Thanit Konmek 2023-07-28 08:34:52 +07:00
parent b733f8a560
commit e64b68c017
5 changed files with 1469 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

69
src/modules/05_placement/components/Receive/DialogFooter.vue Normal file
View file

@ -0,0 +1,69 @@
<script setup lang="ts">
const props = defineProps({
editvisible: Boolean,
modalEdit: Boolean,
cancel: {
type: Function,
default: () => console.log("not function"),
},
edit: {
type: Function,
default: () => console.log("not function"),
},
save: {
type: Function,
default: () => console.log("not function"),
},
validate: {
type: Function,
default: () => console.log("not function"),
},
});
const emit = defineEmits([
"update:editvisible",
"update:next",
"update:previous",
]);
const updateEdit = (value: Boolean) => {
emit("update:editvisible", value);
};
// const cancel = async () => {
// props.cancel();
// };
const edit = async () => {
updateEdit(!props.editvisible);
props.edit();
};
const checkSave = () => {
props.validate();
props.save();
};
</script>
<template>
<q-card-actions class="text-primary">
<q-space />
<q-btn
v-if="!editvisible"
outline
:disabled="editvisible"
:color="editvisible ? 'grey-7' : 'primary'"
@click="edit"
><!-- icon="mdi-pencil-outline"
<q-tooltip>แก้ไขข้อมูล</q-tooltip> -->
</q-btn>
<div v-else>
<q-btn
unelevated
label="บันทึก"
:disabled="!editvisible"
:color="!editvisible ? 'grey-7' : 'public'"
@click="checkSave"
>
</q-btn><!-- icon="mdi-content-save-outline">
<q-tooltip>บันทึก</q-tooltip> -->
</div>
</q-card-actions>
</template>

29
src/modules/05_placement/components/Receive/DialogHeader.vue Normal file
View file

@ -0,0 +1,29 @@
<script setup lang="ts">
const props = defineProps({
title: String,
close: {
type: Function,
default: () => console.log("not function"),
},
});
const close = async () => {
props.close();
};
</script>
<template>
<q-toolbar class="q-py-md">
<q-toolbar-title class="header-text">{{ title }}</q-toolbar-title>
<q-btn icon="close" unelevated round dense @click="close" style="color: #ff8080; background-color: #ffdede" />
</q-toolbar>
</template>
<style scoped lang="scss">
.header-text {
font-size: 18px;
font-weight: 600;
line-height: 26px;
color: #35373C;
}
</style>

563
src/modules/05_placement/components/Receive/receiveMain.vue Normal file
View file

@ -0,0 +1,563 @@
<script setup lang="ts">
import { ref, computed } from "vue";
import type { QTableProps } from "quasar";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import DialogFooter from "@/modules/05_placement/components/Receive/DialogFooter.vue";
import DialogHeader from "@/modules/05_placement/components/Receive/DialogHeader.vue";
import DialogOrgTree from "@/modules/05_placement/components/Receive/receiveModal.vue";
const selected = ref([]);
const checkSelected = computed(() => {
if (selected.value.length === 0) {
return true;
}
});
const clickClose = () => {
modal.value = false;
};
const $q = useQuasar();
const modal = ref<boolean>(false);
const popup = () => {
modal.value = true;
};
const router = useRouter();
const modalTree = ref<boolean>(false);
const personal = ref<any[]>([]);
const personalId = ref<string>("");
const visibleColumns = ref<string[]>([
"no",
"fullname",
"position",
"positionLevel",
"oc",
"agency",
"status",
]);
const visibleColumns2 = ref<string[]>([
"no",
"fullname",
"position",
"positionLevel",
"oc",
"agency",
"status",
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
const filterKeyword = ref<string>("");
const filterKeyword2 = ref<string>("");
const filterRef = ref<any>(null);
const resetFilter = () => {
filterKeyword.value = "";
filterKeyword2.value = "";
filterRef.value.focus();
};
// const nextPage = (id:string) => {
// router.push("/retirement/resign/"+id);
// };
const rows = ref<any>([
{
personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
fullname: "นางสาวอย พชช",
position: "นักบริหาร",
positionLevel: "ต้น",
oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
agency: "กลุ่มงานกุมารเวชกรรม",
status: "รออนุมัติ",
},
{
personalId: "08db721d-adf2-4842-8056-1abb1539356e",
fullname: "นางสาววญ สพ",
position: "นักจัดการงานทั่วไป",
positionLevel: "ปฏิบัติการ",
oc: "กลุ่มงานช่วยนักบริหาร",
agency: "กลุ่มงานข้อมูลเมือง",
status: "รออนุมัติ",
},
{
personalId: "08db721d-ae3d-4b8c-8cf0-b86b5a2ed8bb",
fullname: "นางสาววญ สพ",
position: "นักจัดการงานทั่วไป",
positionLevel: "ปฏิบัติการ",
oc: "กลุ่มงานช่วยนักบริหาร",
agency: "กลุ่มงานข้อมูลเมือง",
status: "รออนุมัติ",
},
{
personalId: "08db721d-afde-4ed4-8bc6-f0ad83e61c4d",
fullname: "นางสาววญ สพ",
position: "นักจัดการงานทั่วไป",
positionLevel: "ปฏิบัติการ",
oc: "กลุ่มงานช่วยนักบริหาร",
agency: "กลุ่มงานข้อมูลเมือง",
status: "รออนุมัติ",
},
{
personalId: "08db721d-b24e-45d7-8a65-3f28ef4948a4",
fullname: "นางสาววญ สพ",
position: "นักจัดการงานทั่วไป",
positionLevel: "ปฏิบัติการ",
oc: "กลุ่มงานช่วยนักบริหาร",
agency: "กลุ่มงานข้อมูลเมือง",
status: "รออนุมัติ",
},
]);
const rows2 = ref<any>([
{
personalId: "0a846508-4932-40de-9a9e-5b519492217c",
fullname: "นางสาวอย พชช",
position: "นักบริหาร",
positionLevel: "ต้น",
oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
agency: "กลุ่มงานกุมารเวชกรรม",
status: "รออนุมัติ",
},
{
personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
fullname: "นางสาววญ สพ",
position: "นักจัดการงานทั่วไป",
positionLevel: "ปฏิบัติการ",
oc: "กลุ่มงานช่วยนักบริหาร",
agency: "กลุ่มงานข้อมูลเมือง",
status: "รออนุมัติ",
},
{
personalId: "08db721d-adf2-4842-8056-1abb1539356e",
fullname: "นางสาววญ สพ",
position: "นักจัดการงานทั่วไป",
positionLevel: "ปฏิบัติการ",
oc: "กลุ่มงานช่วยนักบริหาร",
agency: "กลุ่มงานข้อมูลเมือง",
status: "รออนุมัติ",
},
{
personalId: "08db721d-adff-47b0-8762-41cd5c991001",
fullname: "นางสาววญ สพ",
position: "นักจัดการงานทั่วไป",
positionLevel: "ปฏิบัติการ",
oc: "กลุ่มงานช่วยนักบริหาร",
agency: "กลุ่มงานข้อมูลเมือง",
status: "รออนุมัติ",
},
{
personalId: "08db721d-ae22-424d-8f4a-87ba30cc3ee7",
fullname: "นางสาววญ สพ",
position: "นักจัดการงานทั่วไป",
positionLevel: "ปฏิบัติการ",
oc: "กลุ่มงานช่วยนักบริหาร",
agency: "กลุ่มงานข้อมูลเมือง",
status: "รออนุมัติ",
},
]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fullname",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "fullname",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "position",
align: "left",
label: "ตำแหน่งในสายงาน",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionLevel",
align: "left",
label: "ระดับ",
sortable: true,
field: "positionLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "oc",
align: "left",
label: "สังกัด",
sortable: true,
field: "oc",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "agency",
align: "left",
label: "หน่วยงานที่รับโอน",
sortable: true,
field: "agency",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "status",
align: "left",
label: "สถานะ",
sortable: true,
field: "status",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const columns2 = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fullname",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "fullname",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "position",
align: "left",
label: "ตำแหน่งในสายงาน",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionLevel",
align: "left",
label: "ระดับ",
sortable: true,
field: "positionLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "oc",
align: "left",
label: "สังกัด",
sortable: true,
field: "oc",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "agency",
align: "left",
label: "หน่วยงานที่ขอโอนไป",
sortable: true,
field: "agency",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "status",
align: "left",
label: "สถานะ",
sortable: true,
field: "status",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const openModalTree = (pid: string) => {
modalTree.value = true;
personalId.value = pid;
personal.value = [];
};
const closeModalTree = async () => {
// await getTable();
modalTree.value = false;
};
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">รายการรับโอน</div>
<q-card flat bordered class="col-12 q-mt-sm">
<q-separator />
<div class="row q-pa-md">
<div class="col-12">
<div class="row col-12">
<q-btn
@click="popup()"
size="14px"
flat
round
color="add"
icon="mdi-account-arrow-right"
>
<q-tooltip>ส่งไปออกคำสั่งรับโอน</q-tooltip>
</q-btn>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
/>
</div>
<div class="col-12 q-pt-sm">
<d-table
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="fullname"
:visible-columns="visibleColumns"
>
<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-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
<q-td key="fullname" :props="props">
{{ props.row.fullname }}
</q-td>
<q-td key="position" :props="props">
{{ props.row.position }}
</q-td>
<q-td key="positionLevel" :props="props">
{{ props.row.positionLevel }}
</q-td>
<q-td key="oc" :props="props">
{{ props.row.oc }}
</q-td>
<q-td key="agency" :props="props">
{{ props.row.agency }}
</q-td>
<q-td key="status" :props="props">
{{ props.row.status }}
</q-td>
<q-td auto-width>
<q-btn
icon="mdi-dots-vertical"
size="12px"
color="grey-7"
flat
round
dense
>
<q-menu
transition-show="jump-down"
transition-hide="jump-up"
>
<q-list dense style="min-width: 100px">
<q-item
clickable
v-close-popup
@click="openModalTree(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-list>
</q-menu>
</q-btn>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</div>
</div>
</q-card>
<q-dialog v-model="modal">
<q-card style="width: 1200px; max-width: 80vw">
<DialogHeader title="ส่งไปออกคำสั่งรับโอน" :close="clickClose" />
<q-separator />
<q-card-section class="q-pt-none">
<div class="row justify-end">
<div class="col-5">
<q-toolbar style="padding: 0">
<q-input
borderless
outlined
dense
debounce="300"
v-model="filterKeyword2"
placeholder="ค้นหา"
style="width: 850px; max-width: auto"
>
<template v-slot:append>
<q-icon v-if="filterKeyword2 == ''" name="search" />
<q-icon
v-if="filterKeyword2 !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns2"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns2"
option-value="name"
options-cover
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</q-toolbar>
</div>
</div>
<d-table
:columns="columns2"
:rows="rows2"
:filter="filterKeyword2"
row-key="personalId"
flat
:visible-columns="visibleColumns2"
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" class="cursor-pointer">
<q-td>
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-td>
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
<q-td key="fullname" :props="props">
{{ props.row.fullname }}
</q-td>
<q-td key="position" :props="props">
{{ props.row.position }}
</q-td>
<q-td key="positionLevel" :props="props">
{{ props.row.positionLevel }}
</q-td>
<q-td key="oc" :props="props">
{{ props.row.oc }}
</q-td>
<q-td key="agency" :props="props">
{{ props.row.agency }}
</q-td>
<q-td key="status" :props="props">
{{ props.row.status }}
</q-td>
</q-tr>
</template>
</d-table>
</q-card-section>
<q-card-actions align="right" class="bg-white text-teal">
<q-btn
label="บันทึก"
@click=""
:disable="checkSelected"
color="public"
/>
</q-card-actions>
</q-card>
</q-dialog>
<DialogOrgTree
v-model:modal="modalTree"
:personalId="personalId"
:close="closeModalTree"
:personal="personal"
/>
</template>
<style scoped lang="scss"></style>

794
src/modules/05_placement/components/Receive/receiveModal.vue Normal file
View file

@ -0,0 +1,794 @@
<script setup lang="ts">
import { useQuasar, QForm } from "quasar";
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";
import http from "@/plugins/http";
import config from "@/app.config";
const $q = useQuasar();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { date2Thai, hideLoader, messageError, showLoader, success } = mixin; //ฟังก์ชันกลางที่เรียกใช้
const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
const noData = ref<string>("ไม่พบข้อมูลผังโครงสร้าง");
const checkValidate = ref<boolean>(false);
const myFormPosition = ref<any>();
const selected = ref<string>("");
const selectedFile = ref<string>("");
const dataRespone = ref<any>();
// Set form field
let dataForm = reactive({
personalId: "",
containDate: new Date(),
posNoId: "",
positionId: "",
positionLevelId: "",
positionLineId: "",
positionPathSideId: "",
positionTypeId: "",
// salaryAmount: null,
// mouthSalaryAmount: null,
// positionSalaryAmount: null,
});
onMounted(async () => {
await fetchPublishFile();
await loadTreeData();
await fetchplacementPosition();
});
const fetchPublishFile = async () => {
await http
.get(config.API.getPublishFileHistory)
.then((res) => {
let data = res.data.result;
selectedFile.value = data[0].fileName;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
};
// โหลดข้อมูลโครงสร้างจาก json
const treeData = ref<Array<any>>([]);
const loadTreeData = async () => {
expanded.value = [];
await http
.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);
treeData.value = filteredData;
})
.catch((e: any) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
function filterByPersonIdNull(obj: any) {
// console.log(obj);
if (obj.name === null && obj.isCondition != true) {
return true;
}
if (obj.children && obj.children.length > 0) {
obj.children = obj.children.filter(filterByPersonIdNull);
return obj.children.length > 0;
}
return false;
}
// โหลด position
const placementPosition = ref<any>([]);
const fetchplacementPosition = async () => {
await http
.get(config.API.placementPosition())
.then((res: any) => {
placementPosition.value = res.data.result;
})
.catch((e: any) => {
messageError($q, e);
});
};
const search = ref<string>("");
//reset Tree Filter
const filterRef = ref<any>(null);
// const resetFilter = () => {
// search.value = "";
// filterRef.value.focus();
// };
const props = defineProps({
personalId: String,
modal: Boolean,
close: {
type: Function,
default: () => console.log("close modal"),
},
personal: Object,
});
const myFilterMethod = (node: any, filter: string) => {
const filt = filter;
return (
// ((node.name && node.name == null) || !node.name) &&
(node.name && node.name.indexOf(filt) > -1) ||
(node.organizationName && node.organizationName.indexOf(filt) > -1) ||
(node.positionNum && node.positionNum.indexOf(filt) > -1) ||
(node.positionName && node.positionName.indexOf(filt) > -1) ||
(node.governmentCode &&
node.governmentCode.toString().indexOf(filt) > -1) ||
(node.agency && node.agency.indexOf(filt) > -1) ||
(node.government && node.government.indexOf(filt) > -1) ||
(node.department && node.department.indexOf(filt) > -1) ||
(node.pile && node.pile.indexOf(filt) > -1) ||
(node.organizationShortName &&
node.organizationShortName.indexOf(filt) > -1) ||
(node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
(node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
(node.executivePositionSide &&
node.executivePositionSide.indexOf(filt) > -1) ||
(node.positionLevel && node.positionLevel.indexOf(filt) > -1)
);
};
const validateData = async () => {
checkValidate.value = true;
await myFormPosition.value.validate().then((result: boolean) => {
if (result == false) {
checkValidate.value = false;
}
});
};
const saveAppoint = async () => {
console.log("save", dataForm);
myFormPosition.value.validate().then(async (result: boolean) => {
if (result) {
const dataAppoint = await {
personalId: props.personalId,
containDate: dataForm.containDate,
posNoId: dataForm.posNoId,
positionId: dataForm.positionId,
positionLevelId: dataForm.positionLevelId,
positionLineId: dataForm.positionLineId,
positionPathSideId: dataForm.positionPathSideId,
positionTypeId: dataForm.positionTypeId,
// salaryAmount: dataForm.salaryAmount,
// mouthSalaryAmount: dataForm.mouthSalaryAmount,
// positionSalaryAmount: dataForm.positionSalaryAmount,
};
console.log("save appoint===>", dataAppoint);
showLoader();
await http
.post(config.API.placementPass(), dataAppoint)
.then((res) => {
console.log("respone=>", res);
success($q, "บันทึกสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await closeAndClear();
// await resetFilter();
await fetchPublishFile();
await loadTreeData();
await fetchplacementPosition();
hideLoader();
});
}
});
};
const editDataStatus = ref<boolean>(false);
const clickEditRow = () => {
editDataStatus.value = true;
};
const closeModal = () => {
if (editDataStatus.value == true) {
$q.dialog({
title: `ข้อมูลมีการแก้ไข`,
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
}).onOk(() => {
editDataStatus.value = false;
closeAndClear();
});
} else {
closeAndClear();
}
};
const closeAndClear = async () => {
await props.close();
editDataStatus.value = false;
selected.value = "";
dataForm.personalId = "";
dataForm.containDate = new Date();
dataForm.posNoId = "";
dataForm.positionId = "";
dataForm.positionLevelId = "";
dataForm.positionLineId = "";
dataForm.positionPathSideId = "";
dataForm.positionTypeId = "";
// dataForm.salaryAmount = null;
// dataForm.mouthSalaryAmount = null;
// dataForm.positionSalaryAmount = null;
};
// ตำแหน่งเลขที่
const posNoOptions = ref<Object[]>([
{
label: "",
value: "",
},
]);
// ตำแหน่ง
const positionOptions = ref<Object[]>([
{
label: "",
value: "",
},
]);
// ด้าน/สาขา
const positionPathSideOptions = ref<Object[]>([
{
label: "",
value: "",
},
]);
// ตำแหน่งประเภท
const positionTypeOptions = ref<Object[]>([
{
label: "",
value: "",
},
]);
// สายงาน
const positionLineOptions = ref<Object[]>([
{
label: "",
value: "",
},
]);
// ระดับ
const positionLevelOptions = ref<Object[]>([
{
label: "",
value: "",
},
]);
const selectedPosition = async (data: any) => {
console.log("selecteds", data);
if (data.name == null && selected.value != data.keyId) {
// console.log("selecteds", data);
editDataStatus.value = true;
selected.value = data.keyId;
// posNo Options
posNoOptions.value = [
{
label: data.positionNum,
value: data.positionNumId,
},
];
dataForm.posNoId = data.positionNumId;
// position Options
positionOptions.value = [
{
label: data.positionName,
value: data.positionNameId,
},
];
dataForm.positionId = data.positionNameId;
// positionPathSide Options
let positionPathSideArr: any = [];
if (data.positionSideNameObj && data.positionSideNameObj != null) {
data.positionSideNameObj.map((x: any) => {
positionPathSideArr.push({
label: x.Name,
value: x.Id,
});
});
positionPathSideOptions.value = positionPathSideArr;
dataForm.positionPathSideId =
positionPathSideArr.length > 1 || positionPathSideArr.length == 0
? ""
: positionPathSideArr[0].value;
}
// positionType Options
positionTypeOptions.value = [
{
label: data.positionType,
value: data.positionTypeId,
},
];
dataForm.positionTypeId = data.positionTypeId;
// positionLine Options
positionLineOptions.value = [
{
label: data.positionLine,
value: data.positionLineId,
},
];
dataForm.positionLineId = data.positionLineId;
// positionLevel Options
let positionLevelsArr: any = [];
if (data.positionLevelObj != null) {
data.positionLevelObj.map((x: any) => {
positionLevelsArr.push({
label: x.Name,
value: x.Id,
});
});
positionLevelOptions.value = positionLevelsArr;
dataForm.positionLevelId =
positionLevelsArr.length > 1 || positionLevelsArr.length == 0
? ""
: positionLevelsArr[0].value;
dataForm.positionLevelId = data.positionLevelObj[0].Id;
}
} else if (selected.value == data.keyId) {
selected.value = "";
dataForm.posNoId = "";
dataForm.positionId = "";
dataForm.positionLevelId = "";
dataForm.positionLineId = "";
dataForm.positionPathSideId = "";
dataForm.positionTypeId = "";
}
console.log("dataForm", dataForm);
};
const checkPosition = (val: string) => {
const num = placementPosition.value.findIndex((e: string) => e === val);
return num;
};
const personal = ref<any>();
const expanded = ref<string[]>([]);
watch(props, () => {
expanded.value = [];
const dataPersonal = props.personal;
if (dataPersonal) {
dataPersonal.map((data: any) => {
personal.value = data;
});
console.log("personal", personal.value);
}
// console.log("draft===>", personal.value.draft);
if (personal.value && personal.value.draft === false) {
// const findData = dataRespone.value.find(findByPerson);
let findData: any = null;
dataRespone.value.map((x: any) => {
findData = findByPerson(x);
console.log(findData);
if (findData != null) {
console.log("findData===>", findData);
selectedPosition(findData);
for (let i = 3; i <= findData.keyId.length; i += 2) {
expanded.value.push(findData.keyId.slice(0, i));
}
}
});
// loadTreeData();
// selectedPosition(findData.children.children.children)
}
});
function findByPerson(element: any): any {
// console.log("searchTree element===>", element)
if (
element.positionNumId &&
element.positionLineId === personal.value.positionLineId &&
element.positionTypeId === personal.value.positionTypeId &&
element.positionNumId === personal.value.posNoId &&
(element.positionLevelObj === null ||
element.positionLevelObj[0].Id === personal.value.positionLevelId)
) {
return element;
} else if (element.children) {
var i;
var result = null;
for (i = 0; result == null && i < element.children.length; i++) {
result = findByPerson(element.children[i]);
}
return result;
}
return null;
}
</script>
<template>
<q-dialog v-model="props.modal" persistent>
<q-card style="width: 900px; max-width: 80vw">
<q-form ref="myFormPosition">
<DialogHeader title="เลือกหน่วยงานที่รับโอน" :close="closeModal" />
<q-separator />
<q-card-section class="q-pa-sm bg-grey-1">
<div class="row col-12 q-col-gutter-sm">
<div class="col-xs-12 col-sm-7 row">
<q-card flat bordered class="fit q-pa-sm">
<q-scroll-area visible style="height: 70vh">
<q-input
outlined
dense
ref="filterRef"
v-model="search"
placeholder="ค้นหา"
class="q-mb-sm"
>
<template v-slot:append>
<q-icon name="mdi-magnify" />
</template>
</q-input>
<div class="q-pa-sm q-gutter-sm">
<q-tree
no-transition
dense
:nodes="treeData"
node-key="keyId"
:filter="search"
:no-results-label="notFound"
:no-nodes-label="noData"
:filter-method="myFilterMethod"
v-model:expanded="expanded"
>
<template v-slot:header-organization="prop">
<div class="col">
<div
class="row items-center q-px-xs q-pt-xs q-gutter-sm"
>
<!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
<div class="text-weight-medium">
{{ prop.node.organizationName }}
</div>
<!--แสดง Total Count PositionNum-->
<!-- <q-badge rounded color="grey-2" text-color="dark"
:label="prop.node.totalPositionCount" /> -->
<q-badge
v-if="prop.node.totalPositionVacant > 0"
rounded
color="red"
outline
:label="prop.node.totalPositionVacant"
/>
<q-space />
</div>
<div class="col items-center q-px-xs q-pt-xs">
<div class="text-weight-medium text-grey-7">
{{ prop.node.governmentCode }}
{{ prop.node.organizationShortName }}
</div>
</div>
</div>
</template>
<template v-slot:header-person="prop">
<q-item
clickable
:active="selected == prop.node.keyId"
@click="selectedPosition(prop.node)"
:disable="
prop.node.name != null ||
checkPosition(prop.node.positionNumId) != -1
"
active-class="my-list-link text-primary text-weight-medium"
class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
>
<img
v-if="
prop.node.avatar == '' ||
prop.node.avatar ==
'https://cdn.quasar.dev/img/boy-avatar.png'
"
src="@/assets/avatar_user.jpg"
class="col-xs-1 col-sm-2"
style="
width: 28px;
height: 28px;
border-radius: 50%;
"
/>
<img
v-else
:src="prop.node.avatar"
class="col-xs-1 col-sm-2"
style="
width: 28px;
height: 28px;
border-radius: 50%;
"
/>
<!--=====ตำแหน่งว่าง สีแดง=====-->
<div
v-if="prop.node.name == null"
class="q-px-sm text-weight-medium text-red"
>
ว่าง
</div>
<!--=====หัวหน้า สีเขียว=====-->
<div v-else-if="prop.node.positionLeaderFlag">
<div
class="q-px-sm text-weight-medium text-primary"
>
{{ prop.node.name }}
</div>
</div>
<!--=====ลูกน้อง สีปกติ=====-->
<div v-else>
<div class="q-px-sm text-weight-medium">
{{ prop.node.name }}
</div>
</div>
<!--ต่อท้ายชื่อคน แสดงสีปกติ-->
<div class="q-pr-sm">
{{ prop.node.positionName }}
</div>
<div class="q-pr-sm">
{{ prop.node.positionNum }}
</div>
<div class="q-pr-sm">
{{ prop.node.positionLevel }}
</div>
<q-icon
v-if="prop.node.positionLeaderFlag"
class="q-mr-sm"
size="15px"
color="primary"
name="mdi-bookmark"
></q-icon>
<q-space />
</q-item>
</template>
</q-tree>
</div>
</q-scroll-area>
</q-card>
</div>
<div class="col-xs-12 col-sm-5">
<q-card flat bordered class="fit q-pa-sm">
<q-scroll-area visible style="height: 70vh">
<div class="row col-12 q-col-gutter-xs">
<div class="col-xs-12 col-sm-12 col-md-12"></div>
<div class="col-xs-12 col-sm-12 col-md-12">
<datepicker
menu-class-name="modalfix"
v-model="dataForm.containDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
class="full-width inputgreen cursor-pointer"
outlined
dense
lazy-rules
:model-value="
date2Thai(new Date(dataForm.containDate))
"
:rules="[ (val: string) =>!!val ||`${'วันที่รายงานตัว'}`,
]"
:label="`${'วันที่รายงานตัว'}`"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<q-space />
<div class="col-xs-12 col-sm-12 col-md-12">
<q-select
class="full-width inputgreen cursor-pointer custom-input"
outlined
standout
dense
hide-bottom-space
lazy-rules
:options="posNoOptions"
v-model="dataForm.posNoId"
:label="`${'ตำแหน่งเลขที่'}`"
map-options
/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-select
outlined
class="full-width inputgreen cursor-pointer custom-input"
standout
dense
hide-bottom-space
lazy-rules
:options="positionOptions"
v-model="dataForm.positionId"
:label="`${'ตำแหน่ง'}`"
map-options
/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-select
outlined
class="full-width inputgreen cursor-pointer custom-input"
standout
dense
hide-bottom-space
lazy-rules
:options="positionPathSideOptions"
v-model="dataForm.positionPathSideId"
:label="`${'ด้าน/สาขา'}`"
map-options
/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-select
outlined
class="full-width inputgreen cursor-pointer custom-input"
standout
dense
hide-bottom-space
lazy-rules
:options="positionTypeOptions"
v-model="dataForm.positionTypeId"
:label="`${'ประเภทตำแหน่ง'}`"
map-options
/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-select
outlined
class="full-width inputgreen cursor-pointer custom-input"
standout
dense
hide-bottom-space
lazy-rules
:options="positionLineOptions"
v-model="dataForm.positionLineId"
:label="`${'สายงาน'}`"
map-options
/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-select
outlined
class="full-width inputgreen cursor-pointer custom-input"
standout
dense
lazy-rules
:options="positionLevelOptions"
v-model="dataForm.positionLevelId"
:label="`${'ระดับ'}`"
hide-bottom-space
:rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]"
emit-value
map-options
/>
</div>
<!-- <div class="col-sx-12 col-sm-12 col-md-12">
<q-separator inset size="2px" class="q-my-md" />
</div> -->
<!-- <div class="col-xs-6 col-sm-6 col-md-6">
<q-input
outlined
dense
lazy-rules
v-model="dataForm.salaryAmount"
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
:label="`${'เงินเดือน'}`"
@update:modelValue="clickEditRow"
type="number"
hide-bottom-space
/>
</div> -->
<!-- <div class="col-xs-6 col-sm-6 col-md-6">
<q-input
outlined
dense
lazy-rules
v-model="dataForm.positionSalaryAmount"
:rules="[
(val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
]"
:label="`${'เงินประจำตำแหน่ง'}`"
@update:modelValue="clickEditRow"
type="number"
hide-bottom-space
/>
</div> -->
<!-- <div class="col-xs-6 col-sm-6 col-md-6">
<q-input
outlined
dense
lazy-rules
v-model="dataForm.mouthSalaryAmount"
:rules="[
(val) =>
!!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
]"
:label="`${'เงินค่าตอบแทนรายเดือน'}`"
@update:modelValue="clickEditRow"
type="number"
hide-bottom-space
/>
</div> -->
</div>
</q-scroll-area>
</q-card>
</div>
</div>
</q-card-section>
<q-separator />
<DialogFooter
:editvisible="true"
:validate="validateData"
:save="saveAppoint"
v-model:modalEdit="editDataStatus"
/>
</q-form>
</q-card>
</q-dialog>
</template>
<style scoped lang="scss">
.q-tree__node-header {
padding: 0px;
margin-top: 0px;
border-radius: 4px;
outline: 0;
}
.my-list-link {
color: rgb(118, 168, 222);
border-radius: 5px;
background: #a3d3fb48 !important;
font-weight: 600;
border: 1px solid rgba(175, 185, 196, 0.217);
/* box-shadow: 1px 1px 7px 1px rgba(41, 95, 255, 0.15) !important; */
}
</style>

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

@ -46,6 +46,10 @@ const RepatriationOrder = () =>
const RepatriationOrderAdd = () =>
import("@/modules/05_placement/components/RepatriationOrder/AddOrder.vue");
//รับโอน
const receiveMain = () =>
import("@/modules/05_placement/components/Receive/receiveMain.vue");
export default [
{
path: "/placement",
@ -207,4 +211,14 @@ export default [
Role: "placement",
},
},
{
path: "/receive",
name: "receive",
component: receiveMain,
meta: {
Auth: true,
Key: [6.3],
Role: "placement",
},
},
];