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 
# Conflicts:
#	src/api/02_organizational/api.organization.ts
#	src/modules/02_organizationalNew/components/tableTree.vue
#	src/modules/02_organizationalNew/store/organizational.ts
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-02-01 13:51:49 +07:00
commit ff3c5e3ef0
7 changed files with 357 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

126
src/modules/02_organizationalNew/components/listView.vue
View file

@ -1,32 +1,54 @@
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { ref, reactive, onMounted, watch } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
/** importType*/
import type { OrgTree } from "@/modules/02_organizationalNew/interface/response/organizational";
import type {
OrgTree,
PosMaster,
Position,
PosMaster2,
} from "@/modules/02_organizationalNew/interface/response/organizational";
import type { FilterMaster } from "@/modules/02_organizationalNew/interface/request/organizational";
/** importComponents*/
import TreeView from "@/modules/02_organizationalNew/components/mainTree.vue";
import TableView from "@/modules/02_organizationalNew/components/tableTree.vue";
/** importStore*/
import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
import { useCounterMixin } from "@/stores/mixin";
/** use*/
const store = useOrganizational();
const $q = useQuasar();
const { showLoader, hideLoader, messageError } = useCounterMixin();
const nodeTree = ref<OrgTree[]>();
const historyId = defineModel<string>("historyId", { required: true });
const nodeTree = ref<OrgTree[]>(); // ข้อมูล Tree
const historyId = defineModel<string>("historyId", { required: true }); // id ประวัติโครงสร้าง
const count = defineModel<number>("count", { required: true });
const nodeId = ref<string>("");
const orgLevel = ref<number>(0);
const isLoad = ref<boolean>(false);
const nodeId = ref<string>(""); // id ของ Tree
const orgLevel = ref<number>(0); // levelTree
const isLoad = ref<boolean>(false); // loadTable
const nodeData = ref<any>();
const reqMaster = reactive<FilterMaster>({
id: "",
type: 0,
isAll: false,
page: 1,
pageSize: 10,
keyword: "",
});
const totalPage = ref<number>(1);
const action1 = ref<boolean>(false);
const posMaster = ref<PosMaster2[]>([]);
// defineProps<{ dataActive: DataActive }>();
/**
* function fetch ข้อมูลของ Tree
* @param id id โครงสร้าง
*/
async function fetchDataTree(id: string) {
showLoader();
// const id =
@ -47,28 +69,69 @@ async function fetchDataTree(id: string) {
// console.log(nodeTree.value);
}
async function fetchDataTable(id: string, level: number) {
/**
* function fetch ข้อรายการตำแหน่ง
* @param id idTree
* @param level levelTree
*/
async function fetchDataTable(id: string, level: number, action: boolean) {
orgLevel.value = level;
// isLoad.value = true;
// await http
// .get(config.API.orgPosPositionById(id))
// .then((res) => {
// console.log(res);
// })
// .catch((err) => {
// messageError($q, err);
// })
// .finally(() => {
// isLoad.value = false;
// });
reqMaster.id = id;
reqMaster.type = level;
action1.value = action;
if (action) {
setTimeout(() => {
action1.value = false;
}, 1000);
reqMaster.isAll = false;
reqMaster.page = 1;
reqMaster.pageSize = 10;
reqMaster.keyword = "";
}
if (action === true) {
isLoad.value = true;
}
await http
.post(config.API.orgPosMasterList, reqMaster)
.then((res) => {
console.log(res);
posMaster.value = [];
const dataMain: PosMaster[] = [];
totalPage.value = Math.ceil(res.data.result.total / reqMaster.pageSize);
res.data.result.data.forEach((e: PosMaster) => {
const p = e.positions;
const a = p.find((el: Position) => el.positionIsSelected === true);
const { id, ...rest } = a ? a : p[0];
const test = { ...e, ...rest };
dataMain.push(test);
posMaster.value = store.fetchPosMaster(dataMain);
});
})
.catch((err) => {
messageError($q, err);
posMaster.value = [];
})
.finally(() => {
setTimeout(() => {
isLoad.value = false;
}, 1500);
});
}
/**lifecycle Hook*/
onMounted(async () => {
const id =
store.typeOrganizational === "current" ? store.activeId : store.draftId;
store.typeOrganizational === "current"
? store.activeId
: store.typeOrganizational === "draft"
? store.draftId
: historyId.value;
id && (await fetchDataTree(id));
});
/** callback function ทำงาน ทำการ fetch ข้อมูล Tree เมื่อมีการเลือกประวัติโครงสร้าง*/
watch(
() => count.value,
() => {
@ -76,6 +139,7 @@ watch(
}
);
/** callblck function ทำการ fetch ข้อมูล Tree เมื่อมีการเปลี่ยนโครงสร้าง*/
watch(
() => store.typeOrganizational,
() => {
@ -85,6 +149,14 @@ watch(
nodeId.value = "";
}
);
watch(
[() => reqMaster.page, () => reqMaster.pageSize, () => reqMaster.isAll],
() => {
action1.value === false &&
fetchDataTable(reqMaster.id, reqMaster.type, false);
}
);
</script>
<template>
<div class="col-12">
@ -122,10 +194,14 @@ watch(
v-if="nodeId !== ''"
v-model:orgLevel="orgLevel"
v-model:treeId="nodeId"
v-model:reqMaster="reqMaster"
v-model:totalPage="totalPage"
v-model:posMaster="posMaster"
/>
<q-banner v-else class="bg-warning text-white col-12 text-center">
เลือกรายการ {{ nodeId }}
<q-banner v-else class="q-pa-lg col-12 text-center">
<q-icon name="mdi-hand-pointing-left" size="lg" color="primary" />
<p>กรุณาเลือกโครงสร้าง</p>
</q-banner>
</div>
</div>

2
src/modules/02_organizationalNew/components/mainTree.vue
View file

@ -106,7 +106,7 @@ const updateSelected = (id: string, level: number) => {
nodeId.value = "";
} else {
nodeId.value = id ? id : "";
id && props.fetchDataTable?.(id, level);
id && props.fetchDataTable?.(id, level, true);
}
};

173
src/modules/02_organizationalNew/components/tableTree.vue
View file

@ -1,9 +1,14 @@
<script setup lang="ts">
import { ref } from "vue";
import { ref, watch } from "vue";
/** importType*/
import type { QTableProps } from "quasar";
import type { ListMenu } from "@/modules/02_organizationalNew/interface/index/Main";
import type {
ListMenu,
NewPagination,
} from "@/modules/02_organizationalNew/interface/index/Main";
import type { FilterMaster } from "@/modules/02_organizationalNew/interface/request/organizational";
import type { PosMaster2 } from "@/modules/02_organizationalNew/interface/response/organizational";
/** importComponents*/
import DialogFormPosotion from "@/modules/02_organizationalNew/components/DialogFormPosition.vue";
@ -15,8 +20,13 @@ import { useOrganizational } from "@/modules/02_organizationalNew/store/organiza
const dataSort = ref<Array<any>>([]);
const modalSort = ref<boolean>(false);
const showAllData = ref<boolean>(false);
const orgLevel = defineModel<number>("orgLevel", {});
const treeId = defineModel<string>("treeId", {});
const currentPage = ref<number>(1);
const orgLevel = defineModel<number>("orgLevel", { required: true });
const treeId = defineModel<string>("treeId", { required: true });
const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
const totalPage = defineModel<number>("totalPage", { required: true });
const posMaster = defineModel<PosMaster2[]>("posMaster", { required: true });
const stroe = useOrganizational();
const filter = ref<string>("");
const actionType = ref<string>("");
@ -60,46 +70,120 @@ const columns = ref<QTableProps["columns"]>([
style: "font-size: 14px",
},
{
name: "noPosition",
name: "posMasterNo",
align: "left",
label: "เลขที่ตำแหน่ง",
sortable: true,
field: "noPosition",
field: "posMasterNo",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "namePosition",
name: "positionName",
align: "left",
label: "ตำแหน่งในสายงาน",
field: "namePosition",
field: "positionName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "typePosition",
name: "posTypeName",
align: "left",
label: "ประเภทตำแหน่ง",
sortable: true,
field: "typePosition",
field: "posTypeName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "levelPositoion",
name: "posLevelName",
align: "left",
label: "ระดับตำแหน่ง",
sortable: true,
field: "levelPositoion",
field: "posLevelName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "isStatus",
name: "positionIsSelected",
align: "left",
label: "มีคนครองหรือไม่",
sortable: true,
field: "isStatus",
field: "positionIsSelected",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const columnsExpand = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: false,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionName",
align: "left",
label: "ตำแหน่งในสายงาน",
sortable: true,
field: "positionName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionField",
align: "left",
label: "สายงาน",
sortable: true,
field: "positionField",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "posTypeName",
align: "left",
label: "ประเภทตำเเหน่ง",
sortable: true,
field: "posTypeName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "posLevelName",
align: "left",
label: "ระดับตำแหน่ง",
sortable: true,
field: "posLevelName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "posExecutiveName",
align: "left",
label: "ตำแหน่งทางการบริหาร",
sortable: true,
field: "posExecutiveName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionExecutiveField",
align: "left",
label: "ด้านทางการบริหาร",
sortable: true,
field: "positionExecutiveField",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionArea",
align: "left",
label: "ด้าน/สาขา",
sortable: true,
field: "positionArea",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
@ -135,6 +219,10 @@ function onClickViewDetail() {
function onClickSort() {
modalSort.value = true;
}
function updatePagination(newPagination: NewPagination) {
reqMaster.value.pageSize = newPagination.rowsPerPage;
reqMaster.value.page = 1;
}
</script>
<template>
<!-- TOOLBAR -->
@ -149,14 +237,15 @@ function onClickSort() {
icon="add"
@click="onClickPosition('ADD')"
>
<q-tooltip>เพิ่มตำแหน่ง</q-tooltip></q-btn
>
<q-tooltip>เพิ่มตำแหน่ง</q-tooltip>
</q-btn>
<q-btn
flat
round
dense
color="blue"
icon="filter_list"
icon="mdi-sort"
@click="onClickSort()"
>
<q-tooltip>จัดลำดับ</q-tooltip>
@ -183,7 +272,7 @@ function onClickSort() {
<div>
<q-checkbox
keep-color
v-model="showAllData"
v-model="reqMaster.isAll"
label="แสดงตำแหน่งทั้งหมด"
color="primary"
>
@ -202,8 +291,8 @@ function onClickSort() {
<d-table
ref="table"
:columns="columns"
:rows="rows"
row-key="noPosition"
:rows="posMaster"
row-key="id"
flat
bordered
:paging="true"
@ -211,6 +300,7 @@ function onClickSort() {
class="custom-header-table"
:rows-per-page-options="[10, 25, 50, 100]"
:filter="filter"
@update:pagination="updatePagination"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -235,7 +325,11 @@ function onClickSort() {
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
{{
(reqMaster.page - 1) * Number(reqMaster.pageSize) +
props.rowIndex +
1
}}
</div>
<div v-else>
@ -283,18 +377,13 @@ function onClickSort() {
<q-td colspan="100%">
<div class="text-left q-pa-md">
<div class="col-12">
<d-table
ref="table"
:columns="columns"
:rows="rows"
row-key="noPosition"
flat
<q-table
:columns="columnsExpand"
:rows="props.row.positions"
row-key="id"
bordered
:paging="true"
dense
class="custom-header-table"
:rows-per-page-options="[10, 25, 50, 100]"
:filter="filter"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -363,23 +452,23 @@ function onClickSort() {
</q-td>
</q-tr>
</template>
</d-table>
</q-table>
</div>
</div>
</q-td>
</q-tr>
</template>
<!-- <template v-slot:pagination="scope">
<q-pagination
v-model="currentPage"
active-color="primary"
color="dark"
:max="Number(props.maxPage)"
size="sm"
boundary-links
direction-links
></q-pagination>
</template> -->
<template v-slot:pagination="scope">
<q-pagination
v-model="reqMaster.page"
active-color="primary"
color="dark"
:max="totalPage"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</d-table>
</div>

8
src/modules/02_organizationalNew/interface/index/Main.ts
View file

@ -117,6 +117,13 @@ interface RowDetailPositions {
posExecutiveId: string;
}
interface NewPagination {
descending: boolean;
page: number;
rowsPerPage: number;
sortBy: string;
}
export type {
Pagination,
DataOption,
@ -133,4 +140,5 @@ export type {
RowDetailPositions,
HistoryPostType,
FormPositionSelectRef,
NewPagination,
};

9
src/modules/02_organizationalNew/interface/request/organizational.ts Normal file
View file

@ -0,0 +1,9 @@
interface FilterMaster {
id: string; //*Id node
type: number; //*ประเภทnode
isAll: boolean; //*(true->ทั้งหมด, false->ในระดับตัวเอง)
page: number; //*หน้า
pageSize: number; //*จำนวนแถวต่อหน้า
keyword: string; //ข้อความที่ต้องการค้นหา
}
export type { FilterMaster };

71
src/modules/02_organizationalNew/interface/response/organizational.ts
View file

@ -61,6 +61,73 @@ interface DataPosition {
positionName: string;
}
interface Position {
id: string; // id ตำแหน่ง
positionName: string; // ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
positionField: string; // สายงาน
posTypeId: string; // ประเภทตำแหน่ง
posTypeName: string; // ประเภทตำแหน่ง
posLevelId: string; // ระดับตำแหน่ง
posLevelName: string; // ระดับตำแหน่ง
posExecutiveId: string; // ตำแหน่งทางการบริหาร
posExecutiveName: string; // ตำแหน่งทางการบริหาร
positionExecutiveField: string; // ด้านทางการบริหาร
positionArea: string; // ด้าน/สาขา
positionIsSelected: boolean; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
}
interface PosMaster {
id: string; // id อัตรากำลัง posmaster
posMasterNoPrefix: string; // Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
posMasterNo: number; // เลขที่ตำแหน่ง เป็นตัวเลข
posMasterNoSuffix: string | null; // Suffix หลังเลขที่ตำแหน่ง เช่น ช.
positionName: string; // ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
positionField: string; // สายงาน
posTypeId: string; // ประเภทตำแหน่ง
posTypeName: string; // ประเภทตำแหน่ง
posLevelId: string; // ระดับตำแหน่ง
posLevelName: string; // ระดับตำแหน่ง
posExecutiveId: string; // ตำแหน่งทางการบริหาร
posExecutiveName: string; // ตำแหน่งทางการบริหาร
positionExecutiveField: string; // ด้านทางการบริหาร
positionArea: string; // ด้าน/สาขา
positionIsSelected: boolean; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
positions: Position[]; // ตำแหน่ง
}
interface Position2 {
id: string; // id ตำแหน่ง
positionName: string; // ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
positionField: string; // สายงาน
posTypeId: string; // ประเภทตำแหน่ง
posTypeName: string; // ประเภทตำแหน่ง
posLevelId: string; // ระดับตำแหน่ง
posLevelName: string; // ระดับตำแหน่ง
posExecutiveId: string; // ตำแหน่งทางการบริหาร
posExecutiveName: string; // ตำแหน่งทางการบริหาร
positionExecutiveField: string; // ด้านทางการบริหาร
positionArea: string; // ด้าน/สาขา
positionIsSelected: string; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
}
interface PosMaster2 {
id: string; // id อัตรากำลัง posmaster
posMasterNoPrefix: string; // Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
posMasterNo: number; // เลขที่ตำแหน่ง เป็นตัวเลข
posMasterNoSuffix: string | null; // Suffix หลังเลขที่ตำแหน่ง เช่น ช.
positionName: string; // ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
positionField: string; // สายงาน
posTypeId: string; // ประเภทตำแหน่ง
posTypeName: string; // ประเภทตำแหน่ง
posLevelId: string; // ระดับตำแหน่ง
posLevelName: string; // ระดับตำแหน่ง
posExecutiveId: string; // ตำแหน่งทางการบริหาร
posExecutiveName: string; // ตำแหน่งทางการบริหาร
positionExecutiveField: string; // ด้านทางการบริหาร
positionArea: string; // ด้าน/สาขา
positionIsSelected: string; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
positions: Position[]; // ตำแหน่ง
}
export type {
DataActive,
OrgTree,
@ -69,4 +136,8 @@ export type {
OptionLevel,
OptionExecutive,
DataPosition,
PosMaster,
PosMaster2,
Position,
Position2,
};

38
src/modules/02_organizationalNew/store/organizational.ts
View file

@ -2,7 +2,11 @@ import { defineStore } from "pinia";
import { ref } from "vue";
/** importType*/
import type { DataActive } from "@/modules/02_organizationalNew/interface/response/organizational";
import type {
DataActive,
Position,
PosMaster,
} from "@/modules/02_organizationalNew/interface/response/organizational";
export const useOrganizational = defineStore("organizationalStore", () => {
const typeOrganizational = ref<string>("current");
@ -13,12 +17,39 @@ export const useOrganizational = defineStore("organizationalStore", () => {
const draftId = ref<string>();
const treeId = ref<string>();
const level = ref<number>();
const isPublic = ref<boolean>(false);
const orgPublishDate = ref<Date>();
function fetchDataActive(data: DataActive) {
activeId.value = data.activeId;
draftId.value = data.draftId;
dataActive.value = data;
}
function fetchPosMaster(data: PosMaster[]) {
console.log(data);
const newPosMaster = data.map((e: PosMaster) => ({
...e,
positionIsSelected: e.positionIsSelected ? "มีคนครอง" : "ไม่มีคนครอง",
positionName: e.positionName ? e.positionName : "-",
posTypeName: e.posTypeName ? e.posTypeName : "-",
posLevelName: e.posLevelName ? e.posLevelName : "-",
posExecutiveName: e.posExecutiveName ? e.posExecutiveName : "-",
// positions: [
// {
// ...e.positions,
// positionName: e.positionName ? e.positionName : "-",
// posTypeName: e.posTypeName ? e.posTypeName : "-",
// posLevelName: e.posLevelName ? e.posLevelName : "-",
// posExecutiveName: e.posExecutiveName ? e.posExecutiveName : "-",
// positionIsSelected: e.positionIsSelected ? "มีคนครอง" : "ไม่มีคนครอง",
// },
// ],
}));
return newPosMaster;
}
function checkLevel(type: number) {
switch (type) {
case 0:
@ -60,6 +91,9 @@ export const useOrganizational = defineStore("organizationalStore", () => {
draftId,
activeId,
treeId,
level
level,
isPublic,
orgPublishDate,
fetchPosMaster,
};
});