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

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

@ -1,26 +1,34 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, watch } from "vue"; import { ref, watch } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
/** importType*/
import type { ListMenu } from "@/modules/02_organizationalNew/interface/index/Main"; import type { ListMenu } from "@/modules/02_organizationalNew/interface/index/Main";
import type { OrgTree } from "@/modules/02_organizationalNew/interface/response/organizational"; import type { OrgTree } from "@/modules/02_organizationalNew/interface/response/organizational";
import type { DataTree } from "@/modules/02_organizationalNew/interface/index/organizational";
/** importComponents*/ /** importComponents*/
import DialogAgency from "@/modules/02_organizationalNew/components/DialogFormAgency.vue"; import DialogAgency from "@/modules/02_organizationalNew/components/DialogFormAgency.vue";
import DialogStructureDetail from "@/modules/02_organizationalNew/components/StructureDetail.vue"; import DialogStructureDetail from "@/modules/02_organizationalNew/components/StructureDetail.vue";
import DialogSortAgency from "@/modules/02_organizationalNew/components/DialogSortAgency.vue"; import DialogSortAgency from "@/modules/02_organizationalNew/components/DialogSortAgency.vue";
import DialogHistory from "@/modules/02_organizationalNew/components/DialogHistory.vue"; import DialogHistory from "@/modules/02_organizationalNew/components/DialogHistory.vue";
/** importStore*/ /** importStore*/
import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational"; import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
/** use*/
const $q = useQuasar();
const store = useOrganizational(); const store = useOrganizational();
const { dialogRemove, showLoader, hideLoader, messageError, success } = const { dialogRemove, showLoader, hideLoader, messageError, success } =
useCounterMixin(); 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({ const props = defineProps({
fetchDataTree: { fetchDataTree: {
type: Function, type: Function,
@ -32,6 +40,7 @@ const props = defineProps({
}, },
}); });
/** ListMenuTree*/
const listAdd = ref<ListMenu[]>([ const listAdd = ref<ListMenu[]>([
{ {
label: "เพิ่ม", label: "เพิ่ม",
@ -51,12 +60,7 @@ const listAdd = ref<ListMenu[]>([
type: "DEL", type: "DEL",
color: "red", color: "red",
}, },
// {
// label: "สำเนาหน่วยงาน",
// icon: "content_copy",
// type: "COPY",
// color: "blue",
// },
{ {
label: "ประวัติ", label: "ประวัติ",
icon: "history", icon: "history",
@ -69,12 +73,6 @@ const listAdd = ref<ListMenu[]>([
type: "SORT", type: "SORT",
color: "blue-6", color: "blue-6",
}, },
// {
// label: "แก้ไขสถานะ",
// icon: "rule",
// type: "STATUS",
// color: "yellow-9",
// },
{ {
label: "ดูรายละเอียด", label: "ดูรายละเอียด",
icon: "mdi-eye", 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 filter = ref<string>("");
const nodes = ref<Array<OrgTree>>([]); const nodes = ref<Array<OrgTree>>([]);
const dataSort = ref<Array<any>>([]); const dataSort = ref<Array<any>>([]);
const lazy = ref(nodes); const lazy = ref(nodes);
const expanded = ref<Array<any>>([]); const expanded = ref<Array<any>>([]);
const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา"); const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
const noData = ref<string>("ไม่มีข้อมูล"); const noData = ref<string>("ไม่มีข้อมูล");
// const selected = ref("");
const orgLevel = ref<number>(0); const orgLevel = ref<number>(0);
const type = ref<number>(0); const type = ref<number>(0);
const orgId = ref<string>(""); const orgId = ref<string>("");
const updateSelected = (data: any) => { /**
* funtion เลือกข้อมูล Tree
* @param data ข่อมูล Tree
*/
function updateSelected(data: DataTree) {
store.treeId = data.orgTreeId; store.treeId = data.orgTreeId;
store.level = data.orgLevel; store.level = data.orgLevel;
if (data.orgTreeId === nodeId.value) { if (data.orgTreeId === nodeId.value) {
@ -117,9 +113,17 @@ const updateSelected = (data: any) => {
totalPositionNextVacant: data.totalPositionNextVacant, totalPositionNextVacant: data.totalPositionNextVacant,
}); });
} }
}; }
const breakLoop = ref<boolean>(false); 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) { async function edit(id: string, type: string, data: any, orgRootCode: string) {
breakLoop.value = false; breakLoop.value = false;
const targetNodeId = id; 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( function searchAndReplace(
treeNode: any, treeNode: any,
organizationId: string, organizationId: string,
@ -165,6 +177,11 @@ function searchAndReplace(
} }
} }
/**
* function ลบข้อมูลโครงสร้าง
* @param rootId RootID
* @param treeId TreeID
*/
async function deleteUpdate(rootId: string, treeId: string) { async function deleteUpdate(rootId: string, treeId: string) {
breakLoop.value = false; breakLoop.value = false;
if (rootId) { 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 { function deleteNode(treeNode: any, rootId: string, treeId: string): boolean {
if (treeNode.orgTreeId === rootId) { if (treeNode.orgTreeId === rootId) {
const childrenNew = treeNode.children.filter( const childrenNew = treeNode.children.filter(
@ -207,6 +230,11 @@ const actionType = ref<string>("");
const dataNode = ref<any>(); const dataNode = ref<any>();
const treeId = ref<string>(""); const treeId = ref<string>("");
/**
* funcion openPopup เพิ่มหน่วยงาน
* @param level ระดับโครงสร้าง
* @param node ข้อมูล โครงสร้าง
*/
function onClickAgency(level: number, node: OrgTree | {}) { function onClickAgency(level: number, node: OrgTree | {}) {
dialogAgency.value = !dialogAgency.value; dialogAgency.value = !dialogAgency.value;
orgLevel.value = level; orgLevel.value = level;
@ -215,6 +243,11 @@ function onClickAgency(level: number, node: OrgTree | {}) {
} }
const dialogDetail = ref<boolean>(false); const dialogDetail = ref<boolean>(false);
/**
* funtion ดูรายละเอียดโครงสร้าง
* @param id ID โครงสร้าง
* @param level ระดับโครงสร้าง
*/
function onClickDetail(id: string, level: number) { function onClickDetail(id: string, level: number) {
showLoader(); showLoader();
treeId.value = id; treeId.value = id;
@ -222,6 +255,10 @@ function onClickDetail(id: string, level: number) {
orgLevel.value = level; orgLevel.value = level;
} }
/**
* function openPopup แก้ไขข้อมูลโครงสร้าง
* @param node ข้อมูล โครงสร้าง
*/
async function onClickEdit(node: OrgTree) { async function onClickEdit(node: OrgTree) {
dialogAgency.value = !dialogAgency.value; dialogAgency.value = !dialogAgency.value;
actionType.value = "EDIT"; actionType.value = "EDIT";
@ -229,9 +266,14 @@ async function onClickEdit(node: OrgTree) {
dataNode.value = node; dataNode.value = node;
} }
/**
* function ยื่นยันการลบโครงสร้าง
* @param type ระดับโครงสร้าง
* @param id ID โครงสร้าง
* @param rootId RootID
*/
async function onClickDel(type: number, id: string, rootId: string) { async function onClickDel(type: number, id: string, rootId: string) {
const level = store.checkLevel(type); const level = store.checkLevel(type);
dialogRemove($q, async () => { dialogRemove($q, async () => {
showLoader(); showLoader();
await http 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) { async function onClickSort(id: string, level: number) {
type.value = level; type.value = level;
modalSortAgency.value = true; modalSortAgency.value = true;
if (id) { if (id) {
breakLoop.value = false; breakLoop.value = false;
const orgId = id; const orgId = id;
for (let index = 0; index < nodes.value.length; index++) { for (let index = 0; index < nodes.value.length; index++) {
const data = nodes.value[index]; const data = nodes.value[index];
searchAndReplace(data, orgId); 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) { function onClickHistory(level: number, id: string) {
type.value = level; type.value = level;
orgId.value = id; orgId.value = id;
@ -299,8 +349,6 @@ watch(
nodes.value = nodeTEST.value; nodes.value = nodeTEST.value;
} }
); );
onMounted(async () => {});
</script> </script>
<template> <template>
@ -323,12 +371,7 @@ onMounted(async () => {});
<div <div
:class="store.typeOrganizational === 'draft' ? 'col-10' : 'col-12'" :class="store.typeOrganizational === 'draft' ? 'col-10' : 'col-12'"
> >
<q-input <q-input dense outlined v-model="filter" label="ค้นหา">
dense
outlined
v-model="filter"
label="ค้นหา"
>
<template v-slot:append> <template v-slot:append>
<q-icon <q-icon
v-if="filter !== ''" v-if="filter !== ''"
@ -425,8 +468,12 @@ onMounted(async () => {});
: null : null
" "
> >
<q-item-section avatar style="min-width:20px;"> <q-item-section avatar style="min-width: 20px">
<q-icon size="17px" :color="item.color" :name="item.icon" /> <q-icon
size="17px"
:color="item.color"
:name="item.icon"
/>
</q-item-section> </q-item-section>
<div v-if="prop.node.orgLevel === 0"> <div v-if="prop.node.orgLevel === 0">
<q-item-section <q-item-section
@ -487,8 +534,12 @@ onMounted(async () => {});
onClickDetail(prop.node.orgTreeId, prop.node.orgLevel) onClickDetail(prop.node.orgTreeId, prop.node.orgLevel)
" "
> >
<q-item-section avatar style="min-width:20px;"> <q-item-section avatar style="min-width: 20px">
<q-icon size="17px" :color="item.color" :name="item.icon" /> <q-icon
size="17px"
:color="item.color"
:name="item.icon"
/>
</q-item-section> </q-item-section>
<q-item-section>{{ item.label }}</q-item-section> <q-item-section>{{ item.label }}</q-item-section>
</q-item> </q-item>
@ -536,7 +587,7 @@ onMounted(async () => {});
.tree-container { .tree-container {
overflow: auto; overflow: auto;
height: 60vh; height: 60vh;
border: 1px solid #E6E6E7; border: 1px solid #e6e6e7;
border-radius: 10px; border-radius: 10px;
} }
</style> </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 { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
const $q = useQuasar();
const stroe = useOrganizational();
const { showLoader, hideLoader, messageError, success, dialogRemove } = const { showLoader, hideLoader, messageError, success, dialogRemove } =
useCounterMixin(); 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({ const props = defineProps({
filterKeyword: { type: Function, require: true, default: () => {} }, filterKeyword: { type: Function, require: true, default: () => {} },
fetchDataTable: { fetchDataTable: {
@ -43,16 +51,9 @@ const props = defineProps({
}, },
}); });
const modalSort = ref<boolean>(false); const rowId = ref<string>("");
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 actionType = ref<string>(""); const actionType = ref<string>("");
/** ListMenu Table*/
const listMenu = ref<ListMenu[]>([ const listMenu = ref<ListMenu[]>([
{ {
label: "แก้ไข", label: "แก้ไข",
@ -100,6 +101,7 @@ const document = ref<any>([
}, },
]); ]);
/** columns*/
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "no", name: "no",
@ -231,7 +233,11 @@ const columnsExpand = ref<QTableProps["columns"]>([
]); ]);
const dialogPosition = ref<boolean>(false); const dialogPosition = ref<boolean>(false);
const rowId = ref<string>(""); /**
* function openPopup เพิ่มอัตรากำลัง
* @param type ประเภท
* @param id id
*/
function onClickPosition(type: string, id: string) { function onClickPosition(type: string, id: string) {
rowId.value = id; rowId.value = id;
actionType.value = type; actionType.value = type;
@ -240,11 +246,19 @@ function onClickPosition(type: string, id: string) {
const dialogDetail = ref<boolean>(false); const dialogDetail = ref<boolean>(false);
const dataDetailPos = ref<DataPosition[]>([]); const dataDetailPos = ref<DataPosition[]>([]);
/**
* function ดูรายละเอียดประวัติตำแหน่ง
* @param data ข้อมูล ประวัติตำแหน่ง
*/
function onClickViewDetail(data: DataPosition[]) { function onClickViewDetail(data: DataPosition[]) {
dialogDetail.value = !dialogDetail.value; dialogDetail.value = !dialogDetail.value;
dataDetailPos.value = data; dataDetailPos.value = data;
} }
/**
* function ยืนยันการลบตำแหน่ง
* @param id id ตำแหน่ง
*/
function onClickDelete(id: string) { function onClickDelete(id: string) {
dialogRemove($q, async () => { dialogRemove($q, async () => {
showLoader(); showLoader();
@ -263,12 +277,19 @@ function onClickDelete(id: string) {
}); });
} }
const modalSort = ref<boolean>(false);
/** fdunction จัดลำดับตำแหน่ง */
function onClickSort() { function onClickSort() {
modalSort.value = true; modalSort.value = true;
} }
const modalDialogMMove = ref<boolean>(false); const modalDialogMMove = ref<boolean>(false);
const typeMove = ref<string>(""); const typeMove = ref<string>("");
/**
* function openPopup ย้ายตำแหน่ง
* @param id ID ตำแหน่ง
* @param type ประเภท [ALL,SINGER]
*/
function onClickMovePos(id: string, type: string) { function onClickMovePos(id: string, type: string) {
modalDialogMMove.value = !modalDialogMMove.value; modalDialogMMove.value = !modalDialogMMove.value;
typeMove.value = type; typeMove.value = type;
@ -276,11 +297,19 @@ function onClickMovePos(id: string, type: string) {
} }
const modalDialogHistoryPos = ref<boolean>(false); const modalDialogHistoryPos = ref<boolean>(false);
/**
* function ดูประวัติตำแหน่ง
* @param id ID ตำแหน่ง
*/
function onClickHistoryPos(id: string) { function onClickHistoryPos(id: string) {
modalDialogHistoryPos.value = !modalDialogHistoryPos.value; modalDialogHistoryPos.value = !modalDialogHistoryPos.value;
rowId.value = id; rowId.value = id;
} }
/**
* function updatePagination
* @param newPagination ข้อมูล Pagination ใหม่
*/
function updatePagination(newPagination: NewPagination) { function updatePagination(newPagination: NewPagination) {
reqMaster.value.pageSize = newPagination.rowsPerPage; reqMaster.value.pageSize = newPagination.rowsPerPage;
reqMaster.value.page = 1; reqMaster.value.page = 1;
@ -458,9 +487,13 @@ function updatePagination(newPagination: NewPagination) {
: null : null
" "
> >
<q-item-section> <q-item-section>
<div class="row items-center"> <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 class="q-pl-md">{{ item.label }}</div>
</div> </div>
</q-item-section> </q-item-section>
@ -483,17 +516,19 @@ function updatePagination(newPagination: NewPagination) {
dense dense
hide-bottom hide-bottom
bordered bordered
separator="vertical" separator="vertical"
class="custom-header-table-expand" class="custom-header-table-expand"
> >
<template v-slot:header="props"> <template v-slot:header="props">
<q-tr :props="props" class=" bg-grey-2"> <q-tr :props="props" class="bg-grey-2">
<q-th <q-th
v-for="col in props.cols" v-for="col in props.cols"
:key="col.name" :key="col.name"
:props="props" :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-th>
</q-tr> </q-tr>
</template> </template>
@ -503,13 +538,12 @@ function updatePagination(newPagination: NewPagination) {
v-for="col in props.cols" v-for="col in props.cols"
:key="col.name" :key="col.name"
:props="props" :props="props"
> >
<div v-if="col.name == 'no'" class=" text-body2 "> <div v-if="col.name == 'no'" class="text-body2">
{{ props.rowIndex + 1 }} {{ props.rowIndex + 1 }}
</div> </div>
<div v-else class=" text-body2"> <div v-else class="text-body2">
{{ col.value }} {{ col.value }}
</div> </div>
</q-td> </q-td>
@ -569,6 +603,7 @@ function updatePagination(newPagination: NewPagination) {
:rowId="rowId" :rowId="rowId"
/> />
<!-- ประวัติตำแหน่ง -->
<DialogHistoryPos v-model:modal="modalDialogHistoryPos" :rowId="rowId" /> <DialogHistoryPos v-model:modal="modalDialogHistoryPos" :rowId="rowId" />
</template> </template>
@ -599,10 +634,9 @@ function updatePagination(newPagination: NewPagination) {
top: 0; top: 0;
padding: 0px; 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; padding: 0px !important;
} }
</style> </style>

27
src/modules/02_organizationalNew/interface/index/organizational.ts
View file

@ -50,4 +50,29 @@ interface FormDetailPosition {
status: string; status: string;
} }
export type { DataPosition, Position, FormDetailPosition }; interface DataTree {
orgTreeId: string;
orgRootId?: string;
orgLevel: number;
orgName: string;
orgTreeName: string;
orgTreeShortName: string;
orgTreeCode: string;
orgCode: string;
orgTreeRank: string;
orgTreeOrder: number;
orgRootCode?: string;
orgTreePhoneEx: string;
orgTreePhoneIn: string;
orgTreeFax: string;
orgRevisionId: string;
orgRootName: string;
totalPosition: number;
totalPositionCurrentUse: number;
totalPositionCurrentVacant: number;
totalPositionNextUse: number;
totalPositionNextVacant: number;
children?: DataTree[];
}
export type { DataPosition, Position, FormDetailPosition, DataTree };

90
src/modules/02_organizationalNew/views/main.vue
View file

@ -13,23 +13,25 @@ import ListView from "@/modules/02_organizationalNew/components/listView.vue";
import StructureView from "@/modules/02_organizationalNew/components/structureView.vue"; import StructureView from "@/modules/02_organizationalNew/components/structureView.vue";
import DialogFormNewStructure from "@/modules/02_organizationalNew/components/DialogNewStructure.vue"; import DialogFormNewStructure from "@/modules/02_organizationalNew/components/DialogNewStructure.vue";
import DialogDateTime from "@/modules/02_organizationalNew/components/DialogFormDateTime.vue"; import DialogDateTime from "@/modules/02_organizationalNew/components/DialogFormDateTime.vue";
import DialogHistory from "@/modules/02_organizationalNew/components/DialogHistory.vue";
import DialogPositionDetail from "@/modules/02_organizationalNew/components/PositionDetail.vue";
/** importStore*/ /** importStore*/
import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational"; import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
/** use*/
const $q = useQuasar(); const $q = useQuasar();
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin(); const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
const modalNewStructure = ref<boolean>(false);
const modalPositionDetail = ref<boolean>(false);
const store = useOrganizational(); const store = useOrganizational();
const isStatusData = ref<boolean>(false); /** modalDialog*/
const ishasActive = ref<boolean>(false); const modalNewStructure = ref<boolean>(false); // เพิ่มโครงสร้าง
const ishasDraft = ref<boolean>(false); const modalDateTime = ref<boolean>(false); // ตั้งเวลาเผยแพร่
/** สถานะ*/
const isStatusData = ref<boolean>(false); // แสดงตั้งเวลาเผยแพร่
const ishasActive = ref<boolean>(false); // สถานะการทำงาน
const ishasDraft = ref<boolean>(false); // สถานะแบบร่าง
/** List เพิ่มโครงสร้าง*/
const itemStructure = ref<DataOption[]>([ const itemStructure = ref<DataOption[]>([
{ {
id: "NEW", id: "NEW",
@ -48,7 +50,15 @@ const itemStructure = ref<DataOption[]>([
name: "ทำสำเนาโครงสร้าง ตำแหน่งและคนครอง", name: "ทำสำเนาโครงสร้าง ตำแหน่งและคนครอง",
}, },
]); ]);
const typeStructure = ref<string>(""); // ประเภทการเพิ่มโครงสร้าง
/** ประวัติโครงสร้าง*/
const itemHistory = ref<DataOption[]>([]); // List ประวัติโครงสร้าง
const historyId = ref<string>(""); // ID ประวัติโครงสร้าง
const labelHistory = ref<string>("ประวัติโครงสร้าง"); // ชื่อประวัติโครงสร้าง
const count = ref<number>(0);
/** function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง*/
async function fetchOrganizationActive() { async function fetchOrganizationActive() {
showLoader(); showLoader();
await http await http
@ -81,10 +91,9 @@ async function fetchOrganizationActive() {
}); });
} }
const itemHistory = ref<DataOption[]>([]); /** function เรียกข้อมูลประวัติโครงสร้าง*/
const historyId = ref<string>("");
async function fetchHistory() { async function fetchHistory() {
// showLoader(); showLoader();
await http await http
.get(config.API.organizationHistoryNew) .get(config.API.organizationHistoryNew)
.then((res) => { .then((res) => {
@ -106,27 +115,32 @@ async function fetchHistory() {
}); });
} }
const typeStructure = ref<string>(""); /**
* function openPopup เพิ่มโครงสร้าง
* @param type ประเภทการเพิ่มโครงาสร้าง
*/
function ocClickAddStructure(type: string) { function ocClickAddStructure(type: string) {
modalNewStructure.value = !modalNewStructure.value; modalNewStructure.value = !modalNewStructure.value;
typeStructure.value = type; typeStructure.value = type;
} }
const modalDateTime = ref<boolean>(false); /** function openPopup ตั้งเวลาเผยแพร่*/
function onClickDateTime() { function onClickDateTime() {
modalDateTime.value = !modalDateTime.value; modalDateTime.value = !modalDateTime.value;
} }
const modalHistory = ref<boolean>(false); /**
const count = ref<number>(0); * function เปิดประวัติโครงสร้าง
const labelHistory = ref<string>("ประวัติโครงสร้าง"); * @param id id โครงสร้าง
* @param name ชื่อโครงสร้าง
*/
function onClickHistory(id: string, name: string) { function onClickHistory(id: string, name: string) {
historyId.value = id; historyId.value = id;
labelHistory.value = name; labelHistory.value = name;
count.value++; count.value++;
// modalHistory.value = !modalHistory.value;
} }
/** lifecycleHook */
onMounted(async () => { onMounted(async () => {
await fetchOrganizationActive(); await fetchOrganizationActive();
await fetchHistory(); await fetchHistory();
@ -134,15 +148,20 @@ onMounted(async () => {
</script> </script>
<template> <template>
<div class="row items-center"> <div class="row items-center">
<div class="toptitle text-dark row items-center q-py-xs">โครงสร้างอัตรากำลัง</div> <div class="toptitle text-dark row items-center q-py-xs">
โครงสร้างอัตรากำลัง
</div>
<q-space /> <q-space />
<div class="toptitle row items-center" v-if="store.typeOrganizational === 'draft'"> <div
class="toptitle row items-center"
v-if="store.typeOrganizational === 'draft'"
>
<div <div
v-if="store.isPublic && store.orgPublishDate" v-if="store.isPublic && store.orgPublishDate"
class=" q-pr-md text-caption" class="q-pr-md text-caption"
> >
วันที่เผยแพร่ : วันที่เผยแพร่ :
<strong>{{ date2Thai(store.orgPublishDate) }}</strong> <strong>{{ date2Thai(store.orgPublishDate) }}</strong>
</div> </div>
<q-btn <q-btn
@ -248,7 +267,13 @@ onMounted(async () => {
</q-btn-dropdown> </q-btn-dropdown>
</q-btn-group> </q-btn-group>
<q-btn-dropdown dense unelevated class="q-px-md" color="green-6" label="เพิ่มโครงสร้าง"> <q-btn-dropdown
dense
unelevated
class="q-px-md"
color="green-6"
label="เพิ่มโครงสร้าง"
>
<q-list> <q-list>
<q-item <q-item
dense dense
@ -265,9 +290,6 @@ onMounted(async () => {
</q-list> </q-list>
</q-btn-dropdown> </q-btn-dropdown>
<!-- <q-btn flat round color="primary" icon="history">
<q-tooltip>ประวัติโครงสร้าง</q-tooltip>
</q-btn> -->
<q-space /> <q-space />
<q-btn <q-btn
flat flat
@ -276,7 +298,7 @@ onMounted(async () => {
icon="mdi-file-tree" icon="mdi-file-tree"
@click="store.statusView = 'list'" @click="store.statusView = 'list'"
/> />
<q-separator inset vertical/> <q-separator inset vertical />
<q-btn <q-btn
flat flat
dense dense
@ -308,16 +330,14 @@ onMounted(async () => {
/> />
<!-- ตั้งเวลาเผยแพร่ --> <!-- ตั้งเวลาเผยแพร่ -->
<DialogDateTime :modal="modalDateTime" :close="onClickDateTime" :fetchActive="fetchOrganizationActive"/> <DialogDateTime
:modal="modalDateTime"
<!-- ประวัติโครงสร้าง --> :close="onClickDateTime"
<!-- <DialogHistory :modal="modalHistory" :close="onClickHistory" /> --> :fetchActive="fetchOrganizationActive"
/>
<!-- รายละเอียดโครงสร้าง -->
<!-- <DialogStructureDetail v-model:structure-detail="modalStructureDetail" /> -->
<!-- รายละเอียดตำแหน่ง --> <!-- รายละเอียดตำแหน่ง -->
<DialogPositionDetail v-model:position-detail="modalPositionDetail" /> <!-- <DialogPositionDetail v-model:position-detail="modalPositionDetail" /> -->
</template> </template>
<style scoped></style> <style scoped></style>