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

ปรับ code โครงสร้าง

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-02-06 11:30:51 +07:00
parent 9f30a71efe
commit efa8896898
5 changed files with 271 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -26,13 +26,16 @@ const store = useOrganizational();
const $q = useQuasar();
const { showLoader, hideLoader, messageError } = useCounterMixin();
const nodeTree = ref<OrgTree[]>(); // ข้อมูล Tree
/** props*/
const historyId = defineModel<string>("historyId", { required: true }); // id ประวัติโครงสร้าง
const count = defineModel<number>("count", { required: true });
const nodeTree = ref<OrgTree[]>(); // ข้อมูล Tree
const nodeId = ref<string>(""); // id ของ Tree
const orgLevel = ref<number>(0); // levelTree
const isLoad = ref<boolean>(false); // loadTable
const selected = ref<string>("");
const reqMaster = reactive<FilterMaster>({
id: "",
type: 0,
@ -51,7 +54,6 @@ const posMaster = ref<PosMaster2[]>([]);
*/
async function fetchDataTree(id: string) {
showLoader();
await http
.get(config.API.orgByid(id.toString()))
.then((res) => {
@ -119,6 +121,7 @@ async function fetchDataTable(id: string, level: number, action: boolean) {
});
}
/** funcion ค้นหาข้อมูลใน Table*/
async function filterKeyword() {
reqMaster.page = 1;
action1.value === false &&
@ -155,6 +158,7 @@ watch(
}
);
/** callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า*/
watch(
[() => reqMaster.page, () => reqMaster.pageSize, () => reqMaster.isAll],
() => {
@ -197,45 +201,49 @@ watch(
<div v-else class="col-12 row">
<div class="col-12" v-if="nodeId !== ''">
<!-- summary -->
<q-card
bordered
v-if="nodeId"
class="row col-12 justify-between list-summary q-gutter-xs bg-grey-1 q-pb-xs q-pr-xs"
>
<div class="row col q-pa-sm item">
<div class="ellipsis">ตำแหน่งทั้งหมด</div>
<q-space />
<q-badge color="secondary" :label="store.sumPosition.total" />
</div>
<div class="row col q-pa-sm item">
<div class="ellipsis">ตำแหน่งที่มีคนครอง</div>
<q-space />
<q-badge color="primary" :label="store.sumPosition.use" />
</div>
<div class="row col q-pa-sm item">
<div class="ellipsis">ตำแหน่งว่าง</div>
<q-space />
<q-badge color="red" :label="store.sumPosition.vacant" />
</div>
</q-card>
<!-- summary -->
<q-card
bordered
v-if="nodeId"
class="row col-12 justify-between list-summary q-gutter-xs bg-grey-1 q-pb-xs q-pr-xs"
>
<div class="row col q-pa-sm item">
<div class="ellipsis">ตำแหน่งทั้งหมด</div>
<q-space />
<q-badge color="secondary" :label="store.sumPosition.total" />
</div>
<div class="row col q-pa-sm item">
<div class="ellipsis">ตำแหน่งที่มีคนครอง</div>
<q-space />
<q-badge color="primary" :label="store.sumPosition.use" />
</div>
<div class="row col q-pa-sm item">
<div class="ellipsis">ตำแหน่งว่าง</div>
<q-space />
<q-badge color="red" :label="store.sumPosition.vacant" />
</div>
</q-card>
<TableView
v-if="nodeId !== ''"
v-model:nodeTree="nodeTree"
v-model:orgLevel="orgLevel"
v-model:treeId="nodeId"
v-model:reqMaster="reqMaster"
v-model:totalPage="totalPage"
v-model:posMaster="posMaster"
:fetchDataTable="fetchDataTable"
:filterKeyword="filterKeyword"
:fetchDataTree="fetchDataTree"
/>
<TableView
v-if="nodeId !== ''"
v-model:nodeTree="nodeTree"
v-model:orgLevel="orgLevel"
v-model:treeId="nodeId"
v-model:reqMaster="reqMaster"
v-model:totalPage="totalPage"
v-model:posMaster="posMaster"
:fetchDataTable="fetchDataTable"
:filterKeyword="filterKeyword"
:fetchDataTree="fetchDataTree"
/>
</div>
<div class="row col-12 items-center" v-else>
<q-banner class="q-pa-lg col-12 text-center">
<q-icon name="mdi-hand-pointing-left" size="lg" color="primary" />
<q-icon
name="mdi-hand-pointing-left"
size="lg"
color="primary"
/>
<p class="text-grey-9 q-pt-sm">กรุณาเลือกโครงสร้าง</p>
</q-banner>
</div>

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

@ -1,26 +1,34 @@
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { ref, watch } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
/** importType*/
import type { ListMenu } from "@/modules/02_organizationalNew/interface/index/Main";
import type { OrgTree } from "@/modules/02_organizationalNew/interface/response/organizational";
import type { DataTree } from "@/modules/02_organizationalNew/interface/index/organizational";
/** importComponents*/
import DialogAgency from "@/modules/02_organizationalNew/components/DialogFormAgency.vue";
import DialogStructureDetail from "@/modules/02_organizationalNew/components/StructureDetail.vue";
import DialogSortAgency from "@/modules/02_organizationalNew/components/DialogSortAgency.vue";
import DialogHistory from "@/modules/02_organizationalNew/components/DialogHistory.vue";
/** importStore*/
import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
import { useCounterMixin } from "@/stores/mixin";
/** use*/
const $q = useQuasar();
const store = useOrganizational();
const { dialogRemove, showLoader, hideLoader, messageError, success } =
useCounterMixin();
const $q = useQuasar();
/** props*/
const nodeTEST = defineModel<OrgTree[]>("nodeTree", { default: [] });
const nodeId = defineModel<string>("nodeId", { required: true });
const selected = defineModel<string>("selected", { required: true });
const props = defineProps({
fetchDataTree: {
type: Function,
@ -32,6 +40,7 @@ const props = defineProps({
},
});
/** ListMenuTree*/
const listAdd = ref<ListMenu[]>([
{
label: "เพิ่ม",
@ -51,12 +60,7 @@ const listAdd = ref<ListMenu[]>([
type: "DEL",
color: "red",
},
// {
// label: "สำเนาหน่วยงาน",
// icon: "content_copy",
// type: "COPY",
// color: "blue",
// },
{
label: "ประวัติ",
icon: "history",
@ -69,12 +73,6 @@ const listAdd = ref<ListMenu[]>([
type: "SORT",
color: "blue-6",
},
// {
// label: "แก้ไขสถานะ",
// icon: "rule",
// type: "STATUS",
// color: "yellow-9",
// },
{
label: "ดูรายละเอียด",
icon: "mdi-eye",
@ -83,24 +81,22 @@ const listAdd = ref<ListMenu[]>([
},
]);
const nodeTEST = defineModel<OrgTree[]>("nodeTree", { default: [] });
const nodeId = defineModel<string>("nodeId", { required: true });
const isLoad = defineModel<boolean>("isLoad", { required: true });
const selected = defineModel<string>("selected", { required: true });
const filter = ref<string>("");
const nodes = ref<Array<OrgTree>>([]);
const dataSort = ref<Array<any>>([]);
const lazy = ref(nodes);
const expanded = ref<Array<any>>([]);
const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
const noData = ref<string>("ไม่มีข้อมูล");
// const selected = ref("");
const orgLevel = ref<number>(0);
const type = ref<number>(0);
const orgId = ref<string>("");
const updateSelected = (data: any) => {
/**
* funtion เลือกข้อมูล Tree
* @param data ข่อมูล Tree
*/
function updateSelected(data: DataTree) {
store.treeId = data.orgTreeId;
store.level = data.orgLevel;
if (data.orgTreeId === nodeId.value) {
@ -117,9 +113,17 @@ const updateSelected = (data: any) => {
totalPositionNextVacant: data.totalPositionNextVacant,
});
}
};
}
const breakLoop = ref<boolean>(false);
/**
* function แก้ไขโครสร้าง
* @param id ID โครงสร้าง
* @param type ละดับโครงสร้าง
* @param data ข้อมูลโครงสร้าง
* @param orgRootCode
*/
async function edit(id: string, type: string, data: any, orgRootCode: string) {
breakLoop.value = false;
const targetNodeId = id;
@ -133,6 +137,14 @@ async function edit(id: string, type: string, data: any, orgRootCode: string) {
}
}
/**
* function แก้ไขโครสร้าง
* @param treeNode
* @param organizationId ID โครงสร้าง
* @param data ข้อมูลโครงสร้าง
* @param type ละดับโครงสร้าง
* @param orgRootCode
*/
function searchAndReplace(
treeNode: any,
organizationId: string,
@ -165,6 +177,11 @@ function searchAndReplace(
}
}
/**
* function ลบข้อมูลโครงสร้าง
* @param rootId RootID
* @param treeId TreeID
*/
async function deleteUpdate(rootId: string, treeId: string) {
breakLoop.value = false;
if (rootId) {
@ -179,6 +196,12 @@ async function deleteUpdate(rootId: string, treeId: string) {
}
}
/**
* function ลบข้อมูลโครงสร้าง
* @param treeNode ข้อมูล Tree
* @param rootId RootID
* @param treeId TreeID
*/
function deleteNode(treeNode: any, rootId: string, treeId: string): boolean {
if (treeNode.orgTreeId === rootId) {
const childrenNew = treeNode.children.filter(
@ -207,6 +230,11 @@ const actionType = ref<string>("");
const dataNode = ref<any>();
const treeId = ref<string>("");
/**
* funcion openPopup เพิ่มหน่วยงาน
* @param level ระดับโครงสร้าง
* @param node ข้อมูล โครงสร้าง
*/
function onClickAgency(level: number, node: OrgTree | {}) {
dialogAgency.value = !dialogAgency.value;
orgLevel.value = level;
@ -215,6 +243,11 @@ function onClickAgency(level: number, node: OrgTree | {}) {
}
const dialogDetail = ref<boolean>(false);
/**
* funtion ดูรายละเอียดโครงสร้าง
* @param id ID โครงสร้าง
* @param level ระดับโครงสร้าง
*/
function onClickDetail(id: string, level: number) {
showLoader();
treeId.value = id;
@ -222,6 +255,10 @@ function onClickDetail(id: string, level: number) {
orgLevel.value = level;
}
/**
* function openPopup แก้ไขข้อมูลโครงสร้าง
* @param node ข้อมูล โครงสร้าง
*/
async function onClickEdit(node: OrgTree) {
dialogAgency.value = !dialogAgency.value;
actionType.value = "EDIT";
@ -229,9 +266,14 @@ async function onClickEdit(node: OrgTree) {
dataNode.value = node;
}
/**
* function ยื่นยันการลบโครงสร้าง
* @param type ระดับโครงสร้าง
* @param id ID โครงสร้าง
* @param rootId RootID
*/
async function onClickDel(type: number, id: string, rootId: string) {
const level = store.checkLevel(type);
dialogRemove($q, async () => {
showLoader();
await http
@ -249,14 +291,17 @@ async function onClickDel(type: number, id: string, rootId: string) {
});
}
/**
* function การจัดลำดับโครงสร้าง
* @param id ID โครงสร้าง
* @param level ระดับโครงสร้าง
*/
async function onClickSort(id: string, level: number) {
type.value = level;
modalSortAgency.value = true;
if (id) {
breakLoop.value = false;
const orgId = id;
for (let index = 0; index < nodes.value.length; index++) {
const data = nodes.value[index];
searchAndReplace(data, orgId);
@ -287,6 +332,11 @@ async function onClickSort(id: string, level: number) {
}
}
/**
* function ดูประวัดโครงสร้าง
* @param level ระดับโครงสร้าง
* @param id ID โครงสร้าง
*/
function onClickHistory(level: number, id: string) {
type.value = level;
orgId.value = id;
@ -299,8 +349,6 @@ watch(
nodes.value = nodeTEST.value;
}
);
onMounted(async () => {});
</script>
<template>
@ -323,12 +371,7 @@ onMounted(async () => {});
<div
:class="store.typeOrganizational === 'draft' ? 'col-10' : 'col-12'"
>
<q-input
dense
outlined
v-model="filter"
label="ค้นหา"
>
<q-input dense outlined v-model="filter" label="ค้นหา">
<template v-slot:append>
<q-icon
v-if="filter !== ''"
@ -425,8 +468,12 @@ onMounted(async () => {});
: null
"
>
<q-item-section avatar style="min-width:20px;">
<q-icon size="17px" :color="item.color" :name="item.icon" />
<q-item-section avatar style="min-width: 20px">
<q-icon
size="17px"
:color="item.color"
:name="item.icon"
/>
</q-item-section>
<div v-if="prop.node.orgLevel === 0">
<q-item-section
@ -487,8 +534,12 @@ onMounted(async () => {});
onClickDetail(prop.node.orgTreeId, prop.node.orgLevel)
"
>
<q-item-section avatar style="min-width:20px;">
<q-icon size="17px" :color="item.color" :name="item.icon" />
<q-item-section avatar style="min-width: 20px">
<q-icon
size="17px"
:color="item.color"
:name="item.icon"
/>
</q-item-section>
<q-item-section>{{ item.label }}</q-item-section>
</q-item>
@ -536,7 +587,7 @@ onMounted(async () => {});
.tree-container {
overflow: auto;
height: 60vh;
border: 1px solid #E6E6E7;
border: 1px solid #e6e6e7;
border-radius: 10px;
}
</style>

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

@ -25,10 +25,18 @@ import DialogHistoryPos from "@/modules/02_organizationalNew/components/DialogHi
import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
import { useCounterMixin } from "@/stores/mixin";
const $q = useQuasar();
const stroe = useOrganizational();
const { showLoader, hideLoader, messageError, success, dialogRemove } =
useCounterMixin();
const $q = useQuasar();
/** prosp*/
const nodeTree = defineModel<any>("nodeTree", { required: true });
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 props = defineProps({
filterKeyword: { type: Function, require: true, default: () => {} },
fetchDataTable: {
@ -43,16 +51,9 @@ const props = defineProps({
},
});
const modalSort = ref<boolean>(false);
const nodeTree = defineModel<any>("nodeTree", { required: true });
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 rowId = ref<string>("");
const actionType = ref<string>("");
/** ListMenu Table*/
const listMenu = ref<ListMenu[]>([
{
label: "แก้ไข",
@ -100,6 +101,7 @@ const document = ref<any>([
},
]);
/** columns*/
const columns = ref<QTableProps["columns"]>([
{
name: "no",
@ -231,7 +233,11 @@ const columnsExpand = ref<QTableProps["columns"]>([
]);
const dialogPosition = ref<boolean>(false);
const rowId = ref<string>("");
/**
* function openPopup เพิ่มอัตรากำลัง
* @param type ประเภท
* @param id id
*/
function onClickPosition(type: string, id: string) {
rowId.value = id;
actionType.value = type;
@ -240,11 +246,19 @@ function onClickPosition(type: string, id: string) {
const dialogDetail = ref<boolean>(false);
const dataDetailPos = ref<DataPosition[]>([]);
/**
* function ดูรายละเอียดประวัติตำแหน่ง
* @param data ข้อมูล ประวัติตำแหน่ง
*/
function onClickViewDetail(data: DataPosition[]) {
dialogDetail.value = !dialogDetail.value;
dataDetailPos.value = data;
}
/**
* function ยืนยันการลบตำแหน่ง
* @param id id ตำแหน่ง
*/
function onClickDelete(id: string) {
dialogRemove($q, async () => {
showLoader();
@ -263,12 +277,19 @@ function onClickDelete(id: string) {
});
}
const modalSort = ref<boolean>(false);
/** fdunction จัดลำดับตำแหน่ง */
function onClickSort() {
modalSort.value = true;
}
const modalDialogMMove = ref<boolean>(false);
const typeMove = ref<string>("");
/**
* function openPopup ย้ายตำแหน่ง
* @param id ID ตำแหน่ง
* @param type ประเภท [ALL,SINGER]
*/
function onClickMovePos(id: string, type: string) {
modalDialogMMove.value = !modalDialogMMove.value;
typeMove.value = type;
@ -276,11 +297,19 @@ function onClickMovePos(id: string, type: string) {
}
const modalDialogHistoryPos = ref<boolean>(false);
/**
* function ดูประวัติตำแหน่ง
* @param id ID ตำแหน่ง
*/
function onClickHistoryPos(id: string) {
modalDialogHistoryPos.value = !modalDialogHistoryPos.value;
rowId.value = id;
}
/**
* function updatePagination
* @param newPagination ข้อมูล Pagination ใหม่
*/
function updatePagination(newPagination: NewPagination) {
reqMaster.value.pageSize = newPagination.rowsPerPage;
reqMaster.value.page = 1;
@ -458,9 +487,13 @@ function updatePagination(newPagination: NewPagination) {
: null
"
>
<q-item-section>
<q-item-section>
<div class="row items-center">
<q-icon :color="item.color" size="17px" :name="item.icon" />
<q-icon
:color="item.color"
size="17px"
:name="item.icon"
/>
<div class="q-pl-md">{{ item.label }}</div>
</div>
</q-item-section>
@ -483,17 +516,19 @@ function updatePagination(newPagination: NewPagination) {
dense
hide-bottom
bordered
separator="vertical"
separator="vertical"
class="custom-header-table-expand"
>
<template v-slot:header="props">
<q-tr :props="props" class=" bg-grey-2">
<q-tr :props="props" class="bg-grey-2">
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<span class="q-px-sm text-body2 text-black">{{ col.label }}</span>
<span class="q-px-sm text-body2 text-black">{{
col.label
}}</span>
</q-th>
</q-tr>
</template>
@ -503,13 +538,12 @@ function updatePagination(newPagination: NewPagination) {
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div v-if="col.name == 'no'" class=" text-body2 ">
<div v-if="col.name == 'no'" class="text-body2">
{{ props.rowIndex + 1 }}
</div>
<div v-else class=" text-body2">
<div v-else class="text-body2">
{{ col.value }}
</div>
</q-td>
@ -569,6 +603,7 @@ function updatePagination(newPagination: NewPagination) {
:rowId="rowId"
/>
<!-- ประวัติตำแหน่ง -->
<DialogHistoryPos v-model:modal="modalDialogHistoryPos" :rowId="rowId" />
</template>
@ -599,10 +634,9 @@ function updatePagination(newPagination: NewPagination) {
top: 0;
padding: 0px;
}
}
.q-table th:last-child, .q-table td:last-child{
.q-table th:last-child,
.q-table td:last-child {
padding: 0px !important;
}
</style>