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

เลือกรายชื่อตามหน่วยงาน

Browse source
This commit is contained in:
STW_TTTY\stwtt 2024-05-21 15:29:31 +07:00
parent 6a763e819b
commit 89008fe62c
5 changed files with 728 additions and 273 deletions
Download patch file Download diff file Expand all files Collapse all files

348
src/modules/06_retirement/components/resign/DetailByidDeceased.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ref, onMounted, reactive } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
@ -11,10 +11,15 @@ import type { QTableProps } from "quasar";
import type {
requestSendNoti,
DataCopyOrder,
FormActive,
ResponseOrganiz,
OrgTree,
TreeMain,
} from "@/modules/06_retirement/interface/response/Deceased";
import { useRouter, useRoute } from "vue-router";
import DialogOrgSelectOneStep from "@/components/Dialogs/DialogOrgSelectOneStep.vue";
/** Use */
const router = useRouter();
const route = useRoute();
@ -40,6 +45,7 @@ const props = defineProps({
default: () => console.log("not function"),
},
});
const itemTaps = ref<string[]>();
const profileId = ref<string>(route.params.id.toString());
const next = () => props.next();
@ -47,59 +53,25 @@ const next = () => props.next();
const myForm = ref<QForm | null>(null);
const filterRef = ref<QInput>();
const filter = ref<string>("");
const modal = ref<boolean>(false);
const search = ref<string>("");
const expanded = ref<string[]>([]);
const selected = ref<string>("");
const nodesTree = ref<treeTab[]>([]);
const selectedModal = ref<ResponseOrganiz[]>([]);
const filterModal = ref<string>("");
const modalSelectOrg = ref<boolean>(false);
const nodes = ref<Array<OrgTree>>([]);
const selectedModal = ref<any[]>([]);
const rows = ref<DataCopyOrder[]>([]);
const editRows = ref<DataCopyOrder[]>([]);
/** คอลัมน์Modal ที่แสดง */
const visibleColumnsModal = ref<String[]>(["no", "idCard", "name", "position"]);
/** active form */
const formActive = reactive<FormActive>({
activeId: "",
activeName: "",
draftId: "",
draftName: "",
orgPublishDate: null,
isPublic: false,
});
/** คอลัมน์Modal */
const rowsModal = ref<ResponseOrganiz[]>([]);
const columnsModal = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
field: "no",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "idCard",
align: "left",
label: "เลขประจำตัวประชาชน",
field: "idCard",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "name",
align: "left",
label: "ชื่อ-นามสกุล",
field: "name",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "position",
align: "left",
label: "ตำแหน่ง",
field: "position",
sortable: true,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
/** selcet OPtion */
const optionSelect = ref<any>([
@ -172,39 +144,6 @@ onMounted(async () => {
await getData();
});
/**
* ดึงข้อมูล list จาก api
* @param id id ของข้อมูล
*/
const listModal = async (id: string) => {
showLoader();
await http
.get(config.API.copyOrderPersonsId(id))
.then((res) => {
const data = res.data.result;
let list: ResponseOrganiz[] = [];
data.map((r: ResponseOrganiz) => {
list.push({
firstName: r.firstName ?? "",
idCard: r.idCard ?? "",
lastName: r.lastName ?? "",
name: r.name ?? "",
position: r.position ?? "",
prefixId: r.prefixId ?? "",
profileId: r.profileId ?? "",
unit: r.unit ?? "",
});
});
rowsModal.value = list;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
};
/** เรียกข้อมูลจาก api */
const getData = async () => {
showLoader();
@ -255,7 +194,7 @@ const getData = async () => {
/**
*ฟังก์ชั่น Save
*/
const saveData = async () => {
async function saveData() {
showLoader();
const persons = selectedModal.value.map((item) => ({
profileId: item.profileId,
@ -263,16 +202,16 @@ const saveData = async () => {
const dataToSend = { Persons: persons };
await http
.put(config.API.detailByidDeceased(profileId.value), dataToSend)
.then((res) => {})
.then((res) => {
getData();
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
clickClose();
getData();
hideLoader();
});
};
}
const resetFilter = () => {
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
@ -291,24 +230,15 @@ const getClass = (val: boolean) => {
};
};
/** Close Modal */
const clickClose = async () => {
modal.value = false;
};
/**
* กดปุ่มเพิ่มด้านบน table
*/
const clickAdd = async () => {
await nodeTree();
selected.value = "";
rowsModal.value = [];
selectedModal.value = [];
modal.value = true;
function clickAdd() {
modalSelectOrg.value = true;
if (myForm.value !== null) {
myForm.value.reset();
}
};
}
/**
* ลบข้อมูล
@ -317,32 +247,60 @@ const clickDelete = (id: string) => {
dialogRemove($q, () => deleteData(id));
};
/**
* โหลดโครงสร้าง tree
*/
const nodeTree = async () => {
/** ดึงข้อมูล active */
async function getActive() {
showLoader();
await http
.get(config.API.profileOrganizRoot)
.then((res: any) => {
.get(config.API.activeOrganization)
.then((res) => {
const data = res.data.result;
nodesTree.value = data;
if (data.length > 0) {
expanded.value = [data[0].id];
}
formActive.activeId = data.activeId;
formActive.activeName = data.activeName;
formActive.draftId = data.draftId;
formActive.draftName = data.draftName;
formActive.orgPublishDate = data.orgPublishDate;
formActive.isPublic = data.isPublic;
getTreeData(data.activeId);
})
.catch((e) => {
messageError($q, e);
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
};
}
// เลือกหน่วยงาน
const onSelected = async (id: string) => {
await listModal(id);
};
/** ดึงข้อมูล หน่วยงาน */
async function getTreeData(id: string) {
showLoader();
await http
.get(config.API.orgByid(id))
.then((res) => {
const data = res.data.result;
nodes.value = data;
filterItemsTaps(data);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
function filterItemsTaps(data: TreeMain[]) {
let orgTreeIds: string[] = [];
for (const child of data) {
orgTreeIds.push(child.orgTreeId);
if (child.children) {
orgTreeIds = orgTreeIds.concat(filterItemsTaps(child.children));
}
}
itemTaps.value = orgTreeIds;
return orgTreeIds;
}
/**ลบข้อมูล */
const deleteData = async (id: string) => {
@ -562,158 +520,10 @@ const updateData = (row: DataCopyOrder) => {
</div>
</div>
<q-dialog v-model="modal" persistent full-width>
<q-card>
<DialogHeader tittle="เลือกรายชื่อตามหน่วยงาน" :close="clickClose" />
<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-5 row">
<q-card flat bordered class="fit q-pa-sm">
<q-scroll-area visible style="height: 70vh">
<q-input
outlined
dense
v-model="search"
placeholder="ค้นหา"
class="q-mb-sm"
>
<template v-slot:append>
<q-icon name="mdi-magnify" />
</template>
</q-input>
<q-tree
:nodes="nodesTree"
dense
node-key="id"
v-model:selected="selected"
v-model:expanded="expanded"
no-selection-unset
selected-color="primary"
@update:selected="onSelected"
default-expand-all
/>
</q-scroll-area>
</q-card>
</div>
<div class="col-xs-12 col-sm-7">
<div class="col-12 row q-py-sm items-center">
<q-space />
<div class="items-center" style="display: flex">
<q-input
standout
dense
v-model="filterModal"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
style="max-width: 200px"
class="q-ml-sm"
>
<template v-slot:append>
<q-icon v-if="filterModal == ''" name="search" />
<q-icon
v-if="filterModal !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="visibleColumnsModal"
:display-value="$q.lang.table.columns"
multiple
outlined
dense
:options="columnsModal"
options-dense
option-value="name"
map-options
emit-value
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
</div>
</div>
<d-table
:rows="rowsModal"
:columns="columnsModal"
:visible-columns="visibleColumnsModal"
:filter="filterModal"
row-key="profileId"
selection="multiple"
v-model:selected="selectedModal"
>
<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
:model-value="scope.selected"
@update:model-value="
(val, evt) => {
Object.getOwnPropertyDescriptor(scope, 'selected').set(
val,
evt
);
}
"
/> -->
<q-checkbox
keep-color
color="primary"
dense
v-model="scope.selected"
/>
</template>
<template v-slot:body-cell="props">
<q-td :props="props">
<div v-if="props.col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else>
{{ props.value }}
</div>
</q-td>
</template>
</d-table>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<!-- <q-btn
flat
round
color="public"
icon="mdi-content-save-outline"
@click="clickClose"
>
<q-tooltip>บันทึก</q-tooltip>
</q-btn> -->
<q-btn
dense
unelevated
label="บันทึก"
color="public"
@click="saveData"
class="q-px-md"
/>
</q-card-actions>
</q-card>
</q-dialog>
<DialogOrgSelectOneStep
v-model:modal="modalSelectOrg"
:title="'เลือกรายชื่อตามหน่วยงาน'"
v-model:selectedModal="selectedModal"
:saveData="saveData"
/>
</template>

58
src/modules/06_retirement/interface/response/Deceased.ts
View file

@ -53,9 +53,67 @@ interface ResDetailDeceased {
isActive: boolean;
createdAt: string;
}
interface FormActive {
activeId: string;
activeName: string;
draftId: string;
draftName: string;
orgPublishDate: Date | null;
isPublic: boolean;
}
interface OrgTree {
orgTreeId: string;
orgRootId: string;
orgLevel: number;
orgTreeName: string;
orgTreeShortName: string;
orgTreeCode: string;
orgCode: string;
orgTreeRank: string;
orgTreeOrder: number | null;
orgRootCode: string;
orgTreePhoneEx: string;
orgTreePhoneIn: string;
orgTreeFax: string;
orgRevisionId: string;
children: OrgTree[];
}
interface TreeMain {
children: TreeMain[]; // ปรับเป็นชนิดข้อมูลที่ถูกต้องตามโครงสร้างของ children ถ้าเป็นไปได้
orgCode: string;
orgLevel: number;
orgName: string;
orgRevisionId: string;
orgRootName: string;
orgTreeCode: string;
orgTreeFax: string;
orgTreeId: string;
orgTreeName: string;
orgTreeOrder: number;
orgTreePhoneEx: string;
orgTreePhoneIn: string;
orgTreeRank: string;
orgTreeShortName: string;
totalPosition: number;
totalPositionCurrentUse: number;
totalPositionCurrentVacant: number;
totalPositionNextUse: number;
totalPositionNextVacant: number;
totalRootPosition: number;
totalRootPositionCurrentUse: number;
totalRootPositionCurrentVacant: number;
totalRootPositionNextUse: number;
totalRootPositionNextVacant: number;
}
export type {
requestSendNoti,
DataCopyOrder,
ResponseOrganiz,
ResDetailDeceased,
FormActive,
OrgTree,
TreeMain
};

14
src/modules/10_order/components/step/step03.vue
View file

@ -16,7 +16,7 @@ import type {
import type { RequestCopyOrder } from "@/modules/05_placement/interface/request/Order";
import { useRoute } from "vue-router";
import type { DataOption } from "@/modules/10_order/interface/index/Main";
import DialogOrgSelectOneStep from "@/components/Dialogs/DialogOrgSelectOneStep.vue";
const props = defineProps({
next: {
type: Function,
@ -245,6 +245,7 @@ const getData = async (id: string) => {
};
// เลือกรายชื่อจากหน่วยงาน
const saveData = async () => {
const id = route.params.orderid
? route.params.orderid.toString()
: localStorage.getItem("orderId")
@ -531,7 +532,7 @@ const updateData = (row: DataCopyOrder) => {
</div>
</div>
<q-dialog v-model="modal" persistent full-width>
<!-- <q-dialog v-model="modal" persistent full-width>
<q-card>
<DialogHeader tittle="เลือกรายชื่อตามหน่วยงาน" :close="clickClose" />
<q-separator />
@ -661,5 +662,12 @@ const updateData = (row: DataCopyOrder) => {
/>
</q-card-actions>
</q-card>
</q-dialog>
</q-dialog> -->
<DialogOrgSelectOneStep
v-model:modal="modal"
:title="'เลือกรายชื่อตามหน่วยงาน'"
v-model:selectedModal="selectedModal"
:saveData="saveData"
/>
</template>